YUI3 View Plugin

gistfile1.js

YUI.add('unomi-view-plugin-clipboard', function (Y) {

  var NSVP = Y.namespace('Unomi.View.Plugin');
  /**
  * Adds flash based clipboard functionality to a page.
  * The default behavior is to react to mouseover events of elements with
  * a "data-action"="clipboard" attribute and expect it to wrap an A tag with the relevant text to be copied
  * This behavior can be modified by intercepting the "syncClipBoard" event.
  * See usage example in javascripts/unomi/view/support_tool/unomi-view-support_tool-ticketlist.js
  * @extends Plugin
  * @module unomi-view-plugin-clipboard
  * @namespace unomi.View.Plugin
  * @class ClipBoardPlugin
  */

  // Set up inheritance - this ensures that the parent constructor is called
  function ClipBoardPlugin(config) {
    ClipBoardPlugin.superclass.constructor.apply(this, arguments);
  }

  /**
   * Generally speaking all 'standard' plugins should inherit from Y.Plugin.Base
   * It is not a hard requirement - but it seems likely that it would serve us best in the long run
   * See: http://yuilibrary.com/yui/docs/plugin/
   */
  Y.extend(ClipBoardPlugin, Y.Plugin.Base, {

    initializer: function (config) {
      /**
       * The host object we are plugging into
       * @property _host
       * @type Node
       */
      this._host = this.get('host');
      this.container = this._host.container;

      //IE seems to be particularly delicate about early DOM modification.
      //The load event is a frustratingly late stage - but domready can fire 'too soon'
      Y.on('domready', function(){
        /**
         * Initialized clipboard object
         * See: http://yuilibrary.com/gallery/show/xarno-clipboard
         * Note: https://www.assembla.com/code/joedeveloper-yui-fork/git/changesets/9e0a2701aed40d945278fc564791f1454835a441
         * @property cb
         * @type Object
         */
        this.cb = new Y.Xarno.Clipboard({
          swfPath: '/javascripts/yui/yui3-gallery/gallery-xarno-clipboard/XarnoClipboard.swf'
        });
        this._bindEvents();
      }, this);
    },
    destructor: function () {},
    _bindEvents: function () {
      //define default event handler and bind it to the host page view.
      //Here we take advantage of the rather nice syntax of Y.View event binding.
      //SelectorString:{event_type: functionName} - Where the selectorstring is delegated within the View container.
      var events = {
        '[data-action="clipboard"]': {
          mouseover: 'syncClipBoard'
        }
      };
      this._host.attachEvents.call(this, events);
      /**
       * Event fired when a clipboard trigger is moused over
       * External listeners can override default behavior through this
       * By cancelling the event and setting cbTrigger / cbText directly
       * Alternatively one can take action on the 'cbTextChange' event.
       * @event syncClipBoard
       * @preventable _defSyncClipBoard
       * @param {EventFacade} e Event object for the mouseOver property
       */
      this.publish('syncClipBoard', {
        defaultFn: this._defSyncClipBoard,
        preventable: true
      });
      //Sync the cbText after it changes
      //YUI attribute system has automatic events when changes are made:
      //attrNameChange <-- automatic event, can listen to 'before', 'on' and 'after'
      var cbp = this, cb = cbp.cb;
      this.after('cbTextChange', function (e) {
        cb.setText(cbp.get('cbText'));
      });
      //Sync the clipboard overlay when the trigger changes
      this.after('cbTriggerChange', function (e) {
        //IE has issues with text element dimensions
        var trigger = cbp.get('cbTrigger');
        if (trigger.get('offsetHeight') < 10){
          trigger.setStyle('display', 'inline-block');
        }
        cb.moveTo(trigger);
      });
      //Propagate mouseUp event
      cb._movie.on('mouseup', function(e){
        Y.fire('clipboardMouseUp', cbp.get('cbTrigger'));}
      );

    },
    syncClipBoard: function (e) {
      this.fire('syncClipBoard', {origE: e});
    },
    _defSyncClipBoard: function (e) {
      var copyEl = e.origE.currentTarget;
      this.set('cbTrigger', copyEl);
      this.set('cbText', copyEl.one('a').get('href'));
    }
  }, {
    NAME: "clipboardPlugin",
    NS: "clipboard",
    ATTRS: {
      cbText: {
        value: ""
      },
      cbTrigger: {
        value: ""
      }
    }
  });

  NSVP.ClipBoardPlugin = ClipBoardPlugin;
}, '0.0.1', {
  requires: ["event-base","plugin", "gallery-xarno-clipboard"]
});