mui_app_rails 0.0.1

data/app/assets/javascripts/mui_app_rails/segmented-controllers.js

@@ -0,0 +1,99 @@
+/**
+ * segmented-controllers
+ * @param {type} $
+ * @param {type} window
+ * @param {type} document
+ * @param {type} undefined
+ * @returns {undefined}
+ */
+(function($, window, document, name, undefined) {
+
+	var CLASS_CONTROL_ITEM = $.className('control-item');
+	var CLASS_SEGMENTED_CONTROL = $.className('segmented-control');
+	var CLASS_CONTROL_CONTENT = $.className('control-content');
+	var CLASS_TAB_BAR = $.className('bar-tab');
+	var CLASS_TAB_ITEM = $.className('tab-item');
+	var CLASS_SLIDER_ITEM = $.className('slider-item');
+
+	var handle = function(event, target) {
+		if (target.classList && (target.classList.contains(CLASS_CONTROL_ITEM) || target.classList.contains(CLASS_TAB_ITEM))) {
+			event.preventDefault(); //stop hash change
+			//			if (target.hash) {
+			return target;
+			//			}
+		}
+		return false;
+	};
+
+	$.registerTarget({
+		name: name,
+		index: 80,
+		handle: handle,
+		target: false
+	});
+
+	window.addEventListener('tap', function(e) {
+
+		var targetTab = $.targets.tab;
+		if (!targetTab) {
+			return;
+		}
+		var activeTab;
+		var activeBodies;
+		var targetBody;
+		var className = $.className('active');
+		var classSelector = '.' + className;
+		var segmentedControl = targetTab.parentNode;
+
+		for (; segmentedControl && segmentedControl !== document; segmentedControl = segmentedControl.parentNode) {
+			if (segmentedControl.classList.contains(CLASS_SEGMENTED_CONTROL)) {
+				activeTab = segmentedControl.querySelector(classSelector + '.' + CLASS_CONTROL_ITEM);
+				break;
+			} else if (segmentedControl.classList.contains(CLASS_TAB_BAR)) {
+				activeTab = segmentedControl.querySelector(classSelector + '.' + CLASS_TAB_ITEM);
+			}
+		}
+
+
+		if (activeTab) {
+			activeTab.classList.remove(className);
+		}
+
+		var isLastActive = targetTab === activeTab;
+		if (targetTab) {
+			targetTab.classList.add(className);
+		}
+
+		if (!targetTab.hash) {
+			return;
+		}
+
+		targetBody = document.getElementById(targetTab.hash.replace('#', ''));
+
+		if (!targetBody) {
+			return;
+		}
+		if (!targetBody.classList.contains(CLASS_CONTROL_CONTENT)) { //tab bar popover
+			targetTab.classList[isLastActive ? 'remove' : 'add'](className);
+			return;
+		}
+		if (isLastActive) { //same
+			return;
+		}
+		var parentNode = targetBody.parentNode;
+		activeBodies = parentNode.querySelectorAll('.' + CLASS_CONTROL_CONTENT + classSelector);
+		for (var i = 0; i < activeBodies.length; i++) {
+			var activeBody = activeBodies[i];
+			activeBody.parentNode === parentNode && activeBody.classList.remove(className);
+		}
+
+		targetBody.classList.add(className);
+
+		var contents = targetBody.parentNode.querySelectorAll('.' + CLASS_CONTROL_CONTENT);
+		$.trigger(targetBody, $.eventName('shown', name), {
+			tabNumber: Array.prototype.indexOf.call(contents, targetBody)
+		});
+		e.detail && e.detail.gesture.preventDefault(); //fixed hashchange
+	});
+
+})(mui, window, document, 'tab');

data/app/assets/javascripts/mui_app_rails/sliders.js

@@ -0,0 +1,362 @@
+/**
+ * Slider (TODO resize)
+ * @param {type} $
+ * @param {type} window
+ * @returns {undefined}
+ */
+(function($, window) {
+	var CLASS_SLIDER = $.className('slider');
+	var CLASS_SLIDER_GROUP = $.className('slider-group');
+	var CLASS_SLIDER_LOOP = $.className('slider-loop');
+	var CLASS_SLIDER_INDICATOR = $.className('slider-indicator');
+	var CLASS_ACTION_PREVIOUS = $.className('action-previous');
+	var CLASS_ACTION_NEXT = $.className('action-next');
+	var CLASS_SLIDER_ITEM = $.className('slider-item');
+
+	var SELECTOR_SLIDER_ITEM = '.' + CLASS_SLIDER_ITEM;
+	var SELECTOR_SLIDER_INDICATOR = '.' + CLASS_SLIDER_INDICATOR;
+	var SELECTOR_SLIDER_PROGRESS_BAR = $.classSelector('.slider-progress-bar');
+
+
+	var Slider = function(element, options) {
+		this.element = element;
+		this.options = $.extend({
+			slideshowDelay: 0, //设置为0，则不定时轮播
+			factor: 1
+		}, options);
+
+		this.init();
+	};
+	Slider.prototype.init = function() {
+		//		this.initDuplicate();
+		this.initEvent();
+		this.initTimer();
+	};
+	Slider.prototype.refresh = function(options) {
+		var newOptions = $.extend({
+			slideshowDelay: 0, //设置为0，则不定时轮播
+			factor: 1
+		}, options);
+		if (this.options.slideshowDelay !== newOptions.slideshowDelay) {
+			this.options.slideshowDelay = newOptions.slideshowDelay;
+			if (this.options.slideshowDelay) {
+				this.nextItem();
+			}
+		}
+	};
+	//TODO 暂时不做自动clone
+	//	Slider.prototype.initDuplicate = function() {
+	//		var self = this;
+	//		var element = self.element;
+	//		if (element.classList.contains(CLASS_SLIDER_LOOP)) {
+	//			var duplicates = element.getElementsByClassName(CLASS_SLIDER_ITEM_DUPLICATE);
+	//		}
+	//	};
+	Slider.prototype.initEvent = function() {
+		var self = this;
+		var element = self.element;
+		var slider = element.parentNode;
+		self.translateX = 0;
+		self.sliderWidth = element.offsetWidth;
+		self.isLoop = element.classList.contains(CLASS_SLIDER_LOOP);
+		self.sliderLength = element.querySelectorAll(SELECTOR_SLIDER_ITEM).length;
+		self.progressBarWidth = 0;
+		self.progressBar = slider.querySelector(SELECTOR_SLIDER_PROGRESS_BAR);
+		if (self.progressBar) {
+			self.progressBarWidth = self.progressBar.offsetWidth;
+		}
+		//slider
+		var isDragable = false;
+		self.isSwipeable = false;
+		slider.addEventListener('dragstart', function(event) {
+			var detail = event.detail;
+			var direction = detail.direction;
+			if (direction === 'left' || direction === 'right') { //reset
+				isDragable = true;
+				self.translateX = self.lastTranslateX = 0;
+				self.scrollX = self.getScroll();
+				self.sliderWidth = element.offsetWidth;
+				self.isLoop = element.classList.contains(CLASS_SLIDER_LOOP);
+				self.sliderLength = element.querySelectorAll(SELECTOR_SLIDER_ITEM).length;
+				if (self.progressBar) {
+					self.progressBarWidth = self.progressBar.offsetWidth;
+				}
+				self.maxTranslateX = ((self.sliderLength - 1) * self.sliderWidth);
+				event.detail.gesture.preventDefault();
+				var isStopPropagation = true;
+				if (!self.isLoop) {
+					if (direction === 'right' && self.scrollX === 0) {
+						isStopPropagation = false;
+					} else if (direction === 'left' && self.scrollX === -self.maxTranslateX) {
+						isStopPropagation = false;
+					}
+				}
+				isStopPropagation && event.stopPropagation();
+			}
+		});
+		slider.addEventListener('drag', function(event) {
+			if (isDragable) {
+				self.dragItem(event);
+				event.stopPropagation();
+			}
+
+		});
+		slider.addEventListener('dragend', function(event) {
+			if (isDragable) {
+				self.gotoItem(self.getSlideNumber());
+				isDragable = self.isSwipeable = false;
+				event.stopPropagation();
+			}
+		});
+		//		slider.addEventListener('flick', $.stopPropagation);
+		slider.addEventListener('swipeleft', function(event) {
+			if (self.isSwipeable) {
+				//stop dragend
+				$.gestures.stoped = true;
+				self.nextItem();
+				isDragable = self.isSwipeable = false;
+			}
+			event.stopPropagation();
+		});
+		slider.addEventListener('swiperight', function(event) {
+			if (self.isSwipeable) {
+				//stop dragend
+				$.gestures.stoped = true;
+				self.prevItem();
+				isDragable = self.isSwipeable = false;
+			}
+			event.stopPropagation();
+		});
+		slider.addEventListener('slide', function(e) {
+			var detail = e.detail;
+			detail.slideNumber = detail.slideNumber || 0;
+			var number = slider.querySelector($.classSelector('.slider-indicator .number span'));
+			if (number) {
+				number.innerText = (detail.slideNumber + 1);
+			}
+
+			var indicators = slider.querySelectorAll($.classSelector('.slider-indicator .indicator'));
+			for (var i = 0, len = indicators.length; i < len; i++) {
+				indicators[i].classList[i === detail.slideNumber ? 'add' : 'remove']($.className('active'));
+			}
+
+			var controlItems = slider.querySelectorAll($.classSelector('.control-item'));
+			for (var i = 0, len = controlItems.length; i < len; i++) {
+				controlItems[i].classList[i === detail.slideNumber ? 'add' : 'remove']($.className('active'));
+			}
+			e.stopPropagation();
+		});
+		slider.addEventListener($.eventName('shown', 'tab'), function(e) { //tab
+			self.gotoItem(-(e.detail.tabNumber || 0));
+		});
+		//indicator
+		var indicator = element.parentNode.querySelector(SELECTOR_SLIDER_INDICATOR);
+		if (indicator) {
+			indicator.addEventListener('tap', function(event) {
+				var target = event.target;
+				if (target.classList.contains(CLASS_ACTION_PREVIOUS) || target.classList.contains(CLASS_ACTION_NEXT)) {
+					self[target.classList.contains(CLASS_ACTION_PREVIOUS) ? 'prevItem' : 'nextItem']();
+					event.stopPropagation();
+				}
+			});
+		}
+	};
+	Slider.prototype.dragItem = function(event) {
+		var self = this;
+		var detail = event.detail;
+
+		if (detail.deltaX !== detail.lastDeltaX) {
+			var translate = (detail.deltaX * self.options.factor + self.scrollX);
+			self.element.style['-webkit-transition-duration'] = '0';
+			var min = 0;
+			var max = -self.maxTranslateX;
+			if (self.isLoop) {
+				min = self.sliderWidth;
+				max = max + min;
+			}
+			if (translate > min || translate < max) {
+				self.isSwipeable = false;
+				return;
+			}
+			if (!self.requestAnimationFrame) {
+				self.updateTranslate();
+			}
+			self.isSwipeable = true;
+			self.translateX = translate;
+		}
+		if (self.timer) {
+			clearTimeout(self.timer);
+		}
+		self.timer = setTimeout(function() {
+			self.initTimer();
+		}, 100);
+
+	};
+	Slider.prototype.updateTranslate = function() {
+		var self = this;
+		if (self.lastTranslateX !== self.translateX) {
+			self.setTranslate(self.translateX);
+			self.lastTranslateX = self.translateX;
+		}
+		self.requestAnimationFrame = requestAnimationFrame(function() {
+			self.updateTranslate();
+		});
+	};
+	Slider.prototype.setTranslate = function(x) {
+		this.element.style.webkitTransform = 'translate3d(' + x + 'px,0,0)';
+		this.updateProcess(x);
+	};
+	Slider.prototype.updateProcess = function(translate) {
+		var progressBarWidth = this.progressBarWidth;
+		if (progressBarWidth) {
+			translate = Math.abs(translate);
+			this.setProcess(translate * (progressBarWidth / this.sliderWidth));
+		}
+	};
+	Slider.prototype.setProcess = function(translate) {
+		var progressBar = this.progressBar;
+		if (progressBar) {
+			progressBar.style.webkitTransform = 'translate3d(' + translate + 'px,0,0)';
+		}
+	};
+	/**
+	 * 下一个轮播
+	 * @returns {Number}
+	 */
+	Slider.prototype.nextItem = function() {
+		this.gotoItem(this.getCurrentSlideNumber('next') - 1);
+	};
+	/**
+	 * 上一个轮播
+	 * @returns {Number}
+	 */
+	Slider.prototype.prevItem = function() {
+		this.gotoItem(this.getCurrentSlideNumber('prev') + 1);
+	};
+	/**
+	 * 滑动到指定轮播
+	 * @param {type} slideNumber
+	 * @returns {undefined}
+	 */
+	Slider.prototype.gotoItem = function(slideNumber) {
+		if (!(slideNumber === 1 && this.getSlideNumber() === slideNumber)) {
+			slideNumber = slideNumber > 0 ? -slideNumber : slideNumber;
+		}
+		var self = this;
+		var slider = self.element;
+		var slideLength = self.sliderLength;
+		if (self.isLoop) { //循环轮播需减去2个过渡元素
+			slideLength = slideLength - 2;
+		} else {
+			slideLength = slideLength - 1;
+			slideNumber = Math.min(0, slideNumber);
+			slideNumber = Math.max(slideNumber, -slideLength);
+		}
+		if (self.requestAnimationFrame) {
+			cancelAnimationFrame(self.requestAnimationFrame);
+			self.requestAnimationFrame = null;
+		}
+		var offsetX = Math.max(slideNumber, -slideLength) * slider.offsetWidth;
+		slider.style['-webkit-transition-duration'] = '.2s';
+		self.setTranslate(offsetX);
+		//		slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
+		//		self.updateProcess(offsetX);
+		var fixedLoop = function() {
+			slider.style['-webkit-transition-duration'] = '0';
+			slider.style.webkitTransform = 'translate3d(' + (slideNumber * slider.offsetWidth) + 'px,0,0)';
+			slider.removeEventListener('webkitTransitionEnd', fixedLoop);
+		};
+		slider.removeEventListener('webkitTransitionEnd', fixedLoop);
+		if (self.isLoop) { //循环轮播自动重新定位
+			if (slideNumber === 1 || slideNumber === -slideLength) {
+				slideNumber = slideNumber === 1 ? (-slideLength + 1) : 0;
+				slider.addEventListener('webkitTransitionEnd', fixedLoop);
+			}
+		}
+		$.trigger(slider.parentNode, 'slide', {
+			slideNumber: Math.abs(slideNumber)
+		});
+		this.initTimer();
+	};
+
+	/**
+	 * 计算轮播应该处于的位置(四舍五入)
+	 * @returns {Number}
+	 */
+	Slider.prototype.getSlideNumber = function() {
+		return (Math.round(this.getScroll() / this.sliderWidth));
+	};
+	/**
+	 * 当前所处位置
+	 * @param {type} type
+	 * @returns {unresolved}
+	 */
+	Slider.prototype.getCurrentSlideNumber = function(type) {
+		return (Math[type === 'next' ? 'ceil' : 'floor'](this.getScroll() / this.sliderWidth));
+	};
+	/**
+	 * 获取当前滚动位置
+	 * @returns {Number}
+	 */
+	Slider.prototype.getScroll = function() {
+		var slider = this.element;
+		var scroll = 0;
+		if ('webkitTransform' in slider.style) {
+			var result = $.parseTranslate(slider.style.webkitTransform);
+			scroll = result ? result.x : 0;
+		}
+		return scroll;
+	};
+	/**
+	 * 自动轮播
+	 * @returns {undefined}
+	 */
+	Slider.prototype.initTimer = function() {
+		var self = this;
+		var slideshowDelay = self.options.slideshowDelay;
+		if (slideshowDelay) {
+			var slider = self.element;
+			var slidershowTimer = slider.getAttribute('data-slidershowTimer');
+			slidershowTimer && window.clearTimeout(slidershowTimer);
+			slidershowTimer = window.setTimeout(function() {
+				if (!slider) {
+					return;
+				}
+				//仅slider显示状态进行自动轮播
+				if (!!(slider.offsetWidth || slider.offsetHeight)) {
+					self.nextItem();
+					//下一个
+				}
+				self.initTimer();
+			}, slideshowDelay);
+			slider.setAttribute('data-slidershowTimer', slidershowTimer);
+		}
+
+	};
+
+	$.fn.slider = function(options) {
+		//新增定时轮播 重要：remove该轮播时，请获取data-slidershowTimer然后手动clearTimeout
+		var slider = null;
+		this.each(function() {
+			var sliderGroup = this;
+			if (this.classList.contains(CLASS_SLIDER)) {
+				sliderGroup = this.querySelector('.' + CLASS_SLIDER_GROUP);
+			}
+			var id = sliderGroup.getAttribute('data-slider');
+			if (!id) {
+				id = ++$.uuid;
+				$.data[id] = slider = new Slider(sliderGroup, options);
+				sliderGroup.setAttribute('data-slider', id);
+			} else {
+				slider = $.data[id];
+				if (slider && options) {
+					slider.refresh(options);
+				}
+			}
+		});
+		return slider;
+	};
+	$.ready(function() {
+		$($.classSelector('.slider-group')).slider();
+	});
+})(mui, window);

data/app/assets/javascripts/mui_app_rails/switches.js

@@ -0,0 +1,165 @@
+/**
+ * Toggles switch
+ * @param {type} $
+ * @param {type} window
+ * @param {type} name
+ * @returns {undefined}
+ */
+(function($, window, name) {
+
+	var CLASS_SWITCH = $.className('switch');
+	var CLASS_SWITCH_HANDLE = $.className('switch-handle');
+	var CLASS_ACTIVE = $.className('active');
+	var CLASS_DRAGGING = $.className('dragging');
+
+	var CLASS_DISABLED = $.className('disabled');
+
+	var SELECTOR_SWITCH_HANDLE = '.' + CLASS_SWITCH_HANDLE;
+
+	var handle = function(event, target) {
+		if (target.classList && target.classList.contains(CLASS_SWITCH)) {
+			return target;
+		}
+		return false;
+	};
+
+	$.registerTarget({
+		name: name,
+		index: 100,
+		handle: handle,
+		target: false
+	});
+
+
+	var Toggle = function(element) {
+		this.element = element;
+		this.classList = this.element.classList;
+		this.handle = this.element.querySelector(SELECTOR_SWITCH_HANDLE);
+		this.init();
+		this.initEvent();
+	};
+	Toggle.prototype.init = function() {
+		this.toggleWidth = this.element.offsetWidth;
+		this.handleWidth = this.handle.offsetWidth;
+		this.handleX = this.toggleWidth - this.handleWidth - 3;
+	};
+	Toggle.prototype.initEvent = function() {
+		this.element.addEventListener('touchstart', this);
+		this.element.addEventListener('drag', this);
+		this.element.addEventListener('swiperight', this);
+		this.element.addEventListener('touchend', this);
+		this.element.addEventListener('touchcancel', this);
+
+	};
+	Toggle.prototype.handleEvent = function(e) {
+		if (this.classList.contains(CLASS_DISABLED)) {
+			return;
+		}
+		switch (e.type) {
+			case 'touchstart':
+				this.start(e);
+				break;
+			case 'drag':
+				this.drag(e);
+				break;
+			case 'swiperight':
+				this.swiperight();
+				break;
+			case 'touchend':
+			case 'touchcancel':
+				this.end(e);
+				break;
+		}
+	};
+	Toggle.prototype.start = function(e) {
+		this.classList.add(CLASS_DRAGGING);
+		if (this.toggleWidth === 0 || this.handleWidth === 0) { //当switch处于隐藏状态时，width为0，需要重新初始化
+			this.init();
+		}
+	};
+	Toggle.prototype.drag = function(e) {
+		var detail = e.detail;
+		if (!this.isDragging) {
+			if (detail.direction === 'left' || detail.direction === 'right') {
+				this.isDragging = true;
+				this.lastChanged = undefined;
+				this.initialState = this.classList.contains(CLASS_ACTIVE);
+			}
+		}
+		if (this.isDragging) {
+			this.setTranslateX(detail.deltaX);
+			e.stopPropagation();
+			detail.gesture.preventDefault();
+		}
+	};
+	Toggle.prototype.swiperight = function(e) {
+		if (this.isDragging) {
+			e.stopPropagation();
+		}
+	};
+	Toggle.prototype.end = function(e) {
+		this.classList.remove(CLASS_DRAGGING);
+		if (this.isDragging) {
+			this.isDragging = false;
+			e.stopPropagation();
+			$.trigger(this.element, 'toggle', {
+				isActive: this.classList.contains(CLASS_ACTIVE)
+			});
+		} else {
+			this.toggle();
+		}
+	};
+	Toggle.prototype.toggle = function() {
+		var classList = this.classList;
+		if (classList.contains(CLASS_ACTIVE)) {
+			classList.remove(CLASS_ACTIVE);
+			this.handle.style.webkitTransform = 'translate3d(0,0,0)';
+		} else {
+			classList.add(CLASS_ACTIVE);
+			this.handle.style.webkitTransform = 'translate3d(' + this.handleX + 'px,0,0)';
+		}
+		$.trigger(this.element, 'toggle', {
+			isActive: this.classList.contains(CLASS_ACTIVE)
+		});
+	};
+	Toggle.prototype.setTranslateX = $.animationFrame(function(x) {
+		if (!this.isDragging) {
+			return;
+		}
+		var isChanged = false;
+		if ((this.initialState && -x > (this.handleX / 2)) || (!this.initialState && x > (this.handleX / 2))) {
+			isChanged = true;
+		}
+		if (this.lastChanged !== isChanged) {
+			if (isChanged) {
+				this.handle.style.webkitTransform = 'translate3d(' + (this.initialState ? 0 : this.handleX) + 'px,0,0)';
+				this.classList[this.initialState ? 'remove' : 'add'](CLASS_ACTIVE);
+			} else {
+				this.handle.style.webkitTransform = 'translate3d(' + (this.initialState ? this.handleX : 0) + 'px,0,0)';
+				this.classList[this.initialState ? 'add' : 'remove'](CLASS_ACTIVE);
+			}
+			this.lastChanged = isChanged;
+		}
+
+	});
+
+	$.fn['switch'] = function(options) {
+		var switchApis = [];
+		this.each(function() {
+			var switchApi = null;
+			var id = this.getAttribute('data-switch');
+			if (!id) {
+				id = ++$.uuid;
+				$.data[id] = new Toggle(this);
+				this.setAttribute('data-switch', id);
+			} else {
+				switchApi = $.data[id];
+			}
+			switchApis.push(switchApi);
+		});
+		return switchApis.length > 1 ? switchApis : switchApis[0];
+	};
+	$.ready(function() {
+		$('.' + CLASS_SWITCH)['switch']();
+	});
+})(mui, window, 'toggle');