Merge remote-tracking branch 'origin/feature/modal' into feature/modal

# Conflicts:
#	apps/example/views/action/index.hbs
#	public/js/common/modal.js
#	public/js/common/overlay.js
#	public/js/example/home.page.js
#	public/scss/common/_modal.css
#	public/scss/common/_overlay.css

 <h1>公有样式示例</h1>
 
 <h2>color</h2>
-统一色号(css 中使用统一变量)<br>
+统一色号(css 中使用统一变量)
 
-黑色: $black; <span class="example color black"></span><br>
-白色: $white; <span class="example color white"></span><br>
-红色: $red; <span class="example color red"></span><br>
-绿色: $green; <span class="example color green"></span><br>
-灰色: $grey; <span class="example color grey"></span><br>
-蓝色: $blue; <span class="example color blue"></span><br>
+主色调：
+底色:
+红色:
 
 <h2>icon</h2>
-iconfont 新建项目，使用 class 控制图标样式，不要用 unicode<br>
-
-<span class="icon icon-bag"></span>
-<span class="icon icon-check"></span>
-<span class="icon icon-close"></span>
-<span class="icon icon-left"></span>
-<span class="icon icon-right"></span>
-<span class="icon icon-search"></span>
-<span class="icon icon-down"></span>
-<span class="icon icon-up"></span>
-<span class="icon icon-love"></span>
-<span class="icon icon-delete"></span>
-
+iconfont 新建项目，使用 class 控制图标样式，不要用 unicode
 
 <h2>button</h2>
-三种尺寸，圆角直角，实心空心<br>
-
-<button class="button">空心</button>
-<button class="button button-solid">实心</button>
-<hr>
-<button class="button button-round">圆角</button>
-<button class="button button-round button-solid">圆角，实心</button>
-<hr>
-<button class="button button-large">大</button>
-<hr>
-<button class="button button-small">小</button>
-<hr>
-<button class="button button-large button-round button-solid">大，圆角，实心</button>
+三种尺寸，圆角直角，实心空心，选中未选中
 
 <h2>badge</h2>
 一个数字的时候是圆形，数字长的时候圆角长方形，类似跑道
@@ -58,19 +31,14 @@ iconfont 新建项目，使用 class 控制图标样式，不要用 unicode<br>
 支持 一个按钮，两个按钮，多个按钮
 每个按钮支持自定义事件
 <p>
-  <button href="javascript:void(0);" id="modal-overlay">显示覆盖层</button>
-  <button href="javascript:void(0);" id="modal-alert">Alert</button>
-  <button href="javascript:void(0);" id="modal-confirm">Confirm</button>
-  <button href="javascript:void(0);" id="modal-custom">自定义</button>
+    <a href="javascript:void(0);" id="modal-overlay">显示覆盖层</a>
 </p>
 
+<h2>Handlebars Template</h2>
+<p>Hello,<span id="hbs-placeholder"></span>!</p>
 
-<h2>Vue 示例(大展示，使用新路由)</h2>
+<h2>Vue 示例</h2>
 
 <div id="app">
-  <app></app>
-</div>
-
-<h2>Handlebars 示例</h2>
-<div id="hbs-placeholder">
+    <app></app>
 </div>

 /**
  * Modal 模态组件
  *
- * @author: Aiden Xu<aiden.xu@yoho.cn>
- * @date: 2016/07/18
+ * @author: aiden.xu<aiden.xu@yoho.cn>
+ * @date: 2016/5/6
  */
 
 'use strict';
 
-const template = require('./modal.hbs');
+const Overlay = require('./overlay');
 
 class Modal {
     /**
@@ -18,106 +18,31 @@ class Modal {
     constructor(opts) {
         // 默认参数
         this.defaults = {
-            isModal: true,
-            template: template,
-            title: '',
-            text: '',
-            buttons: [
-                {
-                    text: '好',
-                    handler: () => {
-                        this.hide();
-                    }
-                }
-            ]
+            template: ''
         };
 
         // 初始化参数
         this.settings = Object.assign({}, this.defaults, opts);
-        const tpl = this.settings.template({
-            title: this.settings.title,
-            text: this.settings.text,
-            buttons: this.settings.buttons
-        });
 
-        // 生成模版
-        this.elem = $(tpl);
-
-        const buttons = this.elem.find('.button-group').children();
-        const self = this;
-
-        this.elem.appendTo('body');
-
-        // 事件绑定
-        buttons.each(function(index) {
-            $(this).click(self.settings.buttons[index].handler.bind(self));
-        });
     }
 
     show() {
-        // 显示覆盖层
-        this.overlay = $.overlay({
-            clickToClose: false
-        });
-        this.overlay.show();
 
-        // 居中显示
-        this.elem.css({
-            left: ($(window).width() - this.elem.outerWidth()) / 2,
-            top: ($(window).height() - this.elem.outerHeight()) / 2 + $(window).scrollTop()
-        }).show().addClass('animation-target');
     }
 
     hide() {
-        this.overlay.hide();
-        this.elem.hide().remove();
+
     }
+
 }
 
 (function($) {
-    $.modal = function(opts) {
-        return new Modal(opts);
-    };
-
-    $.extend($.modal, {
-        alert: (text, title)=> {
-            const modal = $.modal({
-                text: text,
-                title: title
-            });
-
-            modal.show();
-        }
-    });
-
-    $.extend($.modal, {
-        alert: (text, title)=> {
-            const modal = $.modal({
-                text: text,
-                title: title
-            });
+    $.extend(Overlay.prototype, {
+        show: function() {
 
-            modal.show();
         },
-        confirm: (text, title, callback)=> {
-            const modal = $.modal({
-                text: text,
-                title: title,
-                buttons: [
-                    {
-                        text: '取消',
-                        handler: function() {
-                            this.hide();
-                        }
-                    },
-                    {
-                        text: '好',
-                        handler: callback || $.noop
-                    }
-                ]
-            });
+        hide: function() {
 
-            modal.show();
         }
     });
 }(jQuery));

@@ -42,11 +42,11 @@ class Overlay {
         this.elem.appendTo('body');
 
         // 点击关闭
-        this.elem.click(()=> {
-            if (this.settings.clickToClose) {
+        if (this.settings.clickToClose) {
+            this.elem.click(()=> {
                 this.hide();
-            }
-        });
+            });
+        }
 
         if (this.settings.disableScrolling) {
             // 覆盖层出现时阻止滚动
@@ -93,7 +93,6 @@ class Overlay {
             });
             this._clearStylesClasses();
             this.isVisible = false;
-            this.elem.remove();
         };
 
         this.elem[0].addEventListener('webkitTransitionEnd', listener);
@@ -108,8 +107,13 @@ class Overlay {
 }
 
 ((function($) {
+    let inst = null;
+
     $.overlay = opts => {
-        return new Overlay(opts);
+        if (!inst) {
+            inst = new Overlay(opts);
+        }
+        return inst;
     };
 })(jQuery));
 

+var tpl = require('./hello.hbs');
+
 var Vue = require('yoho-vue');
 
 var app = require('example/home.vue');
-var tpl = require('../../hbs/example/hello.hbs');
 
 var vm = new Vue({
     el: '#app',
@@ -24,7 +25,6 @@ var cookie = require('yoho-cookie');
 
 console.log(cookie.all());
 
-// ES6 test
 var test = {
     data() {
         return {
@@ -41,50 +41,9 @@ $('#hbs-placeholder').html(tpl({
 
 
 var overlay = require('../common/overlay');
-var modal = require('../common/modal');
-var customModal = require('../../hbs/example/custom-modal.hbs');
-
 $('#modal-overlay').click(()=> {
     var overlay = $.overlay();
     overlay.show();
 });
 
-$('#modal-alert').click(()=> {
-    $.modal.alert('自毁系统已经开启，请马上撤离！', '警告');
-});
-
-$('#modal-confirm').click(()=> {
-    $.modal.confirm('是否开启自毁系统？', '', function() {
-        this.hide();
-        alert('BOOM!');
-    });
-});
-
-// 自定义模态
-$('#modal-custom').click(()=> {
-    const modal = $.modal({
-        title: '自定义模态对话框',
-        text: '你可以自定义哦！',
-        template: customModal,
-        buttons: [
-            {
-                text: '香蕉',
-                handler: function() {
-                    this.hide();
-                    alert('香蕉');
-                }
-            },
-            {
-                text: '苹果',
-                handler: function() {
-                    this.hide();
-                    alert('苹果');
-                }
-            }
-        ]
-    });
-    modal.show();
-});
-
-
 /* eslint-enable */

 @import "overlay";
-
-.modal {
-    position: absolute;
-    margin: 0 auto;
-    background: #fcfcfc;
-    width: 512px;
-    z-index: 1001;
-
-    h2 {
-        font-size: 32px;
-        text-align: center;
-        margin-top: 50px;
-        margin-bottom: 0;
-    }
-
-    p {
-        font-size: 21px;
-        text-align: center;
-        margin-top: 20px;
-        margin-bottom: 48px;
-    }
-
-    hr {
-        border: none;
-        border-top: 1px solid #e0e0e0;
-        margin: 0;
-    }
-
-    .button-group {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-around;
-        align-items: stretch;
-        height: 88px;
-
-        a.modal-button {
-            flex: 1;
-            align-self: center;
-            text-align: center;
-            color: $blue;
-            font-size: 30px;
-        }
-    }
-}
-
-.animation-target {
-    -webkit-animation: animation 1000ms linear both;
-    animation: animation 1000ms linear both;
-}
-

@@ -5,7 +5,6 @@
     left: 0;
     top: 0;
     width: 100%;
-    z-index: 1000;
 }
 
 .overlay-fade-in {