mui_app_rails 0.0.1 → 0.0.2

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

@@ -1,99 +0,0 @@
-/**
- * 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

@@ -1,362 +0,0 @@
-/**
- * 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

@@ -1,165 +0,0 @@
-/**
- * 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');