* change document UI.

docs/2/css/doc.css

 /*!
- * ZUI - v1.2.1 - 2015-04-18
+ * ZUI - v1.3.0 - 2015-04-18
  * http://zui.sexy
  * GitHub: https://github.com/easysoft/zui.git 
  * Copyright (c) 2015 cnezsoft.com; Licensed MIT
@@ -397,7 +397,7 @@ body {
   margin-bottom: 10px;
   background-color: #fff;
   border-color: #fff;
-  border-radius: 2px;
+  border-radius: 0;
   -webkit-box-shadow: none;
           box-shadow: none;
   -webkit-transition: all .1s cubic-bezier(.175, .885, .32, 1);

docs/2/js/doc.js

 /*!
- * ZUI - v1.2.1 - 2015-04-17
+ * ZUI - v1.3.0 - 2015-04-18
  * http://zui.sexy
  * GitHub: https://github.com/easysoft/zui.git 
  * Copyright (c) 2015 cnezsoft.com; Licensed MIT
@@ -51,8 +51,9 @@
     var LAST_QUERY_ID = 'LAST_QUERY_ID';
     var INDEX_JSON = 'index.json';
     var UNDEFINED = undefined;
+    var PAGE_SHOW_FULL = 'page-show-full';
     var dataset = {
-        'index.json': null
+        // 'index.json': null
     };
     if(debug) window.dataset = dataset;
 
@@ -61,7 +62,7 @@
     var $body, $window, $grid, $sectionTemplate,
         $queryInput, $chapters, $chaptersCols,
         $choosedSection, $page, $pageHeader, $pageContent, 
-        $pageContainer, $pageBody,
+        $pageContainer, $pageBody, $navbar,
         $header, $sections, $chapterHeadings; // elements
 
     var checkScrollbar = function()
@@ -76,24 +77,26 @@
             $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);
+            $navbar.css('padding-right', scrollBarWidth);
         }
     };
 
     var resetScrollbar = function()
     {
         $body.css('padding-right', '');
+        $navbar.css('padding-right', '');
     };
 
-
     var loadData = function(url, callback, forceLoad) {
         var data = dataset[url];
         var isFirstLoad = data === UNDEFINED || data === null;
         if(isFirstLoad) {
             data = $.store.get(url, null);
-            console.log(url, data);
             dataset[url] = data;
             if(data !== null) {
                 if(debug) {
@@ -163,10 +166,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');
@@ -615,13 +619,13 @@
     };
 
     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.removeClass('page-show-in');
+            $body.addClass('page-show-out').removeClass('page-open page-show-in');
             setTimeout(function(){
-                $body.removeClass('page-show');
+                $body.removeClass('page-show page-show-out');
                 resetScrollbar();
             }, 300);
             return true;
@@ -630,43 +634,59 @@
     };
 
     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('');
-        $page.addClass('loading');
+        var $loader = $page.addClass('loading').find('.loader').addClass('loading');
 
         loadData(section.url, function(data){
             $page.removeClass('loading');
+            $loader.removeClass('loading');
             $pageContent.html(data);
             $queryInput.blur();
             $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();
             var style = {
                 left: offset.left - $grid.children('.container').offset().left - 6,
-                top: offset.top - $window.scrollTop() - 80,
+                top: offset.top - $window.scrollTop() - 81,
                 width: $section.outerWidth(),
                 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);
                 $pageBody.scrollTop(0);
                 setTimeout(function(){
+                    $page.removeClass('openning');
                     bestPageWidth = $pageBody.css('width', '').width() + 40;
+                    resizePage();
                 }, 310);
             }, 10);
         });
@@ -676,6 +696,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 {
@@ -704,9 +752,18 @@
         }
     };
 
+    window.openS = openSection;
+
     var resizePage = function() {
-        if(!$body.hasClass('page-show-in') || $page.hasClass('loading')) return;
-        $page.css('height', Math.min($pageContainer.outerHeight(), $pageHeader.outerHeight() + $pageContent.outerHeight() + 50));
+        if($body.hasClass('page-show-out') || $page.hasClass('loading')) return;
+        var height;
+        if($body.hasClass(PAGE_SHOW_FULL)) {
+            height = $window.height();
+            $pageBody.toggleClass('with-scrollbar', $pageContent.outerHeight() > (height - 40 - $pageHeader.outerHeight()));
+        } else {
+            height = Math.min($pageContainer.outerHeight(), $pageHeader.outerHeight() + $pageContent.outerHeight() + 50);
+        }
+        $page.css('height', height);
     };
 
     $(function() {
@@ -716,6 +773,7 @@
 
         $window = $(window);
         $body = $('body');
+        $navbar = $('#navbar');
         $grid = $('#grid');
         $header = $('#header');
         $chaptersCols = $grid.find('.col');
@@ -735,8 +793,19 @@
             chapter.$sections = $('#sections-' + chapterId);
         });
         bestPageWidth = $grid.children('.container').outerWidth();
-
-        loadData(INDEX_JSON, displaySection)
+        $body.toggleClass(PAGE_SHOW_FULL, $.store.get(PAGE_SHOW_FULL, false));
+        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){
@@ -777,6 +846,10 @@
 
         $pageHeader.on('click', '.path-close-btn', function(){
             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));
         });
 
         var scrollHeight = $('#navbar').outerHeight();
@@ -799,7 +872,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()) {
@@ -828,12 +901,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);
                 }

docs/js/zui.js

 /*!
- * ZUI - v1.2.1 - 2015-04-17
+ * ZUI - v1.3.0 - 2015-04-18
  * http://zui.sexy
  * GitHub: https://github.com/easysoft/zui.git 
  * Copyright (c) 2015 cnezsoft.com; Licensed MIT

docs/js/zui.min.js

 /*!
- * ZUI - v1.2.1 - 2015-04-17
+ * ZUI - v1.3.0 - 2015-04-18
  * http://zui.sexy
  * GitHub: https://github.com/easysoft/zui.git 
  * Copyright (c) 2015 cnezsoft.com; Licensed MIT

src/js/doc.js

@@ -45,11 +45,14 @@
     var INDEX_JSON = 'index.json';
     var UNDEFINED = undefined;
     var PAGE_SHOW_FULL = 'page-show-full';
+    var dataVersion;
+    var storageEnable;
     var dataset = {
         // 'index.json': null
     };
     if(debug) window.dataset = dataset;
 
+    var sectionsShowed;
     var scrollBarWidth = -1;
     var bestPageWidth = 1120;
     var $body, $window, $grid, $sectionTemplate,
@@ -58,6 +61,13 @@
         $pageContainer, $pageBody, $navbar,
         $header, $sections, $chapterHeadings; // elements
 
+    var limitString = function(str, len) {
+        if(str && str.length > len) {
+            return str.substr(0, len) + '...[' + str.length + ']';
+        }
+        return str;
+    };
+
     var checkScrollbar = function()
     {
         if (document.body.clientWidth >= window.innerWidth) return;
@@ -70,8 +80,6 @@
             $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);
@@ -85,42 +93,57 @@
         $navbar.css('padding-right', '');
     };
 
-    var loadData = function(url, callback, forceLoad) {
-        var data = dataset[url];
-        var isFirstLoad = data === UNDEFINED || data === null;
-        if(isFirstLoad) {
-            data = $.store.get(url, null);
-            dataset[url] = data;
-            if(data !== null) {
-                if(debug) {
-                    console.log('Load data from storage: ', url, ', size:', data.length);
+    var loadData = function(url, callback) {
+        var cacheData = dataset[url];
+        var isHasCache = cacheData && cacheData.version;
+        var isIndexJson = url === INDEX_JSON;
+        if(!isHasCache && storageEnable) {
+            var storedData = $.store.get('//' + url, null);
+            if(storedData !== null) {
+                var storedVersion = $.store.get('//' + url + '::V');
+                if(storedVersion) {
+                    cacheData = {data: storedData, version: storedVersion};
+                    dataset[url] = cacheData;
+                    isHasCache = true;
+                    if(debug) console.log('Load', url, 'from storage:', cacheData);
                 }
-                callback(data);
             }
-        } else if(data !== null) {
-            if(debug) console.log('Load data from cache: ', url, ', size:', data.length);
-            callback(data);
         }
 
-        if(isFirstLoad || data === null || forceLoad || isFirstLoad || (!saveTraffic)) {
-            var dataType = url.endsWith('.json') ? 'json' : 'html';
-            $.get(url, function(remoteData){
-                if(!debug && data !== null) {
-                    if(dataType === 'json' && $.isPlainObject(remoteData) && data.version && remoteData.version && remoteData.version === data.version) return;
-                    if(dataType === 'html' && data === remoteData) return;
-                }
-                dataset[url] = remoteData;
-                if(debug) {
-                    console.log('Load data from remote: ', url, ', size:', remoteData.length);
-                }
-                callback(remoteData);
-                $.store.set(url, remoteData);
-            }, dataType);
+        if(isHasCache && (isIndexJson || cacheData.version === dataVersion)) {
+            if(debug) console.log('Load', url, 'from cache:', cacheData);
+            callback(cacheData.data);
+            if(!isIndexJson) return;
         }
+
+        var dataType = url.endsWith('.json') ? 'json' : 'html';
+        $.get(url, function(data){
+            if(data !== null) {
+                if(isIndexJson) {
+                    dataVersion = data.version;
+                }
+                cacheData = {data: data, version: dataVersion};
+                dataset[url] = cacheData;
+                $.store.set('//' + url, data);
+                $.store.set('//' + url + '::V', dataVersion);
+
+                if(debug) console.log('Load', url, 'from remote:', cacheData);
+                callback(data);
+            } else if(isHasCache && !isIndexJson) {
+                if(debug) console.log('Failed load', url, 'from remote, instead load cache:', cacheData);
+                callback(cacheData.data);
+            }
+        }, dataType).error(function(){
+            if(debug) console.error("Ajax error:", url);
+            if(isHasCache && !isIndexJson) {
+                if(debug) console.log('Failed load', url, 'from remote with error, instead load cache:', cacheData);
+                callback(cacheData.data);
+            }
+        });
     };
 
     var eachSection = function(callback, eachChapterCallback) {
-        var docIndex = dataset[INDEX_JSON];
+        var docIndex = dataset[INDEX_JSON].data;
         if (!docIndex) {
             console.error("Document index is empty.");
             return false;
@@ -177,18 +200,21 @@
                 $topics.remove('.card-content');
                 $tpl.addClass('without-topics');
             }
-            $sectionList.append($tpl.addClass('show'));
+            $sectionList.append($tpl.addClass('show' + (sectionsShowed ? ' in' : '')));
         }, function(chapter, sections){
             var $sectionList = chapter.$sections;
             $sectionList.children().remove();
             return $sectionList;
         })) {
             $body.children('.loader').removeClass('loading');
-            clearTimeout($grid.data(LAST_RELOAD_ANIMATE_ID));
-            $grid.data(LAST_RELOAD_ANIMATE_ID, setTimeout(function(){
-                $sections = $grid.find('.section').addClass('in');
-                $chapterHeadings.addClass('in');
-            }, 100));
+            if(!sectionsShowed) {
+                clearTimeout($grid.data(LAST_RELOAD_ANIMATE_ID));
+                $grid.data(LAST_RELOAD_ANIMATE_ID, setTimeout(function(){
+                    $sections = $grid.find('.section').addClass('in');
+                    $chapterHeadings.addClass('in');
+                }, 100));
+                sectionsShowed = true;
+            }
         } else if(debug) {
             console.error("Display sections failed.");
         }
@@ -662,7 +688,7 @@
             var sectionHeight = $section.outerHeight();
             var style = {
                 left: offset.left - $grid.children('.container').offset().left - 6,
-                top: offset.top - $window.scrollTop() - 80,
+                top: offset.top - $window.scrollTop() - 81,
                 width: $section.outerWidth(),
                 height: sectionHeight,
                 'max-height': sectionHeight
@@ -690,7 +716,7 @@
 
         var $section;
         if($.isArray(section)) {
-            var docIndex = dataset[INDEX_JSON];
+            var docIndex = dataset[INDEX_JSON].data;
             if(docIndex && section.length > 1) {
                 var sectionId = section[1];
                 var sections = docIndex.chapters[section[0]].sections;
@@ -785,8 +811,21 @@
             chapter.id = chapterId;
             chapter.$sections = $('#sections-' + chapterId);
         });
+
         bestPageWidth = $grid.children('.container').outerWidth();
+
         $body.toggleClass(PAGE_SHOW_FULL, $.store.get(PAGE_SHOW_FULL, false));
+
+        // check storage
+        storageEnable = $.store && $.store.enable;
+
+        // Get document version
+        // dataVersion = $body.data('version');
+
+        // Setup ajax
+        $.ajaxSetup({cache: false});
+        
+        // Load index.json
         loadData(INDEX_JSON, function(data){
             displaySection(data);
             var hash = window.location.hash

src/js/store.js

@@ -131,7 +131,12 @@
     Store.prototype.get = function(key, defaultValue)
     {
         var val = this.deserialize(this.getItem(key));
-        return (defaultValue !== undefined && (typeof val === 'undefined' || val === null || val === undefined)) ? defaultValue : val;
+        if(typeof val === 'undefined' || val === null) {
+            if(typeof defaultValue !== 'undefined') {
+                return defaultValue;
+            }
+        }
+        return val;
     };
 
     /* Get item key by index and deserialize it */

src/less/doc.less

@@ -521,7 +521,7 @@ body {
     background-color: #fff;
     .transition-quickly();
     display: none;
-    border-radius: 2px;
+    border-radius: 0;
     margin-bottom: 10px;
     border-color: #fff;
     box-shadow: none;