优化路由;优化layer & mediotr在移动端适配;

src/js/layer/index.js

@@ -8,7 +8,7 @@
 'use strict'
 
 import 'drag/index'
-import './skin/default.scss'
+import './skin/normal.scss'
 
 Anot.ui.layer = '1.0.0-normal'
 
@@ -18,7 +18,6 @@ let unique = null // 储存当前打开的1/2/3类型的弹窗
 let lid = 0
 let defconf = {
   type: 1, // 弹窗类型
-  skin: 'default', // 默认主题
   background: '#fff',
   mask: true, // 遮罩
   maskClose: false, // 遮罩点击关闭弹窗
@@ -143,7 +142,6 @@ class __layer__ {
         'area',
         'shift',
         'offset',
-        'skin',
         'mask',
         'maskClose',
         'container',
@@ -245,7 +243,7 @@ class __layer__ {
     }
 
     layBox.classList.add('layer-box')
-    layBox.classList.add('skin-' + state.skin)
+    layBox.classList.add('skin-normal')
 
     if (state.extraClass) {
       layBox.classList.add(state.extraClass)
@@ -605,7 +603,7 @@ const _layer = {
 
     return _layer.open(opt)
   },
-  loading(style, container, cb) {
+  load(style, container, cb) {
     style = style >>> 0
     style = style < 1 ? 1 : style > 5 ? 5 : style
 

src/js/layer/skin/normal.scss

@@ -32,7 +32,7 @@
     &.scale {transform:scale(1.02);transition:transform .1s linear;}
 
     /* 默认皮肤 */
-    &.skin-default {padding:15px 10px;border-radius:3px;color:#666;font-size:14px;box-shadow:0 5px 20px rgba(0,0,0,.3); 
+    &.skin-normal {padding:15px 10px;border-radius:3px;color:#666;font-size:14px;box-shadow:0 5px 20px rgba(0,0,0,.3); 
 
 
       /* 弹层标题栏 */
@@ -243,3 +243,10 @@
 
 
 
+@media screen and (max-width:480px) {
+  .do-layer {
+    .layer-box {
+      &.type-1,&.type-2,&.type-3,&.type-4,&.type-7 {width:90%;}
+    }
+  }
+}

src/js/meditor/index.js

@@ -233,10 +233,21 @@ function html2md(str) {
 function tool(name) {
   name = (name + '').trim().toLowerCase()
   name = '|' === name ? 'pipe' : name
-  let event = name === 'pipe' ? '' : `:click="onToolClick('${name}', $event)"`
+
   let title = TOOLBAR[name]
+  let extra = ''
+  switch (name) {
+    case 'preview':
+      extra = ':class="{active: preview}"'
+      break
+    case 'fullscreen':
+      extra = ':class="{active: fullscreen}"'
+      break
+    default:
+      break
+  }
   return `
-  <span title="${title}" class="do-meditor__icon icon-${name}" ${event}></span>`
+  <span title="${title}" class="do-meditor__icon icon-${name}" data-name="${name}" ${extra}></span>`
 }
 
 class MEObject {
@@ -290,7 +301,7 @@ Anot.component('meditor', {
     delete this.props.toolbar
 
     return `
-    <div class="tool-bar do-fn-noselect">${toolbar}</div>
+    <div class="tool-bar do-fn-noselect" :click="onToolClick">${toolbar}</div>
     <textarea 
       ref="editor"
       class="editor-body" 
@@ -376,7 +387,7 @@ Anot.component('meditor', {
     height: 180,
     disabled: false, //禁用编辑器
     fullscreen: false, //是否全屏
-    preview: true, //是否显示预览
+    preview: window.innerWidth > 768, //是否显示预览
     htmlTxt: '', //用于预览渲染
     value: '', //纯md文本
     addon // 已有插件
@@ -457,8 +468,12 @@ Anot.component('meditor', {
         return dom.value.slice(startPos, endPos)
       }
     },
-    onToolClick: function(name, ev) {
+    onToolClick: function(ev) {
-      if (this.disabled) {
+      if (ev.target.tagName.toLowerCase() !== 'span') {
+        return
+      }
+      let name = ev.target.dataset.name
+      if (this.disabled || name === 'pipe') {
         return
       }
       if (this.addon[name]) {

src/js/meditor/skin/main.scss

@@ -25,11 +25,11 @@
     &::after {position:absolute;left:0;top:0;z-index:100;width:100%;height:100%;content:"";background:rgba(255, 182, 24, 0.07);}
   }
 
-  .tool-bar {overflow:hidden;position:absolute;top:0;left:0;z-index:99;width:100%;height:41px;padding:0 3px;line-height:40px;border-bottom:1px solid nth($cp, 1);background:#fff;color:nth($cd, 1);text-align:center;font-size:24px;
+  .tool-bar {overflow:hidden;position:absolute;top:0;left:0;z-index:99;width:100%;height:41px;line-height:40px;border-bottom:1px solid nth($cp, 1);background:#fff;color:nth($cd, 1);text-align:center;font-size:24px;
 
     span {float:left;width:40px;height:40px;
 
-      &:hover {background:#f7f8fb;}
+      &:hover,&.active {background:#f7f8fb;}
       &.icon-pipe {width:28px;background:#fff;color:nth($cp, 3);}
     }
   }
@@ -154,3 +154,15 @@
 }
 
 
+@media screen and (max-width:768px) {
+  .do-meditor {
+    .tool-bar {
+      span {display:none;
+
+        &.icon-quote,&.icon-bold,&.icon-italic,&.icon-through,&.icon-preview {display:inline-block;}
+      }
+    }
+    .md-preview {width:100%;border:0;background:#fafafa;}
+    &.preview .editor-body {display:none;}
+  }
+}

src/js/router/index.js

@@ -26,7 +26,6 @@ function targetIsThisWindow(targetWindow) {
 const DEFAULT_OPTIONS = {
   mode: 'hash', // hash | history
   prefix: /^(#!|#)[\/]?/, //hash前缀正则
-  historyOpen: true, //是否开启hash历史
   allowReload: true //连续点击同一个链接是否重新加载
 }
 const RULE_REGEXP = /(:id)|(\{id\})|(\{id:([A-z\d\,\[\]\{\}\-\+\*\?\!:\^\$]*)\})/g
@@ -34,7 +33,7 @@ const RULE_REGEXP = /(:id)|(\{id\})|(\{id:([A-z\d\,\[\]\{\}\-\+\*\?\!:\^\$]*)\})
 class Router {
   constructor(options) {
     Anot.hideProperty(this, 'table', [])
-    Anot.hideProperty(this, 'history', null)
+    Anot.hideProperty(this, 'last', '')
     Anot.hideProperty(this, 'path', '')
     Anot.hideProperty(this, 'noMatch', null)
     Anot.hideProperty(
@@ -50,9 +49,6 @@ class Router {
     if (Anot.router) {
       throw new Error('不允许重复创建Router实例...')
     }
-    if (!options.allowReload) {
-      options.historyOpen = true
-    }
 
     Anot.router = new this(options)
     return Anot.router
@@ -71,14 +67,14 @@ class Router {
         this.go(path)
         // hash模式要手动触发一下路由检测
         if (mode === 'hash') {
-          this.__check__()
+          this.__check__(path)
         }
       } else {
         // 因为pushState不会触发popstate事件,
         // 所以这里只在hash模式或有ev.state的情况下才会主动触发路由检测
-        this.path = path.replace(/^[/]+?/, '')
+        path = path.replace(/^[/]+?/, '')
         if (mode === 'hash' || ev.state) {
-          this.__check__()
+          this.__check__(path)
         }
       }
     })
@@ -115,12 +111,10 @@ class Router {
             return
           }
 
-          // hash地址,只管修正前缀即可, 会触发popstate事件
+          // hash地址,只管修正前缀即可, 会触发popstate事件,所以这里只处理非hash的情况
-          if (prefix.test(href)) {
+          if (!prefix.test(href)) {
-            this.path = href.replace(prefix, '').trim()
+            // 非hash地址,则需要阻止默认事件
-          } else {
+            // 并主动触发跳转, 同时强制清除hash
-            // 非hash地址,则阻止默认事件, 产并主动触发跳转
-            // 并强制清除hash
             ev.preventDefault()
             this.go(href, true)
           }
@@ -168,18 +162,17 @@ class Router {
   }
 
   // 路由检测
-  __check__() {
+  __check__(path) {
-    let { allowReload, historyOpen } = this.options
+    let { allowReload } = this.options
-    if (!allowReload && this.path === this.history) {
+    if (!allowReload && path === this.last) {
       return
     }
 
-    if (historyOpen) {
+    this.last = this.path
-      this.history = this.path
+    this.path = path
-    }
 
     for (let i = 0, route; (route = this.table[i++]); ) {
-      let args = this.path.match(route.regexp)
+      let args = path.match(route.regexp)
       if (args) {
         args.shift()
         return route.callback.apply(route, args)
@@ -199,15 +192,17 @@ class Router {
         return
       }
       location.hash = '!/' + path
-      this.path = path
     } else {
       let hash = forceCleanHash ? '' : location.hash
       let search = forceCleanHash ? '' : location.search
       path = path.replace(/^[/]+?/, '')
+      if (forceCleanHash) {
         window.history.pushState({ path }, null, `/${path + search + hash}`)
-      this.path = path
+      } else {
+        window.history.replaceState({ path }, null, `/${path + search + hash}`)
+      }
       // pushState不会触发popstate事件,所以要手动触发路由检测
-      this.__check__()
+      this.__check__(path)
     }
   }