lib/yuilib/3.13.0/node-flick/node-flick-debug.js

   1 /*
   2 YUI 3.13.0 (build 508226d)
   3 Copyright 2013 Yahoo! Inc. All rights reserved.
   4 Licensed under the BSD License.
   5 http://yuilibrary.com/license/
   6 */
   7
   8 YUI.add('node-flick', function (Y, NAME) {
   9
  10 /**
  11  * Provide a simple Flick plugin, which can be used along with the "flick" gesture event, to
  12  * animate the motion of the host node in response to a (mouse or touch) flick gesture.
  13  *
  14  * <p>The current implementation is designed to move the node, relative to the bounds of a parent node and is suitable
  15  * for scroll/carousel type implementations. Future versions will remove that constraint, to allow open ended movement within
  16  * the document.</p>
  17  *
  18  * @module node-flick
  19  */
  20
  21     var HOST = "host",
  22         PARENT_NODE = "parentNode",
  23         BOUNDING_BOX = "boundingBox",
  24         OFFSET_HEIGHT = "offsetHeight",
  25         OFFSET_WIDTH = "offsetWidth",
  26         SCROLL_HEIGHT = "scrollHeight",
  27         SCROLL_WIDTH = "scrollWidth",
  28         BOUNCE = "bounce",
  29         MIN_DISTANCE = "minDistance",
  30         MIN_VELOCITY = "minVelocity",
  31         BOUNCE_DISTANCE = "bounceDistance",
  32         DECELERATION = "deceleration",
  33         STEP = "step",
  34         DURATION = "duration",
  35         EASING = "easing",
  36         FLICK = "flick",
  37
  38         getClassName = Y.ClassNameManager.getClassName;
  39
  40     /**
  41      * A plugin class which can be used to animate the motion of a node, in response to a flick gesture.
  42      *
  43      * @class Flick
  44      * @namespace Plugin
  45      * @param {Object} config The initial attribute values for the plugin
  46      */
  47     function Flick(config) {
  48         Flick.superclass.constructor.apply(this, arguments);
  49     }
  50
  51     Flick.ATTRS = {
  52
  53         /**
  54          * Drag coefficent for inertial scrolling. The closer to 1 this
  55          * value is, the less friction during scrolling.
  56          *
  57          * @attribute deceleration
  58          * @default 0.98
  59          */
  60         deceleration : {
  61             value: 0.98
  62         },
  63
  64         /**
  65          * Drag coefficient for intertial scrolling at the upper
  66          * and lower boundaries of the scrollview. Set to 0 to
  67          * disable "rubber-banding".
  68          *
  69          * @attribute bounce
  70          * @type Number
  71          * @default 0.7
  72          */
  73         bounce : {
  74             value: 0.7
  75         },
  76
  77         /**
  78          * The bounce distance in pixels
  79          *
  80          * @attribute bounceDistance
  81          * @type Number
  82          * @default 150
  83          */
  84         bounceDistance : {
  85             value: 150
  86         },
  87
  88         /**
  89          * The minimum flick gesture velocity (px/ms) at which to trigger the flick response
  90          *
  91          * @attribute minVelocity
  92          * @type Number
  93          * @default 0
  94          */
  95         minVelocity : {
  96             value: 0
  97         },
  98
  99         /**
 100          * The minimum flick gesture distance (px) for which to trigger the flick response
 101          *
 102          * @attribute minVelocity
 103          * @type Number
 104          * @default 10
 105          */
 106         minDistance : {
 107             value: 10
 108         },
 109
 110         /**
 111          * The constraining box relative to which the flick animation and bounds should be calculated.
 112          *
 113          * @attribute boundingBox
 114          * @type Node
 115          * @default parentNode
 116          */
 117         boundingBox : {
 118             valueFn : function() {
 119                 return this.get(HOST).get(PARENT_NODE);
 120             }
 121         },
 122
 123         /**
 124          * Time between flick animation frames.
 125          *
 126          * @attribute step
 127          * @type Number
 128          * @default 10
 129          */
 130         step : {
 131             value:10
 132         },
 133
 134         /**
 135          * The custom duration to apply to the flick animation. By default,
 136          * the animation duration is controlled by the deceleration factor.
 137          *
 138          * @attribute duration
 139          * @type Number
 140          * @default null
 141          */
 142         duration : {
 143             value:null
 144         },
 145
 146         /**
 147          * The custom transition easing to use for the flick animation. If not
 148          * provided defaults to internally to Flick.EASING, or Flick.SNAP_EASING based
 149          * on whether or not we're animating the flick or bounce step.
 150          *
 151          * @attribute easing
 152          * @type String
 153          * @default null
 154          */
 155         easing : {
 156             value:null
 157         }
 158     };
 159
 160     /**
 161      * The NAME of the Flick class. Used to prefix events generated
 162      * by the plugin.
 163      *
 164      * @property NAME
 165      * @static
 166      * @type String
 167      * @default "pluginFlick"
 168      */
 169     Flick.NAME = "pluginFlick";
 170
 171     /**
 172      * The namespace for the plugin. This will be the property on the node, which will
 173      * reference the plugin instance, when it's plugged in.
 174      *
 175      * @property NS
 176      * @static
 177      * @type String
 178      * @default "flick"
 179      */
 180     Flick.NS = "flick";
 181
 182     Y.extend(Flick, Y.Plugin.Base, {
 183
 184         /**
 185          * The initializer lifecycle implementation.
 186          *
 187          * @method initializer
 188          * @param {Object} config The user configuration for the plugin
 189          */
 190         initializer : function(config) {
 191             this._node = this.get(HOST);
 192
 193             this._renderClasses();
 194             this.setBounds();
 195
 196             this._node.on(FLICK, Y.bind(this._onFlick, this), {
 197                 minDistance : this.get(MIN_DISTANCE),
 198                 minVelocity : this.get(MIN_VELOCITY)
 199             });
 200         },
 201
 202         /**
 203          * Sets the min/max boundaries for the flick animation,
 204          * based on the boundingBox dimensions.
 205          *
 206          * @method setBounds
 207          */
 208         setBounds : function () {
 209             var box = this.get(BOUNDING_BOX),
 210                 node = this._node,
 211
 212                 boxHeight = box.get(OFFSET_HEIGHT),
 213                 boxWidth = box.get(OFFSET_WIDTH),
 214
 215                 contentHeight = node.get(SCROLL_HEIGHT),
 216                 contentWidth = node.get(SCROLL_WIDTH);
 217
 218             if (contentHeight > boxHeight) {
 219                 this._maxY = contentHeight - boxHeight;
 220                 this._minY = 0;
 221                 this._scrollY = true;
 222             }
 223
 224             if (contentWidth > boxWidth) {
 225                 this._maxX = contentWidth - boxWidth;
 226                 this._minX = 0;
 227                 this._scrollX = true;
 228             }
 229
 230             this._x = this._y = 0;
 231
 232             node.set("top", this._y + "px");
 233             node.set("left", this._x + "px");
 234         },
 235
 236         /**
 237          * Adds the CSS classes, necessary to set up overflow/position properties on the
 238          * node and boundingBox.
 239          *
 240          * @method _renderClasses
 241          * @protected
 242          */
 243         _renderClasses : function() {
 244             this.get(BOUNDING_BOX).addClass(Flick.CLASS_NAMES.box);
 245             this._node.addClass(Flick.CLASS_NAMES.content);
 246         },
 247
 248         /**
 249          * The flick event listener. Kicks off the flick animation.
 250          *
 251          * @method _onFlick
 252          * @param e {EventFacade} The flick event facade, containing e.flick.distance, e.flick.velocity etc.
 253          * @protected
 254          */
 255         _onFlick: function(e) {
 256             this._v = e.flick.velocity;
 257             this._flick = true;
 258             this._flickAnim();
 259         },
 260
 261         /**
 262          * Executes a single frame in the flick animation
 263          *
 264          * @method _flickFrame
 265          * @protected
 266          */
 267         _flickAnim: function() {
 268
 269             var y = this._y,
 270                 x = this._x,
 271
 272                 maxY = this._maxY,
 273                 minY = this._minY,
 274                 maxX = this._maxX,
 275                 minX = this._minX,
 276                 velocity = this._v,
 277
 278                 step = this.get(STEP),
 279                 deceleration = this.get(DECELERATION),
 280                 bounce = this.get(BOUNCE);
 281
 282             this._v = (velocity * deceleration);
 283
 284             this._snapToEdge = false;
 285
 286             if (this._scrollX) {
 287                 x = x - (velocity * step);
 288             }
 289
 290             if (this._scrollY) {
 291                 y = y - (velocity * step);
 292             }
 293
 294             if (Math.abs(velocity).toFixed(4) <= Flick.VELOCITY_THRESHOLD) {
 295
 296                 this._flick = false;
 297
 298                 this._killTimer(!(this._exceededYBoundary || this._exceededXBoundary));
 299
 300                 if (this._scrollX) {
 301                     if (x < minX) {
 302                         this._snapToEdge = true;
 303                         this._setX(minX);
 304                     } else if (x > maxX) {
 305                         this._snapToEdge = true;
 306                         this._setX(maxX);
 307                     }
 308                 }
 309
 310                 if (this._scrollY) {
 311                     if (y < minY) {
 312                         this._snapToEdge = true;
 313                         this._setY(minY);
 314                     } else if (y > maxY) {
 315                         this._snapToEdge = true;
 316                         this._setY(maxY);
 317                     }
 318                 }
 319
 320             } else {
 321
 322                 if (this._scrollX && (x < minX || x > maxX)) {
 323                     this._exceededXBoundary = true;
 324                     this._v *= bounce;
 325                 }
 326
 327                 if (this._scrollY && (y < minY || y > maxY)) {
 328                     this._exceededYBoundary = true;
 329                     this._v *= bounce;
 330                 }
 331
 332                 if (this._scrollX) {
 333                     this._setX(x);
 334                 }
 335
 336                 if (this._scrollY) {
 337                     this._setY(y);
 338                 }
 339
 340                 this._flickTimer = Y.later(step, this, this._flickAnim);
 341             }
 342         },
 343
 344         /**
 345          * Internal utility method to set the X offset position
 346          *
 347          * @method _setX
 348          * @param {Number} val
 349          * @private
 350          */
 351         _setX : function(val) {
 352             this._move(val, null, this.get(DURATION), this.get(EASING));
 353         },
 354
 355         /**
 356          * Internal utility method to set the Y offset position
 357          *
 358          * @method _setY
 359          * @param {Number} val
 360          * @private
 361          */
 362         _setY : function(val) {
 363             this._move(null, val, this.get(DURATION), this.get(EASING));
 364         },
 365
 366         /**
 367          * Internal utility method to move the node to a given XY position,
 368          * using transitions, if specified.
 369          *
 370          * @method _move
 371          * @param {Number} x The X offset position
 372          * @param {Number} y The Y offset position
 373          * @param {Number} duration The duration to use for the transition animation
 374          * @param {String} easing The easing to use for the transition animation.
 375          *
 376          * @private
 377          */
 378         _move: function(x, y, duration, easing) {
 379
 380             if (x !== null) {
 381                 x = this._bounce(x);
 382             } else {
 383                 x = this._x;
 384             }
 385
 386             if (y !== null) {
 387                 y = this._bounce(y);
 388             } else {
 389                 y = this._y;
 390             }
 391
 392             duration = duration || this._snapToEdge ? Flick.SNAP_DURATION : 0;
 393             easing = easing || this._snapToEdge ? Flick.SNAP_EASING : Flick.EASING;
 394
 395             this._x = x;
 396             this._y = y;
 397
 398             this._anim(x, y, duration, easing);
 399         },
 400
 401         /**
 402          * Internal utility method to perform the transition step
 403          *
 404          * @method _anim
 405          * @param {Number} x The X offset position
 406          * @param {Number} y The Y offset position
 407          * @param {Number} duration The duration to use for the transition animation
 408          * @param {String} easing The easing to use for the transition animation.
 409          *
 410          * @private
 411          */
 412         _anim : function(x, y, duration, easing) {
 413             var xn = x * -1,
 414                 yn = y * -1,
 415
 416                 transition = {
 417                     duration : duration / 1000,
 418                     easing : easing
 419                 };
 420
 421             Y.log("Transition: duration, easing:" + transition.duration, transition.easing, "node-flick");
 422
 423             if (Y.Transition.useNative) {
 424                 transition.transform = 'translate('+ (xn) + 'px,' + (yn) +'px)';
 425             } else {
 426                 transition.left = xn + 'px';
 427                 transition.top = yn + 'px';
 428             }
 429
 430             this._node.transition(transition);
 431         },
 432
 433         /**
 434          * Internal utility method to constrain the offset value
 435          * based on the bounce criteria.
 436          *
 437          * @method _bounce
 438          * @param {Number} x The offset value to constrain.
 439          * @param {Number} max The max offset value.
 440          *
 441          * @private
 442          */
 443         _bounce : function(val, max) {
 444             var bounce = this.get(BOUNCE),
 445                 dist = this.get(BOUNCE_DISTANCE),
 446                 min = bounce ? -dist : 0;
 447
 448             max = bounce ? max + dist : max;
 449
 450             if(!bounce) {
 451                 if(val < min) {
 452                     val = min;
 453                 } else if(val > max) {
 454                     val = max;
 455                 }
 456             }
 457             return val;
 458         },
 459
 460         /**
 461          * Stop the animation timer
 462          *
 463          * @method _killTimer
 464          * @private
 465          */
 466         _killTimer: function() {
 467             if(this._flickTimer) {
 468                 this._flickTimer.cancel();
 469             }
 470         }
 471
 472     }, {
 473
 474         /**
 475          * The threshold used to determine when the decelerated velocity of the node
 476          * is practically 0.
 477          *
 478          * @property VELOCITY_THRESHOLD
 479          * @static
 480          * @type Number
 481          * @default 0.015
 482          */
 483         VELOCITY_THRESHOLD : 0.015,
 484
 485         /**
 486          * The duration to use for the bounce snap-back transition
 487          *
 488          * @property SNAP_DURATION
 489          * @static
 490          * @type Number
 491          * @default 400
 492          */
 493          SNAP_DURATION : 400,
 494
 495         /**
 496          * The default easing to use for the main flick movement transition
 497          *
 498          * @property EASING
 499          * @static
 500          * @type String
 501          * @default 'cubic-bezier(0, 0.1, 0, 1.0)'
 502          */
 503         EASING : 'cubic-bezier(0, 0.1, 0, 1.0)',
 504
 505         /**
 506          * The default easing to use for the bounce snap-back transition
 507          *
 508          * @property SNAP_EASING
 509          * @static
 510          * @type String
 511          * @default 'ease-out'
 512          */
 513         SNAP_EASING : 'ease-out',
 514
 515         /**
 516          * The default CSS class names used by the plugin
 517          *
 518          * @property CLASS_NAMES
 519          * @static
 520          * @type Object
 521          */
 522         CLASS_NAMES : {
 523             box: getClassName(Flick.NS),
 524             content: getClassName(Flick.NS, "content")
 525         }
 526     });
 527
 528     Y.Plugin.Flick = Flick;
 529
 530
 531 }, '3.13.0', {"requires": ["classnamemanager", "transition", "event-flick", "plugin"], "skinnable": true});