{{ message }}
forked from petele/WebApp-CodeLab
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathapp.js
More file actions
executable file
·433 lines (356 loc) · 12.1 KB
/
Copy pathapp.js
File metadata and controls
executable file
·433 lines (356 loc) · 12.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
var wReader = angular.module('wReader', ['wReader.filters']).
config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
}]);
// config(['$routeProvider', function($routeProvider) {
// //$routeProvider.when('/view1', {template: 'partials/partial1.html', controller: MyCtrl1});
// //$routeProvider.when('/view2', {template: 'partials/partial2.html', controller: MyCtrl2});
// $routeProvider.otherwise({redirectTo: '/'});
// }]);
// wReader.factory('itemsService', function() {
// var items = [];
// return {
// addItem: function(item) {
// items.push(item);
// }
// };
// });
// Create or open the data store where objects are stored for offline use
var store = new Lawnchair({
name: 'entries',
record: 'entry',
adapter: 'indexed-db'
}, function() {
//TODO: this should probably go in the item store
this.toggleRead = function(key, value) {
this.get(key, function(entry) {
entry.read = value;
this.save(entry);
});
};
//TODO: this should probably go in the item store
this.toggleStar = function(key, value) {
this.get(key, function(entry) {
entry.starred = value;
this.save(entry);
});
};
});
function Item() {
this.read = false;
this.starred = false;
this.selected = false;
this.item_id = null;
this.title = null;
this.pub_name = null;
this.pub_author = null;
this.pub_date = new Date(0);
this.short_desc = null;
this.content = null;
this.feed_link = null;
this.item_link = null;
}
function DataController($scope, $http, $filter) {
$scope.items = [];
$scope.allItems = [];
$scope.getItemsFromDataStore = function() {
// Get all items from the local data store.
// We're using store.all because store.each returns async, and the
// method will return before we've pulled all the items out. Then
// there is a strong likelihood of getItemsFromServer stomping on
// local items.
var items = store.all(function(arr) {
arr.forEach(function(entry) {
var item = new Item();
angular.extend(item, entry);
$scope.addItem(item);
});
console.log("Entries loaded from local data store:", arr.length);
//$scope.allItems = $scope.items;
// Load items from the server after we've loaded everything from the local
// data store.
$scope.getItemsFromServer();
//$scope.clearFilter(); // Show all items by default.
});
};
$scope.getItemsFromServer = function() {
var feedURL = 'http://blog.chromium.org/feeds/posts/default?alt=json';
var getLink = function(links, rel) {
for (var i = 0, link; link = links[i]; ++i) {
if (link.rel === rel) {
return link.href;
}
}
return null;
};
var successCallback = function(data, status, headers, config) {
$scope.items = [];
var entries = data.feed.entry;
// Use map to iterate through the items and create a new JSON object for
// each item
entries.forEach(function(entry) {
var item = {};
item.title = entry.title.$t;
item.item_id = entry.id.$t;
item.key = item.item_id; // For LawnChair.
item.pub_name = data.feed.title.$t; // Set the pub name to the feed's title.
item.pub_author = entry.author[0].name.$t;
item.pub_date = new Date(entry.published.$t);
// Set the link to the entry to it's original source if it exists
// or set it to the entry link
item.item_link = getLink(entry.link, 'alternate');
item.feed_link = getLink(data.feed.link, 'alternate');
item.content = entry.content.$t;
item.short_desc = item.content.substr(0, 128) + '...';
var tempItem = new Item();
angular.extend(tempItem, item);
// Try to add the item to the data controller, if it's successfully
// added, we get TRUE and add the item to the local data store,
// otherwise it's likely already in the local data store.
if ($scope.addItem(tempItem)) {
store.save(item);
}
});
$scope.allItems = $scope.items;
console.log('Entries loaded from server:', $scope.items.length);
};
var errorCallback = function(data, status, headers, config) {
$scope.allItems = $scope.items;
};
//$http.jsonp(feedURL + '&callback=JSON_CALLBACK').success(successCallback).error(errorCallback);
$http.get(feedURL).success(successCallback).error(errorCallback);
};
// Adds an item to the controller if it's not already in the controller
$scope.addItem = function(item) {
var exists = $scope.items.filter(function(val, i) {
return val.item_id == item.item_id;
}).length;
if (exists === 0) {
// If no results are returned, we insert the new item into the data
// controller in order of publication date
$scope.items.push(item);
return true;
} else {
// It's already in the data controller, so we won't re-add it.
return false;
}
};
$scope.itemCount = function() {
return $scope.allItems.length;
};
$scope.readCount = function() {
return $scope.allItems.filter(function(val, i) { return val.read }).length;
};
$scope.unreadCount = function() {
return $scope.allItems.length - $scope.readCount();
};
// A 'property' that returns the count of starred items
$scope.starredCount = function() {
return $scope.allItems.filter(function(val, i) { return val.starred }).length;
};
$scope.markAllRead = function() {
// Iterate through all items, and set read=true in the data controller
// then set read=true in the data store.
$scope.items.forEach(function(item, i) {
item.read = true;
store.toggleRead(item.item_id, true);
});
};
$scope.clearFilter = function() {
$scope.items = $scope.allItems;
};
$scope.filterBy = function(key, value) {
$scope.items = $filter('filter')($scope.allItems, function(item, i) {
return item[key] == value;
});
};
// Fetch items when the constructor is called.
$scope.getItemsFromDataStore();
}
DataController.$inject = ['$scope', '$http', '$filter']; // For JS compilers.
function ItemsController($scope) { //{, $location) {
// A special observer that will watch for when the 'selectedItem' is updated
// and ensure that we scroll into a view so that the selected item is visible
// in the summary list view.
$scope.$watch('selectedItem().index', function(newVal, oldVal, scope) {
// TODO: Performing scrolling like this doesn't seem very Angular-ly.
// Need the setTimeout to prevent race condition with item being selected.
if (newVal != null) {
window.setTimeout(function() {
var curScrollPos = $('.summaries').scrollTop();
var itemTop = $('.summary.active').offset().top - 60;
$('.summaries').animate({'scrollTop': curScrollPos + itemTop}, 200);
}, 0);
}
});
$scope.selectedItem = function() {
for (var i = 0, item; item = $scope.$parent.items[i]; ++i) {
if (item.selected == true) {
return {item: item, index: i};
}
}
return {item: null, index: null};
};
$scope.hasNext = function() {
var selectedItem = $scope.selectedItem();
if (selectedItem.index == null) {
return true;
}
return selectedItem.index < $scope.$parent.items.length - 1;
};
$scope.hasPrev = function() {
var selectedItem = $scope.selectedItem();
if (selectedItem.index == null) {
return true;
}
return selectedItem.index > 0;
};
// Called to select an item
$scope.selectItem = function(opt_idx) {
// Unselect previous selection.
var selectedItem = $scope.selectedItem().item;
if (selectedItem) {
selectedItem.selected = false;
}
if (opt_idx != undefined) {
selectedItem = $scope.$parent.items[opt_idx];
selectedItem.selected = true;
} else {
this.item.selected = true;
selectedItem = this.item;
}
$scope.toggleRead(true);
//TODO: Update the address bar
//$location.hash(selectedItem.item_id)
//var url = location.origin + location.pathname + '';
//var item_url = "" + item.get('item_id');
//history.pushState(item.get('item_id'), 'title', url + item_url);
};
// Advances to the next item.
$scope.next = function(opt_delta) {
var delta = opt_delta || 1;
var selectedItem = $scope.selectedItem();
$scope.selectItem(selectedItem.item != null ? selectedItem.index + delta : 0);
};
// Goes back to the previous item.
$scope.prev = function() {
$scope.next(-1);
};
// Toggles or sets the read state with an optional boolean
$scope.toggleRead = function(opt_read) {
var selectedItem = $scope.selectedItem().item;
var read = opt_read || !selectedItem.read;
selectedItem.read = read;
var key = selectedItem.item_id;
store.toggleRead(key, read);
};
// Toggles or sets the starred status with an optional boolean
$scope.toggleStar = function(opt_star) {
var selectedItem = $scope.selectedItem().item;
var star = opt_star || !selectedItem.starred;
selectedItem.starred = star;
var key = selectedItem.item_id;
store.toggleStar(key, star);
};
}
ItemsController.$inject = ['$scope'];//, '$location']; // For JS compilers.
//ItemsController.prototype = Object.create(DataController.prototype);
// Top Menu/Nav Bar
function NavBarController($scope) {//, $injector) {
//$injector.invoke(ItemsController, this, {$scope: $scope});
// Click handler for menu bar
$scope.showAll = function() {
$scope.clearFilter();
};
// Click handler for menu bar
$scope.showUnread = function() {
$scope.filterBy('read', false);
};
// Click handler for menu bar
$scope.showStarred = function() {
$scope.filterBy('starred', true);
};
// Click handler for menu bar
$scope.showRead = function() {
$scope.filterBy('read', true);
};
// Click handler for menu bar
$scope.refresh = function() {
$scope.getItemsFromServer();
};
//$scope.showAll(); // Show all when page loads.
}
NavBarController.$inject = ['$scope']; // For JS compilers.
// NavBarController.prototype = Object.create(ItemsController.prototype);
function NavControlsView($scope) {
// Click handler for up/previous button
$scope.navUp = function() {
$scope.$parent.prev();
};
// Click handler for down/next button
$scope.navDown = function() {
$scope.$parent.next();
};
// Click handler to toggle the selected items star status
$scope.toggleStar = function() {
$scope.$parent.toggleStar();
};
// Click handler to toggle the selected items read status
$scope.toggleRead = function() {
$scope.$parent.toggleRead();
};
// Click handler to mark all as read
$scope.markAllRead = function() {
$scope.$parent.markAllRead();
};
// Click handler for refresh
$scope.refresh = function() {
$scope.getItemsFromServer();
};
}
function handleSpace() {
var itemHeight = $('.entry.active').height() + 60;
var winHeight = $(window).height();
var curScroll = $('.entries').scrollTop();
var scroll = curScroll + winHeight;
if (scroll < itemHeight) {
$('.entries').scrollTop(scroll);
} else {
$('.controls button[ng-click="navDown()"]').click();
}
};
function handleBodyKeyDown(e) {
switch (e.keyCode) {
case 34: // PgDn
case 39: // right arrow
case 40: // down arrow
case 74: // j
$('.controls button[ng-click="navDown()"]').click(); // TODO: figure out angular way
break;
case 32: // Space
handleSpace();
e.preventDefault();
break;
case 33: // PgUp
case 37: // left arrow
case 38: // up arrow
case 75: // k
$('.controls button[ng-click="navUp()"]').click();
break;
case 85: // U
$('.controls button[ng-click="toggleRead()"]').click();
break;
case 72: // H
$('.controls button[ng-click="toggleStar()"]').click();
break;
}
}
function handlePopState(e) {
//console.log("Pop State", e);
}
document.body.addEventListener('keydown', handleBodyKeyDown, false);
window.addEventListener('popstate', handlePopState, false);
document.addEventListener('DOMContentLoaded', function(e) {
//On mobile devices, hide the address bar
window.scrollTo(0);
}, false);
You can’t perform that action at this time.