Skip to content

Instantly share code, notes, and snippets.

@cheeaun
Created March 23, 2010 14:31
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save cheeaun/341230 to your computer and use it in GitHub Desktop.
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
(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")
})
}
})
})
});
(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