'More' link for comments index page (c39c60af) · Commits · extjs / jsduck

template/app/Application.js

+1 −1

Original line number	Diff line number	Diff line
		@@ -46,7 +46,7 @@ Ext.define('Docs.Application', {
		}

		// setInterval(function(){
		// Ext.DomQuery.select('link')[4].href = "resources/css/viewport.css?" + Math.ceil(Math.random() * 100000000)
		// Ext.DomQuery.select('link')[2].href = "resources/css/viewport.css?" + Math.ceil(Math.random() * 100000000)
		// }, 1000);
		}
		});

template/app/controller/Comments.js

+58 −8

Original line number	Diff line number	Diff line
		@@ -78,6 +78,7 @@ Ext.define('Docs.controller.Comments', {
		[ '.cancelUpdateComment', 'click', this.cancelUpdateComment],
		[ '.deleteComment', 'click', this.promptDeleteComment],
		[ '.editComment', 'click', this.editComment],
		[ '.fetchMoreComments', 'click', this.fetchMoreComments],
		[ '.voteCommentUp', 'click', this.voteUp],
		[ '.voteCommentDown', 'click', this.voteDown]
		], function(delegate) {
		@@ -212,23 +213,52 @@ Ext.define('Docs.controller.Comments', {
		/**
		* Fetches the most recent comments
		*/
		fetchRecentComments: function(id) {
		var url = Docs.baseUrl + '/' + Docs.commentsDb + '/_design/Comments/_list/with_vote/by_date';
		fetchRecentComments: function(id, startkey) {
		var url = Docs.baseUrl + '/' + Docs.commentsDb + '/_design/Comments/_list/with_vote/by_date',
		limit = 25;

		var params = {
		descending: true,
		limit: limit
		};

		if (startkey) {
		params.startkey = startkey;
		params.skip = 1;
		}

		Ext.data.JsonP.request({
		url: url,
		method: 'GET',
		params: {
		descending: true,
		limit: 100
		},
		params: params,
		success: function(response) {
		this.renderComments(response.rows, id, {showCls: true, hideCommentForm: true});
		var opts = {
		showCls: true,
		hideCommentForm: true,
		limit: limit,
		offset: response.offset,
		total_rows: response.total_rows
		};

		if (startkey) {
		opts.append = true;
		}

		this.renderComments(response.rows, id, opts);
		},
		scope: this
		});
		},

		fetchMoreComments: function(cmp, el) {

		var moreLink = Ext.get(el);

		if (moreLink.hasCls('recent')) {
		this.fetchRecentComments('recentcomments', '[' + moreLink.getAttribute('rel') + ']');
		}
		},

		/**
		* Promts the user for confirmation of comment deletion. Deleted the comment
		* if the user confirms.
		@@ -463,8 +493,10 @@ Ext.define('Docs.controller.Comments', {

		var comments = Ext.get(id),
		loadingEl = comments.down('.loading');

		var data = Ext.Array.map(rows, function(r) {
		r.value.id = r.id;
		r.value.key = r.key;
		r.value = Ext.merge(r.value, opts);
		return r.value;
		});
		@@ -473,7 +505,25 @@ Ext.define('Docs.controller.Comments', {
		loadingEl.remove();
		}

		if (opts.append) {
		var list = comments.down('.comment-list'),
		more = comments.down('.fetchMoreComments'),
		last = data[data.length - 1];

		Docs.view.Comments.appendCommentsTpl.append(list, data);

		if ((last.offset + last.limit) > last.total_rows) {
		more.remove();
		} else {
		more.update(
		'<span></span>Showing comments 1-' + (last.offset + last.limit) + ' of ' + last.total_rows + '. ',
		'Click to load ' + last.limit + ' more...'
		);
		more.dom.setAttribute('rel', last.key.join(','));
		}
		} else {
		Docs.view.Comments.commentsTpl.append(comments, data);
		}

		if (opts.hideCommentForm) {
		comments.addCls('hideCommentForm');

template/app/view/Comments.js

+19 −0

Original line number	Diff line number	Diff line
		@@ -112,6 +112,17 @@ Ext.define('Docs.view.Comments', {
		title += ' ' + target[2];
		}
		return '<a href="#!/api/' + url + '" class="docClass" rel="' + url + '">' + title + '</a>';
		},
		moreComments: function(values) {
		var values = values[values.length - 1];
		if (values.total_rows > (values.offset + values.limit)) {
		return [
		'<a href="#" class="fetchMoreComments recent" rel="' + values.key.join(',') + '">',
		'<span></span>Showing comments 1-' + (values.offset + values.limit) + ' of ' + values.total_rows + '. ',
		'Click to load ' + values.limit + ' more...',
		'</a>'
		].join('');
		}
		}
		};

		@@ -122,6 +133,14 @@ Ext.define('Docs.view.Comments', {
		'</tpl>',
		'<div class="new-comment-wrap"></div>',
		'</div>',
		'{[this.moreComments(values)]}',
		commentTplMethods
		);

		this.appendCommentsTpl = Ext.create('Ext.XTemplate',
		'<tpl for=".">',
		commentTplHtml.join(''),
		'</tpl>',
		commentTplMethods
		);

template/resources/sass/_comments.scss

+16 −1

Original line number	Diff line number	Diff line
		@@ -26,13 +26,28 @@
		font-weight: normal;
		font-size: 11px; }

		.fetchMoreComments {
		display: block;
		padding: 10px 0 5px 35px;
		position: relative;
		span {
		display: block;
		position: absolute;
		left: 0;
		top: 5px;
		width: 27px;
		height: 28px;
		background: url(../images/comment.png) no-repeat 0 -25px; }
		&:hover span {
		background-position: -59px -25px; } }

		.comments {
		border-width: 1px 0;
		border-style: solid;
		border-color: #e0e0e0;
		position: relative;

		padding: 0 0 10px 25px;

		.loading {
		font-weight: bold;
		background: url(../images/ajax-loader.gif) no-repeat 0 9px;