Skip to content

Commit b176e26

Browse files
jissereitsmajissereitsma
committed
Make tabs of toolbar extensable
1 parent a5b7285 commit b176e26

6 files changed

Lines changed: 192 additions & 89 deletions

File tree

‎view/frontend/layout/loki_components.xml‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,41 @@
66
</referenceBlock>
77

88
<referenceBlock name="loki.script">
9-
<block name="loki-debugger.json-directive" template="Loki_Debugger::script/json-directive.phtml" />
9+
<block name="loki-debugger.json-directive" template="Loki_Debugger::script/json-directive.phtml"/>
1010
</referenceBlock>
1111

1212
<referenceContainer name="before.body.end">
13-
<block name="loki-debugger.debugger" template="Loki_Debugger::component/debugger.phtml" />
13+
<block name="loki-debugger.debugger" template="Loki_Debugger::component/debugger.phtml">
14+
<block
15+
name="loki-debugger.debugger.tab-button.server-dump"
16+
template="Loki_Debugger::component/debugger/tab-button/generic.phtml"
17+
>
18+
<arguments>
19+
<argument name="tab_name" xsi:type="string">server-dump</argument>
20+
<argument name="tab_label" xsi:type="string">Server Dump</argument>
21+
</arguments>
22+
</block>
23+
24+
<block
25+
name="loki-debugger.debugger.tab-button.components"
26+
template="Loki_Debugger::component/debugger/tab-button/generic.phtml"
27+
>
28+
<arguments>
29+
<argument name="tab_name" xsi:type="string">components</argument>
30+
<argument name="tab_label" xsi:type="string">Registered Components</argument>
31+
</arguments>
32+
</block>
33+
34+
<block
35+
name="loki-debugger.debugger.tab.server-dump"
36+
template="Loki_Debugger::component/debugger/tab/server-dump.phtml"
37+
/>
38+
39+
<block
40+
name="loki-debugger.debugger.tab.components"
41+
template="Loki_Debugger::component/debugger/tab/components.phtml"
42+
/>
43+
</block>
1444
</referenceContainer>
1545
</body>
1646
</page>

‎view/frontend/templates/component/debugger.phtml‎

Lines changed: 18 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<?php
22
declare(strict_types=1);
33

4+
use Loki\Components\Factory\ViewModelFactory;
5+
use Loki\Components\Util\Block\ChildRenderer;
6+
use Loki\Components\Util\IdConvertor;
47
use Loki\CssUtils\Util\CssClass;
8+
use Loki\Debugger\Component\Debugger\DebuggerViewModel;
59
use Magento\Framework\Escaper;
610
use Magento\Framework\View\Element\Template;
7-
use Loki\Components\Util\IdConvertor;
8-
use Loki\Debugger\Component\Debugger\DebuggerViewModel;
9-
use Loki\Components\Factory\ViewModelFactory;
1011

1112
/** @version 1.0.11 */
1213
/** @var Template $block */
@@ -15,94 +16,27 @@ use Loki\Components\Factory\ViewModelFactory;
1516
/** @var IdConvertor $idConvertor */
1617
/** @var CssClass $css */
1718
/** @var Escaper $escaper */
19+
/** @var ChildRenderer $childRenderer */
1820

1921
$idConvertor = $viewModelFactory->create(IdConvertor::class);
2022
$htmlId = $idConvertor->toElementId($block->getNameInLayout());
2123
?>
22-
<div class="<?= $escaper->escapeHtml($css('fixed bottom-0 left-0 right-0 h-64 md:block w-full border-t border-gray-400 bg-white', 'td')) ?>">
23-
<div class="<?= $escaper->escapeHtml($css('flex items-stretch overflow-x-auto', 'td')) ?>" role="tablist">
24-
<div class="<?= $escaper->escapeHtml($css('border-b border-gray-300 p-2', 'td')) ?>">
25-
<span role="tab">Loki Debugger</span>
26-
</div>
27-
<div>
28-
<button
29-
role="tab"
30-
aria-controls="tab-server"
31-
data-tab-name="server"
32-
type="button"
33-
@click.prevent="switchTab"
34-
:class="buttonCssClass"
35-
class="<?= $escaper->escapeHtml($css('inline-flex rounded-t-lg border-t border-l border-r p-4 border-gray-300 ', 'button-server')) ?>">
36-
Server Dump
37-
</button>
38-
</div>
39-
<div>
40-
<button
41-
role="tab"
42-
aria-controls="tab-components"
43-
data-tab-name="components"
44-
type="button"
45-
@click.prevent="switchTab"
46-
:class="buttonCssClass"
47-
class="<?= $escaper->escapeHtml($css('inline-flex rounded-t-lg border-t border-l border-r p-4 border-gray-300 ', 'button-components')) ?>">
48-
Registered Components
49-
</button>
50-
</div>
51-
</div>
24+
<div class="<?= $escaper->escapeHtml($css('')) ?>">
25+
<button class="fixed bottom-0 right-0 bg-orange-500 text-white p-4 z-20" @click="toggleVisibility">
26+
<span role="tab">
27+
<?= __('Loki Debugger') ?>
28+
</span>
29+
</button>
30+
31+
<div x-show="visible" x-cloak class="<?= $escaper->escapeHtml($css('fixed bottom-0 left-0 right-0 h-64 md:block w-full border-t border-orange-500 bg-orange-50', 'tabs')) ?>" x-ref="toolbar">
32+
<div class="absolute top-0 left-0 right-0" style="height:10px; cursor: ns-resize" x-ref="resizer"></div>
5233

53-
<div>
54-
<div :class="tabCssClass" class="<?= $escaper->escapeHtml($css('p-4', 'tab-server')) ?>" data-tab-name="server" id="tab-server">
55-
<h3 class="<?= $escaper->escapeHtml($css('text-xl my-4', 'tab-heading')) ?>">
56-
Server Dump
57-
</h3>
58-
<pre><?php var_dump($viewModel->getData()) ?></pre>
34+
<div class="<?= $escaper->escapeHtml($css('flex items-stretch overflow-x-auto px-2 pt-2 bg-orange-500', 'td')) ?>" role="tablist">
35+
<?= $childRenderer->all($block, 'loki-debugger.debugger.tab-button.') ?>
5936
</div>
6037

61-
<div :class="tabCssClass" class="<?= $escaper->escapeHtml($css('p-4', 'tab-components')) ?>" data-tab-name="components" id="tab-components">
62-
<table class="<?= $escaper->escapeHtml($css('table-auto w-full text-xs', 'table')) ?>">
63-
<thead>
64-
<tr>
65-
<th class="<?= $escaper->escapeHtml($css('border-b border-gray-300 p-2', 'th')) ?>">
66-
Alpine Instance / Component
67-
</th>
68-
<th class="<?= $escaper->escapeHtml($css('border-b border-gray-300 p-2', 'th')) ?>">
69-
Element ID
70-
</th>
71-
<th class="<?= $escaper->escapeHtml($css('border-b border-gray-300 p-2', 'th')) ?>">
72-
Loki Component Name
73-
</th>
74-
<th class="<?= $escaper->escapeHtml($css('border-b border-gray-300 p-2', 'th')) ?>">
75-
Value
76-
</th>
77-
<th class="<?= $escaper->escapeHtml($css('border-b border-gray-300 p-2', 'th')) ?>">
78-
Details
79-
</th>
80-
</tr>
81-
</thead>
82-
<tbody>
83-
<template x-for="component in components" :key="component.id">
84-
<tr>
85-
<td class="<?= $escaper->escapeHtml($css('border-b border-gray-300 p-2', 'td')) ?>">
86-
<strong><code x-text="component.id"></code></strong><br/>
87-
<code x-text="component.name"></code>
88-
</td>
89-
<td class="<?= $escaper->escapeHtml($css('border-b border-gray-300 p-2', 'td')) ?>">
90-
<code x-text="component.elementId"></code>
91-
</td>
92-
<td class="<?= $escaper->escapeHtml($css('border-b border-gray-300 p-2', 'td')) ?>">
93-
<code x-text="component.blockId"></code>
94-
</td>
95-
<td class="<?= $escaper->escapeHtml($css('border-b border-gray-300 p-2', 'td')) ?>">
96-
<code x-text="component.value"></code>
97-
</td>
98-
<td class="<?= $escaper->escapeHtml($css('border-b border-gray-300 p-2', 'td')) ?>">
99-
<code x-json="component.getDetails"></code>
100-
</td>
101-
</tr>
102-
</template>
103-
</tbody>
104-
</table>
38+
<div style="overflow:auto">
39+
<?= $childRenderer->all($block, 'loki-debugger.debugger.tab.') ?>
10540
</div>
10641
</div>
10742
</div>
108-

‎view/frontend/templates/component/debugger/tab-button/generic.phtml‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<?php
2+
declare(strict_types=1);
3+
4+
use Loki\CssUtils\Util\CssClass;
5+
use Magento\Framework\Escaper;
6+
use Magento\Framework\View\Element\Template;
7+
8+
/** @var Template $block */
9+
/** @var CssClass $css */
10+
/** @var Escaper $escaper */
11+
12+
$tabName = $block->getTabName();
13+
$tabLabel = $block->getTabLabel();
14+
?>
15+
<div>
16+
<button
17+
role="tab"
18+
aria-controls="tab-<?= $tabName ?>"
19+
data-tab-name="<?= $tabName ?>"
20+
type="button"
21+
@click.prevent="switchTab"
22+
:class="buttonCssClass">
23+
<?= __($tabLabel) ?>
24+
</button>
25+
</div>

‎view/frontend/templates/component/debugger/tab/components.phtml‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<?php
2+
declare(strict_types=1);
3+
4+
use Loki\CssUtils\Util\CssClass;
5+
use Loki\Debugger\Component\Debugger\DebuggerViewModel;
6+
use Magento\Framework\Escaper;
7+
use Magento\Framework\View\Element\Template;
8+
9+
/** @var Template $block */
10+
/** @var CssClass $css */
11+
/** @var Escaper $escaper */
12+
/** @var DebuggerViewModel $viewModel */
13+
14+
?>
15+
<div :class="tabCssClass" class="<?= $escaper->escapeHtml($css('p-4', 'tab-components')) ?>" data-tab-name="components" id="tab-components">
16+
<table class="<?= $escaper->escapeHtml($css('table-auto w-full text-xs', 'table')) ?>">
17+
<thead>
18+
<tr>
19+
<th class="<?= $escaper->escapeHtml($css('border-b border-gray-300 p-2', 'th')) ?>">
20+
Alpine Instance / Component
21+
</th>
22+
<th class="<?= $escaper->escapeHtml($css('border-b border-gray-300 p-2', 'th')) ?>">
23+
Element ID
24+
</th>
25+
<th class="<?= $escaper->escapeHtml($css('border-b border-gray-300 p-2', 'th')) ?>">
26+
Loki Component Name
27+
</th>
28+
<th class="<?= $escaper->escapeHtml($css('border-b border-gray-300 p-2', 'th')) ?>">
29+
Value
30+
</th>
31+
<th class="<?= $escaper->escapeHtml($css('border-b border-gray-300 p-2', 'th')) ?>">
32+
Details
33+
</th>
34+
</tr>
35+
</thead>
36+
<tbody>
37+
<template x-for="component in components" :key="component.id">
38+
<tr>
39+
<td class="<?= $escaper->escapeHtml($css('border-b border-gray-300 p-2', 'td')) ?>">
40+
<strong><code x-text="component.id"></code></strong><br/>
41+
<code x-text="component.name"></code>
42+
</td>
43+
<td class="<?= $escaper->escapeHtml($css('border-b border-gray-300 p-2', 'td')) ?>">
44+
<code x-text="component.elementId"></code>
45+
</td>
46+
<td class="<?= $escaper->escapeHtml($css('border-b border-gray-300 p-2', 'td')) ?>">
47+
<code x-text="component.blockId"></code>
48+
</td>
49+
<td class="<?= $escaper->escapeHtml($css('border-b border-gray-300 p-2', 'td')) ?>">
50+
<code x-text="component.value"></code>
51+
</td>
52+
<td class="<?= $escaper->escapeHtml($css('border-b border-gray-300 p-2', 'td')) ?>">
53+
<code x-json="component.getDetails"></code>
54+
</td>
55+
</tr>
56+
</template>
57+
</tbody>
58+
</table>
59+
</div>

‎view/frontend/templates/component/debugger/tab/server-dump.phtml‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<?php
2+
declare(strict_types=1);
3+
4+
use Loki\CssUtils\Util\CssClass;
5+
use Loki\Debugger\Component\Debugger\DebuggerViewModel;
6+
use Magento\Framework\Escaper;
7+
use Magento\Framework\View\Element\Template;
8+
9+
/** @var Template $block */
10+
/** @var CssClass $css */
11+
/** @var Escaper $escaper */
12+
/** @var DebuggerViewModel $viewModel */
13+
14+
$viewModel = $block->getAncestorBlock()->getViewModel();
15+
?>
16+
<div :class="tabCssClass" class="<?= $escaper->escapeHtml($css('p-4')) ?>" data-tab-name="server-dump" id="tab-server-dump">
17+
<h3 class="<?= $escaper->escapeHtml($css('text-xl my-4', 'tab-heading')) ?>">
18+
<?= __('Server Dump') ?>
19+
</h3>
20+
<pre><?php var_dump($viewModel->getData()) ?></pre>
21+
</div>

‎view/frontend/templates/script/component/debugger-component.phtml‎

Lines changed: 37 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,14 @@ use Magento\Framework\View\Element\Template;
1212
...LokiComponentType,
1313
currentTab: '',
1414
components: [],
15+
visible: true,
1516
init() {
17+
this.visible = parseInt(LokiComponentsStorage.load('debugger.visible')) === 1;
18+
const toolbarHeight = parseInt(LokiComponentsStorage.load('debugger.height')) || 100;
19+
if (toolbarHeight) {
20+
this.$refs.toolbar.style.height = toolbarHeight + "px";
21+
}
22+
1623
this.loadComponents();
1724

1825
this.currentTab = LokiComponentsStorage.load('debugger.tab');
@@ -22,7 +29,33 @@ use Magento\Framework\View\Element\Template;
2229

2330
document.addEventListener('loki-components.component-register', () => {
2431
this.loadComponents();
25-
})
32+
});
33+
34+
let startY = 0;
35+
let startHeight = 0;
36+
this.$refs.resizer.addEventListener("mousedown", (e) => {
37+
startY = e.clientY;
38+
startHeight = this.$refs.toolbar.offsetHeight;
39+
40+
document.addEventListener("mousemove", onDrag);
41+
document.addEventListener("mouseup", stopDrag);
42+
});
43+
44+
const onDrag = (e) => {
45+
const delta = e.clientY - startY;
46+
const newHeight = startHeight - delta;
47+
this.$refs.toolbar.style.height = newHeight + "px";
48+
LokiComponentsStorage.save('debugger.height', newHeight);
49+
}
50+
51+
const stopDrag = () => {
52+
document.removeEventListener("mousemove", onDrag);
53+
document.removeEventListener("mouseup", stopDrag);
54+
}
55+
},
56+
toggleVisibility() {
57+
this.visible = !this.visible;
58+
LokiComponentsStorage.save('debugger.visible', this.visible ? 1 : 0);
2659
},
2760
reload() {
2861
this.loadComponents();
@@ -37,12 +70,13 @@ use Magento\Framework\View\Element\Template;
3770
return tabName === this.currentTab;
3871
},
3972
buttonCssClass() {
73+
const defaultCss = 'inline-flex rounded-t-lg border-t border-l border-r p-4';
4074
const tabName = this.$el.getAttribute('data-tab-name');
4175
if (this.isSelected(tabName)) {
42-
return 'border-transparent bg-white';
76+
return defaultCss + ' border-transparent bg-orange-50';
4377
}
4478

45-
return 'border-gray-200 bg-zinc-200';
79+
return defaultCss + ' border-transparent text-white';
4680
},
4781
tabCssClass() {
4882
const tabName = this.$el.getAttribute('data-tab-name');

0 commit comments

Comments
 (0)