danbarber/tube-status-server
1
0
Fork 0
mirror of https://github.com/danbee/tube-status-server synced 2025-03-04 08:39:12 +00:00
Code Issues Releases Wiki Activity

Styling changes. iOS modifications.

Browse Source
This commit is contained in:
Dan Barber 2013-01-28 18:01:04 +00:00
parent b51b392abe
commit 5ea7d26c20
18 changed files with 6535 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/ios/now.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
images/ios/weekend.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 387 B

20
index.html
View File

@ -5,7 +5,9 @@
<meta name="viewport" content="initial-scale=1"> <meta name="viewport" content="initial-scale=1">
<meta content="yes" name="apple-mobile-web-app-capable"> <meta content="yes" name="apple-mobile-web-app-capable">
<link rel="stylesheet" href="stylesheets/main.css" /> <link rel="stylesheet" href="stylesheets/main.css" />
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script> <script type="text/javascript" charset="utf-8" src="javascripts/libs/cordova-2.2.0.js"></script>
<script src="javascripts/libs/TabBar.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/libs/NavigationBar.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/libs/require.js" data-main="javascripts/main"></script> <script src="javascripts/libs/require.js" data-main="javascripts/main"></script>
<!-- iPhone --> <!-- iPhone -->
@ -36,25 +38,13 @@
<body class="loading"> <body class="loading">
<div role="page"> <div id="page" role="page">
<header role="banner">
<h1>Tube Status</h1>
<a href="/" id="refresh" title="Refresh">&#xe000;</a>
</header>
<section role="main"> <section role="main">
<ul id="line-list" class="main-list"> <ul id="line-list" class="main-list" role="list">
</ul> </ul>
</section> </section>
<footer>
<ul>
<li><a href="#" id="now" class="selected icon-time">Now</a></li>
<li><a href="#" id="weekend" class="icon-glass">Weekend</a></li>
</ul>
</footer>
</div> </div>
<div id="loader"> <div id="loader">

16
javascripts/app.js
View File

@ -1,13 +1,23 @@
define(['backbone', define(['backbone',
'mustache', 'mustache',
'collections/lines_now', 'collections/lines',
'views/chrome',
'views/main', 'views/main',
'views/line_list'], 'views/line_list'],
function(Backbone, Mustache, LinesNowCollection, Main, LineList) { function(Backbone, Mustache, LinesCollection, Chrome, Main, LineList) {
return { return {
initialize: function() { initialize: function() {
lines = new LinesNowCollection; window.phonegap = (document.URL.indexOf("http://") == -1);
if (window.phonegap) {
$.getScript("/javascripts/libs/cordova-2.2.0.js");
}
lines = new LinesCollection;
// initialise chrome. this will render appropriate navbar and tabbar for the platform.
chrome = new Chrome({ collection: lines });
main = new Main({ collection: lines }); main = new Main({ collection: lines });
lineList = new LineList({ collection: lines }); lineList = new LineList({ collection: lines });
//lines.url = lines.urls.now; //lines.url = lines.urls.now;

21
javascripts/collections/lines.js Normal file
View File

@ -0,0 +1,21 @@
define(['backbone', 'models/line'], function(Backbone, Line) {
var LinesCollection = Backbone.Collection.extend({
// added callback=? to force jsonp
//url: "http://api.tubeupdates.com/?method=get.status&callback=?",
url: "http://tubefeed.herokuapp.com/now.json?callback=?",
urls: {
now: "http://tubefeed.herokuapp.com/now.json?callback=?",
weekend: "http://tubefeed.herokuapp.com/weekend.json?callback=?"
},
model: Line,
parse: function(data) {
return data.response.lines;
}
});
return LinesCollection;
});

16
javascripts/collections/lines_now.js
View File

@ -1,16 +0,0 @@
define(['backbone', 'models/line'], function(Backbone, Line) {
var LinesNowCollection = Backbone.Collection.extend({
// added callback=? to force jsonp
url: "http://api.tubeupdates.com/?method=get.status&callback=?",
model: Line,
parse: function(data) {
return data.response.lines;
}
});
return LinesNowCollection;
});

16
javascripts/collections/lines_weekend.js
View File

@ -1,16 +0,0 @@
define(['backbone', 'models/line'], function(Backbone, Line) {
var LinesWeekendCollection = Backbone.Collection.extend({
// added callback=? to force jsonp
url: "http://api.tubeupdates.com/?method=get.status&callback=?",
model: Line,
parse: function(data) {
return data.response.lines;
}
});
return LinesWeekendCollection;
});

148
javascripts/libs/NavigationBar.js Normal file
View File

@ -0,0 +1,148 @@
function NavigationBar() {
this.leftButtonCallback = null;
this.rightButtonCallback = null;
}
/**
* Create a navigation bar.
*
* @param style: One of "BlackTransparent", "BlackOpaque", "Black" or "Default". The latter will be used if no style is given.
*/
NavigationBar.prototype.create = function(style, options)
{
options = options || {};
if(!("style" in options))
options.style = style || "Default";
cordova.exec("NavigationBar.create", options);
};
/**
* Must be called before any other method in order to initialize the plugin.
*/
NavigationBar.prototype.init = function()
{
cordova.exec("NavigationBar.init");
};
NavigationBar.prototype.resize = function() {
cordova.exec("NavigationBar.resize");
};
/**
* Assign either title or image to the left navigation bar button, and assign the tap callback
*/
NavigationBar.prototype.setupLeftButton = function(title, image, onselect, options)
{
this.leftButtonCallback = onselect;
cordova.exec("NavigationBar.setupLeftButton", title || "", image || "", options || {});
};
/**
* @param options: May contain the key "animated" (boolean)
*/
NavigationBar.prototype.hideLeftButton = function(options)
{
options = options || {}
if(!("animated" in options))
options.animated = false
cordova.exec("NavigationBar.hideLeftButton", options)
};
NavigationBar.prototype.setLeftButtonTitle = function(title)
{
cordova.exec("NavigationBar.setLeftButtonTitle", title)
};
NavigationBar.prototype.showLeftButton = function(options)
{
options = options || {}
if(!("animated" in options))
options.animated = false
cordova.exec("NavigationBar.showLeftButton", options)
};
/**
* Internal function called by the plugin
*/
NavigationBar.prototype.leftButtonTapped = function()
{
if(typeof(this.leftButtonCallback) === "function")
this.leftButtonCallback()
};
/**
* Assign either title or image to the right navigation bar button, and assign the tap callback
*/
NavigationBar.prototype.setupRightButton = function(title, image, onselect, options)
{
this.rightButtonCallback = onselect;
cordova.exec("NavigationBar.setupRightButton", title || "", image || "", options || {});
};
NavigationBar.prototype.hideRightButton = function(options)
{
options = options || {}
if(!("animated" in options))
options.animated = false
cordova.exec("NavigationBar.hideRightButton", options)
};
NavigationBar.prototype.setRightButtonTitle = function(title)
{
cordova.exec("NavigationBar.setRightButtonTitle", title)
};
NavigationBar.prototype.showRightButton = function(options)
{
options = options || {}
if(!("animated" in options))
options.animated = false
cordova.exec("NavigationBar.showRightButton", options)
};
/**
* Internal function called by the plugin
*/
NavigationBar.prototype.rightButtonTapped = function()
{
if(typeof(this.rightButtonCallback) === "function")
this.rightButtonCallback()
};
NavigationBar.prototype.setTitle = function(title)
{
cordova.exec("NavigationBar.setTitle", title);
};
NavigationBar.prototype.setLogo = function(imageURL)
{
cordova.exec("NavigationBar.setLogo", imageURL);
};
/**
* Shows the navigation bar. Make sure you called create() first.
*/
NavigationBar.prototype.show = function() {
cordova.exec("NavigationBar.show");
};
/**
* Hides the navigation bar. Make sure you called create() first.
*/
NavigationBar.prototype.hide = function() {
cordova.exec("NavigationBar.hide");
};
cordova.addConstructor(function()
{
if(!window.plugins)
window.plugins = {}
window.plugins.navigationBar = new NavigationBar()
});

158
javascripts/libs/TabBar.js Normal file
View File

@ -0,0 +1,158 @@
/*
This code is adapted from the work of:
Created by Michael Nachbaur on 13/04/09.
Copyright 2009 Decaf Ninja Software. All rights reserved.
MIT licensed
API cleaned up and improved by Andreas Sommer (https://github.com/AndiDog/phonegap-ios-tabbar-plugin).
*/
function TabBar() {
this.tag = 0;
this.callbacks = {};
this.selectedItem = null;
}
/**
* Create a native tab bar that can have tab buttons added to it which can respond to events.
*
* @param options Additional options:
* - selectedImageTintColorRgba: Tint color for selected items (defaults to standard light blue), must define the
* color as string e.g. '255,0,0,128' for 50% transparent red. This is only supported on iOS 5 or newer.
* - tintColorRgba: Tint color for the bar itself (value as above)
*/
TabBar.prototype.create = function(options) {
cordova.exec("TabBar.create", options || {});
};
/**
* Create a new tab bar item for use on a previously created tab bar. Use ::showTabBarItems to show the new item on the tab bar.
*
* If the supplied image name is one of the labels listed below, then this method will construct a tab button
* using the standard system buttons. Note that if you use one of the system images, that the \c title you supply will be ignored.
*
* <b>Tab Buttons</b>
* - tabButton:More
* - tabButton:Favorites
* - tabButton:Featured
* - tabButton:TopRated
* - tabButton:Recents
* - tabButton:Contacts
* - tabButton:History
* - tabButton:Bookmarks
* - tabButton:Search
* - tabButton:Downloads
* - tabButton:MostRecent
* - tabButton:MostViewed
* @param {String} name internal name to refer to this tab by
* @param {String} [title] title text to show on the tab, or null if no text should be shown
* @param {String} [image] image filename or internal identifier to show, or null if now image should be shown
* @param {Object} [options] Options for customizing the individual tab item
* - \c badge value to display in the optional circular badge on the item; if null or unspecified, the badge will be hidden
*/
TabBar.prototype.createItem = function(name, label, image, options) {
var tag = this.tag++;
if (options && 'onSelect' in options && typeof(options['onSelect']) == 'function') {
this.callbacks[tag] = {'onSelect':options.onSelect,'name':name};
//delete options.onSelect;
}
cordova.exec("TabBar.createItem", name, label, image, tag, options);
};
/**
* Function to detect currently selected tab bar item
* @see createItem
* @see showItems
*/
TabBar.prototype.getSelectedItem = function() {
return this.selectedItem;
};
/**
* Hide a tab bar. The tab bar has to be created first.
*/
TabBar.prototype.hide = function(animate) {
if (animate === undefined || animate === null)
animate = true;
cordova.exec("TabBar.hide", {animate: animate});
};
/**
* Must be called before any other method in order to initialize the plugin.
*/
TabBar.prototype.init = function()
{
cordova.exec("TabBar.init");
};
/**
* Internal function called when a tab bar item has been selected.
* @param {Number} tag the tag number for the item that has been selected
*/
TabBar.prototype.onItemSelected = function(tag)
{
this.selectedItem = tag;
if (typeof(this.callbacks[tag].onSelect) == 'function')
this.callbacks[tag].onSelect(this.callbacks[tag].name);
};
TabBar.prototype.resize = function() {
cordova.exec("TabBar.resize");
};
/**
* Manually select an individual tab bar item, or nil for deselecting a currently selected tab bar item.
* @param {String} tabName the name of the tab to select, or null if all tabs should be deselected
* @see createItem
* @see showItems
*/
TabBar.prototype.selectItem = function(tab) {
cordova.exec("TabBar.selectItem", tab);
};
/**
* Show a tab bar. The tab bar has to be created first.
* @param {Object} [options] Options indicating how the tab bar should be shown:
* - \c height integer indicating the height of the tab bar (default: \c 49)
* - \c position specifies whether the tab bar will be placed at the \c top or \c bottom of the screen (default: \c bottom)
*/
TabBar.prototype.show = function(options) {
cordova.exec("TabBar.show", options || {});
};
/**
* Show previously created items on the tab bar
* @param {String} arguments... the item names to be shown
* @param {Object} [options] dictionary of options, notable options including:
* - \c animate indicates that the items should animate onto the tab bar
* @see createItem
* @see create
*/
TabBar.prototype.showItems = function() {
var parameters = [ "TabBar.showItems" ];
for (var i = 0; i < arguments.length; i++) {
parameters.push(arguments[i]);
}
cordova.exec.apply(this, parameters);
};
/**
* Update an existing tab bar item to change its badge value.
* @param {String} name internal name used to represent this item when it was created
* @param {Object} options Options for customizing the individual tab item
* - \c badge value to display in the optional circular badge on the item; if null or unspecified, the badge will be hidden
*/
TabBar.prototype.updateItem = function(name, options) {
if (!options) options = {};
cordova.exec("TabBar.updateItem", name, options);
};
cordova.addConstructor(function()
{
if(!window.plugins)
window.plugins = {};
window.plugins.tabBar = new TabBar();
});

6090
javascripts/libs/cordova-2.2.0.js vendored Executable file
View File

File diff suppressed because it is too large Load Diff

9
javascripts/templates/footer.html Normal file
View File

@ -0,0 +1,9 @@
<footer>
<ul>
<li>
<a href="#" id="now" class="selected icon-time">Now</a>
</li><li>
<a href="#" id="weekend" class="icon-glass">Weekend</a>
</li>
</ul>
</footer>

4
javascripts/templates/header.html Normal file
View File

@ -0,0 +1,4 @@
<header role="banner">
<h1>Tube Status</h1>
<a href="/" id="refresh" title="Refresh">&#xe000;</a>
</header>

2
javascripts/templates/line.mustache
View File

@ -1,4 +1,4 @@
<li id="{{ id }}"> <li id="{{ id }}" role="listitem">
<a href="#{{ id }}_messages"> <a href="#{{ id }}_messages">
<span class="name">{{& name }}</span> <span class="name">{{& name }}</span>
{{ #message_count }}<span class="message-count">{{ message_count }}</span>{{ /message_count }} {{ #message_count }}<span class="message-count">{{ message_count }}</span>{{ /message_count }}

25
javascripts/views/chrome.js Normal file
View File

@ -0,0 +1,25 @@
define(['views/ios',
'text!templates/header.html',
'text!templates/footer.html'],
function(iOS, header, footer) {
var Chrome = Backbone.View.extend({
initialize: function() {
if (phonegap && (device.platform == "iOS" || device.platform == "iPhone Simulator")) {
new iOS({ collection: lines });
}
else if (phonegap && device.platform == "Android") {
new Android();
}
else {
// html5 app
$('#page').prepend(header);
$('#page').append(footer);
$('body').addClass('html5');
}
}
});
return Chrome;
});

52
javascripts/views/ios.js Normal file
View File

@ -0,0 +1,52 @@
define(['backbone'],
function(Backbone) {
var iOSView = Backbone.View.extend({
initialize: function() {
var view = this;
var navBar = plugins.navigationBar;
var tabBar = plugins.tabBar;
// Initializating TabBar and NavigationBar
navBar.init();
tabBar.init();
navBar.create();
tabBar.create();
navBar.hideLeftButton();
navBar.hideRightButton();
navBar.setTitle("Tube Status");
["Now", "Weekend"].forEach(function(label) {
tabBar.createItem(label.toLowerCase(), label, "/www/images/ios/"+label.toLowerCase()+".png", {
onSelect: function() {
view.collection.url = view.collection.urls[label.toLowerCase()];
view.collection.fetch();
}
});
});
navBar.showRightButton();
navBar.setupRightButton(
null,
"barButton:Refresh",
function() {
view.collection.fetch();
}
)
navBar.show();
tabBar.show();
tabBar.showItems("now", "tomorrow", "weekend");
}
});
return iOSView;
});

10
stylesheets/_iconfont.scss
View File

@ -1,10 +1,10 @@
@font-face { @font-face {
font-family: 'fontawesome'; font-family: 'fontawesome';
src:url('/fonts/fontawesome.eot'); src:url('../fonts/fontawesome.eot');
src:url('/fonts/fontawesome.eot?#iefix') format('embedded-opentype'), src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
url('/fonts/fontawesome.svg#fontawesome') format('svg'), url('../fonts/fontawesome.svg#fontawesome') format('svg'),
url('/fonts/fontawesome.woff') format('woff'), url('../fonts/fontawesome.woff') format('woff'),
url('/fonts/fontawesome.ttf') format('truetype'); url('../fonts/fontawesome.ttf') format('truetype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }

2
stylesheets/main.css
View File

@ -157,7 +157,7 @@ footer {
font-size: 1.5em; font-size: 1.5em;
margin: 0.1em 0 0.2em; } margin: 0.1em 0 0.2em; }
section[role="main"] { .html5 section[role="main"] {
padding: 2.5em 0 4em; } padding: 2.5em 0 4em; }
ul#line-list { ul#line-list {

5
stylesheets/main.scss
View File

@ -23,7 +23,7 @@ body {
width: 52px; width: 52px;
height: 52px; height: 52px;
margin: -26px 0 0 -26px; margin: -26px 0 0 -26px;
background: black url(/images/loader.gif) center center no-repeat; background: black url(../images/loader.gif) center center no-repeat;
border-radius: 26px; border-radius: 26px;
opacity: 0.7; opacity: 0.7;
display: none; display: none;
@ -112,9 +112,10 @@ footer {
} }
} }
section[role="main"] { .html5 section[role="main"] {
padding: 2.5em 0 4em; padding: 2.5em 0 4em;
} }
ul#line-list { ul#line-list {
list-style: none; list-style: none;
padding: 0; padding: 0;