X-Git-Url: https://dev.renevier.net/?p=syj.git;a=blobdiff_plain;f=public%2Fjs%2Futils.js;h=cda9bfecab6a02fc9ce1e60e28780263880ac604;hp=b16a9c2ec4206c1ec83bba7ca38e20f425585a60;hb=36a21a430d77f914b32eed29019f1f3cd5e9c3fa;hpb=868eea06f69fbfdb361d5c9142ecce98918d927b diff --git a/public/js/utils.js b/public/js/utils.js index b16a9c2..cda9bfe 100644 --- a/public/js/utils.js +++ b/public/js/utils.js @@ -1,6 +1,8 @@ -/* This file is part of Syj, Copyright (c) 2010 Arnaud Renevier, +/* This file is part of Syj, Copyright (c) 2010-2011 Arnaud Renevier, and is published under the AGPL license. */ +"use strict"; + var CloseBtn = Class.create({ initialize: function(elt, options) { var btn, imgsrc, style; @@ -32,7 +34,11 @@ var CloseBtn = Class.create({ if (typeof options.callback === "function") { options.callback.call(elt); } - elt.hide(); + if (typeof elt.clearMessages === "function") { + elt.clearMessages(); + } else { + elt.hide(); + } }); } }); @@ -212,7 +218,8 @@ Ajax.Responders.register({ // wrapper around Form.request that sets up the submit listener, stops the // submit event, calls presubmit function, calls Form.request and calls a -// postsubmit function +// postsubmit function. If form has some visible and activated file inputs, +// execute presubmit, but do not send the file with ajax. Element.addMethods('form', { ajaxize : function(form, options) { var reqoptions; @@ -220,7 +227,6 @@ Element.addMethods('form', { options = Object.clone(options || {}); $(form).observe('submit', function(evt) { - evt.stop(); // cancel form submission reqoptions = Object.clone(options); delete(reqoptions.presubmit); @@ -229,10 +235,30 @@ Element.addMethods('form', { if (Object.isFunction(options.presubmit)) { if (options.presubmit(this) === false) { + evt.stop(); // cancel form submission return; } } + // get list of input file not disabled, and not hidden + if (this.getInputs('file').find(function(elt) { + if (elt.disabled) { + return false; + } + while (elt && $(elt).identify() !== this.identify()) { + if (!elt.visible()) { + return false; + } + elt = elt.parentNode; + } + return true; + }.bind(this))) { + // form has some file inputs. Do not manage on our own. + return; + } + + evt.stop(); // cancel form submission + var params = reqoptions.parameters, action = this.readAttribute('action') || ''; if (action.blank()) { @@ -378,19 +404,44 @@ Element.addMethods(['input', 'textarea'], { } }); -Element.addMethods('div', { - setMessage: function(div, message, status) { - div.clearMessages(); - if (status) { - div.setMessageStatus(status); +Element.addMethods('div', (function() { + var supportsTransition = false, endTransitionEventName = null; + + if (window.addEventListener) { // fails badly in ie: prevents page from loading + var div = $(document.createElement('div')); + var timeout = null; + + var cleanup = function() { + if (timeout) { + window.clearTimeout(timeout); + timeout = null; + div.stopObserving('webkitTransitionEnd'); + div.stopObserving('transitionend'); + div.stopObserving('oTransitionend'); + Element.remove.defer(div); + } } - if (message) { - div.addMessage(message); + + var handler = function(e) { + supportsTransition = true; + endTransitionEventName = e.type; + cleanup(); } - return div; - }, + div.observe('webkitTransitionEnd', handler).observe('transitionend', handler) .observe('oTransitionend', handler); + div.setStyle({'transitionProperty': 'opacity', + 'MozTransitionProperty': 'opacity', + 'WebkitTransitionProperty': 'opacity', + 'OTransitionProperty': 'opacity', + 'transitionDuration': '1ms', + 'MozTransitionDuration': '1ms', + 'WebkitTransitionDuration': '1ms', + 'OTransitionDuration': '1ms'}); + $(document.documentElement).insert(div); + Element.setOpacity.defer(div, 0); + window.setTimeout(cleanup, 100); + } - clearMessages: function(div) { + function removeMessages(div) { var node = div.firstChild, nextNode; while (node) { @@ -400,11 +451,65 @@ Element.addMethods('div', { } node = nextNode; } + return div; + }; + + function hasOpacityTransition(div) { + return ([div.getStyle('transition-property'), + div.getStyle('-moz-transition-property'), + div.getStyle('-webkit-transition-property'), + div.getStyle('-o-transition-property') + ].join(' ').split(' ').indexOf('opacity') !== -1); + } + + function hide(div) { + div = $(div); + if (supportsTransition && hasOpacityTransition(div)) { + div.observe(endTransitionEventName, function() { + div.stopObserving(endTransitionEventName); + if (!div.getOpacity()) { // in case show has been called in-between + div.hide(); + } + }); + div.setOpacity(0); + } else { + div.hide(); + } + } + + function show(div) { + div = $(div); + div.show(); + // we need to set opacity to 0 before calling hasOpacityTransition + // otherwise we trigger mozilla #601190 + div.setOpacity(0); + if (supportsTransition && hasOpacityTransition(div)) { + // display = '' then opacity = 1; + Element.setOpacity.defer(div, 1); + } else { + div.setOpacity(1); + } + } + function clearMessages(div) { + if (div.getOpacity()) { + hide(div); + } return div; - }, + } + + function setMessage(div, message, status) { + removeMessages(div); + if (status) { + div.setMessageStatus(status); + } + if (message) { + div.addMessage(message); + } + return div; + } - addMessage: function(div, message) { + function addMessage(div, message) { var node = (div.ownerDocument || document).createTextNode(message); if ($A(div.childNodes).filter(function(node) { @@ -414,14 +519,31 @@ Element.addMethods('div', { } div.appendChild(node); - return div.show(); - }, + if (div.getOpacity()) { + show(div); + } + return div; + } - setMessageStatus: function(div, status) { - return div.removeClassName('error'). - removeClassName('warn'). - removeClassName('info'). - removeClassName('success'). - addClassName(status); + function setMessageStatus(div, status) { + $A(["error", "warn", "info", "success", "optional"]).each(function(clname) { + div.removeClassName(clname); + }); + if (typeof status === "string") { + div.addClassName(status); + } else { + $A(status).each(function(clname) { + div.addClassName(clname); + }); + } + return div; } -}); + + return { + setMessage: setMessage, + clearMessages: clearMessages, + addMessage: addMessage, + setMessageStatus: setMessageStatus + }; + +})());