yunjing_master/public/static/appapi/share/js/iShare.js

/**
 * iShare.js
 * @author singsong
 * @email	zhansingsong@gmail.com
 * @date 2016.3.6
 */
;
(function (root, factory) {
	if ( typeof define === 'function' && define.amd ) {
		define([], factory(root));
	} else if ( typeof exports === 'object' ) {
		module.exports = factory(root);
	} else {
		root.iShare = factory(root);
	}
})(typeof global !== 'undefined' ? global : this.window || this.global, function (root) {
	/**
	 * 严格模式
	 */
	'use strict';
	
	/**
	 * Util 单例工具类
	 */
	var Util = {
			/**
			 * event 事件注册与注销
			 * addEvent 注册事件
			 * removeEvent 注销事件
			 */
			event: {
				addEvent: function(element, type, handler){
					if(element.addEventListener){
						element.addEventListener(type, handler, false);
					} else if(element.attachEvent){
						element.attachEvent('on' + type, handler);
					} else {
						element['on' + type] = handler;
					}
				},
				removeEvent: function(element, type, handler){
					if(element.removeEventListener){
						element.removeEventListener(type, handler, false);
					} else if(element.detachEvent){
						element.detachEvent('on' + type, handler);
					} else {
						element['on' + type] = null;
					}
				},
				stopPropagation: function(event){
					if(event.stopPropagation) {
				      event.stopPropagation();
					  }else {
				      event.cancelBubble = true;
					  }
				},
				preventDefault: function(event){
					if(event.preventDefault){
						event.preventDefault();
					} else {
						event.returnValue = false;
					}
				}
			},

			/**
			 * trim 		
			 * @param  {String} str 字符串
			 * @return {String}    
			 */
			trim: function(str){
				if(String.prototype.trim){
					return str.trim();
				}
				return str.replace(/^\s+|s+$/g, '');
			},

			/**
			 * indexOf 
			 * @param  {Array} 	arr  数组
			 * @param  {Object} item 项
			 * @return {Number}      索引
			 */
			indexOf: function(arr, item){
				if(!this.isArray(arr)){
					 throw new Error(arr.toString() + ' is a non-Array！');
				}
				if(Array.prototype.indexOf){
					return arr.indexOf(item);
				}
				for(var i = 0, len = arr.length; i < len; i++){
					if(arr[i] === item){
						return i;
					}
				}
			},

			/**
			 * isArray 判断是否是数组
			 * @param  {Ojbect}  arr 被判断对象
			 * @return {Boolean}     
			 */
			isArray: function(arr) {
				if(Array.isArray){
					return Array.isArray(arr);
				}
				return Object.prototype.toString.call(arr) === '[object Array]';
			},

			/**
			 * validate 验证用户输入的有效性
			 * @param  {Object} ref 参考对象
			 * @param  {Object} o   验证对象
			 * @return {Array}     	错误队列
			 */
			validate: function(ref, o){
				var _key, 
						_result = [];

				if(this.isArray(o)){
					for(var i = 0, item; item = o[i++];){
						if(this.indexOf(ref, item) < 0){
							_result.push(item);
						}
					}
				} else {
					for(_key in o){
						if(!(_key in ref)){
							_result.push(_key);
						}
					}
				}
				if(_result.length !== 0){
					throw new Error('there is such no property: ' + _result.join(', '));
				}
			},

			/**
			 * getElementTop 获取元素的offsetTop
			 * @param  {DOMObject} element 元素
			 * @return {Number}    offsetTop值
			 */
			getElementTop: function(element) {
		    var _actualTop = element.offsetTop,
		        _current = element.offsetParent;
		    while (_current !== null) {
		        _actualTop += _current.offsetTop;
		        _current = _current.offsetParent;
		    }
		    return _actualTop;
			},

			/**
			 * getElementLeft 获取元素的offsetLeft
			 * @param  {DOMObject} element 元素
			 * @return {Number}    offsetLeft值
			 */
			getElementLeft: function(element) {
		    var _actualTop = element.offsetLeft,
		        _current = element.offsetParent;
		    while (_current !== null) {
		        _actualTop += _current.offsetLeft;
		        _current = _current.offsetParent;
		    }
		    return _actualTop;
			},
			/**
			 * handleParameters 处理URL参数
			 * @param  {Object} options 配置项
			 * @return {String}  
			 */
			handleParameters: function(options) {
				var _str = '';
				for(var key in options){
					_str = _str + key + '=' + encodeURIComponent(options[key]) + '&';
				}
				return _str;
			},

			/**
			 * extend mix-in
			 * @return {Ojbect} 
			 */
			extend: function() {
				var _arg,
						_prop,
						_child = {};
				for(_arg = 0; _arg < arguments.length; _arg++) {
					for(_prop in arguments[_arg]){
						if(arguments[_arg].hasOwnProperty(_prop)){

							_child[_prop] = arguments[_arg][_prop];
						}
					}
				}
				return _child;
			},

			/**
			 * each 遍历数组
			 * @param  {Array}   	o       		数组
			 * @param  {Function} callback		回调函数
			 * @return {Object}
			 */
			each: function(o, callback) {
				if(!o){
					return;
				}
				var _r;
				for(var i = 0, l = o.length; i < l; i++){
					_r = callback.call(o[i], i, o[i]);
				}
				return _r;
			},

		/**
		 * getElementByclassN 通过class获取元素
		 * @param  {String} classNameStr 类名
		 * @param  {Node} parent 父元素
		 * @return {DOMObject}
		 *
		 * @example
		 * getElementByclassN('.test');
		 */
		getElementByclassN: function(classNameStr, parent) {
			if(!classNameStr){
				return;
			}
			var _result = [];

			if(!parent && document.querySelectorAll){
				_result = document.querySelectorAll(classNameStr);
				if(_result.length > 0){
					return _result;
				}
			}
			var _cnArr = classNameStr.split('.'),
					_prefix = _cnArr[0] || '*',
					_suffix = _cnArr[1],
					_parent = parent ? parent : document.body,
					_elements = _parent.getElementsByTagName(_prefix),
					_classNames,
					_target;
			var _me = this;
			this.each(_elements, function(index, item){
				if( item.nodeType === 1 ){
					_classNames = item.className.split(/\s+/g);
					_target = item;
					_me.each(_classNames, function(cindex, citem){
						if((citem + '') === _suffix){
							_result.push(_target);
						}
					});
				}
			});
			return _result;
		},

			/**
			 * getmeta 通过name获取对应meta的content值
			 * @param  {String} name meta的name
			 * @return {String}
			 */
			getmeta: function(name) {
				var _metas = document.getElementsByTagName('meta');
				for(var i = 0, _item; _item = _metas[i++];){
					if(_item.getAttribute('name') === name){
						return _item.content;
					}
				}
			},

			/**
			 * getimg 获取页面中第一张图片的URL
			 * @return {String}
			 */
			getimg: function(){
				var _imgs = this.convertToArray(document.body.getElementsByTagName('img'));
				if(_imgs.length === 0){
					return;
				}
				return encodeURIComponent(_imgs[0].src);
			},

			/**
			 * getElement 获取指定元素
			 * @param {String}  selector 选择器(仅支持class和id)
			 */
			getElement: function(selector){
				var _node;
				if(selector.charAt(0) === '#'){
					_node = document.getElementById(selector);
				} else {
					_node = this.getElementByclassN(selector)[0];
				}
				return _node;
			},

			/**
			 * parseUrl 解析URL
			 * @param  {Object}	tpl  模板
			 * @param  {Object} data 数据 
			 * @return {Object}
			 */
			parseUrl: function(tpl, data){
				var _tplStr = {};
				for(var _name in tpl){
						_tplStr[_name] = tpl[_name].replace(/{{([A-Z]*)}}/g, function(match, p1){
							var _key = p1.toLowerCase();
								if(data[_key]){
									return encodeURIComponent(data[_key]);
								} else {
									return '';
								}
						});
				}
				return _tplStr;
			},

			/**
			 * isWeixinBrowser 判断是否在微信中
			 * @return {Boolean}
			 */
			isWeixinBrowser: function(){
			    var _ua = navigator.userAgent.toLowerCase();
			    return (/micromessenger/.test(_ua)) ? true : false ;
			},

			/**
			 * convertToArray 转换为数组
			 * @param  {NodeList} nodes Nodes数组
			 * @return {Array}      
			 */
			convertToArray: function(nodes){
				var _array = null;
				try {
					_array = Array.prototype.slice.call(nodes, 0);
				} catch (ex){
					// 针对IE8及之前版本
					_array = new Array();
					for(var i = 0, len = nodes.length; i < len; i++) {
						 _array.push(nodes[i]);
					}
				}
				return _array;
			},

			/**
			 * parseClassName 解析类名
			 * @param  {String} className 类名
			 * @param  {Object} tpl       模板数据
			 * @return {String}           
			 */
			parseClassName: function(className, tpl){
			var _result = null;
			var _arr = className.split(/\s+/);
			for(var i = 0, item; item = _arr[i++];){
					if(item in tpl){
						 return tpl[item];
					}
				}
			},

			/**
			 * getWinDimension 获取可视页面的尺寸
			 * @return {Object} 
			 */
			getWinDimension: function(){
				var _pageWidth = window.innerWidth,
						_pageHeight = window.innerHeight;
				if(typeof _pageWidth !== 'number'){
					if(document.compatMode === 'CSS1Compat'){
						_pageWidth = document.documentElement.clientWidth;
						_pageHeight = document.documentElement.clientHeight;
					} else {
						_pageWidth = document.body.clientWidth;
						_pageHeight = document.body.clientHeight;
					}
				}
				return {pageWidth: _pageWidth, pageHeight: _pageHeight};
			},
			/**
			 * throttle 节流优化
			 * @param  {Function} fn    回调函数
			 * @param  {Number}   delay 时间间隔
			 */
			throttle: function(fn, delay){
			 	var timer = null;
			 	return function(){
			 		var context = this, args = arguments;
			 		clearTimeout(timer);
			 		timer = setTimeout(function(){
			 			fn.apply(context, args);
			 		}, delay);
			 	};
			 },
			 /**
			  * loadjs 加载js文件
			  * @param {String} url 路径
			  * @param {Function} callback 回调函数
			  */
			 loadjs: function() {
			 	var ready = false,
			 			cb = [];
			 	return function(url, callback){
			 		var head = document.getElementsByTagName('head')[0],
			 				node = document.createElement('script'),
			 				isLoaded = document.getElementById('loaded'),
			 				W3C = document.dispatchEvent;
			 		cb.push(callback);
			 		if(!ready){
			 			node.setAttribute('type', 'text/javascript');
			 			node.setAttribute('id', 'loaded');
			 			node.setAttribute('src', url);

			 			node[W3C ? 'onload' : 'onreadystatechange'] = function(){
			 				if(ready){
			 					return;
			 				}
			 				if(W3C || /loaded|complete/i.test(node.readyState)) {
			 					ready = true;
			 					var temp;
			 					while(temp = cb.pop()){
			 						temp();
			 					}
			 				}
			 			};
			 			(!isLoaded) && (head.appendChild(node));
			 		} else {
			 			if(callback){
			 				callback();			
			 			}
			 		}
			 	}
			 }()
		};

		/**
		 * WX 微信类
		 * @param {DOMObject} element 微信按钮节点
		 * @param {object} 		options 配置项
		 * 
		 */
		 function WX(element, URL, options) {
		 	this.element = element;
		 	this.wxbox = document.createElement('div');
		 	// 配置项
		 	this.URL = URL;
		 	this.settings = options;
		 	this.style = options.style;
		 	this.bgcolor = options.bgcolor;
		 	this.evenType = options.evenType || 'mouseover'; // 默认触发方式
		 	this.isTitleVisibility = (options.isTitleVisibility === void(0)) ? true : options.isTitleVisibility; // 是否有标题
		 	this.title = options.title || '分享到微信';
		 	this.isTipVisibility = (options.isTipVisibility === void(0)) ? true : options.isTipVisibility; // 是否有提示
		 	this.tip = options.tip || '“扫一扫” 即可将网页分享到朋友圈。';
		 	this.upDownFlag = '';// 保存up|down
		 	this.status = false; // 保存状态
		 	this.visibility = false;// 保存可见性
		 	this.qrcode = null; // 保存二维码
		 }
		 WX.prototype = function() {
		 	return{
		 		constructor: WX,
		 		init: function() {
		 			this.render();
		 			this.init = this.show;
		 			this.bindEvent();
		 		},
		 		render: function(){
		 			var _upFlag = '',
		 					_downFlag = '',
		 					// _widthStyle = (!this.isTitleVisibility || !this.isTipVisibility) ? 'width: 110px;' : 'width : 150px;',
		 					_imgStyle = '',//待定
		 					_titleStyle = '',//待定
		 					_tipStyle = '', //待定
		 					_bgcolor = this.bgcolor ? this.bgcolor : '#ddd',
		 					_radius = '';

		 			// 判断上下
		 			if (Util.getWinDimension().pageHeight / 2 < Util.getElementTop(this.element)) {
		 				_downFlag = '';
		 				_upFlag = 'display:none;';
		 				this.upDownFlag = 'down';
		 				_radius = 'border-bottom-left-radius: 0;';
		 			} else {
						_downFlag = 'display:none;';
						_upFlag = '';
						this.upDownFlag = 'up';
						_radius = 'border-top-left-radius: 0;';
		 			}
		 			
		 			var	_containerHTML = '<div style="text-align: center;background-color: ' + _bgcolor + ';box-shadow: 1px 1px 4px #888888;padding: 8px 8px 4px;border-radius: 4px;' + _radius + '">',
		 					_titleHTML = this.isTitleVisibility ?  '<p class="tt" style="line-height: 30px;margin:0; text-shadow: 1px 1px rgba(0,0,0,0.1);font-weight: 700;margin-bottom: 4px;' + _titleStyle + '">' + this.title + '</p>' : '',
		 					// _imgHTML = '<img  style="font-size: 12px;line-height: 20px; -webkit-user-select: none;box-shadow: 1px 1px 2px rgba(0,0,0,0.4); ' + _imgStyle + '" src="' + this.URL + '">',
		 				  _imgHTML = '<div class="qrcode" style="width:' + this.settings.qrcodeW + 'px; height:' + this.settings.qrcodeH + 'px; overflow:hidden;"></div>',
		 					_tipHTML = this.isTipVisibility ? '<p style="font-size: 12px;line-height: 20px; margin: 4px auto;width: 120px;' + _tipStyle + '">' + this.tip + '</p>' : '',
		 					_upArrowHTML = '<div style="' + _upFlag + 'position: relative;height: 0;width: 0;border-style: solid;border-width: 12px;border-color: transparent;border-bottom-color: ' + _bgcolor + ';border-top: none;"></div>',
		 					_downArrowHTML = '</div><div style="' + _downFlag + 'position: relative;height: 0;width: 0;border-style: solid;border-width: 12px;border-color: transparent;border-top-color: ' + _bgcolor + ';border-bottom: none;"></div>';
		      // 拼接WXHTML
		      var WXSTR = _upArrowHTML + _containerHTML + _titleHTML + _imgHTML + _tipHTML + _downArrowHTML;

		      this.wxbox.innerHTML = WXSTR;
		      this.wxbox.style.cssText = 'position:absolute; left: -99999px;';
		      document.body.appendChild(this.wxbox);
		 		},
		 		setLocation: function(flag){
		 			// 渲染后再调整位置
		 			var _boxW = this.wxbox.offsetWidth,
		 					_boxH = this.wxbox.offsetHeight,
		 					_eW = this.element.offsetWidth,
		 					_eH = this.element.offsetHeight,
		 					_eTop = Util.getElementTop(this.element),
		 					_eLeft = Util.getElementLeft(this.element),
		 					_boxStyle = 'position:absolute; color: #000;z-index: 99999;';
		 			
		 			_boxStyle = _boxStyle + 'left: ' + ( _eW / 2 - 12 + _eLeft) + 'px;';
		 			if(this.upDownFlag === 'down'){
		 				_boxStyle = _boxStyle + 'top: ' + (_eTop - _boxH) + 'px;';
		 			} else {
		 				_boxStyle = _boxStyle + 'top: ' + (_eTop + _eH) + 'px;';
		 			}
		 			this.wxbox.style.cssText = _boxStyle + this.style;
		 			flag && (this.hide());
		 		},
		 		bindEvent: function() {
		 			var _me = this;
		 			if(this.evenType === 'click'){
			 			Util.event.addEvent(this.element, 'click', function(e){
			 				var event = e || window.event;
		 					Util.event.stopPropagation(event);
		 					Util.event.preventDefault(event);
		 					if(!_me.visibility){
			 					_me.show();
		 					} else {
		 						_me.hide();
		 					}
			 			});
		 			} else {
			 			Util.event.addEvent(this.element, 'mouseover', function(e){
			 				var event = e || window.event;
		 					// Util.event.stopPropagation(event);
		 					_me.show();
			 			});
			 			Util.event.addEvent(this.element, 'mouseout', function(e){
			 				var event = e || window.event;
			 				// Util.event.stopPropagation(event);
			 				_me.hide();
			 			});
		 			}
		 			Util.event.addEvent(window, 'resize', Util.throttle(function(){
		 				(_me.status) && (_me.visibility) && (_me.setLocation());
		 			}, 200));
		 		},
		 		startQR: function(){
		 			var me = this;
		 			return function(){
		 				if(!me.qrcode){
		 					me.qrcode = new QRCode(Util.getElementByclassN('.qrcode', me.wxbox)[0], {
		 					    text: me.URL,
		 					    width: me.settings.qrcodeW,
		 					    height: me.settings.qrcodeH,
		 					    colorDark : me.settings.qrcodeFgc,
		 					    colorLight : me.settings.qrcodeBgc
		 					});
		 				}
		 			}
		 		},
		 		show: function(){
	 				this.status = true;
	 				this.wxbox.style.display = 'block';
	 				this.visibility = true;
	 				this.show = function(){
	 					this.wxbox.style.display = 'block';
	 					this.visibility = true;
	 				}
		 		},
		 		hide: function() {
		 		  this.wxbox.style.display = 'none';
		 		  this.visibility = false;
		 		}
		 	};	
		 }();

	/**
	 * iShare 分享
	 */
	function iShare(options) {
		var defaults = {
					title       : document.title,
					url         : location.href,
					host        : location.origin || '',
					description : Util.getmeta('description'),
					image       : Util.getimg(),
					WXoptions   : {
						qrcodeW: 120,
						qrcodeH: 120,
						qrcodeBgc: '#fff',
						qrcodeFgc: '#000',
						bgcolor: '#2BAD13'
					}
				};

		var configuration = options || window.iShare_config;
		if(configuration){
			if(configuration.container){
				if(Util.getElement(configuration.container)){
					this.container = Util.getElement(configuration.container);
				} else {
					throw new Error('there is such no className|id: "' + configuration.container + '".');
				}
			} else {
				throw new Error('container property is required.');
			}
		} else {
			throw new Error('container property is required.');
		}
		var dataSites = this.container.getAttribute('data-sites'),
				dataSitesArr =  dataSites ? dataSites.split(/\s*,\s*/g) : null;

		/* 验证用户输入的有效性 */
		(dataSitesArr) && (Util.validate(defaults.sites, dataSitesArr));
		(configuration.config) && (Util.validate(defaults, configuration.config));
		(configuration.config.sites) && (Util.validate(defaults.sites, configuration.config.sites));
	
		/* WX */
		this.wx = null;

		/* 保存defaults */
		this.defaults = defaults;
		this.dataSites = dataSitesArr ? {sites: dataSitesArr} : {};
		this.config = configuration.config ? configuration.config : {};

		this.settings = Util.extend(defaults, this.config, this.dataSites);
		this.settings.WXoptions = Util.extend(defaults.WXoptions, this.config.WXoptions);
		this.init();
	}
	iShare.prototype = (function(){
		var _templates = {
	        iShare_qq          : '',
	        iShare_qzone       : 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={{URL}}&title={{TITLE}}&summary={{DESCRIPTION}}&pics={{IMAGE}}&desc=&site=',
	        iShare_tencent     : 'http://share.v.t.qq.com/index.php?c=share&a=index&title={{TITLE}}&url={{URL}}&pic={{IMAGE}}',
	        iShare_weibo       : 'http://service.weibo.com/share/share.php?url={{URL}}&title={{TITLE}}&pic={{IMAGE}}',
	        iShare_wechat      : '',
	        iShare_douban      : 'http://shuo.douban.com/!service/share?href={{URL}}&name={{TITLE}}&text={{DESCRIPTION}}&image={{IMAGE}}',
	        iShare_renren			 : 'http://widget.renren.com/dialog/share?resourceUrl={{URL}}&title={{TITLE}}&pic={{IMAGE}}&description={{DESCRIPTION}}',
	        iShare_youdaonote  : 'http://note.youdao.com/memory/?title={{TITLE}}&pic={{IMAGE}}&summary={{DESCRIPTION}}&url={{URL}}',
	        iShare_linkedin    : 'http://www.linkedin.com/shareArticle?mini=true&ro=true&title={{TITLE}}&url={{URL}}&summary={{DESCRIPTION}}&armin=armin',
	        iShare_facebook    : 'https://www.facebook.com/sharer/sharer.php?s=100&p[title]={{TITLE}}p[summary]={{DESCRIPTION}}&p[url]={{URL}}&p[images]={{IMAGE}}',
	        iShare_twitter     : 'https://twitter.com/intent/tweet?text={{TITLE}}&url={{URL}}',
	        iShare_googleplus  : 'https://plus.google.com/share?url={{URL}}&t={{TITLE}}',
	        iShare_pinterest	 : 'https://www.pinterest.com/pin/create/button/?url={{URL}}&description={{DESCRIPTION}}&media={{IMAGE}}',
	        iShare_tumblr			 : 'https://www.tumblr.com/widgets/share/tool?shareSource=legacy&canonicalUrl=&url={{URL}}&title={{TITLE}}'
	    	};
    /**
     * _updateUrl 更新添加分享的A标签
     */
		function _updateUrl(){
			if(this.container === void(0) || !this.container.hasChildNodes()){
				return;
			}
			var _children = this.container.childNodes,
					_tempURL;
			for(var i = 0, item; item = _children[i++];){
				if(item.nodeType === 1){
					_tempURL = Util.parseClassName(item.className, Util.parseUrl(_templates, this.settings));
					/* 验证是否在微信中 */
					if((item.className).indexOf('iShare_wechat') > -1 && !(Util.isWeixinBrowser())){
						// this.wx = new WX(item, _tempURL, this.settings.WXoptions);
						//this.wx = new WX(item, this.settings.url, this.settings.WXoptions);
						return;
					}else if((item.className).indexOf('iShare_qq') > -1 && !(Util.isWeixinBrowser())){
						return;
					}else {
						_tempURL && (item.href = _tempURL);
						item.target = '_blank';
					}
				}
			}
		}
		//prototype
		return{
			constructor: iShare,
			init: function() {
				_updateUrl.call(this);
				if(this.wx){
					this.bindEvent();
					this.wx.init();
					// 加载qrcode库
					//Util.loadjs('qrcode.min.js', this.wx.startQR());
				}
			},
			bindEvent: function(){
			var me = this;
			// 只绑定一次，进行初始化
			function mouseenterCB(){
				me.wx.setLocation(true);
				Util.event.removeEvent(me.container, 'mouseover', mouseenterCB);
				}
			Util.event.addEvent(this.container, 'mouseover', mouseenterCB);
			}
		}
	})();
	if(window.iShare_config){
		return (new iShare());
	} else {
		return iShare;
	}
});