* make page sections foldable.

0b38c496 · Catouse · af2c1321 · 0b38c496 · 0b38c496 · 0b38c496
13 changed file
--- a/docs/2/css/doc.css
+++ b/docs/2/css/doc.css
@@ -314,7 +314,7 @@ body {
  background-color: rgba(0, 0, 0, .2);
 }
 #navbar .navbar-nav > li > a > .icon {
-  font-size: 20px;
+  font-size: 18px;
 }
 #navbar .navbar-brand {
  position: relative;
@@ -1340,44 +1340,161 @@ body.query-enabled[data-query='icons'] #grid .card.open.section-preview-show .se
  top: 110px;
  bottom: 0;
  width: 100%;
-  padding: 20px;
+  padding: 20px 10px 20px 20px;
  overflow-y: auto;
 }
 #pageContent {
  position: relative;
-  padding-left: 60px;
+  padding-left: 50px;
 }
 #pageContent:before {
  position: absolute;
  top: -20px;
-  bottom: -20px;
+  bottom: -25px;
  left: 24px;
  display: block;
  content: ' ';
  border-left: 1px dotted #e5e5e5;
 }
-#pageContent > h3 {
+#pageContent > section > article,
+#pageContent > section > header,
+#pageContent > article {
+  padding-right: 10px;
+  padding-left: 10px;
+}
+#pageContent > section {
  position: relative;
-  padding: 20px 0 10px;
+}
+#pageContent > section:before {
+  position: absolute;
+  top: 28px;
+  bottom: -25px;
+  left: -26px;
+  display: block;
+  content: ' ';
+  border-left: 1px dotted transparent;
+}
+#pageContent > section > header {
+  position: relative;
+  padding-top: 20px;
+  padding-bottom: 10px;
+}
+#pageContent > section > header > h3 {
+  display: inline-block;
  margin: 0;
+  cursor: pointer;
 }
-#pageContent > h3:before {
+#pageContent > section > header > h3:before,
+#pageContent > section > header > h3:after {
  position: absolute;
-  top: 4px;
-  left: -41px;
+  top: 26px;
+  left: -26px;
+  content: ' ';
+  -webkit-transition: background-color .3s cubic-bezier(.175, .885, .32, 1);
+       -o-transition: background-color .3s cubic-bezier(.175, .885, .32, 1);
+          transition: background-color .3s cubic-bezier(.175, .885, .32, 1);
+}
+#pageContent > section > header > h3:before {
+  display: none;
+  width: 1px;
+  height: 7px;
+}
+#pageContent > section > header > h3:after {
+  top: 29px;
+  left: -29px;
+  width: 7px;
+  height: 1px;
+}
+#pageContent > section > header:before {
+  position: absolute;
+  top: 24px;
+  left: -31px;
  display: block;
-  width: 10px;
-  height: 10px;
+  width: 11px;
+  height: 11px;
  content: ' ';
-  background-color: #fff;
+  background-color: #ddd;
  border-radius: 5px;
+  -webkit-transition: background-color .3s cubic-bezier(.175, .885, .32, 1);
+       -o-transition: background-color .3s cubic-bezier(.175, .885, .32, 1);
+          transition: background-color .3s cubic-bezier(.175, .885, .32, 1);
+}
+#pageContent > section > header:after {
+  position: absolute;
+  top: 28px;
+  left: -20px;
+  display: block;
+  width: 24px;
+  content: ' ';
+  border-bottom: 1px dotted #e5e5e5;
+}
+#pageContent > section.hover > header h3:before,
+#pageContent > section.hover > header h3:after {
+  background-color: #fff;
+}
+#pageContent > section.hover.collapsed > header > h3:before {
+  display: block;
+}
+#pageContent > section > article {
+  height: auto;
+  -webkit-transition: opacity .3s cubic-bezier(.175, .885, .32, 1), height .3s cubic-bezier(.175, .885, .32, 1);
+       -o-transition: opacity .3s cubic-bezier(.175, .885, .32, 1), height .3s cubic-bezier(.175, .885, .32, 1);
+          transition: opacity .3s cubic-bezier(.175, .885, .32, 1), height .3s cubic-bezier(.175, .885, .32, 1);
+}
+#pageContent > section.collapsed:before {
+  display: none;
+}
+#pageContent > section.collapsed > article {
+  height: 0;
+  overflow: hidden;
+  opacity: 0;
+}
+#pageTogger {
+  position: absolute;
+  top: 18px;
+  left: 35px;
+  z-index: 10;
+  width: 19px;
+  height: 19px;
+  padding: 0;
+  color: #ddd;
+  background-color: #fff;
+  border: 1px solid #e5e5e5;
+  border-radius: 10px;
+  outline: none;
+}
+#pageTogger:before,
+#pageTogger:after {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  display: block;
+  content: ' ';
+  background-color: #ddd;
+  -webkit-transition: background-color .5s cubic-bezier(.175, .885, .32, 1);
+       -o-transition: background-color .5s cubic-bezier(.175, .885, .32, 1);
+          transition: background-color .5s cubic-bezier(.175, .885, .32, 1);
+}
+#pageTogger:before {
+  left: 8px;
+  display: none;
+  width: 1px;
+  height: 9px;
+}
+#pageTogger:after {
+  top: 8px;
+  width: 9px;
+  height: 1px;
+}
+#pageBody.collapsed #pageTogger:before {
+  display: block;
 }
 body.compact-mode #header,
 body.compact-mode #heading,
 body.compact-mode #search {
-  -webkit-transition: padding .5s cubic-bezier(.175, .885, .32, 1), height .5s cubic-bezier(.175, .885, .32, 1), opcity .5s cubic-bezier(.175, .885, .32, 1);
-       -o-transition: padding .5s cubic-bezier(.175, .885, .32, 1), height .5s cubic-bezier(.175, .885, .32, 1), opcity .5s cubic-bezier(.175, .885, .32, 1);
-          transition: padding .5s cubic-bezier(.175, .885, .32, 1), height .5s cubic-bezier(.175, .885, .32, 1), opcity .5s cubic-bezier(.175, .885, .32, 1);
+  -webkit-transition: padding .5s cubic-bezier(.175, .885, .32, 1), height .5s cubic-bezier(.175, .885, .32, 1), opcity .5s cubic-bezier(.175, .885, .32, 1), background-color .5s cubic-bezier(.175, .885, .32, 1);
+       -o-transition: padding .5s cubic-bezier(.175, .885, .32, 1), height .5s cubic-bezier(.175, .885, .32, 1), opcity .5s cubic-bezier(.175, .885, .32, 1), background-color .5s cubic-bezier(.175, .885, .32, 1);
+          transition: padding .5s cubic-bezier(.175, .885, .32, 1), height .5s cubic-bezier(.175, .885, .32, 1), opcity .5s cubic-bezier(.175, .885, .32, 1), background-color .5s cubic-bezier(.175, .885, .32, 1);
 }
 body.compact-mode #header {
  position: fixed;
@@ -1554,7 +1671,7 @@ body.page-show.page-show-full #pageContainer > .container {
 }
 body.page-show.page-show-full #pageContent {
  max-width: 1160px;
-  padding: 0 20px 0 80px;
+  padding: 0 20px 0 70px;
  margin: 0 auto;
 }
 body.page-show.page-show-full #pageContent:before {
@@ -1645,9 +1762,28 @@ body.page-show[data-page-accent="blue"] #pageHeader > .wrapper > .icon {
  color: #fff;
  background-color: #00acc1;
 }
-body.page-show[data-page-accent="blue"] #pageContent > h3:before {
+body.page-show[data-page-accent="blue"] #pageContent > section > header:before {
  background-color: #d3f4f7;
 }
+body.page-show[data-page-accent="blue"] #pageContent > section.hover > header:before {
+  background-color: #00acc1;
+}
+body.page-show[data-page-accent="blue"] #pageContent > section.hover > header:after {
+  border-color: #00acc1;
+}
+body.page-show[data-page-accent="blue"] #pageContent > section.hover > header > h3 {
+  color: #00acc1;
+}
+body.page-show[data-page-accent="blue"] #pageContent > section.hover:before {
+  border-color: #00acc1;
+}
+body.page-show[data-page-accent="blue"] #pageTogger:hover {
+  border-color: #00acc1;
+}
+body.page-show[data-page-accent="blue"] #pageTogger:hover:before,
+body.page-show[data-page-accent="blue"] #pageTogger:hover:after {
+  background-color: #00acc1;
+}
 body.page-show[data-page-accent="primary"] .path-zui-36:before,
 body.page-show[data-page-accent="primary"] .path-zui-36:after {
  border-color: #3280fc;
@@ -1669,9 +1805,28 @@ body.page-show[data-page-accent="primary"] #pageHeader > .wrapper > .icon {
  color: #fff;
  background-color: #3280fc;
 }
-body.page-show[data-page-accent="primary"] #pageContent > h3:before {
+body.page-show[data-page-accent="primary"] #pageContent > section > header:before {
  background-color: #d6e6fe;
 }
+body.page-show[data-page-accent="primary"] #pageContent > section.hover > header:before {
+  background-color: #3280fc;
+}
+body.page-show[data-page-accent="primary"] #pageContent > section.hover > header:after {
+  border-color: #3280fc;
+}
+body.page-show[data-page-accent="primary"] #pageContent > section.hover > header > h3 {
+  color: #3280fc;
+}
+body.page-show[data-page-accent="primary"] #pageContent > section.hover:before {
+  border-color: #3280fc;
+}
+body.page-show[data-page-accent="primary"] #pageTogger:hover {
+  border-color: #3280fc;
+}
+body.page-show[data-page-accent="primary"] #pageTogger:hover:before,
+body.page-show[data-page-accent="primary"] #pageTogger:hover:after {
+  background-color: #3280fc;
+}
 body.page-show[data-page-accent="yellow"] .path-zui-36:before,
 body.page-show[data-page-accent="yellow"] .path-zui-36:after {
  border-color: #fd9927;
@@ -1693,9 +1848,28 @@ body.page-show[data-page-accent="yellow"] #pageHeader > .wrapper > .icon {
  color: #fff;
  background-color: #fd9927;
 }
-body.page-show[data-page-accent="yellow"] #pageContent > h3:before {
+body.page-show[data-page-accent="yellow"] #pageContent > section > header:before {
  background-color: #ffebd4;
 }
+body.page-show[data-page-accent="yellow"] #pageContent > section.hover > header:before {
+  background-color: #fd9927;
+}
+body.page-show[data-page-accent="yellow"] #pageContent > section.hover > header:after {
+  border-color: #fd9927;
+}
+body.page-show[data-page-accent="yellow"] #pageContent > section.hover > header > h3 {
+  color: #fd9927;
+}
+body.page-show[data-page-accent="yellow"] #pageContent > section.hover:before {
+  border-color: #fd9927;
+}
+body.page-show[data-page-accent="yellow"] #pageTogger:hover {
+  border-color: #fd9927;
+}
+body.page-show[data-page-accent="yellow"] #pageTogger:hover:before,
+body.page-show[data-page-accent="yellow"] #pageTogger:hover:after {
+  background-color: #fd9927;
+}
 body.page-show[data-page-accent="green"] .path-zui-36:before,
 body.page-show[data-page-accent="green"] .path-zui-36:after {
  border-color: #2fb936;
@@ -1717,9 +1891,28 @@ body.page-show[data-page-accent="green"] #pageHeader > .wrapper > .icon {
  color: #fff;
  background-color: #2fb936;
 }
-body.page-show[data-page-accent="green"] #pageContent > h3:before {
+body.page-show[data-page-accent="green"] #pageContent > section > header:before {
  background-color: #d5f1d7;
 }
+body.page-show[data-page-accent="green"] #pageContent > section.hover > header:before {
+  background-color: #2fb936;
+}
+body.page-show[data-page-accent="green"] #pageContent > section.hover > header:after {
+  border-color: #2fb936;
+}
+body.page-show[data-page-accent="green"] #pageContent > section.hover > header > h3 {
+  color: #2fb936;
+}
+body.page-show[data-page-accent="green"] #pageContent > section.hover:before {
+  border-color: #2fb936;
+}
+body.page-show[data-page-accent="green"] #pageTogger:hover {
+  border-color: #2fb936;
+}
+body.page-show[data-page-accent="green"] #pageTogger:hover:before,
+body.page-show[data-page-accent="green"] #pageTogger:hover:after {
+  background-color: #2fb936;
+}
 body.page-show[data-page-accent="red"] .path-zui-36:before,
 body.page-show[data-page-accent="red"] .path-zui-36:after {
  border-color: #ee4e2f;
@@ -1741,9 +1934,28 @@ body.page-show[data-page-accent="red"] #pageHeader > .wrapper > .icon {
  color: #fff;
  background-color: #ee4e2f;
 }
-body.page-show[data-page-accent="red"] #pageContent > h3:before {
+body.page-show[data-page-accent="red"] #pageContent > section > header:before {
  background-color: #fcdcd5;
 }
+body.page-show[data-page-accent="red"] #pageContent > section.hover > header:before {
+  background-color: #ee4e2f;
+}
+body.page-show[data-page-accent="red"] #pageContent > section.hover > header:after {
+  border-color: #ee4e2f;
+}
+body.page-show[data-page-accent="red"] #pageContent > section.hover > header > h3 {
+  color: #ee4e2f;
+}
+body.page-show[data-page-accent="red"] #pageContent > section.hover:before {
+  border-color: #ee4e2f;
+}
+body.page-show[data-page-accent="red"] #pageTogger:hover {
+  border-color: #ee4e2f;
+}
+body.page-show[data-page-accent="red"] #pageTogger:hover:before,
+body.page-show[data-page-accent="red"] #pageTogger:hover:after {
+  background-color: #ee4e2f;
+}
 body.page-show[data-page-accent="brown"] .path-zui-36:before,
 body.page-show[data-page-accent="brown"] .path-zui-36:after {
  border-color: #bd7b46;
@@ -1765,9 +1977,28 @@ body.page-show[data-page-accent="brown"] #pageHeader > .wrapper > .icon {
  color: #fff;
  background-color: #bd7b46;
 }
-body.page-show[data-page-accent="brown"] #pageContent > h3:before {
+body.page-show[data-page-accent="brown"] #pageContent > section > header:before {
  background-color: #f2e5da;
 }
+body.page-show[data-page-accent="brown"] #pageContent > section.hover > header:before {
+  background-color: #bd7b46;
+}
+body.page-show[data-page-accent="brown"] #pageContent > section.hover > header:after {
+  border-color: #bd7b46;
+}
+body.page-show[data-page-accent="brown"] #pageContent > section.hover > header > h3 {
+  color: #bd7b46;
+}
+body.page-show[data-page-accent="brown"] #pageContent > section.hover:before {
+  border-color: #bd7b46;
+}
+body.page-show[data-page-accent="brown"] #pageTogger:hover {
+  border-color: #bd7b46;
+}
+body.page-show[data-page-accent="brown"] #pageTogger:hover:before,
+body.page-show[data-page-accent="brown"] #pageTogger:hover:after {
+  background-color: #bd7b46;
+}
 body.page-show[data-page-accent="purple"] .path-zui-36:before,
 body.page-show[data-page-accent="purple"] .path-zui-36:after {
  border-color: #8666b8;
@@ -1789,8 +2020,27 @@ body.page-show[data-page-accent="purple"] #pageHeader > .wrapper > .icon {
  color: #fff;
  background-color: #8666b8;
 }
-body.page-show[data-page-accent="purple"] #pageContent > h3:before {
+body.page-show[data-page-accent="purple"] #pageContent > section > header:before {
  background-color: #e7e0f1;
 }
+body.page-show[data-page-accent="purple"] #pageContent > section.hover > header:before {
+  background-color: #8666b8;
+}
+body.page-show[data-page-accent="purple"] #pageContent > section.hover > header:after {
+  border-color: #8666b8;
+}
+body.page-show[data-page-accent="purple"] #pageContent > section.hover > header > h3 {
+  color: #8666b8;
+}
+body.page-show[data-page-accent="purple"] #pageContent > section.hover:before {
+  border-color: #8666b8;
+}
+body.page-show[data-page-accent="purple"] #pageTogger:hover {
+  border-color: #8666b8;
+}
+body.page-show[data-page-accent="purple"] #pageTogger:hover:before,
+body.page-show[data-page-accent="purple"] #pageTogger:hover:after {
+  background-color: #8666b8;
+}

 /*# sourceMappingURL=doc.css.map */
--- 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
@@ -69,6 +69,7 @@
          </div>
          <div id="pageBody" class="scrollbar-hover">
            <div class="text-muted loader"><i class="icon icon-spin icon-spinner"></i> 正在拼命加载中...</div>
+            <button type="button" class="btn btn-link" id="pageTogger"></button>
            <div id="pageContent"></div>
            <nav></nav>
          </div>

--- a/docs/2/js/doc.js
+++ b/docs/2/js/doc.js
 /*!
- * ZUI - v1.3.0 - 2015-04-22
+ * ZUI - v1.3.0 - 2015-04-23
 * http://zui.sexy
 * GitHub: https://github.com/easysoft/zui.git 
 * Copyright (c) 2015 cnezsoft.com; Licensed MIT
@@ -8,6 +8,7 @@
 (function(window, $)
 {
    'use strict';
+
    // Polyfill
    if (!String.prototype.endsWith) {
        String.prototype.endsWith = function(searchString, position) {
@@ -51,6 +52,7 @@
    var LAST_RELOAD_ANIMATE_ID = 'lastReloadAnimate';
    var LAST_QUERY_ID = 'LAST_QUERY_ID';
    var INDEX_JSON = 'index.json';
+    var ICONS_JSON = 'icons.json';
    var UNDEFINED = undefined;
    var PAGE_SHOW_FULL = 'page-show-full';
    var dataVersion;
@@ -130,7 +132,7 @@
        if(isHasCache && (isIndexJson || cacheData.version === dataVersion)) {
            if(debug) console.log('Load', url, 'from cache:', cacheData);
            callback(cacheData.data);
-            if(!isIndexJson) return;
+            if(!isIndexJson && !debug) return;
        }

        var dataType = url.endsWith('.json') ? 'json' : 'html';
@@ -212,15 +214,16 @@
                'data-accent': chapter.accent
            });
            var $head = $tpl.children('.card-heading');
-            $head.find('.name').text(section.name).attr('href', '#' + chapterName + '/' + section.id);
+            var sectionUrl = '#' + chapterName + '/' + section.id;
+            $head.find('.name').text(section.name).attr('href', sectionUrl);
            $head.children('.desc').text(section.desc);
            displaySectionIcon($head.children('.icon'), section);
            var $topics = $tpl.find('.topics');
            if (section.topics && section.topics.length) {
                for (var tName in section.topics) {
                    var topic = section.topics[tName];
-                    topic.id = tName;
-                    $topics.append('<li data-id="' + tName + '">' + topic.name + '</li>');
+                    if(typeof topic.id === 'undefined') topic.id = tName;
+                    $topics.append('<li data-id="' + tName + '"><a href="' + sectionUrl + '/' + topic.id + '">' + topic.name + '</a></li>');
                }
            } else {
                $topics.remove('.card-content');
@@ -404,7 +407,123 @@
            $sections.addClass('in');
            $chapterHeadings.addClass('in');
        }, 20));
-        $body.removeClass('query-enabled');
+        $body.removeClass('query-enabled').attr('data-query', '');
+    };
+
+    var chooseIcon = function($icon){
+        var $search = $('#section-control-icons');
+        if(!$icon || !$icon.length) {
+            $search.removeClass('section-preview-show').data('preview', null);
+            return;
+        }
+        $search.addClass('open section-preview-show');
+        var $preview = $search.children('.section-preview');
+        var oldIcon = $search.data('preview');
+        if(!$preview.length) {
+            $preview = $('<div class="card-content section-preview icon-preview"><div class="icons"><i class="icon icon-10x"></i><i class="icon icon-5x"></i><i class="icon icon-2x"></i><i class="icon"></i></div><h3><small><i class="icon "></i></small> <span class="name color-accent"></span>  <small>Unicode: \\<span class="unicode">f3dd</span><span class="alias"> · 别名：<span class="alias-values"></span></span></small></h3><pre><code>&lt;i class=&quot;icon <span class="name"></span>&quot;&gt;&lt;/i&gt;</code></pre></div>');
+            $search.children('.card-heading').after($preview);
+        }
+        $search.children('.section-search').find('li.active').removeClass('active');
+        $icon.addClass('active');
+        if(oldIcon) $preview.find('.icon').removeClass('icon-' + oldIcon);
+        var icon = $icon.data('icon');
+        $search.data('preview', icon.id);
+        var id = 'icon-' + icon.id;
+        $preview.find('.icon').addClass(id);
+        $preview.find('.name').text(id);
+        $preview.find('.unicode').text(icon.code);
+        if(icon.alias && icon.alias.length) {
+            $preview.find('.alias').removeClass('hide').find('.alias-values').text(icon.alias.join(','));
+        } else {
+            $preview.find('.alias').addClass('hide');
+        }
+    };
+
+    var queryIcon = function(keys) {
+        if(!$.isArray(keys) && (keys || keys.length) ) {
+            keys = [keys];
+        }
+
+        var $section = $('#section-control-icons');
+        $body.attr('data-query', 'icons');
+        var $search = $section.children('.section-search');
+        if(!$search.length) {
+            $search = $('<div class="section-search card-content"><div class="loader loading"><i class="icon icon-spin icon-spinner"></i> 正在拼命加载中...</div></div>');
+            $section.children('.card-heading').after($search);
+            $search = $section.children('.section-search');
+        }
+
+        loadData(ICONS_JSON, function(data){
+            var $list = $search.children('ul');
+            if(!$list.length) {
+                $list = $('<ul data-view="icons">');
+                $.each(data, function(iconName, icon){
+                    var $li = $('<li id="control-icons-' + iconName + '" data-id="' + iconName + '"><a href="#control/icons/' + iconName + '"><i class="icon icon-' + iconName + '"></i> icon-' + iconName + '</a></li>');
+                    icon.id = iconName;
+                    $li.data('icon', icon);
+                    $list.append($li);
+                });
+                $search.children('.loader').replaceWith($list);
+            }
+
+            if(!keys.length) {
+                $list.children('.hide').removeClass('hide');
+                chooseIcon($list.children().first());
+                return;
+            }
+
+            for(var keyIndex in keys) {
+                keys[keyIndex] = keys[keyIndex].toLowerCase();
+            }
+
+            var $bestMatch, bestMatchWeight = 0;
+            $.each(data, function(iconId, icon){
+                var choosed = false;
+                var weight = 0;
+                iconId = iconId.toLowerCase();
+                $.each(keys, function(keyIndex, key){
+                    var choosedThis = false;
+                    if(iconId.includes(key)) {
+                        choosedThis = true;
+                        weight += iconId.startsWith(key) ? 120: 110;
+                    } else if(icon.name && icon.name.toLowerCase().includes(key)) {
+                        choosedThis = true;
+                        weight += icon.name.toLowerCase().startsWith(key) ? 100: 95;
+                    } else if(key.startsWith('\\') && icon.code && icon.code.toLowerCase().includes(key)) {
+                        choosedThis = true;
+                        weight += 120;
+                    } else {
+                        var filters = [];
+                        if($.isArray(icon.filter) && icon.filter.length) filters = filters.concat(icon.filter);
+                        if($.isArray(icon.categories) && icon.categories.length) filters = filters.concat(icon.categories);
+                        if($.isArray(icon.alias) && icon.alias.length) filters = filters.concat(icon.alias);
+                        if(!filters.length) return;
+                        $.each(filters, function(filterIndex, filter){
+                            filter = filter.toLowerCase();
+                            if(filter.includes(key)) {
+                                choosedThis = true;
+                                weight += 50;
+                                return false;
+                            }
+                        });
+                    }
+
+                    if(!choosedThis) {
+                        choosed = false;
+                        return choosed;
+                    } else {
+                        choosed = true;
+                    }
+                });
+
+                var $li = $('#control-icons-' + iconId).toggleClass('hide', !choosed);
+                if(choosed && bestMatchWeight < weight) {
+                    bestMatchWeight = weight;
+                    $bestMatch = $li;
+                }
+            });
+            chooseIcon($bestMatch);
+        });
    };

    var query = function(keyString) {
@@ -423,7 +542,7 @@
            return;
        }

-        $body.addClass('query-enabled');
+        $body.addClass('query-enabled').attr('data-query', '');

        // Send ga data
        if($.isFunction(ga)) {
@@ -445,7 +564,7 @@
                keyOption.val = key.substr(5);
            } else if(key.startsWith('i:')) {
                keyOption.type = 'icon';
-                keyOption.val = key.substr(1);
+                keyOption.val = key.substr(2);
            } else if(key.startsWith('ver:')) {
                keyOption.type = 'version';
                keyOption.val = key.substr(4);
@@ -475,7 +594,7 @@
                    keyOption.val = key;
                }
            }
-            if(keyOption.val.length) {
+            if(keyOption.val.length || (keyOption.type && keyOption.type !== 'any')) {
                keys.push(keyOption);
            }
        });
@@ -501,9 +620,23 @@
                        weight = 100;
                        break;
                    case 'icon':
-                        chooseThisKey = section.id === 'icons';
-                        if(chooseThisKey) matchType = ['section', 'id'];
-                        weight = 100;
+                        chooseThis = section.id === 'icons';
+                        if(chooseThis) {
+                            weight = 120;
+                            matches.push({key: key, type: ['section', 'id']});
+                            var iconKeys = [];
+                            if(key.val || key.val.length) {
+                                iconKeys.push(key.val);
+                            }
+                            for(var iconKeyIndex in keys) {
+                                var iconKey = keys[iconKeyIndex];
+                                if(iconKey.val !== key.val && (iconKey.val || iconKey.val.length)) {
+                                    iconKeys.push(iconKey.val);
+                                }
+                            }
+                            queryIcon(iconKeys);
+                            return false;
+                        }
                        break;
                    default:
                        var sectionName = section.name.toLowerCase();
@@ -645,7 +778,6 @@
    };

    var toggleCompactMode = function(toggle, callback) {
-        console.log('toggleCompactMode', toggle);
        if(toggle === UNDEFINED) {
            toggle = !$body.hasClass('compact-mode');
        }
@@ -716,7 +848,7 @@
        $body.attr('data-page-accent', $section.data('accent')).attr('data-page', pageId);
        displaySectionIcon($pageHeader.find('.icon'), section);
        $pageHeader.find('.name').text(section.name).attr('href', pageUrl);
-        $pageHeader.children('.desc').text(section.desc);
+        $pageHeader.find('.desc').text(section.desc);
        $pageContent.html('');
        var $loader = $page.addClass('loading').find('.loader').addClass('loading');

@@ -739,8 +871,8 @@
            var offset = $section.offset();
            var sectionHeight = $section.outerHeight();
            var style = {
-                left: offset.left - $grid.children('.container').offset().left - 6,
-                top: offset.top - $window.scrollTop() - 81,
+                left: Math.floor(offset.left - $grid.children('.container').offset().left - 6),
+                top: Math.floor(offset.top - $window.scrollTop() - 61),
                width: $section.outerWidth(),
                height: sectionHeight,
                'max-height': sectionHeight
@@ -912,13 +1044,15 @@
        });

        // Bind events
+        var oldActivePreivewId;
        $(document).on('click', function(e){
            if($body.hasClass('page-show')) {
                closePage();
                return;
            }
-            chooseSection();
-            $sections.removeClass('open');
+            if(!$body.attr('data-query')) {
+                chooseSection();
+            }
        });
        $page.on('click', stopPropagation);
        $grid.on('click', '.card-heading', function(e) {
@@ -943,6 +1077,23 @@
            $(this).closest('.card-heading').addClass('hover');
        }).on('mouseleave', '.card-heading > h5 > .name, .card-heading > .icon', function(){
            $(this).closest('.card-heading').removeClass('hover');
+        }).on('mouseenter', '#section-control-icons .section-search > ul > li > a', function(){
+            oldActivePreivewId = $('#section-control-icons').data('preview');
+            chooseIcon($(this).closest('li'));
+        }).on('mouseleave', '#section-control-icons .section-search > ul > li > a', function(){
+            if(oldActivePreivewId) {
+                chooseIcon($('#control-icons-' + oldActivePreivewId));
+            }
+        }).on('click', '#section-control-icons .section-search > ul > li > a', function(){
+            oldActivePreivewId = $(this).closest('li').data('id');
+        });
+
+        $pageContent.on('click', 'section > header', function(){
+            $(this).closest('section').toggleClass('collapsed');
+        }).on('mouseenter', 'section > header', function(){
+            $(this).closest('section').addClass('hover');
+        }).on('mouseleave', 'section > header', function(){
+            $(this).closest('section').removeClass('hover');
        });

        $pageContent.on('resize', resizePage);
@@ -960,13 +1111,11 @@
        var lastScrollTop;
        $window.on('scroll', function(e){
            var isScrollAnimating = $body.data('isScrollAnimating');
-            console.log('scroll, isScrollAnimating',isScrollAnimating);
            if(isScrollAnimating) {
                $window.scrollTop(1);
                return;
            }
            lastScrollTop = $window.scrollTop();
-            console.log('lastScrollTop', lastScrollTop);
            if(lastScrollTop > scrollHeight && !$body.hasClass('compact-mode')) {
                toggleCompactMode(true);
            } else if(!$body.hasClass('page-show') && $body.hasClass('compact-mode')) {

--- a/docs/2/js/doc.min.js
+++ b/docs/2/js/doc.min.js
--- a/docs/css/zui.css
+++ b/docs/css/zui.css
--- a/docs/css/zui.css.map
+++ b/docs/css/zui.css.map
--- a/docs/css/zui.min.css
+++ b/docs/css/zui.min.css
--- a/docs/js/zui.js
+++ b/docs/js/zui.js
 /*!
- * ZUI - v1.3.0 - 2015-04-22
+ * ZUI - v1.3.0 - 2015-04-23
 * http://zui.sexy
 * GitHub: https://github.com/easysoft/zui.git 
 * Copyright (c) 2015 cnezsoft.com; Licensed MIT

--- a/docs/js/zui.min.js
+++ b/docs/js/zui.min.js
 /*!
- * ZUI - v1.3.0 - 2015-04-22
+ * ZUI - v1.3.0 - 2015-04-23
 * http://zui.sexy
 * GitHub: https://github.com/easysoft/zui.git 
 * Copyright (c) 2015 cnezsoft.com; Licensed MIT

--- a/src/js/doc.js
+++ b/src/js/doc.js
 (function(window, $)
 {
    'use strict';
-    
+
    // Polyfill
    if (!String.prototype.endsWith) {
        String.prototype.endsWith = function(searchString, position) {
@@ -125,7 +125,7 @@
        if(isHasCache && (isIndexJson || cacheData.version === dataVersion)) {
            if(debug) console.log('Load', url, 'from cache:', cacheData);
            callback(cacheData.data);
-            if(!isIndexJson) return;
+            if(!isIndexJson && !debug) return;
        }

        var dataType = url.endsWith('.json') ? 'json' : 'html';
@@ -841,7 +841,7 @@
        $body.attr('data-page-accent', $section.data('accent')).attr('data-page', pageId);
        displaySectionIcon($pageHeader.find('.icon'), section);
        $pageHeader.find('.name').text(section.name).attr('href', pageUrl);
-        $pageHeader.children('.desc').text(section.desc);
+        $pageHeader.find('.desc').text(section.desc);
        $pageContent.html('');
        var $loader = $page.addClass('loading').find('.loader').addClass('loading');

@@ -1081,6 +1081,22 @@
            oldActivePreivewId = $(this).closest('li').data('id');
        });

+        $pageContent.on('click', 'section > header > h3', function(){
+            $(this).closest('section').toggleClass('collapsed');
+        }).on('mouseenter', 'section > header > h3', function(){
+            $(this).closest('section').addClass('hover');
+        }).on('mouseleave', 'section > header > h3', function(){
+            $(this).closest('section').removeClass('hover');
+        });
+        $pageBody.on('click', '#pageTogger', function(){
+            $pageBody.toggleClass('collapsed');
+            if($pageBody.hasClass('collapsed')) {
+                $pageContent.children('section').addClass('collapsed');
+            } else {
+                $pageContent.children('section').removeClass('collapsed');
+            }
+        });
+
        $pageContent.on('resize', resizePage);
        $window.resize(resizePage);


--- a/src/less/doc.less
+++ b/src/less/doc.less
@@ -115,8 +115,39 @@
  }

  #pageContent {
-    > h3:before {
-      background-color: @pale;
+    > section {
+      > header:before {
+        background-color: @pale;
+      }
+
+      &.hover {
+        > header {
+          &:before {
+            background-color: @color;
+          }
+          &:after {
+            border-color: @color;
+          }
+
+          > h3 {
+            color: @color;
+          }
+        }
+
+        &:before {
+          border-color: @color;
+        }
+      }
+    }
+  }
+
+  #pageTogger {
+    &:hover {
+      border-color: @color;
+
+      &:before, &:after {
+        background-color: @color;
+      }
    }
  }
 }
@@ -463,7 +494,7 @@ body {
    height: 40px;

    > .icon {
-      font-size: 20px;
+      font-size: 18px;
    }
  }

@@ -1129,7 +1160,7 @@ body.query-enabled {
  }
 }
 #pageBody {
-  padding: 20px;
+  padding: 20px 10px 20px 20px;
  position: absolute;
  top: 110px;
  bottom: 0;
@@ -1137,7 +1168,7 @@ body.query-enabled {
  overflow-y: auto;
 }
 #pageContent {
-  padding-left: 60px;
+  padding-left: 50px;
  position: relative;

  &:before {
@@ -1147,32 +1178,161 @@ body.query-enabled {
    border-left: 1px dotted @color-gray-lighter;
    left: 24px;
    top: -20px;
-    bottom: -20px;
+    bottom: -25px;
+  }
+
+  > section > article, > section > header, > article {
+    padding-left: 10px;
+    padding-right: 10px;
  }

-  > h3 {
+  > section {
    position: relative;
-    margin: 0;
-    padding: 20px 0 10px;

    &:before {
      position: absolute;
      content: ' ';
      display: block;
-      left: -41px;
-      top: 4px;
-      width: 10px;
-      height: 10px;
-      // border: 1px solid @color-gray-light;
-      background-color: #fff;
-      border-radius: 5px;
+      border-left: 1px dotted transparent;
+      left: -26px;
+      top: 28px;
+      bottom: -25px;
    }
+
+    > header {
+      position: relative;
+      padding-top: 20px;
+      padding-bottom: 10px;
+
+      > h3 {
+        margin: 0;
+        display: inline-block;
+        cursor: pointer;
+
+        &:before, &:after {
+          position: absolute;
+          content: ' ';
+          left: -26px;
+          top: 26px;
+          .transition-fast(background-color);
+        }
+
+        &:before {
+          display: none;
+          width: 1px;
+          height: 7px;
+        }
+
+        &:after {
+          width: 7px;
+          height: 1px;
+          top: 29px;
+          left: -29px;
+        }
+      }
+
+      &:before {
+        position: absolute;
+        content: ' ';
+        display: block;
+        left: -31px;
+        top: 24px;
+        width: 11px;
+        height: 11px;
+        background-color: @color-gray-light;
+        border-radius: 5px;
+        .transition-fast(background-color);
+      }
+
+      &:after {
+        position: absolute;
+        content: ' ';
+        display: block;
+        width: 24px;
+        border-bottom: 1px dotted @color-gray-lighter;
+        left: -20px;
+        top: 28px;
+      }
+    }
+
+    &.hover {
+      > header {
+        h3 {
+          &:before, &:after {
+            background-color: #fff;
+          }
+        }
+      }
+
+      &.collapsed > header > h3:before {
+        display: block;
+      }
+    }
+
+    > article {
+      height: auto;
+      .transition-fast(opacity; height);
+    }
+
+    &.collapsed {
+      &:before {
+        display: none;
+      }
+
+      > article {
+        height: 0;
+        opacity: 0;
+        overflow: hidden;
+      }
+    }
+  }
+}
+#pageTogger {
+  position: absolute;
+  top: 18px;
+  left: 35px;
+  width: 19px;
+  height: 19px;
+  padding: 0;
+  border-radius: 10px;
+  background-color: #fff;
+  color: @color-gray-light;
+  z-index: 10;
+  border: 1px solid @color-gray-lighter;
+  outline: none;
+
+  &:before, &:after {
+    .transition-normal(background-color);
+    position: absolute;
+    display: block;
+    content: ' ';
+    left: 4px;
+    top: 4px;
+    background-color: @color-gray-light;
+  }
+
+  &:before {
+    height: 9px;
+    width: 1px;
+    left: 8px;
+    display: none;
+  }
+
+  &:after {
+    width: 9px;
+    top: 8px;
+    height: 1px;
+  }
+}
+#pageBody.collapsed {
+  #pageTogger:before {
+    display: block;
  }
 }

 body.compact-mode {
  #header, #heading, #search {
-      .transition-normal(padding; height; opcity);
+      .transition-normal(padding; height; opcity; background-color);
  }

  #header {
@@ -1374,7 +1534,7 @@ body.page-show {
    }

    #pageContent {
-      padding: 0 20px 0 80px;
+      padding: 0 20px 0 70px;
      max-width: 1160px;
      margin: 0 auto;