@ctmobile/ui-tree/lib/treenode.js

支持移动端的UI组件-Tree

"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck")),_createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass")),_uiUtil=require("@ctmobile/ui-util"),selectorPrefix="ct-tree-",normalTriggerIcon="fa fa-caret-right",remoteTriggerIcon="fa fa-spinner",checkboxIcon={checkall:"check-square",uncheckall:"minus-square",unchecked:"square-o"},radioIcon={checked:"circle",unchecked:"circle-o"};function initVar(){this.itemEl=this.el.querySelector(".".concat(selectorPrefix,"item")),this.itemTriggerEl=this.itemEl.querySelector(".".concat(selectorPrefix,"item-trigger")),this.itemIconEl=this.itemEl.querySelector(".".concat(selectorPrefix,"item-icon")),this.itemLabelEl=this.itemEl.querySelector(".".concat(selectorPrefix,"item-label")),this.itemTextEl=this.itemLabelEl.querySelector(".".concat(selectorPrefix,"item-text")),this.itemInputEl=this.itemEl.querySelector(".".concat(selectorPrefix,"item-input")),this.itemInputFieldEl=this.itemEl.querySelector(".".concat(selectorPrefix,"item-input-field")),this.childrenEl=this.el.querySelector(".".concat(selectorPrefix,"children"))}function initEvents(){var e=this,i=this.config.loadType;this.itemTriggerEl&&this.itemTriggerEl.addEventListener("click",function(){if(e.extend)_expand.call(e,!e.isExpand);else if("remote"===i)if(e.isload)_expand.call(e,!e.isExpand);else{if(e.lock)return!1;e.lock=!0,changeRemoteIcon.call(e),e.events.trigger("loadRemote",e,onLoadRemoteSuccess.bind(e),onLoadRemoteError.bind(e),onLoadRemoteComplete.bind(e))}else _expand.call(e,!e.isExpand)}),this.itemLabelEl.addEventListener("click",function(){e.events.trigger("click",e)}),this.itemInputEl&&this.itemInputEl.addEventListener("click",function(){e.isChecked()?"checkbox"===e.getType()&&e.checked(!1):"checkbox"===e.getType()&&e.checked(!0)})}function checked(e){if(this.isCheckboxType()&&"checkbox"===this.getType()){this.itemInputFieldEl.checked=e;var i=this.config.checkedCascade;if((void 0===i||i)&&!this.isLeaf())for(var t=0;t<this.childrenNodes.length;t++){this.childrenNodes[t].checked(e)}}}function checkedDetail(e){var i=this.config.checkedCascade,t=void 0===i||i;checked.call(this,e),t?this.isLeaf()&&(this.events.trigger("checked",this,e),this.detailItemInputsRecursive()):(this.detailItemInputsRecursive(),this.events.trigger("checked",this,e))}function changeRemoteIcon(){_uiUtil.Dom6.removeClass(this.itemTriggerEl,normalTriggerIcon),_uiUtil.Dom6.addClass(this.itemTriggerEl,"".concat(remoteTriggerIcon," animation"))}function getChildrenPaddingLeft(){var e=this.config,i=e.leaf,t=e.type,n=e.icon,c=4;return i||(c+=22),"normal"!==t?c+=n?19:22:n&&(c+=19),c}function changeNormalIcon(){_uiUtil.Dom6.removeClass(this.itemTriggerEl,"".concat(remoteTriggerIcon," animation")),_uiUtil.Dom6.addClass(this.itemTriggerEl,normalTriggerIcon)}function _expand(e){return!this.isLeaf()&&(this.isExpand!==e&&(e?_uiUtil.Dom6.addClass(this.el,"expand"):_uiUtil.Dom6.removeClass(this.el,"expand"),this.isExpand=e,void this.events.trigger("expand",this,this.isExpand)))}function onLoadRemoteSuccess(e){var i=this.nodeGlobalConfig,t=this.nodeConfig;e.length<=0&&(t.leaf=!0,this.itemTriggerEl.classList.add("invisible")),this.childrenNodes=[],t.children=e,this.tree.renderChildren({parentNode:this,globalConfig:i,config:t}),_expand.call(this,!0),changeNormalIcon.call(this),this.isload=!0,this.refresh(),this.lock=!1}function onLoadRemoteError(){changeNormalIcon.call(this),this.lock=!1}function onLoadRemoteComplete(){changeNormalIcon.call(this),this.lock=!1}function renderInput(){var e=this.config,i=e.type,t=e.checked,n=void 0!==t&&t,c=e.leaf;if("normal"===i)return"";if("checkbox"!==i)return"radio"===i?'<span class="'.concat(selectorPrefix,"item-input fa fa-").concat(radioIcon.unchecked,'" >\n             <input class="').concat(selectorPrefix,'item-input-field" type="checkbox" />\n            </span>'):"";return c&&n?'<span class="'.concat(selectorPrefix,"item-input fa fa-").concat(checkboxIcon.checkall,'" >\n              <input class="').concat(selectorPrefix,'item-input-field" checked type="checkbox" />\n             </span>'):'<span class="'.concat(selectorPrefix,"item-input fa fa-").concat(checkboxIcon.unchecked,'" >\n              <input class="').concat(selectorPrefix,'item-input-field" type="checkbox" />\n             </span>')}function renderCheckboxCheckAll(){_uiUtil.Dom6.removeClass(this.itemInputEl,"fa-".concat(checkboxIcon.uncheckall," fa-").concat(checkboxIcon.unchecked)),_uiUtil.Dom6.addClass(this.itemInputEl,"fa-".concat(checkboxIcon.checkall))}function renderCheckboxUncheckall(){_uiUtil.Dom6.removeClass(this.itemInputEl,"fa-".concat(checkboxIcon.checkall," fa-").concat(checkboxIcon.unchecked)),_uiUtil.Dom6.addClass(this.itemInputEl,"fa-".concat(checkboxIcon.uncheckall))}function renderCheckboxUnchecked(){_uiUtil.Dom6.removeClass(this.itemInputEl,"fa-".concat(checkboxIcon.checkall," fa-").concat(checkboxIcon.uncheckall)),_uiUtil.Dom6.addClass(this.itemInputEl,"fa-".concat(checkboxIcon.unchecked))}function render(){var e=this.config,i=e.label,t=e.leaf,n=e.icon,c=e.iconColor,o=e.attr,l=void 0===o?{}:o;this.el=_uiUtil.Dom6.createElement('<div class="'.concat(selectorPrefix,"node ").concat(this.isExpand?"expand":"",'">\n        <div class="').concat(selectorPrefix,'item">\n          <span class="').concat(selectorPrefix,"item-trigger ").concat(t?"invisible":""," ").concat(normalTriggerIcon,'"></span>\n          ').concat(renderInput.call(this),'\n          <span class="').concat(selectorPrefix,"item-icon fa fa-").concat(n," ").concat(n?"":"invisible",'" style="color:').concat(c||"",'"></span>\n          <span class="').concat(selectorPrefix,'item-label">\n            <span class="').concat(selectorPrefix,'item-text">').concat(i,"</span>\n          </span>\n        </div>\n      </div>\n    ")),_uiUtil.Dom6.objectToDataSet(l,this.el),initVar.call(this),initEvents.call(this)}var TreeNode=function(){function a(e){var i=e.globalConfig,t=e.config,n=e.tree,c=e.parentNode;(0,_classCallCheck2.default)(this,a),this.nodeGlobalConfig=JSON.parse(JSON.stringify(i)),this.nodeConfig=JSON.parse(JSON.stringify(t)),this.config=JSON.parse(JSON.stringify(Object.assign({},i,t))),this.tree=n,this.parentNode=c,this.childrenNodes=[],this.isload=!1,this.lock=!1,this.events=n.events;var o=this.config,l=o.expand,r=void 0===l||l,s=o.loadType;this.isExpand="remote"!==s&&r,render.call(this)}return(0,_createClass2.default)(a,[{key:"append",value:function(e,i){var t=1<arguments.length&&void 0!==i&&i,n=this.config.loadType;if(this.isLeaf()){this.childrenEl=_uiUtil.Dom6.createElement('<div class="ct-tree-children"></div>');var c=getChildrenPaddingLeft.call(this);this.childrenEl.style.paddingLeft="".concat(c,"px"),this.el.appendChild(this.childrenEl)}this.childrenEl.appendChild(e.getEl()),this.childrenNodes.push(e),_uiUtil.Dom6.removeClass(this.itemTriggerEl,"invisible"),"remote"!==n||this.isload||(this.isload=!0),t&&this.refresh()}},{key:"appendByConfig",value:function(e){var i=this.nodeGlobalConfig,t=new a({globalConfig:i,config:e,tree:this.tree,parentNode:this});this.tree.renderChildren({parentNode:t,globalConfig:i,config:e}),this.append(t),this.refresh()}},{key:"prepend",value:function(e){this.isLeaf()&&this.append(e),_uiUtil.Dom6.prepend(this.childrenEl,e.getEl()),this.childrenNodes.unshift(e),this.refresh()}},{key:"prependByConfig",value:function(e){var i=this.nodeGlobalConfig,t=new a({globalConfig:i,config:e,tree:this.tree,parentNode:this});this.tree.renderChildren({parentNode:t,globalConfig:i,config:e}),this.prepend(t)}},{key:"insertBefore",value:function(i,e){if(!i||!e)return!1;var t=this.childrenNodes.findIndex(function(e){return e===i});-1===t?(this.append(e),this.refresh()):0===t?this.prepend(e):(this.childrenEl.insertBefore(e.getEl(),i.getEl()),this.childrenNodes.splice(t,0,e),this.refresh())}},{key:"insertBeforeByConfig",value:function(e,i){var t=this.nodeGlobalConfig,n=new a({globalConfig:t,config:i,tree:this.tree,parentNode:this});this.tree.renderChildren({parentNode:n,globalConfig:t,config:i}),this.insertBefore(e,n)}},{key:"insertAfter",value:function(i,e){if(!i||!e)return!1;var t=this.childrenNodes.findIndex(function(e){return e===i});-1===t?(this.append(e),this.refresh()):t===this.childrenNodes.length-1?this.prepend(e):(_uiUtil.Dom6.insertAfter(e.getEl(),i.getEl()),this.childrenNodes.splice(t+1,0,e),this.refresh())}},{key:"insertAfterByConfig",value:function(e,i){var t=this.nodeGlobalConfig,n=new a({globalConfig:t,config:i,tree:this.tree,parentNode:this});this.tree.renderChildren({parentNode:n,globalConfig:t,config:i}),this.insertAfter(e,n)}},{key:"replaceNode",value:function(i,e){if(!i||!e)return!1;var t=this.childrenNodes.findIndex(function(e){return e===i});if(-1===t)return!1;this.childrenEl.replaceChild(e.getEl(),i.getEl()),this.childrenNodes.splice(t,1,e),this.refresh()}},{key:"replaceNodeByConfig",value:function(e,i){var t=this.nodeGlobalConfig,n=new a({globalConfig:t,config:i,tree:this.tree,parentNode:this});this.tree.renderChildren({parentNode:n,globalConfig:t,config:i}),this.replaceNode(e,n)}},{key:"removeChildren",value:function(i){if(!i)return!1;if(this.isLeaf())return!1;var e=this.childrenNodes.findIndex(function(e){return e===i});if(-1===e)return!1;this.childrenNodes.splice(e,1),_uiUtil.Dom6.remove(i.getEl()),this.isLeaf()&&_uiUtil.Dom6.addClass(this.itemTriggerEl,"invisible"),this.refresh()}},{key:"childrens",value:function(){return[].concat(this.childrenNodes)}},{key:"expand",value:function(e){_expand.call(this,e)}},{key:"resetRemoteNode",value:function(){if("remote"!==this.config.loadType)return!1;this.expand(!1),this.isload=!1}},{key:"isExpand",value:function(){return this.isExpand}},{key:"getAttr",value:function(e){return this.el.dataset[e]}},{key:"setAttr",value:function(e,i){this.el.dataset[e]=i}},{key:"hasAttr",value:function(e,i){return i===this.getAttr(e)}},{key:"getLabel",value:function(){return this.itemTextEl.innerText}},{key:"setLabel",value:function(e){this.itemTextEl.innerText=e}},{key:"setIcon",value:function(e){var i=this,t=this.config,n=t.icon,c=t.iconColor;function o(){i.config.icon=e,i.itemIconEl=_uiUtil.Dom6.createElement('<span class="'.concat(selectorPrefix,"item-icon fa fa-").concat(e,'" style="color:').concat(c||"",'"></span>')),_uiUtil.Dom6.prepend(i.itemLabelEl,i.itemIconEl)}n&&this.itemIconEl?(this.config.icon=e,_uiUtil.Dom6.removeClass(this.itemIconEl,"fa fa-".concat(n)),_uiUtil.Dom6.addClass(this.itemIconEl,"fa fa-".concat(e))):o()}},{key:"getIcon",value:function(){return this.config.icon}},{key:"setIconColor",value:function(e){return!!this.config.icon&&(!!this.itemIconEl&&(this.config.iconColor=e,void(this.itemIconEl.style.color=e)))}},{key:"getIconColor",value:function(){return this.config.iconColor}},{key:"isLeaf",value:function(){return this.childrenNodes.length<=0}},{key:"isRoot",value:function(){return!!this.parentNode}},{key:"getEl",value:function(){return this.el}},{key:"isChecked",value:function(){return!!this.isCheckboxType()&&(!!this.itemInputFieldEl&&this.itemInputFieldEl.checked)}},{key:"isSubChecked",value:function(){return!!this.isCheckboxType()&&(!!this.itemInputEl&&this.itemInputEl.classList.contains("fa-".concat(checkboxIcon.uncheckall)))}},{key:"getType",value:function(){return this.config.type}},{key:"getParentNode",value:function(){return this.parentNode}},{key:"isCheckboxType",value:function(){return-1!==["checkbox","radio"].indexOf(this.config.type)}},{key:"checkboxDrillUp",value:function(){if(!this.isCheckboxType())return!1;for(var e=[],i=0;i<this.childrenNodes.length;i++){var t=this.childrenNodes[i];t.itemInputFieldEl&&e.push(t)}var n=e.filter(function(e){return e.isChecked()});if(n.length===e.length)this.itemInputFieldEl.checked=!0,renderCheckboxCheckAll.call(this),this.events.trigger("checked",this,!0),this.parentNode&&this.parentNode.checkboxDrillUp();else{if(this.itemInputFieldEl.checked=!1,0!==n.length)renderCheckboxUncheckall.call(this);else 0!==e.filter(function(e){return e.isSubChecked()}).length?renderCheckboxUncheckall.call(this):renderCheckboxUnchecked.call(this);this.events.trigger("checked",this,!1),this.parentNode&&this.parentNode.checkboxDrillUp()}}},{key:"detailItemInputsRecursive",value:function(){var e=this.config.checkedCascade;if(void 0===e||e)if(this.isLeaf()){if("checkbox"===this.getType()){this.isChecked()?renderCheckboxCheckAll.call(this):renderCheckboxUnchecked.call(this);var i=this.getParentNode();i&&i.checkboxDrillUp()}}else for(var t=this.childrens(),n=0;n<t.length;n++)t[n].detailItemInputsRecursive();else this.isChecked()?renderCheckboxCheckAll.call(this):renderCheckboxUnchecked.call(this)}},{key:"checked",value:function(e){var i=this.config.checkedCascade;void 0===i||i?checkedDetail.call(this,e):this.events.hasType("beforeChecked")?this.events.trigger("beforeChecked",this,e)&&checkedDetail.call(this,e):checkedDetail.call(this,e)}},{key:"refresh",value:function(){var e=this.getParentNode();e?e.detailItemInputsRecursive():this.detailItemInputsRecursive()}}]),a}(),_default=TreeNode;exports.default=_default;
//# sourceMappingURL=treenode.js.map