* change document UI.

cc66021e · Catouse · 2479b17b · cc66021e · cc66021e · cc66021e
6 changed file
--- a/docs/2/css/doc.css
+++ b/docs/2/css/doc.css
 /*!
- * ZUI - v1.2.1 - 2015-04-17
+ * ZUI - v1.2.1 - 2015-04-18
 * http://zui.sexy
 * GitHub: https://github.com/easysoft/zui.git 
 * Copyright (c) 2015 cnezsoft.com; Licensed MIT
@@ -481,6 +481,9 @@ body {
       -o-transition: all .1s cubic-bezier(.175, .885, .32, 1);
          transition: all .1s cubic-bezier(.175, .885, .32, 1);
 }
+#grid .card-heading > h5 > a.name {
+  color: #353535;
+}
 #grid .card-heading > small {
  position: relative;
  display: block;
@@ -1047,7 +1050,7 @@ body.input-query-focus #grid .card.choosed:before {
 }
 #page {
  position: relative;
-  background-color: #fff;
+  background-color: rgba(255, 255, 255, .8);
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, .25), 0 120px 220px #f1f1f1;
          box-shadow: 0 4px 10px rgba(0, 0, 0, .25), 0 120px 220px #f1f1f1;
 }
@@ -1099,6 +1102,14 @@ body.input-query-focus #grid .card.choosed:before {
       -o-transition: all .3s cubic-bezier(.175, .885, .32, 1);
          transition: all .3s cubic-bezier(.175, .885, .32, 1);
 }
+#pageHeader > .wrapper > h2 > a.name {
+  color: #353535;
+}
+#pageHeader > .wrapper > h2 > a.name:hover {
+  color: #353535;
+  text-decoration: none;
+  cursor: normal;
+}
 #pageHeader > .path-btn {
  position: absolute;
  top: 0;
@@ -1267,6 +1278,7 @@ body.page-show.page-show-in #page {
  left: 0!important;
  width: 100%!important;
  max-height: none!important;
+  background-color: #fff;
  opacity: 1;
 }
 body.page-show.page-show-in #pageHeader {

--- a/docs/2/css/doc.css.map
+++ b/docs/2/css/doc.css.map
--- a/docs/2/css/doc.min.css
+++ b/docs/2/css/doc.min.css
--- a/docs/2/index.html
+++ b/docs/2/index.html
@@ -60,7 +60,7 @@
          <div id="pageHeader">
            <div class="wrapper">
              <i class="icon icon-star"></i>
-              <h2><span class="name">图标</span></h2>
+              <h2><a class="name" href="###">图标</a></h2>
              <small class="text-muted desc">使用和查找图标</small>
            </div>
            <button data-toggle="tooltip" title="最大化" type="button" class="btn btn-link path-max-btn path-btn"><i class="path-1"></i></button>
@@ -69,6 +69,7 @@
          <div id="pageBody" class="scrollbar-hover">
            <div class="text-muted loader"><i class="icon icon-spin icon-spinner"></i> 正在拼命加载中...</div>
            <div id="pageContent"></div>
+            <nav></nav>
          </div>
        </div>
      </div>
@@ -143,7 +144,7 @@
        <div class="card-heading">
          <!-- <a class="btn-toggle" href="###"><i class="icon icon-angle-right"></i></a> -->
          <i class="icon"></i>
-          <h5><span class="name"></span></h5>
+          <h5><a class="name" href="###"></a></h5>
          <small class="text-muted desc"></small>
        </div>
        <div class="card-content ">

--- a/src/js/doc.js
+++ b/src/js/doc.js
@@ -70,6 +70,8 @@
            $body[0].removeChild(scrollDiv);
        }

+        console.log('checkScrollbar', scrollBarWidth);
+
        if (scrollBarWidth) {
            var bodyPad = parseInt(($body.css('padding-right') || 0), 10);
            $body.css('padding-right', bodyPad + scrollBarWidth);
@@ -157,10 +159,11 @@
        if(eachSection(function(chapter, section, $sectionList){
            var chapterName = chapter.id;
            section.chapter = chapterName;
-            var $tpl = $sectionTemplate.clone().attr('id', 'section-' + chapterName + '-' + section.id).data('section', section);
+            var id = chapterName + '-' + section.id;
+            var $tpl = $sectionTemplate.clone().attr('id', 'section-' + id).data('section', section);
            $tpl.attr('data-id', section.id).attr('data-chapter', chapterName).attr('data-order', order++);
            var $head = $tpl.children('.card-heading');
-            $head.find('.name').text(section.name);
+            $head.find('.name').text(section.name).attr('href', '#' + id);
            $head.children('.desc').text(section.desc);
            displaySectionIcon($head.children('.icon'), section);
            var $topics = $tpl.find('.topics');
@@ -609,11 +612,11 @@
    };

    var closePage = function() {
-        if($body.hasClass('page-show')) {
+        if($body.hasClass('page-open')) {
            var style = $page.data('trans-style');
            style['max-height'] = '';
            $page.css(style);
-            $body.addClass('page-show-out').removeClass('page-show-in');
+            $body.addClass('page-show-out').removeClass('page-open page-show-in');
            setTimeout(function(){
                $body.removeClass('page-show page-show-out');
                resetScrollbar();
@@ -624,12 +627,17 @@
    };

    var openPage = function($section, section, topic) {
+        var pageId = section.chapter + '-' + section.id;
+        if($body.hasClass('page-open') && pageId === $body.attr('data-page')) {
+            if(debug) console.error('The page already showed.');
+            return;
+        }
        chooseSection($section, false, true);
-        closePage();

-        $body.attr('data-page-chapter', section.chapter);
-        displaySectionIcon($pageHeader.children('.icon'), section);
-        $pageHeader.find('.name').text(section.name);
+        window.location.hash = '#' + pageId;
+        $body.attr('data-page-chapter', section.chapter).attr('data-page', pageId);
+        displaySectionIcon($pageHeader.find('.icon'), section);
+        $pageHeader.find('.name').text(section.name).attr('href', '#' + section.chapter + '-' + section.id);
        $pageHeader.children('.desc').text(section.desc);
        $pageContent.html('');
        var $loader = $page.addClass('loading').find('.loader').addClass('loading');
@@ -642,6 +650,13 @@
            $pageBody.scrollTop(0);
        });

+        if($body.hasClass('page-open')) {
+            if(debug) console.log('open section in open page', section);
+            return;
+        }
+
+        $body.addClass('page-open');
+
        toggleCompactMode(true, function(){
            var offset = $section.offset();
            var sectionHeight = $section.outerHeight();
@@ -652,11 +667,11 @@
                height: sectionHeight,
                'max-height': sectionHeight
            };
-            $page.css(style).data('trans-style', style);
-            $pageBody.css('width', bestPageWidth);
-
            checkScrollbar();
            $body.addClass('page-show');
+            $page.css(style).data('trans-style', style);
+            $pageBody.css('width', bestPageWidth);
+            
            setTimeout(function(){
                $body.addClass('page-show-in');
                if($page.hasClass('loading')) $page.addClass('openning').css('height', 380);
@@ -664,6 +679,7 @@
                setTimeout(function(){
                    $page.removeClass('openning');
                    bestPageWidth = $pageBody.css('width', '').width() + 40;
+                    resizePage();
                }, 310);
            }, 10);
        });
@@ -673,6 +689,34 @@
        section = section || $choosedSection;

        var $section;
+        if($.isArray(section)) {
+            var docIndex = dataset[INDEX_JSON];
+            if(docIndex && section.length > 1) {
+                var sectionId = section[1];
+                var sections = docIndex.chapters[section[0]].sections;
+                var ok = false;
+                for(var i in sections) {
+                    var s = sections[i];
+                    if(s.id === sectionId) {
+                        if(section.length > 2) {
+                            topic = section[2];
+                        }
+                        section = s;
+                        ok = true;
+                        break;
+                    }
+                }
+                if(!ok) {
+                    console.error("Open section failed: can't find the section with id " + section.join('-'));
+                    return;
+                }
+            } else {
+                if(debug) {
+                    console.error("Open section stop by null docIndex or wrong section value.");
+                }
+                return;
+            }
+        }
        if($.isPlainObject(section)) {
            $section = $('#section-' + section.chapter + '-' + section.id);
        } else {
@@ -701,6 +745,8 @@
        }
    };

+    window.openS = openSection;
+
    var resizePage = function() {
        if($body.hasClass('page-show-out') || $page.hasClass('loading')) return;
        var height;
@@ -711,7 +757,6 @@
            height = Math.min($pageContainer.outerHeight(), $pageHeader.outerHeight() + $pageContent.outerHeight() + 50);
        }
        $page.css('height', height);
-        console.log('resize page height to ', height);
    };

    $(function() {
@@ -742,7 +787,18 @@
        });
        bestPageWidth = $grid.children('.container').outerWidth();
        $body.toggleClass(PAGE_SHOW_FULL, $.store.get(PAGE_SHOW_FULL, false));
-        loadData(INDEX_JSON, displaySection);
+        loadData(INDEX_JSON, function(data){
+            displaySection(data);
+            var hash = window.location.hash
+            if(hash) {
+                hash = hash.substr(1);
+                setTimeout(function(){
+                    openSection(hash.split('-'));
+                }, 300);
+            } else {
+                $queryInput.focus();
+            }
+        });

        // Bind events
        $(document).on('click', function(e){
@@ -785,6 +841,7 @@
            closePage();
        }).on('click', '.path-max-btn', function(){
            $body.toggleClass(PAGE_SHOW_FULL);
+            setTimeout(resizePage, 300);
            $.store.set(PAGE_SHOW_FULL, $body.hasClass(PAGE_SHOW_FULL));
        });

@@ -808,7 +865,7 @@
            }
        }).on('keydown', function(e){
            var code = e.which;
-            console.log('keydown', code);
+            // console.log('keydown', code);
            var isPageNotShow = !$body.hasClass('page-show');
            if(code === 13) { // Enter
                if(isPageNotShow && isChoosedSection()) {
@@ -837,12 +894,14 @@
            } else if(code === 38) { // Top
                if(isPageNotShow) {
                    choosePrevSection();
+                    e.preventDefault();
                } else {
                    scrollToThis($pageBody, 'up');
                }
            } else if(code === 40) { // Down
                if(isPageNotShow) {
                    chooseNextSection();
+                    e.preventDefault();
                } else {
                    scrollToThis($pageBody);
                }

--- a/src/less/doc.less
+++ b/src/less/doc.less
@@ -598,6 +598,10 @@ body {
      font-size: 16px;
      margin: 0;
      padding: 6px 0;
+
+      > a.name {
+        color: @color-fore;
+      }
    }

    > small {
@@ -802,7 +806,7 @@ body.input-query-focus {
 }
 #page {
  position: relative;
-  background-color: #fff;
+  background-color: fade(#fff, 80%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25), 0 120px 220px @color-gray-pale;

  &.with-shadow #pageHeader {
@@ -846,6 +850,16 @@ body.input-query-focus {
      line-height: 16px;
      font-size: 16px;
      margin: 0;
+
+      > a.name {
+        color: @color-fore;
+
+        &:hover {
+          text-decoration: none;
+          color: @color-fore;
+          cursor: normal;
+        }
+      }
    }
  }

@@ -972,6 +986,7 @@ body.page-show {
  #page {
    overflow: hidden;
    .transition-fast();
+    // transition: all 8s;
  }

  #grid {
@@ -1021,6 +1036,7 @@ body.page-show {
    }

    #page {
+      background-color: #fff;
      opacity: 1;
      left: 0!important;
      top: 0!important;