Refactor/cleanup (#3)

resources/js/alpine/tooltip.js

@@ -1,5 +1,5 @@
 document.addEventListener('alpine:init', () => {
-    Alpine.directive('tooltip', (el, { expression }, { effect, evaluate }) => {
+    Alpine.directive('paver-tooltip', (el, { expression }, { effect, evaluate }) => {
         const content = evaluate(expression);
 
         effect(() => {

resources/js/frame.js

@@ -1,19 +1,15 @@
-import Alpine from 'alpinejs'
+import Localization from './localization.js'
+import ApiClient from './apiClient.js'
+import Shortcuts from './shortcuts.js'
 import morph from '@alpinejs/morph'
 import helpers from './helpers.js'
-import tippy from 'tippy.js'
 import 'tippy.js/dist/tippy.css'
-import ApiClient from './apiClient.js'
-import Shortcuts from './shortcuts.js'
-import Localization from './localization.js'
+import Alpine from 'alpinejs'
+import tippy from 'tippy.js'
 import './alpine/tooltip.js'
 
-window.tippy = tippy
-
 Alpine.plugin(morph)
 
-window.Alpine = Alpine
-
 window.PaverFrame = function (data) {
     return {
         ...Localization,
@@ -94,7 +90,7 @@ window.PaverFrame = function (data) {
         async edit(e) {
             let target = e.currentTarget.parentNode.parentNode
 
-            if(target.classList.contains('paver__active-block')) {
+            if (target.classList.contains('paver__active-block')) {
                 return;
             }
 
@@ -162,20 +158,11 @@ window.PaverFrame = function (data) {
 
                 currentBlock.data = response.data
 
-                // console.log(this.editingElement, response.render)
-
-                // Not using morph, as it sometimes breaks alpine components
                 Alpine.morph(this.editingElement, response.render)
                 const newElement = document.createElement('div')
                 newElement.innerHTML = response.render
-                // console.log(this.editingElement)
-                // let parent = this.editingElement.parentNode
-                // console.log('parent=', parent)
-                // // parent.replaceChild(newElement, this.editingElement)
+
                 this.editingElement.innerHTML = newElement.querySelector('[data-block]').innerHTML
-                // // console.log(this.editingElement);
-                // this.editingElement.replaceWith(newElement)
-                // console.log('el=',this.editingElement)
 
                 this.editingElement.setAttribute('data-block', JSON.stringify(currentBlock))
 
@@ -206,7 +193,15 @@ window.PaverFrame = function (data) {
     }
 }
 
-if(window.__paver_start_alpine) {
+if (!window.tippy) {
+    window.tippy = tippy
+}
+
+if (!window.Alpine) {
+    window.Alpine = Alpine
+}
+
+if (window.__paver_start_alpine) {
     console.log('[PAVER] Starting Alpine.js from frame')
 
     Alpine.start()

resources/js/paver.js

@@ -1,24 +1,18 @@
-import tippy from 'tippy.js'
-import Alpine from 'alpinejs'
+import Localization from './localization.js'
+import Shortcuts from './shortcuts.js'
+import ApiClient from './apiClient.js'
 import morph from '@alpinejs/morph'
+import History from './history.js'
 import helpers from './helpers.js'
 import Sortable from 'sortablejs'
-import History from './history.js'
-import ApiClient from './apiClient.js'
-import Shortcuts from './shortcuts.js'
-import Localization from './localization.js'
-import './alpine/tooltip.js'
 import 'tippy.js/dist/tippy.css'
+import Alpine from 'alpinejs'
+import tippy from 'tippy.js'
+import './alpine/tooltip.js'
 import './resizer.js'
 
 Alpine.plugin(morph)
 
-window.Alpine = Alpine
-
-window.tippy = tippy
-
-window.Sortable = Sortable
-
 window.Paver = function (data) {
     return {
         ...Localization,
@@ -570,6 +564,14 @@ window.Paver = function (data) {
     }
 }
 
+if(! window.tippy) {
+    window.tippy = tippy
+}
+
+if(! window.Alpine) {
+    window.Alpine = Alpine
+}
+
 if(window.__paver_start_alpine) {
     console.log('[PAVER] Starting Alpine.js')
 

resources/views/block-toolbar.php

@@ -1,23 +1,23 @@
 <div class="paver__block-toolbar">
-    <button type="button" class="paver__block-handle paver__cursor-grab" x-tooltip="text('Drag')">
+    <button type="button" class="paver__block-handle paver__cursor-grab" x-paver-tooltip="text('Drag')">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
         </svg>
     </button>
 
-    <button type="button" x-on:click="edit($event)" x-tooltip="text('Edit')">
+    <button type="button" x-on:click="edit($event)" x-paver-tooltip="text('Edit')">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
             <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
         </svg>
     </button>
 
-    <button type="button" x-on:click="clone($event)" x-tooltip="text('Clone')">
+    <button type="button" x-on:click="clone($event)" x-paver-tooltip="text('Clone')">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" />
         </svg>
     </button>
 
-    <button type="button" x-on:click="trash($event)" x-tooltip="text('Delete')">
+    <button type="button" x-on:click="trash($event)" x-paver-tooltip="text('Delete')">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
         </svg>

resources/views/editor.php

@@ -24,25 +24,25 @@ class="paver__container"
                 </div>
 
                 <div x-cloak x-show="buttons.viewButton" class="paver__hide-on-mobile">
-                    <button x-show="view === 'desktop'" type="button" @click="setView('mobile')" class="paver__btn-icon" x-tooltip="text('Change to mobile')">
+                    <button x-show="view === 'desktop'" type="button" @click="setView('mobile')" class="paver__btn-icon" x-paver-tooltip="text('Change to mobile')">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
                         </svg>
                     </button>
-                    <button x-show="view === 'mobile'" type="button" @click="setView('desktop')" class="paver__btn-icon" x-tooltip="text('Change to desktop')">
+                    <button x-show="view === 'mobile'" type="button" @click="setView('desktop')" class="paver__btn-icon" x-paver-tooltip="text('Change to desktop')">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" />
                         </svg>
                     </button>
                 </div>
 
                 <div x-cloak class="paver__hide-on-mobile" x-show="buttons.expandButton">
-                    <button type="button" @click="toggleExpand" x-show="!expanded" class="paver__btn-icon" x-tooltip="text('Expand')">
+                    <button type="button" @click="toggleExpand" x-show="!expanded" class="paver__btn-icon" x-paver-tooltip="text('Expand')">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
                         </svg>
                     </button>
-                    <button type="button" @click="toggleExpand" x-show="expanded" class="paver__btn-icon" x-tooltip="text('Minimize')">
+                    <button type="button" @click="toggleExpand" x-show="expanded" class="paver__btn-icon" x-paver-tooltip="text('Minimize')">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25" />
                         </svg>
@@ -105,7 +105,7 @@ class="paver__editor"
                 <div class="paver__section">
                     <div class="paver__section-header">
                         <div x-text="editingBlock.name"></div>
-                        <button type="button" @click="exitEditMode" x-tooltip="text('Exit edit mode')" class="paver__btn-icon">
+                        <button type="button" @click="exitEditMode" x-paver-tooltip="text('Exit edit mode')" class="paver__btn-icon">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                             </svg>