@contentstack/live-preview-utils 3.0.2 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/legacy/livePreview/editButton/editButton.cjs +3 -0
- package/dist/legacy/livePreview/editButton/editButton.cjs.map +1 -1
- package/dist/legacy/livePreview/editButton/editButton.js +3 -0
- package/dist/legacy/livePreview/editButton/editButton.js.map +1 -1
- package/dist/legacy/livePreview/eventManager/postMessageEvent.hooks.cjs +1 -1
- package/dist/legacy/livePreview/eventManager/postMessageEvent.hooks.js +1 -1
- package/dist/legacy/preview/contentstack-live-preview-HOC.cjs +23 -4
- package/dist/legacy/preview/contentstack-live-preview-HOC.cjs.map +1 -1
- package/dist/legacy/preview/contentstack-live-preview-HOC.d.cts +2 -1
- package/dist/legacy/preview/contentstack-live-preview-HOC.d.ts +2 -1
- package/dist/legacy/preview/contentstack-live-preview-HOC.js +23 -4
- package/dist/legacy/preview/contentstack-live-preview-HOC.js.map +1 -1
- package/dist/legacy/types/types.cjs.map +1 -1
- package/dist/legacy/types/types.d.cts +2 -1
- package/dist/legacy/types/types.d.ts +2 -1
- package/dist/legacy/types/types.js.map +1 -1
- package/dist/legacy/utils/addLivePreviewQueryTags.cjs +49 -0
- package/dist/legacy/utils/addLivePreviewQueryTags.cjs.map +1 -0
- package/dist/legacy/utils/addLivePreviewQueryTags.d.cts +3 -0
- package/dist/legacy/utils/addLivePreviewQueryTags.d.ts +3 -0
- package/dist/legacy/utils/addLivePreviewQueryTags.js +26 -0
- package/dist/legacy/utils/addLivePreviewQueryTags.js.map +1 -0
- package/dist/legacy/utils/index.cjs +3 -21
- package/dist/legacy/utils/index.cjs.map +1 -1
- package/dist/legacy/utils/index.d.cts +4 -2
- package/dist/legacy/utils/index.d.ts +4 -2
- package/dist/legacy/utils/index.js +1 -19
- package/dist/legacy/utils/index.js.map +1 -1
- package/dist/legacy/visualBuilder/components/FieldRevert/FieldRevertComponent.cjs +60 -13
- package/dist/legacy/visualBuilder/components/FieldRevert/FieldRevertComponent.cjs.map +1 -1
- package/dist/legacy/visualBuilder/components/FieldRevert/FieldRevertComponent.d.cts +2 -1
- package/dist/legacy/visualBuilder/components/FieldRevert/FieldRevertComponent.d.ts +2 -1
- package/dist/legacy/visualBuilder/components/FieldRevert/FieldRevertComponent.js +61 -15
- package/dist/legacy/visualBuilder/components/FieldRevert/FieldRevertComponent.js.map +1 -1
- package/dist/legacy/visualBuilder/components/FieldRevert/useHandleOutsideClick.cjs +41 -0
- package/dist/legacy/visualBuilder/components/FieldRevert/useHandleOutsideClick.cjs.map +1 -0
- package/dist/legacy/visualBuilder/components/FieldRevert/useHandleOutsideClick.d.cts +3 -0
- package/dist/legacy/visualBuilder/components/FieldRevert/useHandleOutsideClick.d.ts +3 -0
- package/dist/legacy/visualBuilder/components/FieldRevert/useHandleOutsideClick.js +22 -0
- package/dist/legacy/visualBuilder/components/FieldRevert/useHandleOutsideClick.js.map +1 -0
- package/dist/legacy/visualBuilder/components/FieldToolbar.cjs +118 -119
- package/dist/legacy/visualBuilder/components/FieldToolbar.cjs.map +1 -1
- package/dist/legacy/visualBuilder/components/FieldToolbar.js +120 -121
- package/dist/legacy/visualBuilder/components/FieldToolbar.js.map +1 -1
- package/dist/legacy/visualBuilder/components/icons/variant.cjs +1 -1
- package/dist/legacy/visualBuilder/components/icons/variant.cjs.map +1 -1
- package/dist/legacy/visualBuilder/components/icons/variant.js +1 -1
- package/dist/legacy/visualBuilder/components/icons/variant.js.map +1 -1
- package/dist/legacy/visualBuilder/utils/getCsDataOfElement.cjs +17 -2
- package/dist/legacy/visualBuilder/utils/getCsDataOfElement.cjs.map +1 -1
- package/dist/legacy/visualBuilder/utils/getCsDataOfElement.js +17 -2
- package/dist/legacy/visualBuilder/utils/getCsDataOfElement.js.map +1 -1
- package/dist/legacy/visualBuilder/visualBuilder.style.cjs +3 -0
- package/dist/legacy/visualBuilder/visualBuilder.style.cjs.map +1 -1
- package/dist/legacy/visualBuilder/visualBuilder.style.js +3 -0
- package/dist/legacy/visualBuilder/visualBuilder.style.js.map +1 -1
- package/dist/modern/livePreview/editButton/editButton.cjs +3 -0
- package/dist/modern/livePreview/editButton/editButton.cjs.map +1 -1
- package/dist/modern/livePreview/editButton/editButton.js +3 -0
- package/dist/modern/livePreview/editButton/editButton.js.map +1 -1
- package/dist/modern/livePreview/eventManager/postMessageEvent.hooks.cjs +1 -1
- package/dist/modern/livePreview/eventManager/postMessageEvent.hooks.js +1 -1
- package/dist/modern/preview/contentstack-live-preview-HOC.cjs +23 -4
- package/dist/modern/preview/contentstack-live-preview-HOC.cjs.map +1 -1
- package/dist/modern/preview/contentstack-live-preview-HOC.d.cts +2 -1
- package/dist/modern/preview/contentstack-live-preview-HOC.d.ts +2 -1
- package/dist/modern/preview/contentstack-live-preview-HOC.js +23 -4
- package/dist/modern/preview/contentstack-live-preview-HOC.js.map +1 -1
- package/dist/modern/types/types.cjs.map +1 -1
- package/dist/modern/types/types.d.cts +2 -1
- package/dist/modern/types/types.d.ts +2 -1
- package/dist/modern/types/types.js.map +1 -1
- package/dist/modern/utils/addLivePreviewQueryTags.cjs +49 -0
- package/dist/modern/utils/addLivePreviewQueryTags.cjs.map +1 -0
- package/dist/modern/utils/addLivePreviewQueryTags.d.cts +3 -0
- package/dist/modern/utils/addLivePreviewQueryTags.d.ts +3 -0
- package/dist/modern/utils/addLivePreviewQueryTags.js +26 -0
- package/dist/modern/utils/addLivePreviewQueryTags.js.map +1 -0
- package/dist/modern/utils/index.cjs +3 -21
- package/dist/modern/utils/index.cjs.map +1 -1
- package/dist/modern/utils/index.d.cts +4 -2
- package/dist/modern/utils/index.d.ts +4 -2
- package/dist/modern/utils/index.js +1 -19
- package/dist/modern/utils/index.js.map +1 -1
- package/dist/modern/visualBuilder/components/FieldRevert/FieldRevertComponent.cjs +60 -13
- package/dist/modern/visualBuilder/components/FieldRevert/FieldRevertComponent.cjs.map +1 -1
- package/dist/modern/visualBuilder/components/FieldRevert/FieldRevertComponent.d.cts +2 -1
- package/dist/modern/visualBuilder/components/FieldRevert/FieldRevertComponent.d.ts +2 -1
- package/dist/modern/visualBuilder/components/FieldRevert/FieldRevertComponent.js +61 -15
- package/dist/modern/visualBuilder/components/FieldRevert/FieldRevertComponent.js.map +1 -1
- package/dist/modern/visualBuilder/components/FieldRevert/useHandleOutsideClick.cjs +41 -0
- package/dist/modern/visualBuilder/components/FieldRevert/useHandleOutsideClick.cjs.map +1 -0
- package/dist/modern/visualBuilder/components/FieldRevert/useHandleOutsideClick.d.cts +3 -0
- package/dist/modern/visualBuilder/components/FieldRevert/useHandleOutsideClick.d.ts +3 -0
- package/dist/modern/visualBuilder/components/FieldRevert/useHandleOutsideClick.js +22 -0
- package/dist/modern/visualBuilder/components/FieldRevert/useHandleOutsideClick.js.map +1 -0
- package/dist/modern/visualBuilder/components/FieldToolbar.cjs +118 -119
- package/dist/modern/visualBuilder/components/FieldToolbar.cjs.map +1 -1
- package/dist/modern/visualBuilder/components/FieldToolbar.js +120 -121
- package/dist/modern/visualBuilder/components/FieldToolbar.js.map +1 -1
- package/dist/modern/visualBuilder/components/icons/variant.cjs +1 -1
- package/dist/modern/visualBuilder/components/icons/variant.cjs.map +1 -1
- package/dist/modern/visualBuilder/components/icons/variant.js +1 -1
- package/dist/modern/visualBuilder/components/icons/variant.js.map +1 -1
- package/dist/modern/visualBuilder/utils/getCsDataOfElement.cjs +17 -2
- package/dist/modern/visualBuilder/utils/getCsDataOfElement.cjs.map +1 -1
- package/dist/modern/visualBuilder/utils/getCsDataOfElement.js +17 -2
- package/dist/modern/visualBuilder/utils/getCsDataOfElement.js.map +1 -1
- package/dist/modern/visualBuilder/visualBuilder.style.cjs +3 -0
- package/dist/modern/visualBuilder/visualBuilder.style.cjs.map +1 -1
- package/dist/modern/visualBuilder/visualBuilder.style.js +3 -0
- package/dist/modern/visualBuilder/visualBuilder.style.js.map +1 -1
- package/package.json +18 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/visualBuilder/visualBuilder.style.ts"],"sourcesContent":["import { css } from \"goober\";\n\nconst tooltipBaseStyle = `\n pointer-events: all;\n svg {\n pointer-events: none;\n }\n &:before {\n content: attr(data-tooltip);\n position: absolute;\n bottom: 20px;\n margin-bottom: 24px;\n padding: 12px;\n border-radius: 4px;\n width: max-content;\n max-width: 200px;\n color: #fff;\n font-family: Inter;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 132%; /* 0.99rem */\n letter-spacing: 0.015rem;\n background: #767676;\n }\n &:after {\n content: \"\";\n position: absolute;\n bottom: 28px;\n /* the arrow */\n border: 10px solid #000;\n border-color: #767676 transparent transparent transparent;\n }\n`;\n\nexport function visualBuilderStyles() {\n return {\n \"visual-builder__container\": css`\n --outline-transition: all 0.15s ease-in;\n font-family: \"Inter\", sans-serif;\n `,\n \"visual-builder__cursor\": css`\n visibility: hidden;\n height: 0;\n\n &.visible {\n visibility: visible;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 2147483647 !important;\n\n color: #fff;\n\n height: auto;\n padding: 0 10px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n pointer-events: none !important;\n position: fixed !important;\n cursor: none;\n }\n `,\n \"visual-builder__overlay__wrapper\": css`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n visibility: hidden;\n z-index: 99999;\n\n pointer-events: none;\n\n &.visible {\n visibility: visible;\n }\n `,\n \"visual-builder__overlay--outline\": css`\n position: absolute;\n outline: 4px solid #715cdd;\n transition: var(--outline-transition);\n `,\n \"visual-builder__overlay\": css`\n background: rgba(0, 0, 0, 0.3);\n box-sizing: content-box;\n pointer-events: all;\n position: absolute;\n transition: var(--outline-transition);\n `,\n \"visual-builder__add-button\": css`\n position: absolute;\n pointer-events: all;\n\n background: #ffffff;\n color: #475161;\n\n border-radius: 4px;\n border: 1px solid #6c5ce7;\n\n height: 32px;\n min-width: 32px;\n max-width: 180px;\n padding: 8px 6px;\n transform: translate(-50%, -50%);\n\n font-weight: 600;\n color: #6c5ce7;\n overflow: hidden;\n\n z-index: 2147483647 !important;\n\n display: grid;\n grid-template-columns: min-content 0fr;\n align-content: center;\n gap: 0;\n\n transition:\n grid-template-columns 0.25s,\n left 0.15s ease-in,\n top 0.15s ease-in,\n gap 0.15s ease-in;\n\n &:has(.visual-builder__add-button-label):hover {\n grid-template-columns: min-content 1fr;\n gap: 8px;\n padding: 8px 16px;\n }\n\n svg {\n fill: #6c5ce7;\n }\n\n &:disabled {\n border-color: #bbbec3;\n cursor: not-allowed;\n }\n\n &:disabled svg {\n fill: #bbbec3;\n }\n `,\n \"visual-builder__add-button-label\": css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `,\n \"visual-builder__start-editing-btn\": css`\n z-index: 1000;\n text-decoration: none;\n position: fixed;\n bottom: 30px;\n right: 30px;\n box-shadow:\n 0px 4px 15px 0px rgba(108, 92, 231, 0.2),\n 0px 3px 14px 3px rgba(0, 0, 0, 0.12),\n 0px 8px 10px 1px rgba(0, 0, 0, 0.14);\n display: inline-flex;\n padding: 0.5rem 1rem;\n justify-content: center;\n align-items: center;\n gap: 0.5rem;\n\n border-radius: 4px;\n border: 1px solid transparent;\n background: #6c5ce7;\n transition:\n background-color 0.15s ease-in-out,\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out,\n -webkit-box-shadow 0.15s ease-in-out;\n\n &:hover {\n background-color: #5d50be;\n }\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px #ada4f4;\n }\n & > span {\n color: #fff;\n /* Body/P1 Bold */\n font-size: 1rem;\n font-family: Inter;\n font-weight: 600;\n line-height: 150%;\n letter-spacing: 0.01rem;\n text-transform: capitalize;\n }\n\n & > svg {\n color: #fff;\n font-size: 1rem;\n font-family: Inter;\n font-weight: 600;\n line-height: 150%;\n letter-spacing: 0.01rem;\n text-transform: capitalize;\n }\n `,\n \"visual-builder__cursor-icon\": css`\n height: 40px;\n width: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #5d50be;\n border-radius: 50%;\n position: absolute;\n top: 0;\n left: 0;\n `,\n \"visual-builder__cursor-pointer\": css`\n position: absolute;\n top: -8px;\n left: -8px;\n `,\n \"visual-builder__cursor-icon--loader\": css`\n animation: visual-builder__spinner 1s linear infinite;\n `,\n \"visual-builder__focused-toolbar\": css`\n position: absolute;\n transform: translateY(-100%);\n z-index: 100000;\n gap: 8px;\n width: 0;\n display: flex;\n align-items: end;\n transition: var(--outline-transition);\n `,\n \"visual-builder__focused-toolbar__field-label-wrapper__current-field\": css`\n padding: 4px 8px !important;\n background: #6c5ce7;\n color: #fff;\n z-index: 1;\n border-radius: 2px !important;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: fit-content;\n\n &:disabled {\n filter: contrast(0.7);\n }\n\n .visual-builder__focused-toolbar__text {\n padding-right: 3px;\n height: 16px;\n }\n `,\n \"visual-builder__focused-toolbar__field-label-wrapper__parent-field\": css`\n pointer-events: none;\n color: #5d50be;\n padding: 4px !important;\n margin-bottom: 3px;\n display: none;\n width: fit-content;\n position: absolute;\n z-index: 100000;\n `,\n \"field-label-dropdown-open\": css`\n .visual-builder__focused-toolbar__field-label-wrapper__parent-field {\n pointer-events: all;\n visibility: visible;\n display: initial;\n }\n\n .visual-builder__button--secondary:hover {\n background-color: #6c5ce7;\n color: #f9f8ff;\n }\n `,\n \"visual-builder__focused-toolbar__field-label-wrapper\": css`\n display: flex;\n flex-direction: column-reverse;\n position: relative;\n `,\n \"visual-builder__focused-toolbar__field-label-container\": css`\n display: flex;\n column-gap: 0.5rem;\n align-items: center;\n `,\n \"visual-builder__button\": css`\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: 4px;\n font-size: 16px;\n font-weight: 600;\n line-height: 100%;\n padding: 8px 16px;\n text-align: center;\n z-index: 2147483647 !important;\n transition:\n color 0.15s ease-in-out,\n background-color 0.15s ease-in-out,\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out;\n // vertical-align: middle;\n `,\n \"visual-builder__button--primary\": css`\n background-color: #6c5ce7;\n color: #fff;\n\n &:hover {\n background-color: #5d50be;\n }\n `,\n \"visual-builder__button--secondary\": css`\n background-color: #f9f8ff;\n border: 1px solid #6c5ce7;\n color: #6c5ce7;\n `,\n \"visual-builder__button--edit\": css`\n svg {\n height: 16px;\n width: 16px;\n\n path {\n fill: #475161;\n }\n }\n `,\n \"visual-builder__button-loader\": css`\n svg.loader {\n height: 16px;\n width: 16px;\n\n path {\n fill: #ffffff;\n }\n }\n `,\n \"visual-builder__button--comment-loader\": css`\n svg.loader {\n height: 16px;\n width: 16px;\n\n path {\n fill: #475161;\n }\n }\n `,\n \"visual-builder__field-icon\": css`\n svg {\n height: 16px;\n width: 16px;\n margin-right: 5px;\n }\n `,\n \"visual-builder__focused-toolbar__button-group\": css`\n display: flex;\n background: #fff;\n border-radius: 2px;\n height: 100%;\n padding: 4px !important;\n z-index: 2147483647 !important;\n\n &:has(.visual-builder__button) {\n padding: 2px;\n gap: 8px;\n }\n\n .visual-builder__button:hover {\n background-color: #f5f5f5;\n\n svg {\n color: #5d50be;\n }\n }\n\n .visual-builder__button {\n background-color: #fff;\n border-color: transparent;\n color: #475161;\n padding: 4px;\n min-width: 32px;\n min-height: 32px;\n }\n `,\n \"visual-builder__focused-toolbar__text\": css`\n font-family: Inter, \"sans-serif\";\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 150%;\n letter-spacing: 0.015rem;\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n `,\n \"visual-builder__focused-toolbar__multiple-field-toolbar\": css`\n height: 40px;\n z-index: 2147483647 !important;\n\n svg {\n height: 100%;\n width: 100%;\n }\n `,\n \"visual-builder__rotate--90\": css`\n transform: rotate(90deg);\n `,\n \"visual-builder__focused-toolbar--field-disabled\": css`\n pointer-events: none;\n cursor: not-allowed;\n .visual-builder__focused-toolbar__field-label-wrapper__current-field {\n background: #909090;\n }\n `,\n \"visual-builder__cursor-disabled\": css`\n .visual-builder__cursor-icon {\n background: #909090;\n }\n\n .visual-builder__cursor-pointer path {\n fill: #909090;\n }\n `,\n \"visual-builder__tooltip\": css`\n ${tooltipBaseStyle}\n\n &:before {\n display: none;\n }\n\n &:hover:before,\n &:hover:after {\n display: block;\n z-index: 2147483647 !important;\n }\n\n &:after {\n display: none;\n }\n `,\n \"visual-builder__tooltip--bottom\": css`\n &:before {\n bottom: -66px;\n }\n &:after {\n bottom: -6px;\n transform: rotate(180deg);\n }\n `,\n\n \"visual-builder__tooltip--persistent\": css`\n ${tooltipBaseStyle}\n\n &:before {\n display: block;\n }\n\n &:after {\n display: block;\n }\n `,\n \"visual-builder__empty-block\": css`\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 1rem;\n min-height: 100px;\n `,\n \"visual-builder__empty-block-title\": css`\n font-size: 0.95rem;\n font-family: Inter;\n font-weight: 400;\n line-height: 100%;\n color: #647696;\n `,\n \"visual-builder__empty-block-add-button\": css`\n height: 32px;\n border-radius: 4px;\n background: #f9f8ff;\n border-color: #6c5ce7;\n border-width: 1px;\n padding: 8px 16px 8px 16px;\n font-size: 0.9rem;\n font-family: Inter;\n font-weight: 600;\n color: #6c5ce7;\n padding-block: 0px;\n letter-spacing: 0.01rem;\n `,\n \"visual-builder__hover-outline\": css`\n position: absolute;\n outline: 2px dashed #6c5ce7;\n transition: var(--outline-transition);\n z-index: 2147483647 !important;\n `,\n \"visual-builder__hover-outline--hidden\": css`\n visibility: hidden;\n `,\n \"visual-builder__hover-outline--unclickable\": css`\n pointer-events: none;\n `,\n \"visual-builder__hover-outline--disabled\": css`\n outline: 2px dashed #909090;\n `,\n \"visual-builder__default-cursor--disabled\": css`\n cursor: none;\n `,\n \"visual-builder__draft-field\": css`\n outline: 2px dashed #eb5646;\n `,\n \"visual-builder__variant-field\": css`\n outline: 2px solid #bd59fa;\n `,\n \"visual-builder__pseudo-editable-element\": css`\n z-index: 99999 !important;\n `,\n // cslp error styles\n \"visual-builder__button-error\": css`\n background-color: #ffeeeb;\n padding: 0px !important;\n &:hover {\n background-color: #ffeeeb;\n }\n `,\n \"visual-builder__focused-toolbar__error\": css`\n display: flex;\n justify-content: center;\n align-items: center;\n column-gap: 3px;\n padding: 4px 8px;\n `,\n \"visual-builder__focused-toolbar__error-text\": css`\n font-weight: 400;\n font-size: 12px;\n line-height: 18px;\n color: #a31b00;\n `,\n \"visual-builder__focused-toolbar__error-toolip\": css`\n position: absolute;\n width: 400px;\n background-color: red;\n left: 0;\n top: -7px;\n transform: translateY(-100%);\n background-color: #767676;\n border-radius: 4px;\n box-shadow:\n 0px 1px 10px 0px #6c5ce733,\n 0px 5px 5px 0px #0000001f,\n 0px 2px 4px 0px #00000024;\n padding: 12px;\n text-align: left;\n\n &:before {\n content: \"\";\n position: absolute;\n bottom: -3px;\n left: 4%;\n transform: translateX(-50%) rotate(45deg);\n width: 10px;\n height: 10px;\n background-color: #767676;\n }\n\n > p {\n margin: 0;\n color: #ffffff;\n font-size: 14px;\n font-weight: 600;\n line-height: 21px;\n margin-bottom: 4px;\n }\n\n > span {\n color: #ffffff;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n }\n `,\n \"variant-field-revert-component\": css`\n position: relative;\n display: inline-block;\n z-index: 2147483647 !important;\n `,\n \"variant-field-revert-component__dropdown-content\": css`\n position: absolute;\n background-color: #ffffff;\n min-width: max-content;\n box-shadow:\n 0 4px 15px 0 rgba(108, 92, 231, 0.2),\n 0 3px 14px 3px rgba(0, 0, 0, 0.12),\n 0 8px 10px 1px rgba(0, 0, 0, 0.14);\n z-index: 2147483647 !important;\n margin-top: 4px;\n padding: 4px 0px;\n border-radius: 2px;\n `,\n \"variant-field-revert-component__dropdown-content__list-item\": css`\n color: black;\n padding: 9.6px 16px;\n text-decoration: none;\n display: block;\n font-size: 0.75rem;\n height: 32px;\n line-height: 2rem;\n display: flex;\n align-items: center;\n z-index: 2147483647 !important;\n cursor: pointer;\n &:hover {\n background-color: #f1f1f1;\n }\n &:hover > span {\n color: #5d50be;\n }\n & > span {\n margin-top: 4px;\n margin-bottom: 4px;\n }\n `,\n \"visual-builder__no-cursor-style\": css`\n cursor: none !important;\n `,\n \"visual-builder__field-toolbar-container\": css`\n display: flex;\n flex-direction: column-reverse;\n z-index: 2147483647 !important;\n `,\n \"visual-builder__variant-button\": css`\n display: flex;\n min-width: 3rem !important;\n gap: 0.25rem;\n align-items: center;\n justify-content: center;\n display: flex;\n & svg path {\n fill: #475161;\n }\n `,\n };\n}\n\nexport const VisualBuilderGlobalStyles = `\n @import url(\"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap\");\n\n [data-cslp] [contenteditable=\"true\"] {\n outline: none;\n }\n \n @keyframes visual-builder__spinner {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n`;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAoB;AAEpB,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiClB,SAAS,sBAAsB;AAClC,SAAO;AAAA,IACH,6BAA6B;AAAA;AAAA;AAAA;AAAA,IAI7B,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAyB1B,oCAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAepC,oCAAoC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKpC,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAO3B,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAoD9B,oCAAoC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKpC,qCAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAqDrC,+BAA+B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAY/B,kCAAkC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKlC,uCAAuC;AAAA;AAAA;AAAA,IAGvC,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUnC,uEAAuE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAoBvE,sEAAsE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUtE,6BAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAY7B,wDAAwD;AAAA;AAAA;AAAA;AAAA;AAAA,IAKxD,0DAA0D;AAAA;AAAA;AAAA;AAAA;AAAA,IAK1D,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiB1B,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQnC,qCAAqC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKrC,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUhC,iCAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUjC,0CAA0C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAU1C,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAO9B,iDAAiD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA8BjD,yCAAyC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYzC,2DAA2D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAS3D,8BAA8B;AAAA;AAAA;AAAA,IAG9B,mDAAmD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOnD,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASnC,2BAA2B;AAAA,cACrB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBtB,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUnC,uCAAuC;AAAA,cACjC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUtB,+BAA+B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAU/B,qCAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOrC,0CAA0C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAc1C,iCAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMjC,yCAAyC;AAAA;AAAA;AAAA,IAGzC,8CAA8C;AAAA;AAAA;AAAA,IAG9C,2CAA2C;AAAA;AAAA;AAAA,IAG3C,4CAA4C;AAAA;AAAA;AAAA,IAG5C,+BAA+B;AAAA;AAAA;AAAA,IAG/B,iCAAiC;AAAA;AAAA;AAAA,IAGjC,2CAA2C;AAAA;AAAA;AAAA;AAAA,IAI3C,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhC,0CAA0C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAO1C,+CAA+C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM/C,iDAAiD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA2CjD,kCAAkC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKlC,oDAAoD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAapD,+DAA+D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAuB/D,mCAAmC;AAAA;AAAA;AAAA,IAGnC,2CAA2C;AAAA;AAAA;AAAA;AAAA;AAAA,IAK3C,kCAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWtC;AACJ;AAEO,IAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/visualBuilder/visualBuilder.style.ts"],"sourcesContent":["import { css } from \"goober\";\n\nconst tooltipBaseStyle = `\n pointer-events: all;\n svg {\n pointer-events: none;\n }\n &:before {\n content: attr(data-tooltip);\n position: absolute;\n bottom: 20px;\n margin-bottom: 24px;\n padding: 12px;\n border-radius: 4px;\n width: max-content;\n max-width: 200px;\n color: #fff;\n font-family: Inter;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 132%; /* 0.99rem */\n letter-spacing: 0.015rem;\n background: #767676;\n }\n &:after {\n content: \"\";\n position: absolute;\n bottom: 28px;\n /* the arrow */\n border: 10px solid #000;\n border-color: #767676 transparent transparent transparent;\n }\n`;\n\nexport function visualBuilderStyles() {\n return {\n \"visual-builder__container\": css`\n --outline-transition: all 0.15s ease-in;\n font-family: \"Inter\", sans-serif;\n `,\n \"visual-builder__cursor\": css`\n visibility: hidden;\n height: 0;\n\n &.visible {\n visibility: visible;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 2147483647 !important;\n\n color: #fff;\n\n height: auto;\n padding: 0 10px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n pointer-events: none !important;\n position: fixed !important;\n cursor: none;\n }\n `,\n \"visual-builder__overlay__wrapper\": css`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n visibility: hidden;\n z-index: 99999;\n\n pointer-events: none;\n\n &.visible {\n visibility: visible;\n }\n `,\n \"visual-builder__overlay--outline\": css`\n position: absolute;\n outline: 4px solid #715cdd;\n transition: var(--outline-transition);\n `,\n \"visual-builder__overlay\": css`\n background: rgba(0, 0, 0, 0.3);\n box-sizing: content-box;\n pointer-events: all;\n position: absolute;\n transition: var(--outline-transition);\n `,\n \"visual-builder__add-button\": css`\n position: absolute;\n pointer-events: all;\n\n background: #ffffff;\n color: #475161;\n\n border-radius: 4px;\n border: 1px solid #6c5ce7;\n\n height: 32px;\n min-width: 32px;\n max-width: 180px;\n padding: 8px 6px;\n transform: translate(-50%, -50%);\n\n font-weight: 600;\n color: #6c5ce7;\n overflow: hidden;\n\n z-index: 2147483647 !important;\n\n display: grid;\n grid-template-columns: min-content 0fr;\n align-content: center;\n gap: 0;\n\n transition:\n grid-template-columns 0.25s,\n left 0.15s ease-in,\n top 0.15s ease-in,\n gap 0.15s ease-in;\n\n &:has(.visual-builder__add-button-label):hover {\n grid-template-columns: min-content 1fr;\n gap: 8px;\n padding: 8px 16px;\n }\n\n svg {\n fill: #6c5ce7;\n }\n\n &:disabled {\n border-color: #bbbec3;\n cursor: not-allowed;\n }\n\n &:disabled svg {\n fill: #bbbec3;\n }\n `,\n \"visual-builder__add-button-label\": css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `,\n \"visual-builder__start-editing-btn\": css`\n z-index: 1000;\n text-decoration: none;\n position: fixed;\n bottom: 30px;\n right: 30px;\n box-shadow:\n 0px 4px 15px 0px rgba(108, 92, 231, 0.2),\n 0px 3px 14px 3px rgba(0, 0, 0, 0.12),\n 0px 8px 10px 1px rgba(0, 0, 0, 0.14);\n display: inline-flex;\n padding: 0.5rem 1rem;\n justify-content: center;\n align-items: center;\n gap: 0.5rem;\n\n border-radius: 4px;\n border: 1px solid transparent;\n background: #6c5ce7;\n transition:\n background-color 0.15s ease-in-out,\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out,\n -webkit-box-shadow 0.15s ease-in-out;\n\n &:hover {\n background-color: #5d50be;\n }\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px #ada4f4;\n }\n & > span {\n color: #fff;\n /* Body/P1 Bold */\n font-size: 1rem;\n font-family: Inter;\n font-weight: 600;\n line-height: 150%;\n letter-spacing: 0.01rem;\n text-transform: capitalize;\n }\n\n & > svg {\n color: #fff;\n font-size: 1rem;\n font-family: Inter;\n font-weight: 600;\n line-height: 150%;\n letter-spacing: 0.01rem;\n text-transform: capitalize;\n }\n `,\n \"visual-builder__cursor-icon\": css`\n height: 40px;\n width: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #5d50be;\n border-radius: 50%;\n position: absolute;\n top: 0;\n left: 0;\n `,\n \"visual-builder__cursor-pointer\": css`\n position: absolute;\n top: -8px;\n left: -8px;\n `,\n \"visual-builder__cursor-icon--loader\": css`\n animation: visual-builder__spinner 1s linear infinite;\n `,\n \"visual-builder__focused-toolbar\": css`\n position: absolute;\n transform: translateY(-100%);\n z-index: 100000;\n gap: 8px;\n width: 0;\n display: flex;\n align-items: end;\n transition: var(--outline-transition);\n `,\n \"visual-builder__focused-toolbar__field-label-wrapper__current-field\": css`\n padding: 4px 8px !important;\n background: #6c5ce7;\n color: #fff;\n z-index: 1;\n border-radius: 2px !important;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: fit-content;\n\n &:disabled {\n filter: contrast(0.7);\n }\n\n .visual-builder__focused-toolbar__text {\n padding-right: 3px;\n height: 16px;\n }\n `,\n \"visual-builder__focused-toolbar__field-label-wrapper__parent-field\": css`\n pointer-events: none;\n color: #5d50be;\n padding: 4px !important;\n margin-bottom: 3px;\n display: none;\n width: fit-content;\n position: absolute;\n z-index: 100000;\n `,\n \"field-label-dropdown-open\": css`\n .visual-builder__focused-toolbar__field-label-wrapper__parent-field {\n pointer-events: all;\n visibility: visible;\n display: initial;\n }\n\n .visual-builder__button--secondary:hover {\n background-color: #6c5ce7;\n color: #f9f8ff;\n }\n `,\n \"visual-builder__focused-toolbar__field-label-wrapper\": css`\n display: flex;\n flex-direction: column-reverse;\n position: relative;\n `,\n \"visual-builder__focused-toolbar__field-label-container\": css`\n display: flex;\n column-gap: 0.5rem;\n align-items: center;\n `,\n \"visual-builder__button\": css`\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: 4px;\n font-size: 16px;\n font-weight: 600;\n line-height: 100%;\n padding: 8px 16px;\n text-align: center;\n z-index: 2147483647 !important;\n transition:\n color 0.15s ease-in-out,\n background-color 0.15s ease-in-out,\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out;\n // vertical-align: middle;\n `,\n \"visual-builder__button--primary\": css`\n background-color: #6c5ce7;\n color: #fff;\n\n &:hover {\n background-color: #5d50be;\n }\n `,\n \"visual-builder__button--secondary\": css`\n background-color: #f9f8ff;\n border: 1px solid #6c5ce7;\n color: #6c5ce7;\n `,\n \"visual-builder__button--edit\": css`\n svg {\n height: 16px;\n width: 16px;\n\n path {\n fill: #475161;\n }\n }\n `,\n \"visual-builder__button-loader\": css`\n svg.loader {\n height: 16px;\n width: 16px;\n\n path {\n fill: #ffffff;\n }\n }\n `,\n \"visual-builder__button--comment-loader\": css`\n svg.loader {\n height: 16px;\n width: 16px;\n\n path {\n fill: #475161;\n }\n }\n `,\n \"visual-builder__field-icon\": css`\n svg {\n height: 16px;\n width: 16px;\n margin-right: 5px;\n }\n `,\n \"visual-builder__focused-toolbar__button-group\": css`\n display: flex;\n background: #fff;\n border-radius: 2px;\n height: 100%;\n padding: 4px !important;\n z-index: 2147483647 !important;\n\n &:has(.visual-builder__button) {\n padding: 2px;\n gap: 8px;\n }\n\n .visual-builder__button:hover {\n background-color: #f5f5f5;\n\n svg {\n color: #5d50be;\n }\n }\n\n .visual-builder__button {\n background-color: #fff;\n border-color: transparent;\n color: #475161;\n padding: 4px;\n min-width: 32px;\n min-height: 32px;\n }\n `,\n \"visual-builder__focused-toolbar__text\": css`\n font-family: Inter, \"sans-serif\";\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 150%;\n letter-spacing: 0.015rem;\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n `,\n \"visual-builder__focused-toolbar__multiple-field-toolbar\": css`\n height: 40px;\n z-index: 2147483647 !important;\n\n svg {\n height: 100%;\n width: 100%;\n }\n `,\n \"visual-builder__rotate--90\": css`\n transform: rotate(90deg);\n `,\n \"visual-builder__focused-toolbar--field-disabled\": css`\n pointer-events: none;\n cursor: not-allowed;\n .visual-builder__focused-toolbar__field-label-wrapper__current-field {\n background: #909090;\n }\n `,\n \"visual-builder__cursor-disabled\": css`\n .visual-builder__cursor-icon {\n background: #909090;\n }\n\n .visual-builder__cursor-pointer path {\n fill: #909090;\n }\n `,\n \"visual-builder__tooltip\": css`\n ${tooltipBaseStyle}\n\n &:before {\n display: none;\n }\n\n &:hover:before,\n &:hover:after {\n display: block;\n z-index: 2147483647 !important;\n }\n\n &:after {\n display: none;\n }\n `,\n \"visual-builder__tooltip--bottom\": css`\n &:before {\n bottom: -66px;\n }\n &:after {\n bottom: -6px;\n transform: rotate(180deg);\n }\n `,\n\n \"visual-builder__tooltip--persistent\": css`\n ${tooltipBaseStyle}\n\n &:before {\n display: block;\n }\n\n &:after {\n display: block;\n }\n `,\n \"visual-builder__empty-block\": css`\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 1rem;\n min-height: 100px;\n `,\n \"visual-builder__empty-block-title\": css`\n font-size: 0.95rem;\n font-family: Inter;\n font-weight: 400;\n line-height: 100%;\n color: #647696;\n `,\n \"visual-builder__empty-block-add-button\": css`\n height: 32px;\n border-radius: 4px;\n background: #f9f8ff;\n border-color: #6c5ce7;\n border-width: 1px;\n padding: 8px 16px 8px 16px;\n font-size: 0.9rem;\n font-family: Inter;\n font-weight: 600;\n color: #6c5ce7;\n padding-block: 0px;\n letter-spacing: 0.01rem;\n `,\n \"visual-builder__hover-outline\": css`\n position: absolute;\n outline: 2px dashed #6c5ce7;\n transition: var(--outline-transition);\n z-index: 2147483647 !important;\n `,\n \"visual-builder__hover-outline--hidden\": css`\n visibility: hidden;\n `,\n \"visual-builder__hover-outline--unclickable\": css`\n pointer-events: none;\n `,\n \"visual-builder__hover-outline--disabled\": css`\n outline: 2px dashed #909090;\n `,\n \"visual-builder__default-cursor--disabled\": css`\n cursor: none;\n `,\n \"visual-builder__draft-field\": css`\n outline: 2px dashed #eb5646;\n `,\n \"visual-builder__variant-field\": css`\n outline: 2px solid #bd59fa;\n `,\n \"visual-builder__pseudo-editable-element\": css`\n z-index: 99999 !important;\n `,\n // cslp error styles\n \"visual-builder__button-error\": css`\n background-color: #ffeeeb;\n padding: 0px !important;\n &:hover {\n background-color: #ffeeeb;\n }\n `,\n \"visual-builder__focused-toolbar__error\": css`\n display: flex;\n justify-content: center;\n align-items: center;\n column-gap: 3px;\n padding: 4px 8px;\n `,\n \"visual-builder__focused-toolbar__error-text\": css`\n font-weight: 400;\n font-size: 12px;\n line-height: 18px;\n color: #a31b00;\n `,\n \"visual-builder__focused-toolbar__error-toolip\": css`\n position: absolute;\n width: 400px;\n background-color: red;\n left: 0;\n top: -7px;\n transform: translateY(-100%);\n background-color: #767676;\n border-radius: 4px;\n box-shadow:\n 0px 1px 10px 0px #6c5ce733,\n 0px 5px 5px 0px #0000001f,\n 0px 2px 4px 0px #00000024;\n padding: 12px;\n text-align: left;\n\n &:before {\n content: \"\";\n position: absolute;\n bottom: -3px;\n left: 4%;\n transform: translateX(-50%) rotate(45deg);\n width: 10px;\n height: 10px;\n background-color: #767676;\n }\n\n > p {\n margin: 0;\n color: #ffffff;\n font-size: 14px;\n font-weight: 600;\n line-height: 21px;\n margin-bottom: 4px;\n }\n\n > span {\n color: #ffffff;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n }\n `,\n \"variant-field-revert-component\": css`\n position: relative;\n display: inline-block;\n z-index: 2147483647 !important;\n `,\n \"variant-field-revert-component__dropdown-content\": css`\n position: absolute;\n top: -12px;\n left: -4px;\n background-color: #ffffff;\n min-width: max-content;\n box-shadow:\n 0 4px 15px 0 rgba(108, 92, 231, 0.2),\n 0 3px 14px 3px rgba(0, 0, 0, 0.12),\n 0 8px 10px 1px rgba(0, 0, 0, 0.14);\n z-index: 2147483647 !important;\n margin-top: 4px;\n padding: 4px 0px;\n border-radius: 2px;\n `,\n \"variant-field-revert-component__dropdown-content__list-item\": css`\n color: black;\n font-weight: 400;\n padding: 9.6px 16px;\n text-decoration: none;\n display: block;\n font-size: 0.75rem;\n height: 32px;\n line-height: 2rem;\n display: flex;\n align-items: center;\n z-index: 2147483647 !important;\n cursor: pointer;\n &:hover {\n background-color: #f1f1f1;\n }\n &:hover > span {\n color: #5d50be;\n }\n & > span {\n margin-top: 4px;\n margin-bottom: 4px;\n }\n `,\n \"visual-builder__no-cursor-style\": css`\n cursor: none !important;\n `,\n \"visual-builder__field-toolbar-container\": css`\n display: flex;\n flex-direction: column-reverse;\n z-index: 2147483647 !important;\n `,\n \"visual-builder__variant-button\": css`\n display: flex;\n min-width: 3rem !important;\n gap: 0.25rem;\n align-items: center;\n justify-content: center;\n display: flex;\n & svg path {\n fill: #475161;\n }\n `,\n };\n}\n\nexport const VisualBuilderGlobalStyles = `\n @import url(\"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap\");\n\n [data-cslp] [contenteditable=\"true\"] {\n outline: none;\n }\n \n @keyframes visual-builder__spinner {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n`;\n"],"mappings":"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","names":[]}
|
|
@@ -587,6 +587,8 @@ function visualBuilderStyles() {
|
|
|
587
587
|
`,
|
|
588
588
|
"variant-field-revert-component__dropdown-content": css`
|
|
589
589
|
position: absolute;
|
|
590
|
+
top: -12px;
|
|
591
|
+
left: -4px;
|
|
590
592
|
background-color: #ffffff;
|
|
591
593
|
min-width: max-content;
|
|
592
594
|
box-shadow:
|
|
@@ -600,6 +602,7 @@ function visualBuilderStyles() {
|
|
|
600
602
|
`,
|
|
601
603
|
"variant-field-revert-component__dropdown-content__list-item": css`
|
|
602
604
|
color: black;
|
|
605
|
+
font-weight: 400;
|
|
603
606
|
padding: 9.6px 16px;
|
|
604
607
|
text-decoration: none;
|
|
605
608
|
display: block;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/visualBuilder/visualBuilder.style.ts"],"sourcesContent":["import { css } from \"goober\";\n\nconst tooltipBaseStyle = `\n pointer-events: all;\n svg {\n pointer-events: none;\n }\n &:before {\n content: attr(data-tooltip);\n position: absolute;\n bottom: 20px;\n margin-bottom: 24px;\n padding: 12px;\n border-radius: 4px;\n width: max-content;\n max-width: 200px;\n color: #fff;\n font-family: Inter;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 132%; /* 0.99rem */\n letter-spacing: 0.015rem;\n background: #767676;\n }\n &:after {\n content: \"\";\n position: absolute;\n bottom: 28px;\n /* the arrow */\n border: 10px solid #000;\n border-color: #767676 transparent transparent transparent;\n }\n`;\n\nexport function visualBuilderStyles() {\n return {\n \"visual-builder__container\": css`\n --outline-transition: all 0.15s ease-in;\n font-family: \"Inter\", sans-serif;\n `,\n \"visual-builder__cursor\": css`\n visibility: hidden;\n height: 0;\n\n &.visible {\n visibility: visible;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 2147483647 !important;\n\n color: #fff;\n\n height: auto;\n padding: 0 10px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n pointer-events: none !important;\n position: fixed !important;\n cursor: none;\n }\n `,\n \"visual-builder__overlay__wrapper\": css`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n visibility: hidden;\n z-index: 99999;\n\n pointer-events: none;\n\n &.visible {\n visibility: visible;\n }\n `,\n \"visual-builder__overlay--outline\": css`\n position: absolute;\n outline: 4px solid #715cdd;\n transition: var(--outline-transition);\n `,\n \"visual-builder__overlay\": css`\n background: rgba(0, 0, 0, 0.3);\n box-sizing: content-box;\n pointer-events: all;\n position: absolute;\n transition: var(--outline-transition);\n `,\n \"visual-builder__add-button\": css`\n position: absolute;\n pointer-events: all;\n\n background: #ffffff;\n color: #475161;\n\n border-radius: 4px;\n border: 1px solid #6c5ce7;\n\n height: 32px;\n min-width: 32px;\n max-width: 180px;\n padding: 8px 6px;\n transform: translate(-50%, -50%);\n\n font-weight: 600;\n color: #6c5ce7;\n overflow: hidden;\n\n z-index: 2147483647 !important;\n\n display: grid;\n grid-template-columns: min-content 0fr;\n align-content: center;\n gap: 0;\n\n transition:\n grid-template-columns 0.25s,\n left 0.15s ease-in,\n top 0.15s ease-in,\n gap 0.15s ease-in;\n\n &:has(.visual-builder__add-button-label):hover {\n grid-template-columns: min-content 1fr;\n gap: 8px;\n padding: 8px 16px;\n }\n\n svg {\n fill: #6c5ce7;\n }\n\n &:disabled {\n border-color: #bbbec3;\n cursor: not-allowed;\n }\n\n &:disabled svg {\n fill: #bbbec3;\n }\n `,\n \"visual-builder__add-button-label\": css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `,\n \"visual-builder__start-editing-btn\": css`\n z-index: 1000;\n text-decoration: none;\n position: fixed;\n bottom: 30px;\n right: 30px;\n box-shadow:\n 0px 4px 15px 0px rgba(108, 92, 231, 0.2),\n 0px 3px 14px 3px rgba(0, 0, 0, 0.12),\n 0px 8px 10px 1px rgba(0, 0, 0, 0.14);\n display: inline-flex;\n padding: 0.5rem 1rem;\n justify-content: center;\n align-items: center;\n gap: 0.5rem;\n\n border-radius: 4px;\n border: 1px solid transparent;\n background: #6c5ce7;\n transition:\n background-color 0.15s ease-in-out,\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out,\n -webkit-box-shadow 0.15s ease-in-out;\n\n &:hover {\n background-color: #5d50be;\n }\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px #ada4f4;\n }\n & > span {\n color: #fff;\n /* Body/P1 Bold */\n font-size: 1rem;\n font-family: Inter;\n font-weight: 600;\n line-height: 150%;\n letter-spacing: 0.01rem;\n text-transform: capitalize;\n }\n\n & > svg {\n color: #fff;\n font-size: 1rem;\n font-family: Inter;\n font-weight: 600;\n line-height: 150%;\n letter-spacing: 0.01rem;\n text-transform: capitalize;\n }\n `,\n \"visual-builder__cursor-icon\": css`\n height: 40px;\n width: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #5d50be;\n border-radius: 50%;\n position: absolute;\n top: 0;\n left: 0;\n `,\n \"visual-builder__cursor-pointer\": css`\n position: absolute;\n top: -8px;\n left: -8px;\n `,\n \"visual-builder__cursor-icon--loader\": css`\n animation: visual-builder__spinner 1s linear infinite;\n `,\n \"visual-builder__focused-toolbar\": css`\n position: absolute;\n transform: translateY(-100%);\n z-index: 100000;\n gap: 8px;\n width: 0;\n display: flex;\n align-items: end;\n transition: var(--outline-transition);\n `,\n \"visual-builder__focused-toolbar__field-label-wrapper__current-field\": css`\n padding: 4px 8px !important;\n background: #6c5ce7;\n color: #fff;\n z-index: 1;\n border-radius: 2px !important;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: fit-content;\n\n &:disabled {\n filter: contrast(0.7);\n }\n\n .visual-builder__focused-toolbar__text {\n padding-right: 3px;\n height: 16px;\n }\n `,\n \"visual-builder__focused-toolbar__field-label-wrapper__parent-field\": css`\n pointer-events: none;\n color: #5d50be;\n padding: 4px !important;\n margin-bottom: 3px;\n display: none;\n width: fit-content;\n position: absolute;\n z-index: 100000;\n `,\n \"field-label-dropdown-open\": css`\n .visual-builder__focused-toolbar__field-label-wrapper__parent-field {\n pointer-events: all;\n visibility: visible;\n display: initial;\n }\n\n .visual-builder__button--secondary:hover {\n background-color: #6c5ce7;\n color: #f9f8ff;\n }\n `,\n \"visual-builder__focused-toolbar__field-label-wrapper\": css`\n display: flex;\n flex-direction: column-reverse;\n position: relative;\n `,\n \"visual-builder__focused-toolbar__field-label-container\": css`\n display: flex;\n column-gap: 0.5rem;\n align-items: center;\n `,\n \"visual-builder__button\": css`\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: 4px;\n font-size: 16px;\n font-weight: 600;\n line-height: 100%;\n padding: 8px 16px;\n text-align: center;\n z-index: 2147483647 !important;\n transition:\n color 0.15s ease-in-out,\n background-color 0.15s ease-in-out,\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out;\n // vertical-align: middle;\n `,\n \"visual-builder__button--primary\": css`\n background-color: #6c5ce7;\n color: #fff;\n\n &:hover {\n background-color: #5d50be;\n }\n `,\n \"visual-builder__button--secondary\": css`\n background-color: #f9f8ff;\n border: 1px solid #6c5ce7;\n color: #6c5ce7;\n `,\n \"visual-builder__button--edit\": css`\n svg {\n height: 16px;\n width: 16px;\n\n path {\n fill: #475161;\n }\n }\n `,\n \"visual-builder__button-loader\": css`\n svg.loader {\n height: 16px;\n width: 16px;\n\n path {\n fill: #ffffff;\n }\n }\n `,\n \"visual-builder__button--comment-loader\": css`\n svg.loader {\n height: 16px;\n width: 16px;\n\n path {\n fill: #475161;\n }\n }\n `,\n \"visual-builder__field-icon\": css`\n svg {\n height: 16px;\n width: 16px;\n margin-right: 5px;\n }\n `,\n \"visual-builder__focused-toolbar__button-group\": css`\n display: flex;\n background: #fff;\n border-radius: 2px;\n height: 100%;\n padding: 4px !important;\n z-index: 2147483647 !important;\n\n &:has(.visual-builder__button) {\n padding: 2px;\n gap: 8px;\n }\n\n .visual-builder__button:hover {\n background-color: #f5f5f5;\n\n svg {\n color: #5d50be;\n }\n }\n\n .visual-builder__button {\n background-color: #fff;\n border-color: transparent;\n color: #475161;\n padding: 4px;\n min-width: 32px;\n min-height: 32px;\n }\n `,\n \"visual-builder__focused-toolbar__text\": css`\n font-family: Inter, \"sans-serif\";\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 150%;\n letter-spacing: 0.015rem;\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n `,\n \"visual-builder__focused-toolbar__multiple-field-toolbar\": css`\n height: 40px;\n z-index: 2147483647 !important;\n\n svg {\n height: 100%;\n width: 100%;\n }\n `,\n \"visual-builder__rotate--90\": css`\n transform: rotate(90deg);\n `,\n \"visual-builder__focused-toolbar--field-disabled\": css`\n pointer-events: none;\n cursor: not-allowed;\n .visual-builder__focused-toolbar__field-label-wrapper__current-field {\n background: #909090;\n }\n `,\n \"visual-builder__cursor-disabled\": css`\n .visual-builder__cursor-icon {\n background: #909090;\n }\n\n .visual-builder__cursor-pointer path {\n fill: #909090;\n }\n `,\n \"visual-builder__tooltip\": css`\n ${tooltipBaseStyle}\n\n &:before {\n display: none;\n }\n\n &:hover:before,\n &:hover:after {\n display: block;\n z-index: 2147483647 !important;\n }\n\n &:after {\n display: none;\n }\n `,\n \"visual-builder__tooltip--bottom\": css`\n &:before {\n bottom: -66px;\n }\n &:after {\n bottom: -6px;\n transform: rotate(180deg);\n }\n `,\n\n \"visual-builder__tooltip--persistent\": css`\n ${tooltipBaseStyle}\n\n &:before {\n display: block;\n }\n\n &:after {\n display: block;\n }\n `,\n \"visual-builder__empty-block\": css`\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 1rem;\n min-height: 100px;\n `,\n \"visual-builder__empty-block-title\": css`\n font-size: 0.95rem;\n font-family: Inter;\n font-weight: 400;\n line-height: 100%;\n color: #647696;\n `,\n \"visual-builder__empty-block-add-button\": css`\n height: 32px;\n border-radius: 4px;\n background: #f9f8ff;\n border-color: #6c5ce7;\n border-width: 1px;\n padding: 8px 16px 8px 16px;\n font-size: 0.9rem;\n font-family: Inter;\n font-weight: 600;\n color: #6c5ce7;\n padding-block: 0px;\n letter-spacing: 0.01rem;\n `,\n \"visual-builder__hover-outline\": css`\n position: absolute;\n outline: 2px dashed #6c5ce7;\n transition: var(--outline-transition);\n z-index: 2147483647 !important;\n `,\n \"visual-builder__hover-outline--hidden\": css`\n visibility: hidden;\n `,\n \"visual-builder__hover-outline--unclickable\": css`\n pointer-events: none;\n `,\n \"visual-builder__hover-outline--disabled\": css`\n outline: 2px dashed #909090;\n `,\n \"visual-builder__default-cursor--disabled\": css`\n cursor: none;\n `,\n \"visual-builder__draft-field\": css`\n outline: 2px dashed #eb5646;\n `,\n \"visual-builder__variant-field\": css`\n outline: 2px solid #bd59fa;\n `,\n \"visual-builder__pseudo-editable-element\": css`\n z-index: 99999 !important;\n `,\n // cslp error styles\n \"visual-builder__button-error\": css`\n background-color: #ffeeeb;\n padding: 0px !important;\n &:hover {\n background-color: #ffeeeb;\n }\n `,\n \"visual-builder__focused-toolbar__error\": css`\n display: flex;\n justify-content: center;\n align-items: center;\n column-gap: 3px;\n padding: 4px 8px;\n `,\n \"visual-builder__focused-toolbar__error-text\": css`\n font-weight: 400;\n font-size: 12px;\n line-height: 18px;\n color: #a31b00;\n `,\n \"visual-builder__focused-toolbar__error-toolip\": css`\n position: absolute;\n width: 400px;\n background-color: red;\n left: 0;\n top: -7px;\n transform: translateY(-100%);\n background-color: #767676;\n border-radius: 4px;\n box-shadow:\n 0px 1px 10px 0px #6c5ce733,\n 0px 5px 5px 0px #0000001f,\n 0px 2px 4px 0px #00000024;\n padding: 12px;\n text-align: left;\n\n &:before {\n content: \"\";\n position: absolute;\n bottom: -3px;\n left: 4%;\n transform: translateX(-50%) rotate(45deg);\n width: 10px;\n height: 10px;\n background-color: #767676;\n }\n\n > p {\n margin: 0;\n color: #ffffff;\n font-size: 14px;\n font-weight: 600;\n line-height: 21px;\n margin-bottom: 4px;\n }\n\n > span {\n color: #ffffff;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n }\n `,\n \"variant-field-revert-component\": css`\n position: relative;\n display: inline-block;\n z-index: 2147483647 !important;\n `,\n \"variant-field-revert-component__dropdown-content\": css`\n position: absolute;\n background-color: #ffffff;\n min-width: max-content;\n box-shadow:\n 0 4px 15px 0 rgba(108, 92, 231, 0.2),\n 0 3px 14px 3px rgba(0, 0, 0, 0.12),\n 0 8px 10px 1px rgba(0, 0, 0, 0.14);\n z-index: 2147483647 !important;\n margin-top: 4px;\n padding: 4px 0px;\n border-radius: 2px;\n `,\n \"variant-field-revert-component__dropdown-content__list-item\": css`\n color: black;\n padding: 9.6px 16px;\n text-decoration: none;\n display: block;\n font-size: 0.75rem;\n height: 32px;\n line-height: 2rem;\n display: flex;\n align-items: center;\n z-index: 2147483647 !important;\n cursor: pointer;\n &:hover {\n background-color: #f1f1f1;\n }\n &:hover > span {\n color: #5d50be;\n }\n & > span {\n margin-top: 4px;\n margin-bottom: 4px;\n }\n `,\n \"visual-builder__no-cursor-style\": css`\n cursor: none !important;\n `,\n \"visual-builder__field-toolbar-container\": css`\n display: flex;\n flex-direction: column-reverse;\n z-index: 2147483647 !important;\n `,\n \"visual-builder__variant-button\": css`\n display: flex;\n min-width: 3rem !important;\n gap: 0.25rem;\n align-items: center;\n justify-content: center;\n display: flex;\n & svg path {\n fill: #475161;\n }\n `,\n };\n}\n\nexport const VisualBuilderGlobalStyles = `\n @import url(\"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap\");\n\n [data-cslp] [contenteditable=\"true\"] {\n outline: none;\n }\n \n @keyframes visual-builder__spinner {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n`;\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/visualBuilder/visualBuilder.style.ts"],"sourcesContent":["import { css } from \"goober\";\n\nconst tooltipBaseStyle = `\n pointer-events: all;\n svg {\n pointer-events: none;\n }\n &:before {\n content: attr(data-tooltip);\n position: absolute;\n bottom: 20px;\n margin-bottom: 24px;\n padding: 12px;\n border-radius: 4px;\n width: max-content;\n max-width: 200px;\n color: #fff;\n font-family: Inter;\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 132%; /* 0.99rem */\n letter-spacing: 0.015rem;\n background: #767676;\n }\n &:after {\n content: \"\";\n position: absolute;\n bottom: 28px;\n /* the arrow */\n border: 10px solid #000;\n border-color: #767676 transparent transparent transparent;\n }\n`;\n\nexport function visualBuilderStyles() {\n return {\n \"visual-builder__container\": css`\n --outline-transition: all 0.15s ease-in;\n font-family: \"Inter\", sans-serif;\n `,\n \"visual-builder__cursor\": css`\n visibility: hidden;\n height: 0;\n\n &.visible {\n visibility: visible;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 2147483647 !important;\n\n color: #fff;\n\n height: auto;\n padding: 0 10px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n pointer-events: none !important;\n position: fixed !important;\n cursor: none;\n }\n `,\n \"visual-builder__overlay__wrapper\": css`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n visibility: hidden;\n z-index: 99999;\n\n pointer-events: none;\n\n &.visible {\n visibility: visible;\n }\n `,\n \"visual-builder__overlay--outline\": css`\n position: absolute;\n outline: 4px solid #715cdd;\n transition: var(--outline-transition);\n `,\n \"visual-builder__overlay\": css`\n background: rgba(0, 0, 0, 0.3);\n box-sizing: content-box;\n pointer-events: all;\n position: absolute;\n transition: var(--outline-transition);\n `,\n \"visual-builder__add-button\": css`\n position: absolute;\n pointer-events: all;\n\n background: #ffffff;\n color: #475161;\n\n border-radius: 4px;\n border: 1px solid #6c5ce7;\n\n height: 32px;\n min-width: 32px;\n max-width: 180px;\n padding: 8px 6px;\n transform: translate(-50%, -50%);\n\n font-weight: 600;\n color: #6c5ce7;\n overflow: hidden;\n\n z-index: 2147483647 !important;\n\n display: grid;\n grid-template-columns: min-content 0fr;\n align-content: center;\n gap: 0;\n\n transition:\n grid-template-columns 0.25s,\n left 0.15s ease-in,\n top 0.15s ease-in,\n gap 0.15s ease-in;\n\n &:has(.visual-builder__add-button-label):hover {\n grid-template-columns: min-content 1fr;\n gap: 8px;\n padding: 8px 16px;\n }\n\n svg {\n fill: #6c5ce7;\n }\n\n &:disabled {\n border-color: #bbbec3;\n cursor: not-allowed;\n }\n\n &:disabled svg {\n fill: #bbbec3;\n }\n `,\n \"visual-builder__add-button-label\": css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `,\n \"visual-builder__start-editing-btn\": css`\n z-index: 1000;\n text-decoration: none;\n position: fixed;\n bottom: 30px;\n right: 30px;\n box-shadow:\n 0px 4px 15px 0px rgba(108, 92, 231, 0.2),\n 0px 3px 14px 3px rgba(0, 0, 0, 0.12),\n 0px 8px 10px 1px rgba(0, 0, 0, 0.14);\n display: inline-flex;\n padding: 0.5rem 1rem;\n justify-content: center;\n align-items: center;\n gap: 0.5rem;\n\n border-radius: 4px;\n border: 1px solid transparent;\n background: #6c5ce7;\n transition:\n background-color 0.15s ease-in-out,\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out,\n -webkit-box-shadow 0.15s ease-in-out;\n\n &:hover {\n background-color: #5d50be;\n }\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px #ada4f4;\n }\n & > span {\n color: #fff;\n /* Body/P1 Bold */\n font-size: 1rem;\n font-family: Inter;\n font-weight: 600;\n line-height: 150%;\n letter-spacing: 0.01rem;\n text-transform: capitalize;\n }\n\n & > svg {\n color: #fff;\n font-size: 1rem;\n font-family: Inter;\n font-weight: 600;\n line-height: 150%;\n letter-spacing: 0.01rem;\n text-transform: capitalize;\n }\n `,\n \"visual-builder__cursor-icon\": css`\n height: 40px;\n width: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #5d50be;\n border-radius: 50%;\n position: absolute;\n top: 0;\n left: 0;\n `,\n \"visual-builder__cursor-pointer\": css`\n position: absolute;\n top: -8px;\n left: -8px;\n `,\n \"visual-builder__cursor-icon--loader\": css`\n animation: visual-builder__spinner 1s linear infinite;\n `,\n \"visual-builder__focused-toolbar\": css`\n position: absolute;\n transform: translateY(-100%);\n z-index: 100000;\n gap: 8px;\n width: 0;\n display: flex;\n align-items: end;\n transition: var(--outline-transition);\n `,\n \"visual-builder__focused-toolbar__field-label-wrapper__current-field\": css`\n padding: 4px 8px !important;\n background: #6c5ce7;\n color: #fff;\n z-index: 1;\n border-radius: 2px !important;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: fit-content;\n\n &:disabled {\n filter: contrast(0.7);\n }\n\n .visual-builder__focused-toolbar__text {\n padding-right: 3px;\n height: 16px;\n }\n `,\n \"visual-builder__focused-toolbar__field-label-wrapper__parent-field\": css`\n pointer-events: none;\n color: #5d50be;\n padding: 4px !important;\n margin-bottom: 3px;\n display: none;\n width: fit-content;\n position: absolute;\n z-index: 100000;\n `,\n \"field-label-dropdown-open\": css`\n .visual-builder__focused-toolbar__field-label-wrapper__parent-field {\n pointer-events: all;\n visibility: visible;\n display: initial;\n }\n\n .visual-builder__button--secondary:hover {\n background-color: #6c5ce7;\n color: #f9f8ff;\n }\n `,\n \"visual-builder__focused-toolbar__field-label-wrapper\": css`\n display: flex;\n flex-direction: column-reverse;\n position: relative;\n `,\n \"visual-builder__focused-toolbar__field-label-container\": css`\n display: flex;\n column-gap: 0.5rem;\n align-items: center;\n `,\n \"visual-builder__button\": css`\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: 4px;\n font-size: 16px;\n font-weight: 600;\n line-height: 100%;\n padding: 8px 16px;\n text-align: center;\n z-index: 2147483647 !important;\n transition:\n color 0.15s ease-in-out,\n background-color 0.15s ease-in-out,\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out;\n // vertical-align: middle;\n `,\n \"visual-builder__button--primary\": css`\n background-color: #6c5ce7;\n color: #fff;\n\n &:hover {\n background-color: #5d50be;\n }\n `,\n \"visual-builder__button--secondary\": css`\n background-color: #f9f8ff;\n border: 1px solid #6c5ce7;\n color: #6c5ce7;\n `,\n \"visual-builder__button--edit\": css`\n svg {\n height: 16px;\n width: 16px;\n\n path {\n fill: #475161;\n }\n }\n `,\n \"visual-builder__button-loader\": css`\n svg.loader {\n height: 16px;\n width: 16px;\n\n path {\n fill: #ffffff;\n }\n }\n `,\n \"visual-builder__button--comment-loader\": css`\n svg.loader {\n height: 16px;\n width: 16px;\n\n path {\n fill: #475161;\n }\n }\n `,\n \"visual-builder__field-icon\": css`\n svg {\n height: 16px;\n width: 16px;\n margin-right: 5px;\n }\n `,\n \"visual-builder__focused-toolbar__button-group\": css`\n display: flex;\n background: #fff;\n border-radius: 2px;\n height: 100%;\n padding: 4px !important;\n z-index: 2147483647 !important;\n\n &:has(.visual-builder__button) {\n padding: 2px;\n gap: 8px;\n }\n\n .visual-builder__button:hover {\n background-color: #f5f5f5;\n\n svg {\n color: #5d50be;\n }\n }\n\n .visual-builder__button {\n background-color: #fff;\n border-color: transparent;\n color: #475161;\n padding: 4px;\n min-width: 32px;\n min-height: 32px;\n }\n `,\n \"visual-builder__focused-toolbar__text\": css`\n font-family: Inter, \"sans-serif\";\n font-size: 0.75rem;\n font-style: normal;\n font-weight: 400;\n line-height: 150%;\n letter-spacing: 0.015rem;\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n `,\n \"visual-builder__focused-toolbar__multiple-field-toolbar\": css`\n height: 40px;\n z-index: 2147483647 !important;\n\n svg {\n height: 100%;\n width: 100%;\n }\n `,\n \"visual-builder__rotate--90\": css`\n transform: rotate(90deg);\n `,\n \"visual-builder__focused-toolbar--field-disabled\": css`\n pointer-events: none;\n cursor: not-allowed;\n .visual-builder__focused-toolbar__field-label-wrapper__current-field {\n background: #909090;\n }\n `,\n \"visual-builder__cursor-disabled\": css`\n .visual-builder__cursor-icon {\n background: #909090;\n }\n\n .visual-builder__cursor-pointer path {\n fill: #909090;\n }\n `,\n \"visual-builder__tooltip\": css`\n ${tooltipBaseStyle}\n\n &:before {\n display: none;\n }\n\n &:hover:before,\n &:hover:after {\n display: block;\n z-index: 2147483647 !important;\n }\n\n &:after {\n display: none;\n }\n `,\n \"visual-builder__tooltip--bottom\": css`\n &:before {\n bottom: -66px;\n }\n &:after {\n bottom: -6px;\n transform: rotate(180deg);\n }\n `,\n\n \"visual-builder__tooltip--persistent\": css`\n ${tooltipBaseStyle}\n\n &:before {\n display: block;\n }\n\n &:after {\n display: block;\n }\n `,\n \"visual-builder__empty-block\": css`\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n gap: 1rem;\n min-height: 100px;\n `,\n \"visual-builder__empty-block-title\": css`\n font-size: 0.95rem;\n font-family: Inter;\n font-weight: 400;\n line-height: 100%;\n color: #647696;\n `,\n \"visual-builder__empty-block-add-button\": css`\n height: 32px;\n border-radius: 4px;\n background: #f9f8ff;\n border-color: #6c5ce7;\n border-width: 1px;\n padding: 8px 16px 8px 16px;\n font-size: 0.9rem;\n font-family: Inter;\n font-weight: 600;\n color: #6c5ce7;\n padding-block: 0px;\n letter-spacing: 0.01rem;\n `,\n \"visual-builder__hover-outline\": css`\n position: absolute;\n outline: 2px dashed #6c5ce7;\n transition: var(--outline-transition);\n z-index: 2147483647 !important;\n `,\n \"visual-builder__hover-outline--hidden\": css`\n visibility: hidden;\n `,\n \"visual-builder__hover-outline--unclickable\": css`\n pointer-events: none;\n `,\n \"visual-builder__hover-outline--disabled\": css`\n outline: 2px dashed #909090;\n `,\n \"visual-builder__default-cursor--disabled\": css`\n cursor: none;\n `,\n \"visual-builder__draft-field\": css`\n outline: 2px dashed #eb5646;\n `,\n \"visual-builder__variant-field\": css`\n outline: 2px solid #bd59fa;\n `,\n \"visual-builder__pseudo-editable-element\": css`\n z-index: 99999 !important;\n `,\n // cslp error styles\n \"visual-builder__button-error\": css`\n background-color: #ffeeeb;\n padding: 0px !important;\n &:hover {\n background-color: #ffeeeb;\n }\n `,\n \"visual-builder__focused-toolbar__error\": css`\n display: flex;\n justify-content: center;\n align-items: center;\n column-gap: 3px;\n padding: 4px 8px;\n `,\n \"visual-builder__focused-toolbar__error-text\": css`\n font-weight: 400;\n font-size: 12px;\n line-height: 18px;\n color: #a31b00;\n `,\n \"visual-builder__focused-toolbar__error-toolip\": css`\n position: absolute;\n width: 400px;\n background-color: red;\n left: 0;\n top: -7px;\n transform: translateY(-100%);\n background-color: #767676;\n border-radius: 4px;\n box-shadow:\n 0px 1px 10px 0px #6c5ce733,\n 0px 5px 5px 0px #0000001f,\n 0px 2px 4px 0px #00000024;\n padding: 12px;\n text-align: left;\n\n &:before {\n content: \"\";\n position: absolute;\n bottom: -3px;\n left: 4%;\n transform: translateX(-50%) rotate(45deg);\n width: 10px;\n height: 10px;\n background-color: #767676;\n }\n\n > p {\n margin: 0;\n color: #ffffff;\n font-size: 14px;\n font-weight: 600;\n line-height: 21px;\n margin-bottom: 4px;\n }\n\n > span {\n color: #ffffff;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n }\n `,\n \"variant-field-revert-component\": css`\n position: relative;\n display: inline-block;\n z-index: 2147483647 !important;\n `,\n \"variant-field-revert-component__dropdown-content\": css`\n position: absolute;\n top: -12px;\n left: -4px;\n background-color: #ffffff;\n min-width: max-content;\n box-shadow:\n 0 4px 15px 0 rgba(108, 92, 231, 0.2),\n 0 3px 14px 3px rgba(0, 0, 0, 0.12),\n 0 8px 10px 1px rgba(0, 0, 0, 0.14);\n z-index: 2147483647 !important;\n margin-top: 4px;\n padding: 4px 0px;\n border-radius: 2px;\n `,\n \"variant-field-revert-component__dropdown-content__list-item\": css`\n color: black;\n font-weight: 400;\n padding: 9.6px 16px;\n text-decoration: none;\n display: block;\n font-size: 0.75rem;\n height: 32px;\n line-height: 2rem;\n display: flex;\n align-items: center;\n z-index: 2147483647 !important;\n cursor: pointer;\n &:hover {\n background-color: #f1f1f1;\n }\n &:hover > span {\n color: #5d50be;\n }\n & > span {\n margin-top: 4px;\n margin-bottom: 4px;\n }\n `,\n \"visual-builder__no-cursor-style\": css`\n cursor: none !important;\n `,\n \"visual-builder__field-toolbar-container\": css`\n display: flex;\n flex-direction: column-reverse;\n z-index: 2147483647 !important;\n `,\n \"visual-builder__variant-button\": css`\n display: flex;\n min-width: 3rem !important;\n gap: 0.25rem;\n align-items: center;\n justify-content: center;\n display: flex;\n & svg path {\n fill: #475161;\n }\n `,\n };\n}\n\nexport const VisualBuilderGlobalStyles = `\n @import url(\"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap\");\n\n [data-cslp] [contenteditable=\"true\"] {\n outline: none;\n }\n \n @keyframes visual-builder__spinner {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n`;\n"],"mappings":"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","names":[]}
|
|
@@ -265,6 +265,9 @@ var LivePreviewEditButton = class {
|
|
|
265
265
|
return false;
|
|
266
266
|
}
|
|
267
267
|
updateTooltipPosition() {
|
|
268
|
+
if (!document.getElementById("cslp-tooltip")) {
|
|
269
|
+
this.createCslpTooltip();
|
|
270
|
+
}
|
|
268
271
|
const editButton = import_configManager.default.get().editButton;
|
|
269
272
|
const elements = import_configManager.default.get().elements;
|
|
270
273
|
if (!elements.highlightedElement || !this.tooltip) return false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/livePreview/editButton/editButton.ts"],"sourcesContent":["import { effect } from \"@preact/signals\";\nimport { inIframe } from \"../../common/inIframe\";\nimport Config from \"../../configManager/configManager\";\nimport { addCslpOutline, extractDetailsFromCslp } from \"../../cslp\";\nimport { cslpTagStyles } from \"./editButton.style\";\nimport { PublicLogger } from \"../../logger/logger\";\nimport {\n type IEditButtonPosition,\n ILivePreviewWindowType,\n} from \"../../types/types\";\nimport livePreviewPostMessage from \"../eventManager/livePreviewEventManager\";\nimport { EDIT_BUTTON_TOOLTIP_ID } from \"./editButton.constant\";\nimport { isOpeningInTimeline } from \"../../utils\";\n\nfunction calculateEditButtonPosition(\n currentHoveredElement: HTMLElement,\n cslpButtonPosition: string\n): IEditButtonPosition {\n const editButtonPosition: IEditButtonPosition = {\n upperBoundOfTooltip: 0,\n leftBoundOfTooltip: 0,\n };\n const currentRectOfElement = currentHoveredElement.getBoundingClientRect();\n try {\n const buttonMeasurementValues = {\n width: 72,\n halfWidth: 36,\n height: 40,\n basicMargin: 5,\n widthWithMargin: 77,\n };\n\n switch (cslpButtonPosition) {\n case \"top-center\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top - buttonMeasurementValues.height;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.width / 2 -\n buttonMeasurementValues.halfWidth +\n currentRectOfElement.left;\n break;\n case \"top-right\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top - buttonMeasurementValues.height;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.right - buttonMeasurementValues.width;\n break;\n case \"right\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top -\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.right +\n buttonMeasurementValues.basicMargin;\n break;\n case \"bottom\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.bottom +\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.left -\n buttonMeasurementValues.basicMargin;\n break;\n case \"bottom-left\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.bottom +\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.left -\n buttonMeasurementValues.basicMargin;\n break;\n case \"bottom-center\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.bottom +\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.width / 2 -\n buttonMeasurementValues.halfWidth +\n currentRectOfElement.left;\n break;\n case \"bottom-right\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.bottom +\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.right - buttonMeasurementValues.width;\n break;\n case \"left\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top -\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.left -\n buttonMeasurementValues.widthWithMargin;\n break;\n // default position => top, top-left or any other string\n default:\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top - buttonMeasurementValues.height;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.left -\n buttonMeasurementValues.basicMargin;\n break;\n }\n return editButtonPosition;\n } catch (error) {\n PublicLogger.error(error);\n return editButtonPosition;\n }\n}\n\nexport const createSingularEditButton = (\n editCallback: (e: MouseEvent) => void\n): HTMLDivElement => {\n const singularEditButton = document.createElement(\"div\");\n singularEditButton.classList.add(\"cslp-tooltip-child\", \"singular\");\n singularEditButton.setAttribute(\n \"data-test-id\",\n \"cslp-singular-edit-button\"\n );\n singularEditButton.innerHTML = `<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.1 3.5L0.3 11.3C0.1 11.5 0 11.7 0 12V15C0 15.6 0.4 16 1 16H4C4.3 16 4.5 15.9 4.7 15.7L12.5 7.9L8.1 3.5Z\" fill=\"#718096\"></path>\n <path d=\"M15.7 3.3L12.7 0.3C12.3 -0.1 11.7 -0.1 11.3 0.3L9.5 2.1L13.9 6.5L15.7 4.7C16.1 4.3 16.1 3.7 15.7 3.3Z\" fill=\"#718096\"></path>\n </svg>Edit`;\n\n singularEditButton.addEventListener(\"click\", editCallback);\n\n return singularEditButton;\n};\n\nexport const createMultipleEditButton = (\n editCallback: (e: MouseEvent) => void,\n linkCallback: (e: MouseEvent) => void\n): HTMLDivElement => {\n const multipleEditButton = document.createElement(\"div\");\n multipleEditButton.classList.add(\"cslp-tooltip-child\");\n multipleEditButton.setAttribute(\"data-title\", \"Edit\");\n multipleEditButton.setAttribute(\n \"data-test-id\",\n \"cslp-multiple-edit-button\"\n );\n multipleEditButton.innerHTML = ` <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.1 3.5L0.3 11.3C0.1 11.5 0 11.7 0 12V15C0 15.6 0.4 16 1 16H4C4.3 16 4.5 15.9 4.7 15.7L12.5 7.9L8.1 3.5Z\" fill=\"#718096\"></path>\n <path d=\"M15.7 3.3L12.7 0.3C12.3 -0.1 11.7 -0.1 11.3 0.3L9.5 2.1L13.9 6.5L15.7 4.7C16.1 4.3 16.1 3.7 15.7 3.3Z\" fill=\"#718096\"></path>\n </svg>`;\n\n multipleEditButton.addEventListener(\"click\", editCallback);\n\n const multipleExternalLinkButton = document.createElement(\"div\");\n multipleExternalLinkButton.classList.add(\"cslp-tooltip-child\");\n multipleExternalLinkButton.setAttribute(\"data-title\", \"Go to link\");\n multipleExternalLinkButton.setAttribute(\n \"data-test-id\",\n \"cslp-multiple-external-link-button\"\n );\n multipleExternalLinkButton.innerHTML = ` <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2.66654 2.66758H13.3332V13.3342H6.66654V16.0009H13.3332C14.0405 16.0009 14.7187 15.72 15.2188 15.2199C15.7189 14.7198 15.9999 14.0415 15.9999 13.3342V2.66758C15.9999 1.96034 15.7189 1.28206 15.2188 0.781964C14.7187 0.281867 14.0405 0.000915527 13.3332 0.000915527H2.66654C1.9593 0.000915527 1.28102 0.281867 0.780927 0.781964C0.280829 1.28206 -0.00012207 1.96034 -0.00012207 2.66758V9.33425H2.66654V2.66758Z\" fill=\"#718096\" />\n <path d=\"M6.94263 7.05734L0.999958 13L2.88529 14.8853L8.82796 8.94267L10.8853 11V5.00001H4.88529L6.94263 7.05734Z\" fill=\"#718096\" />\n </svg>`;\n\n multipleExternalLinkButton.addEventListener(\"click\", linkCallback);\n\n const multipleEditFragment = document.createDocumentFragment();\n multipleEditFragment.appendChild(multipleEditButton);\n multipleEditFragment.appendChild(multipleExternalLinkButton);\n\n const multipleDiv = document.createElement(\"div\");\n multipleDiv.appendChild(multipleEditFragment);\n multipleDiv.classList.add(cslpTagStyles()[\"multiple\"]);\n\n return multipleDiv;\n};\n\nexport function getEditButtonPosition(\n currentHoveredElement: HTMLElement | null,\n defaultPosition: string | undefined\n): IEditButtonPosition {\n if (!currentHoveredElement)\n return { upperBoundOfTooltip: 0, leftBoundOfTooltip: 0 };\n\n const cslpButtonPosition = currentHoveredElement.getAttribute(\n \"data-cslp-button-position\"\n );\n if (cslpButtonPosition) {\n return calculateEditButtonPosition(\n currentHoveredElement,\n cslpButtonPosition\n );\n }\n\n // NOTE: position \"top\" and \"top-left\" will be the position of edit button if no default position passed in config\n return calculateEditButtonPosition(\n currentHoveredElement,\n defaultPosition || \"top\"\n );\n}\n\nexport function shouldRenderEditButton(): boolean {\n const config = Config.get();\n\n if (!config.editButton.enable) {\n if (config.editButton.enable === undefined)\n PublicLogger.error(\n \"enable key is required inside editButton object\"\n );\n return false;\n }\n\n // return boolean in case of cslp-buttons query added in url\n try {\n const currentLocation = new URL(window.location.href);\n const cslpButtonQueryValue =\n currentLocation.searchParams.get(\"cslp-buttons\");\n\n if (\n cslpButtonQueryValue !== null &&\n config.editButton.includeByQueryParameter !== false\n )\n return cslpButtonQueryValue === \"false\" ? false : true;\n } catch (error) {\n PublicLogger.error(error);\n }\n\n const iFrameCheck = inIframe();\n\n // case outside live preview\n if (\n !iFrameCheck &&\n config.editButton.exclude?.find(\n (exclude) => exclude === \"outsideLivePreviewPortal\"\n )\n ) {\n return false;\n }\n\n // case if inside live preview\n if (\n iFrameCheck &&\n config.editButton.exclude?.find(\n (exclude) => exclude === \"insideLivePreviewPortal\"\n )\n ) {\n return false;\n } else if (iFrameCheck) {\n // case if inside visual builder\n if (config.windowType === \"builder\") {\n return false;\n }\n\n // case if independent site\n return true;\n }\n\n // Priority list => 1. cslpEditButton query value 2. Inside live preview 3. renderCslpButtonByDefault value selected by user\n return true;\n}\n\nexport function toggleEditButtonElement() {\n const render = shouldRenderEditButton();\n const exists = doesEditButtonExist();\n\n if (render && !exists) {\n LivePreviewEditButton.livePreviewEditButton =\n new LivePreviewEditButton();\n } else if (!render && exists) {\n LivePreviewEditButton.livePreviewEditButton?.destroy();\n }\n}\n\nexport function doesEditButtonExist() {\n return document.getElementById(EDIT_BUTTON_TOOLTIP_ID) !== null;\n}\n\nexport class LivePreviewEditButton {\n private tooltip: HTMLButtonElement | null = null;\n private typeOfCurrentChild: \"singular\" | \"multiple\" = \"singular\";\n private tooltipChild: {\n singular: HTMLDivElement | null;\n multiple: HTMLDivElement | null;\n } = {\n singular: null,\n multiple: null,\n };\n static livePreviewEditButton: LivePreviewEditButton | null = null;\n\n constructor() {\n this.createCslpTooltip = this.createCslpTooltip.bind(this);\n this.updateTooltipPosition = this.updateTooltipPosition.bind(this);\n this.addEditStyleOnHover = this.addEditStyleOnHover.bind(this);\n this.scrollHandler = this.scrollHandler.bind(this);\n this.generateRedirectUrl = this.generateRedirectUrl.bind(this);\n this.linkClickHandler = this.linkClickHandler.bind(this);\n this.destroy = this.destroy.bind(this);\n\n if (this.createCslpTooltip()) {\n this.updateTooltipPosition();\n\n window.addEventListener(\"scroll\", this.updateTooltipPosition);\n window.addEventListener(\"mouseover\", this.addEditStyleOnHover);\n }\n }\n\n private createCslpTooltip(): boolean {\n const editButton = Config.get().editButton;\n\n if (\n !document.getElementById(EDIT_BUTTON_TOOLTIP_ID) &&\n editButton.enable &&\n shouldRenderEditButton()\n ) {\n const tooltip = document.createElement(\"button\");\n this.tooltip = tooltip;\n\n this.tooltip.classList.add(cslpTagStyles()[\"cslp-tooltip\"]);\n this.tooltip.setAttribute(\"data-test-id\", \"cs-cslp-tooltip\");\n this.tooltip.id = EDIT_BUTTON_TOOLTIP_ID;\n\n window.document.body.insertAdjacentElement(\n \"beforeend\",\n this.tooltip\n );\n\n this.tooltipChild.singular = createSingularEditButton(\n this.scrollHandler\n );\n this.tooltipChild.multiple = createMultipleEditButton(\n this.scrollHandler,\n this.linkClickHandler\n );\n\n this.tooltip.appendChild(this.tooltipChild.singular);\n return true;\n }\n return false;\n }\n\n private updateTooltipPosition() {\n const editButton = Config.get().editButton;\n const elements = Config.get().elements;\n\n if (!elements.highlightedElement || !this.tooltip) return false;\n\n const currentRectOfElement =\n elements.highlightedElement.getBoundingClientRect();\n const currentRectOfParentOfElement =\n this.tooltip.parentElement?.getBoundingClientRect();\n\n if (currentRectOfElement && currentRectOfParentOfElement) {\n const editButtonPosition = getEditButtonPosition(\n elements.highlightedElement as HTMLElement,\n editButton.position\n );\n\n let upperBoundOfTooltip = editButtonPosition.upperBoundOfTooltip;\n const leftBoundOfTooltip = editButtonPosition.leftBoundOfTooltip;\n\n // if scrolled and element is still visible, make sure tooltip is also visible\n if (upperBoundOfTooltip < 0) {\n if (currentRectOfElement.top < 0)\n upperBoundOfTooltip = currentRectOfElement.top;\n else upperBoundOfTooltip = 0;\n }\n\n this.tooltip.style.top = upperBoundOfTooltip + \"px\";\n this.tooltip.style.zIndex =\n elements.highlightedElement.style.zIndex || \"200\";\n this.tooltip.style.left = leftBoundOfTooltip + \"px\";\n\n if (this.tooltipChild.singular && this.tooltipChild.multiple) {\n if (\n elements.highlightedElement.hasAttribute(\"href\") &&\n this.typeOfCurrentChild !== \"multiple\"\n ) {\n this.tooltip.innerHTML = \"\";\n this.tooltip.appendChild(this.tooltipChild.multiple);\n this.typeOfCurrentChild = \"multiple\";\n } else if (this.typeOfCurrentChild !== \"singular\") {\n this.tooltip.innerHTML = \"\";\n this.tooltip.appendChild(this.tooltipChild.singular);\n this.typeOfCurrentChild = \"singular\";\n }\n }\n return true;\n }\n\n return false;\n }\n\n private addEditStyleOnHover(e: MouseEvent) {\n const updateTooltipPosition: Parameters<typeof addCslpOutline>[\"1\"] = ({\n cslpTag,\n highlightedElement,\n }) => {\n if (this.updateTooltipPosition()) {\n this.tooltip?.setAttribute(\"current-data-cslp\", cslpTag);\n this.tooltip?.setAttribute(\n \"current-href\",\n highlightedElement.getAttribute(\"href\") ?? \"\"\n );\n }\n };\n\n const editButton = Config.get().editButton;\n const windowType = Config.get().windowType;\n\n if (\n (windowType === ILivePreviewWindowType.PREVIEW ||\n windowType === ILivePreviewWindowType.INDEPENDENT) &&\n editButton.enable\n ) {\n addCslpOutline(e, updateTooltipPosition);\n }\n }\n\n private scrollHandler() {\n if (!this.tooltip) return;\n\n const cslpTag = this.tooltip.getAttribute(\"current-data-cslp\");\n\n if (cslpTag) {\n const { content_type_uid, entry_uid, locale, variant, fieldPathWithIndex } =\n extractDetailsFromCslp(cslpTag);\n\n if (inIframe()) {\n livePreviewPostMessage?.send(\"scroll\", {\n field: fieldPathWithIndex,\n content_type_uid,\n entry_uid,\n variant,\n locale,\n });\n } else {\n try {\n // Redirect to Contentstack edit page\n const redirectUrl = this.generateRedirectUrl(\n content_type_uid,\n locale,\n entry_uid,\n variant,\n fieldPathWithIndex\n );\n\n window.open(redirectUrl, \"_blank\");\n } catch (error) {\n PublicLogger.error(error);\n }\n }\n }\n }\n\n /**\n * Generates the redirect URL for editing a specific entry in the Live Preview SDK.\n * @param content_type_uid - The UID of the content type.\n * @param locale - The locale of the entry (default: \"en-us\").\n * @param entry_uid - The UID of the entry.\n * @param preview_field - The field to be previewed.\n * @returns The redirect URL for editing the entry.\n */\n private generateRedirectUrl(\n content_type_uid: string,\n locale = \"en-us\",\n entry_uid: string,\n variant: string | undefined,\n preview_field: string\n ): string {\n const config = Config.get();\n\n if (!config.stackDetails.apiKey) {\n throw `To use edit tags, you must provide the stack API key. Specify the API key while initializing the Live Preview SDK.\n\n ContentstackLivePreview.init({\n ...,\n stackDetails: {\n apiKey: 'your-api-key'\n },\n ...\n })`;\n }\n\n if (!config.stackDetails.environment) {\n throw `To use edit tags, you must provide the preview environment. Specify the preview environment while initializing the Live Preview SDK.\n\n ContentstackLivePreview.init({\n ...,\n stackDetails: {\n environment: 'Your-environment'\n },\n ...\n })`;\n }\n\n const protocol = String(config.clientUrlParams.protocol);\n const host = String(config.clientUrlParams.host);\n const port = String(config.clientUrlParams.port);\n const environment = String(config.stackDetails.environment);\n const branch = String(config.stackDetails.branch || \"main\");\n\n let urlHash = `!/stack/${\n config.stackDetails.apiKey\n }/content-type/${content_type_uid}/${\n locale ?? \"en-us\"\n }/entry/${entry_uid}`;\n\n if (variant) {\n urlHash += `/variant/${variant}/edit`;\n } else {\n urlHash += `/edit`;\n }\n\n const url = new URL(`${protocol}://${host}`);\n url.port = port;\n url.hash = urlHash;\n if (config.stackDetails.branch) {\n url.searchParams.append(\"branch\", branch);\n }\n url.searchParams.append(\"preview-field\", preview_field);\n url.searchParams.append(\"preview-locale\", locale ?? \"en-us\");\n url.searchParams.append(\"preview-environment\", environment);\n\n return `${url.origin}/${url.hash}${url.search}`;\n }\n\n private linkClickHandler() {\n if (!this.tooltip) return;\n const hrefAttribute = this.tooltip.getAttribute(\"current-href\");\n\n if (hrefAttribute) {\n window.location.assign(hrefAttribute);\n }\n }\n\n /**\n * Destroys the edit button by removing event listeners and removing the tooltip.\n */\n destroy(): void {\n window.removeEventListener(\"scroll\", this.updateTooltipPosition);\n window.removeEventListener(\"mouseover\", this.addEditStyleOnHover);\n this.tooltip?.remove();\n }\n}\n\neffect(function handleWindowTypeChange() {\n // we need to specify when to run this effect.\n // here, we run it when the value of windowType changes\n if (typeof window === \"undefined\") return;\n Config.get().windowType;\n if (LivePreviewEditButton && !isOpeningInTimeline()) {\n toggleEditButtonElement();\n }\n});\n"],"mappings":"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","names":["import_editButton","Config","livePreviewPostMessage"]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/livePreview/editButton/editButton.ts"],"sourcesContent":["import { effect } from \"@preact/signals\";\nimport { inIframe } from \"../../common/inIframe\";\nimport Config from \"../../configManager/configManager\";\nimport { addCslpOutline, extractDetailsFromCslp } from \"../../cslp\";\nimport { cslpTagStyles } from \"./editButton.style\";\nimport { PublicLogger } from \"../../logger/logger\";\nimport {\n type IEditButtonPosition,\n ILivePreviewWindowType,\n} from \"../../types/types\";\nimport livePreviewPostMessage from \"../eventManager/livePreviewEventManager\";\nimport { EDIT_BUTTON_TOOLTIP_ID } from \"./editButton.constant\";\nimport { isOpeningInTimeline } from \"../../utils\";\n\nfunction calculateEditButtonPosition(\n currentHoveredElement: HTMLElement,\n cslpButtonPosition: string\n): IEditButtonPosition {\n const editButtonPosition: IEditButtonPosition = {\n upperBoundOfTooltip: 0,\n leftBoundOfTooltip: 0,\n };\n const currentRectOfElement = currentHoveredElement.getBoundingClientRect();\n try {\n const buttonMeasurementValues = {\n width: 72,\n halfWidth: 36,\n height: 40,\n basicMargin: 5,\n widthWithMargin: 77,\n };\n\n switch (cslpButtonPosition) {\n case \"top-center\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top - buttonMeasurementValues.height;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.width / 2 -\n buttonMeasurementValues.halfWidth +\n currentRectOfElement.left;\n break;\n case \"top-right\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top - buttonMeasurementValues.height;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.right - buttonMeasurementValues.width;\n break;\n case \"right\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top -\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.right +\n buttonMeasurementValues.basicMargin;\n break;\n case \"bottom\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.bottom +\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.left -\n buttonMeasurementValues.basicMargin;\n break;\n case \"bottom-left\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.bottom +\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.left -\n buttonMeasurementValues.basicMargin;\n break;\n case \"bottom-center\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.bottom +\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.width / 2 -\n buttonMeasurementValues.halfWidth +\n currentRectOfElement.left;\n break;\n case \"bottom-right\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.bottom +\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.right - buttonMeasurementValues.width;\n break;\n case \"left\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top -\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.left -\n buttonMeasurementValues.widthWithMargin;\n break;\n // default position => top, top-left or any other string\n default:\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top - buttonMeasurementValues.height;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.left -\n buttonMeasurementValues.basicMargin;\n break;\n }\n return editButtonPosition;\n } catch (error) {\n PublicLogger.error(error);\n return editButtonPosition;\n }\n}\n\nexport const createSingularEditButton = (\n editCallback: (e: MouseEvent) => void\n): HTMLDivElement => {\n const singularEditButton = document.createElement(\"div\");\n singularEditButton.classList.add(\"cslp-tooltip-child\", \"singular\");\n singularEditButton.setAttribute(\n \"data-test-id\",\n \"cslp-singular-edit-button\"\n );\n singularEditButton.innerHTML = `<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.1 3.5L0.3 11.3C0.1 11.5 0 11.7 0 12V15C0 15.6 0.4 16 1 16H4C4.3 16 4.5 15.9 4.7 15.7L12.5 7.9L8.1 3.5Z\" fill=\"#718096\"></path>\n <path d=\"M15.7 3.3L12.7 0.3C12.3 -0.1 11.7 -0.1 11.3 0.3L9.5 2.1L13.9 6.5L15.7 4.7C16.1 4.3 16.1 3.7 15.7 3.3Z\" fill=\"#718096\"></path>\n </svg>Edit`;\n\n singularEditButton.addEventListener(\"click\", editCallback);\n\n return singularEditButton;\n};\n\nexport const createMultipleEditButton = (\n editCallback: (e: MouseEvent) => void,\n linkCallback: (e: MouseEvent) => void\n): HTMLDivElement => {\n const multipleEditButton = document.createElement(\"div\");\n multipleEditButton.classList.add(\"cslp-tooltip-child\");\n multipleEditButton.setAttribute(\"data-title\", \"Edit\");\n multipleEditButton.setAttribute(\n \"data-test-id\",\n \"cslp-multiple-edit-button\"\n );\n multipleEditButton.innerHTML = ` <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.1 3.5L0.3 11.3C0.1 11.5 0 11.7 0 12V15C0 15.6 0.4 16 1 16H4C4.3 16 4.5 15.9 4.7 15.7L12.5 7.9L8.1 3.5Z\" fill=\"#718096\"></path>\n <path d=\"M15.7 3.3L12.7 0.3C12.3 -0.1 11.7 -0.1 11.3 0.3L9.5 2.1L13.9 6.5L15.7 4.7C16.1 4.3 16.1 3.7 15.7 3.3Z\" fill=\"#718096\"></path>\n </svg>`;\n\n multipleEditButton.addEventListener(\"click\", editCallback);\n\n const multipleExternalLinkButton = document.createElement(\"div\");\n multipleExternalLinkButton.classList.add(\"cslp-tooltip-child\");\n multipleExternalLinkButton.setAttribute(\"data-title\", \"Go to link\");\n multipleExternalLinkButton.setAttribute(\n \"data-test-id\",\n \"cslp-multiple-external-link-button\"\n );\n multipleExternalLinkButton.innerHTML = ` <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2.66654 2.66758H13.3332V13.3342H6.66654V16.0009H13.3332C14.0405 16.0009 14.7187 15.72 15.2188 15.2199C15.7189 14.7198 15.9999 14.0415 15.9999 13.3342V2.66758C15.9999 1.96034 15.7189 1.28206 15.2188 0.781964C14.7187 0.281867 14.0405 0.000915527 13.3332 0.000915527H2.66654C1.9593 0.000915527 1.28102 0.281867 0.780927 0.781964C0.280829 1.28206 -0.00012207 1.96034 -0.00012207 2.66758V9.33425H2.66654V2.66758Z\" fill=\"#718096\" />\n <path d=\"M6.94263 7.05734L0.999958 13L2.88529 14.8853L8.82796 8.94267L10.8853 11V5.00001H4.88529L6.94263 7.05734Z\" fill=\"#718096\" />\n </svg>`;\n\n multipleExternalLinkButton.addEventListener(\"click\", linkCallback);\n\n const multipleEditFragment = document.createDocumentFragment();\n multipleEditFragment.appendChild(multipleEditButton);\n multipleEditFragment.appendChild(multipleExternalLinkButton);\n\n const multipleDiv = document.createElement(\"div\");\n multipleDiv.appendChild(multipleEditFragment);\n multipleDiv.classList.add(cslpTagStyles()[\"multiple\"]);\n\n return multipleDiv;\n};\n\nexport function getEditButtonPosition(\n currentHoveredElement: HTMLElement | null,\n defaultPosition: string | undefined\n): IEditButtonPosition {\n if (!currentHoveredElement)\n return { upperBoundOfTooltip: 0, leftBoundOfTooltip: 0 };\n\n const cslpButtonPosition = currentHoveredElement.getAttribute(\n \"data-cslp-button-position\"\n );\n if (cslpButtonPosition) {\n return calculateEditButtonPosition(\n currentHoveredElement,\n cslpButtonPosition\n );\n }\n\n // NOTE: position \"top\" and \"top-left\" will be the position of edit button if no default position passed in config\n return calculateEditButtonPosition(\n currentHoveredElement,\n defaultPosition || \"top\"\n );\n}\n\nexport function shouldRenderEditButton(): boolean {\n const config = Config.get();\n\n if (!config.editButton.enable) {\n if (config.editButton.enable === undefined)\n PublicLogger.error(\n \"enable key is required inside editButton object\"\n );\n return false;\n }\n\n // return boolean in case of cslp-buttons query added in url\n try {\n const currentLocation = new URL(window.location.href);\n const cslpButtonQueryValue =\n currentLocation.searchParams.get(\"cslp-buttons\");\n\n if (\n cslpButtonQueryValue !== null &&\n config.editButton.includeByQueryParameter !== false\n )\n return cslpButtonQueryValue === \"false\" ? false : true;\n } catch (error) {\n PublicLogger.error(error);\n }\n\n const iFrameCheck = inIframe();\n\n // case outside live preview\n if (\n !iFrameCheck &&\n config.editButton.exclude?.find(\n (exclude) => exclude === \"outsideLivePreviewPortal\"\n )\n ) {\n return false;\n }\n\n // case if inside live preview\n if (\n iFrameCheck &&\n config.editButton.exclude?.find(\n (exclude) => exclude === \"insideLivePreviewPortal\"\n )\n ) {\n return false;\n } else if (iFrameCheck) {\n // case if inside visual builder\n if (config.windowType === \"builder\") {\n return false;\n }\n\n // case if independent site\n return true;\n }\n\n // Priority list => 1. cslpEditButton query value 2. Inside live preview 3. renderCslpButtonByDefault value selected by user\n return true;\n}\n\nexport function toggleEditButtonElement() {\n const render = shouldRenderEditButton();\n const exists = doesEditButtonExist();\n\n if (render && !exists) {\n LivePreviewEditButton.livePreviewEditButton =\n new LivePreviewEditButton();\n } else if (!render && exists) {\n LivePreviewEditButton.livePreviewEditButton?.destroy();\n }\n}\n\nexport function doesEditButtonExist() {\n return document.getElementById(EDIT_BUTTON_TOOLTIP_ID) !== null;\n}\n\nexport class LivePreviewEditButton {\n private tooltip: HTMLButtonElement | null = null;\n private typeOfCurrentChild: \"singular\" | \"multiple\" = \"singular\";\n private tooltipChild: {\n singular: HTMLDivElement | null;\n multiple: HTMLDivElement | null;\n } = {\n singular: null,\n multiple: null,\n };\n static livePreviewEditButton: LivePreviewEditButton | null = null;\n\n constructor() {\n this.createCslpTooltip = this.createCslpTooltip.bind(this);\n this.updateTooltipPosition = this.updateTooltipPosition.bind(this);\n this.addEditStyleOnHover = this.addEditStyleOnHover.bind(this);\n this.scrollHandler = this.scrollHandler.bind(this);\n this.generateRedirectUrl = this.generateRedirectUrl.bind(this);\n this.linkClickHandler = this.linkClickHandler.bind(this);\n this.destroy = this.destroy.bind(this);\n\n if (this.createCslpTooltip()) {\n this.updateTooltipPosition();\n\n window.addEventListener(\"scroll\", this.updateTooltipPosition);\n window.addEventListener(\"mouseover\", this.addEditStyleOnHover);\n }\n }\n\n private createCslpTooltip(): boolean {\n const editButton = Config.get().editButton;\n\n if (\n !document.getElementById(EDIT_BUTTON_TOOLTIP_ID) &&\n editButton.enable &&\n shouldRenderEditButton()\n ) {\n const tooltip = document.createElement(\"button\");\n this.tooltip = tooltip;\n\n this.tooltip.classList.add(cslpTagStyles()[\"cslp-tooltip\"]);\n this.tooltip.setAttribute(\"data-test-id\", \"cs-cslp-tooltip\");\n this.tooltip.id = EDIT_BUTTON_TOOLTIP_ID;\n\n window.document.body.insertAdjacentElement(\n \"beforeend\",\n this.tooltip\n );\n\n this.tooltipChild.singular = createSingularEditButton(\n this.scrollHandler\n );\n this.tooltipChild.multiple = createMultipleEditButton(\n this.scrollHandler,\n this.linkClickHandler\n );\n\n this.tooltip.appendChild(this.tooltipChild.singular);\n return true;\n }\n return false;\n }\n\n private updateTooltipPosition() {\n if (!document.getElementById(\"cslp-tooltip\")) {\n this.createCslpTooltip();\n }\n const editButton = Config.get().editButton;\n const elements = Config.get().elements;\n\n if (!elements.highlightedElement || !this.tooltip) return false;\n\n const currentRectOfElement =\n elements.highlightedElement.getBoundingClientRect();\n const currentRectOfParentOfElement =\n this.tooltip.parentElement?.getBoundingClientRect();\n\n if (currentRectOfElement && currentRectOfParentOfElement) {\n const editButtonPosition = getEditButtonPosition(\n elements.highlightedElement as HTMLElement,\n editButton.position\n );\n\n let upperBoundOfTooltip = editButtonPosition.upperBoundOfTooltip;\n const leftBoundOfTooltip = editButtonPosition.leftBoundOfTooltip;\n\n // if scrolled and element is still visible, make sure tooltip is also visible\n if (upperBoundOfTooltip < 0) {\n if (currentRectOfElement.top < 0)\n upperBoundOfTooltip = currentRectOfElement.top;\n else upperBoundOfTooltip = 0;\n }\n\n this.tooltip.style.top = upperBoundOfTooltip + \"px\";\n this.tooltip.style.zIndex =\n elements.highlightedElement.style.zIndex || \"200\";\n this.tooltip.style.left = leftBoundOfTooltip + \"px\";\n\n if (this.tooltipChild.singular && this.tooltipChild.multiple) {\n if (\n elements.highlightedElement.hasAttribute(\"href\") &&\n this.typeOfCurrentChild !== \"multiple\"\n ) {\n this.tooltip.innerHTML = \"\";\n this.tooltip.appendChild(this.tooltipChild.multiple);\n this.typeOfCurrentChild = \"multiple\";\n } else if (this.typeOfCurrentChild !== \"singular\") {\n this.tooltip.innerHTML = \"\";\n this.tooltip.appendChild(this.tooltipChild.singular);\n this.typeOfCurrentChild = \"singular\";\n }\n }\n return true;\n }\n\n return false;\n }\n\n private addEditStyleOnHover(e: MouseEvent) {\n const updateTooltipPosition: Parameters<typeof addCslpOutline>[\"1\"] = ({\n cslpTag,\n highlightedElement,\n }) => {\n if (this.updateTooltipPosition()) {\n this.tooltip?.setAttribute(\"current-data-cslp\", cslpTag);\n this.tooltip?.setAttribute(\n \"current-href\",\n highlightedElement.getAttribute(\"href\") ?? \"\"\n );\n }\n };\n\n const editButton = Config.get().editButton;\n const windowType = Config.get().windowType;\n\n if (\n (windowType === ILivePreviewWindowType.PREVIEW ||\n windowType === ILivePreviewWindowType.INDEPENDENT) &&\n editButton.enable\n ) {\n addCslpOutline(e, updateTooltipPosition);\n }\n }\n\n private scrollHandler() {\n if (!this.tooltip) return;\n\n const cslpTag = this.tooltip.getAttribute(\"current-data-cslp\");\n\n if (cslpTag) {\n const { content_type_uid, entry_uid, locale, variant, fieldPathWithIndex } =\n extractDetailsFromCslp(cslpTag);\n\n if (inIframe()) {\n livePreviewPostMessage?.send(\"scroll\", {\n field: fieldPathWithIndex,\n content_type_uid,\n entry_uid,\n variant,\n locale,\n });\n } else {\n try {\n // Redirect to Contentstack edit page\n const redirectUrl = this.generateRedirectUrl(\n content_type_uid,\n locale,\n entry_uid,\n variant,\n fieldPathWithIndex\n );\n\n window.open(redirectUrl, \"_blank\");\n } catch (error) {\n PublicLogger.error(error);\n }\n }\n }\n }\n\n /**\n * Generates the redirect URL for editing a specific entry in the Live Preview SDK.\n * @param content_type_uid - The UID of the content type.\n * @param locale - The locale of the entry (default: \"en-us\").\n * @param entry_uid - The UID of the entry.\n * @param preview_field - The field to be previewed.\n * @returns The redirect URL for editing the entry.\n */\n private generateRedirectUrl(\n content_type_uid: string,\n locale = \"en-us\",\n entry_uid: string,\n variant: string | undefined,\n preview_field: string\n ): string {\n const config = Config.get();\n\n if (!config.stackDetails.apiKey) {\n throw `To use edit tags, you must provide the stack API key. Specify the API key while initializing the Live Preview SDK.\n\n ContentstackLivePreview.init({\n ...,\n stackDetails: {\n apiKey: 'your-api-key'\n },\n ...\n })`;\n }\n\n if (!config.stackDetails.environment) {\n throw `To use edit tags, you must provide the preview environment. Specify the preview environment while initializing the Live Preview SDK.\n\n ContentstackLivePreview.init({\n ...,\n stackDetails: {\n environment: 'Your-environment'\n },\n ...\n })`;\n }\n\n const protocol = String(config.clientUrlParams.protocol);\n const host = String(config.clientUrlParams.host);\n const port = String(config.clientUrlParams.port);\n const environment = String(config.stackDetails.environment);\n const branch = String(config.stackDetails.branch || \"main\");\n\n let urlHash = `!/stack/${\n config.stackDetails.apiKey\n }/content-type/${content_type_uid}/${\n locale ?? \"en-us\"\n }/entry/${entry_uid}`;\n\n if (variant) {\n urlHash += `/variant/${variant}/edit`;\n } else {\n urlHash += `/edit`;\n }\n\n const url = new URL(`${protocol}://${host}`);\n url.port = port;\n url.hash = urlHash;\n if (config.stackDetails.branch) {\n url.searchParams.append(\"branch\", branch);\n }\n url.searchParams.append(\"preview-field\", preview_field);\n url.searchParams.append(\"preview-locale\", locale ?? \"en-us\");\n url.searchParams.append(\"preview-environment\", environment);\n\n return `${url.origin}/${url.hash}${url.search}`;\n }\n\n private linkClickHandler() {\n if (!this.tooltip) return;\n const hrefAttribute = this.tooltip.getAttribute(\"current-href\");\n\n if (hrefAttribute) {\n window.location.assign(hrefAttribute);\n }\n }\n\n /**\n * Destroys the edit button by removing event listeners and removing the tooltip.\n */\n destroy(): void {\n window.removeEventListener(\"scroll\", this.updateTooltipPosition);\n window.removeEventListener(\"mouseover\", this.addEditStyleOnHover);\n this.tooltip?.remove();\n }\n}\n\neffect(function handleWindowTypeChange() {\n // we need to specify when to run this effect.\n // here, we run it when the value of windowType changes\n if (typeof window === \"undefined\") return;\n Config.get().windowType;\n if (LivePreviewEditButton && !isOpeningInTimeline()) {\n toggleEditButtonElement();\n }\n});\n"],"mappings":"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","names":["import_editButton","Config","livePreviewPostMessage"]}
|
|
@@ -229,6 +229,9 @@ var LivePreviewEditButton = class {
|
|
|
229
229
|
return false;
|
|
230
230
|
}
|
|
231
231
|
updateTooltipPosition() {
|
|
232
|
+
if (!document.getElementById("cslp-tooltip")) {
|
|
233
|
+
this.createCslpTooltip();
|
|
234
|
+
}
|
|
232
235
|
const editButton = Config.get().editButton;
|
|
233
236
|
const elements = Config.get().elements;
|
|
234
237
|
if (!elements.highlightedElement || !this.tooltip) return false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/livePreview/editButton/editButton.ts"],"sourcesContent":["import { effect } from \"@preact/signals\";\nimport { inIframe } from \"../../common/inIframe\";\nimport Config from \"../../configManager/configManager\";\nimport { addCslpOutline, extractDetailsFromCslp } from \"../../cslp\";\nimport { cslpTagStyles } from \"./editButton.style\";\nimport { PublicLogger } from \"../../logger/logger\";\nimport {\n type IEditButtonPosition,\n ILivePreviewWindowType,\n} from \"../../types/types\";\nimport livePreviewPostMessage from \"../eventManager/livePreviewEventManager\";\nimport { EDIT_BUTTON_TOOLTIP_ID } from \"./editButton.constant\";\nimport { isOpeningInTimeline } from \"../../utils\";\n\nfunction calculateEditButtonPosition(\n currentHoveredElement: HTMLElement,\n cslpButtonPosition: string\n): IEditButtonPosition {\n const editButtonPosition: IEditButtonPosition = {\n upperBoundOfTooltip: 0,\n leftBoundOfTooltip: 0,\n };\n const currentRectOfElement = currentHoveredElement.getBoundingClientRect();\n try {\n const buttonMeasurementValues = {\n width: 72,\n halfWidth: 36,\n height: 40,\n basicMargin: 5,\n widthWithMargin: 77,\n };\n\n switch (cslpButtonPosition) {\n case \"top-center\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top - buttonMeasurementValues.height;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.width / 2 -\n buttonMeasurementValues.halfWidth +\n currentRectOfElement.left;\n break;\n case \"top-right\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top - buttonMeasurementValues.height;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.right - buttonMeasurementValues.width;\n break;\n case \"right\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top -\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.right +\n buttonMeasurementValues.basicMargin;\n break;\n case \"bottom\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.bottom +\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.left -\n buttonMeasurementValues.basicMargin;\n break;\n case \"bottom-left\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.bottom +\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.left -\n buttonMeasurementValues.basicMargin;\n break;\n case \"bottom-center\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.bottom +\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.width / 2 -\n buttonMeasurementValues.halfWidth +\n currentRectOfElement.left;\n break;\n case \"bottom-right\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.bottom +\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.right - buttonMeasurementValues.width;\n break;\n case \"left\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top -\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.left -\n buttonMeasurementValues.widthWithMargin;\n break;\n // default position => top, top-left or any other string\n default:\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top - buttonMeasurementValues.height;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.left -\n buttonMeasurementValues.basicMargin;\n break;\n }\n return editButtonPosition;\n } catch (error) {\n PublicLogger.error(error);\n return editButtonPosition;\n }\n}\n\nexport const createSingularEditButton = (\n editCallback: (e: MouseEvent) => void\n): HTMLDivElement => {\n const singularEditButton = document.createElement(\"div\");\n singularEditButton.classList.add(\"cslp-tooltip-child\", \"singular\");\n singularEditButton.setAttribute(\n \"data-test-id\",\n \"cslp-singular-edit-button\"\n );\n singularEditButton.innerHTML = `<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.1 3.5L0.3 11.3C0.1 11.5 0 11.7 0 12V15C0 15.6 0.4 16 1 16H4C4.3 16 4.5 15.9 4.7 15.7L12.5 7.9L8.1 3.5Z\" fill=\"#718096\"></path>\n <path d=\"M15.7 3.3L12.7 0.3C12.3 -0.1 11.7 -0.1 11.3 0.3L9.5 2.1L13.9 6.5L15.7 4.7C16.1 4.3 16.1 3.7 15.7 3.3Z\" fill=\"#718096\"></path>\n </svg>Edit`;\n\n singularEditButton.addEventListener(\"click\", editCallback);\n\n return singularEditButton;\n};\n\nexport const createMultipleEditButton = (\n editCallback: (e: MouseEvent) => void,\n linkCallback: (e: MouseEvent) => void\n): HTMLDivElement => {\n const multipleEditButton = document.createElement(\"div\");\n multipleEditButton.classList.add(\"cslp-tooltip-child\");\n multipleEditButton.setAttribute(\"data-title\", \"Edit\");\n multipleEditButton.setAttribute(\n \"data-test-id\",\n \"cslp-multiple-edit-button\"\n );\n multipleEditButton.innerHTML = ` <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.1 3.5L0.3 11.3C0.1 11.5 0 11.7 0 12V15C0 15.6 0.4 16 1 16H4C4.3 16 4.5 15.9 4.7 15.7L12.5 7.9L8.1 3.5Z\" fill=\"#718096\"></path>\n <path d=\"M15.7 3.3L12.7 0.3C12.3 -0.1 11.7 -0.1 11.3 0.3L9.5 2.1L13.9 6.5L15.7 4.7C16.1 4.3 16.1 3.7 15.7 3.3Z\" fill=\"#718096\"></path>\n </svg>`;\n\n multipleEditButton.addEventListener(\"click\", editCallback);\n\n const multipleExternalLinkButton = document.createElement(\"div\");\n multipleExternalLinkButton.classList.add(\"cslp-tooltip-child\");\n multipleExternalLinkButton.setAttribute(\"data-title\", \"Go to link\");\n multipleExternalLinkButton.setAttribute(\n \"data-test-id\",\n \"cslp-multiple-external-link-button\"\n );\n multipleExternalLinkButton.innerHTML = ` <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2.66654 2.66758H13.3332V13.3342H6.66654V16.0009H13.3332C14.0405 16.0009 14.7187 15.72 15.2188 15.2199C15.7189 14.7198 15.9999 14.0415 15.9999 13.3342V2.66758C15.9999 1.96034 15.7189 1.28206 15.2188 0.781964C14.7187 0.281867 14.0405 0.000915527 13.3332 0.000915527H2.66654C1.9593 0.000915527 1.28102 0.281867 0.780927 0.781964C0.280829 1.28206 -0.00012207 1.96034 -0.00012207 2.66758V9.33425H2.66654V2.66758Z\" fill=\"#718096\" />\n <path d=\"M6.94263 7.05734L0.999958 13L2.88529 14.8853L8.82796 8.94267L10.8853 11V5.00001H4.88529L6.94263 7.05734Z\" fill=\"#718096\" />\n </svg>`;\n\n multipleExternalLinkButton.addEventListener(\"click\", linkCallback);\n\n const multipleEditFragment = document.createDocumentFragment();\n multipleEditFragment.appendChild(multipleEditButton);\n multipleEditFragment.appendChild(multipleExternalLinkButton);\n\n const multipleDiv = document.createElement(\"div\");\n multipleDiv.appendChild(multipleEditFragment);\n multipleDiv.classList.add(cslpTagStyles()[\"multiple\"]);\n\n return multipleDiv;\n};\n\nexport function getEditButtonPosition(\n currentHoveredElement: HTMLElement | null,\n defaultPosition: string | undefined\n): IEditButtonPosition {\n if (!currentHoveredElement)\n return { upperBoundOfTooltip: 0, leftBoundOfTooltip: 0 };\n\n const cslpButtonPosition = currentHoveredElement.getAttribute(\n \"data-cslp-button-position\"\n );\n if (cslpButtonPosition) {\n return calculateEditButtonPosition(\n currentHoveredElement,\n cslpButtonPosition\n );\n }\n\n // NOTE: position \"top\" and \"top-left\" will be the position of edit button if no default position passed in config\n return calculateEditButtonPosition(\n currentHoveredElement,\n defaultPosition || \"top\"\n );\n}\n\nexport function shouldRenderEditButton(): boolean {\n const config = Config.get();\n\n if (!config.editButton.enable) {\n if (config.editButton.enable === undefined)\n PublicLogger.error(\n \"enable key is required inside editButton object\"\n );\n return false;\n }\n\n // return boolean in case of cslp-buttons query added in url\n try {\n const currentLocation = new URL(window.location.href);\n const cslpButtonQueryValue =\n currentLocation.searchParams.get(\"cslp-buttons\");\n\n if (\n cslpButtonQueryValue !== null &&\n config.editButton.includeByQueryParameter !== false\n )\n return cslpButtonQueryValue === \"false\" ? false : true;\n } catch (error) {\n PublicLogger.error(error);\n }\n\n const iFrameCheck = inIframe();\n\n // case outside live preview\n if (\n !iFrameCheck &&\n config.editButton.exclude?.find(\n (exclude) => exclude === \"outsideLivePreviewPortal\"\n )\n ) {\n return false;\n }\n\n // case if inside live preview\n if (\n iFrameCheck &&\n config.editButton.exclude?.find(\n (exclude) => exclude === \"insideLivePreviewPortal\"\n )\n ) {\n return false;\n } else if (iFrameCheck) {\n // case if inside visual builder\n if (config.windowType === \"builder\") {\n return false;\n }\n\n // case if independent site\n return true;\n }\n\n // Priority list => 1. cslpEditButton query value 2. Inside live preview 3. renderCslpButtonByDefault value selected by user\n return true;\n}\n\nexport function toggleEditButtonElement() {\n const render = shouldRenderEditButton();\n const exists = doesEditButtonExist();\n\n if (render && !exists) {\n LivePreviewEditButton.livePreviewEditButton =\n new LivePreviewEditButton();\n } else if (!render && exists) {\n LivePreviewEditButton.livePreviewEditButton?.destroy();\n }\n}\n\nexport function doesEditButtonExist() {\n return document.getElementById(EDIT_BUTTON_TOOLTIP_ID) !== null;\n}\n\nexport class LivePreviewEditButton {\n private tooltip: HTMLButtonElement | null = null;\n private typeOfCurrentChild: \"singular\" | \"multiple\" = \"singular\";\n private tooltipChild: {\n singular: HTMLDivElement | null;\n multiple: HTMLDivElement | null;\n } = {\n singular: null,\n multiple: null,\n };\n static livePreviewEditButton: LivePreviewEditButton | null = null;\n\n constructor() {\n this.createCslpTooltip = this.createCslpTooltip.bind(this);\n this.updateTooltipPosition = this.updateTooltipPosition.bind(this);\n this.addEditStyleOnHover = this.addEditStyleOnHover.bind(this);\n this.scrollHandler = this.scrollHandler.bind(this);\n this.generateRedirectUrl = this.generateRedirectUrl.bind(this);\n this.linkClickHandler = this.linkClickHandler.bind(this);\n this.destroy = this.destroy.bind(this);\n\n if (this.createCslpTooltip()) {\n this.updateTooltipPosition();\n\n window.addEventListener(\"scroll\", this.updateTooltipPosition);\n window.addEventListener(\"mouseover\", this.addEditStyleOnHover);\n }\n }\n\n private createCslpTooltip(): boolean {\n const editButton = Config.get().editButton;\n\n if (\n !document.getElementById(EDIT_BUTTON_TOOLTIP_ID) &&\n editButton.enable &&\n shouldRenderEditButton()\n ) {\n const tooltip = document.createElement(\"button\");\n this.tooltip = tooltip;\n\n this.tooltip.classList.add(cslpTagStyles()[\"cslp-tooltip\"]);\n this.tooltip.setAttribute(\"data-test-id\", \"cs-cslp-tooltip\");\n this.tooltip.id = EDIT_BUTTON_TOOLTIP_ID;\n\n window.document.body.insertAdjacentElement(\n \"beforeend\",\n this.tooltip\n );\n\n this.tooltipChild.singular = createSingularEditButton(\n this.scrollHandler\n );\n this.tooltipChild.multiple = createMultipleEditButton(\n this.scrollHandler,\n this.linkClickHandler\n );\n\n this.tooltip.appendChild(this.tooltipChild.singular);\n return true;\n }\n return false;\n }\n\n private updateTooltipPosition() {\n const editButton = Config.get().editButton;\n const elements = Config.get().elements;\n\n if (!elements.highlightedElement || !this.tooltip) return false;\n\n const currentRectOfElement =\n elements.highlightedElement.getBoundingClientRect();\n const currentRectOfParentOfElement =\n this.tooltip.parentElement?.getBoundingClientRect();\n\n if (currentRectOfElement && currentRectOfParentOfElement) {\n const editButtonPosition = getEditButtonPosition(\n elements.highlightedElement as HTMLElement,\n editButton.position\n );\n\n let upperBoundOfTooltip = editButtonPosition.upperBoundOfTooltip;\n const leftBoundOfTooltip = editButtonPosition.leftBoundOfTooltip;\n\n // if scrolled and element is still visible, make sure tooltip is also visible\n if (upperBoundOfTooltip < 0) {\n if (currentRectOfElement.top < 0)\n upperBoundOfTooltip = currentRectOfElement.top;\n else upperBoundOfTooltip = 0;\n }\n\n this.tooltip.style.top = upperBoundOfTooltip + \"px\";\n this.tooltip.style.zIndex =\n elements.highlightedElement.style.zIndex || \"200\";\n this.tooltip.style.left = leftBoundOfTooltip + \"px\";\n\n if (this.tooltipChild.singular && this.tooltipChild.multiple) {\n if (\n elements.highlightedElement.hasAttribute(\"href\") &&\n this.typeOfCurrentChild !== \"multiple\"\n ) {\n this.tooltip.innerHTML = \"\";\n this.tooltip.appendChild(this.tooltipChild.multiple);\n this.typeOfCurrentChild = \"multiple\";\n } else if (this.typeOfCurrentChild !== \"singular\") {\n this.tooltip.innerHTML = \"\";\n this.tooltip.appendChild(this.tooltipChild.singular);\n this.typeOfCurrentChild = \"singular\";\n }\n }\n return true;\n }\n\n return false;\n }\n\n private addEditStyleOnHover(e: MouseEvent) {\n const updateTooltipPosition: Parameters<typeof addCslpOutline>[\"1\"] = ({\n cslpTag,\n highlightedElement,\n }) => {\n if (this.updateTooltipPosition()) {\n this.tooltip?.setAttribute(\"current-data-cslp\", cslpTag);\n this.tooltip?.setAttribute(\n \"current-href\",\n highlightedElement.getAttribute(\"href\") ?? \"\"\n );\n }\n };\n\n const editButton = Config.get().editButton;\n const windowType = Config.get().windowType;\n\n if (\n (windowType === ILivePreviewWindowType.PREVIEW ||\n windowType === ILivePreviewWindowType.INDEPENDENT) &&\n editButton.enable\n ) {\n addCslpOutline(e, updateTooltipPosition);\n }\n }\n\n private scrollHandler() {\n if (!this.tooltip) return;\n\n const cslpTag = this.tooltip.getAttribute(\"current-data-cslp\");\n\n if (cslpTag) {\n const { content_type_uid, entry_uid, locale, variant, fieldPathWithIndex } =\n extractDetailsFromCslp(cslpTag);\n\n if (inIframe()) {\n livePreviewPostMessage?.send(\"scroll\", {\n field: fieldPathWithIndex,\n content_type_uid,\n entry_uid,\n variant,\n locale,\n });\n } else {\n try {\n // Redirect to Contentstack edit page\n const redirectUrl = this.generateRedirectUrl(\n content_type_uid,\n locale,\n entry_uid,\n variant,\n fieldPathWithIndex\n );\n\n window.open(redirectUrl, \"_blank\");\n } catch (error) {\n PublicLogger.error(error);\n }\n }\n }\n }\n\n /**\n * Generates the redirect URL for editing a specific entry in the Live Preview SDK.\n * @param content_type_uid - The UID of the content type.\n * @param locale - The locale of the entry (default: \"en-us\").\n * @param entry_uid - The UID of the entry.\n * @param preview_field - The field to be previewed.\n * @returns The redirect URL for editing the entry.\n */\n private generateRedirectUrl(\n content_type_uid: string,\n locale = \"en-us\",\n entry_uid: string,\n variant: string | undefined,\n preview_field: string\n ): string {\n const config = Config.get();\n\n if (!config.stackDetails.apiKey) {\n throw `To use edit tags, you must provide the stack API key. Specify the API key while initializing the Live Preview SDK.\n\n ContentstackLivePreview.init({\n ...,\n stackDetails: {\n apiKey: 'your-api-key'\n },\n ...\n })`;\n }\n\n if (!config.stackDetails.environment) {\n throw `To use edit tags, you must provide the preview environment. Specify the preview environment while initializing the Live Preview SDK.\n\n ContentstackLivePreview.init({\n ...,\n stackDetails: {\n environment: 'Your-environment'\n },\n ...\n })`;\n }\n\n const protocol = String(config.clientUrlParams.protocol);\n const host = String(config.clientUrlParams.host);\n const port = String(config.clientUrlParams.port);\n const environment = String(config.stackDetails.environment);\n const branch = String(config.stackDetails.branch || \"main\");\n\n let urlHash = `!/stack/${\n config.stackDetails.apiKey\n }/content-type/${content_type_uid}/${\n locale ?? \"en-us\"\n }/entry/${entry_uid}`;\n\n if (variant) {\n urlHash += `/variant/${variant}/edit`;\n } else {\n urlHash += `/edit`;\n }\n\n const url = new URL(`${protocol}://${host}`);\n url.port = port;\n url.hash = urlHash;\n if (config.stackDetails.branch) {\n url.searchParams.append(\"branch\", branch);\n }\n url.searchParams.append(\"preview-field\", preview_field);\n url.searchParams.append(\"preview-locale\", locale ?? \"en-us\");\n url.searchParams.append(\"preview-environment\", environment);\n\n return `${url.origin}/${url.hash}${url.search}`;\n }\n\n private linkClickHandler() {\n if (!this.tooltip) return;\n const hrefAttribute = this.tooltip.getAttribute(\"current-href\");\n\n if (hrefAttribute) {\n window.location.assign(hrefAttribute);\n }\n }\n\n /**\n * Destroys the edit button by removing event listeners and removing the tooltip.\n */\n destroy(): void {\n window.removeEventListener(\"scroll\", this.updateTooltipPosition);\n window.removeEventListener(\"mouseover\", this.addEditStyleOnHover);\n this.tooltip?.remove();\n }\n}\n\neffect(function handleWindowTypeChange() {\n // we need to specify when to run this effect.\n // here, we run it when the value of windowType changes\n if (typeof window === \"undefined\") return;\n Config.get().windowType;\n if (LivePreviewEditButton && !isOpeningInTimeline()) {\n toggleEditButtonElement();\n }\n});\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/livePreview/editButton/editButton.ts"],"sourcesContent":["import { effect } from \"@preact/signals\";\nimport { inIframe } from \"../../common/inIframe\";\nimport Config from \"../../configManager/configManager\";\nimport { addCslpOutline, extractDetailsFromCslp } from \"../../cslp\";\nimport { cslpTagStyles } from \"./editButton.style\";\nimport { PublicLogger } from \"../../logger/logger\";\nimport {\n type IEditButtonPosition,\n ILivePreviewWindowType,\n} from \"../../types/types\";\nimport livePreviewPostMessage from \"../eventManager/livePreviewEventManager\";\nimport { EDIT_BUTTON_TOOLTIP_ID } from \"./editButton.constant\";\nimport { isOpeningInTimeline } from \"../../utils\";\n\nfunction calculateEditButtonPosition(\n currentHoveredElement: HTMLElement,\n cslpButtonPosition: string\n): IEditButtonPosition {\n const editButtonPosition: IEditButtonPosition = {\n upperBoundOfTooltip: 0,\n leftBoundOfTooltip: 0,\n };\n const currentRectOfElement = currentHoveredElement.getBoundingClientRect();\n try {\n const buttonMeasurementValues = {\n width: 72,\n halfWidth: 36,\n height: 40,\n basicMargin: 5,\n widthWithMargin: 77,\n };\n\n switch (cslpButtonPosition) {\n case \"top-center\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top - buttonMeasurementValues.height;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.width / 2 -\n buttonMeasurementValues.halfWidth +\n currentRectOfElement.left;\n break;\n case \"top-right\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top - buttonMeasurementValues.height;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.right - buttonMeasurementValues.width;\n break;\n case \"right\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top -\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.right +\n buttonMeasurementValues.basicMargin;\n break;\n case \"bottom\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.bottom +\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.left -\n buttonMeasurementValues.basicMargin;\n break;\n case \"bottom-left\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.bottom +\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.left -\n buttonMeasurementValues.basicMargin;\n break;\n case \"bottom-center\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.bottom +\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.width / 2 -\n buttonMeasurementValues.halfWidth +\n currentRectOfElement.left;\n break;\n case \"bottom-right\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.bottom +\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.right - buttonMeasurementValues.width;\n break;\n case \"left\":\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top -\n buttonMeasurementValues.basicMargin;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.left -\n buttonMeasurementValues.widthWithMargin;\n break;\n // default position => top, top-left or any other string\n default:\n editButtonPosition.upperBoundOfTooltip =\n currentRectOfElement.top - buttonMeasurementValues.height;\n editButtonPosition.leftBoundOfTooltip =\n currentRectOfElement.left -\n buttonMeasurementValues.basicMargin;\n break;\n }\n return editButtonPosition;\n } catch (error) {\n PublicLogger.error(error);\n return editButtonPosition;\n }\n}\n\nexport const createSingularEditButton = (\n editCallback: (e: MouseEvent) => void\n): HTMLDivElement => {\n const singularEditButton = document.createElement(\"div\");\n singularEditButton.classList.add(\"cslp-tooltip-child\", \"singular\");\n singularEditButton.setAttribute(\n \"data-test-id\",\n \"cslp-singular-edit-button\"\n );\n singularEditButton.innerHTML = `<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.1 3.5L0.3 11.3C0.1 11.5 0 11.7 0 12V15C0 15.6 0.4 16 1 16H4C4.3 16 4.5 15.9 4.7 15.7L12.5 7.9L8.1 3.5Z\" fill=\"#718096\"></path>\n <path d=\"M15.7 3.3L12.7 0.3C12.3 -0.1 11.7 -0.1 11.3 0.3L9.5 2.1L13.9 6.5L15.7 4.7C16.1 4.3 16.1 3.7 15.7 3.3Z\" fill=\"#718096\"></path>\n </svg>Edit`;\n\n singularEditButton.addEventListener(\"click\", editCallback);\n\n return singularEditButton;\n};\n\nexport const createMultipleEditButton = (\n editCallback: (e: MouseEvent) => void,\n linkCallback: (e: MouseEvent) => void\n): HTMLDivElement => {\n const multipleEditButton = document.createElement(\"div\");\n multipleEditButton.classList.add(\"cslp-tooltip-child\");\n multipleEditButton.setAttribute(\"data-title\", \"Edit\");\n multipleEditButton.setAttribute(\n \"data-test-id\",\n \"cslp-multiple-edit-button\"\n );\n multipleEditButton.innerHTML = ` <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.1 3.5L0.3 11.3C0.1 11.5 0 11.7 0 12V15C0 15.6 0.4 16 1 16H4C4.3 16 4.5 15.9 4.7 15.7L12.5 7.9L8.1 3.5Z\" fill=\"#718096\"></path>\n <path d=\"M15.7 3.3L12.7 0.3C12.3 -0.1 11.7 -0.1 11.3 0.3L9.5 2.1L13.9 6.5L15.7 4.7C16.1 4.3 16.1 3.7 15.7 3.3Z\" fill=\"#718096\"></path>\n </svg>`;\n\n multipleEditButton.addEventListener(\"click\", editCallback);\n\n const multipleExternalLinkButton = document.createElement(\"div\");\n multipleExternalLinkButton.classList.add(\"cslp-tooltip-child\");\n multipleExternalLinkButton.setAttribute(\"data-title\", \"Go to link\");\n multipleExternalLinkButton.setAttribute(\n \"data-test-id\",\n \"cslp-multiple-external-link-button\"\n );\n multipleExternalLinkButton.innerHTML = ` <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2.66654 2.66758H13.3332V13.3342H6.66654V16.0009H13.3332C14.0405 16.0009 14.7187 15.72 15.2188 15.2199C15.7189 14.7198 15.9999 14.0415 15.9999 13.3342V2.66758C15.9999 1.96034 15.7189 1.28206 15.2188 0.781964C14.7187 0.281867 14.0405 0.000915527 13.3332 0.000915527H2.66654C1.9593 0.000915527 1.28102 0.281867 0.780927 0.781964C0.280829 1.28206 -0.00012207 1.96034 -0.00012207 2.66758V9.33425H2.66654V2.66758Z\" fill=\"#718096\" />\n <path d=\"M6.94263 7.05734L0.999958 13L2.88529 14.8853L8.82796 8.94267L10.8853 11V5.00001H4.88529L6.94263 7.05734Z\" fill=\"#718096\" />\n </svg>`;\n\n multipleExternalLinkButton.addEventListener(\"click\", linkCallback);\n\n const multipleEditFragment = document.createDocumentFragment();\n multipleEditFragment.appendChild(multipleEditButton);\n multipleEditFragment.appendChild(multipleExternalLinkButton);\n\n const multipleDiv = document.createElement(\"div\");\n multipleDiv.appendChild(multipleEditFragment);\n multipleDiv.classList.add(cslpTagStyles()[\"multiple\"]);\n\n return multipleDiv;\n};\n\nexport function getEditButtonPosition(\n currentHoveredElement: HTMLElement | null,\n defaultPosition: string | undefined\n): IEditButtonPosition {\n if (!currentHoveredElement)\n return { upperBoundOfTooltip: 0, leftBoundOfTooltip: 0 };\n\n const cslpButtonPosition = currentHoveredElement.getAttribute(\n \"data-cslp-button-position\"\n );\n if (cslpButtonPosition) {\n return calculateEditButtonPosition(\n currentHoveredElement,\n cslpButtonPosition\n );\n }\n\n // NOTE: position \"top\" and \"top-left\" will be the position of edit button if no default position passed in config\n return calculateEditButtonPosition(\n currentHoveredElement,\n defaultPosition || \"top\"\n );\n}\n\nexport function shouldRenderEditButton(): boolean {\n const config = Config.get();\n\n if (!config.editButton.enable) {\n if (config.editButton.enable === undefined)\n PublicLogger.error(\n \"enable key is required inside editButton object\"\n );\n return false;\n }\n\n // return boolean in case of cslp-buttons query added in url\n try {\n const currentLocation = new URL(window.location.href);\n const cslpButtonQueryValue =\n currentLocation.searchParams.get(\"cslp-buttons\");\n\n if (\n cslpButtonQueryValue !== null &&\n config.editButton.includeByQueryParameter !== false\n )\n return cslpButtonQueryValue === \"false\" ? false : true;\n } catch (error) {\n PublicLogger.error(error);\n }\n\n const iFrameCheck = inIframe();\n\n // case outside live preview\n if (\n !iFrameCheck &&\n config.editButton.exclude?.find(\n (exclude) => exclude === \"outsideLivePreviewPortal\"\n )\n ) {\n return false;\n }\n\n // case if inside live preview\n if (\n iFrameCheck &&\n config.editButton.exclude?.find(\n (exclude) => exclude === \"insideLivePreviewPortal\"\n )\n ) {\n return false;\n } else if (iFrameCheck) {\n // case if inside visual builder\n if (config.windowType === \"builder\") {\n return false;\n }\n\n // case if independent site\n return true;\n }\n\n // Priority list => 1. cslpEditButton query value 2. Inside live preview 3. renderCslpButtonByDefault value selected by user\n return true;\n}\n\nexport function toggleEditButtonElement() {\n const render = shouldRenderEditButton();\n const exists = doesEditButtonExist();\n\n if (render && !exists) {\n LivePreviewEditButton.livePreviewEditButton =\n new LivePreviewEditButton();\n } else if (!render && exists) {\n LivePreviewEditButton.livePreviewEditButton?.destroy();\n }\n}\n\nexport function doesEditButtonExist() {\n return document.getElementById(EDIT_BUTTON_TOOLTIP_ID) !== null;\n}\n\nexport class LivePreviewEditButton {\n private tooltip: HTMLButtonElement | null = null;\n private typeOfCurrentChild: \"singular\" | \"multiple\" = \"singular\";\n private tooltipChild: {\n singular: HTMLDivElement | null;\n multiple: HTMLDivElement | null;\n } = {\n singular: null,\n multiple: null,\n };\n static livePreviewEditButton: LivePreviewEditButton | null = null;\n\n constructor() {\n this.createCslpTooltip = this.createCslpTooltip.bind(this);\n this.updateTooltipPosition = this.updateTooltipPosition.bind(this);\n this.addEditStyleOnHover = this.addEditStyleOnHover.bind(this);\n this.scrollHandler = this.scrollHandler.bind(this);\n this.generateRedirectUrl = this.generateRedirectUrl.bind(this);\n this.linkClickHandler = this.linkClickHandler.bind(this);\n this.destroy = this.destroy.bind(this);\n\n if (this.createCslpTooltip()) {\n this.updateTooltipPosition();\n\n window.addEventListener(\"scroll\", this.updateTooltipPosition);\n window.addEventListener(\"mouseover\", this.addEditStyleOnHover);\n }\n }\n\n private createCslpTooltip(): boolean {\n const editButton = Config.get().editButton;\n\n if (\n !document.getElementById(EDIT_BUTTON_TOOLTIP_ID) &&\n editButton.enable &&\n shouldRenderEditButton()\n ) {\n const tooltip = document.createElement(\"button\");\n this.tooltip = tooltip;\n\n this.tooltip.classList.add(cslpTagStyles()[\"cslp-tooltip\"]);\n this.tooltip.setAttribute(\"data-test-id\", \"cs-cslp-tooltip\");\n this.tooltip.id = EDIT_BUTTON_TOOLTIP_ID;\n\n window.document.body.insertAdjacentElement(\n \"beforeend\",\n this.tooltip\n );\n\n this.tooltipChild.singular = createSingularEditButton(\n this.scrollHandler\n );\n this.tooltipChild.multiple = createMultipleEditButton(\n this.scrollHandler,\n this.linkClickHandler\n );\n\n this.tooltip.appendChild(this.tooltipChild.singular);\n return true;\n }\n return false;\n }\n\n private updateTooltipPosition() {\n if (!document.getElementById(\"cslp-tooltip\")) {\n this.createCslpTooltip();\n }\n const editButton = Config.get().editButton;\n const elements = Config.get().elements;\n\n if (!elements.highlightedElement || !this.tooltip) return false;\n\n const currentRectOfElement =\n elements.highlightedElement.getBoundingClientRect();\n const currentRectOfParentOfElement =\n this.tooltip.parentElement?.getBoundingClientRect();\n\n if (currentRectOfElement && currentRectOfParentOfElement) {\n const editButtonPosition = getEditButtonPosition(\n elements.highlightedElement as HTMLElement,\n editButton.position\n );\n\n let upperBoundOfTooltip = editButtonPosition.upperBoundOfTooltip;\n const leftBoundOfTooltip = editButtonPosition.leftBoundOfTooltip;\n\n // if scrolled and element is still visible, make sure tooltip is also visible\n if (upperBoundOfTooltip < 0) {\n if (currentRectOfElement.top < 0)\n upperBoundOfTooltip = currentRectOfElement.top;\n else upperBoundOfTooltip = 0;\n }\n\n this.tooltip.style.top = upperBoundOfTooltip + \"px\";\n this.tooltip.style.zIndex =\n elements.highlightedElement.style.zIndex || \"200\";\n this.tooltip.style.left = leftBoundOfTooltip + \"px\";\n\n if (this.tooltipChild.singular && this.tooltipChild.multiple) {\n if (\n elements.highlightedElement.hasAttribute(\"href\") &&\n this.typeOfCurrentChild !== \"multiple\"\n ) {\n this.tooltip.innerHTML = \"\";\n this.tooltip.appendChild(this.tooltipChild.multiple);\n this.typeOfCurrentChild = \"multiple\";\n } else if (this.typeOfCurrentChild !== \"singular\") {\n this.tooltip.innerHTML = \"\";\n this.tooltip.appendChild(this.tooltipChild.singular);\n this.typeOfCurrentChild = \"singular\";\n }\n }\n return true;\n }\n\n return false;\n }\n\n private addEditStyleOnHover(e: MouseEvent) {\n const updateTooltipPosition: Parameters<typeof addCslpOutline>[\"1\"] = ({\n cslpTag,\n highlightedElement,\n }) => {\n if (this.updateTooltipPosition()) {\n this.tooltip?.setAttribute(\"current-data-cslp\", cslpTag);\n this.tooltip?.setAttribute(\n \"current-href\",\n highlightedElement.getAttribute(\"href\") ?? \"\"\n );\n }\n };\n\n const editButton = Config.get().editButton;\n const windowType = Config.get().windowType;\n\n if (\n (windowType === ILivePreviewWindowType.PREVIEW ||\n windowType === ILivePreviewWindowType.INDEPENDENT) &&\n editButton.enable\n ) {\n addCslpOutline(e, updateTooltipPosition);\n }\n }\n\n private scrollHandler() {\n if (!this.tooltip) return;\n\n const cslpTag = this.tooltip.getAttribute(\"current-data-cslp\");\n\n if (cslpTag) {\n const { content_type_uid, entry_uid, locale, variant, fieldPathWithIndex } =\n extractDetailsFromCslp(cslpTag);\n\n if (inIframe()) {\n livePreviewPostMessage?.send(\"scroll\", {\n field: fieldPathWithIndex,\n content_type_uid,\n entry_uid,\n variant,\n locale,\n });\n } else {\n try {\n // Redirect to Contentstack edit page\n const redirectUrl = this.generateRedirectUrl(\n content_type_uid,\n locale,\n entry_uid,\n variant,\n fieldPathWithIndex\n );\n\n window.open(redirectUrl, \"_blank\");\n } catch (error) {\n PublicLogger.error(error);\n }\n }\n }\n }\n\n /**\n * Generates the redirect URL for editing a specific entry in the Live Preview SDK.\n * @param content_type_uid - The UID of the content type.\n * @param locale - The locale of the entry (default: \"en-us\").\n * @param entry_uid - The UID of the entry.\n * @param preview_field - The field to be previewed.\n * @returns The redirect URL for editing the entry.\n */\n private generateRedirectUrl(\n content_type_uid: string,\n locale = \"en-us\",\n entry_uid: string,\n variant: string | undefined,\n preview_field: string\n ): string {\n const config = Config.get();\n\n if (!config.stackDetails.apiKey) {\n throw `To use edit tags, you must provide the stack API key. Specify the API key while initializing the Live Preview SDK.\n\n ContentstackLivePreview.init({\n ...,\n stackDetails: {\n apiKey: 'your-api-key'\n },\n ...\n })`;\n }\n\n if (!config.stackDetails.environment) {\n throw `To use edit tags, you must provide the preview environment. Specify the preview environment while initializing the Live Preview SDK.\n\n ContentstackLivePreview.init({\n ...,\n stackDetails: {\n environment: 'Your-environment'\n },\n ...\n })`;\n }\n\n const protocol = String(config.clientUrlParams.protocol);\n const host = String(config.clientUrlParams.host);\n const port = String(config.clientUrlParams.port);\n const environment = String(config.stackDetails.environment);\n const branch = String(config.stackDetails.branch || \"main\");\n\n let urlHash = `!/stack/${\n config.stackDetails.apiKey\n }/content-type/${content_type_uid}/${\n locale ?? \"en-us\"\n }/entry/${entry_uid}`;\n\n if (variant) {\n urlHash += `/variant/${variant}/edit`;\n } else {\n urlHash += `/edit`;\n }\n\n const url = new URL(`${protocol}://${host}`);\n url.port = port;\n url.hash = urlHash;\n if (config.stackDetails.branch) {\n url.searchParams.append(\"branch\", branch);\n }\n url.searchParams.append(\"preview-field\", preview_field);\n url.searchParams.append(\"preview-locale\", locale ?? \"en-us\");\n url.searchParams.append(\"preview-environment\", environment);\n\n return `${url.origin}/${url.hash}${url.search}`;\n }\n\n private linkClickHandler() {\n if (!this.tooltip) return;\n const hrefAttribute = this.tooltip.getAttribute(\"current-href\");\n\n if (hrefAttribute) {\n window.location.assign(hrefAttribute);\n }\n }\n\n /**\n * Destroys the edit button by removing event listeners and removing the tooltip.\n */\n destroy(): void {\n window.removeEventListener(\"scroll\", this.updateTooltipPosition);\n window.removeEventListener(\"mouseover\", this.addEditStyleOnHover);\n this.tooltip?.remove();\n }\n}\n\neffect(function handleWindowTypeChange() {\n // we need to specify when to run this effect.\n // here, we run it when the value of windowType changes\n if (typeof window === \"undefined\") return;\n Config.get().windowType;\n if (LivePreviewEditButton && !isOpeningInTimeline()) {\n toggleEditButtonElement();\n }\n});\n"],"mappings":"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","names":[]}
|
|
@@ -86,7 +86,7 @@ function sendInitializeLivePreviewPostMessageEvent() {
|
|
|
86
86
|
config: {
|
|
87
87
|
shouldReload: import_configManager.default.get().ssr,
|
|
88
88
|
href: window.location.href,
|
|
89
|
-
sdkVersion: "3.0
|
|
89
|
+
sdkVersion: "3.1.0",
|
|
90
90
|
mode: import_configManager.default.get().mode
|
|
91
91
|
}
|
|
92
92
|
}
|