class PopupComponent { constructor() { this.btnGroupEl = document.getElementsByClassName("btn-group")[0]; this.popupEl = document.getElementsByClassName("popup")[0]; this.popupBGEl = this.popupEl.querySelector(".popup-bg"); this.popupTitleEl = this.popupEl.querySelector(".popup-wrapper .title"); this.popupBodyEl = this.popupEl.querySelector(".popup-wrapper .body"); this.cancelBtnEl = this.popupEl.querySelector(".popup-wrapper .btn.cancel"); this.confirmBtnEl = this.popupEl.querySelector(".popup-wrapper .btn.confirm"); this.popupElClasslist = this.popupEl.classList; this.LEGVALS = ["top", "right", "bottom", "left"]; this.detaultPosition = ""; this.position = ""; this.SHOWCLASSNAME = "show"; this.HIDECLASSNAME = "hide"; this.HIDDENCLASSNAME = "hidden"; } /** * 给弹窗的标题和主体添加内容 * @param Object contentObj 传递的对象 */ setContentForPopup(contentObj = {'title':'title', 'body': 'body'}) { try{ if (!TB.isObject(contentObj)) { throw new Error("The param of setContentForPopup function error!"); } let value; for (let prop in contentObj) { if (!contentObj.hasOwnProperty(prop)) { continue; } if (prop === 'title') { value = contentObj[prop]; this.popupTitleEl.innerText = value; } if (prop === 'body') { value = contentObj[prop]; this.popupBodyEl.innerText = value; } } } catch (e) { console.log("Popup element is not exist!"); console.error(e); } } /** * 删除弹窗的类名 * @return void */ deletePopupPreviousClassName() { if (this.HIDDENCLASSNAME && KB.checkType.isString(this.HIDDENCLASSNAME)) { this.popupElClasslist.remove(this.HIDDENCLASSNAME); } if (this.detaultPosition && KB.checkType.isString(this.detaultPosition)) { this.popupElClasslist.remove(this.detaultPosition); } this.detaultPosition = this.position; } /** * 弹窗隐藏 * @return void */ popupHide() { if (this.popupElClasslist.contains(this.SHOWCLASSNAME)) { this.popupElClasslist.remove(this.SHOWCLASSNAME); this.popupElClasslist.add(this.HIDECLASSNAME); } } /** * 弹窗显示 * @return void */ popupShow() { this.deletePopupPreviousClassName(); if (this.popupElClasslist.contains(this.HIDECLASSNAME)) { this.popupElClasslist.remove(this.HIDECLASSNAME); this.popupElClasslist.add(this.SHOWCLASSNAME); this.popupElClasslist.add(this.position); } this.setContentForPopup({ 'title': this.position + ' title', 'body': this.position + ' body', }); } /** * 按钮容器的点击事件 * @param Object e 点击的事件event * @return void */ btnGroupClickEvent(e) { let btnEl = e.target || e.srcElement; if (!TB.isElement(btnEl)) { throw new Error("Get btn element error!"); } this.position = btnEl.getAttribute("data-position"); if (!TB.isString(this.position) || (this.LEGVALS.indexOf(this.position) < 0)) { throw new Error("Can not get position value from btn element!"); } this.popupShow(); } /** * 给DOM元素添加点击事件 * @param Object elem 添加点击事件的dom元素 * @param Function fn 触发事件调用的回调函数 */ addClickEventFormElem(elem, fn) { TB.addHandler.call(this, elem, 'click', fn, false); } /** * 初始化函数 * @return void */ init() { this.addClickEventFormElem(this.btnGroupEl, this.btnGroupClickEvent); this.addClickEventFormElem(this.cancelBtnEl, this.popupHide); this.addClickEventFormElem(this.confirmBtnEl, this.popupHide); } } let popupComponent = new PopupComponent(); popupComponent.init();
TB.addHandler：