Merge branch 'develop' of http://git.yoho.cn/fe/yoho-blk into develop

+## Yoho BLK Components
+
+### 目的
+
+- 开箱即用
+- 松耦合，内聚
+- 开发并行
+
+### 分页组件
+
+- 组件名: pagination
+
+- 说明
+
+  根据BLK样式设计
+
+- 使用
+
+  1. express 服务端路由
+
+        res.render('index', {
+            helpers: {
+                // 引入组件，注意path，根据项目路径
+                pagination: require('../components/paginator').createPagination
+            },
+            paginationOpts:  {
+                page: page,               // 当前页 http://host/?page=2
+                limit: 10,                // 每页显示多少
+                totalRows: 100            // 一共多少纪录
+            }
+        });
+
+  2. handlebars view
+
+         {{{ pagination paginationOpts }}}
+
+  3. 将public/scss/components/pagination.scss 加入到编译列表中
+
+- 参数option
+
+  - 每页显示10条纪录
+
+         {{{ pagination paginationOpts limit="10" }}}
+
+  - 修改上一页文本
+
+         {{{ pagination paginationOpts leftText="上一页" }}}
+
+  - 修改下一页文本
+
+         {{{ pagination paginationOpts leftText="下一页" }}}  
+
+  - 修改分页组件根元素class
+
+         {{{ pagination paginationOpts paginationClass="your-class" }}}  

+/**
+ * 分页组件
+ * @author: djh<jinhu.dong@yoho.cn>
+ * @date: 2016/6/29
+ */
+
+'use strict';
+
+// render pagination ellipse indicator
+function _renderEllipse(templateStr) {
+    return templateStr + '<li><a>...</a></li>';
+}
+
+// render last page link
+function _renderLastPage(templateStr, pageCount, queryParams) {
+    return templateStr + '<li><a href="?page=' + pageCount + queryParams + '">' + pageCount + '</a></li>';
+}
+
+/*
+ * Pagination Component
+ * @param { Object } pagination pagination constructor
+ * --- pagination ---
+ * @param { Integer } limit: per page records number
+ * @param { String } leftText: prev button text, default is iconfont
+ * @param { String } rightText: next button text, default is iconfont
+ * @param { String } paginationClass: pagination ul class, default is 'blk-pagination'
+ */
+
+exports.createPagination = function(pagination, options) {
+    // default options
+    var limit = 9,                                      // display links number
+        n,                                              // page number ?page=n
+        queryParams = '',                               // paginate with query parameter
+        page = parseInt(pagination.page, 10),           // current page number
+        leftText = '<i class="iconfont">&#xe60e;</i>',  // prev
+        rightText = '<i class="iconfont">&#xe60c;</i>', // next
+        paginationClass = 'blk-pagination';             // pagination <ul> default class
+
+    var pageCount,
+        key,                                            // query params key
+        lastCharacterOfQueryParams;
+
+    var i,                                              // iterator for each refresh page
+        leftCount,                                      // left pagination link counts for current position
+        rightCount,                                     // right pagination link counts for current position
+        start;                                          // left first link number
+
+    var template;
+
+    if (!pagination) {
+        return '';
+    }
+
+    // custome options
+    if (options.hash.limit) {
+        limit = +options.hash.limit;
+    }
+
+    if (options.hash.leftText) {
+        leftText = options.hash.leftText;
+    }
+
+    if (options.hash.rightText) {
+        rightText = options.hash.rightText;
+    }
+
+    if (options.hash.paginationClass) {
+        paginationClass = options.hash.paginationClass;
+    }
+
+    pageCount = Math.ceil(pagination.totalRows / pagination.limit);
+
+    // query params
+    if (pagination.queryParams) {
+        queryParams = '&';
+        for (key in pagination.queryParams) {
+            if (pagination.queryParams.hasOwnProperty(key) && key !== 'page') {
+                queryParams += key + '=' + pagination.queryParams[key] + '&';
+            }
+        }
+        lastCharacterOfQueryParams = queryParams.substring(queryParams.length, -1);
+
+        if (lastCharacterOfQueryParams === '&') {
+            // trim off last & character
+            queryParams = queryParams.substring(0, queryParams.length - 1);
+        }
+    }
+
+    template = '<ul class="' + paginationClass + '">';
+
+    // ========= Previous Button ===============
+    if (page - 1) {
+        n = page - 1;
+        template = template + '<li><a href="?page=' + n + queryParams + '">' + leftText + '</a></li>';
+    }
+
+    // ========= Page Numbers Middle ===============
+    // current is active, and make left page link count equal right link count
+    i = 0;
+    leftCount = Math.ceil(limit / 2) - 1;
+    rightCount = limit - leftCount - 1;
+
+    if (page + rightCount > pageCount) {
+        leftCount = limit - (pageCount - page) - 1;
+    }
+
+    if (page - leftCount < 1) {
+        leftCount = page - 1;
+    }
+
+    start = page - leftCount;
+
+    while (i < limit && i < pageCount) {
+        // start is every link
+        n = start;
+
+        if (start === page) {
+            template = template + '<li class="active"><a href="?page=' + n + queryParams + '">' + n + '</a></li>';
+        } else {
+            // generate left style
+            if (leftCount >= 4) {
+                if (i === 0) {
+                    // first page
+                    template = template + '<li><a href="?page=1' + queryParams + '">1</a></li>';
+                } else if (i === 1 || (i === 7 && start <= pageCount - 2)) {
+                    // left and right ...
+                    template = _renderEllipse(template);
+                } else if (i === 8 && start <= pageCount - 1) {
+                    template = _renderLastPage(template, pageCount, queryParams);
+                } else {
+                    // other links is normal
+                    template = template +
+                               '<li><a href="?page=' + n + queryParams + '">' +
+                                    n +
+                                '</a></li>';
+                }
+            } else {
+                if (i === 7 && start <= pageCount - 2) {
+                    // right ...
+                    template = _renderEllipse(template);
+                } else if (i === 8 && start <= pageCount - 1) {
+                    template = _renderLastPage(template, pageCount, queryParams);
+                } else {
+                    template = template +
+                               '<li><a href="?page=' + n + queryParams + '">' +
+                                    n +
+                                '</a></li>';
+                }
+            }
+
+        }
+
+        start++;
+        i++;
+    }
+
+    // ========= Next page ===============
+    if (pageCount - page) {
+        n = page + 1;
+        template = template + '<li><a href="?page=' + n + queryParams + '">' + rightText + '</a></li>';
+    }
+
+    template = template + '</ul>';
+
+    // html template
+    return template;
+};

+ul.blk-pagination {
+    padding: 0;
+
+    li {
+        display: inline-block;
+        padding: 5px;
+        width: 15px;
+        height: 15px;
+        text-align: center;
+
+        &:first-child {
+            margin-right: 10px;
+            border: 1px solid #333;
+
+            &:hover {
+                background-color: #333;
+                cursor: pointer;
+
+                a {
+                    color: #fff;
+                }
+            }
+        }
+
+        &:last-child {
+            margin-left: 10px;
+            border: 1px solid #333;
+
+            &:hover {
+                background-color: #333;
+                cursor: pointer;
+
+                a {
+                    color: #fff;
+                }
+            }
+        }
+    }
+
+    .active {
+        background-color: #333;
+        a {
+            color: #fff;
+        }
+    }
+}