X-Git-Url: https://dev.renevier.net/?p=syj.git;a=blobdiff_plain;f=public%2Fjs%2Futils.js;h=a81262fac5a89db5ae9151831225f078209c66fa;hp=8936797b79db1080f973fde7d49764eeaa44a1be;hb=79315e38eea4482f92049e0d1b40fb35f8f4a3ff;hpb=6633e95b89c1d1eba9b7b0e612becaf11b085d69 diff --git a/public/js/utils.js b/public/js/utils.js index 8936797..a81262f 100644 --- a/public/js/utils.js +++ b/public/js/utils.js @@ -1,6 +1,8 @@ /* 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(); + } }); } }); @@ -398,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) { @@ -420,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; - }, + } - addMessage: function(div, message) { + function setMessage(div, message, status) { + removeMessages(div); + if (status) { + div.setMessageStatus(status); + } + if (message) { + div.addMessage(message); + } + return div; + } + + function addMessage(div, message) { var node = (div.ownerDocument || document).createTextNode(message); if ($A(div.childNodes).filter(function(node) { @@ -434,10 +519,13 @@ Element.addMethods('div', { } div.appendChild(node); - return div.show(); - }, + if (!div.getOpacity()) { + show(div); + } + return div; + } - setMessageStatus: function(div, status) { + function setMessageStatus(div, status) { $A(["error", "warn", "info", "success", "optional"]).each(function(clname) { div.removeClassName(clname); }); @@ -450,4 +538,12 @@ Element.addMethods('div', { } return div; } -}); + + return { + setMessage: setMessage, + clearMessages: clearMessages, + addMessage: addMessage, + setMessageStatus: setMessageStatus + }; + +})());