优化路由;优化layer & mediotr在移动端适配;
parent
d689025bb7
commit
7d7afb03ca
|
@ -8,7 +8,7 @@
|
||||||
'use strict'
|
'use strict'
|
||||||
|
|
||||||
import 'drag/index'
|
import 'drag/index'
|
||||||
import './skin/default.scss'
|
import './skin/normal.scss'
|
||||||
|
|
||||||
Anot.ui.layer = '1.0.0-normal'
|
Anot.ui.layer = '1.0.0-normal'
|
||||||
|
|
||||||
|
@ -18,7 +18,6 @@ let unique = null // 储存当前打开的1/2/3类型的弹窗
|
||||||
let lid = 0
|
let lid = 0
|
||||||
let defconf = {
|
let defconf = {
|
||||||
type: 1, // 弹窗类型
|
type: 1, // 弹窗类型
|
||||||
skin: 'default', // 默认主题
|
|
||||||
background: '#fff',
|
background: '#fff',
|
||||||
mask: true, // 遮罩
|
mask: true, // 遮罩
|
||||||
maskClose: false, // 遮罩点击关闭弹窗
|
maskClose: false, // 遮罩点击关闭弹窗
|
||||||
|
@ -143,7 +142,6 @@ class __layer__ {
|
||||||
'area',
|
'area',
|
||||||
'shift',
|
'shift',
|
||||||
'offset',
|
'offset',
|
||||||
'skin',
|
|
||||||
'mask',
|
'mask',
|
||||||
'maskClose',
|
'maskClose',
|
||||||
'container',
|
'container',
|
||||||
|
@ -245,7 +243,7 @@ class __layer__ {
|
||||||
}
|
}
|
||||||
|
|
||||||
layBox.classList.add('layer-box')
|
layBox.classList.add('layer-box')
|
||||||
layBox.classList.add('skin-' + state.skin)
|
layBox.classList.add('skin-normal')
|
||||||
|
|
||||||
if (state.extraClass) {
|
if (state.extraClass) {
|
||||||
layBox.classList.add(state.extraClass)
|
layBox.classList.add(state.extraClass)
|
||||||
|
@ -605,7 +603,7 @@ const _layer = {
|
||||||
|
|
||||||
return _layer.open(opt)
|
return _layer.open(opt)
|
||||||
},
|
},
|
||||||
loading(style, container, cb) {
|
load(style, container, cb) {
|
||||||
style = style >>> 0
|
style = style >>> 0
|
||||||
style = style < 1 ? 1 : style > 5 ? 5 : style
|
style = style < 1 ? 1 : style > 5 ? 5 : style
|
||||||
|
|
||||||
|
|
|
@ -32,7 +32,7 @@
|
||||||
&.scale {transform:scale(1.02);transition:transform .1s linear;}
|
&.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%;}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -233,10 +233,21 @@ function html2md(str) {
|
||||||
function tool(name) {
|
function tool(name) {
|
||||||
name = (name + '').trim().toLowerCase()
|
name = (name + '').trim().toLowerCase()
|
||||||
name = '|' === name ? 'pipe' : name
|
name = '|' === name ? 'pipe' : name
|
||||||
let event = name === 'pipe' ? '' : `:click="onToolClick('${name}', $event)"`
|
|
||||||
let title = TOOLBAR[name]
|
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 `
|
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 {
|
class MEObject {
|
||||||
|
@ -290,7 +301,7 @@ Anot.component('meditor', {
|
||||||
delete this.props.toolbar
|
delete this.props.toolbar
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<div class="tool-bar do-fn-noselect">${toolbar}</div>
|
<div class="tool-bar do-fn-noselect" :click="onToolClick">${toolbar}</div>
|
||||||
<textarea
|
<textarea
|
||||||
ref="editor"
|
ref="editor"
|
||||||
class="editor-body"
|
class="editor-body"
|
||||||
|
@ -376,7 +387,7 @@ Anot.component('meditor', {
|
||||||
height: 180,
|
height: 180,
|
||||||
disabled: false, //禁用编辑器
|
disabled: false, //禁用编辑器
|
||||||
fullscreen: false, //是否全屏
|
fullscreen: false, //是否全屏
|
||||||
preview: true, //是否显示预览
|
preview: window.innerWidth > 768, //是否显示预览
|
||||||
htmlTxt: '', //用于预览渲染
|
htmlTxt: '', //用于预览渲染
|
||||||
value: '', //纯md文本
|
value: '', //纯md文本
|
||||||
addon // 已有插件
|
addon // 已有插件
|
||||||
|
@ -457,8 +468,12 @@ Anot.component('meditor', {
|
||||||
return dom.value.slice(startPos, endPos)
|
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
|
return
|
||||||
}
|
}
|
||||||
if (this.addon[name]) {
|
if (this.addon[name]) {
|
||||||
|
|
|
@ -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);}
|
&::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;
|
span {float:left;width:40px;height:40px;
|
||||||
|
|
||||||
&:hover {background:#f7f8fb;}
|
&:hover,&.active {background:#f7f8fb;}
|
||||||
&.icon-pipe {width:28px;background:#fff;color:nth($cp, 3);}
|
&.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;}
|
||||||
|
}
|
||||||
|
}
|
|
@ -26,7 +26,6 @@ function targetIsThisWindow(targetWindow) {
|
||||||
const DEFAULT_OPTIONS = {
|
const DEFAULT_OPTIONS = {
|
||||||
mode: 'hash', // hash | history
|
mode: 'hash', // hash | history
|
||||||
prefix: /^(#!|#)[\/]?/, //hash前缀正则
|
prefix: /^(#!|#)[\/]?/, //hash前缀正则
|
||||||
historyOpen: true, //是否开启hash历史
|
|
||||||
allowReload: true //连续点击同一个链接是否重新加载
|
allowReload: true //连续点击同一个链接是否重新加载
|
||||||
}
|
}
|
||||||
const RULE_REGEXP = /(:id)|(\{id\})|(\{id:([A-z\d\,\[\]\{\}\-\+\*\?\!:\^\$]*)\})/g
|
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 {
|
class Router {
|
||||||
constructor(options) {
|
constructor(options) {
|
||||||
Anot.hideProperty(this, 'table', [])
|
Anot.hideProperty(this, 'table', [])
|
||||||
Anot.hideProperty(this, 'history', null)
|
Anot.hideProperty(this, 'last', '')
|
||||||
Anot.hideProperty(this, 'path', '')
|
Anot.hideProperty(this, 'path', '')
|
||||||
Anot.hideProperty(this, 'noMatch', null)
|
Anot.hideProperty(this, 'noMatch', null)
|
||||||
Anot.hideProperty(
|
Anot.hideProperty(
|
||||||
|
@ -50,9 +49,6 @@ class Router {
|
||||||
if (Anot.router) {
|
if (Anot.router) {
|
||||||
throw new Error('不允许重复创建Router实例...')
|
throw new Error('不允许重复创建Router实例...')
|
||||||
}
|
}
|
||||||
if (!options.allowReload) {
|
|
||||||
options.historyOpen = true
|
|
||||||
}
|
|
||||||
|
|
||||||
Anot.router = new this(options)
|
Anot.router = new this(options)
|
||||||
return Anot.router
|
return Anot.router
|
||||||
|
@ -71,14 +67,14 @@ class Router {
|
||||||
this.go(path)
|
this.go(path)
|
||||||
// hash模式要手动触发一下路由检测
|
// hash模式要手动触发一下路由检测
|
||||||
if (mode === 'hash') {
|
if (mode === 'hash') {
|
||||||
this.__check__()
|
this.__check__(path)
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// 因为pushState不会触发popstate事件,
|
// 因为pushState不会触发popstate事件,
|
||||||
// 所以这里只在hash模式或有ev.state的情况下才会主动触发路由检测
|
// 所以这里只在hash模式或有ev.state的情况下才会主动触发路由检测
|
||||||
this.path = path.replace(/^[/]+?/, '')
|
path = path.replace(/^[/]+?/, '')
|
||||||
if (mode === 'hash' || ev.state) {
|
if (mode === 'hash' || ev.state) {
|
||||||
this.__check__()
|
this.__check__(path)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -115,12 +111,10 @@ class Router {
|
||||||
return
|
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()
|
ev.preventDefault()
|
||||||
this.go(href, true)
|
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
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (historyOpen) {
|
this.last = this.path
|
||||||
this.history = this.path
|
this.path = path
|
||||||
}
|
|
||||||
|
|
||||||
for (let i = 0, route; (route = this.table[i++]); ) {
|
for (let i = 0, route; (route = this.table[i++]); ) {
|
||||||
let args = this.path.match(route.regexp)
|
let args = path.match(route.regexp)
|
||||||
if (args) {
|
if (args) {
|
||||||
args.shift()
|
args.shift()
|
||||||
return route.callback.apply(route, args)
|
return route.callback.apply(route, args)
|
||||||
|
@ -199,15 +192,17 @@ class Router {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
location.hash = '!/' + path
|
location.hash = '!/' + path
|
||||||
this.path = path
|
|
||||||
} else {
|
} else {
|
||||||
let hash = forceCleanHash ? '' : location.hash
|
let hash = forceCleanHash ? '' : location.hash
|
||||||
let search = forceCleanHash ? '' : location.search
|
let search = forceCleanHash ? '' : location.search
|
||||||
path = path.replace(/^[/]+?/, '')
|
path = path.replace(/^[/]+?/, '')
|
||||||
window.history.pushState({ path }, null, `/${path + search + hash}`)
|
if (forceCleanHash) {
|
||||||
this.path = path
|
window.history.pushState({ path }, null, `/${path + search + hash}`)
|
||||||
|
} else {
|
||||||
|
window.history.replaceState({ path }, null, `/${path + search + hash}`)
|
||||||
|
}
|
||||||
// pushState不会触发popstate事件,所以要手动触发路由检测
|
// pushState不会触发popstate事件,所以要手动触发路由检测
|
||||||
this.__check__()
|
this.__check__(path)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Reference in New Issue