* display lib info on document page.

docs/css/doc.css

@@ -92,6 +92,9 @@ a.avatar {
   background-color: #e5e5e5;
   border-radius: 4px;
 }
+body > .tooltip {
+  z-index: 9999;
+}
 a.avatar > i {
   font-size: 28px;
 }
@@ -1747,13 +1750,78 @@ body.query-enabled[data-query='icons'] #grid .card.open.section-preview-show .se
   padding: 20px 10px 20px 20px;
   overflow-y: auto;
 }
+#pageAttrs {
+  padding: 0 0 10px 34px;
+  margin: 0 0 20px 16px;
+  border-bottom: 4px double #f1f1f1;
+}
+#pageAttrs > .badge {
+  float: left;
+  min-width: 40px;
+  padding: 6px 10px;
+  margin-right: 10px;
+  line-height: 20px;
+  text-align: center;
+  background-color: #f1f1f1;
+  border-radius: 3px;
+  opacity: .8;
+  -webkit-transition: all .3s cubic-bezier(.175, .885, .32, 1);
+       -o-transition: all .3s cubic-bezier(.175, .885, .32, 1);
+          transition: all .3s cubic-bezier(.175, .885, .32, 1);
+}
+#pageAttrs > .badge.pull-right {
+  margin-right: 0;
+  margin-left: 10px;
+}
+#pageAttrs > .badge:hover {
+  text-decoration: none;
+  background-color: #e5e5e5;
+  opacity: 1;
+}
+#pageAttrs > .badge.badge-zui {
+  color: #3280fc;
+  background-color: #ebf2f9;
+}
+#pageAttrs > .badge.badge-zui:hover {
+  background-color: #d7e5f3;
+}
+#pageAttrs > .badge.badge-lite {
+  color: #03b8cf;
+  background-color: #ddf3f5;
+}
+#pageAttrs > .badge.badge-lite:hover,
+#pageAttrs > .badge.badge-lite:active,
+#pageAttrs > .badge.badge-lite:focus {
+  background-color: #c9ecef;
+}
+#pageAttrs > .badge.badge-lib {
+  color: #38b03f;
+  background-color: #ddf4df;
+}
+#pageAttrs > .badge.badge-lib:hover {
+  background-color: #caeecd;
+}
+#pageAttrs > .badge.badge-party {
+  color: #ea644a;
+  background-color: #ffe5e0;
+}
+#pageAttrs > .badge.badge-party:hover {
+  background-color: #ffd0c6;
+}
+#pageAttrs > .badge.badge-custom {
+  color: #bd7b46;
+  background-color: #f7ebe1;
+}
+#pageAttrs > .badge.badge-custom:hover {
+  background-color: #f2decd;
+}
 #pageContent {
   position: relative;
   padding-left: 50px;
 }
 #pageContent:before {
   position: absolute;
-  top: -20px;
+  top: -50px;
   bottom: 0;
   left: 24px;
   display: block;
@@ -2086,6 +2154,9 @@ body.page-show.page-show-full #pageBody {
 body.page-show.page-show-full #pageBody.with-scrollbar {
   padding-left: 11px;
 }
+body.page-show.page-show-full #pageAttrs {
+  margin-left: 34px;
+}
 body.page-show.page-show-full .path-max-btn:before,
 body.page-show.page-show-full .path-max-btn:after,
 body.page-show.page-show-full .path-max-btn > .path-1:before,

index.html

@@ -66,6 +66,18 @@
             <button data-toggle="tooltip" title="关闭（ESC）" type="button" class="btn btn-link path-close-btn path-btn"><i class="path-1"></i></button>
           </div>
           <div id="pageBody" class="scrollbar-hover">
+            <div class="container">
+              <div id="pageAttrs" class="clearfix">
+                <div class="badge badge-zui" data-toggle="tooltip" title="此组件在标准版中提供">ZUI</div>
+                <div class="badge badge-lite" data-toggle="tooltip" title="此组件在简洁版中提供">LITE</div>
+                <div class="badge badge-lib" data-toggle="tooltip" title="此组件在lib目录中单独提供">LIB</div>
+                <a class="badge badge-party" data-toggle="tooltip" title="这是第三方组件，点击访问网站" target="_blank"><i class="icon icon-heart"></i> <span class="product-ver"></span></a>
+                <div class="badge badge-custom" data-toggle="tooltip" title="此组件可以拆分使用"><i class="icon icon-cogs"></i></div>
+                <div class="badge badge-version" data-toggle="tooltip" title="此组件的最早提供版本">1.2.0+</div>
+                <div class="badge badge-author" data-toggle="tooltip" title="本文档作者"><i class="icon icon-user"></i> <span class="author-name">Catouse</span></div>
+                <a target="_blank" href="https://github.com/easysoft/zui/tree/master/docs/part" class="badge badge-source pull-right" data-toggle="tooltip" title="访问文档源码，Fork项目来完善文档"><i class="icon icon-code"></i></a>
+              </div>
+            </div>
             <div class="loader" id="pageLoader"><i class="icon icon-spin icon-spinner-indicator"></i> <span class="loading-text">正在拼命加载中...</span><span class="error-text">加载失败，请检查网络重试。<br>另一个导致无法加载文档的原因可能是该文档尚未完成。<br>欢迎你在 <a href="https://github.com/easysoft/zui">Github</a> 上 <a href="https://github.com/easysoft/zui/fork">Fork</a> 项目来完善文档。</span></div>
             <div id="pageContent"></div>
             <nav></nav>

src/js/doc.js

@@ -65,7 +65,7 @@
     var scrollBarWidth = -1;
     var bestPageWidth = 1120;
     var $body, $window, $grid, $sectionTemplate,
-        $queryInput, $chapters, $chaptersCols,
+        $queryInput, $chapters, $chaptersCols, $pageAttrs,
         $choosedSection, $page, $pageHeader, $pageContent, $pageLoader,
         $pageContainer, $pageBody, $navbar, $search, lastQueryString,
         $header, $sections, $chapterHeadings; // elements
@@ -962,6 +962,22 @@
         displaySectionIcon($pageHeader.find('.icon'), section);
         $pageHeader.find('.name').text(section.name).attr('href', pageUrl);
         $pageHeader.find('.desc').text(section.desc);
+
+        // page attributes
+        $pageAttrs.hide();
+        $pageAttrs.children('.badge-author').toggle(!!section.author).find('.author-name').text(section.author);
+        $pageAttrs.children('.badge-source').toggle(!!section.url).attr('href', 'https://github.com/easysoft/zui/tree/master' + section.url);
+        var lib = section.lib;
+        if(lib) {
+            $pageAttrs.children('.badge-zui').toggle(!!lib.bundles.standard);
+            $pageAttrs.children('.badge-lite').toggle(!!lib.bundles.lite);
+            $pageAttrs.children('.badge-lib').toggle(!!lib.bundles.separate);
+            $pageAttrs.children('.badge-custom').toggle(!!lib.custom);
+            
+            $pageAttrs.children('.badge-version').toggle(!!lib.ver).text(lib.ver + '+');
+            $pageAttrs.children('.badge-party').toggle(!!lib.thirdpart).attr('href', lib.partUrl || 'javascript:;').find('.product-ver').text(lib.pver);
+        }
+
         $pageContent.html('');
         $page.addClass('loading');
         $pageLoader.removeClass('with-error').addClass('loading');
@@ -974,6 +990,7 @@
                 $pageBody.scrollTop(0);
                 showPageTopic(topic);
                 handlePageLoad();
+                $pageAttrs.show();
             }
             if($page.hasClass('openning')) {
                 if(lastShowDataCall) clearTimeout(lastShowDataCall);
@@ -1007,7 +1024,7 @@
 
             setTimeout(function(){
                 $body.addClass('page-show-in');
-                if($page.hasClass('loading')) $page.addClass('openning').css('height', 380);
+                if($page.hasClass('loading')) $page.addClass('openning').css('height', 470);
                 $pageBody.scrollTop(0);
                 setTimeout(function(){
                     $page.removeClass('openning');
@@ -1092,7 +1109,7 @@
             height = $window.height();
             $pageBody.toggleClass('with-scrollbar', $pageContent.outerHeight() > (height - 40 - $pageHeader.outerHeight()));
         } else {
-            height = Math.min($pageContainer.outerHeight(), $pageHeader.outerHeight() + $pageContent.outerHeight() + 50);
+            height = Math.min($pageContainer.outerHeight(), $pageHeader.outerHeight() + $pageContent.outerHeight() + 50 + $pageAttrs.outerHeight());
         }
         $page.css('height', height);
     };
@@ -1141,6 +1158,21 @@
         }
     };
 
+    var isInLib = function(name, libNames, lib) {
+        if(libNames) {
+            var len = libNames.length;
+            name = name.toLowerCase();
+            var names = name + 's', nameDot = name + '.', namesDot = name + 's.';
+            for(var i = 0; i < len; ++i) {
+                var item = libNames[i];
+                if(item === name || item === names || (lib && !lib.src && isInLib(name, lib.dpds))) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    };
+
     var getBuildList = function(pkg, build, lib, list)
     {
         if(!list)
@@ -1206,6 +1238,43 @@
             pkgLibs.standard = getBuildList(pkg, pkg.builds.standard, pkg.lib);
             pkgLibs.lite = getBuildList(pkg, pkg.builds.lite, pkg.lib);
             pkgLibs.separate = getBuildList(pkg, pkg.builds.separate, pkg.lib);
+
+            eachSection(function(chapter, section, $sectionList){
+                var pkgLib = pkg.lib[section.id] || pkg.lib[section.id + 's'];
+                var lib = {bundles: {}};
+                $.each(pkgLibs, function(name, libNames){
+                    if(isInLib(section.id, libNames, pkgLib)) {
+                        lib.bundles[name] = true;
+                    }
+                });
+
+                if(pkgLib) {
+                    if(pkgLib.thirdpart) {
+                        lib.thirdpart = true;
+                        lib.partUrl = pkgLib.website;
+                        lib.pver = pkgLib.pver;
+                    }
+
+                    if(!pkgLib.src && pkgLib.dpds) {
+                        lib.custom = true;
+                    }
+
+                    if(pkgLib.ver) {
+                        lib.ver = pkgLib.ver;
+                    } else if(lib.custom) {
+                        for(var j = 0; j < pkgLib.dpds.length; ++j) {
+                            var dpdsLibName = pkgLib.dpds[j];
+                            var dpdsLib = pkg.lib[dpdsLibName] || pkg.lib[dpdsLibName + 's'];
+                            if(dpdsLib && dpdsLib.ver) {
+                                lib.ver = dpdsLib.ver;
+                                break;
+                            }
+                        }
+                    }
+                }
+                
+                section.lib = lib;
+            });
         });
     };
 
@@ -1277,6 +1346,7 @@
         $chaptersCols = $grid.find('.col');
         $page = $('#page');
         $pageHeader = $('#pageHeader');
+        $pageAttrs = $('#pageAttrs');
         $pageLoader = $('#pageLoader');
         $pageContainer = $('#pageContainer');
         $pageContent = $('#pageContent');

src/less/doc.less

@@ -305,6 +305,8 @@ a.avatar
   line-height: 40px;
 }
 
+body > .tooltip {z-index: 9999}
+
 a.avatar > i {font-size: 28px}
 
 a.avatar:hover {text-decoration: none}
@@ -1360,6 +1362,77 @@ body.query-enabled {
   width: 100%;
   overflow-y: auto;
 }
+#pageAttrs {
+  padding: 0 0 10px 34px;
+  // background-color: @color-gray-pale;
+  margin: 0 0 20px 16px;
+  border-bottom: 4px double @color-gray-pale;
+
+  > .badge {
+    float: left;
+    background-color: @color-gray-pale;
+    margin-right: 10px;
+    padding: 6px 10px;
+    min-width: 40px;
+    text-align: center;
+    border-radius: 3px;
+    opacity: .8;
+    line-height: 20px;
+    .transition-fast();
+
+    &.pull-right {
+      margin-right: 0;
+      margin-left: 10px;
+    }
+
+    &:hover {
+      opacity: 1;
+      background-color: @color-gray-lighter;
+      text-decoration: none;
+    }
+
+    &.badge-zui {
+      background-color: @color-pale;
+      color: @color-primary;
+
+      &:hover {
+        background-color: darken(@color-pale, 5%);
+      }
+    }
+    &.badge-lite {
+      background-color: @color-blue-pale;
+      color: @color-blue;
+
+      &:hover, &:active, &:focus {
+        background-color: darken(@color-blue-pale, 5%);
+      }
+    }
+    &.badge-lib {
+      background-color: @color-green-pale;
+      color: @color-green;
+
+      &:hover {
+        background-color: darken(@color-green-pale, 5%);
+      }
+    }
+    &.badge-party {
+      background-color: @color-red-pale;
+      color: @color-red;
+
+      &:hover {
+        background-color: darken(@color-red-pale, 5%);
+      }
+    }
+    &.badge-custom {
+      background-color: @color-brown-pale;
+      color: @color-brown;
+
+      &:hover {
+        background-color: darken(@color-brown-pale, 5%);
+      }
+    }
+  }
+}
 #pageContent {
   padding-left: 50px;
   position: relative;
@@ -1370,7 +1443,7 @@ body.query-enabled {
     display: block;
     border-left: 1px dotted @color-gray-lighter;
     left: 24px;
-    top: -20px;
+    top: -50px;
     bottom: 0;
   }
 
@@ -1743,6 +1816,10 @@ body.page-show {
       }
     }
 
+    #pageAttrs {
+      margin-left: 34px;
+    }
+
     .path-max-btn {
       &:before, &:after, > .path-1:before, > .path-1 {
         .rotate(0deg);