diff --git a/CHANGELOG.txt b/CHANGELOG.txt index 3c7325e9870c993807f5457d13eccbf887b5af51..668f27e704d582f679871057ee8e879eeb439394 100644 --- a/CHANGELOG.txt +++ b/CHANGELOG.txt @@ -8,6 +8,7 @@ Drupal x.x.x, xxxx-xx-xx (development version) * automatically generate the database configuration file * install pre-made 'install profiles' or distributions * import the database structure with automatic table prefixing +- included the jQuery JavaScript library and converted all core JavaScript to use it - introduced the ability to alter mail sent from system - moved core modules to their own directories to allow additional flexibility - added support for different cache backends diff --git a/includes/common.inc b/includes/common.inc index 90c620c63e0c086464f9dc6f9a09e146706dd342..73839d2d365700b4b46d3717e095f7cca7ad5ce7 100644 --- a/includes/common.inc +++ b/includes/common.inc @@ -1369,7 +1369,8 @@ function drupal_add_js($data = NULL, $type = 'module', $scope = 'header', $defer $javascript[$scope] = array('core' => array(), 'module' => array(), 'theme' => array(), 'setting' => array(), 'inline' => array()); if (empty($javascript['header']['core']['misc/drupal.js'])) { - drupal_add_js('misc/drupal.js', 'core'); + drupal_add_js('misc/jquery.js', 'core', 'header', FALSE, $cache); + drupal_add_js('misc/drupal.js', 'core', 'header', FALSE, $cache); } } diff --git a/misc/autocomplete.js b/misc/autocomplete.js index 49e7e0210e7f842b1fc2d7358f63e383df995b1b..e71f4afea5b48a0caad4754ac85c08f042b27250 100644 --- a/misc/autocomplete.js +++ b/misc/autocomplete.js @@ -1,76 +1,51 @@ // $Id$ -// Global Killswitch -if (isJsEnabled()) { - addLoadEvent(autocompleteAutoAttach); -} - /** * Attaches the autocomplete behaviour to all required fields */ -function autocompleteAutoAttach() { +Drupal.autocompleteAutoAttach = function () { var acdb = []; - var inputs = document.getElementsByTagName('input'); - for (i = 0; input = inputs[i]; i++) { - if (input && hasClass(input, 'autocomplete')) { - uri = input.value; - if (!acdb[uri]) { - acdb[uri] = new ACDB(uri); - } - input = $(input.id.substr(0, input.id.length - 13)); - input.setAttribute('autocomplete', 'OFF'); - addSubmitEvent(input.form, autocompleteSubmit); - new jsAC(input, acdb[uri]); + $('input.autocomplete').each(function () { + var uri = this.value; + if (!acdb[uri]) { + acdb[uri] = new Drupal.ACDB(uri); } - } + var input = $('#' + this.id.substr(0, this.id.length - 13)) + .attr('autocomplete', 'OFF')[0]; + $(input.form).submit(Drupal.autocompleteSubmit); + new Drupal.jsAC(input, acdb[uri]); + }); } /** * Prevents the form from submitting if the suggestions popup is open + * and closes the suggestions popup when doing so. */ -function autocompleteSubmit() { - var popup = document.getElementById('autocomplete'); - if (popup) { - popup.owner.hidePopup(); - return false; - } - return true; +Drupal.autocompleteSubmit = function () { + return $('#autocomplete').each(function () { + this.owner.hidePopup(); + }).size() == 0; } - /** * An AutoComplete object */ -function jsAC(input, db) { +Drupal.jsAC = function (input, db) { var ac = this; this.input = input; this.db = db; - this.input.onkeydown = function (event) { return ac.onkeydown(this, event); }; - this.input.onkeyup = function (event) { ac.onkeyup(this, event) }; - this.input.onblur = function () { ac.hidePopup(); ac.db.cancel(); }; - this.popup = document.createElement('div'); - this.popup.id = 'autocomplete'; - this.popup.owner = this; -}; -/** - * Hides the autocomplete suggestions - */ -jsAC.prototype.hidePopup = function (keycode) { - if (this.selected && ((keycode && keycode != 46 && keycode != 8 && keycode != 27) || !keycode)) { - this.input.value = this.selected.autocompleteValue; - } - if (this.popup.parentNode && this.popup.parentNode.tagName) { - removeNode(this.popup); - } - this.selected = false; -} + $(this.input) + .keydown(function (event) { return ac.onkeydown(this, event); }) + .keyup(function (event) { ac.onkeyup(this, event) }) + .blur(function () { ac.hidePopup(); ac.db.cancel(); }); +}; /** * Handler for the "keydown" event */ -jsAC.prototype.onkeydown = function (input, e) { +Drupal.jsAC.prototype.onkeydown = function (input, e) { if (!e) { e = window.event; } @@ -89,7 +64,7 @@ jsAC.prototype.onkeydown = function (input, e) { /** * Handler for the "keyup" event */ -jsAC.prototype.onkeyup = function (input, e) { +Drupal.jsAC.prototype.onkeyup = function (input, e) { if (!e) { e = window.event; } @@ -126,21 +101,21 @@ jsAC.prototype.onkeyup = function (input, e) { /** * Puts the currently highlighted suggestion into the autocomplete field */ -jsAC.prototype.select = function (node) { +Drupal.jsAC.prototype.select = function (node) { this.input.value = node.autocompleteValue; } /** * Highlights the next suggestion */ -jsAC.prototype.selectDown = function () { +Drupal.jsAC.prototype.selectDown = function () { if (this.selected && this.selected.nextSibling) { this.highlight(this.selected.nextSibling); } else { - var lis = this.popup.getElementsByTagName('li'); - if (lis.length > 0) { - this.highlight(lis[0]); + var lis = $('li', this.popup); + if (lis.size() > 0) { + this.highlight(lis.get(0)); } } } @@ -148,7 +123,7 @@ jsAC.prototype.selectDown = function () { /** * Highlights the previous suggestion */ -jsAC.prototype.selectUp = function () { +Drupal.jsAC.prototype.selectUp = function () { if (this.selected && this.selected.previousSibling) { this.highlight(this.selected.previousSibling); } @@ -157,30 +132,61 @@ jsAC.prototype.selectUp = function () { /** * Highlights a suggestion */ -jsAC.prototype.highlight = function (node) { - removeClass(this.selected, 'selected'); - addClass(node, 'selected'); +Drupal.jsAC.prototype.highlight = function (node) { + if (this.selected) { + $(this.selected).removeClass('selected'); + } + $(node).addClass('selected'); this.selected = node; } /** * Unhighlights a suggestion */ -jsAC.prototype.unhighlight = function (node) { - removeClass(node, 'selected'); +Drupal.jsAC.prototype.unhighlight = function (node) { + $(node).removeClass('selected'); + this.selected = false; +} + +/** + * Hides the autocomplete suggestions + */ +Drupal.jsAC.prototype.hidePopup = function (keycode) { + // Select item if the right key or mousebutton was pressed + if (this.selected && ((keycode && keycode != 46 && keycode != 8 && keycode != 27) || !keycode)) { + this.input.value = this.selected.autocompleteValue; + } + // Hide popup + var popup = this.popup; + if (popup) { + this.popup = null; + $(popup).fadeOut('fast', function() { $(popup).remove(); }); + } this.selected = false; } /** * Positions the suggestions popup and starts a search */ -jsAC.prototype.populatePopup = function () { - var ac = this; - var pos = absolutePosition(this.input); +Drupal.jsAC.prototype.populatePopup = function () { + // Show popup + if (this.popup) { + $(this.popup).remove(); + } + var pos = Drupal.absolutePosition(this.input); this.selected = false; - this.popup.style.top = (pos.y + this.input.offsetHeight) +'px'; - this.popup.style.left = pos.x +'px'; - this.popup.style.width = (this.input.offsetWidth - 4) +'px'; + this.popup = document.createElement('div'); + this.popup.id = 'autocomplete'; + this.popup.owner = this; + $(this.popup).css({ + top: (pos.y + this.input.offsetHeight) +'px', + left: pos.x +'px', + width: (this.input.offsetWidth - 4) +'px', + display: 'none' + }); + $('body').append(this.popup); + + // Do search this.db.owner = this; this.db.search(this.input.value); } @@ -188,45 +194,40 @@ jsAC.prototype.populatePopup = function () { /** * Fills the suggestion popup with any matches received */ -jsAC.prototype.found = function (matches) { - while (this.popup.hasChildNodes()) { - this.popup.removeChild(this.popup.childNodes[0]); - } - if (!this.popup.parentNode || !this.popup.parentNode.tagName) { - document.getElementsByTagName('body')[0].appendChild(this.popup); - } +Drupal.jsAC.prototype.found = function (matches) { + // Prepare matches var ul = document.createElement('ul'); var ac = this; - for (key in matches) { var li = document.createElement('li'); - var div = document.createElement('div'); - div.innerHTML = matches[key]; - li.appendChild(div); + $(li) + .html('<div>'+ matches[key] +'</div>') + .mousedown(function () { ac.select(this); }) + .mouseover(function () { ac.highlight(this); }) + .mouseout(function () { ac.unhighlight(this); }); li.autocompleteValue = key; - li.onmousedown = function() { ac.select(this); }; - li.onmouseover = function() { ac.highlight(this); }; - li.onmouseout = function() { ac.unhighlight(this); }; - ul.appendChild(li); + $(ul).append(li); } + // Show popup with matches, if any if (ul.childNodes.length > 0) { - this.popup.appendChild(ul); + $(this.popup).empty().append(ul).show(); } else { + $(this.popup).css({visibility: 'hidden'}); this.hidePopup(); } } -jsAC.prototype.setStatus = function (status) { +Drupal.jsAC.prototype.setStatus = function (status) { switch (status) { case 'begin': - addClass(this.input, 'throbbing'); + $(this.input).addClass('throbbing'); break; case 'cancel': case 'error': case 'found': - removeClass(this.input, 'throbbing'); + $(this.input).removeClass('throbbing'); break; } } @@ -234,7 +235,7 @@ jsAC.prototype.setStatus = function (status) { /** * An AutoComplete DataBase object */ -function ACDB(uri) { +Drupal.ACDB = function (uri) { this.uri = uri; this.delay = 300; this.cache = {}; @@ -243,47 +244,55 @@ function ACDB(uri) { /** * Performs a cached and delayed search */ -ACDB.prototype.search = function(searchString) { +Drupal.ACDB.prototype.search = function (searchString) { + var db = this; this.searchString = searchString; + + // See if this key has been searched for before if (this.cache[searchString]) { return this.owner.found(this.cache[searchString]); } + + // Initiate delayed search if (this.timer) { clearTimeout(this.timer); } - var db = this; this.timer = setTimeout(function() { db.owner.setStatus('begin'); - db.transport = HTTPGet(db.uri +'/'+ encodeURIComponent(searchString), db.receive, db); - }, this.delay); -} -/** - * HTTP callback function. Passes suggestions to the autocomplete object - */ -ACDB.prototype.receive = function(string, xmlhttp, acdb) { - // Note: Safari returns 'undefined' status if the request returns no data. - if (xmlhttp.status != 200 && typeof xmlhttp.status != 'undefined') { - acdb.owner.setStatus('error'); - return alert('An HTTP error '+ xmlhttp.status +' occured.\n'+ acdb.uri); - } - // Parse back result - var matches = parseJson(string); - if (typeof matches['status'] == 'undefined' || matches['status'] != 0) { - acdb.cache[acdb.searchString] = matches; - acdb.owner.found(matches); - acdb.owner.setStatus('found'); - } + // Ajax GET request for autocompletion + $.ajax({ + type: "GET", + url: db.uri +'/'+ Drupal.encodeURIComponent(searchString), + success: function (xmlhttp) { + // Parse back result + var matches = Drupal.parseJson(xmlhttp.responseText); + if (typeof matches['status'] == 'undefined' || matches['status'] != 0) { + db.cache[searchString] = matches; + // Verify if these are still the matches the user wants to see + if (db.searchString == searchString) { + db.owner.found(matches); + } + db.owner.setStatus('found'); + } + }, + error: function (xmlhttp) { + alert('An HTTP error '+ xmlhttp.status +' occured.\n'+ db.uri); + } + }); + }, this.delay); } /** * Cancels the current autocomplete request */ -ACDB.prototype.cancel = function() { +Drupal.ACDB.prototype.cancel = function() { if (this.owner) this.owner.setStatus('cancel'); if (this.timer) clearTimeout(this.timer); - if (this.transport) { - this.transport.onreadystatechange = function() {}; - this.transport.abort(); - } + this.searchString = ''; +} + +// Global Killswitch +if (Drupal.jsEnabled) { + $(document).ready(Drupal.autocompleteAutoAttach); } diff --git a/misc/collapse.js b/misc/collapse.js index b3695b51eea7573a014c817f99cf75d766134499..548c2b24ceedc726b0494c02f83e086d9c780731 100644 --- a/misc/collapse.js +++ b/misc/collapse.js @@ -1,70 +1,100 @@ // $Id$ -if (isJsEnabled()) { - addLoadEvent(collapseAutoAttach); -} - -function collapseAutoAttach() { - var fieldsets = document.getElementsByTagName('fieldset'); - var legend, fieldset; - for (var i = 0; fieldset = fieldsets[i]; i++) { - if (!hasClass(fieldset, 'collapsible')) { - continue; - } - legend = fieldset.getElementsByTagName('legend'); - if (legend.length == 0) { - continue; - } - legend = legend[0]; +Drupal.collapseAutoAttach = function () { + $('fieldset.collapsible legend').each(function () { + // Turn the legend into clickable link var a = document.createElement('a'); a.href = '#'; - a.onclick = function() { - toggleClass(this.parentNode.parentNode, 'collapsed'); - if (!hasClass(this.parentNode.parentNode, 'collapsed')) { - collapseScrollIntoView(this.parentNode.parentNode); - if (typeof textAreaAutoAttach != 'undefined') { - // Add the grippie to a textarea in a collapsed fieldset. - textAreaAutoAttach(null, this.parentNode.parentNode); + $(a) + .click(function() { + var fieldset = this.parentNode.parentNode; + + // Prevent double animations + if (fieldset.animating) { + return false; + } + fieldset.animating = true; + + if ($(fieldset).is('.collapsed')) { + // Open fieldset with animation + $(fieldset.contentWrapper).hide(); + $(fieldset).removeClass('collapsed'); + $(fieldset.contentWrapper).slideDown(300, + { + // Make sure we open to height auto + complete: function() { + $(fieldset.contentWrapper).css('height', 'auto'); + Drupal.collapseScrollIntoView(fieldset); + fieldset.animating = false; + }, + // Scroll the fieldset into view + step: function() { + Drupal.collapseScrollIntoView(fieldset); + } + } + ); + if (typeof Drupal.textareaAttach != 'undefined') { + // Initialize resizable textareas that are now revealed + Drupal.textareaAttach(null, fieldset); + } + } + else { + // Collapse fieldset with animation (reverse of opening) + $(fieldset.contentWrapper) + .slideUp('medium', function () { $(fieldset).addClass('collapsed'); fieldset.animating = false; } ) + .show(); } - } - this.blur(); - return false; - }; - a.innerHTML = legend.innerHTML; - while (legend.hasChildNodes()) { - removeNode(legend.childNodes[0]); + this.blur(); + return false; + }) + .html(this.innerHTML); + $(this) + .empty() + .append(a); + + // Wrap fieldsets contents (except for the legend) into wrapper divs for animating. + // div1 is used to avoid margin problems inside fieldsets, + // div2 is the one that is actually animated. + var div1 = document.createElement('div'); + var div2 = document.createElement('div'); + this.parentNode.contentWrapper = div2; + $(this).after(div1); + $(div1).append(div2); + var el = div1.nextSibling; + while (el != null) { + var next = el.nextSibling; + $(el).remove(); + $(div2).append(el); + el = next; } - legend.appendChild(a); - collapseEnsureErrorsVisible(fieldset); - } -} + // Avoid jumping around due to margins collapsing into fieldset border + $(div1).css('overflow', 'hidden'); -function collapseEnsureErrorsVisible(fieldset) { - if (!hasClass(fieldset, 'collapsed')) { - return; - } - var inputs = []; - inputs = inputs.concat(fieldset.getElementsByTagName('input')); - inputs = inputs.concat(fieldset.getElementsByTagName('textarea')); - inputs = inputs.concat(fieldset.getElementsByTagName('select')); - for (var j = 0; j<3; j++) { - for (var i = 0; i < inputs[j].length; i++) { - if (hasClass(inputs[j][i], 'error')) { - return removeClass(fieldset, 'collapsed'); - } + // Expand if there are errors inside + if ($('input.error, textarea.error, select.error', this.parentNode).size() > 0) { + $(this.parentNode).removeClass('collapsed'); } - } + }); } -function collapseScrollIntoView(node) { +/** + * Scroll a given fieldset into view as much as possible. + */ +Drupal.collapseScrollIntoView = function (node) { var h = self.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0; var offset = self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; - var pos = absolutePosition(node); - if (pos.y + node.scrollHeight > h + offset) { - if (node.scrollHeight > h) { + var pos = Drupal.absolutePosition(node); + var fudge = 55; + if (pos.y + node.offsetHeight + fudge > h + offset) { + if (node.offsetHeight > h) { window.scrollTo(0, pos.y); } else { - window.scrollTo(0, pos.y + node.scrollHeight - h); + window.scrollTo(0, pos.y + node.offsetHeight - h + fudge); } } } + +// Global Killswitch +if (Drupal.jsEnabled) { + $(document).ready(Drupal.collapseAutoAttach); +} diff --git a/misc/drupal.js b/misc/drupal.js index 927403ab1d11a9f1f2e09a7ebf433d2b0f95a660..fb0cf0ddfa7720ad6d801710659af72f54e34f4b 100644 --- a/misc/drupal.js +++ b/misc/drupal.js @@ -1,39 +1,14 @@ // $Id$ -/** - * Only enable Javascript functionality if all required features are supported. - */ -function isJsEnabled() { - if (typeof document.jsEnabled == 'undefined') { - // Note: ! casts to boolean implicitly. - document.jsEnabled = !( - !document.getElementsByTagName || - !document.createElement || - !document.createTextNode || - !document.documentElement || - !document.getElementById); - } - return document.jsEnabled; -} - -// Global Killswitch on the <html> element -if (isJsEnabled()) { - document.documentElement.className = 'js'; -} +var Drupal = Drupal || {}; /** - * The global Drupal variable. + * Set the variable that indicates if JavaScript behaviors should be applied */ -Drupal = { }; +Drupal.jsEnabled = document.getElementsByTagName && document.createElement && document.createTextNode && document.documentElement && document.getElementById; /** - * Merge an object into the Drupal namespace. - * - * @param obj - * The object that should be merged into the Drupal namespace. Arbitrary objects - * containing functions, variables or other objects can be used. An example object - * would be { settings: { tree: { '/js/menu/tree': { mid: 206 } } } }. This item - * can now be accessed at Drupal.settings.tree['/js/menu/tree'].mid. + * Extends the current object with the parameter. Works recursively. */ Drupal.extend = function(obj) { for (var i in obj) { @@ -44,109 +19,26 @@ Drupal.extend = function(obj) { this[i] = obj[i]; } } -}; - -/** - * Make IE's XMLHTTP object accessible through XMLHttpRequest() - */ -if (typeof XMLHttpRequest == 'undefined') { - XMLHttpRequest = function () { - var msxmls = ['MSXML3', 'MSXML2', 'Microsoft'] - for (var i=0; i < msxmls.length; i++) { - try { - return new ActiveXObject(msxmls[i]+'.XMLHTTP') - } - catch (e) { } - } - throw new Error("No XML component installed!"); - } -} - -/** - * Creates an HTTP GET request and sends the response to the callback function. - * - * Note that dynamic arguments in the URI should be escaped with encodeURIComponent(). - */ -function HTTPGet(uri, callbackFunction, callbackParameter) { - var xmlHttp = new XMLHttpRequest(); - var bAsync = true; - if (!callbackFunction) { - bAsync = false; - } - - xmlHttp.open('GET', uri, bAsync); - xmlHttp.send(null); - - if (bAsync) { - xmlHttp.onreadystatechange = function() { - if (xmlHttp.readyState == 4) { - callbackFunction(xmlHttp.responseText, xmlHttp, callbackParameter); - } - } - return xmlHttp; - } - else { - return xmlHttp.responseText; - } -} - -/** - * Creates an HTTP POST request and sends the response to the callback function - * - * Note: passing null or undefined for 'object' makes the request fail in Opera 8. - * Pass an empty string instead. - */ -function HTTPPost(uri, callbackFunction, callbackParameter, object) { - var xmlHttp = new XMLHttpRequest(); - var bAsync = true; - if (!callbackFunction) { - bAsync = false; - } - xmlHttp.open('POST', uri, bAsync); - - var toSend = ''; - if (typeof object == 'object') { - xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); - for (var i in object) { - toSend += (toSend ? '&' : '') + i + '=' + encodeURIComponent(object[i]); - } - } - else { - toSend = object; - } - xmlHttp.send(toSend); - - if (bAsync) { - xmlHttp.onreadystatechange = function() { - if (xmlHttp.readyState == 4) { - callbackFunction(xmlHttp.responseText, xmlHttp, callbackParameter); - } - } - return xmlHttp; - } - else { - return xmlHttp.responseText; - } -} +}, /** * Redirects a button's form submission to a hidden iframe and displays the result * in a given wrapper. The iframe should contain a call to * window.parent.iframeHandler() after submission. */ -function redirectFormButton(uri, button, handler) { - // (Re)create an iframe to target. - createIframe(); - +Drupal.redirectFormButton = function (uri, button, handler) { // Trap the button button.onmouseover = button.onfocus = function() { button.onclick = function() { + // Create target iframe + Drupal.createIframe(); + // Prepare variables for use in anonymous function. var button = this; var action = button.form.action; var target = button.form.target; - // Redirect form submission + // Redirect form submission to iframe this.form.action = uri; this.form.target = 'redirect-target'; @@ -154,7 +46,7 @@ function redirectFormButton(uri, button, handler) { // Set iframe handler for later window.iframeHandler = function () { - var iframe = $('redirect-target'); + var iframe = $('#redirect-target').get(0); // Restore form submission button.form.action = action; button.form.target = target; @@ -173,16 +65,15 @@ function redirectFormButton(uri, button, handler) { response = null; } - $('redirect-target').onload = null; - $('redirect-target').src = 'about:blank'; - - response = parseJson(response); + response = Drupal.parseJson(response); // Check response code if (response.status == 0) { handler.onerror(response.data); return; } handler.oncomplete(response.data); + + return true; } return true; @@ -191,43 +82,12 @@ function redirectFormButton(uri, button, handler) { button.onmouseout = button.onblur = function() { button.onclick = null; } -} - -/** - * Adds a function to the window onload event - */ -function addLoadEvent(func) { - var oldOnload = window.onload; - if (typeof window.onload != 'function') { - window.onload = func; - } - else { - window.onload = function() { - oldOnload(); - func(); - } - } -} - -/** - * Adds a function to a given form's submit event - */ -function addSubmitEvent(form, func) { - var oldSubmit = form.onsubmit; - if (typeof oldSubmit != 'function') { - form.onsubmit = func; - } - else { - form.onsubmit = function() { - return oldSubmit() && func(); - } - } -} +}, /** * Retrieves the absolute position of an element on the screen */ -function absolutePosition(el) { +Drupal.absolutePosition = function (el) { var sLeft = 0, sTop = 0; var isDiv = /^div$/i.test(el.tagName); if (isDiv && el.scrollLeft) { @@ -238,152 +98,109 @@ function absolutePosition(el) { } var r = { x: el.offsetLeft - sLeft, y: el.offsetTop - sTop }; if (el.offsetParent) { - var tmp = absolutePosition(el.offsetParent); + var tmp = Drupal.absolutePosition(el.offsetParent); r.x += tmp.x; r.y += tmp.y; } return r; -}; - -function dimensions(el) { - return { width: el.offsetWidth, height: el.offsetHeight }; -} +}, /** - * Returns true if an element has a specified class name + * Return the dimensions of an element on the screen */ -function hasClass(node, className) { - if (node.className == className) { - return true; - } - var reg = new RegExp('(^| )'+ className +'($| )') - if (reg.test(node.className)) { - return true; - } - return false; -} - -/** - * Adds a class name to an element - */ -function addClass(node, className) { - if (hasClass(node, className)) { - return false; - } - node.className += ' '+ className; - return true; -} - -/** - * Removes a class name from an element - */ -function removeClass(node, className) { - if (!hasClass(node, className)) { - return false; - } - // Replaces words surrounded with whitespace or at a string border with a space. Prevents multiple class names from being glued together. - node.className = eregReplace('(^|\\s+)'+ className +'($|\\s+)', ' ', node.className); - return true; -} - -/** - * Toggles a class name on or off for an element - */ -function toggleClass(node, className) { - if (!removeClass(node, className) && !addClass(node, className)) { - return false; - } - return true; -} - -/** - * Emulate PHP's ereg_replace function in javascript - */ -function eregReplace(search, replace, subject) { - return subject.replace(new RegExp(search,'g'), replace); -} - -/** - * Removes an element from the page - */ -function removeNode(node) { - if (typeof node == 'string') { - node = $(node); - } - if (node && node.parentNode) { - return node.parentNode.removeChild(node); - } - else { - return false; - } -} +Drupal.dimensions = function (el) { + return { width: el.offsetWidth, height: el.offsetHeight }; +}, /** - * Prevents an event from propagating. + * Returns the position of the mouse cursor based on the event object passed */ -function stopEvent(event) { - if (event.preventDefault) { - event.preventDefault(); - event.stopPropagation(); - } - else { - event.returnValue = false; - event.cancelBubble = true; - } -} +Drupal.mousePosition = function(e) { + return { x: e.clientX + document.documentElement.scrollLeft, y: e.clientY + document.documentElement.scrollTop }; +}, /** * Parse a JSON response. * * The result is either the JSON object, or an object with 'status' 0 and 'data' an error message. */ -function parseJson(data) { +Drupal.parseJson = function (data) { if ((data.substring(0, 1) != '{') && (data.substring(0, 1) != '[')) { return { status: 0, data: data.length ? data : 'Unspecified error' }; } return eval('(' + data + ');'); -} +}, /** * Create an invisible iframe for form submissions. */ -function createIframe() { - // Delete any previous iframe - deleteIframe(); +Drupal.createIframe = function () { + if ($('#redirect-holder').size()) { + return; + } // Note: some browsers require the literal name/id attributes on the tag, // some want them set through JS. We do both. window.iframeHandler = function () {}; var div = document.createElement('div'); div.id = 'redirect-holder'; - div.innerHTML = '<iframe name="redirect-target" id="redirect-target" class="redirect" onload="window.iframeHandler();"></iframe>'; + $(div).html('<iframe name="redirect-target" id="redirect-target" class="redirect" onload="window.iframeHandler();"></iframe>'); var iframe = div.firstChild; - with (iframe) { - name = 'redirect-target'; - setAttribute('name', 'redirect-target'); - id = 'redirect-target'; - } - with (iframe.style) { - position = 'absolute'; - height = '1px'; - width = '1px'; - visibility = 'hidden'; - } - document.body.appendChild(div); -} + $(iframe) + .attr({ + name: 'redirect-target', + id: 'redirect-target' + }) + .css({ + position: 'absolute', + height: '1px', + width: '1px', + visibility: 'hidden' + }); + $('body').append(div); +}, /** - * Delete the invisible iframe for form submissions. + * Delete the invisible iframe */ -function deleteIframe() { - var holder = $('redirect-holder'); - if (holder != null) { - removeNode(holder); - } +Drupal.deleteIframe = function () { + $('#redirect-holder').remove(); +}, + +/** + * Freeze the current body height (as minimum height). Used to prevent + * unnecessary upwards scrolling when doing DOM manipulations. + */ +Drupal.freezeHeight = function () { + Drupal.unfreezeHeight(); + var div = document.createElement('div'); + $(div).css({ + position: 'absolute', + top: '0px', + left: '0px', + width: '1px', + height: $('body').css('height') + }).attr('id', 'freeze-height'); + $('body').append(div); +}, + +/** + * Unfreeze the body height + */ +Drupal.unfreezeHeight = function () { + $('#freeze-height').remove(); } /** - * Wrapper around document.getElementById(). + * Wrapper to address the mod_rewrite url encoding bug + * (equivalent of drupal_urlencode() in PHP). */ -function $(id) { - return document.getElementById(id); +Drupal.encodeURIComponent = function (item, uri) { + uri = uri || location.href; + item = encodeURIComponent(item).replace('%2F', '/'); + return uri.indexOf('?q=') ? item : item.replace('%26', '%2526').replace('%23', '%2523'); +} + +// Global Killswitch on the <html> element +if (Drupal.jsEnabled) { + document.documentElement.className = 'js'; } diff --git a/misc/progress.js b/misc/progress.js index b519f066b5736a7657161585d6cbe102a2de5df0..1c2e93f05ac2f1b540ef80dff8ec42cdb40a5ed4 100644 --- a/misc/progress.js +++ b/misc/progress.js @@ -5,45 +5,35 @@ * the DOM afterwards through progressBar.element. * * method is the function which will perform the HTTP request to get the - * progress bar state. Either HTTPGet or HTTPPost. + * progress bar state. Either "GET" or "POST". * * e.g. pb = new progressBar('myProgressBar'); * some_element.appendChild(pb.element); */ -function progressBar(id, updateCallback, method, errorCallback) { +Drupal.progressBar = function (id, updateCallback, method, errorCallback) { var pb = this; this.id = id; - this.method = method ? method : HTTPGet; + this.method = method || "GET"; this.updateCallback = updateCallback; this.errorCallback = errorCallback; this.element = document.createElement('div'); this.element.id = id; this.element.className = 'progress'; - this.element.innerHTML = '<div class="percentage"></div>'+ - '<div class="message"> </div>'+ - '<div class="bar"><div class="filled"></div></div>'; + $(this.element).html('<div class="percentage"></div>'+ + '<div class="message"> </div>'+ + '<div class="bar"><div class="filled"></div></div>'); } /** * Set the percentage and status message for the progressbar. */ -progressBar.prototype.setProgress = function (percentage, message) { - var divs = this.element.getElementsByTagName('div'); - var div; - for (var i = 0; div = divs[i]; ++i) { - if (percentage >= 0) { - if (hasClass(divs[i], 'filled')) { - divs[i].style.width = percentage + '%'; - } - if (hasClass(divs[i], 'percentage')) { - divs[i].innerHTML = percentage + '%'; - } - } - if (hasClass(divs[i], 'message')) { - divs[i].innerHTML = message; - } +Drupal.progressBar.prototype.setProgress = function (percentage, message) { + if (percentage >= 0 && percentage <= 100) { + $('div.filled', this.element).css('width', percentage +'%'); + $('div.percentage', this.element).html(percentage +'%'); } + $('div.message', this.element).html(message); if (this.updateCallback) { this.updateCallback(percentage, message, this); } @@ -52,7 +42,7 @@ progressBar.prototype.setProgress = function (percentage, message) { /** * Start monitoring progress via Ajax. */ -progressBar.prototype.startMonitoring = function (uri, delay) { +Drupal.progressBar.prototype.startMonitoring = function (uri, delay) { this.delay = delay; this.uri = uri; this.sendPing(); @@ -61,7 +51,7 @@ progressBar.prototype.startMonitoring = function (uri, delay) { /** * Stop monitoring progress via Ajax. */ -progressBar.prototype.stopMonitoring = function () { +Drupal.progressBar.prototype.stopMonitoring = function () { clearTimeout(this.timer); // This allows monitoring to be stopped from within the callback this.uri = null; @@ -70,47 +60,44 @@ progressBar.prototype.stopMonitoring = function () { /** * Request progress data from server. */ -progressBar.prototype.sendPing = function () { +Drupal.progressBar.prototype.sendPing = function () { if (this.timer) { clearTimeout(this.timer); } if (this.uri) { - this.method(this.uri, this.receivePing, this, ''); - } -} - -/** - * HTTP callback function. Passes data back to the progressbar and sets a new - * timer for the next ping. - */ -progressBar.prototype.receivePing = function (string, xmlhttp, pb) { - if (xmlhttp.status != 200) { - return pb.displayError('An HTTP error '+ xmlhttp.status +' occured.\n'+ pb.uri); - } - // Parse response - var progress = parseJson(string); - // Display errors - if (progress.status == 0) { - pb.displayError(progress.data); - return; + var pb = this; + $.ajax({ + type: this.method, + url: this.uri, + success: function (xmlhttp) { + // Parse response + var progress = Drupal.parseJson(xmlhttp.responseText); + // Display errors + if (progress.status == 0) { + pb.displayError(progress.data); + return; + } + // Update display + pb.setProgress(progress.percentage, progress.message); + // Schedule next timer + pb.timer = setTimeout(function() { pb.sendPing(); }, pb.delay); + }, + error: function (xmlhttp) { + pb.displayError('An HTTP error '+ xmlhttp.status +' occured.\n'+ pb.uri); + } + }); } - - // Update display - pb.setProgress(progress.percentage, progress.message); - // Schedule next timer - pb.timer = setTimeout(function() { pb.sendPing(); }, pb.delay); } /** * Display errors on the page. */ -progressBar.prototype.displayError = function (string) { +Drupal.progressBar.prototype.displayError = function (string) { var error = document.createElement('div'); error.className = 'error'; error.innerHTML = string; - this.element.style.display = 'none'; - this.element.parentNode.insertBefore(error, this.element); + $(this.element).before(error).hide(); if (this.errorCallback) { this.errorCallback(this); diff --git a/misc/textarea.js b/misc/textarea.js index 3e5f4789cfa448fb45cc08957e4b3e529cf88d43..bf89329372569d5b7ab2f8557ac0993d946005a6 100644 --- a/misc/textarea.js +++ b/misc/textarea.js @@ -1,122 +1,34 @@ // $Id$ -if (isJsEnabled()) { - addLoadEvent(textAreaAutoAttach); -} - -function textAreaAutoAttach(event, parent) { - if (typeof parent == 'undefined') { - // Attach to all visible textareas. - textareas = document.getElementsByTagName('textarea'); - } - else { - // Attach to all visible textareas inside parent. - textareas = parent.getElementsByTagName('textarea'); - } - var textarea; - for (var i = 0; textarea = textareas[i]; ++i) { - if (hasClass(textarea, 'resizable') && !hasClass(textarea.nextSibling, 'grippie')) { - if (typeof dimensions(textarea).width != 'undefined' && dimensions(textarea).width != 0) { - new textArea(textarea); - } +Drupal.textareaAttach = function() { + $('textarea.resizable:not(.processed)').each(function() { + var textarea = $(this).addClass('processed'), staticOffset = null; + + $(this).wrap('<div class="resizable-textarea"></div>') + .parent().append($('<div class="grippie"></div>').mousedown(startDrag)); + + var grippie = $('div.grippie', $(this).parent())[0]; + grippie.style.marginRight = (grippie.offsetWidth - $(this)[0].offsetWidth) +'px'; + + function startDrag(e) { + staticOffset = textarea.height() - Drupal.mousePosition(e).y; + textarea.css('opacity', 0.25); + $(document).mousemove(performDrag).mouseup(endDrag); + return false; } - } -} - -function textArea(element) { - var ta = this; - this.element = element; - this.parent = this.element.parentNode; - this.dimensions = dimensions(element); - - // Prepare wrapper - this.wrapper = document.createElement('div'); - this.wrapper.className = 'resizable-textarea'; - this.parent.insertBefore(this.wrapper, this.element); - - // Add grippie and measure it - this.grippie = document.createElement('div'); - this.grippie.className = 'grippie'; - this.wrapper.appendChild(this.grippie); - this.grippie.dimensions = dimensions(this.grippie); - this.grippie.onmousedown = function (e) { ta.beginDrag(e); }; - - // Set wrapper and textarea dimensions - this.wrapper.style.height = this.dimensions.height + this.grippie.dimensions.height + 1 +'px'; - this.element.style.marginBottom = '0px'; - this.element.style.width = '100%'; - this.element.style.height = this.dimensions.height +'px'; - - // Wrap textarea - removeNode(this.element); - this.wrapper.insertBefore(this.element, this.grippie); - - // Measure difference between desired and actual textarea dimensions to account for padding/borders - this.widthOffset = dimensions(this.wrapper).width - this.dimensions.width; - - // Make the grippie line up in various browsers - if (window.opera) { - // Opera - this.grippie.style.marginRight = '4px'; - } - if (document.all && !window.opera) { - // IE - this.grippie.style.width = '100%'; - this.grippie.style.paddingLeft = '2px'; - } - // Mozilla - this.element.style.MozBoxSizing = 'border-box'; - - this.heightOffset = absolutePosition(this.grippie).y - absolutePosition(this.element).y - this.dimensions.height; -} -textArea.prototype.beginDrag = function (event) { - if (document.isDragging) { - return; - } - document.isDragging = true; - - event = event || window.event; - // Capture mouse - var cp = this; - this.oldMoveHandler = document.onmousemove; - document.onmousemove = function(e) { cp.handleDrag(e); }; - this.oldUpHandler = document.onmouseup; - document.onmouseup = function(e) { cp.endDrag(e); }; - - // Store drag offset from grippie top - var pos = absolutePosition(this.grippie); - this.dragOffset = event.clientY - pos.y; - - // Make transparent - this.element.style.opacity = 0.5; - - // Process - this.handleDrag(event); -} - -textArea.prototype.handleDrag = function (event) { - event = event || window.event; - // Get coordinates relative to text area - var pos = absolutePosition(this.element); - var y = event.clientY - pos.y; - - // Set new height - var height = Math.max(32, y - this.dragOffset - this.heightOffset); - this.wrapper.style.height = height + this.grippie.dimensions.height + 1 + 'px'; - this.element.style.height = height + 'px'; + function performDrag(e) { + textarea.height(Math.max(32, staticOffset + Drupal.mousePosition(e).y) + 'px'); + return false; + } - // Avoid text selection - stopEvent(event); + function endDrag(e) { + $(document).unmousemove(performDrag).unmouseup(endDrag); + textarea.css('opacity', 1); + } + }); } -textArea.prototype.endDrag = function (event) { - // Uncapture mouse - document.onmousemove = this.oldMoveHandler; - document.onmouseup = this.oldUpHandler; - - // Restore opacity - this.element.style.opacity = 1.0; - document.isDragging = false; +if (Drupal.jsEnabled) { + $(document).ready(Drupal.textareaAttach); } - diff --git a/misc/update.js b/misc/update.js index 9177296a11211eff65fdc0b7259982bac4824964..46272f6ef44ac4e1ad522868e8b4635c7028ff1a 100644 --- a/misc/update.js +++ b/misc/update.js @@ -1,12 +1,11 @@ // $Id$ -if (isJsEnabled()) { - addLoadEvent(function() { - if ($('edit-has_js')) { - $('edit-has_js').value = 1; - } +if (Drupal.jsEnabled) { + $(document).ready(function() { + $('#edit-has_js').each(function() { this.value = 1; }); + $('#progress').each(function () { + var holder = this; - if ($('progress')) { // Success: redirect to the summary. var updateCallback = function (progress, status, pb) { if (progress == 100) { @@ -19,15 +18,15 @@ if (isJsEnabled()) { var errorCallback = function (pb) { var div = document.createElement('p'); div.className = 'error'; - div.innerHTML = 'An unrecoverable error has occured. You can find the error message below. It is advised to copy it to the clipboard for reference. Please continue to the <a href="update.php?op=error">update summary</a>'; - $('progress').insertBefore(div, $('progress').firstChild); - $('wait').style.display = 'none'; + $(div).html('An unrecoverable error has occured. You can find the error message below. It is advised to copy it to the clipboard for reference. Please continue to the <a href="update.php?op=error">update summary</a>'); + $(holder).prepend(div); + $('#wait').hide(); } - var progress = new progressBar('updateprogress', updateCallback, HTTPPost, errorCallback); + var progress = new Drupal.progressBar('updateprogress', updateCallback, "POST", errorCallback); progress.setProgress(-1, 'Starting updates'); - $('progress').appendChild(progress.element); + $(holder).append(progress.element); progress.startMonitoring('update.php?op=do_update', 0); - } + }); }); } diff --git a/misc/upload.js b/misc/upload.js index 4365749cfc363dc375342a387d1d61a0e8d7d2f9..5dd32cf81d80f4d460620bb39dde3d44921dae4d 100644 --- a/misc/upload.js +++ b/misc/upload.js @@ -1,76 +1,116 @@ // $Id$ -// Global killswitch -if (isJsEnabled()) { - addLoadEvent(uploadAutoAttach); -} - /** * Attaches the upload behaviour to the upload form. */ -function uploadAutoAttach() { - var inputs = document.getElementsByTagName('input'); - for (i = 0; input = inputs[i]; i++) { - if (input && hasClass(input, 'upload')) { - var uri = input.value; - // Extract the base name from the id (edit-attach-url -> attach). - var base = input.id.substring(5, input.id.length - 4); - var button = base + '-button'; - var wrapper = base + '-wrapper'; - var hide = base + '-hide'; - var upload = new jsUpload(uri, button, wrapper, hide); - } - } +Drupal.uploadAutoAttach = function() { + $('input.upload').each(function () { + var uri = this.value; + // Extract the base name from the id (edit-attach-url -> attach). + var base = this.id.substring(5, this.id.length - 4); + var button = base + '-button'; + var wrapper = base + '-wrapper'; + var hide = base + '-hide'; + var upload = new Drupal.jsUpload(uri, button, wrapper, hide); + }); } /** * JS upload object. */ -function jsUpload(uri, button, wrapper, hide) { - this.button = button; - this.wrapper = wrapper; - this.hide = hide; - redirectFormButton(uri, $(button), this); +Drupal.jsUpload = function(uri, button, wrapper, hide) { + // Note: these elements are replaced after an upload, so we re-select them + // everytime they are needed. + this.button = '#'+ button; + this.wrapper = '#'+ wrapper; + this.hide = '#'+ hide; + Drupal.redirectFormButton(uri, $(this.button).get(0), this); } /** * Handler for the form redirection submission. */ -jsUpload.prototype.onsubmit = function () { - var hide = $(this.hide); +Drupal.jsUpload.prototype.onsubmit = function () { // Insert progressbar and stretch to take the same space. - this.progress = new progressBar('uploadprogress'); + this.progress = new Drupal.progressBar('uploadprogress'); this.progress.setProgress(-1, 'Uploading file'); - this.progress.element.style.width = '28em'; - this.progress.element.style.height = hide.offsetHeight +'px'; - hide.parentNode.insertBefore(this.progress.element, hide); - // Hide file form (cannot use display: none, this mysteriously aborts form - // submission in Konqueror) - hide.style.position = 'absolute'; - hide.style.left = '-2000px'; + + var hide = this.hide; + var el = this.progress.element; + var offset = $(hide).get(0).offsetHeight; + $(el).css({ + width: '28em', + height: offset +'px', + paddingTop: '10px', + display: 'none' + }); + $(hide).css('position', 'absolute'); + + $(hide).after(el); + $(el).fadeIn('slow'); + $(hide).fadeOut('slow'); } /** * Handler for the form redirection completion. */ -jsUpload.prototype.oncomplete = function (data) { - // Remove progressbar - removeNode(this.progress.element); - this.progress = null; - // Replace form and re-attach behaviour - $(this.wrapper).innerHTML = data; - uploadAutoAttach(); +Drupal.jsUpload.prototype.oncomplete = function (data) { + // Remove old form + Drupal.freezeHeight(); // Avoid unnecessary scrolling + $(this.wrapper).html(''); + + // Place HTML into temporary div + var div = document.createElement('div'); + $(div).html(data); + + // If uploading the first attachment fade in everything + if ($('tr', div).size() == 2) { + // Replace form and re-attach behaviour + $(div).hide(); + $(this.wrapper).append(div); + $(div).fadeIn('slow'); + Drupal.uploadAutoAttach(); + } + // Else fade in only the last table row + else { + // Hide form and last table row + $('table tr:last-of-type td', div).hide(); + + // Note: workaround because jQuery's #id selector does not work outside of 'document' + // Should be: $(this.hide, div).hide(); + var hide = this.hide; + $('div', div).each(function() { + if (('#'+ this.id) == hide) { + this.style.display = 'none'; + } + }); + + // Replace form, fade in items and re-attach behaviour + $(this.wrapper).append(div); + $('table tr:last-of-type td', div).fadeIn('slow'); + $(this.hide, div).fadeIn('slow'); + Drupal.uploadAutoAttach(); + } + Drupal.unfreezeHeight(); } /** * Handler for the form redirection error. */ -jsUpload.prototype.onerror = function (error) { +Drupal.jsUpload.prototype.onerror = function (error) { alert('An error occurred:\n\n'+ error); // Remove progressbar - removeNode(this.progress.element); + $(this.progress.element).remove(); this.progress = null; // Undo hide - $(this.hide).style.position = 'static'; - $(this.hide).style.left = '0px'; + $(this.hide).css({ + position: 'static', + left: '0px' + }); +} + + +// Global killswitch +if (Drupal.jsEnabled) { + $(document).ready(Drupal.uploadAutoAttach); } diff --git a/modules/system/system.css b/modules/system/system.css index 02ec1581fb6495032190614e2898facb09475701..cf28f9438a11e1bb71ebdc1482a9d79f27b4c87b 100644 --- a/modules/system/system.css +++ b/modules/system/system.css @@ -235,24 +235,29 @@ html.js fieldset.collapsed { border-left-width: 0; border-right-width: 0; margin-bottom: 0; + height: 1em; } html.js fieldset.collapsed * { display: none; } -html.js fieldset.collapsed table *, -html.js fieldset.collapsed legend, -html.js fieldset.collapsed legend * { - display: inline; +html.js fieldset.collapsed legend { + display: block; } html.js fieldset.collapsible legend a { padding-left: 15px; - background: url(../../misc/menu-expanded.png) 5px 50% no-repeat; + background: url(../../misc/menu-expanded.png) 5px 75% no-repeat; } html.js fieldset.collapsed legend a { background-image: url(../../misc/menu-collapsed.png); + background-position: 5px 50%; } /* Note: IE-only fix due to '* html' (breaks Konqueror otherwise). */ -* html.js fieldset.collapsible legend a { +* html.js fieldset.collapsed legend, +* html.js fieldset.collapsed legend *, +* html.js fieldset.collapsed table * { + display: inline; +} +html.js fieldset.collapsible legend a { display: block; } @@ -269,6 +274,10 @@ html.js fieldset.collapsed legend a { border-top-width: 0; cursor: s-resize; } +html.js .resizable-textarea textarea { + margin-bottom: 0; + width: 100%; +} /* ** Progressbar styles diff --git a/modules/user/user.module b/modules/user/user.module index 27bfaf0146a3487d746ef71fbf8c3832e11544a5..2dc1213a52ffcb241a4f6e284040dab1f076333c 100644 --- a/modules/user/user.module +++ b/modules/user/user.module @@ -2358,7 +2358,7 @@ function _user_forms(&$edit, $account, $category, $hook = 'form') { /** * Retrieve a pipe delimited string of autocomplete suggestions for existing users */ -function user_autocomplete($string) { +function user_autocomplete($string = '') { $matches = array(); $result = db_query_range("SELECT name FROM {users} WHERE LOWER(name) LIKE LOWER('%s%%')", $string, 0, 10); while ($user = db_fetch_object($result)) { diff --git a/update.php b/update.php index 2e9390d08d805416dabad26df0bc7d884ca61d00..d43c7845a62ed9802eb3f956caaafcb3c18892f8 100644 --- a/update.php +++ b/update.php @@ -322,7 +322,7 @@ function update_selection_page() { drupal_set_title('Drupal database update'); // Prevent browser from using cached drupal.js or update.js - drupal_add_js('misc/update.js', TRUE); + drupal_add_js('misc/update.js', 'core', 'header', FALSE, TRUE); $output .= drupal_get_form('update_script_selection_form'); return $output; @@ -403,8 +403,8 @@ function update_update_page() { function update_progress_page() { // Prevent browser from using cached drupal.js or update.js - drupal_add_js('misc/progress.js', TRUE); - drupal_add_js('misc/update.js', TRUE); + drupal_add_js('misc/progress.js', 'core', 'header', FALSE, TRUE); + drupal_add_js('misc/update.js', 'core', 'header', FALSE, TRUE); drupal_set_title('Updating'); $output = '<div id="progress"></div>';