各种更新
parent
4758fb26b5
commit
e5aee134f3
|
@ -24,8 +24,8 @@
|
|||
* {margin: 0;padding: 0;vertical-align: baseline;box-sizing:border-box;}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
|
||||
img {border:0;display:block;}
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section,content {display: block;}
|
||||
img {border:0;display:inline-block;}
|
||||
ol, ul {list-style: none;}
|
||||
blockquote, q {quotes: none;}
|
||||
blockquote:before, blockquote:after,
|
||||
|
@ -33,7 +33,7 @@ q:before, q:after {content: '';content: none;}
|
|||
table {border-collapse: collapse;border-spacing: 0;}
|
||||
|
||||
.do-fn-cl { *zoom: 1; }
|
||||
.do-fn-cl:after {visibility: hidden;overflow:hidden; display: block;height: 0;content: "."; clear: both;}
|
||||
.do-fn-cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; overflow:hidden;}
|
||||
.do-fn-clear {clear:both;display:inline;}
|
||||
|
||||
.do-fn-show{display:block;}
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
@charset "UTF-8";*{margin:0;padding:0;vertical-align:baseline;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}img{border:0;display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}.do-fn-cl{*zoom:1}.do-fn-cl:after{content:".";display:block;height:0;clear:both;visibility:hidden;overflow:hidden}.do-fn-clear{clear:both;display:inline}.do-fn-show{display:block}.do-fn-hide{display:none}.do-fn-fl{float:left}.do-fn-fr{float:right}.do-fn-noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.do-fn-noselect a,.do-fn-noselect img{-webkit-user-drag:none}.do-fn-ell{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.do-st-thin{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.do-st-hand{cursor:pointer}
|
|
@ -0,0 +1 @@
|
|||
.do-ui-button{display:inline-block;padding:0 5px;text-align:center;font-size:12px;transition:all .1s ease-in-out}.do-ui-button.medium{min-width:100px;height:35px;line-height:35px;font-size:15px}.do-ui-button.large{min-width:150px;height:50px;line-height:50px;font-size:18px}.do-ui-button.radius-3{border-radius:3px}.do-ui-button.radius-5{border-radius:5px}.do-ui-button.green{background:#1abc9c;color:#fff}.do-ui-button.green:hover{background:#48c9b0}.do-ui-button.green:active{background:#16a085}.do-ui-button.blue{background:#3498db;color:#fff}.do-ui-button.blue:hover{background:#5dade2}.do-ui-button.blue:active{background:#2c81ba}.do-ui-button.red{background:#e74c3c;color:#fff}.do-ui-button.red:hover{background:#ec7063}.do-ui-button.red:active{background:#c54133}.do-ui-button.orange{background:#f39c12;color:#fff}.do-ui-button.orange:hover{background:#f1c40f}.do-ui-button.orange:active{background:#e67e22}.do-ui-button.plain{background:#e7e8eb;color:#34495e}.do-ui-button.plain:hover{background:#ecf0f1}.do-ui-button.plain:active{background:#bdc3c7}.do-ui-button.grey{background:#34495e;color:#fff}.do-ui-button.grey:hover{background:#5d6d7e}.do-ui-button.grey:active{background:#2c3e50}.do-ui-input{display:inline-block;min-height:30px;padding:0 5px;border:1px solid #bdc3c7;background:#fff;color:#34495e;outline:none;transition:all .1s ease-in-out}.do-ui-input::-webkit-input-placeholder{color:#bdc3c7}.do-ui-input.radius-3{border-radius:3px}.do-ui-input.radius-5{border-radius:5px}.do-ui-input:focus{border-color:#1abc9c}.do-ui-input.alert{border-color:#e74c3c;color:#e74c3c}.do-ui-input.disabled{border-color:transparent;background:#e7e8eb;color:#bdc3c7}.do-ui-select{display:inline-block;min-height:30px;padding:0 5px;border:1px solid #bdc3c7;background:#fff;color:#34495e;outline:none;-moz-appearance:none;transition:all .1s ease-in-out}.do-ui-select::-ms-expand{display:none}.do-ui-select.radius-3{border-radius:3px}.do-ui-select.radius-5{border-radius:5px}.do-ui-select:focus{border-color:#1abc9c}.do-ui-select.alert{border-color:#e74c3c;color:#e74c3c}.do-ui-select.disabled{border-color:transparent;background:#e7e8eb;color:#bdc3c7}.do-ui-radio,.do-ui-checkbox{display:inline-block;position:relative;width:auto;height:auto;min-height:30px;padding-left:50px;background:#fff}.do-ui-radio>input,.do-ui-checkbox>input{position:absolute;left:25px;top:5px;width:20px;height:20px;outline:none;-webkit-appearance:none;background:#fff;border:2px solid #1abc9c;border-radius:3px}.do-ui-radio>input:checked,.do-ui-checkbox>input:checked{background:#1abc9c}.do-ui-checkbox>input:checked{box-shadow:inset 0 0 0 2px #fff}.do-ui-radio>input{left:10px;width:35px;border-radius:10px;border-color:#bdc3c7;background:#bdc3c7}.do-ui-radio>input::after{float:left;display:block;width:16px;height:16px;border-radius:50%;content:"";background:#fff}.do-ui-radio>input:checked{border-color:#1abc9c}.do-ui-radio>input:checked::after{float:right}
|
|
@ -0,0 +1,98 @@
|
|||
@charset "UTF-8";
|
||||
/**
|
||||
*
|
||||
* @authors yutent (yutent@doui.cc)
|
||||
* @date 2017-05-20 21:35:30
|
||||
* @version $Id$
|
||||
*/
|
||||
|
||||
$cg: #1abc9c #48c9b0 #16a085;
|
||||
$cb: #3498db #5dade2 #2c81ba;
|
||||
$cr: #e74c3c #ec7063 #c54133;
|
||||
$co: #f39c12 #f1c40f #e67e22;
|
||||
$cp: #e7e8eb #ecf0f1 #bdc3c7;
|
||||
$cgr: #34495e #5d6d7e #2c3e50;
|
||||
|
||||
@mixin ts($c: all, $t: .1s, $m: ease-in-out){
|
||||
transition:$c $t $m;
|
||||
}
|
||||
/*--------各种按钮---------*/
|
||||
.do-ui-button {display:inline-block;padding:0 5px;text-align:center;font-size:12px;@include ts;
|
||||
|
||||
&.medium {min-width:100px;height:35px;line-height:35px;font-size:15px}
|
||||
&.large {min-width:150px;height:50px;line-height:50px;font-size:18px;}
|
||||
&.radius-3 {border-radius:3px;}
|
||||
&.radius-5 {border-radius:5px;}
|
||||
|
||||
&.green {background:nth($cg, 1);color:#fff;}
|
||||
&.green:hover {background:nth($cg, 2);}
|
||||
&.green:active {background:nth($cg, 3);}
|
||||
&.blue {background:nth($cb, 1);color:#fff;}
|
||||
&.blue:hover {background:nth($cb, 2);}
|
||||
&.blue:active {background:nth($cb, 3);}
|
||||
&.red {background:nth($cr, 1);color:#fff;}
|
||||
&.red:hover {background:nth($cr, 2);}
|
||||
&.red:active {background:nth($cr, 3);}
|
||||
&.orange {background:nth($co, 1);color:#fff;}
|
||||
&.orange:hover {background:nth($co, 2);}
|
||||
&.orange:active {background:nth($co, 3);}
|
||||
&.plain {background:nth($cp, 1);color:nth($cgr, 1);}
|
||||
&.plain:hover {background:nth($cp, 2);}
|
||||
&.plain:active {background:nth($cp, 3);}
|
||||
&.grey {background:nth($cgr, 1);color:#fff;}
|
||||
&.grey:hover {background:nth($cgr, 2);}
|
||||
&.grey:active {background:nth($cgr, 3);}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*--------各种input---------*/
|
||||
|
||||
|
||||
.do-ui-input {display:inline-block;min-height:30px;padding:0 5px;border:1px solid nth($cp, 3);background:#fff;color:nth($cgr, 1);outline:none;@include ts;
|
||||
|
||||
&::-webkit-input-placeholder {color:nth($cp, 3);}
|
||||
|
||||
&.radius-3 {border-radius:3px;}
|
||||
&.radius-5 {border-radius:5px;}
|
||||
|
||||
&:focus {border-color:nth($cg, 1);}
|
||||
&.alert {border-color:nth($cr, 1);color:nth($cr, 1)}
|
||||
&.disabled {border-color:transparent;background:nth($cp, 1);color:nth($cp, 3)}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.do-ui-select {display:inline-block;min-height:30px;padding:0 5px;border:1px solid nth($cp, 3);background:#fff;color:nth($cgr, 1);outline:none;-moz-appearance: none;@include ts;
|
||||
|
||||
&::-ms-expand {display:none;}
|
||||
&.radius-3 {border-radius:3px;}
|
||||
&.radius-5 {border-radius:5px;}
|
||||
|
||||
&:focus {border-color:nth($cg, 1);}
|
||||
&.alert {border-color:nth($cr, 1);color:nth($cr, 1)}
|
||||
&.disabled {border-color:transparent;background:nth($cp, 1);color:nth($cp, 3)}
|
||||
}
|
||||
|
||||
|
||||
.do-ui-radio,
|
||||
.do-ui-checkbox {display:inline-block;position:relative;width:auto;height:auto;min-height:30px;padding-left:50px;background:#fff;
|
||||
|
||||
>input {position:absolute;left:25px;top:5px;width:20px;height:20px;outline:none;-webkit-appearance:none;background:#fff;border:2px solid nth($cg, 1);border-radius:3px;
|
||||
|
||||
&:checked {background:nth($cg, 1);}
|
||||
}
|
||||
}
|
||||
.do-ui-checkbox {
|
||||
>input:checked {box-shadow:inset 0 0 0 2px #fff;}
|
||||
}
|
||||
.do-ui-radio {
|
||||
>input {left:10px;width:35px;border-radius:10px;border-color:nth($cp, 3);background:nth($cp, 3);
|
||||
|
||||
&::after {float:left;display:block;width:16px;height:16px;border-radius:50%;content:"";background:#fff;}
|
||||
&:checked {border-color:nth($cg, 1);}
|
||||
&:checked::after {float: right;}
|
||||
}
|
||||
}
|
|
@ -188,9 +188,9 @@ define(['yua', 'lib/drag', 'css!./skin/def'], function(yua){
|
|||
conf.menubar = false;
|
||||
return __layer.open(conf)
|
||||
},
|
||||
prompt: function(msg, callback){
|
||||
if(typeof callback !== 'function'){
|
||||
return console.error('argument [callback] requires a function, but ' + (typeof callback) + ' given')
|
||||
prompt: function(msg, yescb, nocb){
|
||||
if(typeof yescb !== 'function'){
|
||||
return console.error('argument [callback] requires a function, but ' + (typeof yescb) + ' given')
|
||||
}
|
||||
var conf = {
|
||||
type: 3,
|
||||
|
@ -199,9 +199,12 @@ define(['yua', 'lib/drag', 'css!./skin/def'], function(yua){
|
|||
title: msg,
|
||||
content: '<input class="prompt-value" :duplex="prompt" />',
|
||||
yes: function(id){
|
||||
callback(id, yua.vmodels[id].prompt)
|
||||
yescb(id, yua.vmodels[id].prompt)
|
||||
}
|
||||
}
|
||||
if(typeof nocb === 'function'){
|
||||
conf.no = nocb
|
||||
}
|
||||
return __layer.open(conf)
|
||||
},
|
||||
use: function(skin, callback){
|
||||
|
@ -486,7 +489,7 @@ define(['yua', 'lib/drag', 'css!./skin/def'], function(yua){
|
|||
this.init.$id = uuid();
|
||||
}
|
||||
if(this.init.icon > 17){
|
||||
this.icon.icon = 17
|
||||
this.init.icon = 17
|
||||
}
|
||||
//base版没有iframe类型
|
||||
if(this.init.type === 4){
|
||||
|
|
|
@ -762,7 +762,8 @@ function Renderer(options) {
|
|||
}
|
||||
|
||||
Renderer.prototype.code = function(code, lang, escaped) {
|
||||
|
||||
code = code.replace(/<script>/g, '<script>')
|
||||
.replace(/<\/script>/g, '</script>')
|
||||
if (this.options.highlight) {
|
||||
var out = this.options.highlight(code, lang);
|
||||
if (out != null && out !== code) {
|
||||
|
@ -798,15 +799,15 @@ Renderer.prototype.code = function(code, lang, escaped) {
|
|||
}
|
||||
}
|
||||
|
||||
output += '<section><em class="linenum do-fn-noselect">'
|
||||
output += /*'<section><em class="linenum do-fn-noselect">'
|
||||
+ idx
|
||||
+ '.</em>'
|
||||
+ '<code class="lang '
|
||||
+ */'<code class="lang '
|
||||
+ lang
|
||||
+ '">'
|
||||
+ codes[idx - 1]
|
||||
+ '\n</code>' //加\n为了避免空行时无法显示
|
||||
+ '</section>'
|
||||
// + '</section>'
|
||||
}
|
||||
|
||||
return '<pre class="do-ui-blockcode">'
|
||||
|
@ -886,6 +887,7 @@ Renderer.prototype.em = function(text) {
|
|||
};
|
||||
|
||||
Renderer.prototype.codespan = function(txt) {
|
||||
txt = txt.replace(/&/g, '&')
|
||||
return '<code class="do-ui-inlinecode">' + txt + '</code>';
|
||||
};
|
||||
|
||||
|
|
|
@ -36,22 +36,24 @@
|
|||
|
||||
.do-meditor-attach .cont-box .select-file {width:100%;height:35px;line-height:33px}
|
||||
.do-meditor-attach .cont-box .select-file span.file {float:left;width:100px;height:35px;border:1px solid #ddd;background:#f7f7f7;color:#666;text-align:center;cursor:pointer;}
|
||||
.do-meditor-attach .cont-box .select-file span.tips {display:inline-block;padding:0 10px;line-height:35px;color:#666;}
|
||||
.do-meditor-attach .cont-box .upload-box {width:100%;height:auto;min-height:190px;margin:10px 0;border:1px solid #e2e2e2;}
|
||||
.do-meditor-attach .cont-box .upload-box .tr {width:100%;height:35px;line-height:35px;text-align:center;}
|
||||
.do-meditor-attach .cont-box .upload-box .tr:hover {background:#fafafa}
|
||||
.do-meditor-attach .cont-box .upload-box .thead {line-height:34px;border-bottom:1px solid #e2e2e2;background:#f7f7f7;}
|
||||
|
||||
.do-meditor-attach .cont-box .upload-box .td {float:left;}
|
||||
.do-meditor-attach .cont-box .upload-box .td.name {width:50%;}
|
||||
.do-meditor-attach .cont-box .upload-box .td.progress {width:20%;}
|
||||
.do-meditor-attach .cont-box .upload-box .td.option {width:30%;}
|
||||
.do-meditor-attach .cont-box .upload-box .td.name {width:45%;}
|
||||
.do-meditor-attach .cont-box .upload-box .td.progress {width:40%;}
|
||||
.do-meditor-attach .cont-box .upload-box .td.option {width:15%;}
|
||||
.do-meditor-attach .cont-box .upload-box .td.option a {display:inline-block;padding:3px 5px;line-height:13px;border:1px solid #e2e2e2;background:#f7f7f7;color:#666;}
|
||||
.do-meditor-attach .cont-box .upload-box .td .red {color:#f30;}
|
||||
|
||||
.do-meditor-attach .cont-box .manager {overflow:hidden;overflow-y:auto;width:100%;height:320px;padding:10px;}
|
||||
.do-meditor-attach .cont-box .manager .item {float:left;width:22%;height:130px;margin:10px 1.5%;}
|
||||
.do-meditor-attach .cont-box .manager .item {float:left;width:22%;height:130px;margin:10px 1.5%;padding:5px;}
|
||||
.do-meditor-attach .cont-box .manager .item:hover {background:#f7f7f7;}
|
||||
.do-meditor-attach .cont-box .manager .thumb {display:block;width:100%;height:100px;}
|
||||
.do-meditor-attach .cont-box .manager .name {overflow:hidden;line-height:30px;text-align:center;}
|
||||
.do-meditor-attach .cont-box .manager .name {overflow:hidden;height:20px;line-height:30px;text-align:center;}
|
||||
.do-meditor-attach .cont-box .manager img {width:100%;height:100%;}
|
||||
.do-meditor-attach .cont-box .manager .attac-icon {display:inline-block;width:100%;height:100px;text-align:center;font:50px/100px "edicon" !important;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
|
||||
|
||||
|
|
|
@ -78,6 +78,28 @@ define([
|
|||
}
|
||||
|
||||
|
||||
function uploadScreenshot(vm, blob){
|
||||
var upload = new Uploader(vm.uploadUrl || ME.uploadUrl)
|
||||
if(ME.beforeUpload){
|
||||
ME.beforeUpload(Date.now().toString(16) + '.jpg', function(qn){
|
||||
upload.field('file', blob)
|
||||
.field('token', qn.token)
|
||||
.field('key', qn.key)
|
||||
.onEnd(function(json){
|
||||
ME.insert(vm.$editor, '![截图](' + qn.url + ')')
|
||||
})
|
||||
.start()
|
||||
})
|
||||
}else{
|
||||
upload.field('file', blob)
|
||||
.onEnd(function(json){
|
||||
ME.insert(vm.$editor, '![截图](' + json.data.url + ')')
|
||||
})
|
||||
.start()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var $init = function(vm){
|
||||
if(!vm.uploadUrl && !ME.uploadUrl){
|
||||
console.error('使用附件上传,必须先设置uploadUrl;\n可以给vm增加uploadUrl属性,也可以通过ME.uploadUrl设置')
|
||||
|
@ -85,7 +107,9 @@ define([
|
|||
if(!vm.manageUrl && !ME.manageUrl){
|
||||
console.error('使用附件管理功能,必须先设置manageUrl;\n可以给vm增加manageUrl属性,也可以通过ME.manageUrl设置')
|
||||
}
|
||||
// ME.addon.image()
|
||||
if(!ME.maxSize){
|
||||
ME.maxSize = 4194304
|
||||
}
|
||||
|
||||
vm.$editor.addEventListener('paste', function(ev){
|
||||
var txt = ev.clipboardData.getData('text/plain').trim(),
|
||||
|
@ -107,12 +131,45 @@ define([
|
|||
}
|
||||
|
||||
if(blob !== null) {
|
||||
var upload = new Uploader(vm.uploadUrl || ME.uploadUrl)
|
||||
layer.msg('截图处理中...')
|
||||
// 压缩截图,避免文件过大
|
||||
var reader = new FileReader()
|
||||
reader.onload = function(){
|
||||
var img = document.createElement('img'),
|
||||
canvas = document.createElement('canvas')
|
||||
|
||||
upload.field('image', blob)
|
||||
.onEnd(function(json){
|
||||
ME.insert(vm.$editor, '![截图](' + json.data.url + ')')
|
||||
}).start()
|
||||
img.onload = function(){
|
||||
canvas.width = img.width
|
||||
canvas.height = img.height
|
||||
|
||||
var ctx = canvas.getContext('2d')
|
||||
ctx.clearRect(0,0, canvas.width, canvas.height)
|
||||
ctx.drawImage(this, 0, 0, canvas.width, canvas.height)
|
||||
|
||||
|
||||
if(canvas.toBlob){
|
||||
canvas.toBlob(function(obj){
|
||||
uploadScreenshot(vm, obj)
|
||||
}, 'image/jpeg', 0.8)
|
||||
}else{
|
||||
var base64 = canvas.toDataURL('image/jpeg', 0.8),
|
||||
buf = atob(base64.split(',')[1]),
|
||||
arrBuf = new ArrayBuffer(buf.length),
|
||||
intArr = new Uint8Array(arrBuf),
|
||||
obj = null;
|
||||
|
||||
for(var i = 0; i < buf.length; i++){
|
||||
intArr[i] = buf.charCodeAt(i)
|
||||
}
|
||||
obj = new Blob([intArr], {type: 'image/jpeg'})
|
||||
uploadScreenshot(vm, obj)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
img.src = this.result
|
||||
}
|
||||
reader.readAsDataURL(blob)
|
||||
}
|
||||
}
|
||||
ev.preventDefault()
|
||||
|
@ -131,7 +188,7 @@ define([
|
|||
fixCont = function(){
|
||||
return '<div class="do-meditor-attach meditor-font">'
|
||||
+ '<dl class="attach-wrap">'
|
||||
+ '<dt class="tab-box">'
|
||||
+ '<dt class="tab-box" :drag="do-layer" data-limit="window">'
|
||||
+ '<span class="item" :class="active:tab === 1" :click="$switch(1)">' + lang[openType][0] +'</span>'
|
||||
+ '<span class="item" :class="active:tab === 2" :click="$switch(2)">本地上传</span>'
|
||||
+ '<span class="item" :class="active:tab === 3" :click="$switch(3)">' + lang[openType][1] + '</span>'
|
||||
|
@ -150,12 +207,14 @@ define([
|
|||
+ '</section>'
|
||||
+ '</div>'
|
||||
+ '<div class="local" :visible="tab === 2">'
|
||||
+ '<div class="select-file"><input id="meditor-attch" multiple :change="$change" type="file" class="hide" /><span class="file" :click="$select">选择文件</span></div>'
|
||||
+ '<div class="select-file"><input id="meditor-attch" multiple :change="$change" type="file" class="hide" /><span class="file" :click="$select">选择文件</span><span class="tips">(上传大小限制:单文件最大'
|
||||
+ (ME.maxSize/1048576).toFixed(2)
|
||||
+ 'MB)</span></div>'
|
||||
+ '<ul class="upload-box">'
|
||||
+ '<li class="tr thead"><span class="td name">文件名</span><span class="td progress">上传进度</span><span class="td option">操作</span></li>'
|
||||
+ '<li class="tr" :repeat="uploadFile">'
|
||||
+ '<span class="td name" :text="el.name"></span>'
|
||||
+ '<span class="td progress" :text="el.progress"></span>'
|
||||
+ '<span class="td progress" :html="el.progress"></span>'
|
||||
+ '<span class="td option"><a href="javascript:;" :click="$insert(el)">插入</a></span>'
|
||||
+ '</li>'
|
||||
+ '</ul>'
|
||||
|
@ -163,7 +222,7 @@ define([
|
|||
+ '<ul class="manager" :visible="tab === 3">'
|
||||
+ '<li class="item" :repeat="attachList" :click="$insert(el)">'
|
||||
+ '<span class="thumb" :html="el.thumb"></span>'
|
||||
+ '<p class="name" :text="el.name"></p>'
|
||||
+ '<p class="name" :attr-title="el.name" :text="el.name"></p>'
|
||||
+ '</li>'
|
||||
+ '</ul>'
|
||||
+ '</dt>'
|
||||
|
@ -179,20 +238,42 @@ define([
|
|||
*/
|
||||
function uploadFile(files, vm){
|
||||
for(var i = 0, it; it = files[i++];){
|
||||
if(openType === 'image' && !/image/.test(it.type)){
|
||||
|
||||
if(openType === 'image' && !/\.(jpg|jpeg|png|gif|bmp|webp|ico)$/.test(it.name)){
|
||||
vm.uploadFile.push({name: it.name, progress: '<span class="red">0%(失败,不允许的文件类型)</span>', url: ''})
|
||||
continue
|
||||
}
|
||||
if(it.size > ME.maxSize){
|
||||
vm.uploadFile.push({name: it.name, progress: '<span class="red">0%(文件体积过大)</span>', url: ''})
|
||||
continue
|
||||
}
|
||||
var fixName = Date.now().toString(16) + it.name.slice(it.name.lastIndexOf('.'))
|
||||
|
||||
var idx = vm.uploadFile.length,
|
||||
upload = new Uploader(vm.uploadUrl || ME.uploadUrl)
|
||||
|
||||
|
||||
vm.uploadFile.push({name: it.name, progress: '0%', url: ''})
|
||||
upload.field(openType, it)
|
||||
.onProgress(function(val){
|
||||
vm.uploadFile[idx].progress = val + '%'
|
||||
}).onEnd(function(json){
|
||||
vm.uploadFile[idx].url = json.data.url
|
||||
}).start()
|
||||
|
||||
upload.field('file', it)
|
||||
|
||||
if(ME.beforeUpload){
|
||||
ME.beforeUpload(fixName, function(qn){
|
||||
|
||||
upload.field('token', qn.token)
|
||||
.field('key', qn.key)
|
||||
.onProgress(function(val){
|
||||
vm.uploadFile[idx].progress = val + '%'
|
||||
}).onEnd(function(json){
|
||||
vm.uploadFile[idx].url = qn.url
|
||||
}).start()
|
||||
})
|
||||
}else{
|
||||
upload.onProgress(function(val){
|
||||
vm.uploadFile[idx].progress = val + '%'
|
||||
}).onEnd(function(json){
|
||||
vm.uploadFile[idx].url = json.data.url
|
||||
}).start()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -232,7 +313,8 @@ define([
|
|||
type: 7,
|
||||
menubar: false,
|
||||
shade: false,
|
||||
offset: [offset.top + 37],
|
||||
fixed: true,
|
||||
offset: [offset.top + 37 - document.body.scrollTop],
|
||||
tab: 2,
|
||||
attach: '',
|
||||
attachAlt: '',
|
||||
|
@ -264,6 +346,9 @@ define([
|
|||
$select: yua.noop,
|
||||
$change: yua.noop,
|
||||
$insert: function(it){
|
||||
if(!it.url){
|
||||
return
|
||||
}
|
||||
var val = (openType === 'image' ? '!' : '')
|
||||
+ '[' + it.name + '](' + it.url + ')'
|
||||
ME.insert(vm.$editor, val)
|
||||
|
|
|
@ -42,7 +42,7 @@ define(['lib/layer/base'], function(){
|
|||
ME.insert(vm.$editor, wrap)
|
||||
layer.close(h1Obj)
|
||||
},
|
||||
offset: [offset.top + 37, 'auto', 'auto', offset.left],
|
||||
offset: [offset.top + 37 - document.body.scrollTop, 'auto', 'auto', offset.left - document.body.scrollLeft],
|
||||
content: '<ul class="do-meditor-h1 do-fn-noselect meditor-font">'
|
||||
+ '<li :click="$insert(1)" class="h1">一级标题</li>'
|
||||
+ '<li :click="$insert(2)" class="h2">二级标题</li>'
|
||||
|
@ -121,7 +121,7 @@ define(['lib/layer/base'], function(){
|
|||
ME.insert(vm.$editor, val)
|
||||
layer.close(layid)
|
||||
},
|
||||
offset: [offset.top + 37, 'auto', 'auto', offset.left],
|
||||
offset: [offset.top + 37 - document.body.scrollTop, 'auto', 'auto', offset.left - document.body.scrollLeft],
|
||||
content: '<div class="do-meditor-common meditor-font">'
|
||||
+ '<section><span class="label">链接文字</span>'
|
||||
+ '<input class="input" :duplex="linkName" />'
|
||||
|
@ -151,7 +151,7 @@ define(['lib/layer/base'], function(){
|
|||
fixed: true,
|
||||
shadeClose: true,
|
||||
arr: getOrderArr(36),
|
||||
offset: [offset.top + 37, 'auto', 'auto', offset.left],
|
||||
offset: [offset.top + 37 - document.body.scrollTop, 'auto', 'auto', offset.left - document.body.scrollLeft],
|
||||
content: '<ul class="do-meditor-face">'
|
||||
+ '<li class="item" :repeat="arr" ><img :attr-src="ME.path + \'/addon/face/\' + el + \'.gif\'" :click="$insert(this.src)" /></li>'
|
||||
+ '</ul>',
|
||||
|
@ -168,7 +168,7 @@ define(['lib/layer/base'], function(){
|
|||
title: '0行 x 0列',
|
||||
fixed: true,
|
||||
shadeClose: true,
|
||||
offset: [offset.top + 37, 'auto', 'auto', offset.left],
|
||||
offset: [offset.top + 37 - document.body.scrollTop, 'auto', 'auto', offset.left - document.body.scrollLeft],
|
||||
matrix: objArr(10).map(function(){return objArr(10)}),
|
||||
content: '<ul class="do-meditor-table">'
|
||||
+ '<li :repeat="matrix"><span :repeat-o="el" :class="{active: o.v}" :data="{x: $index, y: $outer.$index}"></span></li>'
|
||||
|
@ -239,7 +239,7 @@ define(['lib/layer/base'], function(){
|
|||
ME.insert(vm.$editor, val)
|
||||
layer.close(layid)
|
||||
},
|
||||
offset: [offset.top + 37, 'auto', 'auto', offset.left],
|
||||
offset: [offset.top + 37 - document.body.scrollTop, 'auto', 'auto', offset.left - document.body.scrollLeft],
|
||||
content: '<div class="do-meditor-common meditor-font">'
|
||||
+ '<section><span class="label">图片描述</span>'
|
||||
+ '<input class="input" :duplex="imgAlt" />'
|
||||
|
@ -313,7 +313,7 @@ define(['lib/layer/base'], function(){
|
|||
content: '<div class="do-meditor-codeblock meditor-font">'
|
||||
+ '<section><span class="label">语言类型</span>'
|
||||
+ '<select :duplex="lang">'
|
||||
+ '<option :ME.repeat="$lang" :attr-value="el.id">{{el.name || el.id}}</option>'
|
||||
+ '<option :repeat="$lang" :attr-value="el.id">{{el.name || el.id}}</option>'
|
||||
+ '</select>'
|
||||
+ '</section>'
|
||||
+ '<section>'
|
||||
|
@ -333,19 +333,14 @@ define(['lib/layer/base'], function(){
|
|||
},
|
||||
fullscreen: function(elem, vm){
|
||||
vm.fullscreen = !vm.fullscreen
|
||||
if(vm.fullscreen){
|
||||
vm.preview = true
|
||||
vm.htmlTxt = vm.$htmlTxt
|
||||
}else{
|
||||
vm.preview = false
|
||||
}
|
||||
vm.$onFullscreen(vm.fullscreen)
|
||||
},
|
||||
about: function(elem){
|
||||
var offset = yua(elem).offset()
|
||||
layer.open({
|
||||
type: 7,
|
||||
title: '关于编辑器',
|
||||
offset: [offset.top + 37],
|
||||
offset: [offset.top + 37 - document.body.scrollTop],
|
||||
content: '<div class="do-meditor-about meditor-font">'
|
||||
+ '<pre>'
|
||||
+ ' __ __ _____ _ _ _\n'
|
||||
|
|
|
@ -21,6 +21,7 @@ define([
|
|||
}
|
||||
})
|
||||
|
||||
var editorVM = []
|
||||
yua.ui.meditor = '0.0.1'
|
||||
//存放编辑器公共静态资源
|
||||
window.ME = {
|
||||
|
@ -28,11 +29,13 @@ define([
|
|||
toolbar: { //工具栏title
|
||||
pipe: '',
|
||||
h1: '标题',
|
||||
quote: '引用文本',
|
||||
bold: '粗体',
|
||||
italic: '斜体',
|
||||
through: '删除线',
|
||||
unordered: '无序列表',
|
||||
ordered: '有序列表',
|
||||
link: '超链接',
|
||||
hr: '横线',
|
||||
time: '插入当前时间',
|
||||
face: '表情',
|
||||
|
@ -47,7 +50,7 @@ define([
|
|||
},
|
||||
addon: {}, //已有插件
|
||||
//往文本框中插入内容
|
||||
insert: function(dom, val){
|
||||
insert: function(dom, val, isSelect){
|
||||
if(document.selection){
|
||||
dom.focus()
|
||||
var range = document.selection.createRange()
|
||||
|
@ -64,8 +67,7 @@ define([
|
|||
+ val
|
||||
+ dom.value.slice(endPos, dom.value.length);
|
||||
|
||||
|
||||
dom.selectionStart = startPos
|
||||
dom.selectionStart = isSelect ? startPos : (startPos + val.length)
|
||||
dom.selectionEnd = startPos + val.length
|
||||
dom.scrollTop = scrollTop
|
||||
dom.focus()
|
||||
|
@ -123,6 +125,33 @@ define([
|
|||
}
|
||||
return result
|
||||
}
|
||||
},
|
||||
get: function(id){
|
||||
if(id === void 0){
|
||||
id = editorVM.length - 1
|
||||
}
|
||||
var vm = editorVM[id]
|
||||
if(vm){
|
||||
return {
|
||||
id: vm.$id,
|
||||
getVal: function(){
|
||||
return vm.plainTxt.trim()
|
||||
},
|
||||
getHtml: function(){
|
||||
return vm.$htmlTxt
|
||||
},
|
||||
setVal: function(txt){
|
||||
vm.plainTxt = txt
|
||||
},
|
||||
show: function(){
|
||||
vm.editorVisible = true
|
||||
},
|
||||
hide: function(){
|
||||
vm.editorVisible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
}
|
||||
//获取真实的引用路径,避免因为不同的目录结构导致加载失败的情况
|
||||
|
@ -274,14 +303,14 @@ define([
|
|||
|
||||
|
||||
yua.component('meditor', {
|
||||
$template: '<div class="do-meditor meditor-font" :class="{fullscreen: fullscreen}">'
|
||||
$template: '<div class="do-meditor meditor-font" '
|
||||
+ ':visible="editorVisible" '
|
||||
+ ':class="{fullscreen: fullscreen, preview: preview}">'
|
||||
+ '<div class="tool-bar do-fn-noselect">{toolbar}</div>'
|
||||
+ '<div class="editor-body">'
|
||||
+ '<textarea spellcheck="false" :duplex="plainTxt" :attr="{disabled: disabled}" :on-paste="$paste($event)" id="{uuid}"></textarea>'
|
||||
+ '</div>'
|
||||
+ '<div class="editor-md-preview" :visible="preview">'
|
||||
+ '<content class="preview" :html="htmlTxt"></content>'
|
||||
+ '</div>'
|
||||
+ '<content class="md-preview" :visible="preview" :html="htmlTxt"></content>'
|
||||
+ '</div>',
|
||||
$$template: function(txt){
|
||||
|
||||
|
@ -300,6 +329,10 @@ define([
|
|||
})
|
||||
delete base.$addons
|
||||
}
|
||||
if(base.hasOwnProperty('$show')){
|
||||
base.editorVisible = base.$show
|
||||
delete base.$show
|
||||
}
|
||||
return base
|
||||
},
|
||||
$init: function(vm){
|
||||
|
@ -324,6 +357,7 @@ define([
|
|||
$ready: function(vm){
|
||||
vm.$editor = document.querySelector('#' + vm.$id)
|
||||
|
||||
editorVM.push(vm)
|
||||
//自动加载额外的插件
|
||||
require(extraAddons, function(){
|
||||
var args = Array.prototype.slice.call(arguments, 0)
|
||||
|
@ -334,17 +368,27 @@ define([
|
|||
|
||||
yua(vm.$editor).bind('keydown', function(ev){
|
||||
|
||||
//tab键改为插入4个空格,阻止默认事件,防止焦点失去
|
||||
var wrap = ME.selection(vm.$editor) || '',
|
||||
select = !!wrap;
|
||||
//tab键改为插入2个空格,阻止默认事件,防止焦点失去
|
||||
if(ev.keyCode === 9){
|
||||
var wrap = ME.selection(vm.$editor) || ''
|
||||
wrap = wrap.split('\n').map(function(it){
|
||||
return ev.shiftKey ? it.replace(/^\s\s/, '') : ' ' + it
|
||||
}).join('\n')
|
||||
ME.insert(this, wrap)
|
||||
ME.insert(this, wrap, select)
|
||||
ev.preventDefault()
|
||||
}
|
||||
//修复按退格键删除选中文本时,选中的状态不更新的bug
|
||||
if(ev.keyCode === 8){
|
||||
if(select){
|
||||
ME.insert(this, '', select)
|
||||
ev.preventDefault()
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
//编辑器成功加载的回调
|
||||
vm.$onSuccess(ME.get(), vm)
|
||||
},
|
||||
$paste: function(ev){
|
||||
var txt = ev.clipboardData.getData('text/plain').trim(),
|
||||
|
@ -360,15 +404,22 @@ define([
|
|||
ev.preventDefault()
|
||||
},
|
||||
$compile: function(){
|
||||
var txt = this.plainTxt.trim()
|
||||
txt = txt.replace(/<script>/g, '<script>')
|
||||
.replace(/<\/script>/g, '</script>')
|
||||
|
||||
//只解析,不渲染
|
||||
this.$htmlTxt = marked(this.plainTxt.trim())
|
||||
this.$htmlTxt = marked(txt)
|
||||
},
|
||||
$onToolbarClick: yua.noop,
|
||||
$onSuccess: yua.noop,
|
||||
$onUpdate: yua.noop,
|
||||
$onFullscreen: yua.noop,
|
||||
disabled: false, //禁用编辑器
|
||||
fullscreen: true, //是否全屏
|
||||
fullscreen: false, //是否全屏
|
||||
preview: false, //是否显示预览
|
||||
$editor: null, //编辑器元素
|
||||
editorVisible: true,
|
||||
$htmlTxt: '', //临时储存html文本
|
||||
htmlTxt: '', //用于预览渲染
|
||||
plainTxt: '' //纯md文本
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
::-webkit-scrollbar-thumb {background:#cad5d5;}
|
||||
::-webkit-scrollbar-thumb:hover {background:#9bacac;}
|
||||
|
||||
.do-meditor {position:relative;width:100%;height:100%;min-height:180px;border:1px solid #ddd;background:#fff;color:#666;}
|
||||
.do-meditor {position:relative;width:100%;height:100%;min-height:180px;padding-top:43px;border:1px solid #ddd;background:#fff;color:#666;}
|
||||
.meditor-font {font-family:"PingFang SC","Helvetica Neue","Hiragino Sans GB","Segoe UI","Microsoft YaHei",sans-serif;}
|
||||
|
||||
|
||||
|
@ -25,7 +25,7 @@
|
|||
|
||||
/* 关于编辑器模块*/
|
||||
.do-meditor-about {width:400px;padding:10px 20px;}
|
||||
.do-meditor-about pre {padding-bottom:15px}
|
||||
.do-meditor-about pre {padding-bottom:15px;line-height:1;}
|
||||
.do-meditor-about a {color:#049789}
|
||||
.do-meditor-about p {margin:0 auto 5px;}
|
||||
|
||||
|
@ -79,7 +79,7 @@
|
|||
|
||||
|
||||
|
||||
.do-meditor .tool-bar {position:relative;z-index:99;width:100%;height:auto;min-height:43px;padding:5px 10px;border-bottom:1px solid #ddd;background:#f5f5f5;color:#666;}
|
||||
.do-meditor .tool-bar {overflow:hidden;position:absolute;top:0;left:0;z-index:99;width:100%;height:43px;padding:5px 10px;border-bottom:1px solid #ddd;background:#f5f5f5;color:#666;}
|
||||
.do-meditor .tool-bar .edicon {display:inline-block;width:30px;height:32px;text-align:center;font:20px/32px "edicon" !important;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
|
||||
.do-meditor .tool-bar .edicon:hover {background:#e5e5e5;}
|
||||
.do-meditor .tool-bar .icon-pipe {width:20px;}
|
||||
|
@ -107,46 +107,48 @@
|
|||
.do-meditor .tool-bar .icon-help::before {content:"\e614"}
|
||||
|
||||
|
||||
.do-meditor .editor-body {float:left;position:absolute;z-index:89;left:0;top:0;width:100%;height:100%;padding-top:43px;}
|
||||
.do-meditor .editor-body>textarea {overflow:hidden;overflow-y:auto;width:100%;height:100%;padding:5px;border:0;outline:none;resize:none;color:#666;}
|
||||
.do-meditor .editor-md-preview {position:absolute;z-index:90;right:0;top:0;width:100%;height:100%;padding-top:43px;}
|
||||
|
||||
.do-meditor .editor-md-preview>content.preview {overflow:hidden;overflow-y:auto;display:block;width:100%;height:100%;padding:10px;color:#666;font-size:14px;background:#fff;}
|
||||
.do-meditor .editor-body {float:left;width:100%;height:100%;background:#fff;}
|
||||
.do-meditor .editor-body>textarea {overflow:hidden;overflow-y:auto;width:100%;height:100%;padding:5px;border:0;outline:none;resize:none;color:#666;background:none;}
|
||||
.do-meditor .md-preview {float:right;overflow:hidden;overflow-y:auto;display:block;width:50%;height:100%;padding:10px;line-height:2;border-left:1px solid #ddd;color:#666;font-size:14px;background:#fff;}
|
||||
|
||||
|
||||
.do-meditor .editor-md-preview .md-hd {position:relative;margin:15px 0;padding-left:30px;font-weight:normal;font-size:17px;}
|
||||
.do-meditor .editor-md-preview h1.md-hd {padding-left:0;}
|
||||
.do-meditor .editor-md-preview .md-hd a {position:relative;display:inline-block;padding:0 8px;background:#fff;color:#454545}
|
||||
.do-meditor .editor-md-preview h1.md-hd a {padding-left:0;color:#000;}
|
||||
.do-meditor .editor-md-preview h2.md-hd a {color:#000;}
|
||||
.do-meditor .md-preview .md-hd {position:relative;margin:15px 0;padding-left:30px;font-weight:normal;font-size:17px;}
|
||||
.do-meditor .md-preview h1.md-hd {padding-left:0;}
|
||||
.do-meditor .md-preview .md-hd a {position:relative;display:inline-block;padding:0 8px;background:#fff;color:#454545}
|
||||
.do-meditor .md-preview .md-hd a:hover {text-decoration:none;}
|
||||
.do-meditor .md-preview h1.md-hd a {padding-left:0;color:#000;}
|
||||
.do-meditor .md-preview h2.md-hd a {color:#000;}
|
||||
|
||||
.do-meditor .editor-md-preview h1.md-hd {margin:0 0 30px;font-size:25px;}
|
||||
.do-meditor .editor-md-preview h2.md-hd {margin:20px 0;font-size:23px;}
|
||||
.do-meditor .editor-md-preview h3.md-hd {margin:20px 0 15px;font-size:20px;}
|
||||
.do-meditor .editor-md-preview h1:after {display:block;width:100%;content:" ";border-bottom:1px solid #ddd;}
|
||||
.do-meditor .editor-md-preview h2:before,
|
||||
.do-meditor .editor-md-preview h3:before,
|
||||
.do-meditor .editor-md-preview h4:before,
|
||||
.do-meditor .editor-md-preview h5:before,
|
||||
.do-meditor .editor-md-preview h6:before {display:block;position:absolute;left:0;top:50%;width:100%;content:" ";border-bottom:1px solid #ddd;}
|
||||
.do-meditor .md-preview h1.md-hd {margin:0 0 30px;font-size:25px;}
|
||||
.do-meditor .md-preview h2.md-hd {margin:20px 0;font-size:23px;}
|
||||
.do-meditor .md-preview h3.md-hd {margin:20px 0 15px;font-size:20px;}
|
||||
.do-meditor .md-preview h1:after {display:block;width:100%;content:" ";border-bottom:1px solid #ddd;}
|
||||
.do-meditor .md-preview h2:before,
|
||||
.do-meditor .md-preview h3:before,
|
||||
.do-meditor .md-preview h4:before,
|
||||
.do-meditor .md-preview h5:before,
|
||||
.do-meditor .md-preview h6:before {display:block;position:absolute;left:0;top:50%;width:100%;content:" ";border-bottom:1px solid #ddd;}
|
||||
|
||||
.do-meditor .editor-md-preview a {text-decoration:none;}
|
||||
.do-meditor .editor-md-preview blockquote {margin:10px 0;padding:5px 10px;border-left:5px solid #6bb294;background:#f7f7f7}
|
||||
.do-meditor .editor-md-preview table thead tr {background:#f2f2f2}
|
||||
.do-meditor .editor-md-preview table thead th {padding:0 8px;border:1px solid #ddd}
|
||||
.do-meditor .editor-md-preview table tbody td {padding:0 8px;border:1px solid #ddd}
|
||||
.do-meditor .md-preview a {text-decoration:none;}
|
||||
.do-meditor .md-preview a:hover {text-decoration:underline;}
|
||||
.do-meditor .md-preview p {margin:15px 0;}
|
||||
.do-meditor .md-preview blockquote {margin:10px 0;padding:5px 10px;border-left:5px solid #6bb294;background:#f7f7f7}
|
||||
.do-meditor .md-preview blockquote p {margin:0;}
|
||||
.do-meditor .md-preview table thead tr {background:#f2f2f2}
|
||||
.do-meditor .md-preview table thead th {padding:0 8px;border:1px solid #ddd}
|
||||
.do-meditor .md-preview table tbody td {padding:0 8px;border:1px solid #ddd}
|
||||
|
||||
.do-meditor .editor-md-preview hr {margin:30px 0;}
|
||||
.do-meditor .editor-md-preview ol {list-style:decimal inside none;}
|
||||
.do-meditor .editor-md-preview ul {list-style:disc inside none;}
|
||||
.do-meditor .editor-md-preview li ol {margin-left:2em;}
|
||||
.do-meditor .editor-md-preview li ul {margin-left:2em;list-style-type: circle;}
|
||||
.do-meditor .editor-md-preview li ol ul,
|
||||
.do-meditor .editor-md-preview li ul ul {list-style-type: square;}
|
||||
.do-meditor .md-preview hr {margin:30px 0;border-bottom:0;}
|
||||
.do-meditor .md-preview ol {margin-left:2em;list-style:decimal outside none;}
|
||||
.do-meditor .md-preview ul {margin-left:2em;list-style:disc outside none;}
|
||||
.do-meditor .md-preview li ol {margin-left:2em;}
|
||||
.do-meditor .md-preview li ul {margin-left:2em;list-style-type: circle;}
|
||||
.do-meditor .md-preview li ol ul,
|
||||
.do-meditor .md-preview li ul ul {list-style-type: square;}
|
||||
|
||||
|
||||
/*全屏模式*/
|
||||
.do-meditor.fullscreen {position:fixed;left:0;top:0;z-index:999;}
|
||||
|
||||
.do-meditor.preview .editor-body,
|
||||
.do-meditor.fullscreen .editor-body {width:50%}
|
||||
.do-meditor.fullscreen .editor-md-preview {width:50%;border-left:1px solid #ddd;}
|
|
@ -1,10 +1,60 @@
|
|||
.do-pages {width:100%;height:auto;text-align:center;font-size:13px;}
|
||||
.do-pages a.normal,.do-pages a.disabled,.do-pages a.curr {display:inline-block;width:auto;height:30px;padding:0 10px;margin:0 3px;line-height:30px;text-decoration:none;border-radius:3px;cursor:pointer;background:#6bb294;color:#fff;}
|
||||
.do-pages a.disabled,.do-pages a.curr {background:none;color:#666;cursor:default}
|
||||
.do-pages a.disabled {padding:0;}
|
||||
.do-pages a.curr {font-weight:bold;font-size:15px;color:#429572;}
|
||||
.do-pages {height:auto;text-align:center;font-size:13px;}
|
||||
.do-pages a {color:#34495e;}
|
||||
.do-pages.skin-1 {width:100%;}
|
||||
.do-pages.skin-2 {float:right;width:auto;}
|
||||
.do-pages.skin-1 a.normal,
|
||||
.do-pages.skin-1 a.disabled,
|
||||
.do-pages.skin-1 a.curr {display:inline-block;width:auto;min-width:40px;height:40px;padding:0 10px;margin:0 3px;line-height:40px;text-decoration:none;cursor:pointer;}
|
||||
.do-pages.skin-2 a.normal,
|
||||
.do-pages.skin-2 a.disabled,
|
||||
.do-pages.skin-2 a.curr {float:left;width:auto;min-width:40px;height:40px;margin:0;padding:0 5px;line-height:40px;}
|
||||
|
||||
|
||||
.do-pages.green a.normal {background: #1abc9c;color: #fff; }
|
||||
.do-pages.green a.normal:hover {background: #48c9b0; }
|
||||
.do-pages.green.skin-2 a.curr,
|
||||
.do-pages.green a.normal:active {background: #16a085;color: #fff;}
|
||||
|
||||
.do-pages.blue a.normal {background: #3498db;color: #fff; }
|
||||
.do-pages.blue a.normal:hover {background: #5dade2; }
|
||||
.do-pages.blue.skin-2 a.curr,
|
||||
.do-pages.blue a.normal:active {background: #2c81ba;color: #fff;}
|
||||
|
||||
.do-pages.red a.normal {background: #e74c3c;color: #fff; }
|
||||
.do-pages.red a.normal:hover {background: #ec7063; }
|
||||
.do-pages.red.skin-2 a.curr,
|
||||
.do-pages.red a.normal:active {background: #c54133;color: #fff;}
|
||||
|
||||
.do-pages.orange a.normal {background: #f39c12;color: #fff; }
|
||||
.do-pages.orange a.normal:hover {background: #f1c40f; }
|
||||
.do-pages.orange.skin-2 a.curr,
|
||||
.do-pages.orange a.normal:active {background: #e67e22;color: #fff;}
|
||||
|
||||
.do-pages.plain a.normal {background: #e7e8eb;color: #34495e; }
|
||||
.do-pages.plain a.normal:hover {background: #ecf0f1; }
|
||||
.do-pages.plain.skin-2 a.curr,
|
||||
.do-pages.plain a.normal:active {background: #bdc3c7;color: #34495e; }
|
||||
|
||||
.do-pages.grey a.normal {background: #34495e;color: #fff; }
|
||||
|
||||
.do-pages.grey a.normal:hover {background: #5d6d7e; }
|
||||
.do-pages.grey.skin-2 a.curr,
|
||||
.do-pages.grey a.normal:active {background: #2c3e50; color: #fff;}
|
||||
|
||||
.do-pages.skin-1 a.disabled,
|
||||
.do-pages.skin-1 a.curr {background:none;color:#666;cursor:default}
|
||||
|
||||
.do-pages.skin-1 a.disabled {min-width:0;padding:0;}
|
||||
.do-pages.skin-1 a.curr {font-weight:bold;font-size:15px;}
|
||||
|
||||
.do-pages.skin-2 a.disabled {display:none;}
|
||||
|
||||
|
||||
.do-pages.skin-1 .input-box,
|
||||
.do-pages.skin-1 .input-box span,
|
||||
.do-pages.skin-1 .input-box input {display:inline-block}
|
||||
.do-pages.skin-1 .input-box input {width:25px;height:20px;padding:0 3px;background:#fff;border:1px solid #ddd}
|
||||
.do-pages.skin-1 .input-box a.normal{height:30px;line-height:30px;}
|
||||
|
||||
.do-pages.skin-2 .input-box {display:none;}
|
||||
|
||||
.do-pages a.normal:hover{background:#429572;}
|
||||
.do-pages a.normal:active{background:#64bf99;}
|
||||
.do-pages .input-box,.do-pages .input-box span,.do-pages .input-box input {display:inline-block}
|
||||
.do-pages .input-box input {width:25px;height:20px;padding:0 3px;background:#fff;border:1px solid #ddd}
|
|
@ -1,4 +1,4 @@
|
|||
<div class="do-pages do-fn-noselect" :class="{{'skin-' + skin}}">
|
||||
<div class="do-pages do-fn-noselect" :class="{{theme}}">
|
||||
<a class="normal"
|
||||
:if="curr > 1 && !simpleMode"
|
||||
:attr="{href: $setUrl(1)}"
|
||||
|
|
|
@ -2,6 +2,8 @@
|
|||
define(["yua","text!./main.htm", "css!./main"], function(yua, tpl) {
|
||||
|
||||
yua.ui.pages = '0.0.1'
|
||||
var colors = {plain: 1, green: 1, blue: 1, red: 1, orange: 1, grey: 1},
|
||||
themes = ['skin-1 ', 'skin-2 '];
|
||||
//计算页码列表
|
||||
function calculate(vm){
|
||||
if (vm.total < 2)
|
||||
|
@ -21,7 +23,8 @@ define(["yua","text!./main.htm", "css!./main"], function(yua, tpl) {
|
|||
if(vm.curr + mid < vm.total){
|
||||
arr.push('...')
|
||||
}
|
||||
vm.pageList = arr
|
||||
vm.pageList.clear()
|
||||
vm.pageList.pushArray(arr)
|
||||
}
|
||||
|
||||
function update(pid, vm) {
|
||||
|
@ -39,6 +42,20 @@ define(["yua","text!./main.htm", "css!./main"], function(yua, tpl) {
|
|||
|
||||
return yua.component('pages', {
|
||||
$template: tpl,
|
||||
$construct: function(a, b, c){
|
||||
yua.mix(a, b, c)
|
||||
a.theme = themes[a.theme>>0]
|
||||
if(!a.theme){
|
||||
a.theme = themes[0]
|
||||
}
|
||||
if(a.color && colors[a.color]){
|
||||
a.theme += a.color
|
||||
}else{
|
||||
a.theme += 'plain'
|
||||
}
|
||||
delete a.color
|
||||
return a
|
||||
},
|
||||
$init: function(vm) {
|
||||
|
||||
calculate(vm)
|
||||
|
@ -55,6 +72,10 @@ define(["yua","text!./main.htm", "css!./main"], function(yua, tpl) {
|
|||
return vm.url.replace('{id}', val)
|
||||
}
|
||||
}
|
||||
vm.$forceReset = function(){
|
||||
vm.curr = 1
|
||||
calculate(vm)
|
||||
}
|
||||
|
||||
vm.$jump = function(ev, val) {
|
||||
if ('...' !== val) {
|
||||
|
@ -62,7 +83,7 @@ define(["yua","text!./main.htm", "css!./main"], function(yua, tpl) {
|
|||
|
||||
if (val !== void 0){
|
||||
if('javascript:;' !== link){
|
||||
location.hash = link
|
||||
location.href = link
|
||||
}
|
||||
var pid = val >> 0;
|
||||
update(pid, vm)
|
||||
|
@ -90,6 +111,9 @@ define(["yua","text!./main.htm", "css!./main"], function(yua, tpl) {
|
|||
}
|
||||
})
|
||||
},
|
||||
$ready: function(vm){
|
||||
vm.$onSuccess(vm)
|
||||
},
|
||||
curr: 1,
|
||||
total: 1,
|
||||
max: 5,
|
||||
|
@ -104,9 +128,12 @@ define(["yua","text!./main.htm", "css!./main"], function(yua, tpl) {
|
|||
home: "首页",
|
||||
end: "末页"
|
||||
},
|
||||
$skipArray: ['max', 'btns', 'url'],
|
||||
theme: '',
|
||||
$skipArray: ['max', 'btns', 'url', 'theme'],
|
||||
$setUrl: yua.noop,
|
||||
$jump: yua.noop,
|
||||
$onJump: yua.noop
|
||||
$onJump: yua.noop,
|
||||
$onSuccess: yua.noop,
|
||||
$forceReset: yua.noop,
|
||||
})
|
||||
});
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -49,7 +49,7 @@ define(['yua'], function(yua){
|
|||
win.Xhr = function(){
|
||||
return new XMLHttpRequest()
|
||||
}
|
||||
// var supportCors = 'withCredentials' in Xhr()
|
||||
var supportCors = 'withCredentials' in Xhr()
|
||||
|
||||
// ------------------- 几个解释方法 -----------------------
|
||||
|
||||
|
@ -543,6 +543,8 @@ define(['yua'], function(yua){
|
|||
// 2.2 如果不是跨域请求,则自动加上一条header信息,用以标识这是ajax请求
|
||||
if(!this.opt.crossDomain){
|
||||
this.set('X-Requested-With', 'XMLHttpRequest')
|
||||
}else{
|
||||
supportCors && (this.xhr.withCredentials = true)
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -87,7 +87,14 @@ define(['yua'], function(){
|
|||
this.errorFn && this.errorFn(hash);
|
||||
},
|
||||
on: function(rule, callback){
|
||||
this._add('get', rule, callback);
|
||||
var _this = this
|
||||
if(Array.isArray(rule)){
|
||||
rule.forEach(function(it){
|
||||
_this._add('get', it, callback);
|
||||
})
|
||||
}else{
|
||||
this._add('get', rule, callback);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -12,12 +12,12 @@ define(['yua', 'css!./skin/def.css'], function(){
|
|||
//储存版本信息
|
||||
yua.ui.tree = '0.0.1'
|
||||
|
||||
var box = '<ul class="do-tree skin-{skin}">{li}</ul>',
|
||||
var box = '<ul>{li}</ul>',
|
||||
ul = '<ul :class="{open: {it}.open}">{li}</ul>',
|
||||
li = '<li :class="{open: {it}.open, dir: {it}.children}">'
|
||||
+ '<em :click="$toggle({it})"></em><span '
|
||||
+ ':click="$click({it})" '
|
||||
+ ':text="{it}.name"></span>{child}</li>';
|
||||
+ '<em :click="$toggle({it})"></em>'
|
||||
+ '<span :click="$select({it})" :class="{active: {it}.id === currItem}" :text="{it}.name"></span>'
|
||||
+ '{child}</li>';
|
||||
|
||||
|
||||
function repeat(arr, name){
|
||||
|
@ -30,51 +30,62 @@ define(['yua', 'css!./skin/def.css'], function(){
|
|||
if(it.children){
|
||||
child += repeat(it.children, from +'.children')
|
||||
child = ul.replace('{li}', child).replace('{it}', from)
|
||||
}
|
||||
if(child){
|
||||
|
||||
}
|
||||
html = html.replace(/\{child\}/, child)
|
||||
})
|
||||
|
||||
|
||||
return html
|
||||
}
|
||||
|
||||
return yua.component('tree', {
|
||||
$template: '',
|
||||
$construct: function(base, opt, attr){
|
||||
if(!opt.from && !attr.from){
|
||||
throw new Error('tree组件必须传入「from」属性')
|
||||
function format(arr){
|
||||
var tmp = {}, farr = []
|
||||
arr.sort(function(a, b){
|
||||
return (a.pid === b.pid) ? (a.sort - b.sort) : (a.pid - b.pid)
|
||||
})
|
||||
arr.forEach(function(it){
|
||||
tmp[it.id] = it
|
||||
var parentItem = tmp[it.pid]
|
||||
delete it.pid
|
||||
|
||||
if(!parentItem){
|
||||
return farr.push(tmp[it.id])
|
||||
}
|
||||
parentItem.open = !!parentItem.open
|
||||
parentItem.children = parentItem.children || []
|
||||
parentItem.children.push(it)
|
||||
})
|
||||
tmp = arr = null
|
||||
return farr
|
||||
}
|
||||
|
||||
var from = attr.from || opt.from,
|
||||
arr = base.$up[from].$model,
|
||||
tpl = repeat(arr, from)
|
||||
|
||||
delete attr.from
|
||||
delete opt.from
|
||||
yua.mix(base, opt, attr)
|
||||
|
||||
base.skin = base.skin || 'def'
|
||||
|
||||
|
||||
tpl = box.replace('{li}', tpl).replace('{skin}', base.skin)
|
||||
|
||||
base.$template = tpl
|
||||
|
||||
return base
|
||||
},
|
||||
return yua.component('tree', {
|
||||
$template: '<div class="do-tree" :class="{{$skin}}" :html="treeHTML"></div>',
|
||||
$init: function(vm){
|
||||
|
||||
vm.$click = function(obj){
|
||||
|
||||
vm.$select = function(obj){
|
||||
vm.currItem = obj.id
|
||||
if(vm.$onClick){
|
||||
vm.$onClick(obj)
|
||||
}
|
||||
}
|
||||
vm.$update = function(arr){
|
||||
vm.treeArr.clear()
|
||||
vm.treeArr.pushArray(format(arr))
|
||||
vm.currItem = -1
|
||||
var tpl = repeat(vm.treeArr.$model, 'treeArr')
|
||||
vm.treeHTML = box.replace('{li}', tpl)
|
||||
}
|
||||
},
|
||||
$click: yua.noop,
|
||||
$ready: function(vm){
|
||||
vm.$onSuccess(vm)
|
||||
},
|
||||
$skin: 'skin-def',
|
||||
treeHTML: '',
|
||||
currItem: -1,
|
||||
treeArr: [],
|
||||
$select: yua.noop,
|
||||
$update: yua.noop,
|
||||
$onSuccess: yua.noop,
|
||||
$onClick: yua.noop,
|
||||
$toggle: function(obj){
|
||||
obj.open = !obj.open
|
||||
}
|
||||
|
|
|
@ -1,46 +1 @@
|
|||
@charset "UTF-8";
|
||||
/**
|
||||
*
|
||||
* @authors yutent (yutent@doui.cc)
|
||||
* @date 2017-04-14 21:18:53
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
.do-fn-cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; overflow:hidden;}
|
||||
.do-tree, .do-tree * {margin: 0;padding: 0;vertical-align: baseline;box-sizing:border-box;}
|
||||
|
||||
@font-face {font-family: "iconfont";
|
||||
src: url('iconfont.eot'); /* IE9*/
|
||||
src: url('iconfont.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
}
|
||||
|
||||
.do-tree {width:100%;height:auto;line-height:28px;}
|
||||
|
||||
.do-tree li {overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
|
||||
|
||||
.do-tree li ul {display:none;margin-left:20px;}
|
||||
.do-tree li ul.open {display:block;}
|
||||
|
||||
.do-tree li em,
|
||||
.do-tree li span {display:block;cursor:pointer;}
|
||||
.do-tree li em {float:left;padding:0 5px;color:#000;font-family:"iconfont" !important;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
|
||||
.do-tree li span:hover {color:#6bb294;}
|
||||
|
||||
.do-tree.skin-def li>em::before {content:"\e610";}
|
||||
.do-tree.skin-def li.dir>em::before {content:"\e622";}
|
||||
.do-tree.skin-def li.dir.open>em::before {content:"\e8ea";}
|
||||
|
||||
.do-tree.skin-light li>em::before {content:"\e73e";}
|
||||
.do-tree.skin-light li.dir>em::before {content:"\e635";}
|
||||
.do-tree.skin-light li.dir.open>em::before {content:"\e8ea";}
|
||||
|
||||
|
||||
.do-tree.skin-line li>em::before {content:"\e60e";}
|
||||
.do-tree.skin-line li.dir>em::before {content:"\e608";font-weight:bold;}
|
||||
.do-tree.skin-line li.dir.open>em::before {content:"\e662";}
|
||||
|
||||
|
||||
.do-tree.skin-arrow li>em::before {content:"\e73e";}
|
||||
.do-tree.skin-arrow li.dir>em::before {content:"\e616";font-weight:bold;}
|
||||
.do-tree.skin-arrow li.dir.open>em::before {content:"\e607";}
|
||||
.do-fn-cl:after{content:".";display:block;height:0;clear:both;visibility:hidden;overflow:hidden}.do-tree,.do-tree *{margin:0;padding:0;vertical-align:baseline;box-sizing:border-box}@font-face{font-family:"treeicon";src:url("iconfont.eot");src:url("iconfont.ttf") format("truetype")}.do-tree{overflow:hidden;overflow-y:auto;position:relative;width:100%;height:100%;line-height:28px}.do-tree ul{width:100%;height:auto}.do-tree li{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.do-tree li ul{display:none;margin-left:20px}.do-tree li ul.open{display:block}.do-tree li em,.do-tree li span{display:block;cursor:pointer}.do-tree li em{float:left;padding:0 5px;color:#000;font-family:"treeicon" !important;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale}.do-tree li span:hover{color:#6bb294}.do-tree li span.active{color:#000;font-weight:bold}.do-tree.skin-def li>em::before{content:"\e610"}.do-tree.skin-def li.dir>em::before{content:"\e622"}.do-tree.skin-def li.dir.open>em::before{content:"\e8ea"}.do-tree.skin-light li>em::before{content:"\e73e"}.do-tree.skin-light li.dir>em::before{content:"\e635"}.do-tree.skin-light li.dir.open>em::before{content:"\e8ea"}.do-tree.skin-line li>em::before{content:"\e60e"}.do-tree.skin-line li.dir>em::before{content:"\e608";font-weight:bold}.do-tree.skin-line li.dir.open>em::before{content:"\e662"}.do-tree.skin-arrow li>em::before{content:"\e73e"}.do-tree.skin-arrow li.dir>em::before{content:"\e616";font-weight:bold}.do-tree.skin-arrow li.dir.open>em::before{content:"\e607"}
|
||||
|
|
|
@ -0,0 +1,48 @@
|
|||
@charset "UTF-8";
|
||||
/**
|
||||
*
|
||||
* @authors yutent (yutent@doui.cc)
|
||||
* @date 2017-04-14 21:18:53
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
.do-fn-cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; overflow:hidden;}
|
||||
.do-tree, .do-tree * {margin: 0;padding: 0;vertical-align: baseline;box-sizing:border-box;}
|
||||
|
||||
@font-face {font-family: "treeicon";
|
||||
src: url('iconfont.eot'); /* IE9*/
|
||||
src: url('iconfont.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
}
|
||||
|
||||
.do-tree {overflow:hidden;overflow-y:auto;position:relative;width:100%;height:100%;line-height:28px;}
|
||||
.do-tree ul {width:100%;height:auto;}
|
||||
|
||||
.do-tree li {overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
|
||||
|
||||
.do-tree li ul {display:none;margin-left:20px;}
|
||||
.do-tree li ul.open {display:block;}
|
||||
|
||||
.do-tree li em,
|
||||
.do-tree li span {display:block;cursor:pointer;}
|
||||
.do-tree li em {float:left;padding:0 5px;color:#000;font-family:"treeicon" !important;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
|
||||
.do-tree li span:hover {color:#6bb294;}
|
||||
.do-tree li span.active {color:#000;font-weight:bold;}
|
||||
|
||||
.do-tree.skin-def li>em::before {content:"\e610";}
|
||||
.do-tree.skin-def li.dir>em::before {content:"\e622";}
|
||||
.do-tree.skin-def li.dir.open>em::before {content:"\e8ea";}
|
||||
|
||||
.do-tree.skin-light li>em::before {content:"\e73e";}
|
||||
.do-tree.skin-light li.dir>em::before {content:"\e635";}
|
||||
.do-tree.skin-light li.dir.open>em::before {content:"\e8ea";}
|
||||
|
||||
|
||||
.do-tree.skin-line li>em::before {content:"\e60e";}
|
||||
.do-tree.skin-line li.dir>em::before {content:"\e608";font-weight:bold;}
|
||||
.do-tree.skin-line li.dir.open>em::before {content:"\e662";}
|
||||
|
||||
|
||||
.do-tree.skin-arrow li>em::before {content:"\e73e";}
|
||||
.do-tree.skin-arrow li.dir>em::before {content:"\e616";font-weight:bold;}
|
||||
.do-tree.skin-arrow li.dir.open>em::before {content:"\e607";}
|
|
@ -0,0 +1 @@
|
|||
"use strict";define(function(){var e=function(){this.init()};return e.prototype={init:function(){return this.xhr=new XMLHttpRequest,this.form=new FormData,this.field={},this.header={},this},setUrl:function(e){return e&&"string"==typeof e?(this.url=e,this):console.error("url不能为空且必须是字符串")},setField:function(e,r){if("object"==typeof e)for(var t in e)this.field[t]=e[t];else this.field[e]=r;return this},setHeader:function(e,r){if("object"==typeof e)for(var t in e)this.header[t]=e[t];else this.header[e]=r;return this},start:function(){var e=this;if(!this.url)return console.error("请先设置url");this.xhr.open("POST",this.url,!0);for(var r in this.field)this.form.append(r,this.field[r]);var t=Date.now();this.xhr.upload.addEventListener("progress",function(r){if(r.lengthComputable&&e.progress){var s=Date.now(),i=1e3*r.loaded/1024,n={loaded:r.loaded,time:s-t};n.speed=i/n.time,n.speed<10?n.speed=Math.floor(1024*n.speed)+" B/s":n.speed=n.speed.toFixed(2)+" KB/s",n.progress=Math.round(100*r.loaded/r.total),e.progress(n)}},!1),this.xhr.onreadystatechange=function(){if(4===e.xhr.readyState&&200===e.xhr.status&&""!==e.xhr.responseText){var r=e.xhr.responseText;try{r=JSON.parse(r)}catch(e){}e.end&&e.end(r)}else 200!==e.xhr.status&&e.xhr.responseText&&e.error&&e.error(e.xhr.responseText)},this.xhr.send(this.form)},onProgress:function(e){return this.progress=e,this},onEnd:function(e){return this.end=e,this},onError:function(e){return this.error=e,this}},window.Uploader||(window.Uploader=e),e});
|
|
@ -65,10 +65,21 @@ var W3C = window.dispatchEvent
|
|||
var root = DOC.documentElement
|
||||
var yuaFragment = DOC.createDocumentFragment()
|
||||
var cinerator = DOC.createElement("div")
|
||||
var class2type = {}
|
||||
"Boolean Number String Function Array Date RegExp Object Error".replace(rword, function (name) {
|
||||
class2type["[object " + name + "]"] = name.toLowerCase()
|
||||
})
|
||||
var class2type = {
|
||||
'[object Boolean]': 'boolean',
|
||||
'[object Number]': 'number',
|
||||
'[object String]': 'string',
|
||||
'[object Function]': 'function',
|
||||
'[object Array]': 'array',
|
||||
'[object Date]': 'date',
|
||||
'[object RegExp]': 'regexp',
|
||||
'[object Object]': 'object',
|
||||
'[object Error]': 'error',
|
||||
'[object AsyncFunction]': 'asyncfunction',
|
||||
'[object Promise]': 'promise',
|
||||
'[object Generator]': 'generator',
|
||||
'[object GeneratorFunction]': 'generatorfunction'
|
||||
}
|
||||
var bindingID = 1024
|
||||
var IEVersion = NaN
|
||||
if (window.VBArray) {
|
||||
|
@ -531,6 +542,7 @@ yua.mix({
|
|||
}
|
||||
return result
|
||||
},
|
||||
deepCopy: toJson,
|
||||
eventHooks: {},
|
||||
/*绑定事件*/
|
||||
bind: function (el, type, fn, phase) {
|
||||
|
@ -3088,10 +3100,6 @@ var rnoscanAttrBinding = /^if|widget|repeat$/
|
|||
var rnoscanNodeBinding = /^html|include$/
|
||||
|
||||
function scanNodeList(elem, vmodels) {
|
||||
if(isWidget(elem)){
|
||||
// elem = elem.content
|
||||
log(elem)
|
||||
}
|
||||
var nodes = yua.slice(elem.childNodes)
|
||||
scanNodeArray(nodes, vmodels)
|
||||
}
|
||||
|
@ -3361,10 +3369,10 @@ yua.component = function (name, opts) {
|
|||
|
||||
|
||||
//==========构建VM=========
|
||||
var keepSlot = componentDefinition.$slot
|
||||
var keepReplace = componentDefinition.$replace
|
||||
var keepContainer = componentDefinition.$container
|
||||
var keepTemplate = componentDefinition.$template
|
||||
delete componentDefinition.$up
|
||||
delete componentDefinition.$ups
|
||||
delete componentDefinition.$slot
|
||||
delete componentDefinition.$replace
|
||||
delete componentDefinition.$container
|
||||
|
@ -3700,8 +3708,8 @@ yua.directive("class", {
|
|||
},
|
||||
update: function (val) {
|
||||
var obj = val
|
||||
if(!obj)
|
||||
return log('class绑定错误')
|
||||
if(!obj || this.param)
|
||||
return log('class指令语法错误 %c %s="%s"', 'color:#f00', this.name, this.expr)
|
||||
|
||||
if(typeof obj === 'string'){
|
||||
obj = {}
|
||||
|
@ -3712,9 +3720,6 @@ yua.directive("class", {
|
|||
obj = obj.$model
|
||||
}
|
||||
|
||||
if(this.param)
|
||||
return log('不再支持:class-xx="yy"的写法', this.name)
|
||||
|
||||
var $elem = yua(this.element)
|
||||
for(var i in obj){
|
||||
$elem.toggleClass(i, !!obj[i])
|
||||
|
@ -3745,7 +3750,7 @@ yua.directive("css", {
|
|||
$elem.css(i, obj[i])
|
||||
}
|
||||
}catch(err){
|
||||
log('样式格式错误', val)
|
||||
log('样式格式错误 %c %s="%s"', 'color:#f00', this.name, this.expr)
|
||||
}
|
||||
}else{
|
||||
$elem.css(this.param, val)
|
||||
|
@ -3786,8 +3791,8 @@ yua.directive('rule', {
|
|||
init: function(binding){
|
||||
if(binding.param && !__rules[binding.param]){
|
||||
__rules[binding.param] = [];
|
||||
binding.target = __rules[binding.param]
|
||||
}
|
||||
binding.target = __rules[binding.param]
|
||||
},
|
||||
update: function(obj){
|
||||
var _this = this,
|
||||
|
@ -4072,6 +4077,8 @@ var duplexBinding = yua.directive("duplex", {
|
|||
}
|
||||
switch (this.xtype) {
|
||||
case "input":
|
||||
elem.value = value;
|
||||
break;
|
||||
case "change":
|
||||
curValue = this.pipe(value, this, "set") //fix #673
|
||||
if (curValue !== this.oldValue) {
|
||||
|
|
50
js/yua.js
50
js/yua.js
|
@ -65,10 +65,21 @@ var W3C = window.dispatchEvent
|
|||
var root = DOC.documentElement
|
||||
var yuaFragment = DOC.createDocumentFragment()
|
||||
var cinerator = DOC.createElement("div")
|
||||
var class2type = {}
|
||||
"Boolean Number String Function Array Date RegExp Object Error".replace(rword, function (name) {
|
||||
class2type["[object " + name + "]"] = name.toLowerCase()
|
||||
})
|
||||
var class2type = {
|
||||
'[object Boolean]': 'boolean',
|
||||
'[object Number]': 'number',
|
||||
'[object String]': 'string',
|
||||
'[object Function]': 'function',
|
||||
'[object Array]': 'array',
|
||||
'[object Date]': 'date',
|
||||
'[object RegExp]': 'regexp',
|
||||
'[object Object]': 'object',
|
||||
'[object Error]': 'error',
|
||||
'[object AsyncFunction]': 'asyncfunction',
|
||||
'[object Promise]': 'promise',
|
||||
'[object Generator]': 'generator',
|
||||
'[object GeneratorFunction]': 'generatorfunction'
|
||||
}
|
||||
var bindingID = 1024
|
||||
var IEVersion = NaN
|
||||
if (window.VBArray) {
|
||||
|
@ -160,7 +171,6 @@ yua.isPlainObject = function (obj) {
|
|||
return serialize.call(obj) === "[object Object]" && Object.getPrototypeOf(obj) === oproto
|
||||
}
|
||||
|
||||
|
||||
var VMODELS = yua.vmodels = {} //所有vmodel都储存在这里
|
||||
yua.init = function (source) {
|
||||
if(yua.isPlainObject(source)){
|
||||
|
@ -531,6 +541,7 @@ yua.mix({
|
|||
}
|
||||
return result
|
||||
},
|
||||
deepCopy: toJson,
|
||||
eventHooks: {},
|
||||
/*绑定事件*/
|
||||
bind: function (el, type, fn, phase) {
|
||||
|
@ -1604,7 +1615,7 @@ function toJson(val) {
|
|||
for (i in val) {
|
||||
if (val.hasOwnProperty(i)) {
|
||||
var value = val[i]
|
||||
obj[i] = value && value.nodeType ? value : toJson(value)
|
||||
obj[i] = (value && value.nodeType) ? value : toJson(value)
|
||||
}
|
||||
}
|
||||
return obj
|
||||
|
@ -3088,10 +3099,6 @@ var rnoscanAttrBinding = /^if|widget|repeat$/
|
|||
var rnoscanNodeBinding = /^html|include$/
|
||||
|
||||
function scanNodeList(elem, vmodels) {
|
||||
if(isWidget(elem)){
|
||||
// elem = elem.content
|
||||
log(elem)
|
||||
}
|
||||
var nodes = yua.slice(elem.childNodes)
|
||||
scanNodeArray(nodes, vmodels)
|
||||
}
|
||||
|
@ -3160,6 +3167,7 @@ function scanTag(elem, vmodels, node) {
|
|||
|
||||
//把父级VM补上
|
||||
newVmodel.$up = vmodels[0]
|
||||
hideProperty(newVmodel, "$up", null)
|
||||
//:important不包含父VM,:controller相反
|
||||
vmodels = node === b ? [newVmodel] : [newVmodel].concat(vmodels)
|
||||
|
||||
|
@ -3360,11 +3368,12 @@ yua.component = function (name, opts) {
|
|||
componentDefinition.$id = $id
|
||||
|
||||
|
||||
|
||||
//==========构建VM=========
|
||||
var keepSlot = componentDefinition.$slot
|
||||
var keepReplace = componentDefinition.$replace
|
||||
var keepContainer = componentDefinition.$container
|
||||
var keepTemplate = componentDefinition.$template
|
||||
delete componentDefinition.$up
|
||||
delete componentDefinition.$ups
|
||||
delete componentDefinition.$slot
|
||||
delete componentDefinition.$replace
|
||||
delete componentDefinition.$container
|
||||
|
@ -3394,6 +3403,7 @@ yua.component = function (name, opts) {
|
|||
child = tmpDom
|
||||
tmpDom = null
|
||||
}
|
||||
|
||||
elem.parentNode.replaceChild(child, elem)
|
||||
|
||||
child.msResolved = 1
|
||||
|
@ -3409,8 +3419,7 @@ yua.component = function (name, opts) {
|
|||
if (keepContainer) {
|
||||
keepContainer.appendChild(elem)
|
||||
}
|
||||
yua.fireDom(elem, "datasetchanged",
|
||||
{vm: vmodel, childReady: 1})
|
||||
yua.fireDom(elem, "datasetchanged", {vm: vmodel, childReady: 1})
|
||||
var children = 0
|
||||
var removeFn = yua.bind(elem, "datasetchanged", function (e) {
|
||||
if (e.childReady) {
|
||||
|
@ -3703,8 +3712,8 @@ yua.directive("class", {
|
|||
},
|
||||
update: function (val) {
|
||||
var obj = val
|
||||
if(!obj)
|
||||
return log('class绑定错误')
|
||||
if(!obj || this.param)
|
||||
return log('class指令语法错误 %c %s="%s"', 'color:#f00', this.name, this.expr)
|
||||
|
||||
if(typeof obj === 'string'){
|
||||
obj = {}
|
||||
|
@ -3715,9 +3724,6 @@ yua.directive("class", {
|
|||
obj = obj.$model
|
||||
}
|
||||
|
||||
if(this.param)
|
||||
return log('不再支持:class-xx="yy"的写法', this.name)
|
||||
|
||||
var $elem = yua(this.element)
|
||||
for(var i in obj){
|
||||
$elem.toggleClass(i, !!obj[i])
|
||||
|
@ -3748,7 +3754,7 @@ yua.directive("css", {
|
|||
$elem.css(i, obj[i])
|
||||
}
|
||||
}catch(err){
|
||||
log('样式格式错误', val)
|
||||
log('样式格式错误 %c %s="%s"', 'color:#f00', this.name, this.expr)
|
||||
}
|
||||
}else{
|
||||
$elem.css(this.param, val)
|
||||
|
@ -3789,8 +3795,8 @@ yua.directive('rule', {
|
|||
init: function(binding){
|
||||
if(binding.param && !__rules[binding.param]){
|
||||
__rules[binding.param] = [];
|
||||
binding.target = __rules[binding.param]
|
||||
}
|
||||
binding.target = __rules[binding.param]
|
||||
},
|
||||
update: function(obj){
|
||||
var _this = this,
|
||||
|
@ -4075,6 +4081,8 @@ var duplexBinding = yua.directive("duplex", {
|
|||
}
|
||||
switch (this.xtype) {
|
||||
case "input":
|
||||
elem.value = value;
|
||||
break;
|
||||
case "change":
|
||||
curValue = this.pipe(value, this, "set") //fix #673
|
||||
if (curValue !== this.oldValue) {
|
||||
|
|
Reference in New Issue