components
1 year ago
data
1 year ago
editor.scss
3 years ago
export.js
1 year ago
import.js
1 year ago
index.js
5 years ago
template-library.js
2 years ago
export.js
176 lines
| 1 | /* eslint-disable camelcase */ |
| 2 | /* global elementor */ |
| 3 | import classnames from 'classnames'; |
| 4 | import { Button, Modal, TextControl } from '@wordpress/components'; |
| 5 | import { render, unmountComponentAtNode, useState } from '@wordpress/element'; |
| 6 | |
| 7 | import { |
| 8 | getTemplate, |
| 9 | exportTemplate, |
| 10 | updateTemplate, |
| 11 | } from './data/templates-cloud/index.js'; |
| 12 | import { setPostModel } from './data/utils'; |
| 13 | |
| 14 | elementor.on( 'document:loaded', () => { |
| 15 | ( async () => { |
| 16 | if ( |
| 17 | ! [ 'wp-post', 'wp-page' ].includes( |
| 18 | elementor.config.document.type |
| 19 | ) |
| 20 | ) { |
| 21 | return null; |
| 22 | } |
| 23 | |
| 24 | const id = elementor.config.document.id; |
| 25 | await setPostModel( id ); |
| 26 | |
| 27 | const publishButton = document.querySelector( |
| 28 | 'button#elementor-panel-saver-button-publish' |
| 29 | ); |
| 30 | |
| 31 | publishButton.addEventListener( 'click', async () => { |
| 32 | await window.tiTpc.postModel.fetch(); |
| 33 | |
| 34 | const { _ti_tpc_template_sync, _ti_tpc_template_id } = |
| 35 | window.tiTpc.postModel.getMetas(); |
| 36 | |
| 37 | const doesExist = await getTemplate( _ti_tpc_template_id ); |
| 38 | |
| 39 | if ( |
| 40 | ! publishButton.className.includes( |
| 41 | 'elementor-disabled' |
| 42 | ) && |
| 43 | _ti_tpc_template_sync && |
| 44 | _ti_tpc_template_id && |
| 45 | doesExist |
| 46 | ) { |
| 47 | const content = elementor.elements.toJSON( { |
| 48 | remove: [ |
| 49 | 'default', |
| 50 | 'editSettings', |
| 51 | 'defaultEditSettings', |
| 52 | ], |
| 53 | } ); |
| 54 | |
| 55 | const meta = window.tiTpc.params.meta; |
| 56 | |
| 57 | const currentTemplate = elementor.documents |
| 58 | .getCurrent() |
| 59 | .container.settings.get( 'template' ); |
| 60 | |
| 61 | if ( currentTemplate ) { |
| 62 | meta._wp_page_template = currentTemplate; |
| 63 | } |
| 64 | |
| 65 | await updateTemplate( { |
| 66 | template_id: _ti_tpc_template_id, |
| 67 | template_name: |
| 68 | elementor.config.initial_document.settings.settings |
| 69 | .post_title || '', |
| 70 | content, |
| 71 | meta: JSON.stringify( meta ), |
| 72 | } ); |
| 73 | } |
| 74 | } ); |
| 75 | } )(); |
| 76 | } ); |
| 77 | |
| 78 | document.addEventListener( 'DOMContentLoaded', () => { |
| 79 | const addExportMenuItem = ( groups, element ) => { |
| 80 | const actions = { |
| 81 | name: 'ti_tpc_export', |
| 82 | title: window.tiTpc.exporter.exportLabel, |
| 83 | callback: () => onClickModal( element ), |
| 84 | }; |
| 85 | |
| 86 | const isSaveExist = groups.find( ( i ) => 'save' === i.name ); |
| 87 | |
| 88 | if ( isSaveExist ) { |
| 89 | isSaveExist.actions.push( actions ); |
| 90 | } else { |
| 91 | const Export = { |
| 92 | name: 'ti_tpc_export', |
| 93 | actions: [ actions ], |
| 94 | }; |
| 95 | |
| 96 | groups.splice( 3, 0, Export ); |
| 97 | groups.join(); |
| 98 | } |
| 99 | |
| 100 | return groups; |
| 101 | }; |
| 102 | |
| 103 | const ExportModal = ( { content } ) => { |
| 104 | const [ title, setTitle ] = useState( '' ); |
| 105 | const [ isLoading, setLoading ] = useState( false ); |
| 106 | |
| 107 | const onClose = () => { |
| 108 | unmountComponentAtNode( |
| 109 | document.getElementById( 'ti-tpc-modal' ) |
| 110 | ); |
| 111 | }; |
| 112 | |
| 113 | const onSave = async () => { |
| 114 | setLoading( true ); |
| 115 | await exportTemplate( { |
| 116 | title, |
| 117 | type: 'section', |
| 118 | content: [ content ], |
| 119 | } ); |
| 120 | setLoading( false ); |
| 121 | onClose(); |
| 122 | }; |
| 123 | |
| 124 | return ( |
| 125 | <Modal |
| 126 | title={ window.tiTpc.exporter.modalLabel } |
| 127 | onRequestClose={ onClose } |
| 128 | overlayClassName={ classnames( { |
| 129 | 'is-dark': |
| 130 | 'dark' === |
| 131 | elementor.settings.editorPreferences.model.get( |
| 132 | 'ui_theme' |
| 133 | ), |
| 134 | } ) } |
| 135 | > |
| 136 | <TextControl |
| 137 | label={ window.tiTpc.exporter.textLabel } |
| 138 | placeholder={ window.tiTpc.exporter.textPlaceholder } |
| 139 | value={ title } |
| 140 | onChange={ setTitle } |
| 141 | /> |
| 142 | |
| 143 | <Button |
| 144 | isPrimary |
| 145 | isBusy={ isLoading } |
| 146 | disabled={ isLoading } |
| 147 | onClick={ onSave } |
| 148 | > |
| 149 | { window.tiTpc.exporter.buttonLabel } |
| 150 | </Button> |
| 151 | </Modal> |
| 152 | ); |
| 153 | }; |
| 154 | |
| 155 | const onClickModal = ( element ) => { |
| 156 | const content = element.model.toJSON( { |
| 157 | remove: [ 'default', 'editSettings', 'defaultEditSettings' ], |
| 158 | } ); |
| 159 | |
| 160 | const el = document.createElement( 'div' ); |
| 161 | el.id = 'ti-tpc-modal'; |
| 162 | document.body.appendChild( el ); |
| 163 | |
| 164 | render( |
| 165 | <ExportModal content={ content } />, |
| 166 | document.getElementById( 'ti-tpc-modal' ) |
| 167 | ); |
| 168 | }; |
| 169 | |
| 170 | // We only hook our menu item to Sections as handling importing of separate Column and Widgets can be tricky. |
| 171 | elementor.hooks.addFilter( |
| 172 | 'elements/section/contextMenuGroups', |
| 173 | addExportMenuItem |
| 174 | ); |
| 175 | } ); |
| 176 |