Merge pull request #69 from owncloud/backport-68-scrolling

[9.0] Allow announcement scrolling
owncloud · Apr 11, 2016 · e7d68e0 · e7d68e0
2 parents 0c0a33c + 6dcc1b2
commit e7d68e0
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 87 deletions.
diff --git a/controller/pagecontroller.php b/controller/pagecontroller.php
@@ -93,11 +93,11 @@ public function __construct($AppName, IRequest $request, IDBConnection $connecti
 	 * @NoAdminRequired
 	 * @NoCSRFRequired
 	 *
-	 * @param int $page
+	 * @param int $offset
 	 * @return JSONResponse
 	 */
-	public function get($page = 1) {
-		$rows = $this->manager->getAnnouncements(self::PAGE_LIMIT, self::PAGE_LIMIT * (max(1, $page) - 1));
+	public function get($offset = 0) {
+		$rows = $this->manager->getAnnouncements(self::PAGE_LIMIT, $offset);
 
 		$announcements = [];
 		foreach ($rows as $row) {

diff --git a/js/script.js b/js/script.js
@@ -8,54 +8,77 @@
  * @copyright Joas Schilling 2015
  */
 
-(function ($, OC) {
-	var TEMPLATE =
-	'<div class="section">' +
-		'<h2>{{{subject}}}</h2>' +
-		'<em>' +
-			'{{author}} — {{time}}' +
-			'{{#if announcementId}}' +
-				'<span class="delete-link">' +
-					' — ' +
-					'<a href="#" data-announcement-id="{{{announcementId}}}">' +
-						t('announcementcenter', 'Delete') +
-					'</a>' +
-				'</span>' +
-			'{{/if}}' +
-		'</em>' +
-		'{{#if message}}' +
-		'<br /><br /><p>{{{message}}}</p>' +
-		'{{/if}}' +
-	'</div>' +
-	'<hr />';
-
-	function deleteLinkFunctionality() {
-		var $element = $(this);
-		$.ajax({
-			type: 'DELETE',
-			url: OC.generateUrl('/apps/announcementcenter/announcement/' + $element.data('announcement-id'))
-		}).done(function () {
-			var $announcement = $element.parents('.section').first();
-
-			$announcement.slideUp();
-			// Remove the hr
-			$announcement.next().remove();
-
-			setTimeout(function() {
-				$announcement.remove();
-
-				if ($('#app-content-wrapper .section').length == 1) {
-					$('#emptycontent').removeClass('hidden');
-				}
-			}, 750);
-
-		});
+(function() {
+	if (!OCA.AnnouncementCenter) {
+		/**
+		 * @namespace
+		 */
+		OCA.AnnouncementCenter = {};
 	}
 
-	$(document).ready(function () {
-		var compiledTemplate = Handlebars.compile(TEMPLATE);
+	OCA.AnnouncementCenter.App = {
+		ignoreScroll: 0,
+		$container: null,
+		$content: null,
+		lastLoadedAnnouncement: 0,
+
+		compiledTemplate: null,
+		handlebarTemplate: '<div class="section">' +
+				'<h2>{{{subject}}}</h2>' +
+				'<em>' +
+					'{{author}} — {{time}}' +
+					'{{#if announcementId}}' +
+						'<span class="delete-link">' +
+							' — ' +
+							'<a href="#" data-announcement-id="{{{announcementId}}}">' +
+								t('announcementcenter', 'Delete') +
+							'</a>' +
+						'</span>' +
+					'{{/if}}' +
+				'</em>' +
+				'{{#if message}}' +
+					'<br /><br /><p>{{{message}}}</p>' +
+				'{{/if}}' +
+			'</div>' +
+			'<hr />',
+
+		init: function() {
+			this.$container = $('#app-content-wrapper');
+			this.$content = $('#app-content');
+			this.compiledTemplate = Handlebars.compile(this.handlebarTemplate);
+
+			$('#submit_announcement').on('click', _.bind(this.postAnnouncement, this));
+			this.$content.on('scroll', _.bind(this.onScroll, this));
+
+			this.ignoreScroll = 1;
+			this.loadAnnouncements();
+		},
+
+		deleteAnnouncement: function() {
+			var $element = $(this);
+			$.ajax({
+				type: 'DELETE',
+				url: OC.generateUrl('/apps/announcementcenter/announcement/' + $element.data('announcement-id'))
+			}).done(function () {
+				var $announcement = $element.parents('.section').first();
+
+				$announcement.slideUp();
+				// Remove the hr
+				$announcement.next().remove();
+
+				setTimeout(function() {
+					$announcement.remove();
+
+					if ($('#app-content-wrapper .section').length == 1) {
+						$('#emptycontent').removeClass('hidden');
+					}
+				}, 750);
+
+			});
+		},
 
-		$('#submit_announcement').click(function () {
+		postAnnouncement: function() {
+			var self = this;
 			OC.msg.startAction('#announcement_submit_msg', t('announcementcenter', 'Announcing…'));
 
 			$.ajax({
@@ -68,15 +91,15 @@
 			}).done(function(announcement) {
 				OC.msg.finishedSuccess('#announcement_submit_msg', t('announcementcenter', 'Announced!'));
 
-				var $html = $(compiledTemplate({
+				var $html = $(self.compiledTemplate({
 					time: OC.Util.formatDate(announcement.time * 1000),
 					author: announcement.author,
 					subject: announcement.subject,
 					message: announcement.message,
 					announcementId: (oc_isadmin) ? announcement.id : 0
 				}));
 
-				$html.find('span.delete-link a').on('click', deleteLinkFunctionality);
+				$html.find('span.delete-link a').on('click', self.deleteAnnouncement);
 				$('#app-content-wrapper .section:eq(0)').after($html);
 				$html.hide();
 				setTimeout(function() {
@@ -89,30 +112,52 @@
 			}).fail(function (response) {
 				OC.msg.finishedError('#announcement_submit_msg', response.responseJSON.error);
 			});
-		});
+		},
 
-		$.ajax({
-			type: 'GET',
-			url: OC.generateUrl('/apps/announcementcenter/announcement'),
-			data: {
-				page: 1
-			}
-		}).done(function (response) {
-			if (response.length > 0) {
-				_.each(response, function (announcement) {
-					var $html = $(compiledTemplate({
-						time: OC.Util.formatDate(announcement.time * 1000),
-						author: announcement.author,
-						subject: announcement.subject,
-						message: announcement.message,
-						announcementId: (oc_isadmin) ? announcement.id : 0
-					}));
-					$html.find('span.delete-link a').on('click', deleteLinkFunctionality);
-					$('#app-content-wrapper').append($html);
-				});
-			} else {
-				$('#emptycontent').removeClass('hidden');
+		loadAnnouncements: function() {
+			var self = this,
+				offset = self.lastLoadedAnnouncement;
+			$.ajax({
+				type: 'GET',
+				url: OC.generateUrl('/apps/announcementcenter/announcement'),
+				data: {
+					offset: offset
+				}
+			}).done(function (response) {
+				if (response.length > 0) {
+					_.each(response, function (announcement) {
+						var $html = $(self.compiledTemplate({
+							time: OC.Util.formatDate(announcement.time * 1000),
+							author: announcement.author,
+							subject: announcement.subject,
+							message: announcement.message,
+							announcementId: (oc_isadmin) ? announcement.id : 0
+						}));
+						$html.find('span.delete-link a').on('click', self.deleteAnnouncement);
+						$('#app-content-wrapper').append($html);
+
+						if (announcement.id < self.lastLoadedAnnouncement || self.lastLoadedAnnouncement === 0) {
+							self.lastLoadedAnnouncement = announcement.id;
+						}
+					});
+					self.ignoreScroll = 0;
+				} else if (offset === 0) {
+					$('#emptycontent').removeClass('hidden');
+				}
+			});
+		},
+
+		onScroll: function () {
+			if (this.ignoreScroll <= 0 && this.$content.scrollTop() +
+				this.$content.height() > this.$container.height() - 100) {
+				this.ignoreScroll = 1;
+				this.loadAnnouncements();
 			}
-		});
-	});
-})(jQuery, OC);
+		}
+	};
+
+})();
+
+$(document).ready(function() {
+	OCA.AnnouncementCenter.App.init();
+});
diff --git a/lib/manager.php b/lib/manager.php
@@ -21,6 +21,7 @@
 
 namespace OCA\AnnouncementCenter;
 
+use OCP\DB\QueryBuilder\IQueryBuilder;
 use OCP\IDBConnection;
 
 class Manager {
@@ -140,8 +141,12 @@ public function getAnnouncements($limit = 15, $offset = 0, $parseStrings = true)
 		$query = $queryBuilder->select('*')
 			->from('announcements')
 			->orderBy('announcement_time', 'DESC')
-			->setFirstResult($offset)
 			->setMaxResults($limit);
+
+		if ($offset > 0) {
+			$query->where($query->expr()->lt('announcement_id', $query->createNamedParameter($offset, IQueryBuilder::PARAM_INT)));
+		}
+
 		$result = $query->execute();
 
 

diff --git a/tests/controller/PageControllerTest.php b/tests/controller/PageControllerTest.php
@@ -133,15 +133,14 @@ protected function getUserMock($uid, $displayName) {
 
 	public function dataGet() {
 		return [
-			[0, [], [], 0, []],
-			[1, [], [], 0, []],
-			[2, [], [], 5, []],
-			[3, [], [], 10, []],
+			[0, [], [], []],
+			[1, [], [], []],
+			[2, [], [], []],
 			[
 				1,
 				[
 					['id' => 1337, 'author' => 'author1', 'subject' => 'Subject #1', 'message' => 'Message #1', 'time' => 1440672792],
-				], [], 0,
+				], [],
 				[
 					['id' => 1337, 'author' => 'author1', 'author_id' => 'author1', 'subject' => 'Subject #1', 'message' => 'Message #1', 'time' => 1440672792],
 				],
@@ -154,7 +153,6 @@ public function dataGet() {
 				[
 					['author1', $this->getUserMock('author1', 'Author One')],
 				],
-				0,
 				[
 					['id' => 23, 'author' => 'Author One', 'author_id' => 'author1', 'subject' => 'Subject #1', 'message' => 'Message #1', 'time' => 1440672792],
 				],
@@ -163,7 +161,8 @@ public function dataGet() {
 				1,
 				[
 					['id' => 42, 'author' => 'author1', 'subject' => "Subject &lt;html&gt;#1&lt;/html&gt;", 'message' => "Message<br />&lt;html&gt;#1&lt;/html&gt;", 'time' => 1440672792],
-				], [], 0,
+				],
+				[],
 				[
 					['id' => 42, 'author' => 'author1', 'author_id' => 'author1', 'subject' => 'Subject &lt;html&gt;#1&lt;/html&gt;', 'message' => 'Message<br />&lt;html&gt;#1&lt;/html&gt;', 'time' => 1440672792],
 				],
@@ -173,13 +172,12 @@ public function dataGet() {
 
 	/**
 	 * @dataProvider dataGet
-	 * @param int $page
+	 * @param int $offset
 	 * @param array $announcements
 	 * @param array $userMap
-	 * @param int $offset
 	 * @param array $expected
 	 */
-	public function testGet($page, $announcements, $userMap, $offset, $expected) {
+	public function testGet($offset, $announcements, $userMap, $expected) {
 		$this->userManager->expects($this->any())
 			->method('get')
 			->willReturnMap($userMap);
@@ -190,7 +188,7 @@ public function testGet($page, $announcements, $userMap, $offset, $expected) {
 			->willReturn($announcements);
 
 		$controller = $this->getController();
-		$jsonResponse = $controller->get($page);
+		$jsonResponse = $controller->get($offset);
 
 		$this->assertInstanceOf('OCP\AppFramework\Http\JSONResponse', $jsonResponse);
 		$this->assertEquals($expected, $jsonResponse->getData());