stuff
This commit is contained in:
Martin Donnelly
parent
b68a1ddfba
commit
d2e8a28a71
79
html/feedsv2.html
Normal file
79
html/feedsv2.html
Normal file
@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>
|
||||
Feedmaster
|
||||
</title>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- CSS
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<link rel="stylesheet" href="css/mui.css">
|
||||
|
||||
<link rel="stylesheet" href="css/nprogress.css">
|
||||
<style>
|
||||
.info {
|
||||
border-bottom: 1px solid #bbbbbb;
|
||||
padding-bottom:
|
||||
}
|
||||
|
||||
.entry {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 960px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
|
||||
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
|
||||
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
|
||||
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<meta name="msapplication-TileColor" content="#9f00a7">
|
||||
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="mui-container">
|
||||
<div class="mui-panel">
|
||||
Last update: <span id="lastupdate">x</span>
|
||||
<button id="refresh" class="mui-btn mui-btn-primary mui-btn-raised">Refresh</button>
|
||||
<div id="list" class="u-full-width content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mui-container">
|
||||
<div id="feedcontent" class="mui-panel">
|
||||
</div>
|
||||
</div>
|
||||
<!-- <script type="text/javascript" src="js/zepto.js"></script>
|
||||
<script type="text/javascript" src="js/moment.js"></script>
|
||||
<script type="text/javascript" src="js/ejs.js"></script>-->
|
||||
<script type="text/javascript" src="js/output.min.js"></script>
|
||||
<script type="text/javascript" src="js/fx.js"></script>
|
||||
<script type="text/javascript" src="js/fx_methods.js"></script>
|
||||
<script type="text/javascript" src="js/zprogress.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.unveil.js"></script>
|
||||
<script type="text/javascript" src="js/app.prod.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
146
html/js/app.prod.v2.js
Normal file
146
html/js/app.prod.v2.js
Normal file
@ -0,0 +1,146 @@
|
||||
var APP = {
|
||||
refreshStep: 0,
|
||||
preUrl: '/',
|
||||
|
||||
_storage: {
|
||||
lastupdated: null,
|
||||
feeds: {}
|
||||
},
|
||||
_list : null,
|
||||
_feed : null,
|
||||
|
||||
feeds: ['paleo', 'lifestyle', 'tech','news'],
|
||||
lastUpdated: null,
|
||||
preCache: function() {
|
||||
this._list = new EJS({url: 'ejs/list.ejs'});
|
||||
this._feed = new EJS({
|
||||
url: 'ejs/testcards.ejs'
|
||||
});
|
||||
},
|
||||
init: function() {
|
||||
$('#refresh').on('click', $.proxy(this.refresh, this));
|
||||
console.log('app starting...');
|
||||
this.preCache();
|
||||
this.doLoad();
|
||||
this.getLastUpdateDate();
|
||||
console.log('Last updated: ' + this.lastUpdated);
|
||||
},
|
||||
getLastUpdateDate: function() {
|
||||
var formatted, dt;
|
||||
// this.lastUpdated = localStorage.getItem('lastUpdated') || null;
|
||||
|
||||
if (this.lastUpdated == null)
|
||||
$('#lastupdate').empty().append('Never');
|
||||
else {
|
||||
dt = new Date(this.lastUpdated);
|
||||
formatted = moment(dt).startOf('minute').fromNow();
|
||||
console.log(formatted);
|
||||
$('#lastupdate').empty().append(formatted);
|
||||
}
|
||||
|
||||
},
|
||||
refresh: function() {
|
||||
this.refreshStep = 0;
|
||||
console.log('refresh');
|
||||
console.log(this);
|
||||
console.log('get ' + this.feeds[this.refreshStep]);
|
||||
$('#lastupdate').empty().append('Refreshing...');
|
||||
$.zprogress.start();
|
||||
this.doRefresh();
|
||||
|
||||
},
|
||||
doRefresh: function() {
|
||||
var self = this;
|
||||
if (this.refreshStep < this.feeds.length) {
|
||||
var feedUrl = this.preUrl + this.feeds[this.refreshStep] + '.json';
|
||||
$('#lastupdate').empty().append('Refreshing: ' + this.feeds[this.refreshStep]);
|
||||
$.getJSON(feedUrl, function(data) {
|
||||
console.log(self);
|
||||
|
||||
self.doUpdate(data);
|
||||
});
|
||||
} else {
|
||||
console.log('Done');
|
||||
$.zprogress.inc(0.2);
|
||||
this.doSave();
|
||||
}
|
||||
},
|
||||
doUpdate: function(data) {
|
||||
console.log(this);
|
||||
console.log(data);
|
||||
this._storage.feeds[this.feeds[this.refreshStep]] = data;
|
||||
|
||||
console.log(this._storage);
|
||||
this.refreshStep++;
|
||||
$.zprogress.inc(0.2);
|
||||
this.doRefresh();
|
||||
},
|
||||
doSave: function() {
|
||||
console.log('Saving...');
|
||||
this.lastUpdated = new Date();
|
||||
this._storage.lastupdated = this.lastUpdated;
|
||||
localStorage.setItem('lastUpdated', this.lastUpdated);
|
||||
localStorage.setItem('_storage', JSON.stringify(this._storage));
|
||||
this.getLastUpdateDate();
|
||||
$.zprogress.done(true);
|
||||
},
|
||||
doLoad: function() {
|
||||
|
||||
var _load = localStorage.getItem('_storage');
|
||||
$('#lastupdate').empty().append('Loading...');
|
||||
if (_load != null)
|
||||
this._storage = JSON.parse(_load);
|
||||
else
|
||||
this._storage = {
|
||||
lastupdated: null,
|
||||
feeds: {}
|
||||
};
|
||||
this.lastUpdated = this._storage.lastupdated || null;
|
||||
this.showList();
|
||||
},
|
||||
showList: function() {
|
||||
var output, d = {},
|
||||
list = [];
|
||||
for (var key in this._storage.feeds) {
|
||||
console.log(key);
|
||||
list.push({
|
||||
name: key
|
||||
});
|
||||
}
|
||||
|
||||
d.list = list;
|
||||
|
||||
var output = this._list.render(d);
|
||||
$('#list').empty().append(output);
|
||||
|
||||
for (var key in this._storage.feeds) {
|
||||
$('#' + key).on('click', $.proxy(this.showFeed, this, key));
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
showFeed: function(opt) {
|
||||
var output, d;
|
||||
console.log('show feed ' + opt);
|
||||
$('#feedcontent').empty();
|
||||
d = {
|
||||
d: this._storage.feeds[opt]
|
||||
};
|
||||
var output = this._feed.render(d);
|
||||
|
||||
$('#feedcontent').append(output);
|
||||
$("img").unveil();
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
Zepto(function($) {
|
||||
console.log('Start app');
|
||||
if (typeof(Storage) !== "undefined") {
|
||||
APP.init();
|
||||
} else {
|
||||
// Sorry! No Web Storage support..
|
||||
alert('No local storage');
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user