122 lines
3.9 KiB
JavaScript
122 lines
3.9 KiB
JavaScript
import ATransitionEffect from '/js/libs/js-ATransitionEffect.js'
|
|
|
|
|
|
export default class Dropdown extends window.AObject {
|
|
constructor() {
|
|
super();
|
|
this.transition = new ATransitionEffect();
|
|
this.isLock = false;
|
|
if (window.dropdown == null) {
|
|
this.initGlobalVar();
|
|
}
|
|
}
|
|
initGlobalVar() {
|
|
var f = function (ev) {
|
|
this.document_onClick.call(this, ev);
|
|
}.bind(this);
|
|
document.body.addEventListener("mousedown", f, false);
|
|
window.dropdown = {
|
|
"numObj": 1,
|
|
"callback": f,
|
|
"currentE": null
|
|
}
|
|
|
|
|
|
}
|
|
bindDropDowns(a, p = null) {
|
|
if (a instanceof NodeList) {
|
|
Array.from(a).forEach(e => {
|
|
this.bindDropDown(e, p);
|
|
});
|
|
} else {
|
|
this.bindDropDown(a, p);
|
|
}
|
|
|
|
}
|
|
unBindDropDowns(p) {
|
|
|
|
}
|
|
bindDropDown(e, p = null) {
|
|
var f = function (ev) {
|
|
this.onClick.call(this, ev);
|
|
}.bind(this);
|
|
e.addEventListener("click", f, false);
|
|
this.stackEvent.push({ "event": "click", "callback": f, "element": e, "parent": p });
|
|
}
|
|
document_onClick(e) {
|
|
this.checkRelease(e);
|
|
}
|
|
onClick(e) {
|
|
if (this.isLock) {
|
|
return;
|
|
}
|
|
var t1 = e.currentTarget;
|
|
var p = t1.closest('[data-dropdown]');
|
|
var p1 = e.target.closest(".noopen");
|
|
if (window.dropdown.currentE != null && (e.target.closest(".item") != null || p1 == null)) {
|
|
var tmp = window.dropdown.currentE.con;
|
|
if (window.dropdown.currentE.item.hasAttribute("stopCollapsed")) {
|
|
window.dropdown.currentE.item.removeAttribute("stopCollapsed")
|
|
window.dropdown.currentE = null;
|
|
} else if (e.target.closest(".nonhide") != null) {
|
|
return;
|
|
} else {
|
|
|
|
this.closeDropdown();
|
|
}
|
|
if (tmp.isEqualNode(p)) return;
|
|
}
|
|
if (p1 != null) {
|
|
return;
|
|
}
|
|
p.classList.add("active");
|
|
this.trigger("open", t1);
|
|
var maxHeight = null;
|
|
var t = p.getElementsByClassName("sub-item")[0];
|
|
if (t1.hasAttribute("data-width")) {
|
|
if (t1.getAttribute("data-width") == "auto") {
|
|
t.style.width = t1.clientWidth + "px";
|
|
} else {
|
|
t.style.width = t1.getAttribute("data-width");
|
|
}
|
|
}
|
|
if (t1.hasAttribute("data-zIndex")) {
|
|
t.style.zIndex = t1.getAttribute("data-zIndex");
|
|
}
|
|
if (t1.hasAttribute("data-max-height")) {
|
|
maxHeight = t1.getAttribute("data-max-height");
|
|
t.style.maxHeight = maxHeight + "px";
|
|
}
|
|
window.dropdown.currentE = { "con": p, "sub": t, "item": e.currentTarget, "pClass": this, "maxHeight": maxHeight };
|
|
this.transition.expandEffect(t, function () {
|
|
this.trigger("opened", t1);
|
|
}.bind(this), maxHeight);
|
|
}
|
|
|
|
checkRelease(e) {
|
|
if (e.target.closest(".nonhide") != null) {
|
|
return;
|
|
} else if (e.target.closest(".scrollbar-track") != null) {
|
|
return;
|
|
} else if ((e.target.getAttribute("data-dropdown") == null && e.target.closest("[data-dropdown]") == null) || e.target.closest(".sub-item.show") != null) {
|
|
this.checkCloseDropdown();
|
|
}
|
|
}
|
|
closeDropdown() {
|
|
var tm = window.dropdown.currentE;
|
|
tm.con.classList.remove("active");
|
|
tm.pClass.trigger("close", tm);
|
|
this.transition.collapsedEffect(tm.sub, function () {
|
|
tm.pClass.trigger("closed", tm);
|
|
}, tm.maxHeight);
|
|
window.dropdown.currentE = null;
|
|
}
|
|
checkCloseDropdown() {
|
|
if (window.dropdown.currentE != null) {
|
|
if (!window.dropdown.currentE.item.hasAttribute("stopCollapsed")) {
|
|
this.closeDropdown();
|
|
}
|
|
}
|
|
}
|
|
}
|