redscorpion-utils/lib/dom/index.js

A good JavaScript tools

import{isClient}from './client';export const on=(()=>{if(isClient&&document.addEventListener){return(el,ent,handler,useCapture=false)=>{if(el&&ent&&handler){el.addEventListener(ent,handler,useCapture)}}}return(el,ent,handler)=>{if(el&&ent&&handler){el.attachEvent(`on${ ent }`,handler)}}})();export const off=(()=>{if(isClient&&document.removeEventListener){return(el,ent,handler,useCapture=false)=>{if(el&&ent){el.removeEventListener(ent,handler,useCapture)}}}return(el,ent,handler)=>{if(el&&ent){el.detachEvent(`on${ ent }`,handler)}}})();export const i18nTitle=(title='')=>{if(window&&window.$t){if(title.indexOf('$t:')===0){return window.$t(title.split('$t:')[1])}}return title};export const siteTitle=({title='',titleSuffix='',count=0})=>{let fullTitle=i18nTitle(title);if(titleSuffix){fullTitle+=` - ${ titleSuffix }`}if(count>0){fullTitle=`(${ count }条消息)${ fullTitle }`}window.document.title=fullTitle};export const requestAnimation=(task)=>{if(isClient&&'requestAnimationFrame'in window){return window.requestAnimationFrame(task)}setTimeout(task,16)};export const scrollTop=(el,from=0,to,duration=500,endCallback)=>{if(!isClient){return}if(!window.requestAnimationFrame){window.requestAnimationFrame=window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||function(callback){return window.setTimeout(callback,1000/60)}}const difference=Math.abs(from-to);const step=Math.ceil(difference/duration*50);function scroll(start,end,step){if(start===end){endCallback&&endCallback();return}let d=start+step>end?end:start+step;if(start>end){d=start-step<end?end:start-step}if(el===window){window.scrollTo(d,d)}else{el.scrollTop=d}window.requestAnimationFrame(()=>scroll(d,end,step))}scroll(from,to,step)};const camelCase=(name)=>name.replace(SPECIAL_CHARS_REGEXP,(_,separator,letter,offset)=>offset?letter.toUpperCase():letter).replace(MOZ_HACK_REGEXP,'Moz$1');export const getStyle=(el,styleName)=>{if(!isClient){return}if(!el||!styleName){return null}styleName=camelCase(styleName);if(styleName==='float'){styleName='cssFloat'}try{const computed=document.defaultView.getComputedStyle(el,'');return el.style[styleName]||computed?computed[styleName]:null}catch(e){return el.style[styleName]}};const trim=(string)=>(string||'').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g,'');export const hasClass=(el,cls)=>{if(!el||!cls){return false}if(cls.indexOf(' ')!==-1){throw new Error('className should not contain space.')}if(el.classList){return el.classList.contains(cls)}return ` ${el.className } `.indexOf(` ${ cls } `)>-1};export const addClass=(el,cls)=>{if(!el){return}let curClass=el.className;const classes=(cls||'').split(' ');for(let i=0,j=classes.length;i<j;i+=1){const clsName=classes[i];if(!clsName){continue}if(el.classList){el.classList.add(clsName)}else if(!hasClass(el,clsName)){curClass+=` ${ clsName }`}}if(!el.classList){el.className=curClass}};export const removeClass=(el,cls)=>{if(!el||!cls){return}const classes=cls.split(' ');let curClass=` ${el.className } `;for(let i=0,j=classes.length;i<j;i+=1){const clsName=classes[i];if(!clsName){continue}if(el.classList){el.classList.remove(clsName)}else if(hasClass(el,clsName)){curClass=curClass.replace(` ${ clsName } `,' ')}}if(!el.classList){el.className=trim(curClass)}};let cached;export const getScrollBarWidth=(fresh)=>{if(isClient&&(fresh||cached===undefined)){const inner=document.createElement('div');inner.style.width='100%';inner.style.height='200px';const outer=document.createElement('div');const{style:outerStyle}=outer;outerStyle.position='absolute';outerStyle.top=0;outerStyle.left=0;outerStyle.pointerEvents='none';outerStyle.visibility='hidden';outerStyle.width='200px';outerStyle.height='150px';outerStyle.overflow='hidden';outer.appendChild(inner);document.body.appendChild(outer);const widthContained=inner.offsetWidth;outer.style.overflow='scroll';let widthScroll=inner.offsetWidth;if(widthContained===widthScroll){widthScroll=outer.clientWidth}document.body.removeChild(outer);cached=widthContained-widthScroll}return cached};export default{on,off,i18nTitle,siteTitle,requestAnimation,scrollTop,getStyle,hasClass,addClass,removeClass,getScrollBarWidth};