jeena/FeedMonkey
Archived
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

removed jquery, added new design

Browse source
This commit is contained in:
jeena 2013-08-25 03:54:25 +02:00
parent f262509adb
commit 8d124c01d9
10 changed files with 1053 additions and 23759 deletions
Download patch file Download diff file Expand all files Collapse all files

3370
css/jquery.mobile.css
View file

File diff suppressed because it is too large Load diff

243
css/screen.css
View file

@ -1,37 +1,236 @@
img {
max-width: 100%;
height: auto;
}
#full header *, #full2 header * {
html, body {
margin: 0;
padding: 0;
min-height: 100%;
font-family: FeuraSans, sans-serif;
}
#full header, #full2 header {
border-bottom: 1px solid #aaa;
margin-bottom: 1em;
padding-bottom: 1em;
}
.red { background: #e74c3c; color: #ecf0f1; }
.white { background: #ecf0f1; color: #2c3e50; }
.blue { background: #3498db; color: #ecf0f1; }
.yellow { background: #f1c40f; color: #2c3e50; }
#full h1, #full2 h1 {
font-weight: normal;
font-size: 1.2em;
}
#full h1 a, #full2 h1 a {
a {
outline: none;
text-decoration: none;
}
#list .ui-li-heading {
font-weight: normal;
.red a { color: #ecf0f1; }
.white a { color: #2c3e50; }
.blue a { color: #ecf0f1; }
.yellow a { color: #2c3e50; }
.button {
outline: none;
display: block;
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: none;
padding: 10px;
border-radius: 0;
font-size: 1em;
}
#list .unread .ui-li-heading {
font-weight: bold;
header .button, footer .button {
width: auto;
display: inline-block;
}
.red .button { background: #c0392b; color: #ecf0f1; }
.white .button { background: #bdc3c7; color: #2c3e50; }
.blue .button { background: #2980b9; color: #ecf0f1; }
.yellow .button { background: #f39c12; color: #2c3e50; }
.red .bar .button { background: #e74c3c; color: #ecf0f1; }
.white .bar .button { background: #ecf0f1; color: #2c3e50; }
.blue .bar .button { background: #3498db; color: #ecf0f1; }
.yellow .bar .button { background: #f1c40f; color: #2c3e50; }
.smallogo { text-align: center; margin: 0; padding: 0; }
.smallogo img { width: 50%; }
.count { font-size: 0.8em; padding-top: 0.6em; padding-right: 0.2em; text-shadow: 0 0 2px black; }
button:active, a:active. .button:active {
background: black;
color: white;
}
#login article, #settings article {
padding: 10px 20px;
}
label {
display: none;
}
section {
display: none;
}
section.active {
display: block;
}
section > header {
background: #c0392b;
text-align: left;
padding: 10px;
}
.red .bar { background: #c0392b; }
.white .bar { background: #bdc3c7; }
.blue .bar { background: #2980b9; }
.yellow .bar { background: #f39c12; }
section > header h1 {
margin: 0;
padding: 0;
text-align: center;
font-weight: lighter;
}
.bar {
margin: 0;
padding: 10px;
display: block;
overflow: auto;
}
section > footer {
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
canvas {
width: 80px;
height: 40px;
float: right;
}
#list ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#list article {
padding-bottom: 70px;
}
#list p {
margin: 0;
padding: 0;
font-size: 0.8em;
}
#list p {
font-weight: normal;
text-overflow: ellipsis;
display: block;
white-space: nowrap;
overflow: hidden;
}
#list h2 {
margin: 0;
padding: 0;
font-weight: normal;
font-size: 1.1em;
}
#list li {
position: relative;
}
#list li:after {
content: "›";
position: absolute;
right: 10px;
top: 0.1em;
font-weight: 100;
font-size: 3em;
font-family: "Open Sans";
}
#list li > a {
display: block;
padding: 5px 25px 5px 10px;
text-decoration: none;
outline: none;
}
#list .unread h2 {
font-weight: normal;
}
#full > article {
padding: 0 10px;
}
#full h1 {
font-size: 1.3em;
font-weight: normal;
margin: 0;
padding: 0;
}
#full h1 a {
text-decoration: none;
}
#full blockquote {
margin: 0;
padding: 0 1em;
font-style: italic;
}
#full .article a {
text-decoration: underline;
}
#settings ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
#settings li {
margin-bottom: 10px;
}
#settings ul a.color-red {
background: #e74c3c;
border: 20px solid #c0392b;
border-width: 1px 20px 1px 1px;
color: #ecf0f1;
}
#settings ul a.color-white {
background: #ecf0f1;
border: 20px solid #bdc3c7;
border-width: 1px 20px 1px 1px;
color: #2c3e50;
}
#settings ul a.color-blue {
background: #3498db;
border: 20px solid #2980b9;
border-width: 1px 20px 1px 1px;
color: #ecf0f1;
}
#settings ul a.color-yellow {
background: #f1c40f;
border: 20px solid #f39c12;
border-width: 1px 20px 1px 1px;
color: #2c3e50;
}

128
index.html
View file

@ -7,85 +7,87 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>FeedMonkey</title>
<link rel="stylesheet" href="css/jquery.mobile.css" />
<link rel="stylesheet" href="css/screen.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile.js"></script>
<script src="js/App.js"></script>
<script src="js/TinyTinyRSS.js"></script>
<script src="js/Login.js"></script>
<script src="js/application.js"></script>
<script src="js/Login.js"></script>
<script src="js/jester.js"></script>
</head>
<body>
<div data-role="page" id="list">
<div data-theme="a" data-role="header">
<a data-role="button" href="#list" data-icon="refresh" data-iconpos="right" class="ui-btn-left" id="reload">
Reload
</a>
<h3>
FeedMonkey
</h3>
<span class="ui-btn-right count" data-theme="a">0 / 0</span>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="false">
<li><a href="#full">Loading ...</a></li>
</ul>
</div>
</div>
<section id="list" class="active">
<article>
<ul></ul>
</article>
<footer class="bar">
<a class="button" href="#reload">Reload</a>
<a class="button" href="#settings">Settings</a>
<canvas></canvas>
</footer>
</section>
<div data-role="page" id="login" data-close-btn="none">
<div data-theme="a" data-role="header" data-close-btn="none">
<h3>
Please log in
</h3>
</div>
<div data-role="content">
<form>
<div>
<p class="smallogo"><img src="img/splash.png" alt=""></p>
<section id="settings">
<header class="bar">
<a class="button" href="#list">Back</a>
</header>
<article>
<ul>
<li><a href="#logout" class="button">Log out</a></li>
<li><a href="#reset-info" class="button">View those info bubbles again</a></li>
<li><a href="#color-white" class="color-white button">White colors</a></li>
<li><a href="#color-blue" class="color-blue button">Blue colors</a></li>
<li><a href="#color-yellow" class="color-yellow button">Yellow colors</a></li>
<li><a href="#color-red" class="color-red button">Red colors (default)</a></li>
</ul>
</article>
</section>
<label for="url" class="ui-hidden-accessible">URL:</label>
<input type="text" name="url" id="url" value="" placeholder="http://example.com/tt-rss/" data-theme="a" />
<section id="login">
<header class="bar">
<h1>Please log in</h1>
</header>
<article>
<form>
<p class="smallogo">
<img src="img/splash.png" alt="Logo, an ape head">
</p>
<p>
<label for="url">URL:</label>
<input class="button" type="text" name="url" id="url" value="" placeholder="http://example.com/tt-rss/" />
</p>
<p>
<label for="un">Username:</label>
<input class="button" type="text" name="user" id="un" value="" placeholder="username" />
</p>
<p>
<label for="pw">Password:</label>
<input class="button" type="password" name="pass" id="pw" value="" placeholder="password" />
</p>
<p>
<button class="button" type="submit">Sign in</button>
</p>
</form>
</article>
</section>
<label for="un" class="ui-hidden-accessible">Username:</label>
<input type="text" name="user" id="un" value="" placeholder="username" data-theme="a" />
<label for="pw" class="ui-hidden-accessible">Password:</label>
<input type="password" name="pass" id="pw" value="" placeholder="password" data-theme="a" />
<button type="submit" data-theme="b">Sign in</button>
</div>
</form>
</div>
</div>
<div data-role="page" id="full">
<div data-theme="a" data-role="header">
<a data-role="button" data-transition="slide" data-direction="reverse" href="#list"
data-icon="home" data-iconpos="left" class="ui-btn-left back">
List
</a>
<h3 class="feed_title"></h3>
<span class="ui-btn-right count" data-theme="a">0 / 0</span>
</div>
<div data-role="content">
<section id="full">
<header class="bar">
<a class="button" href="#list">Back</a>
<a class="button" href="#unread">Set unread</a>
<canvas></canvas>
</header>
<article>
<header>
<p><span class="feed_title"></span> <span class="author"></span></p>
<h1><a class="title" href="" target="_blank"></a></h1>
<p><timedate class="date"></timedate></p>
</header>
<article class="article"></article>
</div>
<div class="article"></div>
<article>
</section>
<div data-role="popup" id="popup" class="ui-content">
<p><span>✔</span> set unread</p>
</div>
</div>
<script src="js/application.js"></script>
</body>
</html>

183
js/App.js
View file

@ -2,49 +2,98 @@
function App() {
this.login = new Login(this);
this.currentIndex = -1;
this.page = 2;
var color = localStorage.color;
if(!color) color = "red";
this.setColor(color);
var _this = this;
$("#reload").on("vclick", function() {
$(this).removeClass('ui-btn-active ui-focus');
_this.reload();
jester($("#full")).flick(function(touches, direction) {
if(direction == "left") _this.showNext();
else _this.showPrevious();
});
$("#full").bind("swipeleft", this.showNext.bind(this));
$("#full").bind("swiperight", this.showPrevious.bind(this));
$("#full").bind("taphold", this.setCurrentUnread.bind(this));
window.onhashchange = function(e) {
// do not reload page
e.preventDefault();
e.stopPropagation();
$(".back").on("vclick", this.setCurrentRead.bind(this));
var url = window.location.hash;
var _this = this;
var aop = function(event, ui) { setTimeout(function() { $("#popup").popup("close") }, 2000) };
$("#popup").popup({ afteropen: aop});
if(url == "#list") {
_this.changeToPage("#list");
} else if(url == "#reload") {
_this.reload();
} else if(url == "#settings") {
_this.changeToPage("#settings");
} else if(url.indexOf("#color-") == 0) {
var color = url.replace("#color-", "");
_this.setColor(color);
} else if(url.indexOf("#full-") == 0) {
var i = parseInt(url.replace("#full-", ""), 10);
_this.showFull(_this.unread_articles[i]);
} else if(url == "#unread") {
_this.setCurrentUnread();
}
}
};
App.prototype.authenticate = function() {
};
App.prototype.toString = function() {
return "App";
};
App.prototype.after_login = function() {
$.mobile.changePage($("#list"));
this.changeToPage("#list");
this.ttrss = new TinyTinyRSS(this, localStorage.server_url, localStorage.session_id);
this.reload();
};
App.prototype.changeToPage = function(page) {
// FIXME
var active = $(".active");
if(active.id == "list") {
this.saveScrollTop = document.body.scrollTop;
}
if(page == "#list") {
document.body.scrollTop = this.saveScrollTop;
} else {
window.scroll(0,0);
}
active.removeClass("active");
$(page).addClass("active");
};
App.prototype.setColor = function(color) {
localStorage.color = color;
document.body.className = "";
document.body.addClass(color);
this.updatePieChart();
};
App.prototype.reload = function() {
this.unread_articles = [];
this.ttrss.getUnreadFeeds(this.gotUnreadFeeds.bind(this));
};
App.prototype.gotUnreadFeeds = function(new_articles) {
if(new_articles == null) { // on error load the saved unread articles.
this.unread_articles = JSON.parse(localStorage.unread_articles);
var old_articles = localStorage.unread_articles;
if(old_articles) {
this.unread_articles = JSON.parse(old_articles);
}
this.populateList();
} else {
this.unread_articles = this.unread_articles.concat(new_articles);
if(new_articles.length > 0) {
this.ttrss.getUnreadFeeds(this.gotUnreadFeeds.bind(this), this.unread_articles.length);
} else {
@ -55,62 +104,97 @@ App.prototype.gotUnreadFeeds = function(new_articles) {
};
App.prototype.populateList = function() {
var ul = $("#list ul");
var html_str = "";
for (var i = 0; i < this.unread_articles.length; i++) {
var article = this.unread_articles[i];
html_str += "<li"+ (article.unread ? " class='unread'" : "") +"><a href='#full-"+i+"'><p class='ui-li-desc'><strong>" + article.feed_title + "</strong></p><h3 class='ui-li-heading'>" + article.title + "</h3><p class='ui-li-desc'>" + article.excerpt + "</p></a></li>";
html_str += "<li"+ (article.unread ? " class='unread'" : "") +">";
html_str += "<a href='#full-"+i+"'>";
html_str += "<p class='title'>";
html_str += "<strong>" + article.feed_title + "</strong>";
html_str += "</p>";
html_str += "<h2>" + article.title + "</h2>";
html_str += "<p class='excerpt'>" + article.excerpt + "</p>";
html_str += "</a></li>";
}
$("#list ul").innerHTML = html_str;
ul.html(html_str);
ul.listview("refresh");
$(".count").html(this.unread_articles.length + " / " + this.unread_articles.length);
//$(".count").button("refresh");
this.updatePieChart();
};
App.prototype.updateList = function() {
var unread = 0;
var _this = this;
$("#list ul li").each(function(i, o) {
if(!_this.unread_articles[i].unread) $(this).removeClass("unread");
$$("#list ul li").forEach(function(o, i) {
if(!this.unread_articles[i].unread) o.removeClass("unread");
else {
unread++;
$(this).addClass("unread");
o.addClass("unread");
}
});
}, this);
//$("#list ul").listview("refresh");
this.updatePieChart();
};
$(".count").html(unread + " / " + this.unread_articles.length);
//$(".count").button("refresh");
App.prototype.updatePieChart = function(all, unread) {
var all = this.unread_articles.length;
var unread = 0;
for (var i = 0; i < all; i++) {
if(this.unread_articles[i].unread) unread++;
};
var a = 100 / all * unread;
var b = 100 / all * (all - unread);
var bg = window.getComputedStyle($("body"), null).backgroundColor;
var fg = window.getComputedStyle($(".bar"), null).backgroundColor;
var myColor = [bg, fg];
var data = [a, b];
$$("canvas").forEach(function(canvas) {
var ctx = canvas.getContext("2d");
var lastend = 0;
var myTotal = 0;
for(var e = 0; e < data.length; e++) myTotal += data[e];
for (var i = 0; i < data.length; i++) {
ctx.fillStyle = myColor[i];
ctx.beginPath();
ctx.moveTo(canvas.width/2, canvas.height/2);
ctx.arc(canvas.width/2, canvas.height/2, canvas.height/2, lastend, lastend+(Math.PI*2*(data[i]/myTotal)), false);
ctx.lineTo(canvas.width/2, canvas.height/2);
ctx.fill();
lastend += Math.PI*2*(data[i]/myTotal);
}
})
};
App.prototype.showFull = function(article, slide_back) {
this.changeToPage("#full");
this.currentIndex = this.unread_articles.indexOf(article);
var page_id = "#full";
$(page_id + " .date").html("");
$(page_id + " .title").html("");
$(page_id + " .title").attr("href", "");
$(page_id + " .title").attr("title", "");
$(page_id + " .feed_title").html("");
$(page_id + " .author").html("");
$(page_id + " .article").html("");
$(page_id + " .date").innerHTML = (new Date(parseInt(article.updated, 10) * 1000)).toLocaleString();
var title = $(page_id + " .title");
title.innerHTML = article.title;
title.href = article.link;
$(page_id + " .feed_title").innerHTML = article.feed_title;
$(page_id + " .date").html((new Date(parseInt(article.updated, 10) * 1000)).toLocaleString());
$(page_id + " .title").html(article.title);
$(page_id + " .title").prop("href", article.link);
$(page_id + " .title").prop("title", article.link);
$(page_id + " .feed_title").html(article.feed_title);
if(article.author && article.author.length > 0)
$(page_id + " .author").html("&ndash; " + article.author);
$(page_id + " .article").html(article.content);
$(page_id + " .author").innerHTML = "&ndash; " + article.author;
$.mobile.changePage($(page_id), { transition: "slide", reverse: slide_back });
$(page_id + " .article").innerHTML = article.content;
};
App.prototype.showNext = function() {
@ -152,11 +236,10 @@ App.prototype.setCurrentUnread = function() {
article.unread = true;
article.set_unread = true;
this.updateList();
$("#popup").popup("open");
var _this = this;
setTimeout(function() { _this.ttrss.setArticleUnread(article.id); }, 100);
};
App.prototype.goToList = function() {
$.mobile.changePage("#list", {transition: "slide", reverse: true});
};
this.changeToPage("#list");
};

14
js/Login.js
View file

@ -17,14 +17,18 @@ Login.prototype.is_logged_in = function() {
};
Login.prototype.log_in = function() {
$.mobile.changePage("#login", { role: "dialog", transition: "flip", "close-btn": "none" });
$("#login form").on('submit', this.authenticate.bind(this));
this.app.changeToPage("#login");
$("#login form").addEventListener('submit', this.authenticate.bind(this));
};
Login.prototype.authenticate = function(e) {
var server_url = $(e.target).find("#url").val();
var user = $(e.target).find("#un").val();
var password = $(e.target).find("#pw").val();
// do not reload page
e.preventDefault();
e.stopPropagation();
var server_url = $("#url").value;
var user = $("#un").value;
var password = $("#pw").value;
if(!this.onLine()) {
alert("You need to be on line to log in to your server.");

4
js/TinyTinyRSS.js
View file

@ -48,7 +48,6 @@ TinyTinyRSS.prototype.doOperation = function(operation, new_options, callback) {
var xhr = new XMLHttpRequest({mozSystem: true});
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
$.mobile.loading("hide");
if(xhr.status == 200) {
if(callback)
callback(JSON.parse(xhr.responseText).content);
@ -61,7 +60,6 @@ TinyTinyRSS.prototype.doOperation = function(operation, new_options, callback) {
}
xhr.open("POST", url, true);
xhr.send(JSON.stringify(options));
$.mobile.loading("show");
}
TinyTinyRSS.prototype.getUnreadFeeds = function(callback, skip) {
@ -122,7 +120,6 @@ TinyTinyRSS.login = function(server_url, user, password, callback) {
var xhr = new XMLHttpRequest({mozSystem: true});
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
$.mobile.loading("hide");
if(xhr.status == 200) {
callback(JSON.parse(xhr.responseText).content)
} else {
@ -132,5 +129,4 @@ TinyTinyRSS.login = function(server_url, user, password, callback) {
}
xhr.open("POST", url, true);
xhr.send(JSON.stringify(options));
$.mobile.loading("show");
}

53
js/application.js
View file

@ -5,35 +5,34 @@ function debug(obj) {
alert(obj)
}
// Handle login stuff if needed
$(document).on("pageshow", function() {
if(!window.app) window.app = new App();
function $(obj) {
if(typeof obj == "string") return document.querySelector(obj);
else return obj;
}
function $$(obj) {
if(typeof obj == "string") return document.querySelectorAll(obj);
else return new NodeList(obj);
}
Object.getOwnPropertyNames(Array.prototype).forEach(function(methodName) {
NodeList.prototype[methodName] = Array.prototype[methodName];
});
// Listen for any attempts to call changePage().
$(document).bind( "pagebeforechange", function( e, data ) {
Node.prototype.hasClass = function(cls) {
return this.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
};
// We only want to handle changePage() calls where the caller is
// asking us to load a page by URL.
if ( typeof data.toPage === "string" ) {
Node.prototype.addClass = function(cls) {
if (!this.hasClass(cls)) this.className += " " + cls;
};
// We are being asked to load a page by URL, but we only
// want to handle URLs that request the data for a specific
// category.
var u = $.mobile.path.parseUrl( data.toPage ),
re = /^#full-/;
if ( u.hash.search(re) !== -1 ) {
// We're being asked to display the items for a specific category.
// Call our internal method that builds the content for the category
// on the fly based on our in-memory category data structure.
var i = parseInt(u.hash.split("-")[1], 10);
app.showFull(app.unread_articles[i], false);
// Make sure to tell changePage() we've handled this call so it doesn't
// have to do anything.
e.preventDefault();
}
Node.prototype.removeClass = function(cls) {
if (this.hasClass(cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
this.className = this.className.replace(reg,' ');
}
});
};
if(!window.app) window.app = new App();

599
js/jester.js Normal file
View file

@ -0,0 +1,599 @@
/*
* Jester JavaScript Library v0.3
* http://github.com/plainview/Jester
*
* Easy JavaScript gesture recognition.
*
* Released under MIT License
*
* Copyright (C) 2011 by Scott Seaward
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
(function(container, undefined) {
var Jester = container.Jester = {
cache : {},
cacheId : "Jester" + (new Date()).getTime(),
guid : 0,
// The Jester constructor
Watcher : function(element, options) {
var that = this,
cacheId = Jester.cacheId,
cache = Jester.cache,
gestures = "swipe flick tap doubletap pinchnarrow pinchwiden pinchend";
if(!element || !element.nodeType) {
throw new TypeError("Jester: no element given.");
}
// if this element hasn't had Jester called on it before,
// set it up with a cache entry and give it the expando
if(typeof element[cacheId] !== "number") {
element[cacheId] = Jester.guid;
Jester.guid++;
}
var elementId = element[cacheId];
if(!(elementId in cache)) {
Jester.cache[elementId] = {};
}
var elementCache = Jester.cache[elementId];
if(!("options" in elementCache)) {
elementCache.options = {};
}
options = options || elementCache.options || {};
// cache the option values for reuse or, if options already
// exist for this element, replace those that have been
// specified
if(elementCache.options !== options) {
for(var prop in options) {
if(elementCache.options[prop]) {
if(elementCache.options[prop] !== options[prop]) {
elementCache.options[prop] = options[prop];
}
}
else {
elementCache.options[prop] = options[prop];
}
}
}
if(!("eventSet" in elementCache) || !(elementCache.eventSet instanceof Jester.EventSet)) {
elementCache.eventSet = new Jester.EventSet(element);
}
if(!elementCache.touchMonitor) {
elementCache.touchMonitor = new Jester.TouchMonitor(element);
}
var events = elementCache.eventSet;
var touches = elementCache.touchMonitor;
this.id = element[cacheId];
this.bind = function(evt, fn) {
if(evt && typeof evt === "string" && typeof fn === "function") {
events.register(evt, fn);
}
return this;
};
// create shortcut bind methods for all gestures
gestures.split(" ").forEach(function(gesture) {
this[gesture] = function(fn) {
return this.bind(gesture, fn);
};
}, that);
this.start = function(fn) {
return this.bind("start", fn);
};
this.during = function(fn) {
return this.bind("during", fn);
};
this.end = function(fn) {
return this.bind("end", fn);
};
// wrapper to cover all three pinch methods
this.pinch = function(fns) {
if(typeof fns !== "undefined") {
// if its just a function it gets assigned to pinchend
if(typeof fns === "function") {
that.pinchend(fns);
}
else if(typeof fns === "object") {
var method;
"narrow widen end".split(" ").forEach(function(eventExt) {
method = "pinch" + eventExt;
if(typeof fns[eventExt] === "function") {
that[method](fns[eventExt]);
}
});
}
}
};
this.halt = function() {
touches.stopListening();
events.clear();
delete elementCache.eventSet;
delete elementCache.touchMonitor;
};
},
EventSet : function(element) {
// all event names and their associated functions in an array i.e. "swipe" : [fn1, fn2, fn2]
var eventsTable = {};
this.eventsTable = eventsTable;
// register a handler with an event
this.register = function(eventName, fn) {
// if the event exists and has handlers attached to it, add this one to the array of them
if(eventsTable[eventName] && eventsTable[eventName].push) {
// make sure multiple copies of the same handler aren't inserted
if(!~eventsTable[eventName].indexOf(fn)) {
eventsTable[eventName].push(fn);
}
}
else {
// create a new array bound to the event containing only the handler passed in
eventsTable[eventName] = [fn];
}
};
this.release = function(eventName, fn) {
if(typeof eventName === "undefined") return;
// if a handler hasn't been specified, remove all handlers
if(typeof fn === "undefined") {
for(var handlers in eventsTable.eventName) {
delete eventsTable.eventName[handlers];
}
}
else {
// pull the given handler from the given event
if(eventsTable[eventName] && ~eventsTable[eventName].indexOf(fn))
{
eventsTable[eventName].splice(eventsTable[eventName].indexOf(fn), 1);
}
}
// if the event has no more handlers registered to it, get rid of the event completely
if(eventsTable[eventName] && eventsTable[eventName].length === 0) {
delete eventsTable[eventName];
}
};
// completely remove all events and their handlers
this.clear = function() {
var events;
for(events in eventsTable) {
delete eventsTable[events];
}
};
// get all the handlers associated with an event
// return an empty array if nothing is registered with the given event name
this.getHandlers = function(eventName) {
if(eventsTable[eventName] && eventsTable[eventName].length) {
return eventsTable[eventName];
}
else {
return [];
}
};
// inject an array of handlers into the event table for the given event
// this will klobber all current handlers associated with the event
this.setHandlers = function(eventName, handlers) {
eventsTable[eventName] = handlers;
};
// execute all handlers associated with an event, passing each handler the arguments provided after the event's name.
this.execute = function(eventName) {
if(typeof eventName === "undefined") return;
// if the event asked for exists in the events table
if(eventsTable[eventName] && eventsTable[eventName].length) {
// get the arguments sent to the function
var args = Array.prototype.slice.call(arguments, 1);
// iterate throuh all the handlers
for(var i = 0; i < eventsTable[eventName].length; i++) {
// check current handler is a function
if(typeof eventsTable[eventName][i] === "function") {
// execute handler with the provided arguments
eventsTable[eventName][i].apply(element, args);
}
}
}
};
},
TouchMonitor : function(element)
{
var cacheId = Jester.cacheId,
elementId = element[cacheId],
cache = Jester.cache,
elementCache = cache[elementId],
opts = elementCache.options;
opts.move = opts.move || {};
opts.scale = opts.scale || {};
opts.tapDistance = opts.tapDistance || 0;
opts.tapTime = opts.tapTime || 20;
opts.doubleTapTime = opts.doubleTapTime || 300;
opts.swipeDistance = opts.swipeDistance || 200;
opts.flickTime = opts.flickTime || 300;
opts.flickDistance = opts.flickDistance || 200;
opts.deadX = opts.deadX || 0;
opts.deadY = opts.deadY || 0;
if(opts.capture !== false) opts.capture = true;
if(typeof opts.preventDefault !== "undefined" && opts.preventDefault !== false) opts.preventDefault = true;
if(typeof opts.preventDefault !== "undefined" && opts.stopPropagation !== false) opts.stopPropagation = true;
var eventSet = elementCache.eventSet;
var touches;
var previousTapTime = 0;
var touchStart = function(evt) {
touches = new Jester.TouchGroup(evt);
eventSet.execute("start", touches, evt);
if(opts.preventDefault) evt.preventDefault();
if(opts.stopPropagation) evt.stopPropagation();
};
var touchMove = function(evt) {
touches.update(evt);
eventSet.execute("during", touches, evt);
if(opts.preventDefault) evt.preventDefault();
if(opts.stopPropagation) evt.stopPropagation();
if(touches.numTouches() == 2) {
// pinchnarrow
if(touches.delta.scale() < 0.0) {
eventSet.execute("pinchnarrow", touches);
}
// pinchwiden
else if(touches.delta.scale() > 0.0) {
eventSet.execute("pinchwiden", touches);
}
}
};
var touchEnd = function(evt) {
var swipeDirection;
eventSet.execute("end", touches, evt);
if(opts.preventDefault) evt.preventDefault();
if(opts.stopPropagation) evt.stopPropagation();
if(touches.numTouches() == 1) {
// tap
if(touches.touch(0).total.x() <= opts.tapDistance && touches.touch(0).total.y() <= opts.tapDistance && touches.touch(0).total.time() < opts.tapTime) {
eventSet.execute("tap", touches);
}
// doubletap
if(touches.touch(0).total.time() < opts.tapTime) {
var now = (new Date()).getTime();
if(now - previousTapTime <= opts.doubleTapTime) {
eventSet.execute("doubletap", touches);
}
previousTapTime = now;
}
// swipe left/right
if(Math.abs(touches.touch(0).total.x()) >= opts.swipeDistance) {
swipeDirection = touches.touch(0).total.x() < 0 ? "left" : "right";
eventSet.execute("swipe", touches, swipeDirection);
}
// swipe up/down
if(Math.abs(touches.touch(0).total.y()) >= opts.swipeDistance) {
swipeDirection = touches.touch(0).total.y() < 0 ? "up" : "down";
eventSet.execute("swipe", touches, swipeDirection);
}
// flick
if(Math.abs(touches.touch(0).total.x()) >= opts.flickDistance && touches.touch(0).total.time() <= opts.flickTime) {
var flickDirection = touches.touch(0).total.x() < 0 ? "left" : "right";
eventSet.execute("flick", touches, flickDirection);
}
}
else if(touches.numTouches() == 2) {
// pinchend
if(touches.current.scale() !== 1.0) {
var pinchDirection = touches.current.scale() < 1.0 ? "narrowed" : "widened";
eventSet.execute("pinchend", touches, pinchDirection);
}
}
};
var stopListening = function() {
element.removeEventListener("touchstart", touchStart, opts.capture);
element.removeEventListener("touchmove", touchMove, opts.capture);
element.removeEventListener("touchend", touchEnd, opts.capture);
};
element.addEventListener("touchstart", touchStart, opts.capture);
element.addEventListener("touchmove", touchMove, opts.capture);
element.addEventListener("touchend", touchEnd, opts.capture);
return {
stopListening: stopListening
};
},
TouchGroup : function(event) {
var that = this;
var numTouches = event.touches.length;
var midpointX = 0;
var midpointY = 0;
var scale = event.scale;
var prevScale = scale;
var deltaScale = scale;
for(var i = 0; i < numTouches; i++) {
this["touch" + i] = new Jester.Touch(event.touches[i].pageX, event.touches[i].pageY);
midpointX = event.touches[i].pageX;
midpointY = event.touches[i].pageY;
}
function getNumTouches() {
return numTouches;
}
function getTouch(num) {
return that["touch" + num];
}
function getMidPointX() {
return midpointX;
}
function getMidPointY() {
return midpointY;
}
function getScale() {
return scale;
}
function getDeltaScale() {
return deltaScale;
}
function updateTouches(event) {
var mpX = 0;
var mpY = 0;
for(var i = 0; i < event.touches.length; i++) {
if(i < numTouches) {
that["touch" + i].update(event.touches[i].pageX, event.touches[i].pageY);
mpX += event.touches[i].pageX;
mpY += event.touches[i].pageY;
}
}
midpointX = mpX / numTouches;
midpointY = mpY / numTouches;
prevScale = scale;
scale = event.scale;
deltaScale = scale - prevScale;
}
return {
numTouches: getNumTouches,
touch: getTouch,
current: {
scale: getScale,
midX: getMidPointX,
midY: getMidPointY
},
delta: {
scale: getDeltaScale
},
update: updateTouches
};
},
Touch : function(_startX, _startY) {
var startX = _startX,
startY = _startY,
startTime = now(),
currentX = startX,
currentY = startY,
currentTime = startTime,
currentSpeedX = 0,
currentSpeedY = 0,
prevX = startX,
prevY = startX,
prevTime = startTime,
prevSpeedX = 0,
prevSpeedY = 0,
deltaX = 0,
deltaY = 0,
deltaTime = 0,
deltaSpeedX = 0,
deltaSpeedY = 0,
totalX = 0,
totalY = 0,
totalTime = 0;
// position getters
function getStartX() {
return startX;
}
function getStartY() {
return startY;
}
function getCurrentX() {
return currentX;
}
function getCurrentY() {
return currentY;
}
function getPrevX() {
return prevX;
}
function getPrevY() {
return prevY;
}
function getDeltaX() {
return deltaX;
}
function getDeltaY() {
return deltaY;
}
function getTotalX() {
return totalX;
}
function getTotalY() {
return totalY;
}
// time getters
function now() {
return (new Date()).getTime();
}
function getStartTime() {
return startTime;
}
function getCurrentTime() {
return currentTime;
}
function getPrevTime() {
return prevTime;
}
function getDeltaTime() {
return deltaTime;
}
function getTotalTime() {
return totalTime;
}
// speed getters
function getCurrentSpeedX() {
return currentSpeedX;
}
function getCurrentSpeedY() {
return currentSpeedY;
}
function getPrevSpeedX() {
return prevSpeedX;
}
function getPrevSpeedY() {
return prevSpeedY;
}
function getDeltaSpeedX() {
return deltaSpeedX;
}
function getDeltaSpeedY() {
return deltaSpeedY;
}
return {
start: {
x: getStartX,
y: getStartY,
speedX: 0,
speedY: 0,
time: getStartTime
},
current: {
x: getCurrentX,
y: getCurrentY,
time: getCurrentTime,
speedX: getCurrentSpeedX,
speedY: getCurrentSpeedY
},
prev: {
x: getPrevX,
y: getPrevY,
time: getPrevTime,
speedX: getPrevSpeedX,
speedY: getPrevSpeedY
},
delta: {
x: getDeltaX,
y: getDeltaY,
speedX: getDeltaSpeedX,
speedY: getDeltaSpeedY,
time: getDeltaTime
},
total: {
x: getTotalX,
y: getTotalY,
time: getTotalTime
},
update: function(_x, _y) {
prevX = currentX;
prevY = currentY;
currentX = _x;
currentY = _y;
deltaX = currentX - prevX;
deltaY = currentY - prevY;
totalX = currentX - startX;
totalY = currentY - startY;
prevTime = currentTime;
currentTime = now();
deltaTime = currentTime - prevTime;
totalTime = currentTime - startTime;
prevSpeedX = currentSpeedX;
prevSpeedY = currentSpeedY;
currentSpeedX = deltaX / (deltaTime/1000);
currentSpeedY = deltaY / (deltaTime/1000);
deltaSpeedX = currentSpeedX - prevSpeedX;
deltaSpeedY = currentSpeedY - prevSpeedY;
}
};
}
};
container.jester = function(el, opts) {
return new Jester.Watcher(el, opts);
};
}(window));

9003
js/jquery.js vendored
View file

File diff suppressed because it is too large Load diff

11215
js/jquery.mobile.js
View file

File diff suppressed because it is too large Load diff