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
import.js
100 lines
| 1 | /* global elementor, elementorCommon */ |
| 2 | import { render } from '@wordpress/element'; |
| 3 | import TemplateLibrary from './template-library.js'; |
| 4 | |
| 5 | if ( undefined !== elementorCommon ) { |
| 6 | window.tiTpcModal = elementorCommon.dialogsManager.createWidget( |
| 7 | 'lightbox', |
| 8 | { |
| 9 | id: 'ti-tpc-templates-modal', |
| 10 | className: 'ti-tpc-templates-modal', |
| 11 | hide: { |
| 12 | auto: false, |
| 13 | onClick: false, |
| 14 | onOutsideClick: false, |
| 15 | onOutsideContextMenu: false, |
| 16 | onBackgroundClick: true, |
| 17 | }, |
| 18 | position: { |
| 19 | my: 'center', |
| 20 | at: 'center', |
| 21 | }, |
| 22 | onShow() { |
| 23 | const content = window.tiTpcModal.getElements( 'content' ); |
| 24 | const contentArea = document.getElementById( |
| 25 | 'ti-tpc-templates-modal-content' |
| 26 | ); |
| 27 | |
| 28 | if ( ! contentArea ) { |
| 29 | content.append( |
| 30 | '<div id="ti-tpc-templates-modal-content" class="wrap"></div>' |
| 31 | ); |
| 32 | } |
| 33 | }, |
| 34 | } |
| 35 | ); |
| 36 | |
| 37 | window.tiTpcModal.getElements( 'header' ).remove(); |
| 38 | window.tiTpcModal.getElements( 'message' ).remove(); |
| 39 | window.tiTpcModal |
| 40 | .getElements( 'widgetContent' ) |
| 41 | .append( window.tiTpcModal.addElement( 'content' ) ); |
| 42 | } |
| 43 | |
| 44 | const initModal = ( e ) => { |
| 45 | window.tiTpcModal.show(); |
| 46 | |
| 47 | const parentElement = elementor.$previewContents[ 0 ].body.querySelector( |
| 48 | '.elementor-section-wrap' |
| 49 | ); |
| 50 | |
| 51 | const childElement = e.closest( '.elementor-add-section' ); |
| 52 | window.tiTpc.placeholder = Array.from( parentElement.childNodes ).indexOf( |
| 53 | childElement |
| 54 | ); |
| 55 | |
| 56 | render( |
| 57 | <TemplateLibrary />, |
| 58 | document.getElementById( 'ti-tpc-templates-modal-content' ) |
| 59 | ); |
| 60 | |
| 61 | window.tiTpcModal.refreshPosition(); |
| 62 | }; |
| 63 | |
| 64 | const placeholder = document.getElementById( 'tmpl-elementor-add-section' ); |
| 65 | |
| 66 | if ( placeholder ) { |
| 67 | const text = placeholder.textContent; |
| 68 | const regex = |
| 69 | /(<div class="[^"]*?elementor-add-section-drag-title[^"]*?">(.|\n)*?<\/div>)/gm; |
| 70 | placeholder.textContent = text.replace( |
| 71 | regex, |
| 72 | // eslint-disable-next-line prettier/prettier |
| 73 | `<div class="elementor-add-section-area-button elementor-templates-cloud-button" title="${ window.tiTpc.library.libraryButton }"><svg width="100" height="100" viewBox="10 10 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" class="tpc-template-cloud-icon" role="img" aria-hidden="true" focusable="false"><path d="M95.0264 100H4.97356C2.22797 100 0 97.772 0 95.0264V4.97356C0 2.22797 2.22797 0 4.97356 0H95.0264C97.772 0 100 2.22797 100 4.97356V95.0264C100 97.772 97.772 100 95.0264 100Z" fill="#0366D6"></path><path d="M82.6941 86.7448V30.8205V18.4653H70.3502H14.4146L26.7584 30.8205H70.3502V74.401L82.6941 86.7448Z" fill="white"></path><path d="M42.2416 58.9291L42.2528 71.183L53.2352 82.1653L53.1902 47.9806L18.9941 47.9355L29.9765 58.9066L42.2416 58.9291Z" fill="white" style=""></path></svg></div> $1` |
| 74 | ); |
| 75 | } |
| 76 | |
| 77 | elementor.on( 'preview:loaded', () => { |
| 78 | elementor.$previewContents[ 0 ].body.addEventListener( |
| 79 | 'click', |
| 80 | ( event ) => { |
| 81 | if ( |
| 82 | -1 < |
| 83 | Array.from( event.target.classList ).indexOf( |
| 84 | 'elementor-templates-cloud-button' |
| 85 | ) || |
| 86 | -1 < |
| 87 | Array.from( event.target.classList ).indexOf( |
| 88 | 'tpc-template-cloud-icon' |
| 89 | ) || |
| 90 | -1 < |
| 91 | Array.from( event.target.parentNode.classList ).indexOf( |
| 92 | 'tpc-template-cloud-icon' |
| 93 | ) |
| 94 | ) { |
| 95 | initModal( event.target ); |
| 96 | } |
| 97 | } |
| 98 | ); |
| 99 | } ); |
| 100 |