[Summary view] [Print] [Text view]

   1  /*

   2   * jQuery UI Effects Scale 1.6

   3   *

   4   * Copyright (c) 2008 AUTHORS.txt (http://ui.jquery.com/about)

   5   * Dual licensed under the MIT (MIT-LICENSE.txt)

   6   * and GPL (GPL-LICENSE.txt) licenses.

   7   *

   8   * http://docs.jquery.com/UI/Effects/Scale

   9   *

  10   * Depends:

  11   *    effects.core.js

  12   */
  13  (function($) {
  14  
  15  $.effects.puff = function(o) {
  16  
  17      return this.queue(function() {
  18  
  19          // Create element

  20          var el = $(this);
  21  
  22          // Set options

  23          var options = $.extend(true, {}, o.options);
  24          var mode = $.effects.setMode(el, o.options.mode || 'hide'); // Set Mode

  25          var percent = parseInt(o.options.percent) || 150; // Set default puff percent

  26          options.fade = true; // It's not a puff if it doesn't fade! :)

  27          var original = {height: el.height(), width: el.width()}; // Save original

  28  
  29          // Adjust

  30          var factor = percent / 100;
  31          el.from = (mode == 'hide') ? original : {height: original.height * factor, width: original.width * factor};
  32  
  33          // Animation

  34          options.from = el.from;
  35          options.percent = (mode == 'hide') ? percent : 100;
  36          options.mode = mode;
  37  
  38          // Animate

  39          el.effect('scale', options, o.duration, o.callback);
  40          el.dequeue();
  41      });
  42  
  43  };
  44  
  45  $.effects.scale = function(o) {
  46  
  47      return this.queue(function() {
  48  
  49          // Create element

  50          var el = $(this);
  51  
  52          // Set options

  53          var options = $.extend(true, {}, o.options);
  54          var mode = $.effects.setMode(el, o.options.mode || 'effect'); // Set Mode

  55          var percent = parseInt(o.options.percent) || (parseInt(o.options.percent) == 0 ? 0 : (mode == 'hide' ? 0 : 100)); // Set default scaling percent

  56          var direction = o.options.direction || 'both'; // Set default axis

  57          var origin = o.options.origin; // The origin of the scaling

  58          if (mode != 'effect') { // Set default origin and restore for show/hide
  59              options.origin = origin || ['middle','center'];
  60              options.restore = true;
  61          }
  62          var original = {height: el.height(), width: el.width()}; // Save original

  63          el.from = o.options.from || (mode == 'show' ? {height: 0, width: 0} : original); // Default from state

  64  
  65          // Adjust

  66          var factor = { // Set scaling factor
  67              y: direction != 'horizontal' ? (percent / 100) : 1,
  68              x: direction != 'vertical' ? (percent / 100) : 1
  69          };
  70          el.to = {height: original.height * factor.y, width: original.width * factor.x}; // Set to state

  71  
  72          if (o.options.fade) { // Fade option to support puff
  73              if (mode == 'show') {el.from.opacity = 0; el.to.opacity = 1;};
  74              if (mode == 'hide') {el.from.opacity = 1; el.to.opacity = 0;};
  75          };
  76  
  77          // Animation

  78          options.from = el.from; options.to = el.to; options.mode = mode;
  79  
  80          // Animate

  81          el.effect('size', options, o.duration, o.callback);
  82          el.dequeue();
  83      });
  84  
  85  };
  86  
  87  $.effects.size = function(o) {
  88  
  89      return this.queue(function() {
  90  
  91          // Create element

  92          var el = $(this), props = ['position','top','left','width','height','overflow','opacity'];
  93          var props1 = ['position','top','left','overflow','opacity']; // Always restore

  94          var props2 = ['width','height','overflow']; // Copy for children

  95          var cProps = ['fontSize'];
  96          var vProps = ['borderTopWidth', 'borderBottomWidth', 'paddingTop', 'paddingBottom'];
  97          var hProps = ['borderLeftWidth', 'borderRightWidth', 'paddingLeft', 'paddingRight'];
  98  
  99          // Set options

 100          var mode = $.effects.setMode(el, o.options.mode || 'effect'); // Set Mode

 101          var restore = o.options.restore || false; // Default restore

 102          var scale = o.options.scale || 'both'; // Default scale mode

 103          var origin = o.options.origin; // The origin of the sizing

 104          var original = {height: el.height(), width: el.width()}; // Save original

 105          el.from = o.options.from || original; // Default from state

 106          el.to = o.options.to || original; // Default to state

 107          // Adjust

 108          if (origin) { // Calculate baseline shifts
 109              var baseline = $.effects.getBaseline(origin, original);
 110              el.from.top = (original.height - el.from.height) * baseline.y;
 111              el.from.left = (original.width - el.from.width) * baseline.x;
 112              el.to.top = (original.height - el.to.height) * baseline.y;
 113              el.to.left = (original.width - el.to.width) * baseline.x;
 114          };
 115          var factor = { // Set scaling factor
 116              from: {y: el.from.height / original.height, x: el.from.width / original.width},
 117              to: {y: el.to.height / original.height, x: el.to.width / original.width}
 118          };
 119          if (scale == 'box' || scale == 'both') { // Scale the css box
 120              if (factor.from.y != factor.to.y) { // Vertical props scaling
 121                  props = props.concat(vProps);
 122                  el.from = $.effects.setTransition(el, vProps, factor.from.y, el.from);
 123                  el.to = $.effects.setTransition(el, vProps, factor.to.y, el.to);
 124              };
 125              if (factor.from.x != factor.to.x) { // Horizontal props scaling
 126                  props = props.concat(hProps);
 127                  el.from = $.effects.setTransition(el, hProps, factor.from.x, el.from);
 128                  el.to = $.effects.setTransition(el, hProps, factor.to.x, el.to);
 129              };
 130          };
 131          if (scale == 'content' || scale == 'both') { // Scale the content
 132              if (factor.from.y != factor.to.y) { // Vertical props scaling
 133                  props = props.concat(cProps);
 134                  el.from = $.effects.setTransition(el, cProps, factor.from.y, el.from);
 135                  el.to = $.effects.setTransition(el, cProps, factor.to.y, el.to);
 136              };
 137          };
 138          $.effects.save(el, restore ? props : props1); el.show(); // Save & Show

 139          $.effects.createWrapper(el); // Create Wrapper

 140          el.css('overflow','hidden').css(el.from); // Shift

 141  
 142          // Animate

 143          if (scale == 'content' || scale == 'both') { // Scale the children
 144              vProps = vProps.concat(['marginTop','marginBottom']).concat(cProps); // Add margins/font-size

 145              hProps = hProps.concat(['marginLeft','marginRight']); // Add margins

 146              props2 = props.concat(vProps).concat(hProps); // Concat

 147              el.find("*[width]").each(function(){
 148                  child = $(this);
 149                  if (restore) $.effects.save(child, props2);
 150                  var c_original = {height: child.height(), width: child.width()}; // Save original

 151                  child.from = {height: c_original.height * factor.from.y, width: c_original.width * factor.from.x};
 152                  child.to = {height: c_original.height * factor.to.y, width: c_original.width * factor.to.x};
 153                  if (factor.from.y != factor.to.y) { // Vertical props scaling
 154                      child.from = $.effects.setTransition(child, vProps, factor.from.y, child.from);
 155                      child.to = $.effects.setTransition(child, vProps, factor.to.y, child.to);
 156                  };
 157                  if (factor.from.x != factor.to.x) { // Horizontal props scaling
 158                      child.from = $.effects.setTransition(child, hProps, factor.from.x, child.from);
 159                      child.to = $.effects.setTransition(child, hProps, factor.to.x, child.to);
 160                  };
 161                  child.css(child.from); // Shift children

 162                  child.animate(child.to, o.duration, o.options.easing, function(){
 163                      if (restore) $.effects.restore(child, props2); // Restore children

 164                  }); // Animate children

 165              });
 166          };
 167  
 168          // Animate

 169          el.animate(el.to, { queue: false, duration: o.duration, easing: o.options.easing, complete: function() {
 170              if(mode == 'hide') el.hide(); // Hide

 171              $.effects.restore(el, restore ? props : props1); $.effects.removeWrapper(el); // Restore

 172              if(o.callback) o.callback.apply(this, arguments); // Callback

 173              el.dequeue();
 174          }});
 175  
 176      });
 177  
 178  };
 179  
 180  })(jQuery);