zoukankan      html  css  js  c++  java
  • 每日一库:ZeroClipboard.js

    介绍:The Zero Clipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie, and a JavaScript interface

    地址:http://jonrohan.github.com/ZeroClipboard/#demo

    源码解析:

      1 /*!
      2  * zeroclipboard
      3  * The Zero Clipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie, and a JavaScript interface.
      4  * Copyright 2012 Jon Rohan, James M. Greene, .
      5  * Released under the MIT license
      6  * http://jonrohan.github.com/ZeroClipboard/
      7  * v1.1.6
      8  */
      9  
     10 (function() {
     11   "use strict";
     12 
     13   var _getStyle = function(el, prop) { //获取样式
     14     var y = el.style[prop];
     15     if (el.currentStyle) y = el.currentStyle[prop]; else if (window.getComputedStyle) y = document.defaultView.getComputedStyle(el, null).getPropertyValue(prop);
     16     if (y == "auto" && prop == "cursor") { //auto没处理
     17       var possiblePointers = [ "a" ];
     18       for (var i = 0; i < possiblePointers.length; i++) {
     19         if (el.tagName.toLowerCase() == possiblePointers[i]) {
     20           return "pointer";
     21         }
     22       }
     23     }
     24     return y;
     25   };
     26 
     27   var _addEventHandler = function(element, method, func) { //注册事件
     28     if (element.addEventListener) {
     29       element.addEventListener(method, func, false);
     30     } else if (element.attachEvent) {
     31       element.attachEvent("on" + method, func);
     32     }
     33   };
     34 
     35   var _removeEventHandler = function(element, method, func) { //注销事件
     36     if (element.removeEventListener) {
     37       element.removeEventListener(method, func, false);
     38     } else if (element.detachEvent) {
     39       element.detachEvent("on" + method, func);
     40     }
     41   };
     42 
     43   var _inArray = function(elem, array) {
     44     if (array.indexOf) {
     45       return array.indexOf(elem);
     46     }
     47     for (var i = 0, length = array.length; i < length; i++) {
     48       if (array[i] === elem) {
     49         return i;
     50       }
     51     }
     52     return -1;
     53   };
     54 
     55 
     56   var _addClass = function(element, value) {
     57     if (element.addClass) {
     58       element.addClass(value);
     59       return element;
     60     }
     61 
     62     if (value && typeof value === "string") {
     63       var classNames = (value || "").split(/\s+/); //可以一次添加多个classname
     64       if (element.nodeType === 1) {
     65         if (!element.className) {
     66           element.className = value;
     67         } else {
     68 
     69           var className = " " + element.className + " ", setClass = element.className;
     70           for (var c = 0, cl = classNames.length; c < cl; c++) {
     71             if (className.indexOf(" " + classNames[c] + " ") < 0) {
     72               setClass += " " + classNames[c];
     73             }
     74           }
     75           element.className = setClass.replace(/^\s+|\s+$/g, "");
     76 
     77 
     78         }
     79       }
     80     }
     81 
     82     return element;
     83   };
     84 
     85   var _removeClass = function(element, value) {
     86     if (element.removeClass) {
     87       element.removeClass(value);
     88       return element;
     89     }
     90     if (value && typeof value === "string" || value === undefined) {
     91       var classNames = (value || "").split(/\s+/);
     92       if (element.nodeType === 1 && element.className) {
     93         if (value) {
     94           var className = (" " + element.className + " ").replace(/[\n\t]/g, " ");
     95           for (var c = 0, cl = classNames.length; c < cl; c++) {
     96             className = className.replace(" " + classNames[c] + " ", " ");
     97           }
     98           element.className = className.replace(/^\s+|\s+$/g, "");
     99         } else {
    100           element.className = "";
    101         }
    102       }
    103     }
    104     return element;
    105   };
    106 
    107   var _getDOMObjectPosition = function(obj) {
    108     var info = {
    109       left: 0,
    110       top: 0,
    111        obj.width || obj.offsetWidth || 0,
    112       height: obj.height || obj.offsetHeight || 0,
    113       zIndex: 9999
    114     };
    115     var zi = _getStyle(obj, "zIndex");
    116     if (zi && zi != "auto") {
    117       info.zIndex = parseInt(zi, 10);
    118     }
    119     while (obj) {
    120       var borderLeftWidth = parseInt(_getStyle(obj, "borderLeftWidth"), 10);
    121       var borderTopWidth = parseInt(_getStyle(obj, "borderTopWidth"), 10);
    122       info.left += isNaN(obj.offsetLeft) ? 0 : obj.offsetLeft;
    123       info.left += isNaN(borderLeftWidth) ? 0 : borderLeftWidth;
    124       info.top += isNaN(obj.offsetTop) ? 0 : obj.offsetTop;
    125       info.top += isNaN(borderTopWidth) ? 0 : borderTopWidth;
    126       obj = obj.offsetParent;
    127     }
    128     return info;
    129   };
    130 
    131   var _elementMouseOver = function(event) { //mouseover以后关联为当前元素
    132     if (!ZeroClipboard.prototype._singleton) return;
    133     if (!event) {
    134       event = window.event;
    135     }
    136     var target;
    137     if (this !== window) {
    138       target = this;
    139     } else if (event.target) {
    140       target = event.target;
    141     } else if (event.srcElement) {
    142       target = event.srcElement;
    143     }
    144     ZeroClipboard.prototype._singleton.setCurrent(target);
    145   };
    146 
    147   var _noCache = function(path) { //不要缓存
    148     return (path.indexOf("?") >= 0 ? "&" : "?") + "nocache=" + (new Date).getTime();
    149   };
    150 
    151   var _vars = function(options) {
    152     var str = [];
    153     if (options.trustedDomains) {
    154       if (options.trustedDomains.length) {
    155         str.push("trustedDomain=" + options.trustedDomains.join(","));
    156       } else {
    157         str.push("trustedDomain=" + options.trustedDomains);
    158       }
    159     }
    160     return str.join("&");
    161   };
    162 
    163 
    164 
    165   var _prepGlue = function(elements) { //_prep  preparation数组化
    166     if (typeof elements === "string") throw new TypeError("ZeroClipboard doesn't accept query strings.");
    167     if (!elements.length) return [ elements ];
    168     return elements;
    169   };
    170 
    171   var ZeroClipboard = function(elements, options) {
    172     if (elements) (ZeroClipboard.prototype._singleton || this).glue(elements);
    173     if (ZeroClipboard.prototype._singleton) return ZeroClipboard.prototype._singleton;
    174     ZeroClipboard.prototype._singleton = this;
    175     this.options = {};
    176     for (var kd in _defaults) this.options[kd] = _defaults[kd];
    177     for (var ko in options) this.options[ko] = options[ko];
    178     this.handlers = {}; //存处理函数
    179     if (ZeroClipboard.detectFlashSupport()) _bridge();
    180   };
    181 
    182   var currentElement, gluedElements = []; //当前关联元素 所有关联元素
    183 
    184  ZeroClipboard.prototype.getCurrent = function(element) {
    185     return currentElement;
    186   };
    187 
    188 
    189   ZeroClipboard.prototype.setCurrent = function(element) {
    190     currentElement = element;
    191     this.reposition();
    192     this.setText(this.options.text || element.getAttribute("data-clipboard-text"));
    193     if (element.getAttribute("title")) {
    194       this.setTitle(element.getAttribute("title"));
    195     }
    196     this.setHandCursor(_getStyle(element, "cursor") == "pointer");
    197   };
    198 
    199   ZeroClipboard.prototype.setText = function(newText) {
    200     if (newText && newText !== "") {
    201       this.options.text = newText;
    202       if (this.ready()) this.flashBridge.setText(newText);
    203     }
    204   };
    205 
    206   ZeroClipboard.prototype.setTitle = function(newTitle) {
    207     if (newTitle && newTitle !== "") this.htmlBridge.setAttribute("title", newTitle);
    208   };
    209 
    210   ZeroClipboard.prototype.setSize = function(width, height) {
    211     if (this.ready()) this.flashBridge.setSize(width, height);
    212   };
    213 
    214   ZeroClipboard.prototype.setHandCursor = function(enabled) {
    215     if (this.ready()) this.flashBridge.setHandCursor(enabled);
    216   };
    217 
    218   ZeroClipboard.version = "1.1.6";
    219 
    220   var _defaults = {
    221     moviePath: "ZeroClipboard.swf",
    222     trustedDomains: null, //信任;信托;照管
    223     text: '',
    224     hoverClass: "zeroclipboard-is-hover",
    225     activeClass: "zeroclipboard-is-active"
    226   };
    227 
    228   ZeroClipboard.setDefaults = function(options) {
    229     for (var ko in options) _defaults[ko] = options[ko];
    230   };
    231 
    232   ZeroClipboard.destroy = function() { 
    233     ZeroClipboard.prototype._singleton.unglue(gluedElements);
    234     var bridge = ZeroClipboard.prototype._singleton.htmlBridge;
    235     bridge.parentNode.removeChild(bridge);
    236     delete ZeroClipboard.prototype._singleton;
    237   };
    238 
    239   ZeroClipboard.detectFlashSupport = function() {
    240     var hasFlash = false;
    241     try {
    242       if (new ActiveXObject("ShockwaveFlash.ShockwaveFlash")) {
    243         hasFlash = true;
    244       }
    245     } catch (error) {
    246       if (navigator.mimeTypes["application/x-shockwave-flash"]) {
    247         hasFlash = true;
    248       }
    249     }
    250     return hasFlash;
    251   };
    252 
    253   var _bridge = function() {
    254     var client = ZeroClipboard.prototype._singleton;
    255     client.htmlBridge = document.getElementById("global-zeroclipboard-html-bridge");
    256     if (client.htmlBridge) {
    257       client.flashBridge = document["global-zeroclipboard-flash-bridge"];
    258       return;
    259     }
    260     var html = '    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="global-zeroclipboard-flash-bridge" width="100%" height="100%">       <param name="movie" value="' + client.options.moviePath + _noCache(client.options.moviePath) + '"/>       <param name="allowScriptAccess" value="always" />       <param name="scale" value="exactfit">       <param name="loop" value="false" />       <param name="menu" value="false" />       <param name="quality" value="best" />       <param name="bgcolor" value="#ffffff" />       <param name="wmode" value="transparent"/>       <param name="flashvars" value="' + _vars(client.options) + '"/>       <embed src="' + client.options.moviePath + _noCache(client.options.moviePath) + '"         loop="false" menu="false"         quality="best" bgcolor="#ffffff"         width="100%" height="100%"         name="global-zeroclipboard-flash-bridge"         allowScriptAccess="always"         allowFullScreen="false"         type="application/x-shockwave-flash"         wmode="transparent"         pluginspage="http://www.macromedia.com/go/getflashplayer"         flashvars="' + _vars(client.options) + '"         scale="exactfit">       </embed>     </object>';
    261     client.htmlBridge = document.createElement("div");
    262     client.htmlBridge.id = "global-zeroclipboard-html-bridge";
    263     client.htmlBridge.setAttribute("class", "global-zeroclipboard-container");
    264     client.htmlBridge.setAttribute("data-clipboard-ready", false);
    265     client.htmlBridge.style.position = "absolute";
    266     client.htmlBridge.style.left = "-9999px";
    267     client.htmlBridge.style.top = "-9999px";
    268     client.htmlBridge.style.width = "15px";
    269     client.htmlBridge.style.height = "15px";
    270     client.htmlBridge.style.zIndex = "9999";
    271     client.htmlBridge.innerHTML = html;
    272     document.body.appendChild(client.htmlBridge);
    273     client.flashBridge = document["global-zeroclipboard-flash-bridge"];
    274   };
    275 
    276   ZeroClipboard.prototype.resetBridge = function() {
    277     this.htmlBridge.style.left = "-9999px";
    278     this.htmlBridge.style.top = "-9999px";
    279     this.htmlBridge.removeAttribute("title");
    280     this.htmlBridge.removeAttribute("data-clipboard-text");
    281     _removeClass(currentElement, this.options.activeClass);
    282     currentElement = null;
    283   };
    284 
    285   ZeroClipboard.prototype.ready = function() {
    286     var ready = this.htmlBridge.getAttribute("data-clipboard-ready");
    287     return ready === "true" || ready === true;
    288   };
    289 
    290   ZeroClipboard.prototype.reposition = function() { //可调整位置
    291     if (!currentElement) return false;
    292     var pos = _getDOMObjectPosition(currentElement);
    293     this.htmlBridge.style.top = pos.top + "px";
    294     this.htmlBridge.style.left = pos.left + "px";
    295     this.htmlBridge.style.width = pos.width + "px";
    296     this.htmlBridge.style.height = pos.height + "px";
    297     this.htmlBridge.style.zIndex = pos.zIndex + 1;
    298     this.setSize(pos.width, pos.height);
    299   };
    300 
    301   ZeroClipboard.dispatch = function(eventName, args) {
    302     ZeroClipboard.prototype._singleton.receiveEvent(eventName, args);
    303   };
    304 
    305   ZeroClipboard.prototype.on = function(eventName, func) {
    306     var events = eventName.toString().split(/\s/g); //可以同时注册多个事件
    307     for (var i = 0; i < events.length; i++) {
    308       eventName = events[i].toLowerCase().replace(/^on/, "");
    309       if (!this.handlers[eventName]) this.handlers[eventName] = func;
    310     }
    311     if (this.handlers.noflash && !ZeroClipboard.detectFlashSupport()) {
    312       this.receiveEvent("onNoFlash", null);
    313     }
    314   };
    315 
    316   ZeroClipboard.prototype.addEventListener = ZeroClipboard.prototype.on;
    317 
    318   ZeroClipboard.prototype.receiveEvent = function(eventName, args) { //receive收到;接到;接纳;接待
    319     eventName = eventName.toString().toLowerCase().replace(/^on/, "");
    320     var element = currentElement;
    321     switch (eventName) {
    322      case "load":
    323       if (args && parseFloat(args.flashVersion.replace(",", ".").replace(/[^0-9\.]/gi, "")) < 10) {
    324         this.receiveEvent("onWrongFlash", {
    325           flashVersion: args.flashVersion
    326         });
    327         return;
    328       }
    329       this.htmlBridge.setAttribute("data-clipboard-ready", true);
    330       break;
    331      case "mouseover":
    332       _addClass(element, this.options.hoverClass); //element 绑定元素
    333       break;
    334      case "mouseout":
    335       _removeClass(element, this.options.hoverClass);
    336       this.resetBridge();
    337       break;
    338      case "mousedown":
    339       _addClass(element, this.options.activeClass);
    340       break;
    341      case "mouseup":
    342       _removeClass(element, this.options.activeClass);
    343       break;
    344      case "complete":
    345       this.options.text = null;
    346       break;
    347     }
    348     
    349     if (this.handlers[eventName]) {
    350       var func = this.handlers[eventName];
    351       if (typeof func == "function") {
    352         func.call(element, this, args);
    353       } else if (typeof func == "string") {
    354         window[func].call(element, this, args);
    355       }
    356     }
    357   };
    358 
    359 
    360   ZeroClipboard.prototype.glue = function(elements) {  //glue胶合;紧附于
    361     elements = _prepGlue(elements);
    362     for (var i = 0; i < elements.length; i++) {
    363       if (_inArray(elements[i], gluedElements) == -1) {
    364         gluedElements.push(elements[i]);
    365         _addEventHandler(elements[i], "mouseover", _elementMouseOver);
    366       }
    367     }
    368   };
    369 
    370   ZeroClipboard.prototype.unglue = function(elements) {
    371     elements = _prepGlue(elements);
    372     for (var i = 0; i < elements.length; i++) {
    373       _removeEventHandler(elements[i], "mouseover", _elementMouseOver);
    374       var arrayIndex = _inArray(elements[i], gluedElements);
    375       if (arrayIndex != -1) gluedElements.splice(arrayIndex, 1);
    376     }
    377   };
    378 
    379   if (typeof module !== "undefined") {
    380     module.exports = ZeroClipboard;
    381   } else {
    382     window.ZeroClipboard = ZeroClipboard;
    383   }
    384 
    385 })();
  • 相关阅读:
    RUST实践.md
    redis.md
    opencvrust.md
    aws rds can't connect to mysql server on 'xx'
    Foundation ActionScript 3.0 With Flash CS3 And Flex
    Foundation Flash Applications for Mobile Devices
    Flash Mobile Developing Android and iOS Applications
    Flash Game Development by Example
    Actionscript 3.0 迁移指南
    在SWT中非UI线程控制界面
  • 原文地址:https://www.cnblogs.com/zhuzf/p/ZeroClipboard.html
Copyright © 2011-2022 走看看