Merge branch 'v2' of https://github.com/jdf2e/nutui into v2

build/webpack.doc.base.conf.js

@@ -29,7 +29,8 @@ module.exports = merge(webpackBaseConf, {
             template:'./doc-site/template.html',
             nav:'left',
             needCode:true,
-            isbuild:isDev
+            isbuild:isDev,
+            hasMarkList:false
         }),
         new mdtohtml({
             entry:'./docs',

package.json

@@ -46,7 +46,8 @@
   "license": "MIT",
   "dependencies": {
     "@babel/polyfill": "7.0.0",
-    "@babel/runtime": "7.1.2"
+    "@babel/runtime": "7.1.2",
+    "intersection-observer": "^0.5.1"
   },
   "peerDependencies": {
     "vue": "2.5.17"

scripts/mdToVue.js

@@ -14,6 +14,8 @@ let {version} = require("../package.json");
 //vue js脚本
 //获取所有文件列表
 let fileList  = [];
+let Articlehead = '';
+let Articleheadcount = 0;
 // maked文件配置
 var rendererMd = new marked.Renderer();
 //maked文件规则
@@ -43,6 +45,17 @@ rendererMd.code = function (code, infostring, escaped) {
         + (escaped ? code : escape(code, true))
         + '</code></div><i class="copy" copy="copy" data-clipboard-action="copy" data-clipboard-target="code" title="复制代码"></i><i toast="toast" title="全屏"></i></pre></hide>\n';
 };
+rendererMd.heading = function (text,level){
+   
+    // 如果需要 marklist；
+   
+    if(level==2){
+        Articleheadcount++; 
+        Articlehead +=`<li @click="leavelchose(`+Articleheadcount+`)" :class="levalcur==`+Articleheadcount+`?'cur':''"  class="level`+Articleheadcount+'"><a href="#head'+Articleheadcount+'">'+text.substr(0,10)+'</a></li>';
+    }
+
+    return "<h"+level+" class='visibility' id='head"+Articleheadcount+"'>"+ text +"</h"+level+">"; 
+};
 marked.setOptions({
     renderer: rendererMd,
     highlight: function (code) {
@@ -73,9 +86,9 @@ function insert(sorce) {
  * @param {string} sorce  文件源
  * @param {boole} ishasCode  是否需要二维码 
  */
-function createdFile(output, sorce, ishasCode) {
+function createdFile(output, sorce, param) {
     var pathSrc = output;    
-    if (ishasCode) {
+    if (param.needCode) {
         var res = insert(sorce);
     } else {
         var res = sorce;
@@ -83,13 +96,15 @@ function createdFile(output, sorce, ishasCode) {
     var bufs = `<template><div  @click="dsCode">
         <div v-if="content" class="layer">
           <pre><span class="close-box" @click="closelayer"></span><div v-html="content"></div></pre>
-        </div>`+ res + `<nut-backtop :right="50" :bottom="50"></nut-backtop></div></template><script>import root from '../root.js';
+        </div>`+ res + (param.hasMarkList?'<ul class="markList">' +Articlehead + '</ul>':'')+
+        `<nut-backtop :right="50" :bottom="50"></nut-backtop></div></template><script>import root from '../root.js';
         export default {
             mixins:[root]
-        }</script>`;
-    fs.writeFile(pathSrc,bufs,'utf8',(err)=>{
+        }</script>`;       
+        Articlehead = '';
+        Articleheadcount = 0;      
        
-    })
+    fs.writeFile(pathSrc,bufs,'utf8',(err)=>{ })
 }
 /**
  * 目录读取，找到跟文件
@@ -259,12 +274,13 @@ function filelisten(param){
     let watchAction = function({event, eventPath}){      
         // 这里进行文件更改后的操作
         fileReadStar(eventPath,(res)=>{           
-            createdFile(param.output + res.mdName + '.vue', res.html, param.needCode)
+            createdFile(param.output + res.mdName + '.vue', res.html, param)
         })
     }
     watcher.on('change', path => watchAction({event: 'change', eventPath: path}))
     .on('unlink', path => watchAction({event: 'remove', eventPath: path}));
 }
+
 /**
  * 文件转md
  * @param {obj} 
@@ -275,18 +291,19 @@ function filelisten(param){
 function fileDisplay(param) {
     //检查文件是否第一次初始化并获取hash
     comparehash(param.entry,(hashMsgObj)=>{
-        
+                
         // 获取目录下所有文件
         readDirRecur(param.entry, function(filePath) {    
             //文件列表        
             fileList.map(item=>{              
                 ismd(item,hashMsgObj,res=>{
                     //res md文件处理结果           
-                    createdFile(param.output + res.mdName + '.vue', res.html, param.needCode)
+                    createdFile(param.output + res.mdName + '.vue', res.html, param)
                 })
             })    
         });
     });
+   
     
 }
 
@@ -309,6 +326,35 @@ function ishasOutFile(outPath,callback){
         }
     })
 }
+// function checkLoacl(){
+//     var selfFile = './scripts/mdToVue.js';
+//     //获取文件内容
+       
+//     checkIsexists(selfFile,(fileName)=>{
+//         let fileText = fs.readFileSync(fileName,'utf-8');  
+//     })
+//     //检查本文件是否被改动
+//     hashElement('./scripts/mdToVue.js').then(hash => {           
+//         if(fileText){
+//             //如果有内容
+//             callback({
+//                 fileText:fileText,
+//                 cachePath:cachePath
+//             })
+//         }else{
+//             pushHash(hash)               
+//             fs.writeFileSync(cachePath,outhash.join('|'),'utf-8');
+//             //如果没有内容
+//             callback({
+//                 fileText:fileText,
+//                 cachePath:cachePath
+//             })
+//         }
+//     })
+//     .catch(error => {
+//         return console.error('hashing failed:', error);
+//     }); 
+// }
 /**
  * 
  * @param {entry} 文件读取路径 
@@ -321,9 +367,11 @@ function MdToHtml(commomOption) {
         entry:'',
         output:'',
         needCode:true,
-        isbuild:true
+        isbuild:true,
+        hasMarkList:true
     }
     params = Object.assign(params,commomOption);    
+    
     //检查输出路径
     ishasOutFile(params.output,()=>{
          //获取所有的md 转html的结果

sites/doc/app.vue

@@ -44,7 +44,7 @@
       <div class="demo-wrapper">
         <router-view class="demo-nav" name="demonav"></router-view>
         <keep-alive include="index">
-          <router-view class="doc-cont" name="main"></router-view>
+          <router-view class="doc-cont" :class="showPhone?'':'docpad'" name="main"></router-view>
         </keep-alive>
         <div v-if="showPhone" class="showPhone">
           <div class="ph">
@@ -454,11 +454,15 @@ body {
 }
 .doc-cont {
   padding: 8px 40px 8px 0;
+  
   margin-left: 50px;
   box-sizing: border-box;
   flex: 1;
   min-width: 500px;
 }
+.docpad{
+   padding: 8px 200px 8px 0;
+}
 // .button-primary {
 //   display: block;
 //   margin: 50px 0;

sites/doc/asset/css/common.scss

@@ -292,4 +292,20 @@ pre.prettyprint {
     code {
         font: 13px/24px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
     }
+}
+// 书签样式
+.markList{
+    position: fixed;
+    right: 10px;
+    top:65px;
+    background: #fff;
+    border:1px solid #efefef;
+    padding:10px 10px 10px 20px!important;    
+    
+    li:before{
+        display: none!important;
+        
+    }
+    
+    
 }

sites/doc/asset/css/style-blue.scss

@@ -1,6 +1,7 @@
 .doc-cont {
     margin: 0 0 0 60px;
     position: relative;
+   
     h1 {
         font-size: 30px;
         font-weight: 700;
@@ -178,4 +179,17 @@
             text-decoration: underline;
         }
     }
+}
+// 书签样式
+.markList{      
+
+    a{
+        color:#666;
+    }
+    .cur{
+        a{
+            color:#5396ff;
+        }
+       
+    }
 }

sites/doc/asset/js/bookmark.js

@@ -0,0 +1,19 @@
+import vb from '../asset/js/isVisibiliy.js';
+import root from '../root.js';
+        export default {
+            mixins:[root],
+            mounted(){
+              let visb = vb('.visibility');
+              visb.then(res=>{
+               
+               
+                let id  = res.target.id;
+                let index =id.replace(/head/,'');                
+                let li = document.querySelector('.level'+index);
+                console.log(li,index)
+                if(li){
+                  
+                }
+              })
+            }
+        }

sites/doc/asset/js/isVisibiliy.js

@@ -0,0 +1,58 @@
+
+
+import('intersection-observer');
+function isVisibility(param){
+    
+    let domLists = document.querySelectorAll(param);
+    //元素属性
+    this.domList = domLists;
+    this.showDom = null; //当前展示的节点 
+    this.io = null;   
+}
+isVisibility.prototype.IntersectionObserverRun = function(){  
+    let _that = this;
+    if(IntersectionObserver){
+        _that.io = new IntersectionObserver(
+           (res)=>{
+            _that.Intersections(res)
+           },{  
+            rootMargin:'10px 0px 0px 0px',       
+            threshold: [ 0, Number.MIN_VALUE, 0.01]        
+        });
+        setTimeout(()=>{
+            //对当前元素进行监听
+            _that.domList.forEach((item)=>{
+                    _that.io.observe(item);
+            })
+        })
+    }
+    
+        
+} 
+isVisibility.prototype.Intersections = function (entries){
+    let _that = this;
+    if(// 正在交叉
+        entries[0].isIntersecting ||
+        // 交叉率大于0
+        entries[0].intersectionRatio){
+          
+            let showDom = entries[0];
+            this.showDom = showDom;
+            if(this.callback)   {
+                this.callback(showDom)   
+            }
+       
+    }
+};
+isVisibility.prototype.then = function(callback){   
+    
+    if(callback){
+        this.callback = callback;
+    }   
+}
+function run (param){
+   let visib = new isVisibility(param);
+   visib.IntersectionObserverRun();
+   return visib;
+}
+module.exports = run;

sites/doc/root.js

@@ -1,17 +1,21 @@
 import hide from './compents/hidden/hidden.vue';
-
+import vb from './asset/js/isVisibiliy.js';
 var myMixin ={
     data(){
         return {
           content:'',
           codeurl:'',
-          demourl:''
+          demourl:'',
+          levalcur:1
         }
       },
     components:{
         hide
     },
     methods:{
+        leavelchose(index){
+          this.levalcur = index;
+        },
         closelayer(){
           this.content = '';
         },
@@ -36,7 +40,15 @@ var myMixin ={
             }      
         }
   },
-  mounted(){   
+  mounted(){  
+    let visb = vb('.visibility');
+    visb.then(res=>{
+      let id  = res.target.id;
+      let index =Number(id.replace(/head/,''));       
+      if(index>0){
+        this.levalcur = index
+      }
+    })
     this.$nextTick(()=>{
         let copy = this.copy;
         new copy('.copy',{