← All changes
|
assets/js/packages/editor-widget-creation/editor-widget-creation.js
+236
-2
4.1.0-dev3
→
4.3.2
View file →
| @@ -1,3 +1,237 @@ | ||
| 1 | -/*! For license information please see editor-widget-creation.js.LICENSE.txt */ | |
| 2 | -!function(){"use strict";var e={"./packages/packages/core/editor-widget-creation/src/components/create-widget.tsx":function(e,t,n){n.r(t),n.d(t,{CreateWidget:function(){return CreateWidget}});var r=n("react"),o=n("@elementor/editor-mcp"),i=n("@elementor/editor-ui"),a=n("@elementor/events"),l=n("@elementor/icons"),c=n("@elementor/ui"),s=n("@wordpress/i18n");const d="elementor/editor/create-widget",_="https://assets.elementor.com/packages/v1/images/angie-modal-promotion.png",m="ai_widget_cta_clicked",u="angie_install_started",p="angie_install_completed",g="angie_install_abandoned";function CreateWidgetModal({prompt:e,entryPoint:t,onClose:n}){const[d,m]=(0,r.useState)("idle"),[w,f]=(0,r.useState)(!1),handleClose=()=>{"installing"!==d&&((0,a.trackEvent)({eventName:g,abandon_step:"error"===d?"install_error":"install_modal",trigger_source:t}),n())};return r.createElement(i.ThemeProvider,null,r.createElement(c.Dialog,{fullWidth:!0,maxWidth:"md",open:!0,onClose:handleClose},r.createElement(c.IconButton,{"aria-label":(0,s.__)("Close","elementor"),onClick:handleClose,sx:{position:"absolute",right:8,top:8,zIndex:1}},r.createElement(l.XIcon,null)),r.createElement(c.DialogContent,{sx:{p:0,overflow:"hidden"}},r.createElement(c.Stack,{direction:"row",sx:{height:400}},r.createElement(c.Image,{sx:{height:"100%",aspectRatio:"1 / 1",objectFit:"cover",objectPosition:"right center"},src:_}),r.createElement(c.Stack,{justifyContent:"space-between",p:4},r.createElement(c.Stack,{gap:2.5,justifyContent:"center",sx:{flex:1,paddingInlineEnd:2.5}},r.createElement(c.Typography,{variant:"h4",fontWeight:600,color:"text.secondary"},"error"===d?(0,s.__)("Installation failed","elementor"):(0,s.__)("Create custom widgets with Angie","elementor")),r.createElement(c.Typography,{variant:"body2"},"error"===d?(0,s.__)("We couldn't install Angie automatically. Click below to install it manually.","elementor"):(0,s.__)("Build custom widgets, sections, and code using simple instructions. Install once to start building directly from the editor.","elementor")),"error"!==d&&r.createElement(c.FormControlLabel,{control:r.createElement(c.Checkbox,{size:"small",checked:w,onChange:(e,t)=>f(t)}),label:r.createElement(c.Typography,{variant:"body2",color:"text.secondary"},(0,s.__)("I agree to the","elementor"),r.createElement(c.Link,{sx:{px:.5},href:"https://elementor.com/terms/angie-terms-conditions/",target:"_blank",rel:"noopener noreferrer"},(0,s.__)("Terms","elementor")),(0,s.__)("&","elementor"),r.createElement(c.Link,{sx:{px:.5},href:"https://elementor.com/about/privacy/",target:"_blank",rel:"noopener noreferrer"},(0,s.__)("Privacy Policy.","elementor")))})),r.createElement(c.Stack,{direction:"row",justifyContent:"flex-end"},"error"===d?r.createElement(c.Button,{variant:"contained",color:"accent",onClick:()=>{(0,o.redirectToInstallation)(e)}},(0,s.__)("Install Manually","elementor")):r.createElement(c.Button,{variant:"contained",color:"accent",onClick:async()=>{m("installing"),(0,a.trackEvent)({eventName:u,trigger_source:t});const[n]=await Promise.all([(0,o.installAngiePlugin)(),(0,o.saveAngieConsent)()]);n.success?((0,a.trackEvent)({eventName:p,trigger_source:t}),(0,o.redirectToAppAdmin)(e)):m("error")},disabled:"installing"===d||!w,startIcon:"installing"===d?r.createElement(c.CircularProgress,{size:18,color:"inherit"}):void 0},"installing"===d?(0,s.__)("Installing…","elementor"):(0,s.__)("Install & Activate","elementor"))))))))}function CreateWidget(){const[e,t]=(0,r.useState)(null);return(0,r.useEffect)(()=>{const handleShow=e=>{const n=e,r=(0,o.isAngieAvailable)();(0,a.trackEvent)({eventName:m,entry_point:n.detail.entry_point,has_angie_installed:r}),r?(0,o.sendPromptToAngie)(n.detail?.prompt):t(n.detail)};return window.addEventListener(d,handleShow),()=>{window.removeEventListener(d,handleShow)}},[]),e?r.createElement(CreateWidgetModal,{prompt:e.prompt,entryPoint:e.entry_point,onClose:()=>t(null)}):null}},"./packages/packages/core/editor-widget-creation/src/init.ts":function(e,t,n){n.r(t),n.d(t,{init:function(){return init}});var r=n("@elementor/editor"),o=n("./packages/packages/core/editor-widget-creation/src/components/create-widget.tsx");function init(){(0,r.injectIntoTop)({id:"create-widget",component:o.CreateWidget})}},"@elementor/editor":function(e){e.exports=window.elementorV2.editor},"@elementor/editor-mcp":function(e){e.exports=window.elementorV2.editorMcp},"@elementor/editor-ui":function(e){e.exports=window.elementorV2.editorUi},"@elementor/events":function(e){e.exports=window.elementorV2.events},"@elementor/icons":function(e){e.exports=window.elementorV2.icons},"@elementor/ui":function(e){e.exports=window.elementorV2.ui},"@wordpress/i18n":function(e){e.exports=window.wp.i18n},react:function(e){e.exports=window.React}},t={};function __webpack_require__(n){var r=t[n];if(void 0!==r)return r.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,__webpack_require__),o.exports}__webpack_require__.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return __webpack_require__.d(t,{a:t}),t},__webpack_require__.d=function(e,t){for(var n in t)__webpack_require__.o(t,n)&&!__webpack_require__.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},__webpack_require__.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},__webpack_require__.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};!function(){__webpack_require__.r(n),__webpack_require__.d(n,{init:function(){return e.init}});var e=__webpack_require__("./packages/packages/core/editor-widget-creation/src/init.ts")}(),(window.elementorV2=window.elementorV2||{}).editorWidgetCreation=n}(),window.elementorV2.editorWidgetCreation?.init?.(); | |
| 1 | +(function(_elementor_editor, react, _elementor_editor_mcp, _elementor_editor_ui, _elementor_events, _elementor_icons, _elementor_ui, _wordpress_i18n) { | |
| 2 | + | |
| 3 | +//#region \0rolldown/runtime.js | |
| 4 | + var __create = Object.create; | |
| 5 | + var __defProp = Object.defineProperty; | |
| 6 | + var __name = (target, value) => __defProp(target, "name", { | |
| 7 | + value, | |
| 8 | + configurable: true | |
| 9 | + }); | |
| 10 | + var __getOwnPropDesc = Object.getOwnPropertyDescriptor; | |
| 11 | + var __getOwnPropNames = Object.getOwnPropertyNames; | |
| 12 | + var __getProtoOf = Object.getPrototypeOf; | |
| 13 | + var __hasOwnProp = Object.prototype.hasOwnProperty; | |
| 14 | + var __exportAll = (all, no_symbols) => { | |
| 15 | + let target = {}; | |
| 16 | + for (var name in all) { | |
| 17 | + __defProp(target, name, { | |
| 18 | + get: all[name], | |
| 19 | + enumerable: true | |
| 20 | + }); | |
| 21 | + } | |
| 22 | + if (!no_symbols) { | |
| 23 | + __defProp(target, Symbol.toStringTag, { value: "Module" }); | |
| 24 | + } | |
| 25 | + return target; | |
| 26 | + }; | |
| 27 | + var __copyProps = (to, from, except, desc) => { | |
| 28 | + if (from && typeof from === "object" || typeof from === "function") { | |
| 29 | + for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) { | |
| 30 | + key = keys[i]; | |
| 31 | + if (!__hasOwnProp.call(to, key) && key !== except) { | |
| 32 | + __defProp(to, key, { | |
| 33 | + get: ((k) => from[k]).bind(null, key), | |
| 34 | + enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable | |
| 35 | + }); | |
| 36 | + } | |
| 37 | + } | |
| 38 | + } | |
| 39 | + return to; | |
| 40 | + }; | |
| 41 | + var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { | |
| 42 | + value: mod, | |
| 43 | + enumerable: true | |
| 44 | + }) : target, mod)); | |
| 45 | + | |
| 46 | +//#endregion | |
| 47 | +react = __toESM(react); | |
| 48 | + | |
| 49 | +//#region packages/packages/core/editor-widget-creation/src/interpolate-links.tsx | |
| 50 | + var LINK_PLACEHOLDER_PATTERN = /\{\{(\w+)}}/g; | |
| 51 | + var interpolateLinks = (text, links) => { | |
| 52 | + return text.split(LINK_PLACEHOLDER_PATTERN).map((part, i) => { | |
| 53 | + const link = links[part]; | |
| 54 | + if (!link) return part; | |
| 55 | + return /* @__PURE__ */ react.createElement(_elementor_ui.Link, { | |
| 56 | + key: i, | |
| 57 | + sx: { px: .5 }, | |
| 58 | + href: link.href, | |
| 59 | + target: "_blank", | |
| 60 | + rel: "noopener noreferrer" | |
| 61 | + }, link.label); | |
| 62 | + }); | |
| 63 | + }; | |
| 64 | + | |
| 65 | +//#endregion | |
| 66 | +//#region packages/packages/core/editor-widget-creation/src/components/create-widget.tsx | |
| 67 | + var CREATE_WIDGET_EVENT = "elementor/editor/create-widget"; | |
| 68 | + var ANGIE_MODAL_PROMOTION_IMAGE_URL = "https://assets.elementor.com/packages/v1/images/angie-top-bar-promotion-modal-0926.png"; | |
| 69 | + var ANGIE_CTA_CLICKED_EVENT = "ai_widget_cta_clicked"; | |
| 70 | + var ANGIE_INSTALL_STARTED_EVENT = "angie_install_started"; | |
| 71 | + var ANGIE_INSTALL_COMPLETED_EVENT = "angie_install_completed"; | |
| 72 | + var ANGIE_INSTALL_ABANDONED_EVENT = "angie_install_abandoned"; | |
| 73 | + function CreateWidgetModal({ prompt, entryPoint, onClose }) { | |
| 74 | + const [installState, setInstallState] = (0, react.useState)("idle"); | |
| 75 | + const [agreedToTerms, setAgreedToTerms] = (0, react.useState)(false); | |
| 76 | + const handleClose = () => { | |
| 77 | + if (installState === "installing") return; | |
| 78 | + (0, _elementor_events.trackEvent)({ | |
| 79 | + eventName: ANGIE_INSTALL_ABANDONED_EVENT, | |
| 80 | + abandon_step: installState === "error" ? "install_error" : "install_modal", | |
| 81 | + trigger_source: entryPoint | |
| 82 | + }); | |
| 83 | + onClose(); | |
| 84 | + }; | |
| 85 | + const handleInstall = async () => { | |
| 86 | + setInstallState("installing"); | |
| 87 | + (0, _elementor_events.trackEvent)({ | |
| 88 | + eventName: ANGIE_INSTALL_STARTED_EVENT, | |
| 89 | + trigger_source: entryPoint | |
| 90 | + }); | |
| 91 | + const [result] = await Promise.all([(0, _elementor_editor_mcp.installAngiePlugin)(), (0, _elementor_editor_mcp.saveAngieConsent)()]); | |
| 92 | + if (!result.success) { | |
| 93 | + setInstallState("error"); | |
| 94 | + return; | |
| 95 | + } | |
| 96 | + (0, _elementor_events.trackEvent)({ | |
| 97 | + eventName: ANGIE_INSTALL_COMPLETED_EVENT, | |
| 98 | + trigger_source: entryPoint | |
| 99 | + }); | |
| 100 | + (0, _elementor_editor_mcp.redirectToAppAdmin)(prompt); | |
| 101 | + }; | |
| 102 | + const handleFallbackInstall = () => { | |
| 103 | + (0, _elementor_editor_mcp.redirectToInstallation)(prompt); | |
| 104 | + }; | |
| 105 | + return /* @__PURE__ */ react.createElement(_elementor_editor_ui.ThemeProvider, null, /* @__PURE__ */ react.createElement(_elementor_ui.Dialog, { | |
| 106 | + fullWidth: true, | |
| 107 | + maxWidth: "md", | |
| 108 | + open: true, | |
| 109 | + onClose: handleClose | |
| 110 | + }, /* @__PURE__ */ react.createElement(_elementor_ui.IconButton, { | |
| 111 | + "aria-label": (0, _wordpress_i18n.__)("Close", "elementor"), | |
| 112 | + onClick: handleClose, | |
| 113 | + sx: { | |
| 114 | + position: "absolute", | |
| 115 | + right: 8, | |
| 116 | + top: 8, | |
| 117 | + zIndex: 1 | |
| 118 | + } | |
| 119 | + }, /* @__PURE__ */ react.createElement(_elementor_icons.XIcon, null)), /* @__PURE__ */ react.createElement(_elementor_ui.DialogContent, { sx: { | |
| 120 | + p: 0, | |
| 121 | + overflow: "hidden" | |
| 122 | + } }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 123 | + direction: "row", | |
| 124 | + sx: { height: 400 } | |
| 125 | + }, /* @__PURE__ */ react.createElement(_elementor_ui.Image, { | |
| 126 | + sx: { | |
| 127 | + height: "100%", | |
| 128 | + aspectRatio: "1 / 1", | |
| 129 | + objectFit: "cover", | |
| 130 | + objectPosition: "right center" | |
| 131 | + }, | |
| 132 | + src: ANGIE_MODAL_PROMOTION_IMAGE_URL | |
| 133 | + }), /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 134 | + justifyContent: "space-between", | |
| 135 | + p: 4 | |
| 136 | + }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 137 | + gap: 2.5, | |
| 138 | + justifyContent: "center", | |
| 139 | + sx: { | |
| 140 | + flex: 1, | |
| 141 | + paddingInlineEnd: 2.5 | |
| 142 | + } | |
| 143 | + }, /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { | |
| 144 | + variant: "h4", | |
| 145 | + fontWeight: 600, | |
| 146 | + color: "text.secondary" | |
| 147 | + }, installState === "error" ? (0, _wordpress_i18n.__)("Installation failed", "elementor") : /* @__PURE__ */ react.createElement(react.Fragment, null, (0, _wordpress_i18n.__)("Pages, layouts,", "elementor"), /* @__PURE__ */ react.createElement("br", null), (0, _wordpress_i18n.__)("widgets and more", "elementor"))), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { | |
| 148 | + variant: "body2", | |
| 149 | + fontWeight: 500 | |
| 150 | + }, installState === "error" ? (0, _wordpress_i18n.__)("We couldn't install Angie automatically. Click below to install it manually.", "elementor") : (0, _wordpress_i18n.__)("Ask Angie to build you full pages, custom widgets, snippets, and code directly in Elementor. Install and activate Angie once on this site to start building.", "elementor")), installState !== "error" && /* @__PURE__ */ react.createElement(_elementor_ui.FormControlLabel, { | |
| 151 | + control: /* @__PURE__ */ react.createElement(_elementor_ui.Checkbox, { | |
| 152 | + size: "small", | |
| 153 | + checked: agreedToTerms, | |
| 154 | + onChange: (_e, checked) => setAgreedToTerms(checked) | |
| 155 | + }), | |
| 156 | + label: /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { | |
| 157 | + variant: "body2", | |
| 158 | + color: "text.secondary" | |
| 159 | + }, interpolateLinks((0, _wordpress_i18n.sprintf)((0, _wordpress_i18n.__)("By installing, you agree to our %1$s & %2$s.", "elementor"), "{{terms}}", "{{privacy}}"), { | |
| 160 | + terms: { | |
| 161 | + label: (0, _wordpress_i18n.__)("Terms", "elementor"), | |
| 162 | + href: "https://elementor.com/terms/angie-terms-conditions/" | |
| 163 | + }, | |
| 164 | + privacy: { | |
| 165 | + label: (0, _wordpress_i18n.__)("Privacy Policy", "elementor"), | |
| 166 | + href: "https://elementor.com/about/privacy/" | |
| 167 | + } | |
| 168 | + })) | |
| 169 | + })), /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 170 | + direction: "row", | |
| 171 | + justifyContent: "flex-end" | |
| 172 | + }, installState === "error" ? /* @__PURE__ */ react.createElement(_elementor_ui.Button, { | |
| 173 | + variant: "contained", | |
| 174 | + color: "accent", | |
| 175 | + onClick: handleFallbackInstall | |
| 176 | + }, (0, _wordpress_i18n.__)("Install Manually", "elementor")) : /* @__PURE__ */ react.createElement(_elementor_ui.Button, { | |
| 177 | + variant: "contained", | |
| 178 | + color: "accent", | |
| 179 | + onClick: handleInstall, | |
| 180 | + disabled: installState === "installing" || !agreedToTerms, | |
| 181 | + startIcon: installState === "installing" ? /* @__PURE__ */ react.createElement(_elementor_ui.CircularProgress, { | |
| 182 | + size: 18, | |
| 183 | + color: "inherit" | |
| 184 | + }) : void 0 | |
| 185 | + }, installState === "installing" ? (0, _wordpress_i18n.__)("Installing…", "elementor") : (0, _wordpress_i18n.__)("Install and activate", "elementor")))))))); | |
| 186 | + } | |
| 187 | + function CreateWidget() { | |
| 188 | + const [modalData, setModalData] = (0, react.useState)(null); | |
| 189 | + (0, react.useEffect)(() => { | |
| 190 | + const handleShow = (event) => { | |
| 191 | + const customEvent = event; | |
| 192 | + const hasAngieInstalled = (0, _elementor_editor_mcp.isAngieAvailable)(); | |
| 193 | + (0, _elementor_events.trackEvent)({ | |
| 194 | + eventName: ANGIE_CTA_CLICKED_EVENT, | |
| 195 | + entry_point: customEvent.detail.entry_point, | |
| 196 | + has_angie_installed: hasAngieInstalled | |
| 197 | + }); | |
| 198 | + if (hasAngieInstalled) { | |
| 199 | + (0, _elementor_editor_mcp.sendPromptToAngie)(customEvent.detail?.prompt); | |
| 200 | + return; | |
| 201 | + } | |
| 202 | + setModalData(customEvent.detail); | |
| 203 | + }; | |
| 204 | + window.addEventListener(CREATE_WIDGET_EVENT, handleShow); | |
| 205 | + return () => { | |
| 206 | + window.removeEventListener(CREATE_WIDGET_EVENT, handleShow); | |
| 207 | + }; | |
| 208 | + }, []); | |
| 209 | + if (!modalData) return null; | |
| 210 | + return /* @__PURE__ */ react.createElement(CreateWidgetModal, { | |
| 211 | + prompt: modalData.prompt, | |
| 212 | + entryPoint: modalData.entry_point, | |
| 213 | + onClose: () => setModalData(null) | |
| 214 | + }); | |
| 215 | + } | |
| 216 | + | |
| 217 | +//#endregion | |
| 218 | +//#region packages/packages/core/editor-widget-creation/src/init.ts | |
| 219 | + function init() { | |
| 220 | + (0, _elementor_editor.injectIntoTop)({ | |
| 221 | + id: "create-widget", | |
| 222 | + component: CreateWidget | |
| 223 | + }); | |
| 224 | + } | |
| 225 | + | |
| 226 | +//#endregion | |
| 227 | +//#region packages/packages/core/editor-widget-creation/src/index.ts | |
| 228 | + var src_exports = /* @__PURE__ */ __exportAll({ init: () => init }); | |
| 229 | + | |
| 230 | +//#endregion | |
| 231 | +//#region \0elementor-package-library-entry | |
| 232 | + (window.elementorV2 = window.elementorV2 || {}).editorWidgetCreation = src_exports; | |
| 233 | + | |
| 234 | +//#endregion | |
| 235 | +})(elementorV2.editor, React, elementorV2.editorMcp, elementorV2.editorUi, elementorV2.events, elementorV2.icons, elementorV2.ui, wp.i18n); | |
| 236 | +window.elementorV2.editorWidgetCreation?.init?.(); | |
| 3 | 237 | //# sourceMappingURL=editor-widget-creation.js.map |