ace-component
Version:
ace-components for ewms
568 lines (559 loc) • 28.8 kB
JavaScript
import * as jQuery from 'jquery';
var win = {};
(function (t, e) {
var i = {
exports: {}
};
e(i, jQuery), t.dropdownSelect = i.exports
// }
}(win, function (t, e) {
"use strict";
function i(t) {
return t && t.__esModule ? t : {
default: t
}
}
function n(t, e) {
var i = {};
for (var n in t) e.indexOf(n) >= 0 || Object.prototype.hasOwnProperty.call(t, n) && (i[n] = t[n]);
return i
}
function a(t, e, i) {
return e in t ? Object.defineProperty(t, e, {
value: i,
enumerable: !0,
configurable: !0,
writable: !0
}) : t[e] = i, t
}
function o(t) {
if (Array.isArray(t)) {
for (var e = 0, i = Array(t.length); e < t.length; e++) i[e] = t[e];
return i
}
return Array.from(t)
}
function s(t, e) {
if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function")
}
function l(t, e) {
var i = [];
(0, c.default)(t).each(function () {
var t = (0, c.default)(this).data("dropdownSelect_instance");
t || (t = new u(this, e), (0, c.default)(this).data("dropdownSelect_instance", t)), i.push(t)
});
var n = 1 === i.length ? i[0] : i;
return n
}
var c = i(e),
r = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (t) {
return typeof t
} : function (t) {
return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t
},
d = Object.assign || function (t) {
for (var e = 1; e < arguments.length; e++) {
var i = arguments[e];
for (var n in i) Object.prototype.hasOwnProperty.call(i, n) && (t[n] = i[n])
}
return t
},
h = function () {
function t(t, e) {
for (var i = 0; i < e.length; i++) {
var n = e[i];
n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), Object.defineProperty(t, n.key, n)
}
}
return function (e, i, n) {
return i && t(e.prototype, i), n && t(e, n), e
}
}(),
u = function () {
function t(e) {
var i = this,
n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {};
if (s(this, t), this.$container = (0, c.default)(e), this.$container.length) {
this.defaultConfig = {
data: [],
htmlAttr: {},
triggerText: "点击下拉选择",
noDataText: "按Enter键搜索",
searchText: "请输入关键字搜索",
notFoundText: "无匹配记录",
replaceContainer: !1,
pageSize: 10,
visCount: 5,
triggerIcon: "bars",
width: 200,
dropdownWidth: null,
autoDropup: !0,
multiple: !1,
disabled: !1,
ajaxUrl: "",
ajaxKeywordName: "keyword",
ajax: {
type: "post",
dataType: "json"
},
afterFetch: c.default.noop,
enterAlwaysFetch: !1,
optionTemplate: function (t, e) {
return t.label
},
showTextTemplate: function (t) {
return t.label
},
afterSelect: c.default.noop,
beforeShowDropdown: c.default.noop,
afterShowDropdown: c.default.noop,
beforeHideDropdown: c.default.noop,
afterHideDropdown: c.default.noop,
onQuery: c.default.noop,
onInit: c.default.noop,
onOptionClick: c.default.noop,
onPageChange: c.default.noop,
dropdownHeader: null,
dropdownFooter: null
}, this.config = c.default.extend(!0, {}, this.defaultConfig, n);
try {
this.config.ajaxUrl && !this.config.ajax.url && (this.config.ajax.url = this.config.ajaxUrl)
} catch (t) {}
if (this.config.ajax.url && (this.config.notFoundText += "（按Enter键搜索）"), this.defaultData = [], "SELECT" === this.$container[0].tagName && ! function () {
i.config.disabled = !!i.$container.prop("disabled") || i.config.disabled, i.config.multiple = !!i.$container.prop("multiple") || i.config.multiple, i.isSelect = !0;
var t = [];
c.default.map(i.$container.find("option"), function (e, n) {
var a = {
label: (0, c.default)(e).text(),
value: (0, c.default)(e).val(),
_key: n
};
t.push(a), (0, c.default)(e).attr("selected") && i.defaultData.push(a)
}), i.config.data = [].concat(t, o(i.config.data))
}(), this.value = this.config.multiple ? [] : {}, !this.$container.length) throw new Error('"' + e + '" not found.');
this._init()
}
}
return h(t, [{
key: "_init",
value: function (t) {
var e = this;
this.allData = this.filtedData = this.showData = this.config.data, c.default.each(this.allData, function (t) {
e.allData[t]._key = t
}), this._initSelect(t), this._initDefaultData(), this._initEvent(), this.config.disabled && this.setDisabled(), c.default.isFunction(this.config.onInit) && this.config.onInit.call(this, this.getValue())
}
}, {
key: "_initSelect",
value: function (t) {
var e = this;
this.$select = (0, c.default)(this._getWrap()), this.$trigger = this.$select.find(".select__triggerbar"), this.$clean = this.$select.find(".select__triggerbar .clean"), this.$searchBar = this.$select.find(".select__searchbar"), this.$search = this.$select.find(".select__searchbar input"), this.$custom = this.$select.find(".select__custom-result"), this.$dropdown = this.$select.find(".select__dropdown"), this.$result = this.$select.find(".select__result"), this.$options = this.$select.find(".select__options"), this.keyword = "", this.$trigger.data("dropdownSelect", !0), this.config.multiple || (this.$select.attr(this.config.htmlAttr), this.$nowVal = this.$select.find(".select__triggerbar input"), this.$nowVal.on("change", function () {
e.value = e.$nowVal.val()
})), this.config.width && this.$select.width(this.config.width), this.config.dropdownWidth && this.dropdown.width(this.config.dropdownWidth), this.config.pageSize > 0 && (this.curPage = 1, this.pageTotal = this.config.pageSize > 0 ? Math.max(Math.ceil(this.filtedData.length / this.config.pageSize), 1) : 1, this.$pager = (0, c.default)(this._getPagerHtml()), this.$pagePrev = this.$pager.find(".select__pagelink-prev"), this.$pageNext = this.$pager.find(".select__pagelink-next"), this.$dropdown.append(this.$pager)), this.config.dropdownHeader && this.$dropdown.prepend(this.config.dropdownHeader), this.config.dropdownFooter && this.$dropdown.append(this.config.dropdownFooter), this._renderOptions(), this.isSelect ? this.$container.hide().after(this.$select) : this.config.replaceContainer ? this.$container.replaceWith(this.$select) : this.$container.append(this.$select), t && setTimeout(function () {
return e.showDropdown(!0)
})
}
}, {
key: "_initDefaultData",
value: function () {
var t = this;
c.default.map(this.defaultData, function (e) {
t._addValue(e, e._key)
}), this._renderDropdownChecked()
}
}, {
key: "_getWrap",
value: function () {
var t = this.allData.length ? this.config.searchText : this.config.noDataText,
e = (0, c.default)('<div class="select__wrap" />'),
i = (0, c.default)('<div class="select__dropdown">\n <div class="select__dropdown-inner">\n <div class="select__searchbar">\n <div class="select__searchbar-inner">\n <span><i class="fa fa-search" /></span>\n <input type="text" placeholder="' + t + '" />\n </div>\n </div>\n <div class="select__custom-result" style="display:none">\n <span class="clean"><i class="fa fa-times"></i></span>\n <span class="info"><span class="txt"></span><span class="count">-/-</span></span>\n </div>\n <div class="select__result">\n <ul class="select__options ' + (this.config.multiple ? "select__options-multiple" : "") + '"></ul>\n </div>\n </div>\n </div>');
return e.append(this._getTriggerBarHtml(), i), e
}
}, {
key: "_getTriggerBarHtml",
value: function () {
return this.config.multiple ? '<div class="select__triggerbar select__triggerbar-multiple">\n <div class="select__value-multiple">\n <div class="select__value-placeholder">' + this.config.triggerText + '</div>\n <ul></ul>\n </div>\n <span class="select__value-icon"><i class="fa fa-fw fa-' + this.config.triggerIcon + '" /></span>\n </div>' : '<div class="select__triggerbar select__triggerbar-single">\n <input class="select__value-single" type="text" placeholder="' + this.config.triggerText + '" readonly />\n <span class="clean"><i class="fa fa-fw fa-times" /></span>\n <span class="select__value-icon"><i class="fa fa-fw fa-' + this.config.triggerIcon + '" /></span>\n </div>'
}
}, {
key: "_getPagerHtml",
value: function () {
return '<div class="select__page">\n <span class="select__pagelink select__pagelink-prev"></span>\n <span class="page-num">\n <span class="cur">' + this.curPage + '</span>\n <span class="spe">/</span>\n <span class="total">' + this.pageTotal + '</span>\n </span>\n <span class="select__pagelink select__pagelink-next"></span>\n </div>'
}
}, {
key: "_initEvent",
value: function () {
var t = this,
e = this;
this.$dropdown.on("click", function (t) {
t.stopPropagation()
}), this.$trigger.on("click", function () {
(0, c.default)(window).trigger("click.hideDropDown"), t.toggleDropdown()
}), e.config.multiple ? (this.$options.on("click", ">li:not(.select__option-notfound)", function () {
(0, c.default)(this).addClass("select__option-active").siblings().removeClass("select__option-active"), (0, c.default)(this).hasClass("select__option-checked") ? e._unchoseActiveOption((0, c.default)(this)) : e._choseActiveOption(), c.default.isFunction(e.config.onOptionClick) && e.config.onOptionClick.call(e, e.getValue())
}), this.$options.on("mouseenter", ">li", function () {
(0, c.default)(this).siblings().removeClass("select__option-active")
})) : (this.$options.on("click", "li:not(.select__option-notfound)", function () {
(0, c.default)(this).addClass("select__option-active").siblings().removeClass("select__option-active"), e._choseActiveOption(), c.default.isFunction(e.config.onOptionClick) && e.config.onOptionClick.call(e, e.getValue())
}), this.$clean.on("click", function (e) {
e.stopPropagation(), t.cleanValue(), c.default.isFunction(t.config.afterSelect) && t.config.afterSelect.call(t, null), t.$trigger.removeClass("select__triggerbar-hasvalue"), t.$dropdown.hide();
// e.stopPropagation(), t.cleanValue(), c.default.isFunction(t.config.afterSelect) && t.config.afterSelect.call(t, t.getValue()), t.$trigger.removeClass("select__triggerbar-hasvalue"), t.$dropdown.hide();
})), this.$pager.on("click", ".select__pagelink-prev", function () {
t._gotoPrevPage()
}).on("click", ".select__pagelink-next", function () {
t._gotoNextPage()
}), this.$search.on("keydown", function (t) {
switch (t.keyCode) {
case 13:
t.preventDefault();
break;
case 33:
t.stopPropagation(), t.preventDefault();
break;
case 34:
t.stopPropagation(), t.preventDefault()
}
}), this.$search.on("keyup", function (t) {
switch (t.keyCode) {
case 38:
e._activePrevOptions();
break;
case 40:
e._activeNextOptions();
break;
case 13:
e._choseActiveOption();
break;
case 33:
e._gotoPrevPage();
break;
case 34:
e._gotoNextPage()
}
var i = c.default.trim((0, c.default)(this).val());
i !== e.keyword && (e.keyword = i, e._filteData(function (t) {
var i = e.config.optionTemplate(t),
n = e.keyword;
return "string" == typeof i && "string" == typeof n && (i = i.toLowerCase(), n = n.toLowerCase(), i.indexOf(n) > -1)
})), 13 === t.keyCode && e.config.ajax.url && (0 === e.filtedData.length || e.config.enterAlwaysFetch) && 0 === e.$options.find(".select__option-active").length && e.fetchData({
data: a({}, e.config.ajaxKeywordName, i)
}), e.config.onQuery.call(e, i)
})
}
}, {
key: "showDropdown",
value: function (t) {
var e = this;
c.default.isFunction(this.config.beforeShowDropdown) && this.config.beforeShowDropdown.call(this);
var i = function () {
(0, c.default)(window).off("click.hideDropDown").on("click.hideDropDown", function (t) {
(0, c.default)(t.target).data("dropdownSelect") || (e.hideDropdown(), (0, c.default)(window).off("click.hideDropDown"))
}), (0, c.default)(window).off("keydown.hideDropDown").on("keydown.hideDropDown", function (t) {
27 === t.keyCode && e.hideDropdown(), (0, c.default)(window).off("keydown.hideDropDown")
}), c.default.isFunction(e.config.afterShowDropdown) && e.config.afterShowDropdown.call(e)
};
this.$select.addClass("select__wrap-expand"), this.$dropdown.css("visibility", "hidden").show();
var n = this.$dropdown.outerHeight(),
a = this.$select.offset().top + this.$select.outerHeight();
if (this.$result.css("max-height", this.$options.children().eq(0).outerHeight() * this.config.visCount), this.$dropdown.css("visibility", "").hide(), t ? (this.$dropdown.show(), i()) : this.$dropdown.stop(1, 1).slideDown(100, i), this.config.autoDropup) {
var o = (0, c.default)("body").scrollTop() + (0, c.default)(window).outerHeight();
this.$select.offset().top - n > 0 && a + n >= o && this.$select.addClass("select__wrap-dropup")
}
this.$search.focus()
}
}, {
key: "hideDropdown",
value: function (t) {
var e = this;
c.default.isFunction(this.config.beforeHideDropdown) && this.config.beforeHideDropdown.call(this), this.$select.addClass("select__wrap-closing");
var i = function () {
e.$select.removeClass("select__wrap-expand"), e.$select.removeClass("select__wrap-dropup"), e.$select.removeClass("select__wrap-closing"), c.default.isFunction(e.config.afterHideDropdown) && e.config.afterHideDropdown.call(e)
};
t ? (this.$dropdown.hide(), i()) : this.$dropdown.stop(1, 1).slideUp(100, i)
}
}, {
key: "toggleDropdown",
value: function () {
this.config.disabled || this.$trigger.find(".select__value-single").is(":disabled") || (this.$dropdown.is(":visible") ? this.hideDropdown() : this.showDropdown())
}
}, {
key: "_renderOptions",
value: function () {
this.config.pageSize > 0 ? this._gotoPage(1) : (this.showData = this.filtedData, this._renderShowingOptions())
}
}, {
key: "_renderShowingOptions",
value: function () {
var t = this;
this.$options.empty(), this.showData.length ? c.default.map(this.showData, function (e, i) {
var n = (0, c.default)('<li class="select__option" />').data("option", e).append(t.config.optionTemplate(e, t.allData));
n.attr("data-_key", e._key), t.$options.append(n)
}) : this.$options.append('<li class="select__option select__option-notfound">' + this.config.notFoundText + "</li>")
}
}, {
key: "_highlightMatch",
value: function () {
var t = this;
this.$options.find(">li:not(.select__option-notfound)").each(function () {
(0, c.default)(this).html(t._markMatch((0, c.default)(this).text(), t.keyword))
})
}
}, {
key: "_markMatch",
value: function (t, e) {
if (e) {
var i = t.toLowerCase().indexOf(e.toLowerCase()),
n = (0, c.default)("<span />");
if (i < 0) return n.text(t);
var a = (0, c.default)('<span class="select__match" />');
return a.text(t.substring(i, i + e.length)), n.text(t.substring(0, i)), n.append(a), n.append(t.substring(i + e.length)), n.html()
}
}
}, {
key: "_activePrevOptions",
value: function () {
var t = this.$options.find(".select__option-active").index(),
e = 0 === t || t === -1 ? this.$options.children().length - 1 : t - 1;
this._activeOptions(e)
}
}, {
key: "_activeNextOptions",
value: function () {
var t = this.$options.find(".select__option-active").index(),
e = t === this.$options.children().length - 1 ? 0 : t + 1;
this._activeOptions(e)
}
}, {
key: "_activeOptions",
value: function (t) {
var e = this.$options.find(">li:not(.select__option-notfound)").eq(t),
i = e.outerHeight() * t,
n = this.$result.scrollTop(),
a = this.$result.height();
e.addClass("select__option-active").siblings().removeClass("select__option-active"), i < n ? this.$result.scrollTop(i) : i >= n + a && this.$result.scrollTop(e.outerHeight() * (t + 1 - this.config.visCount))
}
}, {
key: "_choseActiveOption",
value: function () {
if (this.filtedData.length) {
var t = this.$options.find(".select__option-active");
if (t.length) {
if (this.config.multiple) {
if (t.hasClass("select__option-checked")) return void this._unchoseActiveOption(t, !0);
t.addClass("select__option-checked")
} else this.$options.find(">*").removeClass("select__option-checked");
this._addValue(t.data("option"), t.data("_key")), c.default.isFunction(this.config.afterSelect) && this.config.afterSelect.call(this, this.getValue())
}
}
}
}, {
key: "_unchoseActiveOption",
value: function (t, e) {
var i = t.data("_key");
this.$trigger.find("ul > [data-_key=" + i + "]").remove(), this._removeMutipleValue(i, e)
}
}, {
key: "_addValue",
value: function (t, e) {
var i = this,
n = this.config.showTextTemplate(t);
this.config.multiple ? ! function () {
i.value.push(d({}, t, {
_key: e,
_showText: n
})), i._addMultipleVal(n, e);
var a = [];
c.default.map(i.value, function (t) {
a.push(t.value)
}), i.$container.val(a)
}() : (this.value = d({}, t, {
_showText: n
}), this.$nowVal.val(n), this.$dropdown.hide(), this.$trigger.addClass("select__triggerbar-hasvalue"), this.value.value && this.$container.val(t.value))
}
}, {
key: "_addMultipleVal",
value: function (t, e) {
var i = this,
n = i.$trigger.find("ul"),
a = (0, c.default)('\n <li title="' + t + '">\n <span class="content">' + t + '</span>\n <span class="remove"><i class="fa fa-fw fa-times" /></span>\n </li>\n ');
a.attr("data-_key", e), n.append(a), a.find(".remove").click(function (t) {
t.stopPropagation(), (0, c.default)(this).parent().remove(), i._removeMutipleValue(e)
})
}
}, {
key: "_removeMutipleValue",
value: function (t, e) {
this.value = this.value.filter(function (e) {
return e._key !== t
});
var i = [];
c.default.map(this.value, function (t) {
i.push(t.value)
}), this.$container.val(i), this._renderDropdownChecked(e), c.default.isFunction(this.config.afterSelect) && this.config.afterSelect.call(this, this.getValue())
}
}, {
key: "_renderDropdownChecked",
value: function (t) {
var e = this;
this.$options.children().removeClass("select__option-checked"), t || this.$options.children().removeClass("select__option-active"), this.config.multiple ? c.default.map(this.value, function (t) {
e.$options.find("[data-_key=" + t._key + "]").addClass("select__option-checked")
}) : this.$options.find("[data-_key=" + this.value._key + "]").addClass("select__option-checked")
}
}, {
key: "_gotoPage",
value: function (t, e) {
t < 1 || t > this.pageTotal || (this.curPage = t, this.pageTotal = Math.max(Math.ceil(this.filtedData.length / this.config.pageSize), 1), this.showData = this.filtedData.slice((t - 1) * this.config.pageSize, t * this.config.pageSize), this._renderShowingOptions(), this.$result.scrollTop(0), this.$search.focus(), this._highlightMatch(), this.$pager.find(".cur").html(this.curPage), this.$pager.find(".total").html(this.pageTotal), 1 === this.curPage ? this.$pagePrev.addClass("select__pagelink-disabled") : this.$pagePrev.removeClass("select__pagelink-disabled"), this.curPage === this.pageTotal ? this.$pageNext.addClass("select__pagelink-disabled") : this.$pageNext.removeClass("select__pagelink-disabled"), this._renderDropdownChecked(), e && c.default.isFunction(this.config.onPageChange) && this.config.onPageChange(t))
}
}, {
key: "_gotoPrevPage",
value: function () {
this._gotoPage(this.curPage - 1, !0)
}
}, {
key: "_gotoNextPage",
value: function () {
this._gotoPage(this.curPage + 1, !0)
}
}, {
key: "cleanValue",
value: function () {
this.config.multiple ? (this.value = [], this.$trigger.find("ul").empty()) : this.$nowVal.val("").change(), this._cleanSearch(), this.$options.children().removeClass("select__option-checked select__option-active"), this.filtedData = this.allData, this._renderOptions()
}
}, {
key: "_cleanSearch",
value: function () {
this.keyword = "", this.$search.val("").trigger("input")
}
}, {
key: "_removeExtraKey",
value: function (t) {
var e = d({}, t);
return delete e._key, delete e._showText, e
}
}, {
key: "_filteData",
value: function (t) {
var e = c.default.isFunction(t) ? t : function (t) {
var e = this.config.optionTemplate(t),
i = this.keyword;
return "string" == typeof e && "string" == typeof i && (e = e.toLowerCase(), i = i.toLowerCase(), e.indexOf(i) > -1)
};
return this.filtedData = this.allData.filter(e), this._renderOptions(), this._highlightMatch(), this.filtedData
}
}, {
key: "filteData",
value: function (t, e, i) {
var n = this,
a = "string" == typeof t ? t : "",
o = void 0,
s = i;
"function" == typeof t ? (o = t, s = e) : "function" == typeof e && (o = e);
var l = [];
return c.default.isFunction(o) && ! function () {
var t = n;
t._cleanSearch(), n.allData_clone ? (t.allData = t.allData_clone, t.filtedData = t.allData) : n.allData_clone = n.allData, l = n._filteData(o), n.$custom.show(), a && n.$custom.find(".txt").html(a + "锛�"), n.$custom.find(".count").html(l.length + " / " + n.allData.length), n.$custom.find(".clean").one("click", function () {
t.allData = t.allData_clone, t.filtedData = t.allData, t._cleanSearch(), t.$custom.hide(), t._renderOptions(), t._highlightMatch(), c.default.isFunction(s) && s()
}), n.allData = l
}(), l
}
}, {
key: "fetchData",
value: function (t) {
var e = this,
i = (0, c.default)('<li class="select__option select__option-loading">Loading...</li>');
this.$options.empty().append(i);
var a = c.default.extend({}, this.config.ajax, t),
o = a.success,
s = n(a, ["success"]);
c.default.ajax(s).done(function (t) {
i.remove(), e.config.afterFetch(t), c.default.isFunction(o) && o(t)
})
}
}, {
key: "setDropdown",
value: function (t) {
if (!c.default.isArray(t)) throw new Error("data type error");
this.config.data = t, this.destroy(), this._init(!0)
}
}, {
key: "setData",
value: function (t) {
if (!c.default.isArray(t)) throw new Error("data type error");
this.config.data = t, this.destroy(), this._init()
}
}, {
key: "setSelect",
value: function (t) {
var e = this;
if (c.default.isFunction(t)) {
var i = this.config.data.filter(function (e) {
return t(e)
});
this.cleanValue(), c.default.map(i, function (t) {
e._addValue(t, t._key)
}), this._renderDropdownChecked(), c.default.isFunction(this.config.afterSelect) && this.config.afterSelect.call(this, this.getValue())
}
}
}, {
key: "cleanData",
value: function () {
this.setData([]), this.cleanValue()
}
}, {
key: "destroy",
value: function () {
this.$select.remove(), this.$container.data("dropdownSelect_instance", null).show()
}
}, {
key: "getValue",
value: function (t) {
function e(e) {
switch ("undefined" == typeof t ? "undefined" : r(t)) {
case "function":
return t(e);
case "string":
return e[t];
case "object":
if (!c.default.isArray(t)) return e;
var i = function () {
var i = {};
return c.default.map(t, function (t) {
i[t] = e[t]
}), {
v: i
}
}();
if ("object" === ("undefined" == typeof i ? "undefined" : r(i))) return i.v;
default:
return e
}
}
var i = this;
if (!this.config.multiple) return e(this._removeExtraKey(this.value));
var n = function () {
var t = [];
return c.default.map(i.value, function (n) {
var a = e(i._removeExtraKey(n));
t.push(a)
}), {
v: t
}
}();
return "object" === ("undefined" == typeof n ? "undefined" : r(n)) ? n.v : void 0
}
}, {
key: "setEnable",
value: function () {
this.$select.removeClass("select__wrap-disabled"), this.config.disabled = !1
}
}, {
key: "setDisabled",
value: function () {
this.$select.addClass("select__wrap-disabled"), this.config.disabled = !0
}
}]), t
}();
c.default.fn.dropdownSelect = function (t) {
var e = l(this, t);
return e
}, t.exports = l
}))
export default win.dropdownSelect;