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

Start moving directives into their own module and use Angular's $timeout

Browse source
This commit is contained in:
Colin Frei 2013-02-03 14:07:12 +01:00
parent d64c6b3f16
commit 43de8a9a10
3 changed files with 82 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

1
index.html
View file

@ -51,6 +51,7 @@
<script src="lib/iscroll.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
<script src="js/controllers.js"></script>
</body>

78
js/directives.js Normal file
View file

@ -0,0 +1,78 @@
angular.module('podcast.directives', [])
.directive('pullToRefresh', function() {
return function(scope, element, attrs, feedItems) {
var myScroll,
pullDownEl, pullDownOffset;
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight;
//TODO: get ID from context somehow?
myScroll = new iScroll(element[0], {
useTransition: true,
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
}
},
onScrollMove: function () {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
this.minScrollY = 0;
} else if (this.y < 5 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
this.minScrollY = -pullDownOffset;
}
},
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
scope.downloadItems(function(feedItem, feed) {
if (undefined === feed) {
myScroll.refresh();
} else {
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading ' + feed.title + '...';
}
});
}
}
});
scope.$watch(
function() { return scope.queue; },
function() { myScroll.refresh(); },
true
);
}
})
.directive('hold', ['$timeout', function($timeout) {
return function(scope, element, attrs) {
var startTime, moved, holdTimer = false;
element.bind('touchstart', function(event) {
startTime = new Date().getTime();
$timeout.cancel(holdTimer);
holdTimer = $timeout(function() {
scope.$eval(attrs.hold);
}, 500);
});
element.bind('touchmove', function() {
$timeout.cancel(holdTimer);
});
element.bind('touchend', function(event) {
if (new Date().getTime() - startTime > 500) {
event.preventDefault();
} else {
$timeout.cancel(holdTimer);
element[0].click();
}
});
}
}])
;

82
js/services.js
View file

@ -1,7 +1,7 @@
'use strict';
/* Services */
angular.module('podcasts.services', ['podcasts.database'])
angular.module('podcasts.services', ['podcasts.database', 'podcast.directives'])
.service('downloader2', ['$http', '$q', 'xmlParser', function($http, $q, xmlParser) {
return {
downloadFile: function(url) {
@ -142,82 +142,6 @@ angular.module('podcasts.services', ['podcasts.database'])
var scroll = new iScroll(element[0]);
};
})
.directive('pullToRefresh', function() {
return function(scope, element, attrs, feedItems) {
var myScroll,
pullDownEl, pullDownOffset;
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight;
//TODO: get ID from context somehow?
myScroll = new iScroll(element[0], {
useTransition: true,
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
}
},
onScrollMove: function () {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
this.minScrollY = 0;
} else if (this.y < 5 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
this.minScrollY = -pullDownOffset;
}
},
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
scope.downloadItems(function(feedItem, feed) {
if (undefined === feed) {
myScroll.refresh();
} else {
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading ' + feed.title + '...';
}
});
}
}
});
scope.$watch(
function() { return scope.queue; },
function() { myScroll.refresh(); },
true
);
}
})
.directive('hold', function() {
return function(scope, element, attrs) {
var startTime, moved, holdTimer = false;
element.bind('touchstart', function(event) {
startTime = new Date().getTime();
clearTimeout(holdTimer);
holdTimer = setTimeout(function() {
scope.$eval(attrs.hold);
}, 500);
});
element.bind('touchmove', function() {
clearTimeout(holdTimer);
});
element.bind('touchend', function(event) {
if (new Date().getTime() - startTime > 500) {
event.preventDefault();
} else {
clearTimeout(holdTimer);
element[0].click();
}
});
}
})
.service('feeds', ['db', 'downloader2', 'xmlParser', 'feedItems', function(db, downloader2, xmlParser, feedItems) {
return {
db: db,
@ -466,7 +390,7 @@ angular.module('podcasts.services', ['podcasts.database'])
}
}
}])
.service('player', ['db', function(db) {
.service('player', ['db', '$timeout', function(db, $timeout) {
return {
db: db,
audio: angular.element(document.getElementById('audioPlayer')),
@ -520,7 +444,7 @@ angular.module('podcasts.services', ['podcasts.database'])
this.nowPlaying.title = feedItem.title;
var audio = this.audio[0],
player = this;
setTimeout(function() {
$timeout(function() {
player.nowPlaying.duration = audio.duration;
}, 100);
this.nowPlaying.feedItem = feedItem;