js-contacts
Version:
3 lines (2 loc) • 16 kB
JavaScript
/** @license js-contacts (c) 2020-2022 Liu.Jun License: MIT */
function t(t,o){for(var e=0;e<o.length;e++){var n=o[e];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function o(t,o,e){return o in t?Object.defineProperty(t,o,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[o]=e,t}function e(t,o){if(null==t)return{};var e,n,r=function(t,o){if(null==t)return{};var e,n,r={},a=Object.keys(t);for(n=0;n<a.length;n++)e=a[n],o.indexOf(e)>=0||(r[e]=t[e]);return r}(t,o);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);for(n=0;n<a.length;n++)e=a[n],o.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(t,e)&&(r[e]=t[e])}return r}function n(t){return function(t){if(Array.isArray(t))return r(t)}(t)||function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||function(t,o){if(!t)return;if("string"==typeof t)return r(t,o);var e=Object.prototype.toString.call(t).slice(8,-1);"Object"===e&&t.constructor&&(e=t.constructor.name);if("Map"===e||"Set"===e)return Array.from(t);if("Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return r(t,o)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(t,o){(null==o||o>t.length)&&(o=t.length);for(var e=0,n=new Array(o);e<o;e++)n[e]=t[e];return n}function a(t){return String(t)===t}!function(t,o){void 0===o&&(o={});var e=o.insertAt;if(t&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===e&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}}('.xx-disHide{display:none!important}.contactsBox{position:relative;background:#fff}.contactsBox .c-search-icon{display:inline-block;width:.6667rem;height:.6667rem;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAwCAMAAABpN6nPAAAAdVBMVEUAAAC6urqsrKy6urq7u7u7u7u6urq7u7u7u7u6urq6urq8vLy8vLy6urq6urq7u7u7u7u6urq6urq7u7u7u7u7u7u9vb26urq6urq7u7u6urq6urq6urq6urq7u7u8vLy7u7u6urq7u7u6urq7u7u9vb26uro15wGBAAAAJnRSTlMA7QX4rH0WEGz72VQ38+fRlYxpRz4yB8axc52bh3lhWxzhoU4pH65UEgAAAAEaSURBVEjH7ZXLGoIgEIUBJbyVqZl2v/P+jxhjLFSEYr6WnuWBH4YZGMisP2vD24TGAc3DXf0b8SpWsqfkJL4ii3UsR1ryrZtJqZxQkrmYo+xE7+dasO0ii8KgM4KzndlL0K3shSP4Z++djSlgNOZs6IpDR1n2SmFstTEHLkuIsJ7MG8RBn1NDFZwsZ8TUGpazpOkilSLTvwau4+4hcnMrDvVg1prDsVLDzpVb9g0z+NBYCrIt7FAGWTISpMyGOAS5vY68UnkHF9SoCeManpR3dEGtmvBAQajwUInApBxVXNQ1Ql1YzNNAPULMc0c0lob5tjBQyDybpab82nKhKb8PINKU11djo9yfmqY48ZGmWoKgUuKrqqjIrIHeA6M7aFBCwYoAAAAASUVORK5CYII=");background-size:.6667rem;background-repeat:no-repeat;background-position:50%;vertical-align:top}.contactsBox_search{position:relative;padding:.2667rem}.contactsBox_searchIcon{position:absolute;left:.4rem;top:.3733rem}.contactsBox_searchInput{display:block;width:100%;box-sizing:border-box!important;line-height:.4rem;padding:.2667rem .2667rem .2667rem .9333rem;font-size:14px;border:none;outline:none;background:#f2f2f2;border-radius:4px;-webkit-transition:box-shadow .4s ease;transition:box-shadow .4s ease}.contactsBox_searchInput::-webkit-input-placeholder{color:#bababa}.contactsBox_searchInput::placeholder{color:#bababa}.contactsBox_searchInput:focus{box-shadow:0 0 .04rem 0 rgba(0,0,0,.1)}.contactsBox_content{position:relative;height:100%}.hasSearchInput .contactsBox_content{height:auto}.contactsBox_listBox{overflow:auto;padding:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.contactsBox_groupTitle{margin:0;position:-webkit-sticky;position:sticky;top:0;padding:0 .2667rem;font-size:14px;font-weight:700;color:#000;line-height:1.0667rem;background:#e5e5e5}.contactsBox_groupItem{padding:0 .8rem 0 .2667rem}.contactsBox_groupItem:active{background-color:#efefef}.contactsBox_groupItem.xx-active .contactsBox_groupLabel{color:#ff8a00}.contactsBox_groupItem .contactsBox_groupLabel{display:block;font-size:14px;color:#000;line-height:1.28rem;border-bottom:.5px solid #eee}.contactsBox_keyBar{box-sizing:border-box!important;position:absolute;padding:.2667rem .0533rem .2667rem 0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);right:0;color:#007aff;max-height:100%}.contactsBox_keyBar>span{box-sizing:content-box;display:block;width:.48rem;line-height:.48rem;border-radius:50%;font-size:.32rem;text-align:center}.contactsBox_keyBar>span.xx-active{background:#007aff;color:#fff}.contactsBox_keyBar.contactsBox_keyBar-scroll{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.contactsBox_keyBar.contactsBox_keyBar-touchmove>span{width:1.8vh;line-height:1.8vh;padding:.0533rem}.contactsBox_indicator{position:absolute;width:1.1733rem;height:1.1733rem;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-align:center;line-height:1.1733rem;background-color:#666;border-radius:.2133rem;color:#fff;font-size:17px}');var i,s,c=(i="".concat(+new Date),s=0,function(){var t="".concat(+new Date);return t===i?s+=1:s=0,"lj".concat(i=t,"x").concat(s)});function l(t,o,e){for(;o;){if(e(o))return o;if(o===t||o.parentNode===t)break;o=o.parentNode}return null}function u(t){var o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;if(t instanceof NodeList)return Array.from(t);if(t instanceof HTMLElement)return[t];if(a(t))return Array.from(o.querySelectorAll(t));throw new Error("请传入一个正确的选择器")}function h(t,o){var e=Object.create(null);return t.reduce((function(t,n){if(""!==o&&!~n.label.toLocaleUpperCase().indexOf(o.toLocaleUpperCase()))return t;var r=String((n.groupKey||n.label)[0]).toLocaleUpperCase();return void 0!==e[r]?t[e[r]].value.push(n):(e[r]=t.length,t.push({name:r,letter:r,value:[n],anchorPoint:c()})),t}),[])}function p(t,o,e){var n,r,a,i=null,s=0,c=Object.assign({},e),l=function(){s=!1===c.leading?0:Date.now(),i=null,a=t.apply(n,r),i||(n=null,r=null)};return function(){var e=Date.now();s||!1!==c.leading||(s=e);var u=o-(e-s);n=this;for(var h=arguments.length,p=new Array(h),d=0;d<h;d++)p[d]=arguments[d];return r=p,u<=0||u>o?(i&&(clearTimeout(i),i=null),s=e,a=t.apply(n,r),i||(n=null,r=null)):i||(i=setTimeout(l,u)),a}}function d(t){var o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"addEventListener";t.forEach((function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=t.target,n=t.eventName,r=t.handler,a=t.useCapture,i=void 0!==a&&a;Array.isArray(n)?n.forEach((function(t){e[o](t,r,i)})):e[o](n,r,i)}))}function v(t){return t.groupedList.map((function(o,e){return'\n <span data-target="'.concat(o.anchorPoint,'" class="js_keyBarItem ').concat(0===e?t.activeClassName:"",'">').concat(o.letter,"</span>\n ")})).join("")}function f(t){var o=function(o){return'\n <div class="js_contactsBoxGroupItem contactsBox_groupItem '.concat(t.curSelect===o.value?t.activeClassName:"",'"\n data-value="').concat(o.value,'"\n >\n <span class="contactsBox_groupLabel">').concat(o.label,"</span>\n </div>")};return t.groupedList.map((function(t){var e=t.name,n=t.anchorPoint,r=t.isHot,a=t.value,i=void 0===a?[]:a;return'\n <div class="js_contactsBoxGroup contactsBox_group'.concat(r?" contactsBox_group-hot":"",'" id="').concat(n,'">\n <h4 class="js_contactsBoxGroupTitle contactsBox_groupTitle">').concat(e,'</h4>\n <div class="contactsBox_groupList">\n ').concat(i.map(o).join(""),"\n </div>\n </div>")})).join("")}var m=function(){function r(t){!function(t,o){if(!(t instanceof o))throw new TypeError("Cannot call a class as a function")}(this,r),o(this,"events",[]),o(this,"options",{target:"",hotLetter:"#",hotName:"Hot.xxx",hotList:[],allList:[],groupedList:[],containerHeight:"60vh",showSearch:!0,searchPlaceholder:"输入搜索词",showNavBar:!0,navModel:"scroll",searchVal:"",curSelect:"",indicatorDuration:1500,isDestroy:!1,shouldObserveScroll:!0,shouldObserveTouchMove:!1,touchmoveX:0,activeClassName:"xx-active"}),this.resolveData(t),this.grouping(),this.render(),this.updatePosition()}var a,i,s;return a=r,(i=[{key:"callHook",value:function(t){if(this.options[t]){for(var o=arguments.length,e=new Array(o>1?o-1:0),n=1;n<o;n++)e[n-1]=arguments[n];this.options[t].apply(null,e)}}},{key:"throwError",value:function(t){throw new Error(t.message||t)}},{key:"optionNodeList2DataList",value:function(t){return Array.from(t).reduce((function(t,o){if(""!==o.value){var e=o.innerText||o.textContent||o.text,n=o.dataset.groupKey||e;t.push({value:o.value,label:e,groupKey:n})}return t}),[])}},{key:"resolveSelectNodeData",value:function(t,o){var e=u(t)[0];this.options.selectDom=e;var n=e.querySelector("[data-type=hot]"),r=Object.create(null);if(void 0===o&&(r.curSelect=e.value),n){r.hotList=this.optionNodeList2DataList(n.querySelectorAll("option"));var a=e.querySelector("[data-type=all]");a&&(r.allList=this.optionNodeList2DataList(a.querySelectorAll("option")))}else r.allList=this.optionNodeList2DataList(e.querySelectorAll("option"));return r}},{key:"resolveData",value:function(t){var o=t.data,n=e(t,["data"]);if(o||this.throwError("构造函数参数必须包含 [data] 属性"),o.selectDom){var r=this.resolveSelectNodeData(o.selectDom,n.curSelect);Object.assign(this.options,n,r)}else o.allList||this.throwError("构造函数参数data属性必须包含 [selectDom] 或者 [allList]"),Object.assign(this.options,n,o)}},{key:"grouping",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],o=this.options.hotList&&this.options.hotList.length>0;this.options.groupedList=[].concat(n(!o||t&&""!==this.options.searchVal?[]:[{isHot:!0,name:this.options.hotName,letter:this.options.hotLetter,value:this.options.hotList,anchorPoint:c()}]),n(h(this.options.allList,this.options.searchVal)))}},{key:"render",value:function(){var t,o,e,n,r=(t=this.options,o='<div class="contactsBox_search">\n <span class="c-search-icon contactsBox_searchIcon"></span>\n <input placeholder="'.concat(t.searchPlaceholder,'" class="js_contactsBoxSearchInput contactsBox_searchInput">\n </div>'),e=t.showSearch?"calc(".concat(t.containerHeight," - 1.4668rem)"):"100%",n='<div class="js_contactsBoxKeyBar contactsBox_keyBar contactsBox_keyBar-'.concat(t.navModel,'">\n ').concat(v(t),"\n </div>"),'\n<div class="contactsBox '.concat(t.showSearch?"hasSearchInput":"",'" style="height: ').concat(t.containerHeight,'">\n ').concat(t.showSearch?o:"",'\n <div class="contactsBox_content">\n <div class="contactsBox_listBox js_contactsBoxListBox" style="height: ').concat(e,'">\n ').concat(f(t),"\n </div>\n ").concat(t.showNavBar?n:"",'\n </div>\n <div class="js_indicator contactsBox_indicator" style="display: none;">#</div>\n</div>\n')),a=u(this.options.target)[0];a.insertAdjacentHTML("afterbegin",r),this.options.targetDom=a,this.options.scrollDom=a.querySelector(".js_contactsBoxListBox"),this.options.navBarDom=a.querySelector(".js_contactsBoxKeyBar"),this.options.indicatorDom=a.querySelector(".js_indicator"),this.bindEvent(a)}},{key:"toggleObserving",value:function(t){this.options.shouldObserveScroll=t}},{key:"setNavBarSelect",value:function(t){if(this.options.showNavBar){var o=this.options.targetDom.querySelector(".js_keyBarItem.".concat(this.options.activeClassName));o&&o.classList.remove(this.options.activeClassName),t.classList.add(this.options.activeClassName)}}},{key:"showNavBar",value:function(t){var o=this;this.options.indicatorDom.innerText=t.innerText,this.options.indicatorDom.style.display="block",clearTimeout(this.$$indicatorTimer),this.$$indicatorTimer=setTimeout((function(){o.options.indicatorDom.style.display="none",o.$$indicatorTimer=null}),this.options.indicatorDuration)}},{key:"updatePosition",value:function(){var t=this;if(!(!this.options.allList.length>0)){var o=this.options.scrollDom.scrollHeight;if(this.options.scrollHeight!==o&&(this.options.scrollHeight=this.options.targetDom.scrollHeight,u(".js_contactsBoxGroup",this.options.targetDom).forEach((function(o,e){t.options.groupedList[e].positionTop=o.offsetTop})),this.options.showNavBar&&"touchmove"===this.options.navModel)){var e=this.options.navBarDom.getBoundingClientRect();this.options.touchmoveX=e.left+(e.width||6)/2}}}},{key:"getCurrentSection",value:function(t){for(var o=this.options.groupedList.length-1;o>=0;o-=1){var e=this.options.groupedList[o];if(e.positionTop<=t)return e}return this.options.groupedList[this.options.groupedList.length-1]}},{key:"handleAnchorPoint",value:function(t){var o=this;this.toggleObserving(!1),this.setNavBarSelect(t),this.showNavBar(t);var e=t.dataset.target,n=this.options.groupedList.find((function(t){return t.anchorPoint===e}));this.options.scrollDom.scrollTop=n.positionTop,setTimeout((function(){o.toggleObserving(!0)}),16),this.callHook("onScrollToAnchorPoint",t)}},{key:"handleSelect",value:function(t){var o=this;u(".js_contactsBoxGroupItem.".concat(this.options.activeClassName),this.options.targetDom).forEach((function(t){return t.classList.remove(o.options.activeClassName)}));var e=t.dataset.value;u('.js_contactsBoxGroupItem[data-value="'.concat(t.dataset.value,'"]'),this.options.targetDom).forEach((function(t){return t.classList.add(o.options.activeClassName)})),this.options.curSelect=e,this.callHook("onSelect",e,t)}},{key:"handleScrollChange",value:function(t){if(!this.isDestroy&&this.options.shouldObserveScroll){var o=t&&t.target||this.options.scrollDom,e=Math.round(o.scrollTop),n=this.getCurrentSection(e);n&&this.setNavBarSelect(this.options.targetDom.querySelector(".js_keyBarItem[data-target=".concat(n.anchorPoint,"]")))}}},{key:"handleSearch",value:function(t){this.options.searchVal=String(t.target.value).replace(/^\s+|\s+$/gm,""),this.grouping(!0),this.options.scrollDom.innerHTML=f(this.options),this.options.showNavBar&&(this.options.navBarDom.innerHTML=v(this.options)),this.updatePosition(),this.options.scrollDom.scrollTop=0}},{key:"bindEvent",value:function(t){var o=this;this.events.push({target:t,eventName:"click",handler:function(t){l(t.currentTarget,t.target,(function(t){return!(!t.className||!~t.className.indexOf("contactsBox_groupItem")||(o.handleSelect(t),0))}))}}),this.events.push({target:this.options.scrollDom,eventName:"scroll",handler:this.handleScrollChange.bind(this)}),this.options.showSearch&&this.events.push({target:this.options.targetDom.querySelector(".js_contactsBoxSearchInput"),eventName:"input",handler:p(this.handleSearch.bind(this),350)}),this.events.push({target:window,eventName:"resize",handler:p((function(){o.isDestroy||(o.updatePosition(),o.handleScrollChange())}),250)}),this.options.showNavBar&&(this.events.push({target:t,eventName:"touchstart",handler:function(t){l(t.currentTarget,t.target,(function(t){return!(!t.className||!~t.className.indexOf("js_keyBarItem")||(o.handleAnchorPoint(t),0))}))}}),"touchmove"===this.options.navModel&&(this.events.push({target:this.options.navBarDom,eventName:["touchstart","touchend"],handler:function(t){o.isDestroy||(t.preventDefault(),o.options.shouldObserveTouchMove="touchstart"===t.type)}}),this.events.push({target:document,eventName:"touchmove",handler:p((function(t){if(!o.isDestroy&&o.options.shouldObserveTouchMove){var e=document.elementFromPoint(o.options.touchmoveX,t.changedTouches[0].clientY);e&&e.classList&&e.classList.contains("js_keyBarItem")&&o.handleAnchorPoint(e)}}),80)}))),d(this.events)}},{key:"destroy",value:function(){this.isDestroy=!0,clearTimeout(this.$$indicatorTimer),d(this.events,"removeEventListener"),this.options.targetDom.removeChild(this.options.targetDom.firstElementChild),this.options=null,this.events.length=0}}])&&t(a.prototype,i),s&&t(a,s),r}();export default m;