qzw_app/script/common.js

//loading
function loading() {
	$("body").append('<div class="loading"></div>');
}

function loadingStop() {
	$(".loading").remove();
}

//弹窗
function fixedTipShow(content) {
	$("body").append(
		'<div class="fixedTip">' +
		'	<div class="aui-content">' +
		'		<div class="aui-row aui-padded-10 fixedTip-content aui-font-size-14">' +
		content +
		'		</div>' +
		'		<div class="aui-row aui-padded-10 aui-text-center aui-text-danger aui-border-t fixedTip-btn" onclick="fixedTipHide()">' +
		'			关闭' +
		'		</div>' +
		'	</div>' +
		'</div>'
	)

	if($(".fixedTip .aui-content").height() <= $(window).height()) {
		$(".fixedTip .aui-content").css("margin-top", ($(window).height() - $(".fixedTip .aui-content").height()) / 2);
	} else {
		$(".fixedTip .aui-content").css({
			"height": $(window).height() - 40,
			"margin-top": "20px"
		}).find(".fixedTip-content").height($(window).height() - $(".fixedTip-btn").height() - 80);
	}
}

//底部弹窗
function bottomTip(content) {
	$("body").append(
		'<div class="bottomTip aui-text-white">' +
		content +
		'</div>'
	)
	$(".bottomTip").animate({
		bottom: "50px"
	}, 249);
	setTimeout(function() {
		$(".bottomTip").animate({
			bottom: "-150px"
		}, 249);
	}, 3249);
}
//图片点击放大
function photoSwiper() {
	//	控件引入文件
	$("head").append('<script src="../../script/photoswipe.min.js"></script>' +
		'<script src="../../script/photoswipe-ui-default.min.js"></script>' +
		'<link rel="stylesheet" type="text/css" href="../../css/photoswipe.css" />' +
		'<link rel="stylesheet" type="text/css" href="../../css/default-skin/default-skin.css" />'
	);
	//	控件弹窗
	$("body").append(
		'<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">' +
		'	<div class="pswp__bg"></div>' +
		'	<div class="pswp__scroll-wrap">' +
		'		<div class="pswp__container">' +
		'			<div class="pswp__item"></div>' +
		'			<div class="pswp__item"></div>' +
		'			<div class="pswp__item"></div>' +
		'		</div>' +
		'		<div class="pswp__ui pswp__ui--hidden">' +
		'			<div class="pswp__top-bar">' +
		'				<div class="pswp__counter"></div>' +
		'				<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>' +
		'				<div class="pswp__preloader">' +
		'					<div class="pswp__preloader__icn">' +
		'						<div class="pswp__preloader__cut">' +
		'							<div class="pswp__preloader__donut"></div>' +
		'						</div>' +
		'					</div>' +
		'				</div>' +
		'			</div>' +
		'			<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">' +
		'				<div class="pswp__share-tooltip"></div>' +
		'			</div>' +
		'			<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>' +
		'			<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>' +
		'			<div class="pswp__caption">' +
		'				<div class="pswp__caption__center"></div>' +
		'			</div>' +
		'		</div>' +
		'	</div>' +
		'</div>'
	);
	//	给b或div加href值
	for(var i = 0; i < $(".photoSwiper-img-box figure").length; i++) {
		$(".photoSwiper-img-box figure").eq(i).find("b").attr("href", $(".photoSwiper-img-box figure").eq(i).find("img").attr('src'));
		$(".photoSwiper-img-box figure").eq(i).find("div").attr("href", $(".photoSwiper-img-box figure").eq(i).find("img").attr('src'));
	}

	var initPhotoSwipeFromDOM = function(gallerySelector) {
		var parseThumbnailElements = function(el) {
			var thumbElements = el.childNodes,
				numNodes = thumbElements.length,
				items = [],
				figureEl,
				linkEl,
				size,
				item;
			for(var i = 0; i < numNodes; i++) {
				figureEl = thumbElements[i];
				if(figureEl.nodeType !== 1) {
					continue;
				}
				linkEl = figureEl.children[0];
				size = linkEl.getAttribute('data-size').split('x');
				item = {
					src: linkEl.getAttribute('href'),
					w: parseInt(size[0], 10),
					h: parseInt(size[1], 10)
				};
				if(figureEl.children.length > 1) {
					item.title = figureEl.children[1].innerHTML;
				}
				if(linkEl.children.length > 0) {
					item.msrc = linkEl.children[0].getAttribute('src');
				}
				item.el = figureEl;
				items.push(item);
			}
			return items;
		};
		var closest = function closest(el, fn) {
			return el && (fn(el) ? el : closest(el.parentNode, fn));
		};
		var onThumbnailsClick = function(e) {
			e = e || window.event;
			e.preventDefault ? e.preventDefault() : e.returnValue = false;
			var eTarget = e.target || e.srcElement;
			var clickedListItem = closest(eTarget, function(el) {
				return(el.tagName && el.tagName.toUpperCase() === 'FIGURE');
			});
			if(!clickedListItem) {
				return;
			}
			var clickedGallery = clickedListItem.parentNode,
				childNodes = clickedListItem.parentNode.childNodes,
				numChildNodes = childNodes.length,
				nodeIndex = 0,
				index;
			for(var i = 0; i < numChildNodes; i++) {
				if(childNodes[i].nodeType !== 1) {
					continue;
				}
				if(childNodes[i] === clickedListItem) {
					index = nodeIndex;
					break;
				}
				nodeIndex++;
			}
			if(index >= 0) {
				openPhotoSwipe(index, clickedGallery);
			}
			return false;
		};
		var photoswipeParseHash = function() {
			var hash = window.location.hash.substring(1),
				params = {};
			if(hash.length < 5) {
				return params;
			}
			var vars = hash.split('&');
			for(var i = 0; i < vars.length; i++) {
				if(!vars[i]) {
					continue;
				}
				var pair = vars[i].split('=');
				if(pair.length < 2) {
					continue;
				}
				params[pair[0]] = pair[1];
			}
			if(params.gid) {
				params.gid = parseInt(params.gid, 10);
			}
			return params;
		};
		var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
			var pswpElement = document.querySelectorAll('.pswp')[0],
				gallery,
				options,
				items;
			items = parseThumbnailElements(galleryElement);
			options = {
				galleryUID: galleryElement.getAttribute('data-pswp-uid'),
				getThumbBoundsFn: function(index) {
					var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
						pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
						rect = thumbnail.getBoundingClientRect();
					return {
						x: rect.left,
						y: rect.top + pageYScroll,
						w: rect.width
					};
				}
			};
			if(fromURL) {
				if(options.galleryPIDs) {
					for(var j = 0; j < items.length; j++) {
						if(items[j].pid == index) {
							options.index = j;
							break;
						}
					}
				} else {
					options.index = parseInt(index, 10) - 1;
				}
			} else {
				options.index = parseInt(index, 10);
			}
			if(isNaN(options.index)) {
				return;
			}
			if(disableAnimation) {
				options.showAnimationDuration = 0;
			}
			gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
			gallery.init();
		};
		var galleryElements = document.querySelectorAll(gallerySelector);
		for(var i = 0, l = galleryElements.length; i < l; i++) {
			galleryElements[i].setAttribute('data-pswp-uid', i + 1);
			galleryElements[i].onclick = onThumbnailsClick;
		}
		var hashData = photoswipeParseHash();
		if(hashData.pid && hashData.gid) {
			openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
		}
	};
	initPhotoSwipeFromDOM('.photoSwiper-img-box');
}