| 1 |
// $Id: mysite.js,v 1.13 2007/09/01 21:18:33 agentken Exp $
|
| 2 |
|
| 3 |
/**
|
| 4 |
* @file
|
| 5 |
* JavaScript functions for MySite. Includes collapsible <div> tags and
|
| 6 |
* Interface-compatible functions for drag-and-drop sorting.
|
| 7 |
*/
|
| 8 |
|
| 9 |
/**
|
| 10 |
* Because <fieldset> is only valid HTML for <form> elements
|
| 11 |
* we rewrite Drupal's collpase.js functions to work with special <div>
|
| 12 |
* elements in MySite.
|
| 13 |
*/
|
| 14 |
|
| 15 |
/**
|
| 16 |
* Toggle the visibility of a div using smooth animations
|
| 17 |
*/
|
| 18 |
Drupal.toggleDiv = function(div) {
|
| 19 |
if ($(div).is('.collapsed')) {
|
| 20 |
var content = $('> div', div).hide();
|
| 21 |
$(div).removeClass('collapsed');
|
| 22 |
content.slideDown( {
|
| 23 |
duration: 300, // THE FIX
|
| 24 |
complete: function() {
|
| 25 |
// Make sure we open to height auto
|
| 26 |
$(this).css('height', 'auto');
|
| 27 |
Drupal.collapseScrollIntoView(this.parentNode);
|
| 28 |
this.parentNode.animating = false;
|
| 29 |
},
|
| 30 |
step: function() {
|
| 31 |
// Scroll the div into view
|
| 32 |
Drupal.collapseScrollIntoView(this.parentNode);
|
| 33 |
}
|
| 34 |
});
|
| 35 |
if (typeof Drupal.textareaAttach != 'undefined') {
|
| 36 |
// Initialize resizable textareas that are now revealed
|
| 37 |
Drupal.textareaAttach(null, div);
|
| 38 |
}
|
| 39 |
}
|
| 40 |
else {
|
| 41 |
var content = $('> div', div).slideUp('medium', function() {
|
| 42 |
$(this.parentNode).addClass('collapsed');
|
| 43 |
this.parentNode.animating = false;
|
| 44 |
});
|
| 45 |
}
|
| 46 |
}
|
| 47 |
|
| 48 |
/**
|
| 49 |
* Scroll a given div into view as much as possible.
|
| 50 |
*/
|
| 51 |
Drupal.collapseScrollIntoView = function (node) {
|
| 52 |
var h = self.innerHeight || document.documentElement.clientHeight || $('body')[0].clientHeight || 0;
|
| 53 |
var offset = self.pageYOffset || document.documentElement.scrollTop || $('body')[0].scrollTop || 0;
|
| 54 |
var pos = Drupal.absolutePosition(node);
|
| 55 |
var fudge = 55;
|
| 56 |
if (pos.y + node.offsetHeight + fudge > h + offset) {
|
| 57 |
if (node.offsetHeight > h) {
|
| 58 |
window.scrollTo(0, pos.y);
|
| 59 |
} else {
|
| 60 |
window.scrollTo(0, pos.y + node.offsetHeight - h + fudge);
|
| 61 |
}
|
| 62 |
}
|
| 63 |
}
|
| 64 |
|
| 65 |
// Global Killswitch
|
| 66 |
if (Drupal.jsEnabled) {
|
| 67 |
$(document).ready(function() {
|
| 68 |
$('div.collapsible > span.mysite-header').each(function() {
|
| 69 |
var div = $(this.parentNode);
|
| 70 |
// Expand if there are errors inside
|
| 71 |
if ($('input.error, textarea.error, select.error', div).size() > 0) {
|
| 72 |
div.removeClass('collapsed');
|
| 73 |
}
|
| 74 |
|
| 75 |
// Turn the span into a clickable link and wrap the contents of the div
|
| 76 |
// in a div for easier animation
|
| 77 |
var text = this.innerHTML;
|
| 78 |
$(this).empty().append($('<a href="#" title="Click to expand/collapse. Click and drag to sort.">'+ text +'</a>').click(function() {
|
| 79 |
var div = $(this).parents('div:first')[0];
|
| 80 |
// Don't animate multiple times
|
| 81 |
if (!div.animating) {
|
| 82 |
div.animating = true;
|
| 83 |
Drupal.toggleDiv(div);
|
| 84 |
}
|
| 85 |
return false;
|
| 86 |
})).after($('<div class="mysite-wrapper"></div>').append(div.children(':not(span.mysite-header)')));
|
| 87 |
});
|
| 88 |
});
|
| 89 |
}
|
| 90 |
|
| 91 |
/**
|
| 92 |
* jQuery Interface functions for MySite
|
| 93 |
*/
|
| 94 |
$(document).ready(
|
| 95 |
function () {
|
| 96 |
$('div.mysite-sortable').Sortable(
|
| 97 |
{
|
| 98 |
handle: 'span.mysite-header',
|
| 99 |
accept : 'sortable-item',
|
| 100 |
onchange : function (obj) {
|
| 101 |
serial = $.SortSerialize(obj.id);
|
| 102 |
mysite_ajax_call(serial.hash);
|
| 103 |
},
|
| 104 |
fx: 200,
|
| 105 |
axis: 'float',
|
| 106 |
tolerance: 'intersect',
|
| 107 |
activeclass: 'mysite-active',
|
| 108 |
hoverclass: 'mysite-hover',
|
| 109 |
helperclass: 'mysite-helper',
|
| 110 |
ghosting: true,
|
| 111 |
opacity: 0.75
|
| 112 |
}
|
| 113 |
)
|
| 114 |
}
|
| 115 |
);
|
| 116 |
|
| 117 |
/**
|
| 118 |
* The ajax callback function to save changes
|
| 119 |
*/
|
| 120 |
function mysite_ajax_call(serial) {
|
| 121 |
var serial = serial.replace(/&/g, ':');
|
| 122 |
var serial = serial.replace(/=m/g, '=');
|
| 123 |
var data = serial.replace(/mysite-sort/g, '');
|
| 124 |
var url = document.URL;
|
| 125 |
var request = url.replace(/mysite.+/, 'ajax/mysite-sort/') + data;
|
| 126 |
$.get(request);
|
| 127 |
mysite_message();
|
| 128 |
}
|
| 129 |
|
| 130 |
/**
|
| 131 |
* Trigger a display message to the user.
|
| 132 |
* Translators: edit the $string variable.
|
| 133 |
*/
|
| 134 |
function mysite_message() {
|
| 135 |
$string = 'Changes saved.';
|
| 136 |
// clear existing messages
|
| 137 |
$("div.messages").hide();
|
| 138 |
$("div.mysite-ajax").empty();
|
| 139 |
// insert and remove the message
|
| 140 |
$("div.mysite-ajax").fadeIn(100, function(){
|
| 141 |
$("div.mysite-ajax").append('<div class="messages">' + $string + '</div>');
|
| 142 |
});
|
| 143 |
$("div.mysite-ajax").fadeOut(5000, function(){
|
| 144 |
$("div.mysite-ajax").empty();
|
| 145 |
});
|
| 146 |
}
|