Skip to content

Commit 2e05aea

Browse files
jeffreyvrjeffreyvr
committed
wip
1 parent f53094b commit 2e05aea

File tree

16 files changed

+229
-97
lines changed

16 files changed

+229
-97
lines changed

‎assets/css/frame.css‎

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/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/css/_breadcrumb.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.block-breadcrumb {
2+
background-color: #fff;
3+
position: sticky;
4+
left: 0px;
5+
bottom: 0px;
6+
display: flex;
7+
gap: 4px;
8+
border-top: 1px solid var(--paver-border-color);
9+
width: 100%;
10+
display: flex;
11+
align-items: center;
12+
padding: 8px 12px;
13+
font-size: .8rem;
14+
font-weight: 500;
15+
16+
li {
17+
display: flex;
18+
align-items: center;
19+
gap: 4px;
20+
21+
svg {
22+
width: 18px;
23+
color: var(--paver-border-color);
24+
}
25+
26+
&:hover {
27+
cursor: pointer;
28+
}
29+
30+
&:last-of-type {
31+
svg {
32+
display: none;
33+
}
34+
}
35+
}
36+
}

‎resources/css/_toolbar.css‎

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,43 @@
33
}
44

55
.block-toolbar {
6-
border: 1px solid #000;
7-
border-radius: 3px;
6+
/* border-radius: 0 0 0 3px; */
87
display: none;
8+
align-items: center;
99
z-index: 100;
1010
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
1111

1212
animation: fadeIn 0.2s ease-in-out;
1313

1414
position: absolute;
15-
right: 5px;
16-
top: 5px;
15+
left: 0px;
16+
top: 0px;
17+
width: 100%;
18+
justify-content: space-between;
1719
color: #000;
1820

1921
button:last-of-type {
2022
border-right: none;
21-
border-radius: 0 3px 3px 0;
23+
/* border-radius: 0 3px 3px 0; */
2224
}
2325

2426
button:first-of-type {
25-
border-radius: 3px 0 0 3px;
27+
/* border-radius: 3px 0 0 3px; */
28+
}
29+
30+
.block-toolbar-actions {
31+
display: flex;
32+
}
33+
34+
.block-toolbar-info {
35+
background-color: var(--paver-color-primary);
36+
color: rgba(255, 255, 255, .75);
37+
padding: 0 5px;
38+
font-size: .8rem;
39+
align-self: stretch;
40+
display: flex;
41+
align-items: center;
42+
font-weight: 500;
2643
}
2744

2845
button {
@@ -32,11 +49,12 @@
3249
align-items: center;
3350
padding: 0 7px;
3451
height: 30px;
35-
background-color: #f9f9f9;
36-
border-right: 1px solid #000;
52+
border-right: 1px solid rgba(255, 255, 255, .15);
53+
background-color: var(--paver-color-primary);
54+
color: rgba(255, 255, 255, .75);
3755

3856
&:hover {
39-
color: var(--paver-color-primary);
57+
color: #fff;
4058
}
4159

4260
svg {
@@ -45,9 +63,9 @@
4563
}
4664
}
4765
}
48-
66+
/*
4967
.sortable-ghost {
5068
.block-toolbar {
5169
background: #ff0000;
5270
}
53-
}
71+
} */

‎resources/css/frame.css‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@import "_animations.css";
33
@import "_utilities.css";
44
@import "_toolbar.css";
5+
@import '_breadcrumb.css';
56

67
html,
78
body {
@@ -16,6 +17,7 @@ body {
1617

1718
.sortable {
1819
min-height: 50px;
20+
padding: 5px 0;
1921
}
2022

2123
/* body {
@@ -24,7 +26,8 @@ body {
2426
} */
2527

2628
.editor-root {
27-
min-height: 300px;
29+
padding: 0;
30+
min-height: 300px;
2831
}
2932

3033
.sortable-ghost {
@@ -73,7 +76,7 @@ body {
7376
}
7477

7578
&:hover::after {
76-
border-color: rgba(3, 124, 186, 0.25);
79+
border-color: var(--paver-color-primary);
7780
}
7881
}
7982

@@ -85,7 +88,7 @@ body {
8588
left: 0;
8689
right: 0;
8790
bottom: 0;
88-
border: 1px solid rgba(3, 124, 186);
91+
border: 1px solid var(--paver-color-primary);
8992
pointer-events: none;
9093
}
9194
}

‎resources/js/frame.js‎

Lines changed: 47 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ window.PaverFrame = function (data) {
2020

2121
blocks: [],
2222

23+
breadcrumb: [],
24+
2325
editingBlock: null,
2426

2527
editingElement: null,
@@ -33,6 +35,9 @@ window.PaverFrame = function (data) {
3335
Shortcuts.expand(() => this.expand())
3436
Shortcuts.exit(() => this.exit())
3537

38+
Shortcuts.selectParentBlock(() => this.selectParentBlock())
39+
helpers.listenFromFrame('selectParentBlock', () => this.selectParentBlock())
40+
3641
document.addEventListener('loading', () => helpers.dispatchToParent('loading'))
3742
document.addEventListener('loaded', () => helpers.dispatchToParent('loaded'))
3843

@@ -67,33 +72,70 @@ window.PaverFrame = function (data) {
6772
helpers.dispatchToParent('revert', {})
6873
},
6974

75+
selectParentBlock() {
76+
if (this.breadcrumb.length > 1) {
77+
this.edit(this.breadcrumb[this.breadcrumb.length - 2].target)
78+
}
79+
},
80+
7081
trash(e) {
7182
e.preventDefault()
7283

7384
if (!confirm(this.text('Are you sure you want to delete this block?'))) {
7485
return
7586
}
7687

77-
let target = e.currentTarget.parentNode.parentNode
88+
let target = e.currentTarget.closest('.paver__block')
7889
let block = target.getAttribute('data-id')
7990

8091
helpers.dispatchToParent('delete', JSON.parse(JSON.stringify(block)))
92+
this.breadcrumb = []
8193
},
8294

8395
clone(e) {
84-
let target = e.currentTarget.parentNode.parentNode
96+
let target = e.currentTarget.closest('.paver__block')
8597
// let block = JSON.parse(target.getAttribute('data-block'))
8698

8799
helpers.dispatchToParent('clone', JSON.parse(JSON.stringify({ blockHtml: target.outerHTML })))
100+
101+
this.breadcrumb = []
102+
},
103+
104+
getBlockBreadcrumb(block) {
105+
let breadcrumb = [];
106+
let current = block;
107+
108+
while (current) {
109+
breadcrumb.push({target: current, data: JSON.parse(current.getAttribute('data-block'))})
110+
current = current.parentElement.closest('.paver__block')
111+
}
112+
113+
return breadcrumb.reverse()
88114
},
89115

90116
async edit(e) {
91-
let target = e.currentTarget.parentNode.parentNode
117+
let target = null;
118+
119+
if (e instanceof Event) {
120+
if (e.currentTarget.classList.contains('paver__block')) {
121+
target = e.currentTarget
122+
} else {
123+
target = e.currentTarget.closest('.paver__block')
124+
}
125+
} else if (e instanceof HTMLElement) {
126+
if (e.classList.contains('paver__block')) {
127+
target = e
128+
} else {
129+
target = e.closest('.paver__block')
130+
}
131+
}
92132

93-
if (target.classList.contains('paver__active-block')) {
94-
return;
133+
if (!target || target.classList.contains('paver__active-block')) {
134+
return
95135
}
96136

137+
this.breadcrumb = this.getBlockBreadcrumb(target)
138+
97139
let block = JSON.parse(target.getAttribute('data-block'))
98140

99141
document.querySelectorAll('.paver__active-block').forEach((el) => {

‎resources/js/paver.js‎

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ window.Paver = function (data) {
1717
return {
1818
...Localization,
1919

20+
breadcrumb: [],
21+
2022
texts: data.texts,
2123

2224
api: new ApiClient(data.api),
@@ -138,15 +140,19 @@ window.Paver = function (data) {
138140
determineAllowedBlocks() {
139141
this.allowedBlocks = []
140142

141-
this.root().querySelector('.paver__active-block').querySelectorAll('.paver__sortable').forEach(element => {
142-
if(! element.hasAttribute('data-allow-blocks')) {
143-
return
144-
}
143+
let element = this.root().querySelector('.paver__active-block .paver__sortable')
144+
145+
if(! element) {
146+
return
147+
}
145148

146-
let elementAllowedBlocks = JSON.parse(element.getAttribute('data-allow-blocks'))
149+
if(! element.hasAttribute('data-allow-blocks')) {
150+
return
151+
}
147152

148-
this.allowedBlocks = [...this.allowedBlocks, ...elementAllowedBlocks]
149-
})
153+
let elementAllowedBlocks = JSON.parse(element.getAttribute('data-allow-blocks'))
154+
155+
this.allowedBlocks = [...this.allowedBlocks, ...elementAllowedBlocks]
150156

151157
this.log('Blocks allowed in this block:', this.allowedBlocks)
152158
},
@@ -191,9 +197,15 @@ window.Paver = function (data) {
191197

192198
helpers.listenFromFrame('expand', (event) => this.toggleExpand())
193199

200+
Shortcuts.selectParentBlock(() => {
201+
helpers.dispatchToFrame(this.$refs.editor, 'selectParentBlock')
202+
})
203+
194204
helpers.listenFromFrame('loading', () => this.isLoading())
195205
helpers.listenFromFrame('loaded', () => this.isLoaded())
196206

207+
helpers.listenFromFrame('updateBreadcrumb', (event) => this.breadcrumb = event.breadcrumb)
208+
197209
document.addEventListener('loading', () => this.isLoading())
198210
document.addEventListener('loaded', () => this.isLoaded())
199211

@@ -298,7 +310,6 @@ window.Paver = function (data) {
298310
})
299311
},
300312

301-
302313
determineVisibleInsertableBlocks() {
303314
const searchTerm = this.blockInserter.search.trim().toLowerCase()
304315
const allowedBlocks = this.allowedBlocks.length ? this.allowedBlocks : null
@@ -308,11 +319,18 @@ window.Paver = function (data) {
308319
let totalVisible = 0
309320

310321
blocks.forEach(block => {
311-
const blockName = block.getAttribute('data-block').trim().toLowerCase()
322+
const blockData = JSON.parse(block.getAttribute('data-block'))
323+
const blockName = blockData.block.trim().toLowerCase()
324+
const isHidden = block.classList.contains('paver__hide_from_block_inserter')
312325
const matchesSearch = !searchTerm || blockName.includes(searchTerm)
313326
const isAllowed = !allowedBlocks || allowedBlocks.includes(blockName)
314327
const withinLimit = this.blockInserter.showAll || visibleCount < this.blockInserter.limit
315328

329+
if (isHidden && (!allowedBlocks || !allowedBlocks.includes(blockName))) {
330+
block.style.display = 'none'
331+
return
332+
}
333+
316334
if (matchesSearch && isAllowed) {
317335
totalVisible++
318336
block.style.display = withinLimit ? 'flex' : 'none'
@@ -427,7 +445,7 @@ window.Paver = function (data) {
427445

428446
let allowedBlocks = JSON.parse(to.el.getAttribute('data-allow-blocks'))
429447

430-
let draggedBlock = draggedElement.getAttribute('data-block').trim().toLowerCase()
448+
let draggedBlock = JSON.parse(draggedElement.getAttribute('data-block')).block.trim().toLowerCase()
431449

432450
return allowedBlocks.some(block => block.trim().toLowerCase() === draggedBlock)
433451
}
@@ -531,14 +549,15 @@ window.Paver = function (data) {
531549
},
532550

533551
async fetchBlock(evt) {
534-
const block = evt.item.getAttribute('data-block')
552+
const block = JSON.parse(evt.item.getAttribute('data-block'))
553+
535554
try {
536-
const response = await this.api.fetchBlock(block, this.api.payload)
555+
const response = await this.api.fetchBlock(block.block, this.api.payload)
537556

538557
const newElement = document.createElement('div')
539558
newElement.innerHTML = response.render
540559

541-
newElement.firstElementChild.setAttribute('data-block', JSON.stringify({block, data: response.data}))
560+
newElement.firstElementChild.setAttribute('data-block', JSON.stringify({...block, data: response.data}))
542561
newElement.firstElementChild.setAttribute('data-id', response.id)
543562

544563
evt.item.outerHTML = newElement.innerHTML

‎resources/js/shortcuts.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,16 @@ const Shortcuts = {
2424
if (event.key === 'Escape') {
2525
event.preventDefault()
2626

27+
callback()
28+
}
29+
})
30+
},
31+
32+
selectParentBlock(callback) {
33+
document.addEventListener('keydown', (event) => {
34+
if (event.key === 'ArrowUp') {
35+
event.preventDefault()
36+
2737
callback()
2838
}
2939
})

0 commit comments

Comments
 (0)