balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

buttons.js (4823B)

      1 import { __ } from '@wordpress/i18n'
      2 import { renderToString } from '@wordpress/element'
      3 import { registerPlugin } from '@wordpress/plugins'
      4 import { openModal } from './util/general'
      5 import { PluginSidebarMoreMenuItem } from '@wordpress/edit-post'
      6 import { User } from './api/User'
      7 
      8 const openLibrary = (event) => {
      9     openModal(event.target.closest('[data-extendify-identifier]')?.dataset?.extendifyIdentifier)
     10 }
     11 
     12 // This returns true if the user object is null (Library never opened), or if it's enabled in the user settings
     13 const isLibraryEnabled = () => window.extendifySdkData.user === null || window.extendifySdkData?.user?.state?.enabled
     14 
     15 const mainButton = <div id="extendify-templates-inserter">
     16     <button
     17         style="background:#D9F1EE;color:#1e1e1e;border:1px solid #949494;font-weight:bold;font-size:14px;padding:8px;margin-right:8px"
     18         type="button"
     19         data-extendify-identifier="main-button"
     20         id="extendify-templates-inserter-btn"
     21         className="components-button">
     22         <svg style="margin-right:0.5rem" width="20" height="20" viewBox="0 0 103 103" fill="none" xmlns="http://www.w3.org/2000/svg">
     23             <rect y="25.75" width="70.8125" height="77.25" fill="#000000"/>
     24             <rect x="45.0625" width="57.9375" height="57.9375" fill="#37C2A2"/>
     25         </svg>
     26         {__('Library', 'extendify-sdk')}
     27     </button>
     28 </div>
     29 
     30 // Add the MAIN button when Gutenberg is available and ready
     31 window._wpLoadBlockEditor && window.wp.data.subscribe(() => {
     32     setTimeout(() => {
     33         // Redundant extra check added because of a bug where the above check wasn't working
     34         if (!isLibraryEnabled()) {
     35             return
     36         }
     37         if (document.getElementById('extendify-templates-inserter-btn')) {
     38             return
     39         }
     40         if (!document.querySelector('.edit-post-header-toolbar')) {
     41             return
     42         }
     43         document.querySelector('.edit-post-header-toolbar').insertAdjacentHTML('beforeend', renderToString(mainButton))
     44         document.getElementById('extendify-templates-inserter-btn').addEventListener('click', openLibrary)
     45     }, 0)
     46 })
     47 
     48 // The CTA button inside patterns
     49 window._wpLoadBlockEditor && window.wp.data.subscribe(() => {
     50     setTimeout(() => {
     51         // Redundant extra check added because of a bug where the above check wasn't working
     52         if (!isLibraryEnabled()) {
     53             return
     54         }
     55         if (!document.querySelector('[id$=patterns-view]')) {
     56             return
     57         }
     58         if (document.getElementById('extendify-cta-button')) {
     59             return
     60         }
     61         const ctaButton = <div>
     62             <button
     63                 id="extendify-cta-button"
     64                 style="margin:1rem 1rem 0"
     65                 data-extendify-identifier="patterns-cta"
     66                 className="components-button is-secondary">
     67                 {__('Discover more patterns in Extendify Library', 'extendify-sdk')}
     68             </button>
     69         </div>
     70         document.querySelector('[id$=patterns-view]').insertAdjacentHTML('afterbegin', renderToString(ctaButton))
     71         document.getElementById('extendify-cta-button').addEventListener('click', openLibrary)
     72     }, 0)
     73 })
     74 
     75 // The right dropdown side menu
     76 const SideMenuButton = () => <PluginSidebarMoreMenuItem
     77     data-extendify-identifier="sidebar-button"
     78     onClick={openLibrary}
     79     icon={
     80         <span className="components-menu-items__item-icon">
     81             <svg width="20" height="20" viewBox="0 0 103 103" fill="none" xmlns="http://www.w3.org/2000/svg">
     82                 <rect y="25.75" width="70.8125" height="77.25" fill="#000000"/>
     83                 <rect x="45.0625" width="57.9375" height="57.9375" fill="#37C2A2"/>
     84             </svg>
     85         </span>
     86     }
     87 >
     88     {__('Library', 'extendify-sdk')}
     89 </PluginSidebarMoreMenuItem>
     90 window._wpLoadBlockEditor && isLibraryEnabled() && registerPlugin('extendify-temps-more-menu-trigger', {
     91     render: SideMenuButton,
     92 })
     93 
     94 // This will add a button to enable or disable the library button
     95 const LibraryEnableDisable = () => <PluginSidebarMoreMenuItem
     96     onClick={async () => {
     97         // This works even when the Library hasn't been opened yet
     98         // because User.getData() will build a barebones User object
     99         let userData = await User.getData()
    100         userData = JSON.parse(userData)
    101         userData.state.enabled = !isLibraryEnabled()
    102         await User.setData(JSON.stringify(Object.assign({}, userData)))
    103         location.reload()
    104     }}
    105     icon={<></>}
    106 >
    107     {isLibraryEnabled()
    108         ? __('Disable Extendify', 'extendify-sdk')
    109         : __('Enable Extendify', 'extendify-sdk')}
    110 </PluginSidebarMoreMenuItem>
    111 
    112 // Load this button always, which is used to enable or disable
    113 window._wpLoadBlockEditor && registerPlugin('extendify-settings-enable-disable', {
    114     render: LibraryEnableDisable,
    115 })