lib/yuilib/3.13.0/resize-proxy/resize-proxy.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('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.13.0', {"requires": ["plugin", "resize-base"]});