Changeset 3855

Timestamp:

11/19/07 16:05:40 (1 year ago)

Author:

aaronchi

Message:

fixed effects to use new 'ec' scope

Location:

trunk/fx/experimental

Files:

• fx.blind.js (modified) (2 diffs)
• fx.drop.js (modified) (2 diffs)
• fx.fold.js (modified) (2 diffs)
• fx.highlight.js (modified) (3 diffs)
• fx.js (modified) (4 diffs)
• fx.pulsate.js (modified) (3 diffs)
• fx.slide.js (modified) (3 diffs)
• tests/blind.html (modified) (1 diff)
• tests/drop.html (modified) (2 diffs)
• tests/fold.html (modified) (1 diff)
• tests/highlight.html (modified) (1 diff)
• tests/pulsate.html (modified) (1 diff)
• tests/slide.html (modified) (1 diff)

trunk/fx/experimental/fx.blind.js

@@ -1 +1 @@
 (function($) {
   
-  $.fx.blind = function(o) {
+  $.ec.blind = function(o) {
 
     this.each(function() {
@@ -14 +14 @@
       
       // Set options
-      var direction = o.options.direction || "vertical";
-      var ref = (direction == "vertical") ? "height" : "width";
-      var distance = (direction == "vertical") ? wrapper.height() : wrapper.width();
+      var direction = o.options.direction || 'vertical';
+      var ref = (direction == 'vertical') ? 'height' : 'width';
+      var distance = (direction == 'vertical') ? wrapper.height() : wrapper.width();
       
       // Adjust
-      if(o.method == "show") wrapper.css(ref, 0);
+      if(o.method == 'show') wrapper.css(ref, 0);
       el.show();
       
       // Animation
       var animation = {};
-      animation[ref] = o.method == "show" ? distance : 0;
+      animation[ref] = o.method == 'show' ? distance : 0;
       
       // Animate
       wrapper.animate(animation, o.speed, o.options.easing, function() {
-        if(o.method != "show") el.hide(); //if we want to hide the element, set display to none after the animation
-        wrapper.replaceWith(el); // remove the wrapper
-        if(o.callback) callback.apply(this, arguments); //And optionally apply the callback
+        if(o.method != 'show') el.hide();
+        wrapper.replaceWith(el);
+        if(o.callback) callback.apply(this, arguments);
       });   
   

trunk/fx/experimental/fx.drop.js

@@ -1 +1 @@
 (function($) {
   
-  $.fx.drop = function(o) {
+  $.ec.drop = function(o) {
 
     this.each(function() {
@@ -7 +7 @@
       // Create element
       var el = $(this);
-      $.fx.relativize(el);
-      $.fx.save(el, ["top","left","opacity"]);
+      var props = ['position','opacity'];
       
       // Set options
-      var direction = o.options.direction || "left";
-      var ref = (direction == "up" || direction == "down") ? "top" : "left";
-      var motion = (direction == "up" || direction == "left") ? "pos" : "neg";
-      var distance = o.options.distance || ref == "top" ? (el.height() / 2) : (el.width() / 2);
-      var shift = !parseInt(el.css(ref)) ? 0 : parseInt(el.css(ref)); // Need this for IE
+      var direction = o.options.direction || 'left';
+      var s = $.ec.findSides(el), ref = { left: s[0], right: s[0], up: s[1], down: s[1] };
+      props.push(ref[direction]); // Add side to props
+      var motion = (ref[direction] == 'top' || ref[direction] == 'left') ? 'pos' : 'neg';
+      var distance = o.options.distance || (ref == 'top' ? (el.height() / 2) : (el.width() / 2));
+      var shift = parseInt(el.css(ref[direction])) || 0;
       
       // Adjust
-      if (o.method == "show") el.css('opacity', 0).css(ref, shift + (motion == "pos" ? -distance : distance));
+      $.ec.save(el, props);
+      el.makeRelative();
+      if (o.method == 'show') el.css('opacity', 0).css(ref[direction], shift + (motion == 'pos' ? -distance : distance));
       el.show();
       
       // Animation
       var animation = {};
-      animation['opacity'] = o.method == "show" ? 1 : 0;
-      animation[ref] = (o.method == "show" ? (motion == "pos" ? '+=' : '-=') : (motion == "pos" ? '-=' : '+='))  + distance;
+      animation['opacity'] = o.method == 'show' ? 1 : 0;
+      animation[ref[direction]] = (o.method == 'show' ? (motion == 'pos' ? '+=' : '-=') : (motion == 'pos' ? '-=' : '+='))  + distance;
       
       // Animate
-      el.animate(animation, o.speed, o.options.easing, function() { //Animate
-        if(o.method != "show") el.hide();
-        $.fx.restore(el, ["left","top","opacity"]);
+      el.animate(animation, o.speed, o.options.easing, function() {
+        if(o.method != 'show') el.hide();
+        $.ec.restore(el, props);
         if(o.callback) callback.apply(this, arguments);
       });

trunk/fx/experimental/fx.fold.js

@@ -1 +1 @@
 (function($) {
   
-  $.fx.fold = function(o) {
+  $.ec.fold = function(o) {
 
     this.each(function() {
@@ -14 +14 @@
       
       // Set options
-      var direction = o.options.direction || "vertical";
-      var ref = (o.method == "show") ? ["width", "height"] : ["height", "width"];
+      var ref = (o.method == 'show') ? ['width', 'height'] : ['height', 'width'];
       var size = o.options.size || 15;
-      var distance = (o.method == "show") ? [wrapper.width(), wrapper.height()] : [wrapper.height(), wrapper.width()];
+      var distance = (o.method == 'show') ? [wrapper.width(), wrapper.height()] : [wrapper.height(), wrapper.width()];
       
       // Adjust
-      if(o.method == "show") wrapper.css({height: size, width: 0});
+      if(o.method == 'show') wrapper.css({height: size, width: 0});
       el.show();
       
       // Animation
-      var animation1 = {}; animation1[ref[0]] = o.method == "show" ? distance[0] : size;
-      var animation2 = {}; animation2[ref[1]] = o.method == "show" ? distance[1] : 0;
+      var animation1 = {}; animation1[ref[0]] = o.method == 'show' ? distance[0] : size;
+      var animation2 = {}; animation2[ref[1]] = o.method == 'show' ? distance[1] : 0;
       
-      // Animate
+      // Animate & Restore
       wrapper.animate(animation1, o.speed, o.options.easing)
       .animate(animation2, o.speed, o.options.easing, function() {
-        if(o.method != "show") el.hide(); //if we want to hide the element, set display to none after the animation
-        wrapper.replaceWith(el); // remove the wrapper
-        if(o.callback) callback.apply(this, arguments); //And optionally apply the callback
+        if(o.method != 'show') el.hide();
+        wrapper.replaceWith(el);
+        if(o.callback) callback.apply(this, arguments);
       });   
   

trunk/fx/experimental/fx.highlight.js

@@ -1 +1 @@
 (function($) {
   
-  $.fx.highlight = function(o) {
+  $.ec.highlight = function(o) {
 
     this.each(function() {
@@ -7 +7 @@
       // Create element
       var el = $(this);
-      $.fx.save(el, ["backgroundImage","backgroundColor","opacity"]);
+      var props = ['backgroundImage','backgroundColor','opacity'];
       
       // Set options
       var color = o.options.color || "#ffff99"
       
-      // Adjust
-      el.css({backgroundImage: 'none', backgroundColor: color})
+      // Adjust & Save
+      $.ec.save(el, props);
+      el.css({backgroundImage: 'none', backgroundColor: color});
       el.show();
       
       // Animation
       var animation = {};
-      animation['backgroundColor'] = $.data(this, "fx.storage.backgroundColor");
+      animation['backgroundColor'] = $.data(this, "ec.storage.backgroundColor");
       if (o.method == "hide") animation['opacity'] = 0;
       
@@ -24 +25 @@
       el.animate(animation, o.speed, o.options.easing, function() { //Animate
         if(o.method == "hide") el.hide();
-        $.fx.restore(el, ["backgroundImage","backgroundColor","opacity"]);
+        $.ec.restore(el, props);
         if(o.callback) callback.apply(this, arguments);
       });

trunk/fx/experimental/fx.js

@@ -1 +1 @@
 (function($) {
 
-  $.fx = $.fx || {}; //Add the 'fx' scope
+  $.ec = $.ec || {}; //Add the 'ec' scope
 
-  /*
-   * Public methods (jQuery FX scope)
-   */
-
-  $.extend($.fx, {
-    relativize: function(el) {
-      if(!el.css("position") || !el.css("position").match(/fixed|absolute|relative/)) el.css("position", "relative"); //Relativize
-    },
+  $.extend($.ec, {
     save: function(el, set) {
       for(var i=0;i<set.length;i++) {
-        if(set[i] !== null) $.data(el[0], "fx.storage."+set[i], el.css(set[i]));  
+        if(set[i] !== null) $.data(el[0], "ec.storage."+set[i], el.css(set[i]));  
       }
     },
@@ -19 +12 @@
       if(ret) var obj = {};
       for(var i=0;i<set.length;i++) {
-        if(ret) obj[set[i]] = $.data(el[0], "fx.storage."+set[i]);
-        if(set[i] !== null && !ret) el.css(set[i], $.data(el[0], "fx.storage."+set[i]));  
+        if(ret) obj[set[i]] = $.data(el[0], "ec.storage."+set[i]);
+        if(set[i] !== null && !ret) el.css(set[i], $.data(el[0], "ec.storage."+set[i]));  
       }
       if(ret) return obj;
     },
+    findSides: function(el) { //Very nifty function (especially for IE!)
+      return [ !!parseInt(el.css("left")) ? "left" : "right", !!parseInt(el.css("top")) ? "top" : "bottom" ];
+    },
+    setTransition: function(el, list, factor, val) {
+    val = val || {};
+    $.each(list,function(i, x){
+      unit = el.cssUnit(x);
+      if (unit[0] > 0) val[x] = unit[0] * factor + unit[1];
+    });
+    return val;
+  },
     animateClass: function(value, duration, easing, callback) {
   
@@ -61 +65 @@
     }
   });
-  
+ 
   //Extend the methods of jQuery
   $.fn.extend({
-    //effect: function(fx,o) { if($.fx[fx]) this.each(function() { $.fx[fx].apply(this, [o]); }); }, //This just forwards single used effects
-    effect: function(fx,o,speed,callback) { if($.fx[fx]) $.fx[fx].apply(this, [{method: fx, options: o, speed: speed, callback: callback}])},
+    //Save old methods
     _show: $.fn.show,
     _hide: $.fn.hide,
@@ -72 +75 @@
     _removeClass: $.fn.removeClass,
     _toggleClass: $.fn.toggleClass,
+    // New ec methods
+    effect: function(fx,o,speed,callback) { 
+      if($.ec[fx]) $.ec[fx].apply(this, [{method: fx, options: o, speed: speed, callback: callback}])
+    },
     show: function(obj,speed,callback){
-      return typeof obj == 'string' || typeof obj == 'undefined' ? this._show(obj, speed) : $.fx[obj.method].apply(this, [{method: 'show', options: obj, duration: speed, callback: callback }]);
+      return typeof obj == 'string' || typeof obj == 'undefined' ? this._show(obj, speed) : $.ec[obj.method].apply(this, [{method: 'show', options: obj, duration: speed, callback: callback }]);
     },
     hide: function(obj,speed,callback){
-      return typeof obj == 'string' || typeof obj == 'undefined' ? this._hide(obj, speed) : $.fx[obj.method].apply(this, [{method: 'hide', options: obj, duration: speed, callback: callback }]);
+      return typeof obj == 'string' || typeof obj == 'undefined' ? this._hide(obj, speed) : $.ec[obj.method].apply(this, [{method: 'hide', options: obj, duration: speed, callback: callback }]);
     },
     toggle: function(obj,speed,callback){
-      return jQuery(this).is(":hidden") ? this.show(obj,speed,callback) : this.hide(obj,speed,callback)
+      return $(this).is(':hidden') ? this.show(obj,speed,callback) : this.hide(obj,speed,callback)
     },
     addClass: function(classNames,speed,easing,callback) {
-      return speed ? $.fx.animateClass.apply(this, [{ add: classNames },speed,easing,callback]) : this._addClass(classNames);
+      return speed ? $.ec.animateClass.apply(this, [{ add: classNames },speed,easing,callback]) : this._addClass(classNames);
     },
     removeClass: function(classNames,speed,easing,callback) {
-      return speed ? $.fx.animateClass.apply(this, [{ remove: classNames },speed,easing,callback]) : this._removeClass(classNames);
+      return speed ? $.ec.animateClass.apply(this, [{ remove: classNames },speed,easing,callback]) : this._removeClass(classNames);
     },
     toggleClass: function(classNames,speed,easing,callback) {
-      return speed ? $.fx.animateClass.apply(this, [{ toggle: classNames },speed,easing,callback]) : this._toggleClass(classNames);
+      return speed ? $.ec.animateClass.apply(this, [{ toggle: classNames },speed,easing,callback]) : this._toggleClass(classNames);
     },
     morph: function(remove,add,speed,easing,callback) {
-      return $.fx.animateClass.apply(this, [{ add: add, remove: remove },speed,easing,callback]);
+      return $.ec.animateClass.apply(this, [{ add: add, remove: remove },speed,easing,callback]);
     },
-    switchClass: function() { this.morph.apply(this, arguments); },
+    switchClass: function() { 
+      this.morph.apply(this, arguments);
+    },
+    // helper functions
+    makeRelative: function() { //Relativize
+      var pos = this.css('position');
+      if (!pos || pos == 'static') {
+        this.css('position', 'relative');
+        if (window.opera) {
+          element.style.top = 0;
+          element.style.left = 0;
+        };
+      };
+    },
     cssUnit: function(key) { 
       var style = this.css(key), val = [];

trunk/fx/experimental/fx.pulsate.js

@@ -1 +1 @@
 (function($) {
   
-  $.fx.pulsate = function(o) {
+  $.ec.pulsate = function(o) {
 
     this.each(function() {
@@ -12 +12 @@
       
       // Adjust
-      if (jQuery(el).is(":hidden")) {
+      if (jQuery(el).is(':hidden')) {
         el.fadeIn(o.speed, o.options.easing);
         times--;
@@ -21 +21 @@
         el.fadeOut(o.speed, o.options.easing).fadeIn(o.speed, o.options.easing);
       };
-      if (o.method == "hide") el.fadeOut(o.speed, o.options.easing);
+      if (o.method == 'hide') el.fadeOut(o.speed, o.options.easing);
       if(o.callback) callback.apply(this, arguments);
     });

trunk/fx/experimental/fx.slide.js

@@ -1 +1 @@
 (function($) {
   
-  $.fx.slide = function(o) {
+  $.ec.slide = function(o) {
 
     this.each(function() {
@@ -7 +7 @@
       // Create element
       var el = $(this);
-      $.fx.save(el, ["marginTop","marginLeft"]);
+      var props = [];
       
       // Create a wrapper
@@ -15 +15 @@
       
       // Set options
-      var direction = o.options.direction || "left";
-      var ref = (direction == "up" || direction == "down") ? "marginTop" : "marginLeft";
-      var motion = (direction == "down" || direction == "right") ? "pos" : "neg";
-      var distance = distance || ref == "marginTop" ? wrapper.height() : wrapper.width();
-      var shift = !parseInt(el.css(ref)) ? 0 : parseInt(el.css(ref)); // Need this for IE
+      var direction = o.options.direction || 'left';
+      var ref = (direction == 'up' || direction == 'down') ? 'marginTop' : 'marginLeft';
+      props.push(ref);
+      var motion = (direction == 'down' || direction == 'right') ? 'pos' : 'neg';
+      var distance = distance || ref == 'marginTop' ? wrapper.height() : wrapper.width();
+      var shift = parseInt(el.css(ref)) || 0;
       
       // Adjust
-      if (o.method == "show") el.css(ref, shift + (motion == "pos" ? distance : -distance));
+      $.ec.save(el, props);
+      if (o.method == 'show') el.css(ref, shift + (motion == 'pos' ? distance : -distance));
       el.show();
       
       // Animation
       var animation = {};
-      animation[ref] = (o.method == "show" ? (motion == "pos" ? '-=' : '+=') : (motion == "pos" ? '+=' : '-=')) + distance;
+      animation[ref] = (o.method == 'show' ? (motion == 'pos' ? '-=' : '+=') : (motion == 'pos' ? '+=' : '-=')) + distance;
       
       // Animate
       el.animate(animation, o.speed, o.options.easing, function() { //Animate
-        if(o.method != "show") el.hide();
-        $.fx.restore(el, ["marginTop","marginLeft"]);
+        if(o.method != 'show') el.hide();
+        $.ec.restore(el, props);
         wrapper.replaceWith(el);
         if(o.callback) callback.apply(this, arguments);

trunk/fx/experimental/tests/blind.html

@@ -28 +28 @@
 .controls div {padding:10px;clear:both;}
 .text {font-size: 12px;margin:5px 0;background:#f7f7f7;border:1px dotted #aaa;padding:4px;}
-#container {height:420px; width:510px;margin:0 auto; text-align:center;}
-#fx {width:500px;background:#efefef;border:5px solid #aaa;} 
+#container {height:420px; width:510px; margin:0 auto;}
+#fx {width:500px;background:#efefef;border:5px solid #aaa; text-align:center;} 
 </style>
 </head>

trunk/fx/experimental/tests/drop.html

@@ -12 +12 @@
 <script type="text/javascript" src="../../../jquery/src/fx.js"></script>
 <script type="text/javascript" src="../../../jquery/src/offset.js"></script>
+<script type="text/javascript" src="../../../plugins/dimensions/jquery.dimensions.js"></script>
 
 <script type="text/javascript" src="../fx.js"></script>
@@ -27 +28 @@
 .controls div {padding:10px;clear:both;}
 .text {font-size: 12px;margin:5px 0;background:#f7f7f7;border:1px dotted #aaa;padding:4px;}
-#container {height:420px; width:510px;margin:0 auto; text-align:center;}
-#fx {width:500px;background:#efefef;border:5px solid #aaa;} 
+#container {height:420px; width:510px; margin:0 auto;}
+#fx {width:500px;background:#efefef;border:5px solid #aaa; text-align:center;} 
 </style>
 </head>

trunk/fx/experimental/tests/fold.html

@@ -28 +28 @@
 .controls div {padding:10px;clear:both;}
 .text {font-size: 12px;margin:5px 0;background:#f7f7f7;border:1px dotted #aaa;padding:4px;}
-#container {height:420px; width:510px;margin:0 auto; text-align:center;}
-#fx {width:500px;background:#efefef;border:5px solid #aaa;} 
+#container {height:420px; width:510px; margin:0 auto;}
+#fx {width:500px;background:#efefef;border:5px solid #aaa; text-align:center;} 
 </style>
 </head>

trunk/fx/experimental/tests/highlight.html

@@ -28 +28 @@
 .controls div {padding:10px;clear:both;}
 .text {font-size: 12px;margin:5px 0;background:#f7f7f7;border:1px dotted #aaa;padding:4px;}
-#container {height:420px; width:510px;margin:0 auto; text-align:center;}
-#fx {width:500px;background:#efefef;border:5px solid #aaa;} 
+#container {height:420px; width:510px; margin:0 auto;}
+#fx {width:500px;background:#efefef;border:5px solid #aaa; text-align:center;} 
 </style>
 </head>

trunk/fx/experimental/tests/pulsate.html

@@ -27 +27 @@
 .controls div {padding:10px;clear:both;}
 .text {font-size: 12px;margin:5px 0;background:#f7f7f7;border:1px dotted #aaa;padding:4px;}
-#container {height:420px; width:510px;margin:0 auto; text-align:center;}
-#fx {width:500px;background:#efefef;border:5px solid #aaa;} 
+#container {height:420px; width:510px; margin:0 auto;}
+#fx {width:500px;background:#efefef;border:5px solid #aaa; text-align:center;} 
 </style>
 </head>

trunk/fx/experimental/tests/slide.html

@@ -28 +28 @@
 .controls div {padding:10px;clear:both;}
 .text {font-size: 12px;margin:5px 0;background:#f7f7f7;border:1px dotted #aaa;padding:4px;}
-#container {height:420px; width:510px;margin:0 auto; text-align:center;}
-#fx {width:500px;background:#efefef;border:5px solid #aaa;} 
+#container {height:420px; width:510px; margin:0 auto;}
+#fx {width:500px;background:#efefef;border:5px solid #aaa; text-align:center;} 
 </style>
 </head>