[Summary view] [Print] [Text view]

   1  /*
   2  YUI 3.17.2 (build 9c3c78e)
   3  Copyright 2014 Yahoo! Inc. All rights reserved.
   4  Licensed under the BSD License.
   5  http://yuilibrary.com/license/
   6  */
   7  
   8  YUI.add('resize-proxy', function (Y, NAME) {
   9  
  10  var ACTIVE_HANDLE_NODE = 'activeHandleNode',
  11      CURSOR = 'cursor',
  12      DRAG_CURSOR = 'dragCursor',
  13      HOST = 'host',
  14      PARENT_NODE = 'parentNode',
  15      PROXY = 'proxy',
  16      PROXY_NODE = 'proxyNode',
  17      RESIZE = 'resize',
  18      RESIZE_PROXY = 'resize-proxy',
  19      WRAPPER = 'wrapper',
  20  
  21      getCN = Y.ClassNameManager.getClassName,
  22  
  23      CSS_RESIZE_PROXY = getCN(RESIZE, PROXY);
  24  
  25  
  26  /**
  27  Adds a `proxyNode` attribute and resizes it instead of the actual node. __very similar to DDProxy__
  28  
  29      var resize = new Y.Resize({
  30          //Selector of the node to resize
  31          node: '#demo'
  32      });
  33      resize.plug(Y.Plugin.ResizeProxy);
  34  
  35  
  36  @class ResizeProxy
  37  @module resize
  38  @submodule resize-proxy
  39  @constructor
  40  @extends Plugin.Base
  41  @namespace Plugin
  42  */
  43  
  44  
  45  function ResizeProxy() {
  46      ResizeProxy.superclass.constructor.apply(this, arguments);
  47  }
  48  
  49  Y.mix(ResizeProxy, {
  50      NAME: RESIZE_PROXY,
  51  
  52      NS: PROXY,
  53  
  54      ATTRS: {
  55          /**
  56           * The Resize proxy element.
  57           *
  58           * @attribute proxyNode
  59           * @default Generated using an internal HTML markup
  60           * @type String|Node
  61           */
  62          proxyNode: {
  63              setter: Y.one,
  64              valueFn: function() {
  65                  return Y.Node.create(this.PROXY_TEMPLATE);
  66              }
  67          }
  68      }
  69  });
  70  
  71  Y.extend(ResizeProxy, Y.Plugin.Base, {
  72      /**
  73       * Template used to create the resize proxy.
  74       *
  75       * @property PROXY_TEMPLATE
  76       * @type {String}
  77       */
  78      PROXY_TEMPLATE: '<div class="'+CSS_RESIZE_PROXY+'"></div>',
  79  
  80      initializer: function() {
  81          var instance = this;
  82  
  83          instance.afterHostEvent('resize:start', instance._afterResizeStart);
  84          instance.beforeHostMethod('_resize', instance._beforeHostResize);
  85          instance.afterHostMethod('_resizeEnd', instance._afterHostResizeEnd);
  86      },
  87  
  88      destructor: function() {
  89          var instance = this;
  90  
  91          instance.get(PROXY_NODE).remove(true);
  92      },
  93  
  94      _afterHostResizeEnd: function(event) {
  95          var instance = this,
  96              drag = event.dragEvent.target;
  97  
  98          // reseting actXY from drag when drag end
  99          drag.actXY = [];
 100  
 101          // if proxy is true, hide it on resize end
 102          instance._syncProxyUI();
 103  
 104          instance.get(PROXY_NODE).hide();
 105      },
 106  
 107      _afterResizeStart: function() {
 108          var instance = this;
 109  
 110          instance._renderProxy();
 111      },
 112  
 113      _beforeHostResize: function(event) {
 114          var instance = this,
 115              host = this.get(HOST);
 116  
 117          host._handleResizeAlignEvent(event.dragEvent);
 118  
 119          // if proxy is true _syncProxyUI instead of _syncUI
 120          instance._syncProxyUI();
 121  
 122          return new Y.Do.Prevent();
 123      },
 124  
 125      /**
 126        * Render the <a href="ResizeProxy.html#attr_proxyNode">proxyNode</a> element and
 127        * make it sibling of the <a href="Resize.html#attr_node">node</a>.
 128        *
 129        * @method _renderProxy
 130        * @protected
 131        */
 132      _renderProxy: function() {
 133          var instance = this,
 134              host = this.get(HOST),
 135              proxyNode = instance.get(PROXY_NODE);
 136  
 137          if (!proxyNode.inDoc()) {
 138              host.get(WRAPPER).get(PARENT_NODE).append(
 139                  proxyNode.hide()
 140              );
 141          }
 142      },
 143  
 144      /**
 145       * Sync the proxy UI with internal values from
 146       * <a href="ResizeProxy.html#property_info">info</a>.
 147       *
 148       * @method _syncProxyUI
 149       * @protected
 150       */
 151      _syncProxyUI: function() {
 152          var instance = this,
 153              host = this.get(HOST),
 154              info = host.info,
 155              activeHandleNode = host.get(ACTIVE_HANDLE_NODE),
 156              proxyNode = instance.get(PROXY_NODE),
 157              cursor = activeHandleNode.getStyle(CURSOR);
 158  
 159          proxyNode.show().setStyle(CURSOR, cursor);
 160  
 161          host.delegate.dd.set(DRAG_CURSOR, cursor);
 162  
 163          proxyNode.sizeTo(info.offsetWidth, info.offsetHeight);
 164  
 165          proxyNode.setXY([ info.left, info.top ]);
 166      }
 167  });
 168  
 169  Y.namespace('Plugin');
 170  Y.Plugin.ResizeProxy = ResizeProxy;
 171  
 172  
 173  }, '3.17.2', {"requires": ["plugin", "resize-base"]});