完成layer组件;优化yua加载;添加codemirror组件;优化drag组件;
宇天
parent
0d12b351df
commit
b5d4ee1cc1
|
|
@ -10,13 +10,13 @@
|
|||
* 表示状态的应该用do-st-*命名
|
||||
* 表示功能的应该用do-fn-*命名
|
||||
* 表示页面模块的应该用do-mod-modname 命名
|
||||
* 表示应用的应该用do-uiname命名, 它的子元素应该全部包在 .do-uiname这个根类下
|
||||
* 表示UI组件的应该用do-uiname命名, 它的子元素应该全部包在 .do-uiname这个根类下
|
||||
* 如 .do-layer .body { ... }
|
||||
*
|
||||
* 样式规则的出现顺序
|
||||
* 1 display float position overflow z-index 表示定位/布局的属性
|
||||
* 2 width height margin padding border 表示盒子模型的属性
|
||||
* 3 line-heightcursor font-size vertical-align text-align user-select outline ....排版相关的属性
|
||||
* 3 line-height font-size vertical-align text-align user-select outline ....排版相关的属性
|
||||
* 4 color background opacity cursor ...表示装饰相关的属性
|
||||
* 5 content list-style quotes ... 内容生成相关的属性
|
||||
*
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -35,8 +35,8 @@ define(['yua'], function(){
|
|||
// 拖拽结束,且释放鼠标
|
||||
binding.dragged = getBindingCallback(binding.element, 'data-dragged', binding.vmodels)
|
||||
|
||||
//获取是否允许溢出可视区
|
||||
binding.overflow = !!binding.element.dataset.overflow
|
||||
//默认允许溢出可视区
|
||||
binding.overflow = true
|
||||
|
||||
//方向,x轴, y轴, xy轴
|
||||
binding.axis = 'xy'
|
||||
|
|
@ -49,15 +49,11 @@ define(['yua'], function(){
|
|||
binding.limit = false
|
||||
if(!!binding.element.dataset.limit) {
|
||||
binding.limit = binding.element.dataset.limit
|
||||
//这里,只要不为空,除parent外,其他值都默认为window, 故"可溢出"为false
|
||||
binding.overflow = false
|
||||
delete binding.element.dataset.limit
|
||||
}
|
||||
|
||||
// 如果不限制,则允许溢出
|
||||
if(binding.limit === false) {
|
||||
binding.overflow = true
|
||||
}
|
||||
|
||||
delete binding.element.dataset.overflow
|
||||
delete binding.element.dataset.beforedrag
|
||||
delete binding.element.dataset.dragging
|
||||
delete binding.element.dataset.dragged
|
||||
|
|
@ -68,7 +64,7 @@ define(['yua'], function(){
|
|||
$drag = yua(this.element),
|
||||
$doc = yua(document),
|
||||
$target = null,
|
||||
parent = null;
|
||||
parentElem = null;
|
||||
|
||||
// val值不为空时, 获取真正的拖动元素
|
||||
// 仅从父级上找
|
||||
|
|
@ -82,7 +78,7 @@ define(['yua'], function(){
|
|||
$target = yua(target);
|
||||
// 限制范围为parent时,获取父级元素
|
||||
if(this.limit === 'parent'){
|
||||
parent = target.parentNode
|
||||
parentElem = target.parentNode
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -129,16 +125,16 @@ define(['yua'], function(){
|
|||
var limit = [0, wh - th, 0, ww - tw]
|
||||
|
||||
if(_this.limit === 'parent') {
|
||||
var pgcs = getComputedStyle(parent),
|
||||
var pgcs = getComputedStyle(parentElem),
|
||||
pcst = pgcs.transform.replace(/matrix\((.*)\)/, '$1'),
|
||||
poffset = yua(parent).offset();
|
||||
poffset = yua(parentElem).offset();
|
||||
|
||||
pcst = pcst !== 'none' ? pcst.split(', ') : [1,0,0,1,0,0]
|
||||
|
||||
var pox = poffset.left - pcst[4] - bsl,
|
||||
poy = poffset.top - pcst[5] - bst;
|
||||
|
||||
limit = [poy, poy + parent.clientHeight - th, pox, pox + parent.clientWidth - tw]
|
||||
limit = [poy, poy + parentElem.clientHeight - th, pox, pox + parentElem.clientWidth - tw]
|
||||
}
|
||||
|
||||
var mvfn = $doc.bind('mousemove', function(ev){
|
||||
|
|
|
|||
|
|
@ -0,0 +1,578 @@
|
|||
/**
|
||||
*
|
||||
* @authors yutent (yutent@doui.cc)
|
||||
* @date 2016-09-21 01:36:29
|
||||
*
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
|
||||
define(['yua', 'lib/drag', 'css!./skin/def'], function(yua){
|
||||
|
||||
if(window.layer){
|
||||
return window.layer
|
||||
}
|
||||
var layerDom = {},
|
||||
layerObj = {},
|
||||
unique = null, //储存当前打开的1/2/3类型的弹窗
|
||||
lid = 0,
|
||||
defconf = {
|
||||
type: 1, // 弹窗类型
|
||||
skin: 'def', //默认主题
|
||||
icon: 1, //图标类型
|
||||
background: '#fff',
|
||||
shade: true, //遮罩
|
||||
shadeClose: false, //遮罩点击关闭弹窗
|
||||
radius: '0px', //弹窗圆角半径
|
||||
area: ['auto', 'auto'],
|
||||
title: '', //弹窗主标题(在工具栏上的)
|
||||
menubar: true, //是否显示菜单栏
|
||||
content: '', // 弹窗的内容
|
||||
fixed: false, //是否固定不可拖拽
|
||||
offset: null, //弹窗出来时的坐标, 为数组,可有4个值,依次是 上右下左
|
||||
btns: ['确定', '取消'], //弹窗的2个按钮的文字
|
||||
yes: close, //确定按钮对应的回调
|
||||
no: close, //取消按钮对应的回调
|
||||
success: null //弹窗初始化完成时的回调
|
||||
};
|
||||
|
||||
function uuid(){
|
||||
return 'layer-' + (++lid)
|
||||
}
|
||||
|
||||
|
||||
function close(id){
|
||||
if(typeof id !== 'string' && typeof id !== 'number'){
|
||||
return console.error(new Error('要关闭的layer实例不存在'))
|
||||
}
|
||||
if(/^\$wrap\-/.test(id) || layerObj['$wrap-' + id]){
|
||||
|
||||
try {
|
||||
id = (layerObj['$wrap-' + id] ? '$wrap-' : '') + id;
|
||||
//未显示过,忽略
|
||||
if(!layerObj[id].show){
|
||||
return
|
||||
}
|
||||
layerObj[id].parentElem.replaceChild(layerObj[id].wrap, layerDom[id][1])
|
||||
unique = null
|
||||
}catch(err){}
|
||||
}else{
|
||||
try {
|
||||
document.body.removeChild(layerDom[id][1])
|
||||
document.body.removeChild(layerDom[id][0])
|
||||
unique = null
|
||||
}catch(err){}
|
||||
|
||||
delete layerDom[id]
|
||||
delete yua.vmodels[id]
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function reapeat(str, num){
|
||||
var idx = 0,
|
||||
result = ''
|
||||
while(idx < num){
|
||||
result += str
|
||||
idx++
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
function fixOffset(val){
|
||||
if(!val && val !== 0){
|
||||
return 'auto'
|
||||
}else{
|
||||
return val
|
||||
}
|
||||
}
|
||||
|
||||
var __constructor = function(conf){
|
||||
if(conf){
|
||||
this.ready(conf).append().show()
|
||||
}
|
||||
},
|
||||
__layer = {
|
||||
alert: function(msg, conf){
|
||||
if(typeof conf === 'function'){
|
||||
conf = {yes: conf}
|
||||
}else if(typeof conf === 'object'){
|
||||
conf = conf
|
||||
}else{
|
||||
conf = {}
|
||||
}
|
||||
conf.icon = 6
|
||||
conf.content = msg
|
||||
return __layer.open(conf)
|
||||
},
|
||||
confirm: function(msg, conf){
|
||||
if(typeof conf === 'function'){
|
||||
conf = {yes: conf}
|
||||
}else if(typeof conf === 'object'){
|
||||
conf = conf
|
||||
}else{
|
||||
conf = {}
|
||||
}
|
||||
conf.type = 2
|
||||
conf.icon = 8
|
||||
conf.content = msg
|
||||
return __layer.open(conf)
|
||||
},
|
||||
msg: function(msg, conf){
|
||||
if(typeof conf !== 'object'){
|
||||
var tmp = conf
|
||||
conf = {timeout: 2500}
|
||||
if(typeof tmp === 'number'){
|
||||
conf.icon = tmp
|
||||
}
|
||||
}
|
||||
|
||||
if(!conf.hasOwnProperty('timeout')){
|
||||
conf.timeout = 2500
|
||||
}
|
||||
|
||||
conf.specialMode = true;//特殊模式
|
||||
conf.content = '<p class="msg-box">' + msg + '</p>'
|
||||
conf.type = 7
|
||||
conf.fixed = true
|
||||
conf.shade = false
|
||||
conf.menubar = false
|
||||
conf.radius = '5px'
|
||||
return __layer.open(conf)
|
||||
},
|
||||
loading: function(style, time, cb){
|
||||
style = style >>> 0
|
||||
|
||||
if(typeof time === 'function'){
|
||||
cb = time;
|
||||
time = 0
|
||||
} else{
|
||||
time = time >>> 0
|
||||
if(typeof cb !== 'function'){
|
||||
cb = yua.noop
|
||||
}
|
||||
}
|
||||
return __layer.open({type: 6, load: style, yes: cb, timeout: time, menubar: false, background: 'none', fixed: true})
|
||||
},
|
||||
tips: function(msg, elem, conf){
|
||||
if(!(elem instanceof HTMLElement)){
|
||||
return console.error(new Error('tips类型必须指定一个目标容器'))
|
||||
}
|
||||
if(typeof conf !== 'object'){
|
||||
var tmp = conf
|
||||
conf = {timeout: 2500}
|
||||
if(typeof tmp === 'number'){
|
||||
conf.icon = tmp
|
||||
}
|
||||
}
|
||||
if(!conf.hasOwnProperty('timeout')){
|
||||
conf.timeout = 2500
|
||||
}
|
||||
if(!conf.background){
|
||||
conf.background = 'rgba(0,0,0,.5)'
|
||||
}
|
||||
if(!conf.color){
|
||||
conf.color = '#fff'
|
||||
}
|
||||
conf.$elem = elem
|
||||
conf.content = msg
|
||||
conf.type = 5;
|
||||
conf.icon = 0;
|
||||
conf.fixed = true;
|
||||
conf.shade = false;
|
||||
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')
|
||||
}
|
||||
var conf = {
|
||||
type: 3,
|
||||
icon: 7,
|
||||
prompt: '',
|
||||
title: msg,
|
||||
content: '<input class="prompt-value" :duplex="prompt" />',
|
||||
yes: function(id){
|
||||
callback(id, yua.vmodels[id].prompt)
|
||||
}
|
||||
}
|
||||
return __layer.open(conf)
|
||||
},
|
||||
use: function(skin, callback){
|
||||
require(['css!./skin/' + skin], callback)
|
||||
},
|
||||
close: close,
|
||||
open: function(conf){
|
||||
if(typeof conf === 'string'){
|
||||
conf = '$wrap-' + conf
|
||||
if(!layerObj[conf]){
|
||||
throw new Error('layer实例不存在')
|
||||
}else{
|
||||
//只能显示一个实例
|
||||
if(layerObj[conf].show){
|
||||
return
|
||||
}
|
||||
layerObj[conf].show = true
|
||||
|
||||
if(!yua.vmodels[conf]){
|
||||
yua.define(layerObj[conf].obj.init)
|
||||
}
|
||||
|
||||
yua.scan(layerDom[conf][1])
|
||||
layerObj[conf].obj.show()
|
||||
|
||||
layerObj[conf].parentElem.appendChild(layerDom[conf][1])
|
||||
layerObj[conf].parentElem.replaceChild(layerDom[conf][1], layerObj[conf].wrap)
|
||||
}
|
||||
}else{
|
||||
return new __constructor(conf).init.$id
|
||||
}
|
||||
},
|
||||
version: '0.0.1-base'
|
||||
};
|
||||
|
||||
/*type: { // 弹窗类型对应的id值
|
||||
1: 'alert',
|
||||
2: 'confirm',
|
||||
3: 'prompt',
|
||||
4: 'iframe',
|
||||
5: 'tips',
|
||||
6: 'loading',
|
||||
7: 'msg',
|
||||
}*/
|
||||
__constructor.prototype = {
|
||||
dot: { //loading的子元素数量
|
||||
0: 4,
|
||||
1: 9,
|
||||
2: 2,
|
||||
3: 3,
|
||||
4: 2,
|
||||
5: 5,
|
||||
6: 5,
|
||||
7: 5
|
||||
},
|
||||
timeout: null,
|
||||
create: function(){
|
||||
var layBox = document.createElement('div'),
|
||||
coverBox = document.createElement('div');
|
||||
|
||||
coverBox.className = 'do-layer-cover type-' + this.init.type
|
||||
// 允许点击遮罩关闭弹层时, 添加控制器
|
||||
if(this.init.shadeClose){
|
||||
coverBox.setAttribute(':controller', this.cInit.$id)
|
||||
coverBox.setAttribute(':click', 'close(\'' + this.init.$id + '\')')
|
||||
}
|
||||
|
||||
layBox.className = 'do-layer skin-'
|
||||
+ this.init.skin
|
||||
+ (this.init.type === 5 && ' active' || '')
|
||||
+ ' type-'
|
||||
+ ((!this.init.specialMode && this.init.type === 7) ? 'unspecial' : this.init.type);
|
||||
|
||||
//暂时隐藏,避免修正定位时,能看到闪一下
|
||||
layBox.style.visibility = 'hidden'
|
||||
layBox.style.borderRadius = this.init.radius
|
||||
|
||||
layBox.setAttribute(':controller', this.init.$id)
|
||||
|
||||
//没有菜单栏, 且未禁止拖拽,则加上可拖拽属性
|
||||
if(!this.init.menubar && !this.init.fixed){
|
||||
layBox.setAttribute(':drag', '')
|
||||
layBox.setAttribute('data-limit', 'window')
|
||||
}
|
||||
|
||||
//弹窗的宽高
|
||||
var boxcss = ''
|
||||
if(this.init.area[0] !== 'auto'){
|
||||
boxcss += 'width: ' + this.init.area[0] + ';'
|
||||
}
|
||||
if(this.init.area[1] !== 'auto'){
|
||||
boxcss += 'height: ' + this.init.area[1] + ';'
|
||||
}
|
||||
|
||||
layBox.innerHTML = this.getMenubar()
|
||||
+ '<div class="layer-content do-fn-cl '
|
||||
+ (this.init.icon === 0 && 'none-icon' || '')
|
||||
+ '" style="'
|
||||
+ boxcss
|
||||
+ '">'
|
||||
+ this.getCont()
|
||||
+ '</div>'
|
||||
+ this.getBtns()
|
||||
+ (this.init.type === 5 && '<i class="arrow" style="border-top-color: '
|
||||
+ this.init.background
|
||||
+ '"></i>' || '')
|
||||
|
||||
return [this.init.shade ? coverBox : null, layBox]
|
||||
},
|
||||
getCont: function(){
|
||||
if(this.init.type === 6){
|
||||
return this.getLoading(this.init.load)
|
||||
}else{
|
||||
return this.getIcon()
|
||||
+ '<div class="detail" :html="content"></div>'
|
||||
}
|
||||
},
|
||||
getLoading: function(style){
|
||||
return '<div class="do-ui-load load-style-'
|
||||
+ style
|
||||
+ '">'
|
||||
+ '<span class="dot-box">'
|
||||
+ reapeat('<i></i>', this.dot[style])
|
||||
+ '</span>'
|
||||
+ '</div>'
|
||||
},
|
||||
//获取窗口导航条
|
||||
getMenubar: function(){
|
||||
var html = ''
|
||||
if(this.init.menubar){
|
||||
html += '<div class="layer-title do-fn-noselect" ';
|
||||
//可拖拽
|
||||
if(!this.init.fixed){
|
||||
html += ':drag="do-layer" data-limit="window" '
|
||||
}
|
||||
|
||||
html += '>{{title}}'
|
||||
+ '<a class="action-close deficon" :click="no(\'' + this.init.$id + '\')"></a>'
|
||||
+ '</div>'
|
||||
}
|
||||
return html
|
||||
},
|
||||
//获取窗口内容的图标
|
||||
getIcon: function(){
|
||||
if(this.init.icon === 0){
|
||||
return ''
|
||||
}
|
||||
if(this.init.type < 4 || this.init.type === 5 || this.init.specialMode){
|
||||
return '<span class="deficon icon-' + this.init.icon + '"></span>'
|
||||
}
|
||||
return ''
|
||||
},
|
||||
// 获取窗口按钮
|
||||
getBtns: function(){
|
||||
if(this.init.type > 3){
|
||||
return ''
|
||||
}else{
|
||||
var html = '<div class="layer-btns do-fn-noselect">';
|
||||
if(this.init.type > 1){
|
||||
html += '<a href="javascript:;" class="action-no" '
|
||||
+ ':click="no(\'' + this.init.$id + '\')" '
|
||||
+ ':text="btns[1]"></a>'
|
||||
+ '<a href="javascript:;" class="action-yes" '
|
||||
+ ':click="yes(\'' + this.init.$id + '\')" '
|
||||
+ ':text="btns[0]"></a>'
|
||||
}else{
|
||||
html += '<a href="javascript:;" class="action-yes" '
|
||||
+ ':click="yes(\'' + this.init.$id + '\')" '
|
||||
+ ':text="btns[0]"></a>'
|
||||
}
|
||||
html += '</div>'
|
||||
|
||||
return html
|
||||
}
|
||||
},
|
||||
append: function(){
|
||||
//如果有已经打开的弹窗,则关闭
|
||||
if(unique){
|
||||
__layer.close(unique)
|
||||
}
|
||||
if(this.init.type < 4){
|
||||
unique = this.init.$id
|
||||
}
|
||||
layerDom[this.init.$id] = this.create()
|
||||
if(layerDom[this.init.$id][0]){
|
||||
document.body.appendChild(layerDom[this.init.$id][0])
|
||||
//仅在允许点击遮罩时,初始化控制器,减少资源消耗
|
||||
if(this.init.shadeClose){
|
||||
yua.define(this.cInit)
|
||||
yua.scan(layerDom[this.init.$id][0])
|
||||
}
|
||||
}
|
||||
|
||||
document.body.appendChild(layerDom[this.init.$id][1])
|
||||
yua.define(this.init)
|
||||
yua.scan(layerDom[this.init.$id][1])
|
||||
return this
|
||||
},
|
||||
show: function(){
|
||||
var _this = this;
|
||||
|
||||
setTimeout(function(){
|
||||
var style = {visibility: '', background: _this.init.background},
|
||||
css = getComputedStyle(layerDom[_this.init.$id][1]);
|
||||
|
||||
if(_this.init.type === 5){
|
||||
style.color = _this.init.color
|
||||
|
||||
var $elem = yua(_this.init.$elem),
|
||||
ew = $elem.innerWidth(),
|
||||
ol = $elem.offset().left - document.body.scrollLeft,
|
||||
ot = $elem.offset().top - document.body.scrollTop;
|
||||
|
||||
style.left = ol + (ew * 0.7)
|
||||
style.top = ot - parseInt(css.height) - 8
|
||||
|
||||
}else{
|
||||
if(_this.init.offset){
|
||||
style.top = fixOffset(_this.init.offset[0])
|
||||
style.right = fixOffset(_this.init.offset[1])
|
||||
style.bottom = fixOffset(_this.init.offset[2])
|
||||
style.left = fixOffset(_this.init.offset[3])
|
||||
}else{
|
||||
style = yua.mix(style, {
|
||||
marginLeft: -parseInt(css.width) / 2,
|
||||
marginTop: -parseInt(css.height) / 2,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
yua(layerDom[_this.init.$id][1]).css(style)
|
||||
|
||||
}, 4)
|
||||
|
||||
|
||||
if(this.init.success && typeof this.init.success === 'function'){
|
||||
//弹窗成功的回调
|
||||
this.init.success(this.init.$id)
|
||||
}
|
||||
// loading类型,回调需要自动触发
|
||||
if(this.init.type > 3) {
|
||||
//大于0自动触发超时关闭
|
||||
if(this.init.timeout > 0){
|
||||
clearTimeout(this.timeout)
|
||||
this.timeout = setTimeout(function(){
|
||||
|
||||
clearTimeout(_this.timeout)
|
||||
__layer.close(_this.init.$id)
|
||||
|
||||
// 为loading类型时,自动关闭同时触发回调
|
||||
if(_this.init.type === 6){
|
||||
_this.init.yes(_this.init.$id)
|
||||
}
|
||||
|
||||
}, this.init.timeout)
|
||||
|
||||
} else if(this.init.type === 6) {
|
||||
// loading类型, 非自动关闭时, 主动触发回调
|
||||
this.init.yes(this.init.$id)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
ready: function(conf){
|
||||
this.init = yua.mix({}, defconf, conf)
|
||||
if(!this.init.$id){
|
||||
this.init.$id = uuid();
|
||||
}
|
||||
if(this.init.icon > 17){
|
||||
this.icon.icon = 17
|
||||
}
|
||||
//base版没有iframe类型
|
||||
if(this.init.type === 4){
|
||||
this.icon.type = 7
|
||||
}
|
||||
this.cInit = {
|
||||
$id: this.init.$id + '-c',
|
||||
close: this.init.shadeClose ? close : yua.noop
|
||||
};
|
||||
return this
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
yua.directive('layer', {
|
||||
priority: 1400,
|
||||
init: function(binding){
|
||||
if(!binding.param){
|
||||
binding.element.style.display = 'none'
|
||||
}
|
||||
},
|
||||
update: function(val){
|
||||
if(!val){
|
||||
return console.error(new Error(':layer指令格式不正确或无效属性. [' + this.name + '="' + this.expr) + '"]')
|
||||
}
|
||||
|
||||
var _this = this,
|
||||
init = Object.assign({}, this.element.dataset);
|
||||
|
||||
if(!this.param){
|
||||
init.type = 7;
|
||||
init.$id = '$wrap-' + val;
|
||||
if(!init.hasOwnProperty('menubar')){
|
||||
init.menubar = false;
|
||||
}
|
||||
|
||||
var tmp = new __constructor().ready(init);
|
||||
|
||||
tmp.init.content = this.element.cloneNode(true);
|
||||
|
||||
layerObj[tmp.init.$id] = {obj: tmp, parentElem: this.element.parentNode, wrap: this.element, show: false};
|
||||
layerDom[tmp.init.$id] = tmp.create();
|
||||
}else if(this.param === 'tips'){
|
||||
var $elem = yua(this.element),
|
||||
ew = $elem.innerWidth(),
|
||||
ol = $elem.offset().left - document.body.scrollLeft,
|
||||
ot = $elem.offset().top - document.body.scrollTop,
|
||||
tipsBox = document.createElement('div'),
|
||||
tipsArrow = document.createElement('i'),
|
||||
tipsCont = document.createElement('div');
|
||||
|
||||
|
||||
tipsBox.className = 'do-layer skin-def type-5'
|
||||
tipsBox.style.left = ol + (ew * 0.7) + 'px'
|
||||
if(init.background){
|
||||
tipsBox.style.background = init.background
|
||||
tipsArrow.style.borderTopColor = init.background
|
||||
}
|
||||
if(init.color){
|
||||
tipsBox.style.color = init.color
|
||||
}
|
||||
tipsCont.className = 'layer-content'
|
||||
tipsCont.textContent = val
|
||||
tipsArrow.className = 'arrow'
|
||||
tipsBox.appendChild(tipsCont)
|
||||
tipsBox.appendChild(tipsArrow)
|
||||
|
||||
|
||||
|
||||
yua(document).bind('scroll', function(){
|
||||
ol = $elem.offset().left - document.body.scrollLeft;
|
||||
ot = $elem.offset().top - document.body.scrollTop;
|
||||
|
||||
tipsBox.style.left = ol + (ew * 0.7) + 'px'
|
||||
tipsBox.style.top = (ot - tipsBox.offsetHeight - 8) + 'px'
|
||||
})
|
||||
|
||||
$elem.bind('mouseenter', function(ev){
|
||||
_this.element.parentNode.appendChild(tipsBox)
|
||||
clearTimeout(_this.showTime)
|
||||
clearTimeout(_this.hideTime)
|
||||
_this.showTime = setTimeout(function(){
|
||||
tipsBox.style.top = (ot - tipsBox.offsetHeight - 8) + 'px'
|
||||
tipsBox.classList.add('active')
|
||||
|
||||
}, 4)
|
||||
|
||||
})
|
||||
$elem.bind('mouseleave', function(){
|
||||
_this.hideTime = setTimeout(function(){
|
||||
clearTimeout(_this.hideTime)
|
||||
try{
|
||||
_this.element.parentNode.removeChild(tipsBox)
|
||||
}catch(err){}
|
||||
}, 150)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
window.layer = __layer
|
||||
|
||||
return __layer
|
||||
|
||||
})
|
||||
|
|
@ -0,0 +1,578 @@
|
|||
/**
|
||||
*
|
||||
* @authors yutent (yutent@doui.cc)
|
||||
* @date 2016-09-21 01:36:29
|
||||
*
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
|
||||
define(['yua', 'lib/drag', 'css!./skin/def'], function(yua){
|
||||
|
||||
|
||||
var layerDom = {},
|
||||
layerObj = {},
|
||||
unique = null, //储存当前打开的1/2/3类型的弹窗
|
||||
lid = 0,
|
||||
defconf = {
|
||||
type: 1, // 弹窗类型
|
||||
skin: 'def', //默认主题
|
||||
icon: 1, //图标类型
|
||||
background: '#fff',
|
||||
shade: true, //遮罩
|
||||
shadeClose: false, //遮罩点击关闭弹窗
|
||||
radius: '0px', //弹窗圆角半径
|
||||
area: ['auto', 'auto'],
|
||||
title: '', //弹窗主标题(在工具栏上的)
|
||||
menubar: true, //是否显示菜单栏
|
||||
content: '', // 弹窗的内容
|
||||
fixed: false, //是否固定不可拖拽
|
||||
offset: null, //弹窗出来时的坐标, 为数组,可有4个值,依次是 上右下左
|
||||
btns: ['确定', '取消'], //弹窗的2个按钮的文字
|
||||
yes: close, //确定按钮对应的回调
|
||||
no: close, //取消按钮对应的回调
|
||||
success: null //弹窗初始化完成时的回调
|
||||
};
|
||||
|
||||
function uuid(){
|
||||
return 'layer-' + (++lid)
|
||||
}
|
||||
|
||||
|
||||
function close(id){
|
||||
if(typeof id !== 'string' && typeof id !== 'number'){
|
||||
return console.error(new Error('要关闭的layer实例不存在'))
|
||||
}
|
||||
if(/^\$wrap\-/.test(id) || layerObj['$wrap-' + id]){
|
||||
|
||||
try {
|
||||
id = (layerObj['$wrap-' + id] ? '$wrap-' : '') + id;
|
||||
//未显示过,忽略
|
||||
if(!layerObj[id].show){
|
||||
return
|
||||
}
|
||||
layerObj[id].parentElem.replaceChild(layerObj[id].wrap, layerDom[id][1])
|
||||
unique = null
|
||||
}catch(err){}
|
||||
}else{
|
||||
try {
|
||||
document.body.removeChild(layerDom[id][1])
|
||||
document.body.removeChild(layerDom[id][0])
|
||||
unique = null
|
||||
}catch(err){}
|
||||
|
||||
delete layerDom[id]
|
||||
delete yua.vmodels[id]
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function reapeat(str, num){
|
||||
var idx = 0,
|
||||
result = ''
|
||||
while(idx < num){
|
||||
result += str
|
||||
idx++
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
function fixOffset(val){
|
||||
if(!val && val !== 0){
|
||||
return 'auto'
|
||||
}else{
|
||||
return val
|
||||
}
|
||||
}
|
||||
|
||||
var __constructor = function(conf){
|
||||
if(conf){
|
||||
this.ready(conf).append().show()
|
||||
}
|
||||
},
|
||||
__layer = {
|
||||
alert: function(msg, conf){
|
||||
if(typeof conf === 'function'){
|
||||
conf = {yes: conf}
|
||||
}else if(typeof conf === 'object'){
|
||||
conf = conf
|
||||
}else{
|
||||
conf = {}
|
||||
}
|
||||
conf.icon = 6
|
||||
conf.content = msg
|
||||
return __layer.open(conf)
|
||||
},
|
||||
confirm: function(msg, conf){
|
||||
if(typeof conf === 'function'){
|
||||
conf = {yes: conf}
|
||||
}else if(typeof conf === 'object'){
|
||||
conf = conf
|
||||
}else{
|
||||
conf = {}
|
||||
}
|
||||
conf.type = 2
|
||||
conf.icon = 8
|
||||
conf.content = msg
|
||||
return __layer.open(conf)
|
||||
},
|
||||
msg: function(msg, conf){
|
||||
if(typeof conf !== 'object'){
|
||||
var tmp = conf
|
||||
conf = {timeout: 2500}
|
||||
if(typeof tmp === 'number'){
|
||||
conf.icon = tmp
|
||||
}
|
||||
}
|
||||
|
||||
if(!conf.hasOwnProperty('timeout')){
|
||||
conf.timeout = 2500
|
||||
}
|
||||
|
||||
conf.specialMode = true;//特殊模式
|
||||
conf.content = '<p class="msg-box">' + msg + '</p>'
|
||||
conf.type = 7
|
||||
conf.fixed = true
|
||||
conf.shade = false
|
||||
conf.menubar = false
|
||||
conf.radius = '5px'
|
||||
return __layer.open(conf)
|
||||
},
|
||||
loading: function(style, time, cb){
|
||||
style = style >>> 0
|
||||
|
||||
if(typeof time === 'function'){
|
||||
cb = time;
|
||||
time = 0
|
||||
} else{
|
||||
time = time >>> 0
|
||||
if(typeof cb !== 'function'){
|
||||
cb = yua.noop
|
||||
}
|
||||
}
|
||||
return __layer.open({type: 6, load: style, yes: cb, timeout: time, menubar: false, background: 'none', fixed: true})
|
||||
},
|
||||
tips: function(msg, elem, conf){
|
||||
if(!(elem instanceof HTMLElement)){
|
||||
return console.error(new Error('tips类型必须指定一个目标容器'))
|
||||
}
|
||||
if(typeof conf !== 'object'){
|
||||
var tmp = conf
|
||||
conf = {timeout: 2500}
|
||||
if(typeof tmp === 'number'){
|
||||
conf.icon = tmp
|
||||
}
|
||||
}
|
||||
if(!conf.hasOwnProperty('timeout')){
|
||||
conf.timeout = 2500
|
||||
}
|
||||
if(!conf.background){
|
||||
conf.background = 'rgba(0,0,0,.5)'
|
||||
}
|
||||
if(!conf.color){
|
||||
conf.color = '#fff'
|
||||
}
|
||||
conf.$elem = elem
|
||||
conf.content = msg
|
||||
conf.type = 5;
|
||||
conf.icon = 0;
|
||||
conf.fixed = true;
|
||||
conf.shade = false;
|
||||
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')
|
||||
}
|
||||
var conf = {
|
||||
type: 3,
|
||||
icon: 7,
|
||||
prompt: '',
|
||||
title: msg,
|
||||
content: '<input class="prompt-value" :duplex="prompt" />',
|
||||
yes: function(id){
|
||||
callback(id, yua.vmodels[id].prompt)
|
||||
}
|
||||
}
|
||||
return __layer.open(conf)
|
||||
},
|
||||
use: function(skin, callback){
|
||||
require(['css!./skin/' + skin], callback)
|
||||
},
|
||||
close: close,
|
||||
open: function(conf){
|
||||
if(typeof conf === 'string'){
|
||||
conf = '$wrap-' + conf
|
||||
if(!layerObj[conf]){
|
||||
throw new Error('layer实例不存在')
|
||||
}else{
|
||||
//只能显示一个实例
|
||||
if(layerObj[conf].show){
|
||||
return
|
||||
}
|
||||
layerObj[conf].show = true
|
||||
|
||||
if(!yua.vmodels[conf]){
|
||||
yua.define(layerObj[conf].obj.init)
|
||||
}
|
||||
|
||||
yua.scan(layerDom[conf][1])
|
||||
layerObj[conf].obj.show()
|
||||
|
||||
layerObj[conf].parentElem.appendChild(layerDom[conf][1])
|
||||
layerObj[conf].parentElem.replaceChild(layerDom[conf][1], layerObj[conf].wrap)
|
||||
}
|
||||
}else{
|
||||
return new __constructor(conf).init.$id
|
||||
}
|
||||
},
|
||||
version: '0.0.1-base'
|
||||
};
|
||||
|
||||
/*type: { // 弹窗类型对应的id值
|
||||
1: 'alert',
|
||||
2: 'confirm',
|
||||
3: 'prompt',
|
||||
4: 'iframe',
|
||||
5: 'tips',
|
||||
6: 'loading',
|
||||
7: 'msg',
|
||||
}*/
|
||||
__constructor.prototype = {
|
||||
dot: { //loading的子元素数量
|
||||
0: 4,
|
||||
1: 9,
|
||||
2: 2,
|
||||
3: 3,
|
||||
4: 2,
|
||||
5: 5,
|
||||
6: 5,
|
||||
7: 5
|
||||
},
|
||||
timeout: null,
|
||||
create: function(){
|
||||
var layBox = document.createElement('div'),
|
||||
coverBox = document.createElement('div');
|
||||
|
||||
coverBox.className = 'do-layer-cover type-' + this.init.type
|
||||
// 允许点击遮罩关闭弹层时, 添加控制器
|
||||
if(this.init.shadeClose){
|
||||
coverBox.setAttribute(':controller', this.cInit.$id)
|
||||
coverBox.setAttribute(':click', 'close(\'' + this.init.$id + '\')')
|
||||
}
|
||||
|
||||
layBox.className = 'do-layer skin-'
|
||||
+ this.init.skin
|
||||
+ (this.init.type === 5 && ' active' || '')
|
||||
+ ' type-'
|
||||
+ ((!this.init.specialMode && this.init.type === 7) ? 'unspecial' : this.init.type);
|
||||
|
||||
//暂时隐藏,避免修正定位时,能看到闪一下
|
||||
layBox.style.visibility = 'hidden'
|
||||
layBox.style.borderRadius = this.init.radius
|
||||
|
||||
layBox.setAttribute(':controller', this.init.$id)
|
||||
|
||||
//没有菜单栏, 且未禁止拖拽,则加上可拖拽属性
|
||||
if(!this.init.menubar && !this.init.fixed){
|
||||
layBox.setAttribute(':drag', '')
|
||||
layBox.setAttribute('data-limit', 'window')
|
||||
}
|
||||
|
||||
//弹窗的宽高
|
||||
var boxcss = ''
|
||||
if(this.init.area[0] !== 'auto'){
|
||||
boxcss += 'width: ' + this.init.area[0] + ';'
|
||||
}
|
||||
if(this.init.area[1] !== 'auto'){
|
||||
boxcss += 'height: ' + this.init.area[1] + ';'
|
||||
}
|
||||
|
||||
layBox.innerHTML = this.getMenubar()
|
||||
+ '<div class="layer-content do-fn-cl '
|
||||
+ (this.init.icon === 0 && 'none-icon' || '')
|
||||
+ '" style="'
|
||||
+ boxcss
|
||||
+ '">'
|
||||
+ this.getCont()
|
||||
+ '</div>'
|
||||
+ this.getBtns()
|
||||
+ (this.init.type === 5 && '<i class="arrow" style="border-top-color: '
|
||||
+ this.init.background
|
||||
+ '"></i>' || '')
|
||||
|
||||
return [this.init.shade ? coverBox : null, layBox]
|
||||
},
|
||||
getCont: function(){
|
||||
if(this.init.type === 6){
|
||||
return this.getLoading(this.init.load)
|
||||
}else{
|
||||
return this.getIcon()
|
||||
+ '<div class="detail" :html="content"></div>'
|
||||
}
|
||||
},
|
||||
getLoading: function(style){
|
||||
return '<div class="do-ui-load load-style-'
|
||||
+ style
|
||||
+ '">'
|
||||
+ '<span class="dot-box">'
|
||||
+ reapeat('<i></i>', this.dot[style])
|
||||
+ '</span>'
|
||||
+ '</div>'
|
||||
},
|
||||
//获取窗口导航条
|
||||
getMenubar: function(){
|
||||
var html = ''
|
||||
if(this.init.menubar){
|
||||
html += '<div class="layer-title do-fn-noselect" ';
|
||||
//可拖拽
|
||||
if(!this.init.fixed){
|
||||
html += ':drag="do-layer" data-limit="window" '
|
||||
}
|
||||
|
||||
html += '>{{title}}'
|
||||
+ '<a class="action-close deficon" :click="no(\'' + this.init.$id + '\')"></a>'
|
||||
+ '</div>'
|
||||
}
|
||||
return html
|
||||
},
|
||||
//获取窗口内容的图标
|
||||
getIcon: function(){
|
||||
if(this.init.icon === 0){
|
||||
return ''
|
||||
}
|
||||
if(this.init.type < 4 || this.init.type === 5 || this.init.specialMode){
|
||||
return '<span class="deficon icon-' + this.init.icon + '"></span>'
|
||||
}
|
||||
return ''
|
||||
},
|
||||
// 获取窗口按钮
|
||||
getBtns: function(){
|
||||
if(this.init.type > 3){
|
||||
return ''
|
||||
}else{
|
||||
var html = '<div class="layer-btns do-fn-noselect">';
|
||||
if(this.init.type > 1){
|
||||
html += '<a href="javascript:;" class="action-no" '
|
||||
+ ':click="no(\'' + this.init.$id + '\')" '
|
||||
+ ':text="btns[1]"></a>'
|
||||
+ '<a href="javascript:;" class="action-yes" '
|
||||
+ ':click="yes(\'' + this.init.$id + '\')" '
|
||||
+ ':text="btns[0]"></a>'
|
||||
}else{
|
||||
html += '<a href="javascript:;" class="action-yes" '
|
||||
+ ':click="yes(\'' + this.init.$id + '\')" '
|
||||
+ ':text="btns[0]"></a>'
|
||||
}
|
||||
html += '</div>'
|
||||
|
||||
return html
|
||||
}
|
||||
},
|
||||
append: function(){
|
||||
//如果有已经打开的弹窗,则关闭
|
||||
if(unique){
|
||||
__layer.close(unique)
|
||||
}
|
||||
if(this.init.type < 4){
|
||||
unique = this.init.$id
|
||||
}
|
||||
layerDom[this.init.$id] = this.create()
|
||||
if(layerDom[this.init.$id][0]){
|
||||
document.body.appendChild(layerDom[this.init.$id][0])
|
||||
//仅在允许点击遮罩时,初始化控制器,减少资源消耗
|
||||
if(this.init.shadeClose){
|
||||
yua.define(this.cInit)
|
||||
yua.scan(layerDom[this.init.$id][0])
|
||||
}
|
||||
}
|
||||
|
||||
document.body.appendChild(layerDom[this.init.$id][1])
|
||||
yua.define(this.init)
|
||||
yua.scan(layerDom[this.init.$id][1])
|
||||
return this
|
||||
},
|
||||
show: function(){
|
||||
var _this = this;
|
||||
|
||||
setTimeout(function(){
|
||||
var style = {visibility: '', background: _this.init.background},
|
||||
css = getComputedStyle(layerDom[_this.init.$id][1]);
|
||||
|
||||
if(_this.init.type === 5){
|
||||
style.color = _this.init.color
|
||||
|
||||
var $elem = yua(_this.init.$elem),
|
||||
ew = $elem.innerWidth(),
|
||||
ol = $elem.offset().left - document.body.scrollLeft,
|
||||
ot = $elem.offset().top - document.body.scrollTop;
|
||||
|
||||
style.left = ol + (ew * 0.7)
|
||||
style.top = ot - parseInt(css.height) - 8
|
||||
|
||||
}else{
|
||||
if(_this.init.offset){
|
||||
style.top = fixOffset(_this.init.offset[0])
|
||||
style.right = fixOffset(_this.init.offset[1])
|
||||
style.bottom = fixOffset(_this.init.offset[2])
|
||||
style.left = fixOffset(_this.init.offset[3])
|
||||
}else{
|
||||
style = yua.mix(style, {
|
||||
marginLeft: -parseInt(css.width) / 2,
|
||||
marginTop: -parseInt(css.height) / 2,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
yua(layerDom[_this.init.$id][1]).css(style)
|
||||
|
||||
}, 4)
|
||||
|
||||
|
||||
if(this.init.success && typeof this.init.success === 'function'){
|
||||
//弹窗成功的回调
|
||||
this.init.success(this.init.$id)
|
||||
}
|
||||
// loading类型,回调需要自动触发
|
||||
if(this.init.type > 3) {
|
||||
//大于0自动触发超时关闭
|
||||
if(this.init.timeout > 0){
|
||||
clearTimeout(this.timeout)
|
||||
this.timeout = setTimeout(function(){
|
||||
|
||||
clearTimeout(_this.timeout)
|
||||
__layer.close(_this.init.$id)
|
||||
|
||||
// 为loading类型时,自动关闭同时触发回调
|
||||
if(_this.init.type === 6){
|
||||
_this.init.yes(_this.init.$id)
|
||||
}
|
||||
|
||||
}, this.init.timeout)
|
||||
|
||||
} else if(this.init.type === 6) {
|
||||
// loading类型, 非自动关闭时, 主动触发回调
|
||||
this.init.yes(this.init.$id)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
ready: function(conf){
|
||||
this.init = yua.mix({}, defconf, conf)
|
||||
if(!this.init.$id){
|
||||
this.init.$id = uuid();
|
||||
}
|
||||
if(this.init.icon > 17){
|
||||
this.icon.icon = 17
|
||||
}
|
||||
//base版没有iframe类型
|
||||
if(this.init.type === 4){
|
||||
this.icon.type = 7
|
||||
}
|
||||
this.cInit = {
|
||||
$id: this.init.$id + '-c',
|
||||
close: this.init.shadeClose ? close : yua.noop
|
||||
};
|
||||
return this
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
yua.directive('layer', {
|
||||
priority: 1400,
|
||||
init: function(binding){
|
||||
if(!binding.param){
|
||||
binding.element.style.display = 'none'
|
||||
}
|
||||
},
|
||||
update: function(val){
|
||||
if(!val){
|
||||
return console.error(new Error(':layer指令格式不正确或无效属性. [' + this.name + '="' + this.expr) + '"]')
|
||||
}
|
||||
|
||||
var _this = this,
|
||||
init = Object.assign({}, this.element.dataset);
|
||||
|
||||
if(!this.param){
|
||||
init.type = 7;
|
||||
init.$id = '$wrap-' + val;
|
||||
if(!init.hasOwnProperty('menubar')){
|
||||
init.menubar = false;
|
||||
}
|
||||
|
||||
var tmp = new __constructor().ready(init);
|
||||
|
||||
tmp.init.content = this.element.cloneNode(true);
|
||||
|
||||
layerObj[tmp.init.$id] = {obj: tmp, parentElem: this.element.parentNode, wrap: this.element, show: false};
|
||||
layerDom[tmp.init.$id] = tmp.create();
|
||||
}else if(this.param === 'tips'){
|
||||
var $elem = yua(this.element),
|
||||
ew = $elem.innerWidth(),
|
||||
ol = $elem.offset().left - document.body.scrollLeft,
|
||||
ot = $elem.offset().top - document.body.scrollTop,
|
||||
tipsBox = document.createElement('div'),
|
||||
tipsArrow = document.createElement('i'),
|
||||
tipsCont = document.createElement('div');
|
||||
|
||||
|
||||
tipsBox.className = 'do-layer skin-def type-5'
|
||||
tipsBox.style.left = ol + (ew * 0.7) + 'px'
|
||||
if(init.background){
|
||||
tipsBox.style.background = init.background
|
||||
tipsArrow.style.borderTopColor = init.background
|
||||
}
|
||||
if(init.color){
|
||||
tipsBox.style.color = init.color
|
||||
}
|
||||
tipsCont.className = 'layer-content'
|
||||
tipsCont.textContent = val
|
||||
tipsArrow.className = 'arrow'
|
||||
tipsBox.appendChild(tipsCont)
|
||||
tipsBox.appendChild(tipsArrow)
|
||||
|
||||
|
||||
|
||||
yua(document).bind('scroll', function(){
|
||||
ol = $elem.offset().left - document.body.scrollLeft;
|
||||
ot = $elem.offset().top - document.body.scrollTop;
|
||||
|
||||
tipsBox.style.left = ol + (ew * 0.7) + 'px'
|
||||
tipsBox.style.top = (ot - tipsBox.offsetHeight - 8) + 'px'
|
||||
})
|
||||
|
||||
$elem.bind('mouseenter', function(ev){
|
||||
_this.element.parentNode.appendChild(tipsBox)
|
||||
clearTimeout(_this.showTime)
|
||||
clearTimeout(_this.hideTime)
|
||||
_this.showTime = setTimeout(function(){
|
||||
tipsBox.style.top = (ot - tipsBox.offsetHeight - 8) + 'px'
|
||||
tipsBox.classList.add('active')
|
||||
|
||||
}, 4)
|
||||
|
||||
})
|
||||
$elem.bind('mouseleave', function(){
|
||||
_this.hideTime = setTimeout(function(){
|
||||
clearTimeout(_this.hideTime)
|
||||
try{
|
||||
_this.element.parentNode.removeChild(tipsBox)
|
||||
}catch(err){}
|
||||
}, 150)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
if(!window.layer)
|
||||
window.layer = __layer
|
||||
|
||||
|
||||
return __layer
|
||||
|
||||
})
|
||||
|
|
@ -0,0 +1,578 @@
|
|||
/**
|
||||
*
|
||||
* @authors yutent (yutent@doui.cc)
|
||||
* @date 2016-09-21 01:36:29
|
||||
*
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
|
||||
define(['yua', 'lib/drag', 'css!./skin/def'], function(yua){
|
||||
|
||||
|
||||
var layerDom = {},
|
||||
layerObj = {},
|
||||
unique = null, //储存当前打开的1/2/3类型的弹窗
|
||||
lid = 0,
|
||||
defconf = {
|
||||
type: 1, // 弹窗类型
|
||||
skin: 'def', //默认主题
|
||||
icon: 1, //图标类型
|
||||
background: '#fff',
|
||||
shade: true, //遮罩
|
||||
shadeClose: false, //遮罩点击关闭弹窗
|
||||
radius: '0px', //弹窗圆角半径
|
||||
area: ['auto', 'auto'],
|
||||
title: '', //弹窗主标题(在工具栏上的)
|
||||
menubar: true, //是否显示菜单栏
|
||||
content: '', // 弹窗的内容
|
||||
fixed: false, //是否固定不可拖拽
|
||||
offset: null, //弹窗出来时的坐标, 为数组,可有4个值,依次是 上右下左
|
||||
btns: ['确定', '取消'], //弹窗的2个按钮的文字
|
||||
yes: close, //确定按钮对应的回调
|
||||
no: close, //取消按钮对应的回调
|
||||
success: null //弹窗初始化完成时的回调
|
||||
};
|
||||
|
||||
function uuid(){
|
||||
return 'layer-' + (++lid)
|
||||
}
|
||||
|
||||
|
||||
function close(id){
|
||||
if(typeof id !== 'string' && typeof id !== 'number'){
|
||||
return console.error(new Error('要关闭的layer实例不存在'))
|
||||
}
|
||||
if(/^\$wrap\-/.test(id) || layerObj['$wrap-' + id]){
|
||||
|
||||
try {
|
||||
id = (layerObj['$wrap-' + id] ? '$wrap-' : '') + id;
|
||||
//未显示过,忽略
|
||||
if(!layerObj[id].show){
|
||||
return
|
||||
}
|
||||
layerObj[id].parentElem.replaceChild(layerObj[id].wrap, layerDom[id][1])
|
||||
unique = null
|
||||
}catch(err){}
|
||||
}else{
|
||||
try {
|
||||
document.body.removeChild(layerDom[id][1])
|
||||
document.body.removeChild(layerDom[id][0])
|
||||
unique = null
|
||||
}catch(err){}
|
||||
|
||||
delete layerDom[id]
|
||||
delete yua.vmodels[id]
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function reapeat(str, num){
|
||||
var idx = 0,
|
||||
result = ''
|
||||
while(idx < num){
|
||||
result += str
|
||||
idx++
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
function fixOffset(val){
|
||||
if(!val && val !== 0){
|
||||
return 'auto'
|
||||
}else{
|
||||
return val
|
||||
}
|
||||
}
|
||||
|
||||
var __constructor = function(conf){
|
||||
if(conf){
|
||||
this.ready(conf).append().show()
|
||||
}
|
||||
},
|
||||
__layer = {
|
||||
alert: function(msg, conf){
|
||||
if(typeof conf === 'function'){
|
||||
conf = {yes: conf}
|
||||
}else if(typeof conf === 'object'){
|
||||
conf = conf
|
||||
}else{
|
||||
conf = {}
|
||||
}
|
||||
conf.icon = 6
|
||||
conf.content = msg
|
||||
return __layer.open(conf)
|
||||
},
|
||||
confirm: function(msg, conf){
|
||||
if(typeof conf === 'function'){
|
||||
conf = {yes: conf}
|
||||
}else if(typeof conf === 'object'){
|
||||
conf = conf
|
||||
}else{
|
||||
conf = {}
|
||||
}
|
||||
conf.type = 2
|
||||
conf.icon = 8
|
||||
conf.content = msg
|
||||
return __layer.open(conf)
|
||||
},
|
||||
msg: function(msg, conf){
|
||||
if(typeof conf !== 'object'){
|
||||
var tmp = conf
|
||||
conf = {timeout: 2500}
|
||||
if(typeof tmp === 'number'){
|
||||
conf.icon = tmp
|
||||
}
|
||||
}
|
||||
|
||||
if(!conf.hasOwnProperty('timeout')){
|
||||
conf.timeout = 2500
|
||||
}
|
||||
|
||||
conf.specialMode = true;//特殊模式
|
||||
conf.content = '<p class="msg-box">' + msg + '</p>'
|
||||
conf.type = 7
|
||||
conf.fixed = true
|
||||
conf.shade = false
|
||||
conf.menubar = false
|
||||
conf.radius = '5px'
|
||||
return __layer.open(conf)
|
||||
},
|
||||
loading: function(style, time, cb){
|
||||
style = style >>> 0
|
||||
|
||||
if(typeof time === 'function'){
|
||||
cb = time;
|
||||
time = 0
|
||||
} else{
|
||||
time = time >>> 0
|
||||
if(typeof cb !== 'function'){
|
||||
cb = yua.noop
|
||||
}
|
||||
}
|
||||
return __layer.open({type: 6, load: style, yes: cb, timeout: time, menubar: false, background: 'none', fixed: true})
|
||||
},
|
||||
tips: function(msg, elem, conf){
|
||||
if(!(elem instanceof HTMLElement)){
|
||||
return console.error(new Error('tips类型必须指定一个目标容器'))
|
||||
}
|
||||
if(typeof conf !== 'object'){
|
||||
var tmp = conf
|
||||
conf = {timeout: 2500}
|
||||
if(typeof tmp === 'number'){
|
||||
conf.icon = tmp
|
||||
}
|
||||
}
|
||||
if(!conf.hasOwnProperty('timeout')){
|
||||
conf.timeout = 2500
|
||||
}
|
||||
if(!conf.background){
|
||||
conf.background = 'rgba(0,0,0,.5)'
|
||||
}
|
||||
if(!conf.color){
|
||||
conf.color = '#fff'
|
||||
}
|
||||
conf.$elem = elem
|
||||
conf.content = msg
|
||||
conf.type = 5;
|
||||
conf.icon = 0;
|
||||
conf.fixed = true;
|
||||
conf.shade = false;
|
||||
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')
|
||||
}
|
||||
var conf = {
|
||||
type: 3,
|
||||
icon: 7,
|
||||
prompt: '',
|
||||
title: msg,
|
||||
content: '<input class="prompt-value" :duplex="prompt" />',
|
||||
yes: function(id){
|
||||
callback(id, yua.vmodels[id].prompt)
|
||||
}
|
||||
}
|
||||
return __layer.open(conf)
|
||||
},
|
||||
use: function(skin, callback){
|
||||
require(['css!./skin/' + skin], callback)
|
||||
},
|
||||
close: close,
|
||||
open: function(conf){
|
||||
if(typeof conf === 'string'){
|
||||
conf = '$wrap-' + conf
|
||||
if(!layerObj[conf]){
|
||||
throw new Error('layer实例不存在')
|
||||
}else{
|
||||
//只能显示一个实例
|
||||
if(layerObj[conf].show){
|
||||
return
|
||||
}
|
||||
layerObj[conf].show = true
|
||||
|
||||
if(!yua.vmodels[conf]){
|
||||
yua.define(layerObj[conf].obj.init)
|
||||
}
|
||||
|
||||
yua.scan(layerDom[conf][1])
|
||||
layerObj[conf].obj.show()
|
||||
|
||||
layerObj[conf].parentElem.appendChild(layerDom[conf][1])
|
||||
layerObj[conf].parentElem.replaceChild(layerDom[conf][1], layerObj[conf].wrap)
|
||||
}
|
||||
}else{
|
||||
return new __constructor(conf).init.$id
|
||||
}
|
||||
},
|
||||
version: '0.0.1-base'
|
||||
};
|
||||
|
||||
/*type: { // 弹窗类型对应的id值
|
||||
1: 'alert',
|
||||
2: 'confirm',
|
||||
3: 'prompt',
|
||||
4: 'iframe',
|
||||
5: 'tips',
|
||||
6: 'loading',
|
||||
7: 'msg',
|
||||
}*/
|
||||
__constructor.prototype = {
|
||||
dot: { //loading的子元素数量
|
||||
0: 4,
|
||||
1: 9,
|
||||
2: 2,
|
||||
3: 3,
|
||||
4: 2,
|
||||
5: 5,
|
||||
6: 5,
|
||||
7: 5
|
||||
},
|
||||
timeout: null,
|
||||
create: function(){
|
||||
var layBox = document.createElement('div'),
|
||||
coverBox = document.createElement('div');
|
||||
|
||||
coverBox.className = 'do-layer-cover type-' + this.init.type
|
||||
// 允许点击遮罩关闭弹层时, 添加控制器
|
||||
if(this.init.shadeClose){
|
||||
coverBox.setAttribute(':controller', this.cInit.$id)
|
||||
coverBox.setAttribute(':click', 'close(\'' + this.init.$id + '\')')
|
||||
}
|
||||
|
||||
layBox.className = 'do-layer skin-'
|
||||
+ this.init.skin
|
||||
+ (this.init.type === 5 && ' active' || '')
|
||||
+ ' type-'
|
||||
+ ((!this.init.specialMode && this.init.type === 7) ? 'unspecial' : this.init.type);
|
||||
|
||||
//暂时隐藏,避免修正定位时,能看到闪一下
|
||||
layBox.style.visibility = 'hidden'
|
||||
layBox.style.borderRadius = this.init.radius
|
||||
|
||||
layBox.setAttribute(':controller', this.init.$id)
|
||||
|
||||
//没有菜单栏, 且未禁止拖拽,则加上可拖拽属性
|
||||
if(!this.init.menubar && !this.init.fixed){
|
||||
layBox.setAttribute(':drag', '')
|
||||
layBox.setAttribute('data-limit', 'window')
|
||||
}
|
||||
|
||||
//弹窗的宽高
|
||||
var boxcss = ''
|
||||
if(this.init.area[0] !== 'auto'){
|
||||
boxcss += 'width: ' + this.init.area[0] + ';'
|
||||
}
|
||||
if(this.init.area[1] !== 'auto'){
|
||||
boxcss += 'height: ' + this.init.area[1] + ';'
|
||||
}
|
||||
|
||||
layBox.innerHTML = this.getMenubar()
|
||||
+ '<div class="layer-content do-fn-cl '
|
||||
+ (this.init.icon === 0 && 'none-icon' || '')
|
||||
+ '" style="'
|
||||
+ boxcss
|
||||
+ '">'
|
||||
+ this.getCont()
|
||||
+ '</div>'
|
||||
+ this.getBtns()
|
||||
+ (this.init.type === 5 && '<i class="arrow" style="border-top-color: '
|
||||
+ this.init.background
|
||||
+ '"></i>' || '')
|
||||
|
||||
return [this.init.shade ? coverBox : null, layBox]
|
||||
},
|
||||
getCont: function(){
|
||||
if(this.init.type === 6){
|
||||
return this.getLoading(this.init.load)
|
||||
}else{
|
||||
return this.getIcon()
|
||||
+ '<div class="detail" :html="content"></div>'
|
||||
}
|
||||
},
|
||||
getLoading: function(style){
|
||||
return '<div class="do-ui-load load-style-'
|
||||
+ style
|
||||
+ '">'
|
||||
+ '<span class="dot-box">'
|
||||
+ reapeat('<i></i>', this.dot[style])
|
||||
+ '</span>'
|
||||
+ '</div>'
|
||||
},
|
||||
//获取窗口导航条
|
||||
getMenubar: function(){
|
||||
var html = ''
|
||||
if(this.init.menubar){
|
||||
html += '<div class="layer-title do-fn-noselect" ';
|
||||
//可拖拽
|
||||
if(!this.init.fixed){
|
||||
html += ':drag="do-layer" data-limit="window" '
|
||||
}
|
||||
|
||||
html += '>{{title}}'
|
||||
+ '<a class="action-close deficon" :click="no(\'' + this.init.$id + '\')"></a>'
|
||||
+ '</div>'
|
||||
}
|
||||
return html
|
||||
},
|
||||
//获取窗口内容的图标
|
||||
getIcon: function(){
|
||||
if(this.init.icon === 0){
|
||||
return ''
|
||||
}
|
||||
if(this.init.type < 4 || this.init.type === 5 || this.init.specialMode){
|
||||
return '<span class="deficon icon-' + this.init.icon + '"></span>'
|
||||
}
|
||||
return ''
|
||||
},
|
||||
// 获取窗口按钮
|
||||
getBtns: function(){
|
||||
if(this.init.type > 3){
|
||||
return ''
|
||||
}else{
|
||||
var html = '<div class="layer-btns do-fn-noselect">';
|
||||
if(this.init.type > 1){
|
||||
html += '<a href="javascript:;" class="action-no" '
|
||||
+ ':click="no(\'' + this.init.$id + '\')" '
|
||||
+ ':text="btns[1]"></a>'
|
||||
+ '<a href="javascript:;" class="action-yes" '
|
||||
+ ':click="yes(\'' + this.init.$id + '\')" '
|
||||
+ ':text="btns[0]"></a>'
|
||||
}else{
|
||||
html += '<a href="javascript:;" class="action-yes" '
|
||||
+ ':click="yes(\'' + this.init.$id + '\')" '
|
||||
+ ':text="btns[0]"></a>'
|
||||
}
|
||||
html += '</div>'
|
||||
|
||||
return html
|
||||
}
|
||||
},
|
||||
append: function(){
|
||||
//如果有已经打开的弹窗,则关闭
|
||||
if(unique){
|
||||
__layer.close(unique)
|
||||
}
|
||||
if(this.init.type < 4){
|
||||
unique = this.init.$id
|
||||
}
|
||||
layerDom[this.init.$id] = this.create()
|
||||
if(layerDom[this.init.$id][0]){
|
||||
document.body.appendChild(layerDom[this.init.$id][0])
|
||||
//仅在允许点击遮罩时,初始化控制器,减少资源消耗
|
||||
if(this.init.shadeClose){
|
||||
yua.define(this.cInit)
|
||||
yua.scan(layerDom[this.init.$id][0])
|
||||
}
|
||||
}
|
||||
|
||||
document.body.appendChild(layerDom[this.init.$id][1])
|
||||
yua.define(this.init)
|
||||
yua.scan(layerDom[this.init.$id][1])
|
||||
return this
|
||||
},
|
||||
show: function(){
|
||||
var _this = this;
|
||||
|
||||
setTimeout(function(){
|
||||
var style = {visibility: '', background: _this.init.background},
|
||||
css = getComputedStyle(layerDom[_this.init.$id][1]);
|
||||
|
||||
if(_this.init.type === 5){
|
||||
style.color = _this.init.color
|
||||
|
||||
var $elem = yua(_this.init.$elem),
|
||||
ew = $elem.innerWidth(),
|
||||
ol = $elem.offset().left - document.body.scrollLeft,
|
||||
ot = $elem.offset().top - document.body.scrollTop;
|
||||
|
||||
style.left = ol + (ew * 0.7)
|
||||
style.top = ot - parseInt(css.height) - 8
|
||||
|
||||
}else{
|
||||
if(_this.init.offset){
|
||||
style.top = fixOffset(_this.init.offset[0])
|
||||
style.right = fixOffset(_this.init.offset[1])
|
||||
style.bottom = fixOffset(_this.init.offset[2])
|
||||
style.left = fixOffset(_this.init.offset[3])
|
||||
}else{
|
||||
style = yua.mix(style, {
|
||||
marginLeft: -parseInt(css.width) / 2,
|
||||
marginTop: -parseInt(css.height) / 2,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
yua(layerDom[_this.init.$id][1]).css(style)
|
||||
|
||||
}, 4)
|
||||
|
||||
|
||||
if(this.init.success && typeof this.init.success === 'function'){
|
||||
//弹窗成功的回调
|
||||
this.init.success(this.init.$id)
|
||||
}
|
||||
// loading类型,回调需要自动触发
|
||||
if(this.init.type > 3) {
|
||||
//大于0自动触发超时关闭
|
||||
if(this.init.timeout > 0){
|
||||
clearTimeout(this.timeout)
|
||||
this.timeout = setTimeout(function(){
|
||||
|
||||
clearTimeout(_this.timeout)
|
||||
__layer.close(_this.init.$id)
|
||||
|
||||
// 为loading类型时,自动关闭同时触发回调
|
||||
if(_this.init.type === 6){
|
||||
_this.init.yes(_this.init.$id)
|
||||
}
|
||||
|
||||
}, this.init.timeout)
|
||||
|
||||
} else if(this.init.type === 6) {
|
||||
// loading类型, 非自动关闭时, 主动触发回调
|
||||
this.init.yes(this.init.$id)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
ready: function(conf){
|
||||
this.init = yua.mix({}, defconf, conf)
|
||||
if(!this.init.$id){
|
||||
this.init.$id = uuid();
|
||||
}
|
||||
if(this.init.icon > 17){
|
||||
this.icon.icon = 17
|
||||
}
|
||||
//base版没有iframe类型
|
||||
if(this.init.type === 4){
|
||||
this.icon.type = 7
|
||||
}
|
||||
this.cInit = {
|
||||
$id: this.init.$id + '-c',
|
||||
close: this.init.shadeClose ? close : yua.noop
|
||||
};
|
||||
return this
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
yua.directive('layer', {
|
||||
priority: 1400,
|
||||
init: function(binding){
|
||||
if(!binding.param){
|
||||
binding.element.style.display = 'none'
|
||||
}
|
||||
},
|
||||
update: function(val){
|
||||
if(!val){
|
||||
return console.error(new Error(':layer指令格式不正确或无效属性. [' + this.name + '="' + this.expr) + '"]')
|
||||
}
|
||||
|
||||
var _this = this,
|
||||
init = Object.assign({}, this.element.dataset);
|
||||
|
||||
if(!this.param){
|
||||
init.type = 7;
|
||||
init.$id = '$wrap-' + val;
|
||||
if(!init.hasOwnProperty('menubar')){
|
||||
init.menubar = false;
|
||||
}
|
||||
|
||||
var tmp = new __constructor().ready(init);
|
||||
|
||||
tmp.init.content = this.element.cloneNode(true);
|
||||
|
||||
layerObj[tmp.init.$id] = {obj: tmp, parentElem: this.element.parentNode, wrap: this.element, show: false};
|
||||
layerDom[tmp.init.$id] = tmp.create();
|
||||
}else if(this.param === 'tips'){
|
||||
var $elem = yua(this.element),
|
||||
ew = $elem.innerWidth(),
|
||||
ol = $elem.offset().left - document.body.scrollLeft,
|
||||
ot = $elem.offset().top - document.body.scrollTop,
|
||||
tipsBox = document.createElement('div'),
|
||||
tipsArrow = document.createElement('i'),
|
||||
tipsCont = document.createElement('div');
|
||||
|
||||
|
||||
tipsBox.className = 'do-layer skin-def type-5'
|
||||
tipsBox.style.left = ol + (ew * 0.7) + 'px'
|
||||
if(init.background){
|
||||
tipsBox.style.background = init.background
|
||||
tipsArrow.style.borderTopColor = init.background
|
||||
}
|
||||
if(init.color){
|
||||
tipsBox.style.color = init.color
|
||||
}
|
||||
tipsCont.className = 'layer-content'
|
||||
tipsCont.textContent = val
|
||||
tipsArrow.className = 'arrow'
|
||||
tipsBox.appendChild(tipsCont)
|
||||
tipsBox.appendChild(tipsArrow)
|
||||
|
||||
|
||||
|
||||
yua(document).bind('scroll', function(){
|
||||
ol = $elem.offset().left - document.body.scrollLeft;
|
||||
ot = $elem.offset().top - document.body.scrollTop;
|
||||
|
||||
tipsBox.style.left = ol + (ew * 0.7) + 'px'
|
||||
tipsBox.style.top = (ot - tipsBox.offsetHeight - 8) + 'px'
|
||||
})
|
||||
|
||||
$elem.bind('mouseenter', function(ev){
|
||||
_this.element.parentNode.appendChild(tipsBox)
|
||||
clearTimeout(_this.showTime)
|
||||
clearTimeout(_this.hideTime)
|
||||
_this.showTime = setTimeout(function(){
|
||||
tipsBox.style.top = (ot - tipsBox.offsetHeight - 8) + 'px'
|
||||
tipsBox.classList.add('active')
|
||||
|
||||
}, 4)
|
||||
|
||||
})
|
||||
$elem.bind('mouseleave', function(){
|
||||
_this.hideTime = setTimeout(function(){
|
||||
clearTimeout(_this.hideTime)
|
||||
try{
|
||||
_this.element.parentNode.removeChild(tipsBox)
|
||||
}catch(err){}
|
||||
}, 150)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
if(!window.layer)
|
||||
window.layer = __layer
|
||||
|
||||
|
||||
return __layer
|
||||
|
||||
})
|
||||
|
|
@ -1,135 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @authors yutent (yutent@doui.cc)
|
||||
* @date 2016-09-21 01:36:29
|
||||
*
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
|
||||
define(['avalon', 'css!./skin/def'], function(av){
|
||||
|
||||
|
||||
|
||||
var prep = {
|
||||
type: {
|
||||
1: 'alert',
|
||||
2: 'confirm',
|
||||
3: 'msg',
|
||||
4: 'loading',
|
||||
5: 'iframe',
|
||||
6: 'tips',
|
||||
7: 'prompt'
|
||||
},
|
||||
init: {
|
||||
type: 1,
|
||||
shade: true,
|
||||
shadeClose: false,
|
||||
move: '.do-ui-layer-move',
|
||||
title: '温馨提示',
|
||||
content: '',
|
||||
offset: {x: '300px', y: '200px'},
|
||||
btns: ['确定', '取消'],
|
||||
yes: av.noop,
|
||||
no: av.noop,
|
||||
success: av.noop
|
||||
}
|
||||
}
|
||||
|
||||
function uuid(type){
|
||||
type = type || 1
|
||||
return prep.type[type] + Math.round(Date.now()/1000).toString(16) + Math.random().toString(16).slice(2, 6)
|
||||
}
|
||||
|
||||
|
||||
|
||||
var layer = {
|
||||
alert: function(msg, conf){
|
||||
conf = conf || {}
|
||||
return layer.open(av.mix({content: msg}, conf))
|
||||
},
|
||||
confirm: function(msg, conf){
|
||||
conf = conf || {}
|
||||
return layer.open(av.mix({content: msg}, conf))
|
||||
},
|
||||
msg: function(msg, conf){
|
||||
av.log(msg)
|
||||
},
|
||||
loading: function(msg, conf){
|
||||
av.log(msg)
|
||||
},
|
||||
iframe: function(url, conf){
|
||||
av.log(url)
|
||||
},
|
||||
tips: function(msg, conf){
|
||||
av.log(msg)
|
||||
},
|
||||
prompt: function(callback){
|
||||
av.log('23456')
|
||||
},
|
||||
use: function(conf, callback){
|
||||
require(['css!./skin/' + conf.skin], callback)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var FN = function(conf){
|
||||
this.ready(conf)
|
||||
}
|
||||
|
||||
|
||||
FN.prototype = {
|
||||
init: {},
|
||||
create: function(){
|
||||
var layBox = document.createElement('div')
|
||||
layBox.className = 'do-ui-layer skin-def'
|
||||
layBox.style.left = this.init.offset.x
|
||||
layBox.style.top = this.init.offset.y
|
||||
layBox.setAttribute('ms-controller', this.init.$id)
|
||||
layBox.innerHTML = '<div class="layer-title">{{title}}<a class="layer-min deficon"></a><a class="layer-close deficon"></a></div>' +
|
||||
'<div class="layer-content">' +
|
||||
'<span class="deficon icon-1"></span>' +
|
||||
'<div class="detail" ms-html="content"></div>' +
|
||||
'</div>' +
|
||||
'<div class="layer-btns">' +
|
||||
'<a href="javascript:;" class="layer-yes" ms-text="btns[0]"></a>' +
|
||||
'<a href="javascript:;" class="layer-no" ms-text="btns[1]"></a>' +
|
||||
'</div>'
|
||||
return layBox
|
||||
},
|
||||
show: function(){
|
||||
|
||||
var layBox = this.create()
|
||||
document.body.appendChild(layBox)
|
||||
|
||||
av.define(this.init)
|
||||
av.scan(layBox)
|
||||
},
|
||||
ready: function(conf){
|
||||
this.init = av.mix({$id: uuid()}, prep.init, conf)
|
||||
this.show()
|
||||
},
|
||||
close: function(){
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
layer.open = function(conf){
|
||||
av.log(conf)
|
||||
return new FN(conf).init
|
||||
}
|
||||
|
||||
|
||||
if(!window.layer)
|
||||
window.layer = layer
|
||||
|
||||
|
||||
|
||||
return layer
|
||||
|
||||
|
||||
})
|
||||
|
|
@ -6,44 +6,229 @@
|
|||
*
|
||||
*/
|
||||
|
||||
.do-ui-layer, .do-ui-layer * {margin: 0;padding: 0;vertical-align: baseline;box-sizing:border-box;}
|
||||
.do-ui-layer a {text-decoration:none;}
|
||||
.do-fn-cl { *zoom: 1; }
|
||||
.do-fn-cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; overflow:hidden;}
|
||||
.do-layer, .do-layer * {margin: 0;padding: 0;vertical-align: baseline;box-sizing:border-box;}
|
||||
.do-layer a {text-decoration:none;}
|
||||
|
||||
@font-face {font-family: "deficon";
|
||||
src: url('def.eot?t=1474609176'); /* IE9*/
|
||||
src: url('def.woff?t=1474609176') format('woff'), /* chrome, firefox */
|
||||
url('def.ttf?t=1474609176') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
src: url('def.eot'); /* IE9*/
|
||||
src: url('def.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
}
|
||||
|
||||
.do-ui-layer-shade {position:fixed;left:0;top:0;z-index:65534;width:100%;height:100%;background:rgba(255,255,255,.05);}
|
||||
.do-ui-layer {position:fixed;left:50%;top:230px;z-index:65535;width:auto;height:auto;}
|
||||
.do-layer-cover {position:fixed;left:0;top:0;z-index:65534;width:100%;height:100%;background:rgba(255,255,255,.05);}
|
||||
.do-layer {position:fixed;left:50%;top:50%;z-index:65535;width:auto;height:auto;}
|
||||
.do-layer:active {z-index:65536;}
|
||||
|
||||
|
||||
.do-ui-layer.skin-def {min-width:300px;background:#fff;color:#666;font-size:13px;box-shadow:0 0 10px rgba(0,0,0,.3);}
|
||||
.do-ui-layer.skin-def .deficon {display: inline-block;font-family:"deficon" !important;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
|
||||
.do-ui-layer.skin-def .icon-1:before {content:"\e605";color:#11b330;}
|
||||
.do-ui-layer.skin-def .icon-2:before {content:"\e602";color:#f30;}
|
||||
.do-ui-layer.skin-def .icon-3:before {content:"\e603";color:#f30;}
|
||||
.do-ui-layer.skin-def .icon-4:before {content:"\e604";color:#f30;}
|
||||
.do-ui-layer.skin-def .icon-5:before {content:"\e608";color:#09f;}
|
||||
.do-ui-layer.skin-def .icon-6:before {content:"\e609";color:#ee0}
|
||||
.do-ui-layer.skin-def .icon-7:before {content:"\e60a";color:#63e2c2}
|
||||
.do-ui-layer.skin-def .icon-8:before {content:"\e606";color:#ee0}
|
||||
.do-ui-layer.skin-def .icon-9:before {content:"\e607";color:#f30;}
|
||||
/*默认皮肤样式*/
|
||||
.do-layer.skin-def {color:#666;font-size:14px;box-shadow:0 0 10px rgba(0,0,0,.3);}
|
||||
.do-layer.skin-def .deficon {display: inline-block;font-family:"deficon" !important;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
|
||||
.do-layer.skin-def .icon-1:before {content:"\e6f1";color:#11b330;}/*discover*/
|
||||
.do-layer.skin-def .icon-2:before {content:"\e6fa";color:#f30;}/*position*/
|
||||
.do-layer.skin-def .icon-3:before {content:"\e6f0";color:#f30;}/*del*/
|
||||
.do-layer.skin-def .icon-4:before {content:"\e604";color:#f30;}/*fire*/
|
||||
.do-layer.skin-def .icon-5:before {content:"\e6f9";color:#09f;}/*pilot*/
|
||||
.do-layer.skin-def .icon-6:before {content:"\e700";color:#f7b824}/*message*/
|
||||
.do-layer.skin-def .icon-7:before {content:"\e6fc";color:#63e2c2}/*talk*/
|
||||
.do-layer.skin-def .icon-8:before {content:"\e6f6";color:#f7b824}/*warn*/
|
||||
.do-layer.skin-def .icon-9:before {content:"\e6fb";color:#f60;}/*star*/
|
||||
.do-layer.skin-def .icon-10:before {content:"\e6f8";color:#48d0f7;}/*happy*/
|
||||
.do-layer.skin-def .icon-11:before {content:"\e6fd";color:#f90;}/*sad*/
|
||||
.do-layer.skin-def .icon-12:before {content:"\e631";color:#09a;}/*share*/
|
||||
.do-layer.skin-def .icon-13:before {content:"\e6f3";color:#f60;}/*search*/
|
||||
.do-layer.skin-def .icon-14:before {content:"\e6f4";color:#09a;}/*user*/
|
||||
.do-layer.skin-def .icon-15:before {content:"\e701";color:#f30;}/*minus*/
|
||||
.do-layer.skin-def .icon-16:before {content:"\e703";color:#f7b824;}/*wait*/
|
||||
.do-layer.skin-def .icon-17:before {content:"\e704";color:#11b330;}/*right*/
|
||||
|
||||
|
||||
|
||||
.do-ui-layer.skin-def .layer-title {width:100%;height:40px;padding:0 8px;line-height:40px;background:#f3f3f3;font-size:14px;color:#454545;}
|
||||
.do-ui-layer.skin-def .layer-min,.do-ui-layer.skin-def .layer-close {position:absolute;display:block;top:10px;width:20px;height:20px;line-height:20px;border:0;text-align:center;cursor:pointer;}
|
||||
.do-ui-layer.skin-def .layer-min {right:40px;}
|
||||
.do-ui-layer.skin-def .layer-close {right:10px;}
|
||||
.do-ui-layer.skin-def .layer-close:hover,.do-ui-layer.skin-def .layer-min:hover {border: 1px solid #ddd;line-height: 18px;}
|
||||
.do-ui-layer.skin-def .layer-min:before {content:"\e600";}
|
||||
.do-ui-layer.skin-def .layer-close:before {content:"\e601";}
|
||||
.do-layer.skin-def .layer-title {width:100%;height:40px;padding:0 8px;line-height:40px;background:#f3f3f3;font-size:14px;color:#454545;}
|
||||
.do-layer.skin-def .action-min,.do-layer.skin-def .action-close {position:absolute;display:block;top:10px;width:20px;height:20px;line-height:20px;border:0;text-align:center;cursor:pointer;color:#666;}
|
||||
.do-layer.skin-def .action-min {right:40px;}
|
||||
.do-layer.skin-def .action-close {right:10px;}
|
||||
.do-layer.skin-def .action-close:hover,.do-layer.skin-def .action-min:hover {border: 1px solid #ddd;line-height: 18px;color:#049789;}
|
||||
.do-layer.skin-def .action-min:before {content:"\e600";}
|
||||
.do-layer.skin-def .action-close:before {content:"\e659";}
|
||||
|
||||
.do-ui-layer.skin-def .layer-content {width:100%;height:auto;min-height:100px;padding:10px;}
|
||||
.do-ui-layer.skin-def .layer-content .deficon {float:left;width:60px;height:100%;line-height:50px;font-size:40px;text-align:center;}
|
||||
.do-ui-layer.skin-def .layer-content .detail {float:left;width:auto;height:100%;margin-top:10px;padding:5px 15px;word-break:break-all;word-wrap: break-word;}
|
||||
.do-layer.skin-def .layer-content {position:relative;width:100%;height:auto;min-height:50px;padding:10px;}
|
||||
.do-layer.skin-def .layer-content .deficon {position:absolute;left:10px;top:10px;width:50px;height:auto;line-height:40px;font-size:40px;text-align:center;}
|
||||
.do-layer.skin-def .layer-content .detail {width:auto;height:100%;margin:auto auto auto 60px;padding:5px 15px;word-break:break-all;word-wrap: break-word;}
|
||||
.do-layer.skin-def .layer-content.none-icon .detail {margin:0 auto;}
|
||||
.do-layer.skin-def .layer-content .detail .prompt-value {width: 230px;height: 30px;padding: 0 8px;border: 1px solid #ddd;border-radius: 3px;}
|
||||
.do-layer.skin-def .layer-content .detail .msg-box {line-height:30px;}
|
||||
|
||||
|
||||
.do-layer.skin-def .layer-btns {width:100%;height:40px;padding:0 5px;line-height:28px;font-size:14px;color:#454545;text-align:right;}
|
||||
.do-layer.skin-def .layer-btns a {display:inline-block;width:auto;min-width:60px;height:30px;margin:0 5px;padding:0 10px;line-height:28px;border:1px solid #ddd;color:#454545;text-align:center;background:#f3f3f3;}
|
||||
|
||||
.do-layer.type-5 {visibility:hidden;min-width:75px;max-width:600px;line-height:1.5;color:#fff;background:rgba(0,0,0,.5);opacity:0;box-shadow:none;-webkit-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out;}
|
||||
.do-layer.type-5.active {visibility:visible;opacity:1;}
|
||||
.do-layer.type-5 i.arrow {position:absolute;left:5px;bottom:-14px;width:0;height:0;border:6px solid transparent;border-top:8px solid rgba(0,0,0,.5);content: ""}
|
||||
.do-layer.type-5 .layer-content .detail {margin:0;padding:0}
|
||||
|
||||
|
||||
/******** 额外的弹窗类型样式 ******/
|
||||
.do-layer.type-1,.do-layer.type-2,.do-layer.type-3 {max-width:600px;min-width:230px;}
|
||||
.do-layer.type-1 .layer-content,.do-layer.type-2 .layer-content,.do-layer.type-3 .layer-content{max-width:600px;}
|
||||
|
||||
/*loading类型,背景色要去掉, 并且遮罩颜色改为黑色半透明*/
|
||||
.do-layer.type-6 {box-shadow:none;background:transparent;}
|
||||
.do-layer-cover.type-6 {background:rgba(0,0,0,.3);}
|
||||
|
||||
/*special模式类型,调小宽高限制,内外边距取消*/
|
||||
.do-layer.type-unspecial {min-width:100px;background:transparent;}
|
||||
.do-layer.type-unspecial .layer-content {min-height:60px;padding:0}
|
||||
.do-layer.type-unspecial .layer-content .detail {margin:0;padding:0}
|
||||
|
||||
/*--------几种loading动画-------*/
|
||||
.do-ui-load {position:relative;width:100px;height:100px;margin:auto;}
|
||||
|
||||
/* style 0 */
|
||||
.do-ui-load.load-style-0 .dot-box {position:absolute;display:block;width:70%;height:70%;margin:15%;-webkit-animation: circle 2s infinite linear;animation: circle 2s infinite linear;}
|
||||
.do-ui-load.load-style-0 .dot-box i {position:absolute;display:block;width:40%;height:40%;border-radius:50%;background:#03998c;-webkit-animation: fadein 2s infinite linear;animation: fadein 2s infinite linear;-webkit-transform: scale(.5);transform: scale(.5);opacity:.3}
|
||||
.do-ui-load.load-style-0 .dot-box i:nth-child(1) {left:2.5%;top:2.5%;}
|
||||
.do-ui-load.load-style-0 .dot-box i:nth-child(2) {right:2.5%;top:2.5%;-webkit-animation-delay:.4s;animation-delay:.4s;}
|
||||
.do-ui-load.load-style-0 .dot-box i:nth-child(3) {left:2.5%;bottom:2.5%;-webkit-animation-delay:.8s;animation-delay:.8s;}
|
||||
.do-ui-load.load-style-0 .dot-box i:nth-child(4) {right:2.5%;bottom:2.5%;-webkit-animation-delay:1.2s;animation-delay:1.2s;}
|
||||
|
||||
/* style 1 */
|
||||
.do-ui-load.load-style-1 .dot-box {position:absolute;display:block;width:90%;height:90%;margin:5%;}
|
||||
.do-ui-load.load-style-1 .dot-box i {float:left;display:block;width:30px;height:30px;background:#03998c;-webkit-animation: grid 1.5s infinite linear;animation: grid 1.5s infinite linear;}
|
||||
.do-ui-load.load-style-1 .dot-box i:nth-child(4),
|
||||
.do-ui-load.load-style-1 .dot-box i:nth-child(8) {-webkit-animation-delay:.2s;animation-delay:.2s;}
|
||||
.do-ui-load.load-style-1 .dot-box i:nth-child(1),
|
||||
.do-ui-load.load-style-1 .dot-box i:nth-child(5),
|
||||
.do-ui-load.load-style-1 .dot-box i:nth-child(9) {-webkit-animation-delay:.3s;animation-delay:.3s;}
|
||||
|
||||
.do-ui-load.load-style-1 .dot-box i:nth-child(2),
|
||||
.do-ui-load.load-style-1 .dot-box i:nth-child(6) {-webkit-animation-delay:.4s;animation-delay:.4s;}
|
||||
|
||||
.do-ui-load.load-style-1 .dot-box i:nth-child(3) {-webkit-animation-delay:.5s;animation-delay:.5s;}
|
||||
|
||||
|
||||
/* style 2 */
|
||||
.do-ui-load.load-style-2 .dot-box {position:absolute;display:block;width:90%;height:90%;margin:5%;-webkit-animation: circle 2s infinite linear;animation: circle 2s infinite linear;}
|
||||
.do-ui-load.load-style-2 .dot-box i {position:absolute;display:block;width:40px;height:40px;background:#03998c;border-radius:50%;-webkit-animation: bounce 1.5s infinite linear;animation: bounce 1.5s infinite linear;-webkit-transform: scale(.1);transform: scale(.1);}
|
||||
.do-ui-load.load-style-2 .dot-box i:nth-child(1) {left:5px;top:0;}
|
||||
.do-ui-load.load-style-2 .dot-box i:nth-child(2) {right:5px;top:0;-webkit-animation-delay:.5s;animation-delay:.5s;}
|
||||
|
||||
|
||||
/* style 3 */
|
||||
.do-ui-load.load-style-3 .dot-box {position:absolute;display:block;width:100%;height:100%;}
|
||||
.do-ui-load.load-style-3 .dot-box i {position:absolute;display:block;width:100%;height:100%;border-top:5px solid #ff0;border-radius:50%;-webkit-animation: circle .9s infinite ease-in-out;animation: circle .9s infinite ease-in-out;}
|
||||
.do-ui-load.load-style-3 .dot-box i:nth-child(1) {border-color:#03998c;}
|
||||
.do-ui-load.load-style-3 .dot-box i:nth-child(2) {border-color:#f30;-webkit-animation-delay:.3s;animation-delay:.3s;}
|
||||
.do-ui-load.load-style-3 .dot-box i:nth-child(3) {-webkit-animation-delay:.6s;animation-delay:.6s;}
|
||||
|
||||
|
||||
/* style 4 */
|
||||
.do-ui-load.load-style-4 .dot-box {position:absolute;display:block;width:100%;height:100%;-webkit-animation: circle 1s infinite linear;animation: circle 1s infinite linear;}
|
||||
.do-ui-load.load-style-4 .dot-box i {position:absolute;display:block;width:100%;height:100%;border-radius:50%;}
|
||||
.do-ui-load.load-style-4 .dot-box i:nth-child(1) {border-top: 50px solid #fff;}
|
||||
.do-ui-load.load-style-4 .dot-box i:nth-child(2) {border-bottom: 50px solid #000;}
|
||||
.do-ui-load.load-style-4 .dot-box i:nth-child(1)::before {position:absolute;top:-50%;width:50%;height:50%;border-top: 25px solid #000;border-radius:50%;content:""}
|
||||
.do-ui-load.load-style-4 .dot-box i:nth-child(1)::after {position:absolute;top:-20%;left:20%;width:10px;height:10px;border-radius:50%;background:#fff;content:""}
|
||||
.do-ui-load.load-style-4 .dot-box i:nth-child(2)::before {position:absolute;bottom:-50%;right:0;width:50%;height:50%;border-bottom: 25px solid #fff;border-radius:50%;content:""}
|
||||
.do-ui-load.load-style-4 .dot-box i:nth-child(2)::after {position:absolute;bottom:-20%;right:20%;width:10px;height:10px;border-radius:50%;background:#000;content:""}
|
||||
|
||||
|
||||
/* style 5 */
|
||||
.do-ui-load.load-style-5 {width:100px;height:50px;}
|
||||
.do-ui-load.load-style-5 .dot-box {position:absolute;display:block;width:100%;height:100%;}
|
||||
.do-ui-load.load-style-5 .dot-box i {float:left;display:block;width:10px;height:100%;margin:0 5px;background:#03998c;-webkit-animation: bounce2 1s infinite ease-in-out;animation: bounce2 1s infinite ease-in-out;-webkit-transform:scaleY(.6);transform:scaleY(.6);}
|
||||
.do-ui-load.load-style-5 .dot-box i:nth-child(2) {-webkit-animation-delay:.1s;animation-delay:.1s;}
|
||||
.do-ui-load.load-style-5 .dot-box i:nth-child(3) {-webkit-animation-delay:.2s;animation-delay:.2s;}
|
||||
.do-ui-load.load-style-5 .dot-box i:nth-child(4) {-webkit-animation-delay:.3s;animation-delay:.3s;}
|
||||
.do-ui-load.load-style-5 .dot-box i:nth-child(5) {-webkit-animation-delay:.4s;animation-delay:.4s;}
|
||||
|
||||
/* style 6 */
|
||||
.do-ui-load.load-style-6 {width:300px;height:50px;}
|
||||
.do-ui-load.load-style-6 .dot-box {position:absolute;display:block;width:100%;height:100%;}
|
||||
.do-ui-load.load-style-6 .dot-box i {position:absolute;display:block;width:10px;height:10px;background:#03998c;-webkit-animation: spring 3s infinite ease-in-out;animation: spring 3s infinite ease-in-out;}
|
||||
.do-ui-load.load-style-6 .dot-box i:nth-child(2) {-webkit-animation-delay:.2s;animation-delay:.1s;}
|
||||
.do-ui-load.load-style-6 .dot-box i:nth-child(3) {-webkit-animation-delay:.4s;animation-delay:.2s;}
|
||||
.do-ui-load.load-style-6 .dot-box i:nth-child(4) {-webkit-animation-delay:.6s;animation-delay:.3s;}
|
||||
.do-ui-load.load-style-6 .dot-box i:nth-child(5) {-webkit-animation-delay:.8s;animation-delay:.4s;}
|
||||
|
||||
/* style 7 */
|
||||
.do-ui-load.load-style-7 .dot-box {position:absolute;display:block;width:60%;height:60%;margin:20%;}
|
||||
.do-ui-load.load-style-7 .dot-box i {position:absolute;display:block;width:60px;height:60px;-webkit-animation: circle3 2s infinite ease-in-out;animation: circle3 2s infinite ease-in-out;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
|
||||
.do-ui-load.load-style-7 .dot-box i::before {display:block;width:8px;height:8px;background:#03998c;border-radius:50%;content:""}
|
||||
.do-ui-load.load-style-7 .dot-box i:nth-child(2) {-webkit-animation-delay:.1s;animation-delay:.1s;}
|
||||
.do-ui-load.load-style-7 .dot-box i:nth-child(3) {-webkit-animation-delay:.2s;animation-delay:.2s;}
|
||||
.do-ui-load.load-style-7 .dot-box i:nth-child(4) {-webkit-animation-delay:.3s;animation-delay:.3s;}
|
||||
.do-ui-load.load-style-7 .dot-box i:nth-child(5) {-webkit-animation-delay:.4s;animation-delay:.4s;}
|
||||
|
||||
|
||||
|
||||
@-webkit-keyframes circle {
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
@keyframes circle {
|
||||
to {transform: rotate(360deg)}
|
||||
}
|
||||
@-webkit-keyframes circle2 {
|
||||
to {-webkit-transform: rotate(-360deg);}
|
||||
}
|
||||
@keyframes circle2 {
|
||||
to {transform: rotate(-360deg)}
|
||||
}
|
||||
@-webkit-keyframes circle3 {
|
||||
70%,to {-webkit-transform: rotate(405deg);}
|
||||
}
|
||||
@keyframes circle3 {
|
||||
70%,to {transform: rotate(405deg);}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadein {
|
||||
|
||||
50% {-webkit-transform: scale(1);opacity:1}
|
||||
to {-webkit-transform: scale(.5);opacity:.3}
|
||||
}
|
||||
@keyframes fadein {
|
||||
|
||||
50% {transform: scale(1);opacity:1}
|
||||
to {transform: scale(.5);opacity:.3}
|
||||
}
|
||||
|
||||
@-webkit-keyframes grid {
|
||||
|
||||
36% {-webkit-transform: scale(.1);opacity:.3}
|
||||
60% {-webkit-transform: scale(1);opacity:1}
|
||||
}
|
||||
@keyframes grid {
|
||||
|
||||
36% {transform: scale(.1);opacity:.3}
|
||||
60% {transform: scale(1);opacity:1}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bounce {
|
||||
70% {-webkit-transform: scale(1);}
|
||||
to {-webkit-transform: scale(.1);}
|
||||
}
|
||||
@keyframes bounce {
|
||||
70% {transform: scale(1);}
|
||||
to {transform: scale(.1);}
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes bounce2 {
|
||||
25% {-webkit-transform: scaleY(1.3);}
|
||||
50% {-webkit-transform: scaleY(.6);}
|
||||
}
|
||||
@keyframes bounce2 {
|
||||
25% {transform: scaleY(1.3);}
|
||||
50% {transform: scaleY(.6);}
|
||||
}
|
||||
|
||||
@-webkit-keyframes spring {
|
||||
30%,50% {-webkit-transform: translateX(200px);}
|
||||
80%,to {-webkit-transform: translateX(0);}
|
||||
}
|
||||
@keyframes spring {
|
||||
30%,50%{transform: translateX(200px);}
|
||||
80%,to {transform: translateX(0);}
|
||||
}
|
||||
|
||||
.do-ui-layer.skin-def .layer-btns {width:100%;height:40px;padding:0 5px;line-height:28px;font-size:14px;color:#454545;text-align:right;}
|
||||
.do-ui-layer.skin-def .layer-btns a {display:inline-block;width:auto;min-width:60px;height:30px;margin:0 5px;padding:0 10px;line-height:28px;border:1px solid #ddd;color:#454545;text-align:center;background:#f3f3f3;}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
|
@ -35,7 +35,7 @@ var expose = Date.now()
|
|||
//http://stackoverflow.com/questions/7290086/javascript-use-strict-and-nicks-find-global-function
|
||||
var DOC = window.document
|
||||
var head = DOC.head //HEAD元素
|
||||
head.insertAdjacentHTML("afterBegin", '<yua :skip class="yua-hide"><style id="yua-style">.yua-hide{ display: none!important } .do-rule-tips {position:absolute;display:table;z-index:10240;min-width:75px;height:30px;padding:7px 8px;line-height:16px;color:#333;background:#f9ca05;white-space:pre;} .do-rule-tips:before {position:absolute;left:5px;bottom:-8px;width:0;height:0;border:8px solid transparent;border-left:8px solid #f9ca05;content: " "}</style></yua>')
|
||||
head.insertAdjacentHTML("afterBegin", '<yua :skip class="yua-hide"><style id="yua-style">.yua-hide{ display: none!important } .do-rule-tips {position:absolute;z-index:65535;min-width:75px;height:30px;padding:7px 8px;line-height:16px;color:#333;background:#f9ca05;white-space:pre;} .do-rule-tips::before {position:absolute;left:5px;bottom:-8px;width:0;height:0;border:8px solid transparent;border-left:8px solid #f9ca05;content: " "}</style></yua>')
|
||||
var ifGroup = head.firstChild
|
||||
|
||||
function log() {
|
||||
|
|
@ -5748,6 +5748,10 @@ new function () {// jshint ignore:line
|
|||
return a
|
||||
}
|
||||
})
|
||||
//补上协议, 避免引入依赖时判断不正确
|
||||
if(/^\/\//.test(name)){
|
||||
name = location.protocol + name
|
||||
}
|
||||
var req = yua.mix({
|
||||
query: query,
|
||||
ext: ext,
|
||||
|
|
@ -5840,7 +5844,7 @@ new function () {// jshint ignore:line
|
|||
if (url) {
|
||||
if (!uniq[url]) {
|
||||
deps.push(url)
|
||||
uniq[url] = "yua" //去重
|
||||
uniq[url] = !0//去重
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
13
js/yua.js
13
js/yua.js
|
|
@ -35,7 +35,7 @@ var expose = Date.now()
|
|||
//http://stackoverflow.com/questions/7290086/javascript-use-strict-and-nicks-find-global-function
|
||||
var DOC = window.document
|
||||
var head = DOC.head //HEAD元素
|
||||
head.insertAdjacentHTML("afterBegin", '<yua :skip class="yua-hide"><style id="yua-style">.yua-hide{ display: none!important } .do-rule-tips {position:absolute;display:table;z-index:10240;min-width:75px;height:30px;padding:7px 8px;line-height:16px;color:#333;background:#f9ca05;white-space:pre;} .do-rule-tips:before {position:absolute;left:5px;bottom:-8px;width:0;height:0;border:8px solid transparent;border-left:8px solid #f9ca05;content: " "}</style></yua>')
|
||||
head.insertAdjacentHTML("afterBegin", '<yua :skip class="yua-hide"><style id="yua-style">.yua-hide{ display: none!important } .do-rule-tips {position:absolute;z-index:65535;min-width:75px;height:30px;padding:7px 8px;line-height:16px;color:#333;background:#f9ca05;white-space:pre;} .do-rule-tips::before {position:absolute;left:5px;bottom:-8px;width:0;height:0;border:8px solid transparent;border-left:8px solid #f9ca05;content: " "}</style></yua>')
|
||||
var ifGroup = head.firstChild
|
||||
|
||||
function log() {
|
||||
|
|
@ -491,7 +491,7 @@ if(!Date.prototype.format){
|
|||
yua.mix({
|
||||
rword: rword,
|
||||
subscribers: subscribers,
|
||||
version: '1.0.0-touch',
|
||||
version: '1.0.0',
|
||||
ui: {},
|
||||
log: log,
|
||||
slice: function (nodes, start, end) {
|
||||
|
|
@ -5748,6 +5748,10 @@ new function () {// jshint ignore:line
|
|||
return a
|
||||
}
|
||||
})
|
||||
//补上协议, 避免引入依赖时判断不正确
|
||||
if(/^\/\//.test(name)){
|
||||
name = location.protocol + name
|
||||
}
|
||||
var req = yua.mix({
|
||||
query: query,
|
||||
ext: ext,
|
||||
|
|
@ -5802,6 +5806,7 @@ new function () {// jshint ignore:line
|
|||
var requireQueue = []
|
||||
var isUserFirstRequire = false
|
||||
innerRequire = yua.require = function (array, factory, parentUrl, defineConfig) {
|
||||
|
||||
if (!isUserFirstRequire) {
|
||||
requireQueue.push(yua.slice(arguments))
|
||||
if (arguments.length <= 2) {
|
||||
|
|
@ -5813,7 +5818,6 @@ new function () {// jshint ignore:line
|
|||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (!Array.isArray(array)) {
|
||||
yua.error("require方法的第一个参数应为数组 " + array)
|
||||
}
|
||||
|
|
@ -5837,10 +5841,11 @@ new function () {// jshint ignore:line
|
|||
}
|
||||
var req = makeRequest(name, defineConfig)
|
||||
var url = fireRequest(req) //加载资源，并返回该资源的完整地址
|
||||
|
||||
if (url) {
|
||||
if (!uniq[url]) {
|
||||
deps.push(url)
|
||||
uniq[url] = "yua" //去重
|
||||
uniq[url] = !0
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
Reference in New Issue