transition when message is shown/hidden

diff --git a/public/css/generic.css b/public/css/generic.css
index 93e635f09920617836a358f573c0e4a302ac3912..43c3da8ab77fbda3c14c24bfcad7c34e794ff07f 100644 (file)
--- a/public/css/generic.css
+++ b/public/css/generic.css
@@ -18,6 +18,10 @@ body, html {
     border-radius: 5px;
     border-width: 2px;
     border-style: solid;
+    transition:opacity 0.5s;
+    -webkit-transition:opacity 0.5s;
+    -moz-transition:opacity 0.5s;
+    -o-transition: opacity 0.5s;
 }
 
 .disabled {

diff --git a/public/js/list.js b/public/js/list.js
index fe0eb62aa86e7d9005a065f49f0f88b286076c19..017eb299feabe2061432543531c05702f53903de 100644 (file)
--- a/public/js/list.js
+++ b/public/js/list.js
@@ -91,7 +91,7 @@ item.prototype = {
         }
         var id = this.elt.getAttribute('data-id');
 
-        $("message").hide();
+        $("message").clearMessages();
         new Ajax.Request('path/' + id.toString() + '/delete', {
             method: 'post',
             onSuccess: this.deleteSuccess.bind(this),

diff --git a/public/js/syj.js b/public/js/syj.js
index 62b2936a1248da6545966d3b0e95a43a41d0628f..3ed9ad60b8b639cb7995754066ae02ada1428244 100644 (file)
--- a/public/js/syj.js
+++ b/public/js/syj.js
@@ -305,7 +305,7 @@ var SYJView = {
         if ($("edit-btn")) {
             $("edit-btn").observe('click', function() {
                 $("geom_submit").value = SyjStrings.editAction;
-                this.messenger.hide();
+                this.messenger.clearMessages();
                 this.editMode();
                 this.mode = 'edit';
             }.bind(this));
@@ -314,7 +314,7 @@ var SYJView = {
         if ($("create-btn")) {
             $("create-btn").observe('click', function() {
                 $("geom_submit").value = SyjStrings.createAction;
-                this.messenger.hide();
+                this.messenger.clearMessages();
                 this.editMode();
                 this.mode = 'create';
             }.bind(this));
@@ -324,7 +324,7 @@ var SYJView = {
             $("clone-btn").observe('click', function() {
                 $("geom_submit").value = SyjStrings.cloneAction;
                 $("geom_title").value = "";
-                this.messenger.hide();
+                this.messenger.clearMessages();
                 this.editMode();
                 this.mode = 'create';
             }.bind(this));
@@ -454,7 +454,7 @@ var SYJView = {
 
     observer: function(evt) {
         if (evt.eventName === "simplebox:shown" && evt.memo.element !== $("termsofusearea")) {
-            this.messenger.hide();
+            this.messenger.clearMessages();
         }
     },
 
@@ -490,7 +490,7 @@ var SYJView = {
         }
         this.needsFormResubmit = false;
         SyjSaveUI.disable.bind(SyjSaveUI).defer();
-        this.messenger.hide();
+        this.messenger.clearMessages();
         return true;
     },
 
@@ -569,7 +569,7 @@ var SYJView = {
                     }
                 },
                 create: function(f, line) {
-                    this.messenger.hide();
+                    this.messenger.clearMessages();
                     $("geom_upload_container").hide();
                 }.bind(this)
             },
@@ -738,7 +738,7 @@ var SYJModalClass = Class.create({
     },
 
     reset: function() {
-        this.messenger.hide();
+        this.messenger.clearMessages();
         this.area.select('.message').invoke('setMessageStatus', null);
     }
 });
@@ -796,7 +796,7 @@ var SYJUserClass = Class.create(SYJModalClass, {
     },
 
     presubmit: function() {
-        this.messenger.hide();
+        this.messenger.clearMessages();
         PseudoChecker.reset();
         if (!(this.checkNotEmpty("user_pseudo", SyjStrings.userEmptyWarn))) {
             return false;
@@ -914,7 +914,7 @@ var SYJLoginClass = Class.create(SYJModalClass, {
     },
 
     presubmit: function() {
-        this.messenger.hide();
+        this.messenger.clearMessages();
         if (!(this.checkNotEmpty("login_user", SyjStrings.userEmptyWarn))) {
             return false;
         }

diff --git a/public/js/utils.js b/public/js/utils.js
index 8936797b79db1080f973fde7d49764eeaa44a1be..e2126f5950a9d553590c2e0731a59c9172f69a2e 100644 (file)
--- a/public/js/utils.js
+++ b/public/js/utils.js
@@ -32,7 +32,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 +402,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 +449,63 @@ 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);
+                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.visible()) {
+            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) {
@@ -434,10 +515,13 @@ Element.addMethods('div', {
         }
 
         div.appendChild(node);
-        return div.show();
-    },
+        if (!div.visible()) {
+            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 +534,12 @@ Element.addMethods('div', {
         }
         return div;
     }
-});
+
+    return {
+        setMessage: setMessage,
+        clearMessages: clearMessages,
+        addMessage: addMessage,
+        setMessageStatus: setMessageStatus
+    };
+
+})());