Created
March 23, 2010 14:31
-
-
Save cheeaun/341230 to your computer and use it in GitHub Desktop.
Some (jsbeautified) code stolen from http://m.expatliving.sg/ written by Jacky Nguyen
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function (a) { | |
| window.ExpatLiving = {}; | |
| window.ExpatLiving.SearchLayer = new Class({ | |
| Implements: [Options, Events], | |
| Binds: ["onFormSend", "onFormComplete", "onFormFailure"], | |
| options: {}, | |
| initialize: function (c, b) { | |
| this.element = a(c); | |
| this.setOptions(b || {}); | |
| this.element.style.webkitTransitionProperty = "0"; | |
| this.element.style.webkitTransformStyle = "preserve-3d"; | |
| this.hide(); | |
| a("searchNoResultButtonCancel").addEvent("click", this.hide.bind(this)); | |
| a("searchNoResultButtonTryAgain").addEvent("click", this.reset.bind(this)); | |
| a("searchTerm").addEvent("keyup", function () { | |
| if (this.get("value").length > 0) { | |
| a("searchCancel").style.visibility = "visible" | |
| } else { | |
| a("searchCancel").style.visibility = "hidden" | |
| } | |
| }); | |
| a("searchCancel").addEvent("click", function () { | |
| a("searchTerm").set("value", ""); | |
| this.style.visibility = "hidden" | |
| }); | |
| a("searchTerm").addEvent("focus", function () { | |
| a("searchNoResult").setStyle("display", "none") | |
| }); | |
| return this | |
| }, | |
| onFormSend: function () { | |
| a("searchNoResultKeyword").set("html", a("searchTerm").get("value")); | |
| a("searchIndicator").setStyle("display", "block"); | |
| a("searchTerm").set("disabled", true); | |
| a("searchTerm").blur() | |
| }, | |
| onFormComplete: function (c, b, d) { | |
| scrollTo(0, 0); | |
| a("searchIndicator").setStyle("display", "none"); | |
| a("searchTerm").set("disabled", false); | |
| if (d.length > 0) { | |
| this.hide(); | |
| return true | |
| } else { | |
| a("searchNoResult").setStyle("display", "block"); | |
| return false | |
| } | |
| }, | |
| onFormFailure: function () { | |
| a("searchIndicator").setStyle("display", "none"); | |
| a("searchTerm").set("disabled", false) | |
| }, | |
| setTransitionDuration: function (b) { | |
| this.element.style.webkitTransitionDuration = b | |
| }, | |
| reset: function () { | |
| a("searchTerm").set("value", ""); | |
| a("searchTerm").focus(); | |
| a("searchCancel").style.visibility = "hidden"; | |
| a("searchIndicator").setStyle("display", "none"); | |
| a("searchNoResult").setStyle("display", "none") | |
| }, | |
| show: function (b) { | |
| if (!b) { | |
| b = "0s" | |
| } | |
| this.reset(); | |
| this.setTransitionDuration(b); | |
| if (MooTouch.isAndroid) { | |
| this.element.style.webkitTransform = "translate(0, 0)" | |
| } else { | |
| this.element.style.webkitTransform = "translate3d(0, 0, 0)" | |
| } | |
| this.fireEvent("onShow"); | |
| if (this.input) { | |
| this.input.focus() | |
| } | |
| }, | |
| hide: function (b) { | |
| if (!b) { | |
| b = "0s" | |
| } | |
| this.setTransitionDuration(b); | |
| if (MooTouch.isAndroid) { | |
| this.element.style.webkitTransform = "translate(0, -100%)" | |
| } else { | |
| this.element.style.webkitTransform = "translate3d(0, -100%, 0)" | |
| } | |
| a("searchTerm").blur(); | |
| this.fireEvent("onHide") | |
| } | |
| }); | |
| window.ExpatLiving.Mask = new Class({ | |
| Implements: [Options, Events], | |
| options: {}, | |
| initialize: function (c, b) { | |
| this.element = a(c); | |
| this.setOptions(b || {}); | |
| this.hide(); | |
| return this | |
| }, | |
| show: function () { | |
| this.element.setStyles({ | |
| display: "block", | |
| height: document.body.getSize().y + "px" | |
| }); | |
| this.fireEvent("onShow") | |
| }, | |
| hide: function () { | |
| this.element.setStyle("display", "none"); | |
| this.fireEvent("onHide") | |
| } | |
| }) | |
| })(document.id); | |
| var App; | |
| var gallerySlideshowHelpShown = false; | |
| window.addEvent("domready", function () { | |
| window.addEventListener("click", function (h) { | |
| if (!$defined(h.isManufactured)) { | |
| h.preventDefault(); | |
| h.stopPropagation() | |
| } | |
| }, true); | |
| var d = $$("body > .tabBar"); | |
| if (d.length > 0) { | |
| $$("body").addClass("hasTabBar"); | |
| d.each(function (h) { | |
| h.store("mootouch.tabbable", new MooTouch.Tabbable(h)) | |
| }) | |
| } | |
| window.addEvent("pageTransitionStartAll", function (i) { | |
| var j = $("mainTabBar").retrieve("mootouch.tabbable"); | |
| var h = new Hash({ | |
| home: "tabHome", | |
| updates: "tabUpdates", | |
| whatsNew: "tabUpdates", | |
| whatsOn: "tabUpdates", | |
| featured: "tabUpdates", | |
| competitions: "tabUpdates", | |
| articleViewUpdates: "tabUpdates", | |
| gallery: "tabGallery", | |
| galleryListAlbums: "tabGallery", | |
| galleryViewAlbum: "tabGallery", | |
| settings: "tabSettings" | |
| }); | |
| if (h.get(i.to)) { | |
| j.setActive(h.get(i.to)) | |
| } else { | |
| j.setActive(h.get("home")) | |
| } | |
| }); | |
| window.addEvent("turn", function () { | |
| (function () { | |
| scrollTo(0, 0) | |
| }).delay(1) | |
| }); | |
| var g = function () { | |
| if (this.hasClass("action")) { | |
| $clear(this.retrieve("clickableTimer")); | |
| this.addClass("active"); | |
| this.store("clickableTimer", (function () { | |
| this.removeClass("active") | |
| }).delay(1000, this)) | |
| } | |
| }; | |
| App = new MooTouch.App({ | |
| useDefaultScrolling: false, | |
| useDefaultGesture: false, | |
| currentScreenSelector: ".screen.action.current", | |
| clickableOptions: { | |
| onClick: function () { | |
| g.bind(this.element)() | |
| } | |
| } | |
| }); | |
| $$(".swipeable").addEvent("swipe", function (h) {}); | |
| var a = function () { | |
| this.addClass("invisible") | |
| }; | |
| var f = function (h) { | |
| ["slide", "in", "out", "top", "invisible"].each(function (i) { | |
| this.removeClass(i) | |
| }.bind(this)); | |
| this.removeEvent("webkitAnimationEnd", a); | |
| if (h == "down") { | |
| this.addClass("slide in top") | |
| } else { | |
| this.addEvent("webkitAnimationEnd", a); | |
| this.addClass("slide out top") | |
| } | |
| }; | |
| window.addEvent("pageTransitionEndAll", function (i) { | |
| var h = $(i.to); | |
| var j = h.getElement(".header"); | |
| if (j) { | |
| ["slide", "in", "out", "top", "invisible"].each(function (k) { | |
| j.removeClass(k) | |
| }) | |
| } | |
| }); | |
| if (!window.Touch) { | |
| $(document.body).addEvent("click:relay(a)", g) | |
| } | |
| $$(".button.back").addEvent("click", function () { | |
| window.history.go(-1) | |
| }); | |
| var b = new ExpatLiving.Mask("maskLayer"); | |
| var c = new ExpatLiving.SearchLayer("searchLayer", { | |
| form: $("searchForm") | |
| }); | |
| c.addEvent("onShow", function () { | |
| b.show() | |
| }).addEvent("onHide", function () { | |
| b.hide() | |
| }); | |
| b.element.addEvent("touchstart", function (h) { | |
| h.preventDefault(); | |
| h.stopPropagation(); | |
| b.hide(); | |
| c.hide(); | |
| $("searchTerm").blur() | |
| }); | |
| $$("a.search").addEvent("click", function () { | |
| c.show("0.4s") | |
| }); | |
| $("searchForm").store("validator", new(new Class({ | |
| Implements: [Options, Events], | |
| initialize: function (h) { | |
| this.element = $(h); | |
| this.element.addEvent("submit", function (j) { | |
| j.stop(); | |
| var i = ($("searchTerm").get("value").length > 1); | |
| this.fireEvent("onFormValidate", [i, this.element, j]) | |
| }.bind(this)) | |
| } | |
| }))("searchForm")).store("form.request", new Form.Request("searchForm", null, { | |
| requestOptions: { | |
| useSpinner: false | |
| }, | |
| stopOnFailure: true, | |
| resetForm: false | |
| })); | |
| var e = function () { | |
| var h = this.match("ul") ? this : this.getElement("ul"); | |
| h.getElements(".paging").each(function (i) { | |
| if (!i.retrieve("pagingClickBound")) { | |
| i.store("pagingClickBound", true); | |
| i.addEvent("click", function () { | |
| var k = this.getParent("li"); | |
| var m = parseInt(this.get("rel")); | |
| var l = this.hasClass("next"); | |
| var j = (l ? m - 2 : m + 2); | |
| k.addClass("loading").addClass((l) ? "next" : "previous"); | |
| h.oneEvent("onAfterContentChange", function (t) { | |
| ["loading", "next", "previous"].each(function (u) { | |
| k.removeClass(u) | |
| }); | |
| this.getElements(".paging").each(function (u) { | |
| u.getParent("li").setStyle("display", "none") | |
| }); | |
| if (t.length < 1) { | |
| return | |
| } | |
| var q = (this.hasClass(".scrollable") ? this : this.getParent(".scrollable")).retrieve("mootouch.scrollable").scrollContent; | |
| if (j >= 1) { | |
| var s = this.getElements(".page" + j + "Row"); | |
| if (s.length > 0) { | |
| var p = 0; | |
| if (l) { | |
| s.each(function (u) { | |
| p += u.getSize().y | |
| }); | |
| s.destroy(); | |
| q.refresh().setPositionBounded(new MooTouch.Point(0, ((l) ? (q.position.y + p) : q.position.y))) | |
| } else { | |
| s.destroy() | |
| } | |
| } | |
| } | |
| var o = this.getElement("li:first-child"); | |
| var n = this.getElement("li:last-child"); | |
| if (o && o.getElement(".paging")) { | |
| o.setStyle("display", "block"); | |
| if (l) { | |
| q.refresh().setPositionBounded(new MooTouch.Point(0, q.position.y)) | |
| } | |
| } | |
| if (n && n.getElement(".paging")) { | |
| n.setStyle("display", "block") | |
| } | |
| var r = $$(".page" + m + "Row"); | |
| r.setStyle("background-color", "#FFA"); | |
| (function () { | |
| r.setStyle("background-color", "transparent") | |
| }).delay(2000) | |
| }) | |
| }) | |
| } | |
| }) | |
| }; | |
| $("articleListContent").addEvent("onAfterContentChange", function () { | |
| e.apply(this); | |
| $("articleListUl").addEvent("onAfterContentChange", e) | |
| }); | |
| $("whatsOnContent").addEvent("onAfterContentChange", function () { | |
| e.apply(this); | |
| $("whatsOnUl").addEvent("onAfterContentChange", e) | |
| }); | |
| $("whatsNewContent").addEvent("onAfterContentChange", function () { | |
| e.apply(this); | |
| $("whatsNewUl").addEvent("onAfterContentChange", e) | |
| }); | |
| $("competitionsContent").addEvent("onAfterContentChange", function () { | |
| e.apply(this); | |
| $("competitionsUl").addEvent("onAfterContentChange", e) | |
| }); | |
| $("articleViewContent").addEvent("onAfterContentChange", function () { | |
| if ($(this).getElement(".articleNav")) { | |
| $("articleView").getElement(".header > h3").set("html", $(this).getElement(".articleNav").get("html")) | |
| } | |
| }); | |
| $("searchForm").retrieve("form.request").addEvents({ | |
| send: c.onFormSend, | |
| failure: c.onFormFailure | |
| }).request.addEvent("success", function () { | |
| if (!c.onFormComplete.run(arguments)) { | |
| this.stopEventPropagation() | |
| } | |
| }).addEvent("success", function (k, i, l) { | |
| var j = $($("searchForm").get("target")); | |
| var h = j.getParent(".screen"); | |
| j.set("html", l); | |
| if (MooTouch.isAndroid) { | |
| j.style.webkitTransform = "translate(0, 0)" | |
| } else { | |
| j.style.webkitTransform = "translate3d(0, 0, 0)" | |
| } | |
| e.apply(j); | |
| $("articleListUl").addEvent("onAfterContentChange", e); | |
| if (h.getElement(".header h2")) { | |
| h.getElement(".header h2").set("html", "SEARCH RESULTS") | |
| } | |
| App.setPage({ | |
| id: h.get("id") | |
| }) | |
| }); | |
| $("galleryViewAlbumContent").addEvent("onAfterContentChange", function () { | |
| var j = $("photoSlideshow"); | |
| j.inject(document.body, "bottom"); | |
| var k = $("photoSlideshowHelp"); | |
| k.inject(document.body, "bottom"); | |
| j.addEvent("click", function () { | |
| this.setStyle("display", "none"); | |
| App.lockScreen(false); | |
| App.setPageChangeLock(false); | |
| $$(".screen.action.current").setStyle("visibility", "visible"); | |
| window.removeEvent("turn", m) | |
| }); | |
| var h = null; | |
| var i = function (o, n) { | |
| if (!$defined(n)) { | |
| n = "0" | |
| } | |
| this.style.webkitTransitionDuration = n; | |
| h = $(o); | |
| l() | |
| }.bind(j); | |
| var l = function () { | |
| var n = h.getPosition().x; | |
| if (MooTouch.isAndroid) { | |
| this.style.webkitTransform = "translate(" + (-n) + "px, 0)" | |
| } else { | |
| this.style.webkitTransform = "translate3d(" + (-n) + "px, 0, 0)" | |
| } | |
| }.bind(j); | |
| var m = function () { | |
| j.dispose().inject(document.body, "bottom"); | |
| l() | |
| }.bind(j); | |
| j.addEvent("swipe", function (o) { | |
| if (!h) { | |
| h = this.getFirst(".screen") | |
| } | |
| var n = (o.direction == "left") ? h.getNext(".screen") : h.getPrevious(".screen"); | |
| if (n) { | |
| i(n, o.speed + "ms") | |
| } | |
| }); | |
| this.getElements("a").addEvent("click", function () { | |
| j.setStyle("display", "block"); | |
| App.lockScreen(true, true); | |
| App.setPageChangeLock(true); | |
| i(this.get("id") + "Full"); | |
| $$(".screen.action.current").setStyle("visibility", "hidden"); | |
| window.addEvent("turn", m); | |
| if (!gallerySlideshowHelpShown) { | |
| gallerySlideshowHelpShown = true; | |
| k.addClass("visible"); | |
| k.style.opacity = 0.6; | |
| var n = function () { | |
| this.style.opacity = 0; | |
| this.oneEvent("webkitTransitionEnd", function () { | |
| this.removeClass("visible") | |
| }) | |
| }.bind(k); | |
| n.delay(6000); | |
| k.addEvent("touchstart", function () { | |
| this.removeClass("visible") | |
| }) | |
| } | |
| }) | |
| }) | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function (d) { | |
| if (!$defined(window.MooTouch)) { | |
| var b = ("createTouch" in document); | |
| var c = (navigator.userAgent.indexOf("Android") !== -1); | |
| var a = window.MooTouch = { | |
| EVENT_TOUCHSTART: (b || c) ? "touchstart" : "mousedown", | |
| EVENT_TOUCHMOVE: (b || c) ? "touchmove" : "mousemove", | |
| EVENT_TOUCHEND: (b || c) ? "touchend" : "mouseup", | |
| EVENT_ORIENTATIONCHANGE: (b) ? "orientationchange" : "resize", | |
| isTouchDevice: b, | |
| isAndroid: c, | |
| createEvent: function () { | |
| if (b) { | |
| return a.createEventWithTouch.run(arguments) | |
| } else { | |
| return a.createEventWithMouse.run(arguments) | |
| } | |
| }, | |
| createEventWithTouch: function (g, f) { | |
| var e = document.createEvent("TouchEvent"); | |
| e.initTouchEvent(g, f.bubbles, f.cancelable, window, f.detail, f.screenX, f.screenY, f.clientX, f.clientY, f.ctrlKey, f.altKey, f.shiftKey, f.metaKey, f.touches, f.targetTouches, f.changedTouches, f.scale, f.rotation); | |
| return e | |
| }, | |
| createEventWithMouse: function (f, e) { | |
| var g = document.createEvent("MouseEvent"); | |
| g.initMouseEvent(f, e.bubbles, e.cancelable, document.defaultView, e.detail, e.screenX, e.screenY, e.clientX, e.clientY, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, e.metaKey, e.button, e.relatedTarget); | |
| return g | |
| }, | |
| getElementPosition: function (f) { | |
| var e = new WebKitCSSMatrix(window.getComputedStyle(f).webkitTransform); | |
| if (c) { | |
| return new MooTouch.Point(e.d, e.e) | |
| } else { | |
| return new MooTouch.Point(e.m41, e.m42) | |
| } | |
| } | |
| } | |
| } | |
| })(document.id); | |
| (function (a) { | |
| MooTouch.Behaviour = new Class({ | |
| Implements: [Options, Events], | |
| initialize: function (c, b) { | |
| this.element = a(c); | |
| this.setOptions(b || {}) | |
| }, | |
| cancel: function () {} | |
| }) | |
| })(document.id); | |
| (function (a) { | |
| MooTouch.Clickable = new Class({ | |
| Extends: MooTouch.Behaviour, | |
| Binds: ["touchMove", "touchEnd"], | |
| options: { | |
| threshold: { | |
| x: 10, | |
| y: 10, | |
| time: 600 | |
| } | |
| }, | |
| initialize: function () { | |
| this.parent.apply(this, arguments); | |
| return this | |
| }, | |
| touchStart: function (b) { | |
| b.preventDefault(); | |
| this._startPoint = new MooTouch.Point.fromEvent(b); | |
| this._startTime = new Date().getTime(); | |
| this._isMoved = false; | |
| this.element.addEvent(MooTouch.EVENT_TOUCHMOVE, this.touchMove); | |
| this.element.addEvent(MooTouch.EVENT_TOUCHEND, this.touchEnd) | |
| }, | |
| touchMove: function (b) { | |
| b.preventDefault(); | |
| this._newPoint = new MooTouch.Point.fromEvent(b); | |
| if (this._newPoint.x > this._startPoint.x + this.options.threshold.x || this._newPoint.x < this._startPoint.x - this.options.threshold.x || this._newPoint.y > this._startPoint.y + this.options.threshold.y || this._newPoint.y < this._startPoint.y - this.options.threshold.y) { | |
| this.element.removeEvent(MooTouch.EVENT_TOUCHEND, this.touchEnd); | |
| this.element.removeEvent(MooTouch.EVENT_TOUCHMOVE, this.touchMove) | |
| } | |
| }, | |
| touchEnd: function (c) { | |
| this.element.removeEvent(MooTouch.EVENT_TOUCHMOVE, this.touchMove); | |
| this.element.removeEvent(MooTouch.EVENT_TOUCHEND, this.touchEnd); | |
| if (new Date().getTime() - this._startTime > this.options.threshold.time) { | |
| console.log("not click"); | |
| return | |
| } | |
| var b = document.createEvent("MouseEvents"); | |
| b.initEvent("click", true, false); | |
| b.isManufactured = true; | |
| (c.changedTouches ? c.changedTouches[0] : c).target.dispatchEvent(b); | |
| this.fireEvent("onClick"); | |
| if (this.element.get("tag") == "a") { | |
| window.location = this.element.get("href") | |
| } | |
| } | |
| }) | |
| })(document.id); | |
| (function (a) { | |
| MooTouch.Swipeable = new Class({ | |
| Extends: MooTouch.Behaviour, | |
| Binds: ["onTouchStart", "onTouchMove", "onTouchEnd"], | |
| options: { | |
| threshold: { | |
| length: 80, | |
| height: 50, | |
| time: 600 | |
| }, | |
| isHorizontalEnabled: true, | |
| isVerticalEnabled: true, | |
| bindTouchstartEvent: true, | |
| }, | |
| initialize: function () { | |
| this.parent.apply(this, arguments); | |
| if (this.options.bindTouchstartEvent) { | |
| this.element.addEvent(MooTouch.EVENT_TOUCHSTART, this.onTouchStart) | |
| } | |
| this.element.addEvent(MooTouch.EVENT_TOUCHMOVE, this.onTouchMove); | |
| this.element.addEvent(MooTouch.EVENT_TOUCHEND, this.onTouchEnd); | |
| this._isStarted = false; | |
| return this | |
| }, | |
| onTouchStart: function (b) { | |
| b.preventDefault(); | |
| this._isStarted = true; | |
| this._startTime = new Date().getTime(); | |
| this._isMoved = false; | |
| this._isHorizontalSwipe = false; | |
| this._isVerticalSwipe = false; | |
| this._startPoint = new MooTouch.Point.fromEvent(b); | |
| this._heightThreshold = {}; | |
| if (this.options.isHorizontalEnabled) { | |
| this._isHorizontalSwipe = true; | |
| this._heightThreshold.horizontal = { | |
| max: this._startPoint.y + this.options.threshold.height, | |
| min: this._startPoint.y - this.options.threshold.height | |
| } | |
| } | |
| if (this.options.isVerticalEnabled) { | |
| this._isVerticalSwipe = true; | |
| this._heightThreshold.vertical = { | |
| max: this._startPoint.x + this.options.threshold.height, | |
| min: this._startPoint.x - this.options.threshold.height | |
| } | |
| } | |
| }, | |
| onTouchMove: function (b) { | |
| b.preventDefault(); | |
| if (!this._isStarted) { | |
| return | |
| } | |
| if (!this._isMoved) { | |
| this._isMoved = true | |
| } | |
| this._newPoint = new MooTouch.Point.fromEvent(b); | |
| if (this.options.isHorizontalEnabled && this._isHorizontalSwipe) { | |
| if (this._newPoint.y > this._heightThreshold.horizontal.max || this._newPoint.y < this._heightThreshold.horizontal.min) { | |
| this._isHorizontalSwipe = false | |
| } | |
| } | |
| if (this.options.isVerticalEnabled && this._isVerticalSwipe) { | |
| if (this._newPoint.x > this._heightThreshold.vertical.max || this._newPoint.x < this._heightThreshold.vertical.min) { | |
| this._isVerticalSwipe = false | |
| } | |
| } | |
| }, | |
| onTouchEnd: function (c) { | |
| c.preventDefault(); | |
| if (!this._isStarted) { | |
| return | |
| } | |
| this._isStarted = false; | |
| if (!this._isMoved || (!this._isHorizontalSwipe && !this._isVerticalSwipe)) { | |
| return | |
| } | |
| var d = new Date().getTime() - this._startTime; | |
| if (d > this.options.threshold.time) { | |
| return | |
| } | |
| if (this._isHorizontalSwipe) { | |
| var b = this._startPoint.x - this._newPoint.x; | |
| if (b > this.options.threshold.length) { | |
| this.fireSwipeEvent({ | |
| direction: MooTouch.Swipeable.LEFT, | |
| duration: d | |
| }) | |
| } else { | |
| if (b < -this.options.threshold.length) { | |
| this.fireSwipeEvent({ | |
| direction: MooTouch.Swipeable.RIGHT, | |
| duration: d | |
| }) | |
| } | |
| } | |
| } | |
| if (this._isVerticalSwipe) { | |
| var f = this._startPoint.y - this._newPoint.y; | |
| if (f > this.options.threshold.length) { | |
| this.fireSwipeEvent({ | |
| direction: MooTouch.Swipeable.UP, | |
| duration: d | |
| }) | |
| } else { | |
| if (f < -this.options.threshold.length) { | |
| this.fireSwipeEvent({ | |
| direction: MooTouch.Swipeable.DOWN, | |
| duration: d | |
| }) | |
| } | |
| } | |
| } | |
| }, | |
| fireSwipeEvent: function (b) { | |
| this.fireEvent("onSwipe", b); | |
| this.element.fireEvent("swipe", b) | |
| } | |
| }); | |
| MooTouch.Swipeable.UP = "up"; | |
| MooTouch.Swipeable.DOWN = "down"; | |
| MooTouch.Swipeable.LEFT = "left"; | |
| MooTouch.Swipeable.RIGHT = "right" | |
| })(document.id); | |
| (function (a) { | |
| MooTouch.Tabbable = new Class({ | |
| Extends: MooTouch.Behaviour, | |
| options: { | |
| tabSelector: ".tab" | |
| }, | |
| tabs: null, | |
| initialize: function () { | |
| this.parent.apply(this, arguments); | |
| this.tabs = this.element.getElements(this.options.tabSelector); | |
| var b = this; | |
| this.tabs.addEvent("click", function () { | |
| b.setActive(this) | |
| }); | |
| return this | |
| }, | |
| setActive: function (b) { | |
| this.tabs.removeClass("active"); | |
| a(b).addClass("active") | |
| } | |
| }) | |
| })(document.id); | |
| (function (a) { | |
| MooTouch.LocationHash = new Class({ | |
| Implements: [Events, Options], | |
| options: { | |
| checkInterval: 50 | |
| }, | |
| initialize: function (b) { | |
| this.setOptions(b || {}) | |
| }, | |
| set: function (b) { | |
| if (this.currentLocationHash != b) { | |
| window.location.hash = b | |
| } | |
| }, | |
| updateCurrentData: function () { | |
| this.currentHistoryLength = window.history.length; | |
| this.currentLocationHash = this.getLocationHash() | |
| }, | |
| fireHashChangeEvent: function (b) { | |
| window.fireEvent("hashchange", b) | |
| }, | |
| disableChangeDetection: function () { | |
| this.disableTimer() | |
| }, | |
| enableChangeDetection: function () { | |
| this.enableTimer() | |
| }, | |
| enableTimer: function () { | |
| if (!$defined(this.currentLocationHash)) { | |
| this.updateCurrentData(); | |
| this.fireHashChangeEvent({ | |
| isBack: false, | |
| from: null, | |
| to: this.currentLocationHash | |
| }) | |
| } | |
| this.hashChangeDetectTimer = function () { | |
| var b = this.getLocationHash(); | |
| if (b != this.currentLocationHash) { | |
| var c = { | |
| isBack: false, | |
| from: this.currentLocationHash, | |
| to: b | |
| }; | |
| if (window.history.length < this.currentHistoryLength) { | |
| c.isBack = true | |
| } | |
| this.updateCurrentData(); | |
| this.fireHashChangeEvent(c) | |
| } | |
| }.periodical(this.options.checkInterval, this) | |
| }, | |
| disableTimer: function () { | |
| $clear(this.hashChangeDetectTimer) | |
| }, | |
| getLocationHash: function () { | |
| var b = location.hash.indexOf("#"); | |
| return (b == -1 ? "" : location.hash.substr(b + 1)) | |
| } | |
| }) | |
| })(document.id); | |
| (function (a) { | |
| window.MooTouch.App = new Class({ | |
| Implements: [Options, Events], | |
| Binds: ["preventDefault", "orientationChange", "pageChange", "locationHashChange", "pageTransitionStartAll", "pageTransitionEndAll"], | |
| options: { | |
| useDefaultScrolling: false, | |
| useDefaultGesture: false, | |
| clickableSelector: "a, button", | |
| scrollableSelector: ".scrollable", | |
| swipeableSelector: ".swipeable", | |
| clickableOptions: { | |
| onClick: $empty | |
| }, | |
| currentScreenSelector: ".screen.current", | |
| currentScreenClass: "current", | |
| cachedClass: "cached", | |
| pageAnimationFromClass: "slide out", | |
| pageAnimationFromReverseClass: "slide out reverse", | |
| pageAnimationToClass: "slide in", | |
| pageAnimationToReverseClass: "slide in reverse", | |
| defaultPage: "home", | |
| hashChangeDetectInterval: 20, | |
| customEventName: { | |
| pageTransitionStart: "pageTransitionStart", | |
| pageTransitionEnd: "pageTransitionEnd", | |
| pageTransitionStartAll: "pageTransitionStartAll", | |
| pageTransitionEndAll: "pageTransitionEndAll", | |
| pageChange: "pageChange" | |
| }, | |
| bodyClassName: { | |
| profile: "profile", | |
| landscape: "landscape", | |
| fullscreen: "fullscreen" | |
| } | |
| }, | |
| locationHash: null, | |
| initialize: function (b) { | |
| this.setOptions(b || {}); | |
| this.locationHash = new MooTouch.LocationHash(); | |
| if (!this.options.useDefaultScrolling) { | |
| [MooTouch.EVENT_TOUCHSTART].each(function (c) { | |
| document.addEvent(c, function (d) { | |
| this.preventDefault(d); | |
| (function () { | |
| scrollTo(0, 0) | |
| }).delay(1) | |
| }.bind(this)) | |
| }.bind(this)) | |
| } | |
| if (!this.options.useDefaultGesture) { | |
| ["gesturestart", "gesturechange", "gestureend"].each(function (c) { | |
| window.addEvent(c, this.preventDefault) | |
| }.bind(this)) | |
| }["load", MooTouch.EVENT_ORIENTATIONCHANGE].each(function (c) { | |
| window.addEvent(c, this.orientationChange) | |
| }.bind(this)); | |
| if (window.navigator.standalone == true) { | |
| $$("body").addClass(this.options.bodyClassName.fullscreen) | |
| } | |
| this.initBehaviours(); | |
| window.addEvent(this.options.customEventName.pageChange, this.pageChange).addEvent(this.options.customEventName.pageTransitionStartAll, this.pageTransitionStartAll).addEvent(this.options.customEventName.pageTransitionEndAll, this.pageTransitionEndAll); | |
| window.addEvent("hashchange", this.locationHashChange); | |
| window.addEvent("turn", function () { | |
| if (this.screenLockMask && this.screenLockMask.hasClass("active")) { | |
| this.screenLockMask.setStyle("height", this.getUsableScreenSize().y) | |
| } | |
| }.bind(this)); | |
| this.locationHash.enableChangeDetection() | |
| }, | |
| initBehaviours: function () { | |
| if (this.options.clickableSelector.length > 0) { | |
| var b = this.options.clickableOptions; | |
| this.options.clickableSelector.split(",").each(function (c) { | |
| a(document.body).addEvent(MooTouch.EVENT_TOUCHSTART + ":relay(" + c.trim() + ")", function (f) { | |
| var d = this.retrieve("mootouch.clickable"); | |
| if (d) { | |
| d.cancel() | |
| } | |
| this.eliminate("mootouch.clickable").store("mootouch.clickable", new MooTouch.Clickable(this, b)); | |
| this.retrieve("mootouch.clickable").touchStart(f) | |
| }) | |
| }) | |
| } | |
| if (this.options.scrollableSelector.length > 0) { | |
| $$(this.options.scrollableSelector).each(function (c) { | |
| c.store("mootouch.scrollable", new MooTouch.ScrollView(c.getParent(), { | |
| horizontalScrollEnabled: false, | |
| content: { | |
| element: c | |
| } | |
| })) | |
| }) | |
| } | |
| if (this.options.swipeableSelector.length > 0) { | |
| a(document.body).addEvent(MooTouch.EVENT_TOUCHSTART + ":relay(.swipeable)", function (c) { | |
| if (!this.retrieve("swipeable")) { | |
| this.store("swipeable", new MooTouch.Swipeable(this, { | |
| isVerticalEnabled: false, | |
| bindTouchstartEvent: false | |
| })) | |
| } | |
| this.retrieve("swipeable").onTouchStart(c) | |
| }) | |
| } | |
| }, | |
| preventDefault: function (b) { | |
| b.preventDefault(); | |
| b.stopPropagation() | |
| }, | |
| getOrientation: function () { | |
| return (!$defined(window.orientation) || window.orientation == 0) ? this.options.bodyClassName.profile : this.options.bodyClassName.landscape | |
| }, | |
| getPageChangeLock: function () { | |
| if (!$defined(this._pageChangeLock)) { | |
| this._pageChangeLock = false | |
| } | |
| return this._pageChangeLock | |
| }, | |
| setPageChangeLock: function (b) { | |
| if (!$defined(b)) { | |
| b = true | |
| } | |
| this._pageChangeLock = b; | |
| if (!b && this.pageChangeBufferArgs) { | |
| this.setPage.delay(100, this, this.pageChangeBufferArgs); | |
| this.pageChangeBufferArgs = null | |
| } | |
| }, | |
| setPage: function (f, e) { | |
| if (true === this.getPageChangeLock()) { | |
| this.pageChangeBufferArgs = arguments; | |
| return | |
| } | |
| if (!$defined(f.id)) { | |
| return | |
| } | |
| var d = f.id; | |
| if (null === a(d)) { | |
| return | |
| } | |
| a(d).removeClass("loading"); | |
| if ($defined(f.reverse)) { | |
| e = f.reverse | |
| } | |
| var h = this.getPage(); | |
| var g = this.getLocationHashFromData(f); | |
| if ($defined(f.url) && f.url.length > 0) { | |
| var b = a(f.container || f.id); | |
| if (!b) { | |
| return | |
| } | |
| if (b.retrieve("locationHash") != g && (!$defined(f.cache) || f.cache === false || !b.hasClass(this.options.cachedClass))) { | |
| if (h != d) { | |
| a(d).addClass("loading") | |
| } | |
| var c = new Request.HTML({ | |
| url: f.url, | |
| method: "get", | |
| link: "cancel", | |
| noCache: (f.cache) ? false : true | |
| }); | |
| c.addEvent("onComplete", function (n, j, o) { | |
| window.fireEvent("onAjaxRequestComplete", [b, o]); | |
| if (f.cache) { | |
| b.addClass(this.options.cachedClass) | |
| } | |
| var m = ($defined(f.mode)) ? f.mode : "update"; | |
| b.fireEvent("onBeforeContentChange", [o]); | |
| if (m == "prepend") { | |
| var l = Elements.from(o); | |
| for (var k = l.length - 1; k >= 0; k--) { | |
| b.grab(l[k], "top") | |
| } | |
| } else { | |
| if (m == "append") { | |
| Elements.from(o).inject(b, "bottom") | |
| } else { | |
| b.set("html", o); | |
| b.style.webkitTransform = "translate3d(0, 0, 0)" | |
| } | |
| } | |
| b.fireEvent("onAfterContentChange", [o]); | |
| if (h != d) { | |
| a(d).removeClass("loading") | |
| } | |
| b.store("locationHash", g) | |
| }.bind(this)).send() | |
| } | |
| } | |
| if (h != d) { | |
| if (!$defined(e)) { | |
| e = false | |
| } | |
| this.locationHash.set(this.getLocationHashFromData(f)); | |
| this._page = d; | |
| window.fireEvent(this.options.customEventName.pageChange, [h, d, e]) | |
| } | |
| }, | |
| getPage: function () { | |
| if (!$defined(this._page)) { | |
| this._page = "" | |
| } | |
| return this._page | |
| }, | |
| getDataFromLocationHash: function (c) { | |
| if ($type(c) != "string") { | |
| throw new Error("hash parameter must be a string!") | |
| } | |
| var b = {}; | |
| var d = new Hash({ | |
| "false": false, | |
| "true": true | |
| }); | |
| c.split(",").each(function (e) { | |
| var f = e.split(":"); | |
| d.each(function (h, g) { | |
| if (f[1] == g) { | |
| f[1] = h | |
| } | |
| }); | |
| b[f[0]] = f[1] | |
| }); | |
| return b | |
| }, | |
| getLocationHashFromData: function (b) { | |
| var c = new Array(); | |
| new Hash(b).each(function (e, d) { | |
| c.push(d + ":" + e) | |
| }); | |
| return c.join(",") | |
| }, | |
| locationHashChange: function (c) { | |
| if (c.to.length == 0) { | |
| c.to = "id:" + this.options.defaultPage | |
| } | |
| var b = this.getDataFromLocationHash(c.to); | |
| this.setPage(b, c.isBack) | |
| }, | |
| pageChange: function (h, c, e) { | |
| var b, l, f = this.options, | |
| k = f[(e) ? "pageAnimationFromReverseClass" : "pageAnimationFromClass"], | |
| i = f[(e) ? "pageAnimationToReverseClass" : "pageAnimationToClass"]; | |
| var d = function () { | |
| window.fireEvent(f.customEventName.pageTransitionStartAll, { | |
| from: h, | |
| to: c | |
| }) | |
| }; | |
| var j = function () { | |
| window.fireEvent(f.customEventName.pageTransitionEndAll, { | |
| from: h, | |
| to: c | |
| }) | |
| }; | |
| if (h == "") { | |
| l = a(c); | |
| d(); | |
| window.fireEvent(f.customEventName.pageTransitionStart, { | |
| page: c, | |
| state: "show" | |
| }); | |
| $$(f.currentScreenSelector).removeClass(f.currentScreenClass); | |
| l.addClass(f.currentScreenClass); | |
| window.fireEvent(f.customEventName.pageTransitionEnd, { | |
| page: c, | |
| state: "show" | |
| }); | |
| j() | |
| } else { | |
| b = a(h); | |
| l = a(c); | |
| var g = 0; | |
| d(); | |
| window.fireEvent(f.customEventName.pageTransitionStart, { | |
| page: h, | |
| state: "hide" | |
| }); | |
| window.fireEvent(f.customEventName.pageTransitionStart, { | |
| page: c, | |
| state: "show" | |
| }); | |
| b.oneEvent("webkitAnimationEnd", function () { | |
| this.removeClass(f.currentScreenClass).removeClass(k); | |
| window.fireEvent(f.customEventName.pageTransitionEnd, { | |
| page: h, | |
| state: "hide" | |
| }); | |
| if (++g >= 2) { | |
| j() | |
| } | |
| }); | |
| l.oneEvent("webkitAnimationEnd", function () { | |
| this.removeClass(i); | |
| window.fireEvent(f.customEventName.pageTransitionEnd, { | |
| page: c, | |
| state: "show" | |
| }); | |
| if (++g >= 2) { | |
| j() | |
| } | |
| }); | |
| l.addClass(f.currentScreenClass); | |
| b.addClass(k); | |
| l.addClass(i) | |
| } | |
| }, | |
| pageTransitionStartAll: function () { | |
| this.setPageChangeLock(true); | |
| this.lockScreen(true) | |
| }, | |
| pageTransitionEndAll: function () { | |
| this.setPageChangeLock(false); | |
| this.lockScreen(false) | |
| }, | |
| orientationChange: function () { | |
| a(document.body).removeClass("profile").removeClass("landscape").addClass(this.getOrientation()); | |
| window.fireEvent("turn", { | |
| orientation: this.getOrientation() | |
| }) | |
| }, | |
| getUsableScreenSize: function () { | |
| var b = { | |
| x: 0, | |
| y: 0 | |
| }; | |
| var d = $$(this.options.currentScreenSelector)[0].getSize(); | |
| b.x += d.x; | |
| b.y += d.y; | |
| if (a("mainTabBar")) { | |
| var c = a("mainTabBar").getSize(); | |
| b.x += c.x; | |
| b.y += c.y | |
| } | |
| return b | |
| }, | |
| lockScreen: function (c, b) { | |
| if (!$defined(c)) { | |
| c = true | |
| } | |
| if (!$defined(this.screenLockMask)) { | |
| this.screenLockMask = null | |
| } | |
| if (!this.screenLockMask) { | |
| this.screenLockMask = new Element("div", { | |
| id: "screenLockMask", | |
| "class": "mask" | |
| }).inject(document.body); | |
| [MooTouch.EVENT_TOUCHSTART, MooTouch.EVENT_TOUCHMOVE, MooTouch.EVENT_TOUCHEND, "gesturestart", "gesturechange", "gestureend"].each(function (d) { | |
| this.screenLockMask.addEvent(d, this.preventDefault) | |
| }.bind(this)) | |
| } | |
| if (c) { | |
| if (b) { | |
| this.screenLockMask.setStyle("background-color", "#000000") | |
| } else { | |
| this.screenLockMask.setStyle("background-color", "transparent") | |
| } | |
| this.screenLockMask.setStyle("height", this.getUsableScreenSize().y).addClass("active") | |
| } else { | |
| this.screenLockMask.removeClass("active") | |
| } | |
| } | |
| }) | |
| })(document.id); | |
| (function (a) { | |
| MooTouch.Point = new Class({ | |
| initialize: function (b, c) { | |
| this.x = (b != null && !isNaN(b)) ? b : 0; | |
| this.y = (c != null && !isNaN(c)) ? c : 0; | |
| return this | |
| }, | |
| copy: function () { | |
| return new MooTouch.Point(this.x, this.y) | |
| }, | |
| toString: function () { | |
| return "Point[" + this.x + "," + this.y + "]" | |
| }, | |
| equals: function (b) { | |
| if (!(b instanceof MooTouch.Point)) { | |
| throw new Error("p must be an instance of MooTouch.Point") | |
| } | |
| return (this.x == b.x && this.y == b.y) | |
| }, | |
| roundedEquals: function (b) { | |
| return (Math.round(this.x) == Math.round(b.x) && Math.round(this.y) == Math.round(b.y)) | |
| } | |
| }); | |
| MooTouch.Point.fromEvent = function (c) { | |
| var b = (c.touches && c.touches.length > 0) ? c.touches[0] : c; | |
| return new MooTouch.Point(b.pageX, b.pageY) | |
| } | |
| })(document.id); | |
| (function (a) { | |
| MooTouch.Component = new Class({ | |
| Implements: [Options, Events, Class.ToElement], | |
| Exposes: { | |
| position: true, | |
| transitionDuration: true | |
| }, | |
| options: { | |
| className: "" | |
| }, | |
| isElementManipulated: false, | |
| _createElement: function () { | |
| return null | |
| }, | |
| initialize: function (c, b) { | |
| if ($type(c) == "object") { | |
| b = c.options; | |
| c = c.element | |
| } | |
| this.setOptions(b || {}); | |
| if (!c) { | |
| this.isElementManipulated = true; | |
| this.element = this._createElement(); | |
| if ($type(this.element) != "element") { | |
| throw new Error("Element is not creatable!") | |
| } | |
| } else { | |
| this.element = a(c) | |
| } | |
| this.element.addClass("component"); | |
| if (this.options.className.length > 0) { | |
| this.element.addClass(this.options.className) | |
| } | |
| $each($extend({}, this.Exposes), function (d, e) { | |
| if (d) { | |
| ["get", "set"].each(function (f) { | |
| var g = f + e.substr(0, 1).toUpperCase() + e.substr(1); | |
| if (this[g]) { | |
| this[(f == "get") ? "__defineGetter__" : "__defineSetter__"](e, this[g]) | |
| } | |
| }.bind(this)) | |
| } | |
| }, this); | |
| return this | |
| }, | |
| getPosition: function () { | |
| if (!$defined(this._position)) { | |
| this._position = new MooTouch.Point(0, 0) | |
| } | |
| return this._position | |
| }, | |
| setPosition: function (b) { | |
| if (!this.getPosition().equals(b)) { | |
| this._position = b; | |
| if (MooTouch.isAndroid) { | |
| this.element.style.webkitTransform = "translate(" + b.x + "px, " + b.y + "px)" | |
| } else { | |
| this.element.style.webkitTransform = "translate3d(" + b.x + "px, " + b.y + "px, 0)" | |
| } | |
| this.fireEvent("onPositionChange", [b]) | |
| } | |
| return this | |
| }, | |
| setTransitionDuration: function (b) { | |
| if (!b) { | |
| b = "0" | |
| } | |
| this.element.style.webkitTransitionDuration = b; | |
| this._transitionDuration = b; | |
| return this | |
| } | |
| }) | |
| })(document.id); | |
| (function (a) { | |
| MooTouch.ScrollContent = new Class({ | |
| Extends: MooTouch.Component, | |
| Binds: ["touchStart", "touchMove", "touchEnd", "transitionEnd", "orientationChange"], | |
| options: { | |
| className: "scrollContent", | |
| acceleration: 20, | |
| minTrackingForDrag: 1, | |
| decelerationFrictionFactor: 0.98, | |
| desiredAnimationFrameRate: 15, | |
| maxTrackingTime: 200, | |
| penetrationDeceleration: 0.03, | |
| penetrationAcceleration: 0.08, | |
| minVelocityForDeceleration: 1, | |
| minVelocity: 0.01, | |
| horizontalScrollEnabled: true, | |
| verticalScrollEnabled: true | |
| }, | |
| _isRefreshed: false, | |
| initialize: function () { | |
| this.parent.apply(this, arguments); | |
| this.minPosition = new MooTouch.Point(0, 0); | |
| this.isTracking = false; | |
| this.element.addEvent(MooTouch.EVENT_TOUCHSTART, this.touchStart); | |
| this.element.addEvent(MooTouch.EVENT_TOUCHMOVE, this.touchMove); | |
| this.element.addEvent(MooTouch.EVENT_TOUCHEND, this.touchEnd); | |
| window.addEvent("turn", this.orientationChange); | |
| this.addEvent("onPositionChange", function () { | |
| this.fireEvent("onScroll", $splat(arguments)) | |
| }.bind(this)); | |
| return this | |
| }, | |
| refresh: function () { | |
| this._isRefreshed = true; | |
| this.setTransitionDuration(0); | |
| this.parent = this.element.getParent(), | |
| this.elementSize = this.element.getSize(), | |
| this.elementPosition = this.element.getPosition(), | |
| this.parentSize = this.parent.getSize(), | |
| this.parentPosition = this.parent.getPosition(); | |
| var b = MooTouch.getElementPosition(this.element); | |
| if (!this.position.equals(b)) { | |
| this.position = b | |
| }["x", "y"].each(function (e) { | |
| var d = this.elementSize[e] + (this.elementPosition[e] - this.parentPosition[e]); | |
| var f = this.parentSize[e]; | |
| if (d < f) { | |
| this.minPosition[e] = 0 | |
| } else { | |
| this.minPosition[e] = f - d | |
| } | |
| }.bind(this)); | |
| return this | |
| }, | |
| orientationChange: function () { | |
| (function () { | |
| this.refresh(); | |
| this.snapPositionToBounds() | |
| }.bind(this)).delay(100) | |
| }, | |
| setPositionBounded: function (b) { | |
| if (b.x > 0) { | |
| b.x = 0 | |
| } else { | |
| if (b.x < this.minPosition.x) { | |
| b.x = this.minPosition.x | |
| } | |
| } | |
| if (b.y > 0) { | |
| b.y = 0 | |
| } else { | |
| if (b.y < this.minPosition.y) { | |
| b.y = this.minPosition.y | |
| } | |
| } | |
| this.position = b | |
| }, | |
| touchStart: function (b) { | |
| if (this.isTracking) { | |
| return | |
| } | |
| b.preventDefault(); | |
| this.refresh(); | |
| if (b.targetTouches && b.targetTouches.length != 1) { | |
| return | |
| } | |
| this.stopDecelerationAnimation(); | |
| this.setTransitionDuration("0"); | |
| this.snapPositionToBounds(); | |
| this.startTouchPosition = new MooTouch.Point.fromEvent(b); | |
| this.startTime = b.timeStamp; | |
| this.startTimePosition = this.position.copy(); | |
| this.startPosition = this.position.copy(); | |
| this.isTracking = true; | |
| this.isDragging = false | |
| }, | |
| touchMove: function (g) { | |
| g.preventDefault(); | |
| g.stopPropagation(); | |
| if (g.targetTouches && g.targetTouches.length != 1) { | |
| return | |
| } | |
| if (!this.isTracking) { | |
| return | |
| } | |
| this.lastEventTime = g.timeStamp; | |
| if (!this.isDragging) { | |
| this.isDragging = true; | |
| this.fireEvent("onScrollStart") | |
| } | |
| var c = MooTouch.Point.fromEvent(g), | |
| f = c.x - this.startTouchPosition.x, | |
| d = c.y - this.startTouchPosition.y; | |
| if (f == 0 && d == 0) { | |
| return | |
| } | |
| var b = this.options.horizontalScrollEnabled ? (this.startPosition.x + f) : this.position.x; | |
| var h = this.options.verticalScrollEnabled ? (this.startPosition.y + d) : this.position.y; | |
| b -= ((b < this.minPosition.x) ? (b - this.minPosition.x) : ((b > 0) ? b : 0)) / 2; | |
| h -= ((h < this.minPosition.y) ? (h - this.minPosition.y) : ((h > 0) ? h : 0)) / 2; | |
| this.position = new MooTouch.Point(b, h); | |
| if (this.lastEventTime - this.startTime > this.options.maxTrackingTime) { | |
| this.startTime = this.lastEventTime; | |
| this.startTimePosition = this.position.copy() | |
| } | |
| }, | |
| touchEnd: function (b) { | |
| this.isTracking = false; | |
| if (this.isDragging) { | |
| this.isDragging = false; | |
| b.stopPropagation(); | |
| if (b.timeStamp - this.lastEventTime <= this.options.maxTrackingTime) { | |
| this.startDecelerationAnimation(b) | |
| } | |
| } | |
| if (!this.decelerating) { | |
| this.snapPositionToBounds(true); | |
| this.fireEvent("onScrollEnd") | |
| } | |
| }, | |
| snapPositionToBounds: function () { | |
| var d = false; | |
| var e = new MooTouch.Point(); | |
| e.x = Math.min(Math.max(this.minPosition.x, this.position.x), 0); | |
| e.y = Math.min(Math.max(this.minPosition.y, this.position.y), 0); | |
| d = (e.x != this.position.x || e.y != this.position.y); | |
| if (d) { | |
| this.position = e | |
| } | |
| }, | |
| startDecelerationAnimation: function (g) { | |
| var f = new MooTouch.Point(this.position.x - this.startTimePosition.x, this.position.y - this.startTimePosition.y); | |
| var d = (g.timeStamp - this.startTime) / this.options.acceleration; | |
| this.decelerationVelocity = new MooTouch.Point(f.x / d, f.y / d); | |
| this.minDecelerationPoint = this.minPosition.copy(); | |
| this.maxDecelerationPoint = new MooTouch.Point(0, 0); | |
| this.penetrationDeceleration = this.options.penetrationDeceleration; | |
| this.penetrationAcceleration = this.options.penetrationAcceleration; | |
| var h = this.options.minVelocityForDeceleration; | |
| if (Math.abs(this.decelerationVelocity.x) > h || Math.abs(this.decelerationVelocity.y) > h) { | |
| this.decelerating = true; | |
| this.decelerationTimer = this.stepThroughDecelerationAnimation.delay(this.options.desiredAnimationFrameRate, this); | |
| this.lastFrame = new Date() | |
| } | |
| this.fireEvent("onDecelerationAnimationStart") | |
| }, | |
| stopDecelerationAnimation: function () { | |
| this.decelerating = false; | |
| $clear(this.decelerationTimer); | |
| this.fireEvent("onDecelerationAnimationEnd"); | |
| this.fireEvent("onScrollEnd") | |
| }, | |
| stepThroughDecelerationAnimation: function (r) { | |
| if (!this.decelerating) { | |
| return | |
| } | |
| var t = new Date(); | |
| var m = t - this.lastFrame; | |
| var c = r ? 0 : (Math.round(m / this.options.desiredAnimationFrameRate) - 1); | |
| for (var n = 0; n < c; n++) { | |
| this.stepThroughDecelerationAnimation(true) | |
| } | |
| var q = this.position.x + this.decelerationVelocity.x; | |
| var p = this.position.y + this.decelerationVelocity.y; | |
| if (r) { | |
| this.position.x = q; | |
| this.position.y = p | |
| } else { | |
| this.position = new MooTouch.Point(q, p) | |
| } | |
| this.decelerationVelocity.x *= this.options.decelerationFrictionFactor; | |
| this.decelerationVelocity.y *= this.options.decelerationFrictionFactor; | |
| var u = Math.abs(this.decelerationVelocity.x); | |
| var o = Math.abs(this.decelerationVelocity.y); | |
| if (!r) { | |
| this.fireEvent("onDecelerationVelocityChange", [this.decelerationVelocity]) | |
| } | |
| if (!r && u <= this.options.minVelocity && o <= this.options.minVelocity) { | |
| this.stopDecelerationAnimation(); | |
| return | |
| } | |
| if (!r) { | |
| this.decelerationTimer = this.stepThroughDecelerationAnimation.delay(this.options.desiredAnimationFrameRate, this) | |
| } | |
| var s = new MooTouch.Point(0, 0); | |
| if (q < this.minDecelerationPoint.x) { | |
| s.x = this.minDecelerationPoint.x - q | |
| } else { | |
| if (q > this.maxDecelerationPoint.x) { | |
| s.x = this.maxDecelerationPoint.x - q | |
| } | |
| } | |
| if (p < this.minDecelerationPoint.y) { | |
| s.y = this.minDecelerationPoint.y - p | |
| } else { | |
| if (p > this.maxDecelerationPoint.y) { | |
| s.y = this.maxDecelerationPoint.y - p | |
| } | |
| } | |
| if (s.x != 0) { | |
| if (s.x * this.decelerationVelocity.x <= 0) { | |
| this.decelerationVelocity.x += s.x * this.penetrationDeceleration | |
| } else { | |
| this.decelerationVelocity.x = s.x * this.penetrationAcceleration | |
| } | |
| } | |
| if (s.y != 0) { | |
| if (s.y * this.decelerationVelocity.y <= 0) { | |
| this.decelerationVelocity.y += s.y * this.penetrationDeceleration | |
| } else { | |
| this.decelerationVelocity.y = s.y * this.penetrationAcceleration | |
| } | |
| } | |
| if (!r) { | |
| this.lastFrame = t | |
| } | |
| } | |
| }) | |
| })(document.id); | |
| (function (a) { | |
| MooTouch.ScrollIndicator = new Class({ | |
| Extends: MooTouch.Component, | |
| Exposes: { | |
| width: true, | |
| height: true, | |
| visibility: true | |
| }, | |
| options: { | |
| className: "scrollIndicator", | |
| thickness: 7, | |
| endSize: 3, | |
| type: "horizontal", | |
| elementTopClass: "top", | |
| elementMiddleClass: "middle", | |
| elementEndClass: "end" | |
| }, | |
| _createElement: function () { | |
| var b = new Element("div"); | |
| this.elementTop = (new Element("div", { | |
| "class": this.options.elementTopClass | |
| })).inject(b); | |
| this.elementMiddle = (new Element("div", { | |
| "class": this.options.elementMiddleClass | |
| })).inject(b); | |
| this.elementEnd = (new Element("div", { | |
| "class": this.options.elementEndClass | |
| })).inject(b); | |
| return b | |
| }, | |
| initialize: function () { | |
| this.parent.apply(this, arguments); | |
| if (!this.isElementManipulated) { | |
| this.elementTop = this.element.getElement("." + this.options.elementTopClass); | |
| this.elementMiddle = this.element.getElement("." + this.options.elementMiddleClass); | |
| this.elementEnd = this.element.getElement("." + this.options.elementEndClass) | |
| } | |
| this.element.addClass(this.options.type); | |
| return this | |
| }, | |
| setWidth: function (b) { | |
| if (b != this.width) { | |
| if (MooTouch.isAndroid) { | |
| this.elementEnd.style.webkitTransform = "translate(" + (b - this.options.endSize) + "px,0)"; | |
| this.elementMiddle.style.webkitTransform = "translate(0,0) scale(" + (b - this.options.endSize * 2) + ",1)" | |
| } else { | |
| this.elementEnd.style.webkitTransform = "translate3d(" + (b - this.options.endSize) + "px,0,0)"; | |
| this.elementMiddle.style.webkitTransform = "translate3d(0,0,0) scale(" + (b - this.options.endSize * 2) + ",1)" | |
| } | |
| this._width = b | |
| } | |
| return this | |
| }, | |
| getWidth: function () { | |
| if (!$defined(this._width)) { | |
| this._width = 0 | |
| } | |
| return this._width | |
| }, | |
| setHeight: function (b) { | |
| if (b != this._height) { | |
| if (MooTouch.isAndroid) { | |
| this.elementMiddle.style.webkitTransform = "translate(0,0) scale(1," + (b - this.options.endSize * 2) + ")"; | |
| this.elementEnd.style.webkitTransform = "translate(0," + (b - this.options.endSize) + "px)" | |
| } else { | |
| this.elementMiddle.style.webkitTransform = "translate3d(0,0,0) scale(1," + (b - this.options.endSize * 2) + ")"; | |
| this.elementEnd.style.webkitTransform = "translate3d(0," + (b - this.options.endSize) + "px,0)" | |
| } | |
| this._height = b | |
| } | |
| return this | |
| }, | |
| getHeight: function () { | |
| if (!$defined(this._height)) { | |
| this._height = 0 | |
| } | |
| return this._height | |
| }, | |
| setVisibility: function (b) { | |
| this.element.style.opacity = (b) ? 1 : 0; | |
| this._isVisible = b | |
| } | |
| }) | |
| })(document.id); | |
| (function (a) { | |
| MooTouch.ScrollView = new Class({ | |
| Extends: MooTouch.Component, | |
| Binds: ["_onScroll", "_onScrollStart", "_onDecelerationVelocityChange", "_onScrollEnd"], | |
| options: { | |
| className: "scrollView", | |
| horizontalScrollEnabled: true, | |
| verticalScrollEnabled: true, | |
| minIndicatorLength: 34, | |
| minVelocityToHideScrollIndicators: 0.05, | |
| content: { | |
| element: null, | |
| options: { | |
| className: "scrollContent" | |
| } | |
| }, | |
| horizontalIndicator: { | |
| element: null, | |
| options: { | |
| type: "horizontal" | |
| } | |
| }, | |
| verticalIndicator: { | |
| element: null, | |
| options: { | |
| type: "vertical" | |
| } | |
| } | |
| }, | |
| initialize: function () { | |
| this.parent.apply(this, arguments); | |
| this.options.content.options.horizontalScrollEnabled = this.options.horizontalScrollEnabled; | |
| this.options.content.options.verticalScrollEnabled = this.options.verticalScrollEnabled; | |
| if (this.options.content.element == null) { | |
| this.options.content.element = this.element.getElement("." + this.options.content.options.className) | |
| } | |
| this.scrollContent = new MooTouch.ScrollContent(this.options.content); | |
| if (this.options.horizontalScrollEnabled) { | |
| this.horizontalScrollIndicator = new MooTouch.ScrollIndicator(this.options.horizontalIndicator); | |
| if (this.horizontalScrollIndicator.isElementManipulated) { | |
| a(this.horizontalScrollIndicator).inject(this.element) | |
| } | |
| } | |
| if (this.options.verticalScrollEnabled) { | |
| this.verticalScrollIndicator = new MooTouch.ScrollIndicator(this.options.verticalIndicator); | |
| if (this.verticalScrollIndicator.isElementManipulated) { | |
| a(this.verticalScrollIndicator).inject(this.element) | |
| } | |
| } | |
| this.scrollContent.addEvent("onScroll", this._onScroll); | |
| this.scrollContent.addEvent("onScrollStart", this._onScrollStart); | |
| this.scrollContent.addEvent("onDecelerationVelocityChange", this._onDecelerationVelocityChange); | |
| this.scrollContent.addEvent("onScrollEnd", this._onScrollEnd); | |
| return this | |
| }, | |
| _onScroll: function (b) { | |
| var c = (this.options.horizontalScrollEnabled) ? this.horizontalScrollIndicator.options.endSize * 2 : 1, | |
| i = this.verticalScrollIndicator.options.thickness, | |
| j = this.scrollContent.elementSize.y, | |
| d = this.scrollContent.parentSize.x, | |
| e = this.scrollContent.parentSize.y, | |
| f = this.scrollContent.minPosition.y; | |
| var k = Math.max(this.options.minIndicatorLength, Math.round((e / j) * (e - c))); | |
| var h = d - i - 1; | |
| var g = (b.y / f) * (e - c - k); | |
| if (b.y > 0) { | |
| k = Math.round(Math.max(k - b.y, i)); | |
| g = 1 | |
| } else { | |
| if (b.y < f) { | |
| k = Math.round(Math.max(k - f + b.y, i)); | |
| g = e - k - c | |
| } | |
| } | |
| this.verticalScrollIndicator.position = new MooTouch.Point(h, g); | |
| this.verticalScrollIndicator.height = k | |
| }, | |
| _onScrollStart: function () { | |
| this.showScrollIndicators() | |
| }, | |
| _onScrollEnd: function () { | |
| this.hideScrollIndicators() | |
| }, | |
| _onDecelerationVelocityChange: function (b) { | |
| if (Math.abs(b.y) < this.options.minVelocityToHideScrollIndicators && Math.abs(b.x) < this.options.minVelocityToHideScrollIndicators) { | |
| this.hideScrollIndicators() | |
| } | |
| }, | |
| showScrollIndicators: function () { | |
| if (this.verticalScrollIndicator) { | |
| this.verticalScrollIndicator.setVisibility(true) | |
| } | |
| if (this.horizontalScrollIndicator) { | |
| this.horizontalScrollIndicator.setVisibility(true) | |
| } | |
| }, | |
| hideScrollIndicators: function () { | |
| if (this.verticalScrollIndicator) { | |
| this.verticalScrollIndicator.setVisibility(false) | |
| } | |
| if (this.horizontalScrollIndicator) { | |
| this.horizontalScrollIndicator.setVisibility(false) | |
| } | |
| } | |
| }) | |
| })(document.id); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment