first commit

历届学生/fontendsix/项目练习/上课项目/dialog/js/dialog.js

@@ -0,0 +1,160 @@
+
+// 语法糖
+class Dialog {
+
+    // 默认参数
+    defaultOption = {
+        title: '标题1',
+        message: '内容1',
+        showConfirmButton: false,
+        confirmButtonText: '确认',
+        confirmButtonColor: '#ee0a24',
+
+        showCancelButton: true,
+        cancelButtonText: '取消',
+        cancelButtonColor: 'black',
+
+        className: '',
+        width: 320,
+
+        overlay: true,
+        closeOnPopstate: true,  // 是否在页面回退时自动关闭
+        closeOnClickOverlay: true, // 是否在点击遮罩层后关闭弹窗
+        lockScroll: false,
+        allowHtml: true,
+        confirm: () => { }, // 确认按钮的回调
+        cancel: () => { }, // 点击取消按钮时触发
+        oncancel: () => { },  // 打开弹出
+        onconfirm: () => { }  // 关闭弹窗
+    }
+
+    // 构造函数
+    constructor(option) {
+
+        if (option.hasOwnProperty("title") && option.hasOwnProperty("message")) {
+            this.defaultOption.title = option.title || this.defaultOption.title
+            this.defaultOption.message = option.message || this.defaultOption.message
+
+            option.hasOwnProperty("showConfirmButton") ? this.defaultOption.showConfirmButton = option.showConfirmButton : ''
+            option.hasOwnProperty("showCancelButton") ? this.defaultOption.showCancelButton = option.showCancelButton : ''
+            option.hasOwnProperty("overlay") ? this.defaultOption.overlay = option.overlay : ''
+            option.hasOwnProperty("closeOnPopstate") ? this.defaultOption.closeOnPopstate = option.closeOnPopstate : ''
+            option.hasOwnProperty("closeOnClickOverlay") ? this.defaultOption.closeOnClickOverlay = option.closeOnClickOverlay : ''
+            option.hasOwnProperty("lockScroll") ? this.defaultOption.lockScroll = option.lockScroll : ''
+            option.hasOwnProperty("allowHtml") ? this.defaultOption.allowHtml = option.allowHtml : ''
+
+
+            this.defaultOption.confirmButtonText = option.confirmButtonText || this.defaultOption.confirmButtonText
+            this.defaultOption.cancelButtonText = option.cancelButtonText || this.defaultOption.cancelButtonText
+
+
+            this.defaultOption.className = option.className || this.defaultOption.className
+            this.defaultOption.width = option.width || this.defaultOption.width
+            this.defaultOption.confirmButtonColor = option.confirmButtonColor || this.defaultOption.confirmButtonColor
+            this.defaultOption.cancelButtonColor = option.cancelButtonColor || this.defaultOption.cancelButtonColor
+
+            this.defaultOption.confirm = option.confirm || this.defaultOption.confirm
+            this.defaultOption.cancel = option.cancel || this.defaultOption.cancel
+            this.defaultOption.open = option.open || this.defaultOption.open
+            this.defaultOption.close = option.close || this.defaultOption.close
+
+        } else {
+            throw new Error("抱歉，缺少必填的title，message参数，请传入！")
+        }
+    }
+
+    initHTML() {
+        $("body").insertAdjacentHTML("beforeend", `
+            <div class="bmy_dialog ${this.defaultOption.className}">
+                <div class="bmy_dialog_content" style="width:${this.defaultOption.width}px">
+                    <div class="bmy_dialog_title">${this.defaultOption.title}</div>
+                    <div class="bmy_dialog_message"></div>
+                    <div class="bmy_dialog_button">
+                        ${this.defaultOption.showCancelButton
+                            ? `<div style="color:${this.defaultOption.cancelButtonColor}" class="button bmy_dialog_cancel">${this.defaultOption.cancelButtonText}</div>`
+                            : ''
+                        }
+                        ${this.defaultOption.showConfirmButton
+                            ? `<div style="color:${this.defaultOption.confirmButtonColor}" class="button bmy_dialog_confirm">${this.defaultOption.confirmButtonText}</div>`
+                            : ''
+                        }
+                    </div>
+                </div>
+            </div>`);
+
+            this.initConfig();
+    }
+
+    initConfig() {
+        // 是否监听页面返回
+        if (this.defaultOption.closeOnPopstate) {
+            window.addEventListener("popstate", (e) => { 
+                this.close();
+            }, false);
+        }
+
+        // 是否显示背景层
+        this.defaultOption.overlay
+        ? ''
+        : $(".bmy_dialog ").style.backgroundColor = "rgba(0, 0, 0, 0)"
+        
+        // message 是否支持渲染html
+        this.defaultOption.allowHtml
+        ? $(".bmy_dialog_message").innerHTML = this.defaultOption.message
+        : $(".bmy_dialog_message").innerText = this.defaultOption.message
+        
+
+        // 是否锁住背景层
+        this.defaultOption.lockScroll
+        ? $("body").style.overflow = "hidden"
+        : $("body").style.overflow = "auto"
+
+        $(".bmy_dialog_cancel").onclick = (e) => {
+            e.stopPropagation()
+            this.close();
+        }
+
+        $(".bmy_dialog_confirm").onclick = (e) => {
+            e.stopPropagation()
+            this.defaultOption.confirm()
+            this.defaultOption.onconfirm()
+            this.close();
+        }
+
+        if (this.defaultOption.closeOnClickOverlay) {
+            $(".bmy_dialog").onclick = () => {
+               
+                this.close();
+            }
+        }
+        
+    }
+
+    
+    open () {
+        this.initHTML()
+    }
+    
+    close () {
+        $("body").removeChild($(".bmy_dialog"))
+        this.defaultOption.cancel()
+        this.defaultOption.oncancel()
+    }
+
+
+    oncancel(callback) {
+        this.defaultOption.oncancel = callback
+    }
+
+    onconfirm(callback) {
+        this.defaultOption.onconfirm = callback
+    }
+}
+
+function open () {
+    
+}
+
+function $(className) {
+    return document.querySelector(className)
+}