Skip to content

Commit 42aafab

Browse files
jeffreyvrjeffreyvr
authored
Refactor/cleanup (#3)
1 parent 3f38426 commit 42aafab

File tree

7 files changed

+43
-46
lines changed

7 files changed

+43
-46
lines changed

‎assets/js/frame.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/paver.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/js/alpine/tooltip.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
document.addEventListener('alpine:init', () => {
2-
Alpine.directive('tooltip', (el, { expression }, { effect, evaluate }) => {
2+
Alpine.directive('paver-tooltip', (el, { expression }, { effect, evaluate }) => {
33
const content = evaluate(expression);
44

55
effect(() => {

‎resources/js/frame.js‎

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,15 @@
1-
import Alpine from 'alpinejs'
1+
import Localization from './localization.js'
2+
import ApiClient from './apiClient.js'
3+
import Shortcuts from './shortcuts.js'
24
import morph from '@alpinejs/morph'
35
import helpers from './helpers.js'
4-
import tippy from 'tippy.js'
56
import 'tippy.js/dist/tippy.css'
6-
import ApiClient from './apiClient.js'
7-
import Shortcuts from './shortcuts.js'
8-
import Localization from './localization.js'
7+
import Alpine from 'alpinejs'
8+
import tippy from 'tippy.js'
99
import './alpine/tooltip.js'
1010

11-
window.tippy = tippy
12-
1311
Alpine.plugin(morph)
1412

15-
window.Alpine = Alpine
16-
1713
window.PaverFrame = function (data) {
1814
return {
1915
...Localization,
@@ -94,7 +90,7 @@ window.PaverFrame = function (data) {
9490
async edit(e) {
9591
let target = e.currentTarget.parentNode.parentNode
9692

97-
if(target.classList.contains('paver__active-block')) {
93+
if (target.classList.contains('paver__active-block')) {
9894
return;
9995
}
10096

@@ -162,20 +158,11 @@ window.PaverFrame = function (data) {
162158

163159
currentBlock.data = response.data
164160

165-
// console.log(this.editingElement, response.render)
166-
167-
// Not using morph, as it sometimes breaks alpine components
168161
Alpine.morph(this.editingElement, response.render)
169162
const newElement = document.createElement('div')
170163
newElement.innerHTML = response.render
171-
// console.log(this.editingElement)
172-
// let parent = this.editingElement.parentNode
173-
// console.log('parent=', parent)
174-
// // parent.replaceChild(newElement, this.editingElement)
164+
175165
this.editingElement.innerHTML = newElement.querySelector('[data-block]').innerHTML
176-
// // console.log(this.editingElement);
177-
// this.editingElement.replaceWith(newElement)
178-
// console.log('el=',this.editingElement)
179166

180167
this.editingElement.setAttribute('data-block', JSON.stringify(currentBlock))
181168

@@ -206,7 +193,15 @@ window.PaverFrame = function (data) {
206193
}
207194
}
208195

209-
if(window.__paver_start_alpine) {
196+
if (!window.tippy) {
197+
window.tippy = tippy
198+
}
199+
200+
if (!window.Alpine) {
201+
window.Alpine = Alpine
202+
}
203+
204+
if (window.__paver_start_alpine) {
210205
console.log('[PAVER] Starting Alpine.js from frame')
211206

212207
Alpine.start()

‎resources/js/paver.js‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,18 @@
1-
import tippy from 'tippy.js'
2-
import Alpine from 'alpinejs'
1+
import Localization from './localization.js'
2+
import Shortcuts from './shortcuts.js'
3+
import ApiClient from './apiClient.js'
34
import morph from '@alpinejs/morph'
5+
import History from './history.js'
46
import helpers from './helpers.js'
57
import Sortable from 'sortablejs'
6-
import History from './history.js'
7-
import ApiClient from './apiClient.js'
8-
import Shortcuts from './shortcuts.js'
9-
import Localization from './localization.js'
10-
import './alpine/tooltip.js'
118
import 'tippy.js/dist/tippy.css'
9+
import Alpine from 'alpinejs'
10+
import tippy from 'tippy.js'
11+
import './alpine/tooltip.js'
1212
import './resizer.js'
1313

1414
Alpine.plugin(morph)
1515

16-
window.Alpine = Alpine
17-
18-
window.tippy = tippy
19-
20-
window.Sortable = Sortable
21-
2216
window.Paver = function (data) {
2317
return {
2418
...Localization,
@@ -570,6 +564,14 @@ window.Paver = function (data) {
570564
}
571565
}
572566

567+
if(! window.tippy) {
568+
window.tippy = tippy
569+
}
570+
571+
if(! window.Alpine) {
572+
window.Alpine = Alpine
573+
}
574+
573575
if(window.__paver_start_alpine) {
574576
console.log('[PAVER] Starting Alpine.js')
575577

‎resources/views/block-toolbar.php‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
<div class="paver__block-toolbar">
2-
<button type="button" class="paver__block-handle paver__cursor-grab" x-tooltip="text('Drag')">
2+
<button type="button" class="paver__block-handle paver__cursor-grab" x-paver-tooltip="text('Drag')">
33
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
44
<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" />
55
</svg>
66
</button>
77
8-
<button type="button" x-on:click="edit($event)" x-tooltip="text('Edit')">
8+
<button type="button" x-on:click="edit($event)" x-paver-tooltip="text('Edit')">
99
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
1010
<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" />
1111
</svg>
1212
</button>
1313
14-
<button type="button" x-on:click="clone($event)" x-tooltip="text('Clone')">
14+
<button type="button" x-on:click="clone($event)" x-paver-tooltip="text('Clone')">
1515
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
1616
<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" />
1717
</svg>
1818
</button>
1919
20-
<button type="button" x-on:click="trash($event)" x-tooltip="text('Delete')">
20+
<button type="button" x-on:click="trash($event)" x-paver-tooltip="text('Delete')">
2121
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
2222
<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" />
2323
</svg>

‎resources/views/editor.php‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,25 +24,25 @@ class="paver__container"
2424
</div>
2525

2626
<div x-cloak x-show="buttons.viewButton" class="paver__hide-on-mobile">
27-
<button x-show="view === 'desktop'" type="button" @click="setView('mobile')" class="paver__btn-icon" x-tooltip="text('Change to mobile')">
27+
<button x-show="view === 'desktop'" type="button" @click="setView('mobile')" class="paver__btn-icon" x-paver-tooltip="text('Change to mobile')">
2828
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
2929
<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" />
3030
</svg>
3131
</button>
32-
<button x-show="view === 'mobile'" type="button" @click="setView('desktop')" class="paver__btn-icon" x-tooltip="text('Change to desktop')">
32+
<button x-show="view === 'mobile'" type="button" @click="setView('desktop')" class="paver__btn-icon" x-paver-tooltip="text('Change to desktop')">
3333
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
3434
<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" />
3535
</svg>
3636
</button>
3737
</div>
3838

3939
<div x-cloak class="paver__hide-on-mobile" x-show="buttons.expandButton">
40-
<button type="button" @click="toggleExpand" x-show="!expanded" class="paver__btn-icon" x-tooltip="text('Expand')">
40+
<button type="button" @click="toggleExpand" x-show="!expanded" class="paver__btn-icon" x-paver-tooltip="text('Expand')">
4141
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
4242
<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" />
4343
</svg>
4444
</button>
45-
<button type="button" @click="toggleExpand" x-show="expanded" class="paver__btn-icon" x-tooltip="text('Minimize')">
45+
<button type="button" @click="toggleExpand" x-show="expanded" class="paver__btn-icon" x-paver-tooltip="text('Minimize')">
4646
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
4747
<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" />
4848
</svg>
@@ -105,7 +105,7 @@ class="paver__editor"
105105
<div class="paver__section">
106106
<div class="paver__section-header">
107107
<div x-text="editingBlock.name"></div>
108-
<button type="button" @click="exitEditMode" x-tooltip="text('Exit edit mode')" class="paver__btn-icon">
108+
<button type="button" @click="exitEditMode" x-paver-tooltip="text('Exit edit mode')" class="paver__btn-icon">
109109
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
110110
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
111111
</svg>

0 commit comments

Comments
 (0)