Commit ba5fffa4 authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Eliminate duplicate code for comments pager. 

The same HTML was created in two places. Now it's in single spot at
Docs.view.Comments#getPagerHtml.

The HTML is now also more straight-forward, allowing us easily to
display either link or plain text inside the pager container.
parent 4525e349

template/app/controller/Comments.js

+6 −25
Original line number Diff line number Diff line
@@ -293,12 +293,7 @@ Ext.define('Docs.controller.Comments', { 
    },



    fetchMoreComments: function(cmp, el) {



        var moreLink = Ext.get(el);



        if (moreLink.hasCls('recent')) {

            this.fetchRecentComments('recentcomments', moreLink.getAttribute('rel'));

        }

        this.fetchRecentComments('recentcomments', Ext.get(el).getAttribute('rel'));

    },



    /**
@@ -617,27 +612,13 @@ Ext.define('Docs.controller.Comments', { 
        }



        if (opts.append) {

            var list = comments.down('.comment-list'),

                more = comments.down('.fetchMoreComments'),

                last = data[data.length - 1] || {};



            var list = comments.down('.comment-list');

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



            var total = last.total_rows;

            var loaded = last.offset + last.limit;

            var next_load = Math.min(last.limit, total - loaded);

            if (loaded >= total) {

                var span = document.createElement("span");

                span.className = "fetchMoreComments";

                span.innerHTML = '<span></span>That\'s all. Total '+total+' comments.';

                Ext.get(span).replace(more);

            } else {

                more.update(

                    '<span></span>Showing comments 1-' + loaded + ' of ' + total + '. ' +

                    'Click to load ' + next_load + ' more...'

            var last = data[data.length - 1] || {};

            comments.down('.recent-comments-pager').update(

                Docs.view.Comments.getPagerHtml(last)

            );

                more.dom.setAttribute('rel', loaded);

            }

        } else {

            Docs.view.Comments.commentsTpl.append(comments, data);

            Docs.Syntax.highlight(comments);

template/app/view/Comments.js

+34 −19
Original line number Diff line number Diff line
@@ -128,24 +128,13 @@ Ext.define('Docs.view.Comments', { 


                return '<a href="' + urlPrefix + url + '">' + title + '</a>';

            },

            moreComments: function(values) {

                var last = values[values.length - 1] || {};



                var total = last.total_rows;

                var loaded = last.offset + last.limit;

                var next_load = Math.min(last.limit, total - loaded);



                if (total > loaded) {

            recentCommentsPager: Ext.Function.bind(function(values) {

                return [

                        '<a href="#" class="fetchMoreComments recent" rel="' + loaded + '">',

                            '<span></span>Showing comments 1-' + loaded + ' of ' + total + '. ',

                            'Click to load ' + next_load + ' more...',

                        '</a>'

                    '<div class="recent-comments-pager">',

                        this.getPagerHtml(values[values.length - 1] || {}),

                    '</div>'

                ].join('');

                } else {

                    return '<span class="fetchMoreComments"><span></span>That\'s all. Total '+total+' comments.</span>';

                }

            }

            }, this)

        };



        this.commentsTpl = Ext.create('Ext.XTemplate',
@@ -155,7 +144,7 @@ Ext.define('Docs.view.Comments', { 
                '</tpl>',

                '<div class="new-comment-wrap"></div>',

            '</div>',

            '{[this.moreComments(values)]}',

            '{[this.recentCommentsPager(values)]}',

            commentTplMethods

        );
@@ -308,6 +297,32 @@ Ext.define('Docs.view.Comments', { 
        }

    },



    /**

     * Returns HTML for recent comments pager.

     *

     * @param {Object} opts Object with fields:

     * @param {Number} opts.offset

     * @param {Number} opts.limit

     * @param {Number} opts.total_rows

     */

    getPagerHtml: function(opts) {

        var total = opts.total_rows;

        var loaded = opts.offset + opts.limit;

        var next_load = Math.min(opts.limit, total - loaded);



        if (total > loaded) {

            return [

                '<span></span>',

                '<a href="#" class="fetchMoreComments" rel="' + loaded + '">',

                    'Showing comments 1-' + loaded + ' of ' + total + '. ',

                    'Click to load ' + next_load + ' more...',

                '</a>'

            ].join('');

        } else {

            return '<span></span>That\'s all. Total '+total+' comments.';

        }

    },



    /**

     * Renders the comment containers for the currently active class

     */

template/resources/sass/_comments.scss

+2 −3
Original line number Diff line number Diff line
@@ -32,10 +32,11 @@ 
  font-weight: normal;

  font-size: 11px; }



.fetchMoreComments {

.recent-comments-pager {

  display: block;

  padding: 10px 0 5px 35px;

  position: relative;

  color: gray;

  span {

    display: block;

    position: absolute;
@@ -46,8 +47,6 @@ 
    background: url(../images/comment.png) no-repeat 0 -25px; }

  &:hover span {

    background-position: -59px -25px; } }

span.fetchMoreComments {

  color: gray; }



.comments-div {

  border-width: 1px 0;