grapesjs-style-gradient/dist/index.js

Add gradient input to the Style Manager in GrapesJS

/*! grapesjs-style-gradient - 3.0.3 */
!function(e,t){'object'==typeof exports&&'object'==typeof module?module.exports=t():'function'==typeof define&&define.amd?define([],t):'object'==typeof exports?exports["grapesjs-style-gradient"]=t():e["grapesjs-style-gradient"]=t()}('undefined'!=typeof globalThis?globalThis:'undefined'!=typeof window?window:this,(()=>(()=>{var e={9:function(e){"undefined"!=typeof self&&self,1&&(e.exports=function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=1)}([function(e,t,n){"use strict";function r(e,t,n){t=t.split(/\s+/);for(var r=0;r<t.length;++r)e.addEventListener(t[r],n)}function i(e,t,n){t=t.split(/\s+/);for(var r=0;r<t.length;++r)e.removeEventListener(t[r],n)}Object.defineProperty(t,"__esModule",{value:!0}),t.on=r,t.off=i,t.isFunction=function(e){return"function"==typeof e},t.isDef=function(e){return void 0!==e},t.getPointerEvent=function(e){return e.touches&&e.touches[0]||e}},function(e,t,n){"use strict";var r=function(e){return e&&e.__esModule?e:{default:e}}(n(2));e.exports=function(e){return new r.default(e)}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var c=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),u=r(n(3)),s=r(n(4)),d=n(0),f=function(e,t){return e.position-t.position},h=function(e){return e+"-gradient("},p=function(e){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};o(this,t);var n=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));e=Object.assign({},e);var r={pfx:"grp",el:".grp",colorEl:"",min:0,max:100,direction:"90deg",type:"linear",height:"30px",width:"100%",emptyColor:"#000",onValuePos:function(e){return parseInt(e)}};for(var i in r)i in e||(e[i]=r[i]);var l=e.el;if(!((l="string"==typeof l?document.querySelector(l):l)instanceof HTMLElement))throw"Element not found, given "+l;return n.el=l,n.handlers=[],n.options=e,n.on("handler:color:change",(function(e,t){return n.change(t)})),n.on("handler:position:change",(function(e,t){return n.change(t)})),n.on("handler:remove",(function(e){return n.change(1)})),n.on("handler:add",(function(e){return n.change(1)})),n.render(),n}return l(t,e),c(t,[{key:"destroy",value:function(){var e=this;this.clear(),this.e={},["el","handlers","options","colorPicker"].forEach((function(t){return e[t]=0})),["previewEl","wrapperEl","sandEl"].forEach((function(t){var n=e[t];n&&n.parentNode&&n.parentNode.removeChild(n),delete e[t]}))}},{key:"setColorPicker",value:function(e){this.colorPicker=e}},{key:"getValue",value:function(e,t){var n=this.getColorValue(),r=e||this.getType(),i=["top","left","bottom","right","center"],o=t||this.getDirection();return["linear","repeating-linear"].indexOf(r)>=0&&i.indexOf(o)>=0&&(o="center"===o?"to right":"to "+o),["radial","repeating-radial"].indexOf(r)>=0&&i.indexOf(o)>=0&&(o="circle at "+o),n?r+"-gradient("+o+", "+n+")":""}},{key:"getSafeValue",value:function(e,t){var n=this.previewEl,r=this.getValue(e,t);if(!this.sandEl&&(this.sandEl=document.createElement("div")),!n||!r)return"";for(var o=this.sandEl.style,a=[r].concat(i(this.getPrefixedValues(e,t))),l=void 0,c=0;c<a.length&&(l=a[c],o.backgroundImage=l,o.backgroundImage!=l);c++);return o.backgroundImage}},{key:"setValue",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=this.type,i=this.direction,o=t.indexOf("(")+1,a=t.lastIndexOf(")"),l=t.substring(o,a),c=l.split(/,(?![^(]*\)) /);if(this.clear(n),l){c.length>2&&(i=c.shift());var u=void 0;["repeating-linear","repeating-radial","linear","radial"].forEach((function(e){t.indexOf(h(e))>-1&&!u&&(u=1,r=e)})),this.setDirection(i,n),this.setType(r,n),c.forEach((function(t){var r=t.split(" "),i=parseFloat(r.pop()),o=r.join("");e.addHandler(i,o,0,n)})),this.updatePreview()}else this.updatePreview()}},{key:"getColorValue",value:function(){var e=this.handlers;return e.sort(f),(e=1==e.length?[e[0],e[0]]:e).map((function(e){return e.getValue()})).join(", ")}},{key:"getPrefixedValues",value:function(e,t){var n=this.getValue(e,t);return["-moz-","-webkit-","-o-","-ms-"].map((function(e){return""+e+n}))}},{key:"change",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.updatePreview(),!t.silent&&this.emit("change",e)}},{key:"setDirection",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.options.direction=e;var n=t.complete,r=void 0===n?1:n;this.change(r,t)}},{key:"getDirection",value:function(){return this.options.direction}},{key:"setType",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.options.type=e;var n=t.complete,r=void 0===n?1:n;this.change(r,t)}},{key:"getType",value:function(){return this.options.type}},{key:"addHandler",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},i=new s.default(this,e,t,n,r);return!r.silent&&this.emit("handler:add",i),i}},{key:"getHandler",value:function(e){return this.handlers[e]}},{key:"getHandlers",value:function(){return this.handlers}},{key:"clear",value:function(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=this.handlers,n=t.length-1;n>=0;n--)t[n].remove(e)}},{key:"getSelected",value:function(){for(var e=this.getHandlers(),t=0;t<e.length;t++){var n=e[t];if(n.isSelected())return n}return null}},{key:"updatePreview",value:function(){var e=this.previewEl;e&&(e.style.backgroundImage=this.getValue("linear","to right"))}},{key:"initEvents",value:function(){var e=this,t=this.previewEl;t&&(0,d.on)(t,"click",(function(n){var r=e.options,i=r.min,o=r.max,a={w:t.clientWidth,h:t.clientHeight},l=n.offsetX-t.clientLeft,c=n.offsetY-t.clientTop,u=l/a.w*100;if(!(u>o||u<i||c>a.h||c<0)){var s=document.createElement("canvas"),d=s.getContext("2d");s.width=a.w,s.height=a.h;var f=d.createLinearGradient(0,0,a.w,a.h);e.getHandlers().forEach((function(e){return f.addColorStop(e.position/100,e.color)})),d.fillStyle=f,d.fillRect(0,0,s.width,s.height),s.style.background="black";var h=s.getContext("2d").getImageData(l,c,1,1).data,p="rgba("+h[0]+", "+h[1]+", "+h[2]+", "+h[3]+")",v="rgba(0, 0, 0, 0)"==p?r.emptyColor:p;e.addHandler(u,v)}}))}},{key:"render",value:function(){var e=this.options,t=this.el,n=e.pfx,r=e.height,i=e.width;if(t){var o=n+"-wrapper",a=n+"-preview";t.innerHTML='\n      <div class="'+o+'">\n        <div class="'+a+'"></div>\n      </div>\n    ';var l=t.querySelector("."+o),c=t.querySelector("."+a),u=l.style;u.position="relative",this.wrapperEl=l,this.previewEl=c,r&&(u.height=r),i&&(u.width=i),this.initEvents(),this.updatePreview()}}}]),t}(u.default);t.default=p},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),o=function(){function e(){r(this,e)}return i(e,[{key:"on",value:function(e,t,n){var r=this.e||(this.e={});return(r[e]||(r[e]=[])).push({fn:t,ctx:n}),this}},{key:"once",value:function(e,t,n){function r(){i.off(e,r),t.apply(n,arguments)}var i=this;return r._=t,this.on(e,r,n)}},{key:"emit",value:function(e){for(var t=[].slice.call(arguments,1),n=((this.e||(this.e={}))[e]||[]).slice(),r=0,i=n.length;r<i;r++)n[r].fn.apply(n[r].ctx,t);return this}},{key:"off",value:function(e,t){var n=this.e||(this.e={}),r=n[e],i=[];if(r&&t)for(var o=0,a=r.length;o<a;o++)r[o].fn!==t&&r[o].fn._!==t&&i.push(r[o]);return i.length?n[e]=i:delete n[e],this}}]),e}();t.default=o},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),o=n(0),a=function(){function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"black",o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};r(this,e),t.getHandlers().push(this),this.gp=t,this.position=n,this.color=i,this.selected=0,this.render(),o&&this.select(a)}return i(e,[{key:"toJSON",value:function(){return{position:this.position,selected:this.selected,color:this.color}}},{key:"setColor",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;this.color=e,this.emit("handler:color:change",this,t)}},{key:"setPosition",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,n=this.getEl();this.position=e,n&&(n.style.left=e+"%"),this.emit("handler:position:change",this,t)}},{key:"getColor",value:function(){return this.color}},{key:"getPosition",value:function(){var e=this.position,t=this.gp.options.onValuePos;return(0,o.isFunction)(t)?t(e):e}},{key:"isSelected",value:function(){return!!this.selected}},{key:"getValue",value:function(){return this.getColor()+" "+this.getPosition()+"%"}},{key:"select",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=this.getEl(),n=this.gp.getHandlers();!e.keepSelect&&n.forEach((function(e){return e.deselect()})),this.selected=1;var r=this.getSelectedCls();t&&(t.className+=" "+r),this.emit("handler:select",this)}},{key:"deselect",value:function(){var e=this.getEl();this.selected=0;var t=this.getSelectedCls();e&&(e.className=e.className.replace(t,"").trim()),this.emit("handler:deselect",this)}},{key:"getSelectedCls",value:function(){return this.gp.options.pfx+"-handler-selected"}},{key:"remove",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=this.cpFn,r=this.getEl(),i=this.gp.getHandlers(),a=i.splice(i.indexOf(this),1)[0];return r&&r.parentNode.removeChild(r),!t.silent&&this.emit("handler:remove",a),(0,o.isFunction)(n)&&n(this),["el","gp"].forEach((function(t){return e[t]=0})),a}},{key:"getEl",value:function(){return this.el}},{key:"initEvents",value:function(){var e=this,t=this.getEl(),n=this.gp.previewEl,r=this.gp.options,i=r.min,a=r.max,l=t.querySelector("[data-toggle=handler-close]"),c=t.querySelector("[data-toggle=handler-color-c]"),u=t.querySelector("[data-toggle=handler-color-wrap]"),s=t.querySelector("[data-toggle=handler-color]"),d=t.querySelector("[data-toggle=handler-drag]"),f=function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,r=t.target.value;e.setColor(r,n),u&&(u.style.backgroundColor=r)};if(c&&(0,o.on)(c,"click",(function(e){return e.stopPropagation()})),l&&(0,o.on)(l,"click",(function(t){t.stopPropagation(),e.remove()})),s&&((0,o.on)(s,"change",f),(0,o.on)(s,"input",(function(e){return f(e,0)}))),d){var h=0,p=0,v=0,g={},y={},m={},b=function(t){var n=(0,o.getPointerEvent)(t);v=1,m.x=n.clientX-y.x,m.y=n.clientY-y.y,h=100*m.x,h/=g.w,h=(h=(h=p+h)<i?i:h)>a?a:h,e.setPosition(h,0),e.emit("handler:drag",e,h),(0,o.isDef)(t.button)&&0===t.which&&k(t)},k=function t(n){(0,o.off)(document,"touchmove mousemove",b),(0,o.off)(document,"touchend mouseup",t),v&&(v=0,e.setPosition(h),e.emit("handler:drag:end",e,h))},w=function(t){if(!(0,o.isDef)(t.button)||0===t.button){e.select();var r=(0,o.getPointerEvent)(t);p=e.position,g.w=n.clientWidth,g.h=n.clientHeight,y.x=r.clientX,y.y=r.clientY,(0,o.on)(document,"touchmove mousemove",b),(0,o.on)(document,"touchend mouseup",k),e.emit("handler:drag:start",e)}};(0,o.on)(d,"touchstart mousedown",w),(0,o.on)(d,"click",(function(e){return e.stopPropagation()}))}}},{key:"emit",value:function(){var e;(e=this.gp).emit.apply(e,arguments)}},{key:"render",value:function(){var e=this.gp,t=e.options,n=e.previewEl,r=e.colorPicker,i=t.pfx,o=t.colorEl,a=this.getColor();if(n){var l=document.createElement("div"),c=l.style,u=i+"-handler";return l.className=u,l.innerHTML='\n      <div class="'+u+'-close-c">\n        <div class="'+u+'-close" data-toggle="handler-close">&Cross;</div>\n      </div>\n      <div class="'+u+'-drag" data-toggle="handler-drag"></div>\n      <div class="'+u+'-cp-c" data-toggle="handler-color-c">\n        '+(o||'\n          <div class="'+u+'-cp-wrap" data-toggle="handler-color-wrap" style="background-color: '+a+'">\n            <input type="color" data-toggle="handler-color" value="'+a+'">\n          </div>')+"\n      </div>\n    ",c.position="absolute",c.top=0,c.left=this.position+"%",n.appendChild(l),this.el=l,this.initEvents(),this.cpFn=r&&r(this),l}}}]),e}();t.default=a}]))}},t={};function n(r){var i=t[r];if(void 0!==i)return i.exports;var o=t[r]={exports:{}};return e[r].call(o.exports,o,o.exports,n),o.exports}n.n=e=>{var t=e&&e.__esModule?()=>e['default']:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{'undefined'!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:'Module'}),Object.defineProperty(e,'__esModule',{value:!0})};var r={};return(()=>{"use strict";n.r(r),n.d(r,{GRAD_DIRS:()=>u,GRAD_TYPES:()=>s,default:()=>g,getValidDir:()=>c,parseGradient:()=>a,toGradient:()=>l});var e=n(9),t=n.n(e),i=void 0&&(void 0).__assign||function(){return i=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},i.apply(this,arguments)},o=void 0&&(void 0).__spreadArray||function(e,t,n){if(n||2===arguments.length)for(var r,i=0,o=t.length;i<o;i++)!r&&i in t||(r||(r=Array.prototype.slice.call(t,0,i)),r[i]=t[i]);return e.concat(r||Array.prototype.slice.call(t))},a=function(e){var t=e.indexOf('(')+1,n=e.lastIndexOf(')'),r=e.substring(t,n),i=r.split(/,(?![^(]*\))/),o={direction:'left',type:'linear',content:r,colors:r,stops:[]};if(!r)return o;i.length>2&&(o.direction=i.shift(),o.colors=i.join(',').trim());var a=!1;return['repeating-linear','repeating-radial','linear','radial'].forEach((function(t){e.indexOf(function(e){return"".concat(e,"-gradient(")}(t))>-1&&!a&&(a=!0,o.type=t)})),o.stops=i.map((function(e){var t=e.split(' '),n=(t.length>1?t.pop():'').trim();return{color:t.join(' ').trim(),position:n}})),o},l=function(e,t,n){var r=o(o([],u,!0),['center'],!1),i=t;return['linear','repeating-linear'].indexOf(e)>=0&&r.indexOf(i)>=0&&(i='center'===i?'to right':"to ".concat(i)),['radial','repeating-radial'].indexOf(e)>=0&&r.indexOf(i)>=0&&(i="circle at ".concat(i)),n?"".concat(e,"-gradient(").concat(i,", ").concat(n,")"):''},c=function(e){return u.filter((function(t){return e.indexOf(t)>-1}))[0]},u=['right','bottom','left','top'],s=['linear','radial','repeating-linear','repeating-radial'],d='[data-toggle="handler-color-wrap"]',f='background-image-gradient',h="".concat(f,"-dir"),p="".concat(f,"-type");var v=void 0&&(void 0).__assign||function(){return v=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},v.apply(this,arguments)};const g=function(e,n){void 0===n&&(n={}),function(e,n){void 0===n&&(n={});var r=e.getModel(),o=e.Styles,v=n.colorPicker,g=n.builtInType,y=n.styleType,m=function(t){var n=t.getEl().querySelector(d),r=e.$(n);r.spectrum&&r.spectrum('destroy')};y&&o.addType(y,{create:function(e){var o=e.change,a=document.createElement('div');a.className='gp-container',a.style.width='100%';var l=new(t())(i({el:a},n.grapickOpts));return l.on('change',(function(e){return o({value:l.getValue(),partial:!e})})),this.gp=l,'default'===v&&(v=function(e){var t=e.getEl(),n=t.querySelector(d),i=t.querySelector('input');null==i||i.parentNode.removeChild(i);var o=n.style;o.backgroundColor=e.getColor();var a=function(t,n){void 0===n&&(n=1);var r=function(e){return(1==e.getAlpha()?e.toHexString():e.toRgbString()).replace(/ /g,'')}(t);o.backgroundColor=r,e.setColor(r,n)};r.initBaseColorPicker(n,{color:e.getColor(),change:function(e){a(e)},move:function(e){a(e,0)}})},l.on('handler:remove',m)),v&&l.setColorPicker(v),a},emit:function(e,t){var n=e.updateStyle,r=t.partial;n(t.value,{partial:r})},update:function(e){var t=e.value,r=this.gp;if(r.getValue()!==t){var i=r.getHandlers();i.map(m),r.setValue(t,{silent:!0}),n.selectEdgeStops&&[i[0],i[i.length-1]].filter(Boolean).map((function(e){return e.select({keepSelect:!0})}))}},destroy:function(){var e;null===(e=this.gp)||void 0===e||e.destroy()}}),g&&o.addBuiltIn(g,{type:'composite',fromStyle:function(e,t){var n,r=t.name,i=a(e[r]||''),o=i.type||s[0],d=c(i.direction)||u[0];return(n={})[f]=l(o,d,i.colors),n[p]=o,n[h]=d,n},toStyle:function(e,t){var n,r=t.name,i=e[f]||'',o=e[p]||s[0],c=e[h]||u[0],d=a(i),v=l(o,c,d.colors);return(n={})[r]=v,n},properties:[{name:' ',full:!0,defaults:'none',type:y,property:f},{name:'Direction',type:'select',defaults:'right',property:h,options:u.map((function(e){return{value:e}}))},{name:'Type',type:'select',defaults:'linear',property:p,options:s.map((function(e){return{value:e}}))}]})}(e,v({grapickOpts:{},selectEdgeStops:!0,styleType:'gradient',builtInType:'background-image'},n))}})(),r})()));
//# sourceMappingURL=index.js.map