jodit-pro
Version:
PRO Version of Jodit Editor
80 lines (79 loc) • 5.15 kB
JavaScript
var v=Object.defineProperty;var o=(m,i)=>v(m,"name",{value:i,configurable:!0});import{Dom as s}from"jodit/esm/core/dom/dom.js";import{toArray as c}from"jodit/esm/core/helpers/array/to-array.js";import{assert as p}from"jodit/esm/core/helpers/utils/assert.js";import{UIElement as _,UIInput as u,UISelect as x}from"jodit/esm/core/ui/index.js";import{UIRange as g}from"../../../../core/ui/form/range/range.js";const r=class r extends _{className(){return"UIFormButtonGenerator"}constructor(i,n,l){super(i),this.state=n,this.updateState=l,this.onUpdates=[];const d=o((e,t)=>()=>{let a=this.state[t.name];/px/.test(a.toString())&&(a=a.toString().replace(/px/,"")),a.toString()!==e.value&&(e.value=a)},"getOnUpdate");c(this.container.querySelectorAll("input,select")).forEach(e=>{if(s.isTag(e,"select")){const t=new x(this.j,{options:c(e.options).map(a=>({text:a.innerText,value:a.value})),onChange:o(a=>{this.updateState(e.name,a)},"onChange")});s.replace(e,t.container,this.j.create,!1,!0),this.onUpdates.push(d(t,e));return}if(s.isTag(e,"input"))switch(e.type){case"range":{const t=new g(this.j,{label:e.placeholder,name:e.name,min:parseInt(e.min,0)||0,max:parseInt(e.max,0)||100,onChange:o(a=>{this.updateState(e.name,parseInt(a,10))},"onChange")});s.replace(e,t.container,this.j.create),this.onUpdates.push(d(t,e));return}case"text":{const t=new u(this.j,{placeholder:e.placeholder,name:e.name,onChange:o(a=>{this.updateState(e.name,a)},"onChange")});s.replace(e,t.container,this.j.create),this.onUpdates.push(d(t,e));return}case"checkbox":e.onchange=()=>this.updateState(e.name,e.checked),this.onUpdates.push(()=>{e.checked=this.state[e.name]});return}}),this.update()}update(){this.onUpdates.forEach(l=>l());const i=this.getElm("box-shadow");p(i!=null,"box-shadow does not exists");const n=this.getElm("text-shadow");p(n!=null,"text-shadow does not exists"),i.style.display=this.state.boxShadow?"":"none",n.style.display=this.state.textShadow?"":"none"}render(){return`<div>
<div class='&__group &__text'>
<div class='&__title'>Text</div>
<div class='&__row'>
<div class='&__col'>
<input type='text' name='text'/>
<input type='text' name='className' placeholder='~Class name~'/>
<input type='text' name='href' placeholder='~URL~'/>
<select name='fontFamily'>
<option value='Arial'>Arial</option>
<option value='Courier New'>Courier New</option>
<option value='Georgia'>Georgia</option>
<option value='Impact'>Impact</option>
<option value='Times New Roman'>Times New Roman</option>
<option value='Trebuchet MS'>Trebuchet MS</option>
<option value='Verdana'>Verdana</option>
</select>
</div>
<div class='&__col'>
<input type='range' min='8' max='28' name='fontSize' placeholder='~Font Size~'/>
<div class='&__checkboxes'>
<label>
<input type='checkbox' name='fontWeight'/> bold
</label>
<label>
<input type='checkbox' name='fontItalic'/> italic
</label>
</div>
</div>
</div>
</div>
<div class='&__group &__sizes'>
<div class='&__title'>~Size~</div>
<div class='&__row'>
<div class='&__col'>
<input type='range' name='paddingX' min='0' max='32' placeholder='~Vertical size~'/>
</div>
<div class='&__col'>
<input type='range' name='paddingY' min='0' max='76' placeholder='~Horizontal size~'/>
</div>
</div>
</div>
<div class='&__group &__borders'>
<div class='&__title'>~Border~</div>
<div class='&__row'>
<div class='&__col'>
<input type='range' name='borderRadius' min='0' max='42' placeholder='~Border Radius~'/>
</div>
<div class='&__col'>
<input type='range' name='borderSize' min='0' max='12' placeholder='~Border Size~'/>
</div>
</div>
</div>
<div class='&__group'>
<div class='&__title'>~Box Shadow~ <input type='checkbox' name='boxShadow'/></div>
<div class='&__row &__box-shadow'>
<div class='&__col'>
<input type='range' name='boxShadowOffsetX' min='-50' max='50' placeholder='~Vertical Position~'/>
<input type='range' name='boxShadowBlurRadius' min='0' max='50' placeholder='~Blur Radius~'/>
</div>
<div class='&__col'>
<input type='range' name='boxShadowOffsetY' min='-50' max='50' placeholder='~Horizontal Position~'/>
<input type='range' name='boxShadowSpreadRadius' min='-50' max='50' placeholder='~Spread Radius~'/>
</div>
</div>
</div>
<div class='&__group'>
<div class='&__title'>~Text Shadow~ <input type='checkbox' name='textShadow'/></div>
<div class='&__row &__text-shadow'>
<div class='&__col'>
<input type='range' name='textShadowOffsetX' min='-50' max='50' placeholder='~Vertical Position~'/>
<input type='range' name='textShadowBlurRadius' min='0' max='50' placeholder='~Blur Radius~'/>
</div>
<div class='&__col'>
<input type='range' name='textShadowOffsetY' min='-50' max='50' placeholder='~Horizontal Position~'/>
</div>
</div>
</div>
</div>`}};o(r,"UIFormButtonGenerator");let h=r;export{h as UIFormButtonGenerator};