https://artofmakingthings.com/static/js/Widgets85.912ebfc4.chunk.js

1"use strict";(self.webpackChunkartofmakingthings=self.webpackChunkartofmakingthings||[]).push([[7431,7951],{10045:function(e,a,t){t.d(a,{G1:function(){return l},GF:function(){return i},J2:function(){return s},UO:function(){return n},We:function(){return r}});var n={DELETED:"Deleted",DRAFT:"Draft",REVIEW:"Reviewing",PUBLISHED:"Published",UPDATE_REVIEW:"Reviewing Update",LIVE:"Live"},i={PARAGRAPH:"Paragraph",HEADING:"Heading",IMAGE:"Image",VIDEO:"Video",FILE:"File",WIDGET:"Widget"},s=["csv","pdf","svg"],r=["png","jpg","jpeg"],l=["mp4","avi","mov"]},29728:function(e,a,t){t.r(a),t.d(a,{default:function(){return T}});var n=t(1413),i=t(74165),s=t(15861),r=t(15671),l=t(43144),o=t(97326),u=t(60136),c=t(29388),p=(t(10839),t(40921)),h=t(7012),d=t(68945),m=t(47313),g=t(93020),v=t(44890),f=t.n(v),x=t(84526),k=t(85982),b=t(32558),j=t(6870),C=t(10045),y=t(98721),I=t(52868),w=t(51707),Z=t(4832),D=t(37069),E=t(46417);function M(e){var a=e.className,t=void 0===a?"":a;return(0,E.jsxs)("svg",{className:"pencil-icon "+t,viewBox:"0 0 600 600",y:"0px",x:"0px",children:[(0,E.jsx)("path",{d:"M 444.33398,26.876953 56.074219,415.125 55.275391,419.8418 29.773438,570.23047 184.87891,543.92969 573.12695,155.66992 444.33398,26.876953 Z m 0,42.425781 86.36719,86.367186 L 170.42969,515.95117 66.414062,533.58984 84.054688,429.57227 444.33398,69.302734 Z"}),(0,E.jsx)("path",{d:"M 79.408203,408.9707 61.730469,426.64844 172.33984,537.25977 190.01758,519.58203 79.408203,408.9707 Z"}),(0,E.jsx)("path",{d:"M 482.63086,99.53125 115.94141,466.21094 133.61914,483.88867 500.30859,117.20898 482.63086,99.53125 Z"}),(0,E.jsx)("path",{d:"M 62.902344,498.26562 45.541016,516.25391 86.515625,555.80078 103.87695,537.8125 62.902344,498.26562 Z"})]})}var P=(0,m.memo)(M),S=t(58847),W=t(82123),R=t(62375),U=t(41881),G=t(55122),L={openModal:k.h7,closeModal:k.Mr},N=(0,p.W8)((function(e){var a=e.value;return(0,E.jsx)("div",{children:a.value},a.name)})),_=(0,p.JN)((function(e){var a=e.items,t=e.disabled;return(0,E.jsx)("div",{className:"image-editor__image-grid",children:a.map((function(e,a){return(0,E.jsx)(N,{index:a,disabled:t,value:e},e.name)}))})})),A=function(e){(0,u.Z)(t,e);var a=(0,c.Z)(t);function t(e){var n;return(0,r.Z)(this,t),(n=a.call(this)).state={value:{images:[],type:"GRID",caption:""},placeholders:[],isUploading:!1},(0,g.Z)((0,o.Z)(n)),n}return(0,l.Z)(t,[{key:"componentDidMount",value:function(){this.props.mountCallback(),null!==this.props.value&&this.props.value.images.length>0&&this.setState({value:this.props.value})}},{key:"componentDidUpdate",value:function(e){null!==this.props.value&&null===e.value&&this.setState({value:this.props.value})}},{key:"onReorder",value:function(e){var a=(0,h.reorder)(this.state.value.images,e.oldIndex,e.newIndex);this.setState({isDragging:!1});var t=this.state.value;t.images=a,this.onChange(t)}},{key:"handleImageChange",value:function(){var e=(0,s.Z)((0,i.Z)().mark((function e(a){var t,n,r,l,o,u=this;return(0,i.Z)().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:a.preventDefault(),t=this.state.value,n=t.images,r=Array.from(a.target.files),l=[],o=0;case 6:if(!(o<r.length)){e.next=19;break}if(!(r[o].size>2e7)){e.next=11;break}return"We can't complete this upload, as one or more of your images are over 20Mb. Please upload images under 20Mb.",this.props.openModal("GeneralComplete",{message:"We can't complete this upload, as one or more of your images are over 20Mb. Please upload images under 20Mb."}),e.abrupt("return");case 11:if(-1!==C.We.indexOf(r[o].name.split(".").pop().toLowerCase())){e.next=15;break}return"We can't complete this upload, as this file has the wrong file type! Please submit an allowed file type.",this.props.openModal("GeneralComplete",{message:"We can't complete this upload, as this file has the wrong file type! Please submit an allowed file type."}),e.abrupt("return");case 15:l.push({name:"placeholder"+r[o].name,src:null});case 16:o++,e.next=6;break;case 19:return this.setState({placeholders:l,isUploading:!0}),e.next=22,Promise.all(r.map(function(){var e=(0,s.Z)((0,i.Z)().mark((function e(a,s){var r,o;return(0,i.Z)().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return(r={}).file=a,r.name=a.name,e.next=5,u.props.uploadArticleImage(r);case 5:o=e.sent,r.name=o.name,r.alt="",n.push(r),(t=u.state.value).images=n,(l=u.state.placeholders).pop(),u.setState({value:t,placeholders:l});case 14:case"end":return e.stop()}}),e)})));return function(a,t){return e.apply(this,arguments)}}()));case 22:(t=this.state.value).images=n,this.setState({placeholders:[],isUploading:!1}),this.onChange(t);case 26:case"end":return e.stop()}}),e,this)})));return function(a){return e.apply(this,arguments)}}()},{key:"onChange",value:function(e){var a=this;this.setState({value:e}),this.props.startIdleTime("finishTyping",500,(function(){return a.props.changeCallback(structuredClone(e),a.props.index)}))}},{key:"changeDisplayType",value:function(e){var a=this.state.value;a.type=e,this.onChange(a)}},{key:"updateCaption",value:function(e){var a=(0,n.Z)({},this.state.value);a.caption=e,this.onChange(a)}},{key:"generateImages",value:function(e,a){var t=this;return{value:(0,E.jsx)("div",{className:"image-editor__preview-img-wrapper",children:(0,E.jsxs)(W.x,{children:[(0,E.jsxs)("div",{className:"image-editor__preview-img-tools",children:[(0,E.jsx)(Z.Z,{clickable:!0,size:"small",hasBorder:!1,hasShadow:!0,onClick:function(e){return t.removeImage(a)},decoration:"circle",fill:"white",children:(0,E.jsx)(D.Z,{})}),(0,E.jsx)(Z.Z,{clickable:!0,size:"small",hasBorder:!1,hasShadow:!0,onClick:function(n){return t.editImageHandler(e,a)},decoration:"circle",fill:"white",children:(0,E.jsx)(P,{})})]}),(0,E.jsx)(x.ZP,{height:240,offset:600,once:!0,children:(0,E.jsx)(f(),{src:[j.mQ+(0,b.d7)(e.name),j.mQ+e.name],className:"image-editor__preview-img",draggable:!1})},e.name)]},e.name)},e.name),name:e.name}}},{key:"removeImage",value:function(e){var a=this.props.value,t=a.images;t.splice(e,1),a.images=t,this.onChange(a)}}

1,{key:"editImageHandler",value:function(e,a){this.props.openModal("EditImage",{image:e,index:a,callback:this.editImageCallback})}},{key:"editImageCallback",value:function(e,a){var t=this.props.value,n=t.images;n[a]=e,t.images=n,this.onChange(t),this.props.closeModal()}},{key:"generatePlaceholderImages",value:function(e,a){return{value:(0,E.jsxs)("div",{className:"image-editor__preview-img-loader",children:[(0,E.jsx)("p",{className:"text--bold",children:"Loading"}),(0,E.jsx)(I.Z,{dotSize:"small"})]},e.name),name:e.name}}},{key:"render",value:function(){var e=this,a=this.state.value.images,t=this.state.placeholders.map(this.generatePlaceholderImages),n=a.map(this.generateImages),i=this.state.value.caption;return(0,E.jsx)("div",{className:"image-editor ",ref:function(a){return(0,b.k$)(e,a,"editorWrapper")},children:this.props.isDragging?(0,E.jsx)(W.x,{center:!0,flex:"1 0 auto",children:(0,E.jsx)("h3",{children:a.length+" images"})}):(0,E.jsxs)(W.x,{column:!0,children:[(0,E.jsx)(_,{pressDelay:this.props.isDesktop?0:200,axis:"xy",items:n.concat(t),disabled:this.state.isUploading,onSortEnd:this.onReorder,shouldCancelStart:function(e){return null!==e.target.closest(".icon")}}),(0,E.jsxs)(W.x,{column:!0,width:"100%",marginTop:".5em",children:[(0,E.jsx)("label",{children:"Caption"}),(0,E.jsx)(w.Z,{name:"caption",fieldType:"box",value:i,changeCallback:this.updateCaption,blurCallback:this.updateCaption})]}),(0,E.jsx)(W.x,{column:!0,center:!0,children:(0,E.jsxs)(W.x,{center:!0,width:"100%",children:[(0,E.jsx)(S.Z,{accept:C.We.map((function(e){return"."+e})).join(", "),multiple:!0,color:"blue",isDisabled:this.state.isUploading,isFileInput:!0,onChangeCallback:this.handleImageChange,children:"Upload Images"}),(0,E.jsxs)(y.Z,{width:"small",headerBackground:"white",headerShadow:!0,selectable:!0,value:this.state.value.type,callback:this.changeDisplayType,children:[(0,E.jsx)("span",{value:"GRID",children:"Grid"}),(0,E.jsx)("span",{value:"CAROUSEL",children:"Carousel"})]})]})})]})})}}]),t}(m.Component);A.defaultProps={name:"default",value:null,index:void 0,isDragging:!1,changeCallback:function(){return!1},mountCallback:function(){return!1}};var T=(0,G.Z)((0,U.Z)((0,R.Z)((0,d.$j)((function(e){return{isLoading:e.isLoading,isDesktop:e.isDesktop}}),L)(A))))},10839:function(e,a,t){t.r(a),a.default={}}}]);