* document support double view layout.

index.html

@@ -67,6 +67,7 @@
       </div>
     </header>
 
+    <!-- 新开子页面 -->
     <div id="page">
       <div id="pageHeader">
         <div class="wrapper container">
@@ -104,6 +105,7 @@
       </div>
     </div>
 
+    <!-- 当 file: 协议访问时的提示 -->
     <div id="fileProtocolTip" class="hidden">
       <div class="container-fixed-sm">
         <h1>不支持 <code>file://</code> 协议</h1>
@@ -123,8 +125,14 @@
       </div>
     </div>
 
+    <div data-placement="left" title="切换界面布局" data-toggle="tooltip" id="changeViewWrapper">
+      <button type="button" class="btn btn-primary" id="changeViewBtn" data-toggle="modal" data-target="#changeViewModal"><i class="icon icon-columns"></i></button>
+    </div>
+
+    <!-- 远程内容加载图标 -->
     <div class="text-muted loader loading"><i class="icon icon-spin icon-spinner-indicator"></i> 加载中...</div>
 
+    <!-- 内容目录 -->
     <div id="grid">
       <div class="container">
         <div class="row">
@@ -221,7 +229,7 @@
         <p class="text-muted"><small>文档版本 <span class="doc-version"><i class="icon icon-spin icon-spinner-indicator"></i></span></small></p>
       </div>
     </footer>
- 
+
     <!-- 一些html模板代码片段 -->
     <div class="template">
       <div class="card section fade scale slide-in-up-100 slide-in-right-50" id="sectionTemplate">
@@ -242,6 +250,35 @@
       <button id="copyCodeBtn" data-html="true" data-animation="false" data-toggle="tooltip" data-title="复制代码" type="button" class="btn btn-copy-code"  data-tip-id="copyCodeTip" data-container="body"><i class="icon icon-copy"></i></button>
     </div>
 
+    <div class="modal fade" id="changeViewModal">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
+            <h4 class="modal-title">你想用哪种布局展示页面？</h4>
+          </div>
+          <div class="modal-body">
+            <div class="view-options">
+              <a class="view-option view-option-single">
+                <div class="view-shape">
+                  <div class="s-1"></div>
+                </div>
+                <div class="title strong">单页面</div>
+                <p class="text-muted">页面在页面中间显示，并隐藏目录。</p>
+              </a>
+              <a class="view-option view-option-double">
+                <div class="view-shape">
+                  <div class="s-1"></div>
+                </div>
+                <div class="title strong">双栏</div>
+                <p class="text-muted">目录在左侧显示，页面在右侧显示，更好的利用宽屏空间。</p>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
     <script src="assets/jquery.js"></script>
     <script src="assets/clipboard/clipboard.min.js"></script>

src/js/doc.js

@@ -1478,7 +1478,16 @@
                 window.open(section.url, '_blank');
                 break;
             case 'page':
-                openPage($section, section, topic);
+                var pageViewLayout = $.zui.store.get('pageViewLayout');
+                if(!pageViewLayout && $(window).width() >= 1600) {
+                    $('#changeViewModal').on('hide.zui.modal', function() {
+                        pageViewLayout = $.zui.store.get('pageViewLayout');
+                        if(!pageViewLayout) $.zui.store.set('pageViewLayout', 'single');
+                        openPage($section, section, topic);
+                    }).modal('show');
+                } else {
+                    openPage($section, section, topic);
+                }
                 break;
             default:
                 if(debug) console.error("Open section failed: unknown target.");
@@ -1921,6 +1930,30 @@
         }
     };
 
+    var initChangeView = function() {
+        var changePageView = function(pageViewLayout) {
+            if(pageViewLayout) {
+                $.zui.store.set('pageViewLayout', pageViewLayout);
+            } else {
+                pageViewLayout = $.zui.store.get('pageViewLayout');
+            }
+            var isDoubleView = pageViewLayout === 'double' && $(window).width() >= 1200;
+            $('body').toggleClass('view-double', isDoubleView);
+        };
+
+        var $modal = $('#changeViewModal');
+        $modal.on('show.zui.modal', function() {
+            var isDoubleView = $('body').hasClass('view-double');
+            $modal.find('.view-option.active').removeClass('active');
+            $modal.find('.view-option-' + (isDoubleView ? 'double' : 'single')).addClass('active');
+        }).on('click', '.view-option', function() {
+            changePageView($(this).hasClass('view-option-double') ? 'double' : 'single');
+            $modal.modal('hide');
+        });
+
+        changePageView();
+    };
+
     var init = function() {
         documentTitle = window.document.title;
 
@@ -2073,6 +2106,7 @@
         }).on('keydown', function(e) {
             var code = e.which;
             var isPageNotShow = !$body.hasClass('page-show');
+            var isDoubleView = $body.hasClass('view-double');
             var isInputFocus = $body.hasClass('input-query-focus');
             if(code === 9) { // Tab
                 if(!$body.hasClass('input-query-focus')) {
@@ -2080,7 +2114,7 @@
                     e.preventDefault();
                 }
             } else if(code === 13) { // Enter
-                if(isPageNotShow && isChoosedSection()) {
+                if((isDoubleView || isPageNotShow) && isChoosedSection()) {
                     openSection();
                 }
             } else if(code === 27) { // Esc
@@ -2101,15 +2135,15 @@
                 chooseRightSection();
                 e.preventDefault();
                 // }
-            } else if(code === 38) { // Top
-                if(isPageNotShow) {
+            } else if(code === 38) { // Up
+                if(isPageNotShow || isDoubleView) {
                     choosePrevSection();
                     e.preventDefault();
                 } else {
                     scrollToThis($pageBody, 'up');
                 }
             } else if(code === 40) { // Down
-                if(isPageNotShow) {
+                if(isPageNotShow || isDoubleView) {
                     chooseNextSection();
                     e.preventDefault();
                 }
@@ -2174,6 +2208,8 @@
             });
         }
 
+        initChangeView();
+
         // init code copy function
         initCopyable();
 

src/less/doc.less

@@ -2067,83 +2067,6 @@ body.page-show {
   }
 }
 
-body.layout-classic {
-  #heading {
-    display: none
-  }
-  #navbar {
-    width: 400px;
-    left: 0;
-    top: 0;
-    padding: 10px 0;
-    margin-bottom: 0;
-    .navbar-header {
-      float: none;
-    }
-    .navbar-toggle {
-      display: block;
-      float: right;
-      margin-right: 0;
-    }
-    .navbar-collapse {
-      display: none!important;
-      &.in,
-      &.collapsing {
-        &:before {
-          right: 10px;
-        }
-        > .navbar-right {
-          float: none!important;
-        }
-        display: block!important;
-        width: 140px;
-        > .navbar-nav > li {
-          float: none;
-        }
-      }
-    }
-  }
-  #search {
-    padding: 0;
-  }
-  #header {
-    position: fixed;
-    left: 0;
-    top: 0;
-    height: 200px;
-    width: 400px;
-    padding-top: 60px;
-  }
-  #grid {
-    position: fixed;
-    top: 100px;
-    left: 0;
-    bottom: 0;
-    width: 400px;
-  }
-}
-
-body.layout-page {
-  padding-top: 60px;
-  overflow-y: auto;
-  #header {
-    height: auto!important
-  }
-  #page {
-    box-shadow: none;
-    &.loading {
-      #pageAttrs {
-        display: none
-      }
-    }
-  }
-  #pageBody {
-    position: relative;
-    top: auto!important;
-    bottom: auto!important
-  }
-}
-
 body[data-page="basic-theme"] {
   @color-primary-inverse: contrast(@color-primary, #333, #fff);
   @color-primary-dark: darken(@color-primary, 10%);
@@ -2170,3 +2093,335 @@ body[data-page="basic-theme"] {
     }
   }
 }
+
+#changeViewWrapper {display: none}
+
+@media (min-width: 1200px) {
+  #changeViewWrapper {
+    display: block;
+    position: fixed;
+    top: 14px;
+    right: 15px;
+    z-index: 1030;
+  }
+
+  #changeViewBtn {
+    border-color: #fff;
+    background-color: rgba(0,0,0, .1);
+    border-color: rgba(0,0,0, 0);
+    padding: 5px;
+    min-width: 32px;
+
+    &:hover,
+    &:focus,
+    &:active {background-color: rgba(0,0,0, .2);}
+  }
+
+  body.view-double.compact-mode-in {
+    #changeViewBtn {
+      color: #666;
+    }
+    #navbar {
+      width: 360px;
+      left: 0;
+      top: 0;
+      padding: 10px 0!important;
+      margin-bottom: 0;
+      .navbar-header {
+        float: none;
+      }
+      .navbar-toggle {
+        display: block;
+        float: right;
+        margin-right: 0;
+      }
+      .navbar-collapse {
+        display: none!important;
+        &.in,
+        &.collapsing {
+          &:before {
+            right: 10px;
+          }
+          > .navbar-right {
+            float: none!important;
+          }
+          display: block!important;
+          width: 140px;
+          > .navbar-nav > li {
+            float: none;
+          }
+        }
+      }
+      #compactTogger,
+      .brand-title {display: none}
+    }
+    #headContainer {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+
+      > .container {width: 100%!important}
+    }
+    #search {
+      padding: 0;
+      right: 60px;
+      width: 120px;
+      left: auto;
+      transition: width .2s;
+    }
+    #searchInput::placeholder {
+      color: transparent;
+      transition: color .2s;
+    }
+    &.input-query-focus {
+      #search {
+        width: 240px;
+      }
+      #navbar .zui-version {display: none}
+      #searchInput::placeholder {color: rgba(255, 255, 255, .5)}
+    }
+    #header {
+      position: fixed;
+      left: 0;
+      top: 0;
+      height: 60px;
+      width: 360px;
+      padding-top: 60px;
+    }
+
+    #grid {
+      position: fixed;
+      padding: 10px 0;
+      top: 60px;
+      margin-top: 0;
+      left: 0;
+      bottom: 0;
+      width: 360px;
+      opacity: 1!important;
+      transform: none!important;
+      border-right: 1px solid @color-gray-light;
+      overflow-y: auto;
+
+      > .container {
+        width: 100%!important;
+
+        .row > .col {width: 100%;}
+      }
+
+      .chapter {margin-bottom: 10px;}
+
+      .section-preview.icon-preview > .icons > .icon {
+        &.icon-10x {font-size: 70px;}
+        &.icon-5x {font-size: 42px;}
+        &.icon-2x {font-size: 28px;}
+      }
+    }
+
+    #pageCloseBtn {display: none}
+    #pageReloadBtn {right: 15px;}
+
+    #page {
+      display: block!important;
+      position: fixed;
+      left: 360px;
+      top: 0;
+      right: 0;
+      bottom: 0;
+    }
+    
+    #pageHeader > .container {margin: 0 auto 0 15px;}
+    #pageBody > .container {margin: 0 auto 0 10px;}
+
+    > footer {
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      width: 400px;
+      background: rgba(255,255,255,.5);
+
+      > .container {width: 100%!important;}
+
+      hr {display: none}
+      p {
+        margin: 0;
+        line-height: 20px;
+        height: 20px;
+      }
+    }
+  }
+}
+
+@keyframes scale-shape
+{
+  0%   {opacity: 0; transform: scale(0);}
+  20% {opacity: 1; transform: scale(1);}
+  100% {opacity: 1; transform: scale(1);}
+}
+
+#changeViewModal {
+  .modal-dialog {
+    max-width: 450px;
+    overflow: hidden;
+  }
+  .modal-body {padding: 0}
+  .view-shape {
+    position: absolute;
+    left: 20px;
+    top: 15px;
+    width: 120px;
+    height: 100px;
+    background-color: #fff;
+    border: 1px solid @color-gray-light;
+  }
+
+  .view-option-single {
+    .view-shape {
+      &:before,
+      &:after {
+        display: block;
+        content: ' ';
+        position: absolute;
+        top: 0;
+        right: 10px;
+        left: 10px;
+      }
+
+      &:before {
+        height: 10px;
+        background: @color-primary;
+      }
+
+      &:after {
+        top: 12px;
+        background: @color-gray-light;
+        bottom: 0;
+      }
+
+      .s-1 {
+        position: absolute;
+        top: 13px;
+        left: 11px;
+        right: 11px;
+        bottom: 0;
+        background: #fafafa;
+        z-index: 1;
+
+        &:before,
+        &:after {
+          display: block;
+          content: ' ';
+          position: absolute;
+          top: 5px;
+          right: 5px;
+          left: 5px;
+          height: 30px;
+          border-top: 5px solid #aaa;
+          border-bottom: 5px solid #bbb;
+        }
+
+        &:after {
+          top: 17px;
+          right: 30px;
+          border-color: #ccc;
+        }
+      }
+    }
+  }
+
+  .view-option-double {
+    .view-shape {
+      &:before,
+      &:after {
+        display: block;
+        content: ' ';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 40px;
+      }
+
+      &:before {
+        background: @color-primary;
+        height: 10px;
+      }
+
+      &:after {
+        top: 10px;
+        bottom: 0;
+        background: @color-gray-light;
+      }
+
+      .s-1 {
+        position: absolute;
+        top: 0;
+        left: 42px;
+        right: 0;
+        bottom: 0;
+        background: #fafafa;
+        z-index: 1;
+
+        &:before,
+        &:after {
+          display: block;
+          content: ' ';
+          position: absolute;
+          top: 5px;
+          right: 5px;
+          left: 5px;
+          height: 30px;
+          border-top: 5px solid #aaa;
+          border-bottom: 5px solid #bbb;
+        }
+
+        &:after {
+          top: 17px;
+          right: 30px;
+          border-color: #ccc;
+        }
+      }
+    }
+  }
+
+  .view-option {
+    padding: 15px;
+    padding-left: 160px;
+    display: block;
+    position: relative;
+    min-height: 130px;
+    cursor: pointer;
+
+    > .title {
+      font-size: 14px;
+      color: #333;
+      font-weight: bold;
+      margin-bottom: 5px;
+      opacity: .7;
+    }
+    &.active,
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: @color-pale;
+      color: @color-primary;
+      text-decoration: none;
+
+      .view-shape .s-1 {
+        animation: scale-shape 2s infinite linear normal;
+      }
+
+      > .title {opacity: 1}
+    }
+
+    &.active {
+      background: @color-green-pale;
+      > .title:after {
+        content: '(当前)';
+        color: @color-green;
+        display: inline-block;
+        margin-left: 5px;
+        font-weight: normal;
+      }
+    }
+  }
+}