elmer-ui-core
Version:
web app framework
705 lines (704 loc) • 28.3 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ElmerDOM = void 0;
var ElmerAnimation_1 = require("../animation/ElmerAnimation");
var ElmerAnimationProperty_1 = require("../animation/ElmerAnimationProperty");
var index_1 = require("../inject/index");
var injectable_1 = require("../inject/injectable");
var MDomModel_1 = require("../middleware/MDomModel");
var ElmerDomEvent_1 = require("./ElmerDomEvent");
var ElmerDomEvents_1 = require("./ElmerDomEvents");
var ElmerDomQuery_1 = require("./ElmerDomQuery");
var ElmerDOM = (function (_super) {
__extends(ElmerDOM, _super);
function ElmerDOM() {
var _this = _super.call(this) || this;
_this.bindEvents = ElmerDomEvents_1.bindEvents;
_this.supportCss3 = false;
_this.listener = [];
_this.supportCss3 = _this.support("transform");
_this.contains = document.documentElement !== null && document.documentElement.contains ?
function (parent, node) {
return parent !== node && parent.contains(node);
} :
function (parent, checkNode) {
var node = checkNode;
while (node && node.parentNode) {
if (node === parent) {
return true;
}
else {
node = node.parentNode;
}
}
return false;
};
return _this;
}
ElmerDOM.prototype.support = function (key) {
var prefix = ["webkit", "moz", "ms", "o"];
if (!this.isEmpty(key)) {
var prePropertyKey = key.substr(0, 1).toUpperCase() + key.substr(1);
for (var i = 0; i < prefix.length; i++) {
var myKey = prefix[i] + prePropertyKey;
if (document.body && document.body.style[myKey] !== undefined) {
return true;
}
}
return document.body && document.body.style[key] !== undefined;
}
else {
return false;
}
};
ElmerDOM.prototype.byId = function (id, dom) {
if (this.isDOM(dom) && dom !== undefined && dom !== null) {
return dom.querySelector("#" + id);
}
else {
return document.getElementById(id);
}
};
ElmerDOM.prototype.query = function (queryString, dom) {
if (this.isDOM(dom) && dom !== undefined && dom !== null) {
return dom.querySelectorAll(queryString) || new NodeList();
}
else {
return document.querySelectorAll(queryString) || new NodeList();
}
};
ElmerDOM.prototype.width = function (dom) {
return this.isDOM(dom) ? dom.clientWidth : 0;
};
ElmerDOM.prototype.height = function (dom) {
return this.isDOM(dom) ? dom.clientHeight : 0;
};
ElmerDOM.prototype.css = function (dom, key, value) {
var _this = this;
if (this.isDOM(dom)) {
this.setCss(dom, key, value);
}
else if (this.getType(dom) === "[object NodeList]" || this.getType(dom) === "[object Array]") {
dom.forEach(function (tmpDom) {
_this.setCss(tmpDom, key, value);
});
}
};
ElmerDOM.prototype.setCss = function (dom, key, value) {
if (dom) {
if (this.isString(key)) {
if (dom["style"][key] !== undefined) {
var cssValue = (this.isNumeric(value) && key !== "opacity" ? value + "px" : value);
dom.style.setProperty(key, cssValue);
}
}
else if (this.isObject(key)) {
for (var csskey in key) {
if (!this.isEmpty(key[csskey])) {
var convertCssKeys = ["left", "top", "right", "bottom", "width", "height", "fontSize",
"borderWidth", "borderLeftWidth", "borderTopWidth", "borderRightWidth", "borderBottomWidth",
"marginLeft", "marginTop", "marginRight", "marginBottom", "paddingLeft", "paddingTop", "paddingRight", "paddingBottom"];
var setCssValue = (this.isNumeric(key[csskey]) && convertCssKeys.indexOf(csskey) >= 0 ? key[csskey] + "px" : key[csskey]);
dom.style.setProperty(this.humpToStr(csskey), setCssValue);
}
else {
dom.style.setProperty(this.humpToStr(csskey), null);
}
}
}
}
};
ElmerDOM.prototype.setCss3 = function (dom, key, value) {
if (!this.isEmpty(key)) {
var profillKey = key.substr(0, 1).toUpperCase() + key.substr(1);
this.setCss(dom, key, value);
this.setCss(dom, "webkit" + profillKey, value);
this.setCss(dom, "moz" + profillKey, value);
this.setCss(dom, "ms" + profillKey, value);
this.setCss(dom, "o" + profillKey, value);
}
};
ElmerDOM.prototype.getCss3 = function (key, value) {
var calcReg = /^calc\(/i;
var supportPrefix = ["webkit", "moz", "ms", "o"];
var result = "";
if (calcReg.test(value)) {
supportPrefix.map(function (tmpPrefix) {
result += key + ":-" + tmpPrefix + "-" + value + ";";
});
result += key + ":" + value;
}
else {
supportPrefix.map(function (tmpPrefix) {
result += "-" + tmpPrefix + "-" + key + ":" + value + ";";
});
result += key + ":" + value + ";";
}
return result;
};
ElmerDOM.prototype.hasClass = function (dom, className) {
if (this.isDOM(dom)) {
if (dom.classList && dom.classList.contains) {
return dom.classList.contains(className);
}
else {
var tmpClassName = (dom.className || "").replace(/\s\s/g, " ");
var tmpClassArr = tmpClassName.split(" ");
return tmpClassArr.indexOf(className) >= 0;
}
}
};
ElmerDOM.prototype.attr = function (dom, attrName, attrValue) {
if (this.isDOM(dom)) {
if (attrValue !== undefined) {
dom.setAttribute(attrName, attrValue);
}
else {
if (!this.isObject(attrName)) {
var v = dom.getAttribute(attrName);
return this.isNumeric(v) && v !== null ? (v.indexOf(".") < 0 ? parseInt(v, 10) : parseFloat(v)) : v;
}
else {
Object.keys(attrName).map(function (tmpAttrName) {
dom.setAttribute(tmpAttrName, attrName[tmpAttrName]);
});
}
}
}
};
ElmerDOM.prototype.addClass = function (dom, className) {
var _this = this;
if (this.isDOM(dom) && !this.isEmpty(className)) {
this.updateDomClassName(dom, className, true);
}
else if (this.getType(dom) === "[object NodeList]" || this.getType(dom) === "[object Array]") {
var domList = dom;
domList.forEach(function (item) {
_this.updateDomClassName(item, className, true);
});
}
};
ElmerDOM.prototype.removeClass = function (dom, className) {
var _this = this;
if (this.getType(dom) === "[object NodeList]" || this.getType(dom) === "[object Array]") {
dom.forEach(function (item) {
_this.updateDomClassName(item, className, false);
});
}
else {
this.updateDomClassName(dom, className, false);
}
};
ElmerDOM.prototype.on = function (dom, eventName, callBack, options) {
this.addEvent(dom, eventName, callBack, options);
};
ElmerDOM.prototype.addEvent = function (dom, eventName, callBack, options) {
if (this.isDOM(dom)) {
var eventListener = dom.eventListeners || [];
var profillEventName = "on" + eventName;
var eventData = {
eventName: eventName,
handler: callBack
};
if (this.bindEvents.indexOf(eventName) >= 0) {
if (dom.addEventListener) {
if (options) {
dom.addEventListener(eventName, callBack, options);
}
else {
dom.addEventListener(eventName, callBack);
}
}
else {
if (options) {
dom.attachEvent(profillEventName, callBack, options);
}
else {
dom.attachEvent(profillEventName, callBack);
}
}
}
else {
if (dom[eventName]) {
dom[eventName] = callBack;
}
else {
dom[profillEventName] = callBack;
}
}
eventListener.push(eventData);
dom.eventListeners = eventListener;
}
};
ElmerDOM.prototype.removeEvent = function (dom, eventName, callBack, options) {
var _this = this;
if (this.isDOM(dom)) {
var eventListeners_1 = dom.eventListeners || [];
if (eventListeners_1 && eventListeners_1.length > 0) {
eventListeners_1.map(function (tmpListener, index) {
if (tmpListener.eventName === eventName && callBack === tmpListener.handler) {
if (_this.bindEvents.indexOf(tmpListener.eventName) >= 0) {
if (dom.removeEventListener) {
dom.removeEventListener(tmpListener.eventName, tmpListener.handler);
}
else {
if (dom.detachEvent) {
dom.detachEvent("on" + tmpListener.eventName, tmpListener.handler);
}
}
}
else {
dom[tmpListener.eventName] = null;
}
delete eventListeners_1[index];
}
});
dom.eventListeners = eventListeners_1;
}
else {
if (dom.removeEventListener) {
dom.removeEventListener(eventName, callBack, options);
}
else if (dom.detachEvent) {
dom.detachEvent("on" + eventName, callBack, options);
}
}
}
};
ElmerDOM.prototype.unbind = function (dom) {
var _this = this;
if (this.isDOM(dom)) {
var eventListeners_2 = dom.eventListeners || [];
eventListeners_2.map(function (tmpListener, index) {
if (_this.bindEvents.indexOf(tmpListener.eventName) >= 0) {
if (dom.removeEventListener) {
dom.removeEventListener(tmpListener.eventName, tmpListener.handler);
}
else {
if (dom.detachEvent) {
dom.detachEvent("on" + tmpListener.eventName, tmpListener.handler);
}
}
}
delete eventListeners_2[index];
});
dom.eventListeners = null;
}
};
ElmerDOM.prototype.getMaxWidth = function (domList) {
var maxWidth = 0;
if (domList) {
if (this.isNodeList(domList)) {
domList.forEach(function (tmpDom) {
var tmpWidth = tmpDom.clientWidth;
if (tmpWidth > maxWidth) {
maxWidth = tmpWidth;
}
tmpWidth = null;
});
}
else {
domList.map(function (tmpDom) {
var tmpWidth = tmpDom.clientWidth;
if (tmpWidth > maxWidth) {
maxWidth = tmpWidth;
}
tmpWidth = null;
});
}
}
return maxWidth;
};
ElmerDOM.prototype.find = function (dom, selector) {
var _this = this;
var regs = this.getSelectors(selector) || [];
var result = [];
regs.map(function (tmpSelector) {
var tmpDoms = _this.queryInDom(dom, tmpSelector);
if (tmpDoms.length > 0) {
result.push.apply(result, tmpDoms);
}
});
return result;
};
ElmerDOM.prototype.animation = function (options) {
if (this.isDOM(options.dom)) {
return new ElmerAnimation_1.ElmerAnimation({
beginTime: options.beginTime,
data: [{
beginTime: options.beginTime,
dom: options.dom,
duration: options.duration,
from: options.from,
onFinish: options.onFinish,
onStart: options.onStart,
to: options.to,
type: options.type || "Linear"
}],
duration: options.duration,
onChange: this.onAnimationChange.bind(this)
});
}
else {
throw new Error("Animation dom must be an HtmlElement");
}
};
ElmerDOM.prototype.animations = function (animationData) {
return new ElmerAnimation_1.ElmerAnimation({
beginTime: animationData.beginTime,
data: animationData.options,
duration: animationData.duration,
onBegin: animationData.onStart,
onChange: this.onAnimationChange.bind(this),
onEnd: animationData.onFinish
});
};
ElmerDOM.prototype.show = function (dom, options) {
var _this = this;
var nDuration = options ? options.duration || 300 : 300;
this.css(dom, {
display: "",
opacity: 0
});
this.animation({
dom: dom,
duration: nDuration,
from: {
opacity: 0
},
to: {
opacity: 1
},
type: options && !this.isEmpty(options.type) ? options.type : "Linear",
onStart: options ? options.onStart : null,
onFinish: function () {
_this.css(dom, {
display: "",
opacity: 1
});
options && typeof options.onFinish === "function" && options.onFinish();
}
});
};
ElmerDOM.prototype.hide = function (dom, options) {
var _this = this;
var nDuration = options ? options.duration || 300 : 300;
this.css(dom, {
display: "",
opacity: 1
});
this.animation({
dom: dom,
duration: nDuration,
from: {
opacity: 1
},
to: {
opacity: 0
},
type: options && !this.isEmpty(options.type) ? options.type : "Linear",
onStart: options ? options.onStart : null,
onFinish: function () {
_this.css(dom, {
display: "none",
opacity: 1
});
options && typeof options.onFinish === "function" && options.onFinish();
}
});
};
ElmerDOM.prototype.slideIn = function (dom, options) {
var _this = this;
var attrHeight = this.attr(dom, "data-animation-height") || "";
attrHeight = attrHeight.replace(/[a-z]*$/i, "").replace(/\%/g, "");
var attrHeightValue = /^[0-9\.]{1,}$/.test(attrHeight) ? attrHeight : 0;
var domHeight = attrHeightValue > 0 ? attrHeightValue : dom.clientHeight;
var from = {
height: 0,
opacity: 1
};
var to = {
height: domHeight,
opacity: 1
};
var dValue = ElmerAnimationProperty_1.default.converAnimationProperty(ElmerAnimationProperty_1.default.readWillChangeCssDefaultData(dom, from, to));
this.css(dom, {
display: options && !this.isEmpty(options.display) ? options.display : "",
opacity: "1",
});
if (to.height === 0) {
to.height = dom.clientHeight;
}
this.css(dom, "height", 0);
this.animation({
dom: dom,
duration: options ? (options.duration || 300) : 300,
from: from,
to: to,
type: options ? options.type : "Linear",
onFinish: function () {
_this.css(dom, {
height: dValue.height,
opacity: 1
});
options && typeof options.onFinish === "function" && options.onFinish();
}
});
dValue = null;
to = null;
from = null;
domHeight = null;
attrHeightValue = null;
};
ElmerDOM.prototype.slideOut = function (dom, options) {
var _this = this;
var domHeight = dom.clientHeight;
var from = {
height: domHeight,
opacity: 1
};
var to = {
height: 0,
opacity: 0.5
};
var dValue = ElmerAnimationProperty_1.default.converAnimationProperty(ElmerAnimationProperty_1.default.readWillChangeCssDefaultData(dom, from, to));
this.animation({
dom: dom,
duration: options ? (options.duration || 300) : 300,
from: from,
to: to,
type: options ? options.type : "Linear",
onFinish: function () {
_this.css(dom, {
display: "none",
opacity: 1,
height: dValue.height
});
_this.attr(dom, "data-animation-height", dValue.height);
options && typeof options.onFinish === "function" && options.onFinish();
}
});
};
ElmerDOM.prototype.onAnimationChange = function (evt) {
this.css(evt.dom, evt.value);
};
ElmerDOM.prototype.queryInDom = function (dom, selector) {
var _this = this;
var resultDoms = [];
if (selector.mode === ">") {
dom.childNodes.forEach(function (tmpChildNode, index) {
if (_this.matchQueryNode(tmpChildNode, selector.type, selector.value, index)) {
if (selector.child) {
var tmpChildDoms = _this.queryInDom(tmpChildNode, selector.child);
if (tmpChildDoms && tmpChildDoms.length > 0) {
resultDoms.push.apply(resultDoms, tmpChildDoms);
}
tmpChildDoms = null;
}
else {
resultDoms.push(tmpChildNode);
}
}
});
}
else if (selector.mode === "+") {
var nextElement = this.getNextSilbingElement(dom, selector.type, selector.value);
if (nextElement) {
if (selector.child) {
resultDoms = this.queryInDom(nextElement, selector.child);
}
else {
resultDoms = [nextElement];
}
nextElement = null;
}
}
else if (this.isEmpty(selector.mode)) {
var tmpElements = null;
var tmpResult = this.getElementsBySelectValue(dom, selector.type, selector.value);
var filterType_1 = tmpResult.filterType;
var filter_1 = tmpResult.filter;
tmpElements = tmpResult.elements;
if (tmpElements && tmpElements.length > 0) {
tmpElements.forEach(function (tmpElement) {
if (filterType_1 === ".") {
if (_this.hasClass(tmpElement, filter_1)) {
if (selector.child) {
resultDoms.push.apply(resultDoms, _this.queryInDom(tmpElement, selector.child));
}
else {
resultDoms.push(tmpElement);
}
}
}
else if (filterType_1 === ":") {
if (_this.mDomModel.filterCheck(tmpElement, filter_1)) {
if (selector.child) {
resultDoms.push.apply(resultDoms, _this.queryInDom(tmpElement, selector.child));
}
else {
resultDoms.push(tmpElement);
}
}
}
else if (_this.isEmpty(filterType_1)) {
if (selector.child) {
resultDoms.push.apply(resultDoms, _this.queryInDom(tmpElement, selector.child));
}
else {
resultDoms.push(tmpElement);
}
}
});
}
tmpResult = null;
tmpElements = null;
filter_1 = null;
filterType_1 = null;
}
return resultDoms;
};
ElmerDOM.prototype.getElementsBySelectValue = function (parent, selectorType, selectorValue) {
var _this = this;
var tagName = selectorValue.replace(/(\.|\:|\:\:).*$/, "");
var filter = /^.*(\.|\:|\:\:)/.test(selectorValue) ? selectorValue.replace(/^.*(\.|\:|\:\:)/, "") : "";
var filterType = selectorValue.substr(tagName.length, selectorValue.length - tagName.length - filter.length);
var result = [];
if (this.isEmpty(selectorType)) {
parent.querySelectorAll(tagName).forEach(function (tmpElement) {
result.push(tmpElement);
});
}
else if (selectorType === "." || selectorType === "#") {
parent.querySelectorAll("*").forEach(function (tmpElement) {
if (selectorType === ".") {
if (_this.hasClass(tmpElement, tagName)) {
result.push(tmpElement);
}
}
else if (selectorType === "#") {
if (tmpElement.id === tagName) {
result.push(tmpElement);
}
}
});
}
tagName = null;
filter = null;
filterType = null;
return {
elements: result || [],
filter: filter,
filterType: filterType,
};
};
ElmerDOM.prototype.getNextSilbingElement = function (dom, queryType, querySelector) {
var nextElement = dom.nextElementSibling;
if (nextElement) {
if (this.matchQueryNode(nextElement, queryType, querySelector, 0)) {
return nextElement;
}
else {
return this.getNextSilbingElement(nextElement, queryType, querySelector);
}
}
return null;
};
ElmerDOM.prototype.matchQueryNode = function (dom, queryType, querySelector, index) {
if (index === void 0) { index = 0; }
var tmpReg = /^([a-z0-9][a-z0-9\-_]*)/;
var tmpMatch = querySelector.match(tmpReg);
if (tmpMatch) {
var checkValue = tmpMatch[1];
if (this.isEmpty(queryType)) {
return dom.tagName.toLowerCase() === checkValue.toLowerCase();
}
else if (queryType === ".") {
return this.hasClass(dom, checkValue);
}
else if (queryType === "#") {
return dom.id === checkValue;
}
}
return false;
};
ElmerDOM.prototype.updateDomClassName = function (dom, className, isAdd) {
if (this.isDOM(dom) && !this.isEmpty(className)) {
if (dom.classList) {
if (isAdd) {
!dom.classList.contains(className) && dom.classList.add(className);
}
else {
dom.classList.contains(className) && dom.classList.remove(className);
}
}
else {
var tmpClassName = (dom.className || "").replace(/\s\s/g, " ");
var tmpClassArr = tmpClassName.split(" ");
var hasChanged = false;
var tmpClassIndex = tmpClassArr.indexOf(className);
if (isAdd) {
if (tmpClassIndex < 0) {
tmpClassArr.push(className);
hasChanged = true;
}
}
else {
if (tmpClassIndex > 0) {
var newClassArr = [];
for (var i = 0; i < tmpClassArr.length; i++) {
if (tmpClassArr[i] !== className && !this.isEmpty(tmpClassArr[i])) {
newClassArr.push(tmpClassArr[i]);
}
else {
hasChanged = true;
}
}
tmpClassArr = newClassArr;
}
}
if (hasChanged) {
dom.className = tmpClassArr.join(" ");
}
}
}
};
__decorate([
injectable_1.autowired(ElmerDomEvent_1.ElmerDomEvent),
__metadata("design:type", ElmerDomEvent_1.ElmerDomEvent)
], ElmerDOM.prototype, "eventObj", void 0);
__decorate([
injectable_1.autowired(MDomModel_1.MDomModel),
__metadata("design:type", MDomModel_1.MDomModel)
], ElmerDOM.prototype, "mDomModel", void 0);
ElmerDOM = __decorate([
index_1.Injectable("ElmerDOM"),
__metadata("design:paramtypes", [])
], ElmerDOM);
return ElmerDOM;
}(ElmerDomQuery_1.ElmerDomQuery));
exports.ElmerDOM = ElmerDOM;