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 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 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