@oxiaom/adoremix-linux-arm 1.0.0

package/native/etc/docroot/bangzhu/js/mui.imageViewer.js

@@ -0,0 +1,268 @@
+/**
+ * 图片预览组件
+ * varstion 0.4.0
+ * by Houfeng
+ * Houfeng@DCloud.io
+ */
+
+(function($, document) {
+
+	$.init({
+		gestureConfig: {
+			tap: true, //默认为true
+			doubletap: true, //默认为false
+			longtap: true, //默认为false
+			swipe: true, //默认为true
+			drag: true, //默认为true
+			hold: true, //默认为false，不监听
+			release: true //默认为false，不监听
+		}
+	});
+
+	var touchSupport = ('ontouchstart' in document);
+	var tapEventName = touchSupport ? 'tap' : 'click';
+	var enterEventName = touchSupport ? 'tap' : 'click';
+	var imageClassName = $.className('image');
+
+
+	//创建DOM (此函数是否可放在 mui.js 中)
+	$.dom = function(str) {
+		if (!$.__create_dom_div__) {
+			$.__create_dom_div__ = document.createElement('div');
+		}
+		$.__create_dom_div__.innerHTML = str;
+		return $.__create_dom_div__.childNodes;
+	};
+
+	//图片预览组件类
+	var ImageViewer = $.ImageViewer = $.Class.extend({
+		//构造函数
+		init: function(selector, options) {
+			var self = this;
+			self.options = options || {};
+			self.selector = selector || 'img';
+			if (self.options.dbl) {
+				enterEventName = touchSupport ? 'doubletap' : 'dblclick';
+			}
+			self.findAllImage();
+			self.createViewer();
+			self.bindEvent();
+		},
+		//创建图片预览组件的整体 UI
+		createViewer: function() {
+			var self = this;
+			self.viewer = $.dom("<div class='mui-imageviewer'><div class='mui-imageviewer-mask'></div><div class='mui-imageviewer-header'><i class='mui-icon mui-icon-closeempty mui-imageviewer-close'></i><span class='mui-imageviewer-state'></span></div><i class='mui-icon mui-icon-arrowleft  mui-imageviewer-left'></i><i class='mui-icon mui-icon-arrowright mui-imageviewer-right'></i></div>");
+			self.viewer = self.viewer[0] || self.viewer;
+			//self.viewer.style.height = screen.height;
+			self.closeButton = self.viewer.querySelector('.mui-imageviewer-close');
+			self.state = self.viewer.querySelector('.mui-imageviewer-state');
+			self.leftButton = self.viewer.querySelector('.mui-imageviewer-left');
+			self.rightButton = self.viewer.querySelector('.mui-imageviewer-right');
+			self.mask = self.viewer.querySelector('.mui-imageviewer-mask');
+			document.body.appendChild(self.viewer);
+		},
+		//查找所有符合的图片
+		findAllImage: function() {
+			var self = this;
+			self.images = [].slice.call($(self.selector));
+		},
+		//检查图片是否为启动预览的图片
+		checkImage: function(target) {
+			var self = this;
+			if (target.tagName !== 'IMG') return false;
+			return self.images.some(function(image) {
+				return image == target;
+			});
+		},
+		//绑定事件
+		bindEvent: function() {
+			var self = this;
+			//绑定图片 tap 事件
+			document.addEventListener(enterEventName, function(event) {
+				if (!self.viewer) return;
+				var target = event.target;
+				if (!self.checkImage(target)) return;
+				self.viewer.style.display = 'block';
+				setTimeout(function() {
+					self.viewer.style.opacity = 1;
+				}, 0);
+				self.index = self.images.indexOf(target);
+				self.currentItem = self.createImage(self.index);
+			}, false);
+			//关系按钮事件
+			self.closeButton.addEventListener(tapEventName, function(event) {
+				self.viewer.style.opacity = 0;
+				setTimeout(function() {
+					self.viewer.style.display = 'none';
+					self.disposeImage(true);
+				}, 600);
+				event.preventDefault();
+				event.cancelBubble = true;
+			}, false);
+			//处理左右按钮
+			self.leftButton.addEventListener(tapEventName, function() {
+				self.prev();
+			}, false);
+			self.rightButton.addEventListener(tapEventName, function() {
+				self.next();
+			}, false);
+			//处理划动
+			self.mask.addEventListener($.EVENT_MOVE, function(event) {
+				event.preventDefault();
+				event.cancelBubble = true;
+			}, false);
+			self.viewer.addEventListener('swipeleft', function(event) {
+				if (self.scaleValue == 1) self.next();
+				event.preventDefault();
+				event.cancelBubble = true;
+			}, false);
+			self.viewer.addEventListener('swiperight', function(event) {
+				if (self.scaleValue == 1) self.prev();
+				event.preventDefault();
+				event.cancelBubble = true;
+			}, false);
+			//处理缩放开始
+			self.viewer.addEventListener($.EVENT_START, function(event) {
+				var touches = event.touches;
+				if (touches.length == 2) {
+					var p1 = touches[0];
+					var p2 = touches[1];
+					var x = p1.pageX - p2.pageX; //x1-x2
+					var y = p1.pageY - p2.pageY; //y1-y2
+					self.scaleStart = Math.sqrt(x * x + y * y);
+					self.isMultiTouch = true;
+				} else if (touches.length = 1) {
+					self.dragStart = touches[0];
+				}
+			}, false);
+			self.viewer.addEventListener($.EVENT_MOVE, function(event) {
+				var img = self.currentItem.querySelector('img');
+				var touches = event.changedTouches;
+				if (touches.length == 2) {
+					event.preventDefault();
+					event.cancelBubble = true;
+					var p1 = touches[0];
+					var p2 = touches[1];
+					var x = p1.pageX - p2.pageX;
+					var y = p1.pageY - p2.pageY;
+					self.scaleEnd = Math.sqrt(x * x + y * y);
+					self._scaleValue = (self.scaleValue * (self.scaleEnd / self.scaleStart));
+					//self.state.innerText = self._scaleValue;
+					img.style.webkitTransform = "scale(" + self._scaleValue + "," + self._scaleValue + ") "; // + " translate(" + self.dragX || 0 + "px," + self.dragY || 0 + "px)";
+				} else if (!self.isMultiTouch && touches.length == 1 && self.scaleValue != 1) {
+					event.preventDefault();
+					event.cancelBubble = true;
+					self.dragEnd = touches[0];
+					self._dragX = self.dragX + (self.dragEnd.pageX - self.dragStart.pageX);
+					self._dragY = self.dragY + (self.dragEnd.pageY - self.dragStart.pageY);
+					img.style.marginLeft = self._dragX + 'px';
+					img.style.marginTop = self._dragY + 'px';
+					//img.style.transform = "translate(" + self._dragX + "px," + self._dragY + "px) " + " scale(" + self.scaleValue || 1 + "," + self.scaleValue || 1 + ")";
+				}
+			}, false);
+			self.viewer.addEventListener($.EVENT_END, function() {
+				self.scaleValue = self._scaleValue || self.scaleValue;
+				self._scaleValue = null;
+				self.dragX = self._dragX;
+				self.dragY = self._dragY;
+				self._dragX = null;
+				self._dragY = null;
+				var touches = event.touches;
+				self.isMultiTouch = (touches.length != 0);
+			});
+			// doubletap 好像不能用
+			self.viewer.addEventListener('doubletap', function() {
+				var img = self.currentItem.querySelector('img');
+				if (self.scaleValue === 1) {
+					self.scaleValue = 2;
+				} else {
+					self.scaleValue = 1;
+				}
+				self.dragX = 0;
+				self.dragY = 0;
+				img.style.marginLeft = self.dragX + 'px';
+				img.style.marginTop = self.dragY + 'px';
+				img.style.webkitTransform = "scale(" + self.scaleValue + "," + self.scaleValue + ") "; //+ " translate(" + self.dragX || 0 + "px," + self.dragY || 0 + "px)";
+				self.viewer.__tap_num = 0;
+			}, false);
+			//处理缩放结束
+		},
+		//下一张图片
+		next: function() {
+			var self = this;
+			self.mask.style.display = 'block';
+			self.index++;
+			var newItem = self.createImage(self.index, 'right');
+			setTimeout(function() {
+				self.currentItem.classList.remove('mui-imageviewer-item-center');
+				self.currentItem.classList.add('mui-imageviewer-item-left');
+				newItem.classList.remove('mui-imageviewer-item-right');
+				newItem.classList.add('mui-imageviewer-item-center');
+				self.oldItem = self.currentItem;
+				self.currentItem = newItem;
+				// TODO: 临时,稍候将调整
+				setTimeout(function() {
+					self.disposeImage();
+					self.mask.style.display = 'none';
+				}, 600);
+			}, 25);
+		},
+		//上一张图片
+		prev: function() {
+			var self = this;
+			self.mask.style.display = 'block';
+			self.index--;
+			var newItem = self.createImage(self.index, 'left');
+			setTimeout(function() {
+				self.currentItem.classList.remove('mui-imageviewer-item-center');
+				self.currentItem.classList.add('mui-imageviewer-item-right');
+				newItem.classList.remove('mui-imageviewer-item-left');
+				newItem.classList.add('mui-imageviewer-item-center');
+				self.oldItem = self.currentItem;
+				self.currentItem = newItem;
+				// TODO: 临时,稍候将调整
+				setTimeout(function() {
+					self.disposeImage();
+					self.mask.style.display = 'none';
+				}, 600);
+			}, 25);
+		},
+		//释放不显示的图片
+		disposeImage: function(all) {
+			var sel = '.mui-imageviewer-item-left,.mui-imageviewer-item-right';
+			if (all) sel += ",.mui-imageviewer-item";
+			var willdisposes = $(sel);
+			willdisposes.each(function(i, item) {
+				if (item.parentNode && item.parentNode.removeChild)
+					item.parentNode.removeChild(item, true);
+			});
+		},
+		//创建一个图片
+		createImage: function(index, type) {
+			var self = this;
+			type = type || 'center';
+			if (index < 0) index = self.images.length - 1;
+			if (index > self.images.length - 1) index = 0;
+			self.index = index;
+			var item = $.dom("<div class='mui-imageviewer-item'></div>")[0];
+			item.appendChild($.dom('<span><img src="' + self.images[self.index].src + '"/></span>')[0]);
+			item.classList.add('mui-imageviewer-item-' + type);
+			self.viewer.appendChild(item);
+			self.state.innerText = (self.index + 1) + "/" + self.images.length;
+			//重置初始缩放比例
+			self.scaleValue = 1;
+			self.dragX = 0;
+			self.dragY = 0;
+			return item;
+		}
+	});
+
+	$.imageViewer = function(selector, options) {
+		return new ImageViewer(selector, options);
+	};
+
+	$.ready(function() {
+		$.imageViewer('.' + imageClassName);
+	});
+
+}(mui, document));

package/native/etc/docroot/bangzhu/js/mui.indexedlist.js

@@ -0,0 +1,187 @@
+/**
+ * IndexedList
+ * 类似联系人应用中的联系人列表，可以按首字母分组
+ * 右侧的字母定位工具条，可以快速定位列表位置
+ * varstion 1.0.0
+ * by Houfeng
+ * Houfeng@DCloud.io
+ **/
+
+(function($, window, document) {
+
+	var classSelector = function(name) {
+		return '.' + $.className(name);
+	}
+
+	var IndexedList = $.IndexedList = $.Class.extend({
+		/**
+		 * 通过 element 和 options 构造 IndexedList 实例
+		 **/
+		init: function(holder, options) {
+			var self = this;
+			self.options = options || {};
+			self.box = holder;
+			if (!self.box) {
+				throw "实例 IndexedList 时需要指定 element";
+			}
+			self.createDom();
+			self.findElements();
+			self.caleLayout();
+			self.bindEvent();
+		},
+		createDom: function() {
+			var self = this;
+			self.el = self.el || {};
+			//styleForSearch 用于搜索，此方式能在数据较多时获取很好的性能
+			self.el.styleForSearch = document.createElement('style');
+			(document.head || document.body).appendChild(self.el.styleForSearch);
+		},
+		findElements: function() {
+			var self = this;
+			self.el = self.el || {};
+			self.el.search = self.box.querySelector(classSelector('indexed-list-search'));
+			self.el.searchInput = self.box.querySelector(classSelector('indexed-list-search-input'));
+			self.el.searchClear = self.box.querySelector(classSelector('indexed-list-search') + ' ' + classSelector('icon-clear'));
+			self.el.bar = self.box.querySelector(classSelector('indexed-list-bar'));
+			self.el.barItems = [].slice.call(self.box.querySelectorAll(classSelector('indexed-list-bar') + ' a'));
+			self.el.inner = self.box.querySelector(classSelector('indexed-list-inner'));
+			self.el.items = [].slice.call(self.box.querySelectorAll(classSelector('indexed-list-item')));
+			self.el.liArray = [].slice.call(self.box.querySelectorAll(classSelector('indexed-list-inner') + ' li'));
+			self.el.alert = self.box.querySelector(classSelector('indexed-list-alert'));
+		},
+		caleLayout: function() {
+			var self = this;
+			var withoutSearchHeight = (self.box.offsetHeight - self.el.search.offsetHeight) + 'px';
+			self.el.bar.style.height = withoutSearchHeight;
+			self.el.inner.style.height = withoutSearchHeight;
+			var barItemHeight = ((self.el.bar.offsetHeight - 40) / self.el.barItems.length) + 'px';
+			self.el.barItems.forEach(function(item) {
+				item.style.height = barItemHeight;
+				item.style.lineHeight = barItemHeight;
+			});
+		},
+		scrollTo: function(group) {
+			var self = this;
+			var groupElement = self.el.inner.querySelector('[data-group="' + group + '"]');
+			if (!groupElement || (self.hiddenGroups && self.hiddenGroups.indexOf(groupElement) > -1)) {
+				return;
+			}
+			self.el.inner.scrollTop = groupElement.offsetTop;
+		},
+		bindBarEvent: function() {
+			var self = this;
+			var pointElement = null;
+			var findStart = function(event) {
+				if (pointElement) {
+					pointElement.classList.remove('active');
+					pointElement = null;
+				}
+				self.el.bar.classList.add('active');
+				var point = event.changedTouches ? event.changedTouches[0] : event;
+				pointElement = document.elementFromPoint(point.pageX, point.pageY);
+				if (pointElement) {
+					var group = pointElement.innerText;
+					if (group && group.length == 1) {
+						pointElement.classList.add('active');
+						self.el.alert.innerText = group;
+						self.el.alert.classList.add('active');
+						self.scrollTo(group);
+					}
+				}
+				event.preventDefault();
+			};
+			var findEnd = function(event) {
+				self.el.alert.classList.remove('active');
+				self.el.bar.classList.remove('active');
+				if (pointElement) {
+					pointElement.classList.remove('active');
+					pointElement = null;
+				}
+			};
+			self.el.bar.addEventListener($.EVENT_MOVE, function(event) {
+				findStart(event);
+			}, false);
+			self.el.bar.addEventListener($.EVENT_START, function(event) {
+				findStart(event);
+			}, false);
+			document.body.addEventListener($.EVENT_END, function(event) {
+				findEnd(event);
+			}, false);
+			document.body.addEventListener($.EVENT_CANCEL, function(event) {
+				findEnd(event);
+			}, false);
+		},
+		search: function(keyword) {
+			var self = this;
+			keyword = (keyword || '').toLowerCase();
+			var selectorBuffer = [];
+			var groupIndex = -1;
+			var itemCount = 0;
+			var liArray = self.el.liArray;
+			var itemTotal = liArray.length;
+			self.hiddenGroups = [];
+			var checkGroup = function(currentIndex, last) {
+				if (itemCount >= currentIndex - groupIndex - (last ? 0 : 1)) {
+					selectorBuffer.push(classSelector('indexed-list-inner li') + ':nth-child(' + (groupIndex + 1) + ')');
+					self.hiddenGroups.push(liArray[groupIndex]);
+				};
+				groupIndex = currentIndex;
+				itemCount = 0;
+			}
+			liArray.forEach(function(item) {
+				var currentIndex = liArray.indexOf(item);
+				if (item.classList.contains($.className('indexed-list-group'))) {
+					checkGroup(currentIndex, false);
+				} else {
+					var text = (item.innerText || '').toLowerCase();
+					var value = (item.getAttribute('data-value') || '').toLowerCase();
+					var tags = (item.getAttribute('data-tags') || '').toLowerCase();
+					if (keyword && text.indexOf(keyword) < 0 &&
+						value.indexOf(keyword) < 0 &&
+						tags.indexOf(keyword) < 0) {
+						selectorBuffer.push(classSelector('indexed-list-inner li') + ':nth-child(' + (currentIndex + 1) + ')');
+						itemCount++;
+					}
+					if (currentIndex >= itemTotal - 1) {
+						checkGroup(currentIndex, true);
+					}
+				}
+			});
+			if (selectorBuffer.length >= itemTotal) {
+				self.el.inner.classList.add('empty');
+			} else if (selectorBuffer.length > 0) {
+				self.el.inner.classList.remove('empty');
+				self.el.styleForSearch.innerText = selectorBuffer.join(', ') + "{display:none;}";
+			} else {
+				self.el.inner.classList.remove('empty');
+				self.el.styleForSearch.innerText = "";
+			}
+		},
+		bindSearchEvent: function() {
+			var self = this;
+			self.el.searchInput.addEventListener('input', function() {
+				var keyword = this.value;
+				self.search(keyword);
+			}, false);
+			$(self.el.search).on('tap', classSelector('icon-clear'), function() {
+				self.search('');
+			}, false);
+		},
+		bindEvent: function() {
+			var self = this;
+			self.bindBarEvent();
+			self.bindSearchEvent();
+		}
+	});
+
+	//mui(selector).indexedList 方式
+	$.fn.indexedList = function(options) {
+		//遍历选择的元素
+		this.each(function(i, element) {
+			if (element.indexedList) return;
+			element.indexedList = new IndexedList(element, options);
+		});
+		return this[0] ? this[0].indexedList : null;
+	};
+
+})(mui, window, document);