优化layer的一波样式,微调layer默认icon类型

js/lib/layer/Readme.md

@@ -1,13 +0,0 @@
-# layer弹窗组件
-> 以知名弹窗插件layer为参考,基于yua框架进行移植的一个弹窗组件。
-
-## 常用方法
-> layer组件本身提供了几种常见的弹窗类型。
-
-### layer.alert(msg[,conf])
-+ msg `<String>`
-+ conf `<Object>` | `<Function>` 可选
-
-> 该方法为弹出一个普通的`alert`类型的弹窗, 功能类似于原生的`alert`方法,方法返回该弹窗的唯一ID, 该ID用于在其他地方对该弹窗的控制(如关闭)。
-> `msg`为要显示的提示文本, 支持html文本。
-> `conf`为可行参数, 可以一个对象或一个方法, 如果一个方法,则自动为确定和关闭按钮的回调。

js/lib/layer/Release.md

@@ -1,3 +1,9 @@
+v1.0.0-base / 2017-09-20
+==================
+    + 统一字体图标
+    + 精简动画类型
+    + 优化样式
+
 v0.0.4-base / 2017-04-20
 ==================
     + 优化offset的处理

js/lib/layer/base.js

@@ -34,65 +34,58 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
             fixed: false, //是否固定不可拖拽
             offset: null, //弹窗出来时的坐标, 为数组,可有4个值,依次是 上右下左
             btns: ['确定', '取消'], //弹窗的2个按钮的文字
-            yes: close, //确定按钮对应的回调
+            yes: yua.noop, //确定按钮对应的回调
-            no: close, //取消按钮对应的回调
+            no: yua.noop, //取消按钮对应的回调
             success: null //弹窗初始化完成时的回调
-        };
+        },
+        uuid = function(){
+            return 'layer-' + (++lid)
+        },
+        close = function(id){
+            if(typeof id !== 'string' && typeof id !== 'number'){
+                return yua.error('要关闭的layer实例不存在')
+            }
+            if(/^\$wrap\-/.test(id) || layerObj['$wrap-' + id]){
 
-    function uuid(){
+                try {
-        return 'layer-' + (++lid)
+                    id = (layerObj['$wrap-' + id] ? '$wrap-' : '') + id;
-    }
+                    //未显示过,忽略
+                    if(!layerObj[id].show){
+                        return
+                    }
+                    layerObj[id].parentElem.replaceChild(layerObj[id].wrap, layerDom[id][1])
+                    layerObj[id].wrap.style.display = 'none'
+                    layerObj[id].show = false
 
+                }catch(err){}
+            }else{
+                try {
+                    document.body.removeChild(layerDom[id][1])
+                    document.body.removeChild(layerDom[id][0])
+                    unique = null
+                }catch(err){}
 
-    function close(id){
+                delete layerDom[id]
-        if(typeof id !== 'string' && typeof id !== 'number'){
+                delete yua.vmodels[id]
-            return console.error(new Error('要关闭的layer实例不存在'))
+            }
-        }
+        },
-        if(/^\$wrap\-/.test(id) || layerObj['$wrap-' + id]){
+        reapeat = function(str, num){
-
+            var idx = 0,
-            try {
+                result = ''
-                id = (layerObj['$wrap-' + id] ? '$wrap-' : '') + id;
+            while(idx < num){
-                //未显示过,忽略
+                result += str
-                if(!layerObj[id].show){
+                idx++
-                    return
+            }
-                }
+            return result
-                layerObj[id].parentElem.replaceChild(layerObj[id].wrap, layerDom[id][1])
+        },
-                layerObj[id].wrap.style.display = 'none'
+        fixOffset = function (val){
-                layerObj[id].show = false
+            if(!val && val !== 0){
-
+                return 'auto'
-            }catch(err){}
+            }else{
-        }else{
+                return val
-            try {
+            }
-                document.body.removeChild(layerDom[id][1])
+        },
-                document.body.removeChild(layerDom[id][0])
+        __constructor = function(conf){
-                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()
             }
@@ -106,7 +99,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
                 }else{
                     conf = {}
                 }
-                conf.icon = 6
+                conf.icon = 5
                 conf.content = msg
                 return __layer.open(conf)
             },
@@ -119,7 +112,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
                     conf = {}
                 }
                 conf.type = 2
-                conf.icon = 8
+                conf.icon = 0
                 conf.content = msg
                 return __layer.open(conf)
             },
@@ -161,7 +154,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
             },
             tips: function(msg, elem, conf){
                 if(!(elem instanceof HTMLElement)){
-                    return console.error(new Error('tips类型必须指定一个目标容器'))
+                    return yua.error('tips类型必须指定一个目标容器')
                 }
                 if(typeof conf !== 'object'){
                     var tmp = conf
@@ -194,11 +187,13 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
                 }
                 var conf = {
                         type: 3,
-                        icon: 7,
                         prompt: '',
                         title: msg,
-                        content: '<input class="prompt-value" :duplex="prompt" />',
+                        content: '<input class="prompt-value" :class="{alert: !prompt}" :duplex="prompt" />',
                         yes: function(id){
+                            if(!yua.vmodels[id].prompt){
+                                return
+                            }
                             yescb(id, yua.vmodels[id].prompt)
                         }
                     }
@@ -242,6 +237,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
         };
     
 
+    defconf.yes = defconf.no = close
     /*type: { // 弹窗类型对应的id值
         1: 'alert',
         2: 'confirm',
@@ -300,7 +296,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
 
             layBox.innerHTML = this.getMenubar()
                 + '<div class="layer-content do-layer-cl '
-                    + (this.init.icon === 0 && 'none-icon' || '')
+                    + (this.init.icon < 0 && 'none-icon' || '')
                     + '" style="'
                     + boxcss
                     + '">'
@@ -350,7 +346,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
         },
         //获取窗口内容的图标
         getIcon: function(){
-            if(this.init.icon === 0){
+            if(this.init.icon < 0){
                 return ''
             }
             if(this.init.type < 4 || this.init.type === 5 || this.init.specialMode){
@@ -514,7 +510,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
         },
         update: function(val){
             if(!val){
-                return console.error(new Error(':layer指令格式不正确或无效属性. [' + this.name + '="' + this.expr) + '"]')
+                return yua.error(':layer指令格式不正确或无效属性. [' + this.name + '="' + this.expr + '"]')
             }
 
             var _this = this,
@@ -557,7 +553,7 @@ define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
                     tipsCont = document.createElement('div');
 
 
-                tipsBox.className = 'do-layer skin-def type-5'
+                tipsBox.className = 'do-layer skin-' + (init.skin || 'def') + ' type-5'
                 tipsBox.style.left = ol + (ew * 0.7) + 'px'
                 if(init.background){
                     tipsBox.style.background = init.background

js/lib/layer/index.html

@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-<title>Examples</title>
-<meta name="description" content="">
-<meta name="keywords" content="">
-<link href="../css/base.min.css" rel="stylesheet">
-<style type="text/css">
-    body {background:url(/123.png) no-repeat;}
-    .a {display:inline-block;min-width:80px;height:32px;margin:10px;padding:0 10px;text-decoration:none;border:1px solid #ddd;line-height:30px;}
-</style>
-</head>
-<body ms-controller="test">
-
-    <a class="a" href="javascript:;" ms-click="layer.alert('测试alert内容')">alert层</a>
-    <a class="a" href="javascript:;" ms-click="layer.confirm('测试confirm内容')">confirm层</a>
-    <a class="a" href="javascript:;" ms-click="layer.msg('测试msg内容')">msg层</a>
-    <a class="a" href="javascript:;" ms-click="layer.prompt('测试prompt内容')">prompt层</a>
-    <a class="a" href="javascript:;" ms-click="layer.loading('测试loading内容')">loading层</a>
-
-
-
-
-
-
-
-<script src="../avalon.modern.min.js"></script>
-
-<script type="text/javascript">
-    
-require(['layer/layer.js'], function(lay){
-
-    avalon.define({
-        $id: 'test'
-    })
-
-    layer.alert('测试loading内容blabla')
-    layer.confirm('测试loading内容blabla测试loading内容blabla测试loading内容blabla', {offset: {x: '550px', y: '690px'}})
-    layer.open({content: '测试loading内容blabla', offset: {x: '350px', y: '390px'}})
-
-    avalon.scan()
-
-})
-
-</script>
-    
-</body>
-</html>

js/lib/layer/skin/def.scss

@@ -16,6 +16,7 @@
     /* 默认皮肤 */
     &.skin-def {color:#666;font-size:14px;box-shadow:0 0 10px rgba(0,0,0,.3);
         
+        .icon-0::before {content:"\e62e";color:nth($cr, 1);} // question
         .icon-1::before {content:"\e610";color:nth($cg, 1);} // get
         .icon-2::before {content:"\e6f8";color:nth($cb, 1);} // happy
         .icon-3::before {content:"\e6fd";color:nth($co, 1);} // sad
@@ -28,7 +29,7 @@
 
 
         /* 弹层标题栏 */
-        .layer-title {width:100%;height:40px;padding:0 8px;line-height:40px;background:nth($cp, 1);font-size:14px;color:nth($cgr, 1);}
+        .layer-title {width:100%;height:40px;padding:0 8px;line-height:40px;background:nth($cp, 2);font-size:14px;color:nth($cgr, 1);}
 
         .action-min,
         .action-close {position:absolute;display:block;top:10px;width:20px;height:20px;line-height:20px;border:0;text-align:center;cursor:pointer;color:nth($cgr, 2);
@@ -48,7 +49,11 @@
             .msg-icon {position:absolute;left:10px;top:10px;width:50px;height:auto;line-height:40px;font-size:35px;text-align:center;}
             .detail {width:auto;height:100%;margin:auto auto auto 60px;padding:5px 15px;word-break:break-all;word-wrap: break-word;
 
-                .prompt-value {width: 230px;height: 30px;padding: 0 8px;border: 1px solid #ddd;border-radius: 3px;}
+                .prompt-value {width: 230px;height: 30px;padding: 0 8px;border: 1px solid #ddd;border-radius: 3px;
+
+                    &.alert {border-color:nth($cr, 1)}
+                    &:focus {border-color:nth($cg, 1)}
+                }
                 .msg-box {line-height:30px;}
             }
 
@@ -57,9 +62,13 @@
 
 
         /* 弹层按钮部分 */
-        .layer-btns {width:100%;height:40px;padding:0 5px;line-height:28px;font-size:14px;color:#454545;text-align:right;
+        .layer-btns {width:100%;height:40px;padding:0 5px;line-height:30px;font-size:14px;color:#454545;text-align:right;
 
-            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;}
+            a {display:inline-block;width:auto;min-width:60px;height:30px;margin:0 5px;padding:0 10px;color:nth($cgr, 1);text-align:center;background:nth($cp, 1);
+                
+                &:hover {background:nth($cp, 2)}
+                &:active {background:nth($cp, 3)}
+            }
         }
 
     }