mui_app_rails 0.0.1

data/app/assets/javascripts/mui_app_rails/pullrefresh.5+.js

@@ -0,0 +1,238 @@
+/**
+ * pullRefresh 5+
+ * @param {type} $
+ * @returns {undefined}
+ */
+(function($, document) {
+	if (!($.os.plus && $.os.android)) { //仅在android的5+版本使用
+		return;
+	}
+	var CLASS_PLUS_PULLREFRESH = $.className('plus-pullrefresh');
+	var CLASS_VISIBILITY = $.className('visibility');
+	var CLASS_HIDDEN = $.className('hidden');
+	var CLASS_BLOCK = $.className('block');
+
+	var PlusPullRefresh = $.Class.extend({
+		init: function(element, options) {
+			this.element = element;
+			this.options = options;
+			this.wrapper = this.scroller = element;
+			this._init();
+			this._initPulldownRefreshEvent();
+		},
+		_init: function() {
+			var self = this;
+			//			document.addEventListener('plusscrollbottom', this);
+			window.addEventListener('dragup', self);
+			self.scrollInterval = window.setInterval(function() {
+				if (self.isScroll && !self.loading) {
+					if (window.pageYOffset + window.innerHeight + 10 >= document.documentElement.scrollHeight) {
+						self.isScroll = false; //放在这里是因为快速滚动的话，有可能检测时，还没到底，所以只要有滚动，没到底之前一直检测高度变化
+						if (self.bottomPocket) {
+							self.pullupLoading();
+						}
+					}
+				}
+			}, 100);
+		},
+		_initPulldownRefreshEvent: function() {
+			var self = this;
+			if (self.topPocket && self.options.webviewId) {
+				$.plusReady(function() {
+					var webview = plus.webview.getWebviewById(self.options.webviewId);
+					if (!webview) {
+						return;
+					}
+					self.options.webview = webview;
+					var downOptions = self.options.down;
+					var height = downOptions.height;
+					webview.addEventListener("dragBounce", function(e) {
+						if (!self.pulldown) {
+							self._initPulldownRefresh();
+						} else {
+							self.pullPocket.classList.add(CLASS_BLOCK);
+						}
+						switch (e.status) {
+							case "beforeChangeOffset": //下拉可刷新状态
+								self._setCaption(downOptions.contentdown);
+								break;
+							case "afterChangeOffset": //松开可刷新状态
+								self._setCaption(downOptions.contentover);
+								break;
+							case "dragEndAfterChangeOffset": //正在刷新状态
+								//执行下拉刷新所在webview的回调函数
+								webview.evalJS("mui&&mui.options.pullRefresh.down.callback()");
+								self._setCaption(downOptions.contentrefresh);
+								break;
+							default:
+								break;
+						}
+					}, false);
+					webview.setBounce({
+						position: {
+							top: height * 2 + 'px'
+						},
+						changeoffset: {
+							top: height + 'px'
+						}
+					});
+				});
+			}
+		},
+		handleEvent: function(e) {
+			var self = this;
+			if (self.stopped) {
+				return;
+			}
+			//5+的plusscrollbottom当页面内容较少时，不触发
+			//			if (e.type === 'plusscrollbottom') {
+			//				if (this.bottomPocket) {
+			//					this.pullupLoading();
+			//				}
+			//			}
+			self.isScroll = false;
+			if (e.type === 'dragup') {
+				self.isScroll = true;
+				setTimeout(function() {
+					self.isScroll = false;
+				}, 1000);
+			}
+		}
+	}).extend($.extend({
+		setStopped: function(stopped) { //该方法是子页面调用的
+			this.stopped = !!stopped;
+			//TODO 此处需要设置当前webview的bounce为none,目前5+有BUG
+			var webview = plus.webview.currentWebview();
+			if (this.stopped) {
+				webview.setStyle({
+					bounce: 'none'
+				});
+				webview.setBounce({
+					position: {
+						top: 'none'
+					}
+				});
+			} else {
+				var height = this.options.down.height;
+				webview.setStyle({
+					bounce: 'vertical'
+				});
+				webview.setBounce({
+					position: {
+						top: height * 2 + 'px'
+					},
+					changeoffset: {
+						top: height + 'px'
+					}
+				});
+			}
+		},
+		pulldownLoading: function() {
+			//TODO
+			throw new Error('暂不支持');
+		},
+		endPulldownToRefresh: function() { //该方法是子页面调用的
+			var webview = plus.webview.currentWebview();
+			webview.parent().evalJS("mui&&mui(document.querySelector('.mui-content')).pullRefresh('" + JSON.stringify({
+				webviewId: webview.id
+			}) + "')._endPulldownToRefresh()");
+		},
+		_endPulldownToRefresh: function() { //该方法是父页面调用的
+			var self = this;
+			if (self.topPocket && self.options.webview) {
+				self.options.webview.endPullToRefresh(); //下拉刷新所在webview回弹
+				self.loading = false;
+				self._setCaption(self.options.down.contentdown, true);
+				setTimeout(function() {
+					self.loading || self.topPocket.classList.remove(CLASS_BLOCK);
+				}, 350);
+			}
+		},
+		pullupLoading: function(callback) {
+			var self = this;
+			if (self.isLoading) return;
+			self.isLoading = true;
+			if (self.pulldown !== false) {
+				self._initPullupRefresh();
+			} else {
+				this.pullPocket.classList.add(CLASS_BLOCK);
+			}
+			setTimeout(function() {
+				self.pullLoading.classList.add(CLASS_VISIBILITY);
+				self.pullLoading.classList.remove(CLASS_HIDDEN);
+				self.pullCaption.innerHTML = ''; //修正5+里边第一次加载时，文字显示的bug(还会显示出来个“多”,猜测应该是渲染问题导致的)
+				self.pullCaption.innerHTML = self.options.up.contentrefresh;
+				callback = callback || self.options.up.callback;
+				callback && callback.call(self);
+			}, 300);
+		},
+		endPullupToRefresh: function(finished) {
+			var self = this;
+			if (self.pullLoading) {
+				self.pullLoading.classList.remove(CLASS_VISIBILITY);
+				self.pullLoading.classList.add(CLASS_HIDDEN);
+				self.isLoading = false;
+				if (finished) {
+					self.finished = true;
+					self.pullCaption.innerHTML = self.options.up.contentnomore;
+					//					self.bottomPocket.classList.remove(CLASS_BLOCK);
+					//					self.bottomPocket.classList.add(CLASS_HIDDEN);
+					//					document.removeEventListener('plusscrollbottom', self);
+					window.removeEventListener('dragup', self);
+				} else { //初始化时隐藏，后续不再隐藏
+					self.pullCaption.innerHTML = self.options.up.contentdown;
+					//					setTimeout(function() {
+					//						self.loading || self.bottomPocket.classList.remove(CLASS_BLOCK);
+					//					}, 350);
+				}
+			}
+		},
+		scrollTo: function(x, y, time) {
+			$.scrollTo(x, y, time);
+		},
+		refresh: function(isReset) {
+			if (isReset && this.finished) {
+				if (this.pulldown !== false) {
+					this._initPullupRefresh();
+				}
+				this.bottomPocket.classList.remove(CLASS_HIDDEN);
+				this.pullCaption.innerHTML = this.options.up.contentdown;
+				window.addEventListener('dragup', this);
+				this.finished = false;
+			}
+		}
+	}, $.PullRefresh));
+
+	//override h5 pullRefresh
+	$.fn.pullRefresh = function(options) {
+		var self;
+		if (this.length === 0) {
+			self = document.createElement('div');
+			self.className = 'mui-content';
+			document.body.appendChild(self);
+		} else {
+			self = this[0];
+		}
+		//一个父需要支持多个子下拉刷新
+		options = options || {}
+		if (typeof options === 'string') {
+			options = $.parseJSON(options);
+		};
+		!options.webviewId && (options.webviewId = (plus.webview.currentWebview().id || plus.webview.currentWebview().getURL()));
+		var pullRefreshApi = null;
+		var attrWebviewId = options.webviewId && options.webviewId.replace(/\//g, "_"); //替换所有"/"
+		var id = self.getAttribute('data-pullrefresh-plus-' + attrWebviewId);
+		if (!id) { //避免重复初始化5+ pullrefresh
+			id = ++$.uuid;
+			self.setAttribute('data-pullrefresh-plus-' + attrWebviewId, id);
+			document.body.classList.add(CLASS_PLUS_PULLREFRESH);
+			$.data[id] = pullRefreshApi = new PlusPullRefresh(self, options);
+		} else {
+			pullRefreshApi = $.data[id];
+		}
+		if (options.up && options.up.auto) { //如果设置了auto，则自动上拉一次
+			pullRefreshApi.pullupLoading();
+		}
+		return pullRefreshApi;
+	};
+})(mui, document);

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

@@ -0,0 +1,479 @@
+/* ========================================================================
+ * Mui: push.js v1.0.0
+ * ======================================================================== */
+
+/* global _gaq: true */
+
+!(function () {
+  'use strict';
+
+  var noop = function () {};
+
+
+  // Pushstate caching
+  // ==================
+
+  var isScrolling;
+  var maxCacheLength = 20;
+  var cacheMapping   = sessionStorage;
+  var domCache       = {};
+  // Change these to unquoted camelcase in the next major version bump
+  var transitionMap  = {
+    'slide-in'  : 'slide-out',
+    'slide-out' : 'slide-in',
+    fade     : 'fade'
+  };
+
+  var bars = {
+    bartab             : '.bar-tab',
+    barnav             : '.bar-nav',
+    barfooter          : '.bar-footer',
+    barheadersecondary : '.bar-header-secondary'
+  };
+
+  var cacheReplace = function (data, updates) {
+    PUSH.id = data.id;
+    if (updates) {
+      data = getCached(data.id);
+    }
+    cacheMapping[data.id] = JSON.stringify(data);
+    window.history.replaceState(data.id, data.title, data.url);
+    domCache[data.id] = document.body.cloneNode(true);
+  };
+
+  var cachePush = function () {
+    var id = PUSH.id;
+
+    var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]');
+    var cacheBackStack    = JSON.parse(cacheMapping.cacheBackStack    || '[]');
+
+    cacheBackStack.push(id);
+
+    while (cacheForwardStack.length) {
+      delete cacheMapping[cacheForwardStack.shift()];
+    }
+    while (cacheBackStack.length > maxCacheLength) {
+      delete cacheMapping[cacheBackStack.shift()];
+    }
+
+    window.history.pushState(null, '', cacheMapping[PUSH.id].url);
+
+    cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack);
+    cacheMapping.cacheBackStack    = JSON.stringify(cacheBackStack);
+  };
+
+  var cachePop = function (id, direction) {
+    var forward           = direction === 'forward';
+    var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]');
+    var cacheBackStack    = JSON.parse(cacheMapping.cacheBackStack    || '[]');
+    var pushStack         = forward ? cacheBackStack    : cacheForwardStack;
+    var popStack          = forward ? cacheForwardStack : cacheBackStack;
+
+    if (PUSH.id) {
+      pushStack.push(PUSH.id);
+    }
+    popStack.pop();
+
+    cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack);
+    cacheMapping.cacheBackStack    = JSON.stringify(cacheBackStack);
+  };
+
+  var getCached = function (id) {
+    return JSON.parse(cacheMapping[id] || null) || {};
+  };
+
+  var getTarget = function (e) {
+    var target = findTarget(e.target);
+
+    if (!target ||
+        e.which > 1 ||
+        e.metaKey ||
+        e.ctrlKey ||
+        isScrolling ||
+        location.protocol !== target.protocol ||
+        location.host     !== target.host ||
+        !target.hash && /#/.test(target.href) ||
+        target.hash && target.href.replace(target.hash, '') === location.href.replace(location.hash, '') ||
+        target.getAttribute('data-ignore') === 'push') { return; }
+
+    return target;
+  };
+
+
+  // Main event handlers (touchend, popstate)
+  // ==========================================
+
+  var touchend = function (e) {
+    var target = getTarget(e);
+
+    if (!target) {
+      return;
+    }
+
+    e.preventDefault();
+
+    PUSH({
+      url        : target.href,
+      hash       : target.hash,
+      timeout    : target.getAttribute('data-timeout'),
+      transition : target.getAttribute('data-transition')
+    });
+  };
+
+  var popstate = function (e) {
+    var key;
+    var barElement;
+    var activeObj;
+    var activeDom;
+    var direction;
+    var transition;
+    var transitionFrom;
+    var transitionFromObj;
+    var id = e.state;
+
+    if (!id || !cacheMapping[id]) {
+      return;
+    }
+
+    direction = PUSH.id < id ? 'forward' : 'back';
+
+    cachePop(id, direction);
+
+    activeObj = getCached(id);
+    activeDom = domCache[id];
+
+    if (activeObj.title) {
+      document.title = activeObj.title;
+    }
+
+    if (direction === 'back') {
+      transitionFrom    = JSON.parse(direction === 'back' ? cacheMapping.cacheForwardStack : cacheMapping.cacheBackStack);
+      transitionFromObj = getCached(transitionFrom[transitionFrom.length - 1]);
+    } else {
+      transitionFromObj = activeObj;
+    }
+
+    if (direction === 'back' && !transitionFromObj.id) {
+      return (PUSH.id = id);
+    }
+
+    transition = direction === 'back' ? transitionMap[transitionFromObj.transition] : transitionFromObj.transition;
+
+    if (!activeDom) {
+      return PUSH({
+        id         : activeObj.id,
+        url        : activeObj.url,
+        title      : activeObj.title,
+        timeout    : activeObj.timeout,
+        transition : transition,
+        ignorePush : true
+      });
+    }
+
+    if (transitionFromObj.transition) {
+      activeObj = extendWithDom(activeObj, '.content', activeDom.cloneNode(true));
+      for (key in bars) {
+        if (bars.hasOwnProperty(key)) {
+          barElement = document.querySelector(bars[key]);
+          if (activeObj[key]) {
+            swapContent(activeObj[key], barElement);
+          } else if (barElement) {
+            barElement.parentNode.removeChild(barElement);
+          }
+        }
+      }
+    }
+
+    swapContent(
+      (activeObj.contents || activeDom).cloneNode(true),
+      document.querySelector('.content'),
+      transition
+    );
+
+    PUSH.id = id;
+
+    document.body.offsetHeight; // force reflow to prevent scroll
+  };
+
+
+  // Core PUSH functionality
+  // =======================
+
+  var PUSH = function (options) {
+    var key;
+    var xhr = PUSH.xhr;
+
+    options.container = options.container || options.transition ? document.querySelector('.content') : document.body;
+
+    for (key in bars) {
+      if (bars.hasOwnProperty(key)) {
+        options[key] = options[key] || document.querySelector(bars[key]);
+      }
+    }
+
+    if (xhr && xhr.readyState < 4) {
+      xhr.onreadystatechange = noop;
+      xhr.abort();
+    }
+
+    xhr = new XMLHttpRequest();
+    xhr.open('GET', options.url, true);
+    xhr.setRequestHeader('X-PUSH', 'true');
+
+    xhr.onreadystatechange = function () {
+      if (options._timeout) {
+        clearTimeout(options._timeout);
+      }
+      if (xhr.readyState === 4) {
+        xhr.status === 200 ? success(xhr, options) : failure(options.url);
+      }
+    };
+
+    if (!PUSH.id) {
+      cacheReplace({
+        id         : +new Date(),
+        url        : window.location.href,
+        title      : document.title,
+        timeout    : options.timeout,
+        transition : options.transition
+      });
+    }
+
+    if (options.timeout) {
+      options._timeout = setTimeout(function () {  xhr.abort('timeout'); }, options.timeout);
+    }
+
+    xhr.send();
+
+    if (xhr.readyState && !options.ignorePush) {
+      cachePush();
+    }
+  };
+
+
+  // Main XHR handlers
+  // =================
+
+  var success = function (xhr, options) {
+    var key;
+    var barElement;
+    var data = parseXHR(xhr, options);
+
+    if (!data.contents) {
+      return locationReplace(options.url);
+    }
+
+    if (data.title) {
+      document.title = data.title;
+    }
+
+    if (options.transition) {
+      for (key in bars) {
+        if (bars.hasOwnProperty(key)) {
+          barElement = document.querySelector(bars[key]);
+          if (data[key]) {
+            swapContent(data[key], barElement);
+          } else if (barElement) {
+            barElement.parentNode.removeChild(barElement);
+          }
+        }
+      }
+    }
+
+    swapContent(data.contents, options.container, options.transition, function () {
+      cacheReplace({
+        id         : options.id || +new Date(),
+        url        : data.url,
+        title      : data.title,
+        timeout    : options.timeout,
+        transition : options.transition
+      }, options.id);
+      triggerStateChange();
+    });
+
+    if (!options.ignorePush && window._gaq) {
+      _gaq.push(['_trackPageview']); // google analytics
+    }
+    if (!options.hash) {
+      return;
+    }
+  };
+
+  var failure = function (url) {
+    throw new Error('Could not get: ' + url);
+  };
+
+
+  // PUSH helpers
+  // ============
+
+  var swapContent = function (swap, container, transition, complete) {
+    var enter;
+    var containerDirection;
+    var swapDirection;
+
+    if (!transition) {
+      if (container) {
+        container.innerHTML = swap.innerHTML;
+      } else if (swap.classList.contains('content')) {
+        document.body.appendChild(swap);
+      } else {
+        document.body.insertBefore(swap, document.querySelector('.content'));
+      }
+    } else {
+      enter  = /in$/.test(transition);
+
+      if (transition === 'fade') {
+        container.classList.add('in');
+        container.classList.add('fade');
+        swap.classList.add('fade');
+      }
+
+      if (/slide/.test(transition)) {
+        swap.classList.add('sliding-in', enter ? 'right' : 'left');
+        swap.classList.add('sliding');
+        container.classList.add('sliding');
+      }
+
+      container.parentNode.insertBefore(swap, container);
+    }
+
+    if (!transition) {
+      complete && complete();
+    }
+
+    if (transition === 'fade') {
+      container.offsetWidth; // force reflow
+      container.classList.remove('in');
+      var fadeContainerEnd = function () {
+        container.removeEventListener('webkitTransitionEnd', fadeContainerEnd);
+        swap.classList.add('in');
+        swap.addEventListener('webkitTransitionEnd', fadeSwapEnd);
+      };
+      var fadeSwapEnd = function () {
+        swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd);
+        container.parentNode.removeChild(container);
+        swap.classList.remove('fade');
+        swap.classList.remove('in');
+        complete && complete();
+      };
+      container.addEventListener('webkitTransitionEnd', fadeContainerEnd);
+
+    }
+
+    if (/slide/.test(transition)) {
+      var slideEnd = function () {
+        swap.removeEventListener('webkitTransitionEnd', slideEnd);
+        swap.classList.remove('sliding', 'sliding-in');
+        swap.classList.remove(swapDirection);
+        container.parentNode.removeChild(container);
+        complete && complete();
+      };
+
+      container.offsetWidth; // force reflow
+      swapDirection      = enter ? 'right' : 'left';
+      containerDirection = enter ? 'left' : 'right';
+      container.classList.add(containerDirection);
+      swap.classList.remove(swapDirection);
+      swap.addEventListener('webkitTransitionEnd', slideEnd);
+    }
+  };
+
+  var triggerStateChange = function () {
+    var e = new CustomEvent('push', {
+      detail: { state: getCached(PUSH.id) },
+      bubbles: true,
+      cancelable: true
+    });
+
+    window.dispatchEvent(e);
+  };
+
+  var findTarget = function (target) {
+    var i;
+    var toggles = document.querySelectorAll('a');
+
+    for (; target && target !== document; target = target.parentNode) {
+      for (i = toggles.length; i--;) {
+        if (toggles[i] === target) {
+          return target;
+        }
+      }
+    }
+  };
+
+  var locationReplace = function (url) {
+    window.history.replaceState(null, '', '#');
+    window.location.replace(url);
+  };
+
+  var extendWithDom = function (obj, fragment, dom) {
+    var i;
+    var result = {};
+
+    for (i in obj) {
+      if (obj.hasOwnProperty(i)) {
+        result[i] = obj[i];
+      }
+    }
+
+    Object.keys(bars).forEach(function (key) {
+      var el = dom.querySelector(bars[key]);
+      if (el) {
+        el.parentNode.removeChild(el);
+      }
+      result[key] = el;
+    });
+
+    result.contents = dom.querySelector(fragment);
+
+    return result;
+  };
+
+  var parseXHR = function (xhr, options) {
+    var head;
+    var body;
+    var data = {};
+    var responseText = xhr.responseText;
+
+    data.url = options.url;
+
+    if (!responseText) {
+      return data;
+    }
+
+    if (/<html/i.test(responseText)) {
+      head           = document.createElement('div');
+      body           = document.createElement('div');
+      head.innerHTML = responseText.match(/<head[^>]*>([\s\S.]*)<\/head>/i)[0];
+      body.innerHTML = responseText.match(/<body[^>]*>([\s\S.]*)<\/body>/i)[0];
+    } else {
+      head           = body = document.createElement('div');
+      head.innerHTML = responseText;
+    }
+
+    data.title = head.querySelector('title');
+    var text = 'innerText' in data.title ? 'innerText' : 'textContent';
+    data.title = data.title && data.title[text].trim();
+
+    if (options.transition) {
+      data = extendWithDom(data, '.content', body);
+    } else {
+      data.contents = body;
+    }
+
+    return data;
+  };
+
+
+  // Attach PUSH event handlers
+  // ==========================
+
+  window.addEventListener('touchstart', function () { isScrolling = false; });
+  window.addEventListener('touchmove', function () { isScrolling = true; });
+  window.addEventListener('touchend', touchend);
+  window.addEventListener('click', function (e) { if (getTarget(e)) {e.preventDefault();} });
+  window.addEventListener('popstate', popstate);
+  window.PUSH = PUSH;
+
+}());