@astuteo/breakout-grid 5.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +223 -0
- package/breakout-grid-visualizer-lite.js +659 -0
- package/breakout-grid-visualizer.js +2523 -0
- package/craft-integration.twig +58 -0
- package/dist/_objects.breakout-grid.css +656 -0
- package/package.json +65 -0
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
{#
|
|
2
|
+
/**
|
|
3
|
+
* Breakout Grid Visualizer - CraftCMS Integration
|
|
4
|
+
*
|
|
5
|
+
* This template snippet loads the grid visualizer only in dev mode.
|
|
6
|
+
* Copy this to your layout template (e.g., _layouts/base.twig)
|
|
7
|
+
*
|
|
8
|
+
* Installation:
|
|
9
|
+
* 1. Copy breakout-grid-visualizer.js to your web/assets/js/ directory
|
|
10
|
+
* 2. Add this snippet before your closing </body> tag
|
|
11
|
+
* 3. Ensure Alpine.js is loaded (either via CDN or your build process)
|
|
12
|
+
*
|
|
13
|
+
* The visualizer will only load when Craft is in devMode.
|
|
14
|
+
*/
|
|
15
|
+
#}
|
|
16
|
+
|
|
17
|
+
{% if craft.app.config.general.devMode %}
|
|
18
|
+
{# Load Alpine.js if not already loaded #}
|
|
19
|
+
{% if not alpineLoaded is defined %}
|
|
20
|
+
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
21
|
+
{% endif %}
|
|
22
|
+
|
|
23
|
+
{# Load the visualizer script #}
|
|
24
|
+
<script src="/assets/js/breakout-grid-visualizer.js"></script>
|
|
25
|
+
|
|
26
|
+
{# Add the visualizer component to the page #}
|
|
27
|
+
<div x-data="breakoutGridVisualizer" x-html="template"></div>
|
|
28
|
+
|
|
29
|
+
{# Optional: Add a visible toggle button for easier access #}
|
|
30
|
+
<div x-data="{ show: true }"
|
|
31
|
+
x-show="show"
|
|
32
|
+
style="position: fixed; bottom: 1rem; left: 1rem; z-index: 9998;"
|
|
33
|
+
x-transition>
|
|
34
|
+
<button @click="show = false; $dispatch('toggle-grid-visualizer')"
|
|
35
|
+
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg shadow-lg text-sm font-semibold flex items-center gap-2 transition">
|
|
36
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
37
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h4a1 1 0 011 1v7a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v7a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 16a1 1 0 011-1h4a1 1 0 011 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-3zM14 16a1 1 0 011-1h4a1 1 0 011 1v3a1 1 0 01-1 1h-4a1 1 0 01-1-1v-3z"></path>
|
|
38
|
+
</svg>
|
|
39
|
+
Grid Visualizer (Ctrl+G)
|
|
40
|
+
</button>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
{# Handle the custom event #}
|
|
44
|
+
<script>
|
|
45
|
+
document.addEventListener('toggle-grid-visualizer', () => {
|
|
46
|
+
// Find the visualizer component and toggle it
|
|
47
|
+
const visualizer = Alpine.$data(document.querySelector('[x-data*="breakoutGridVisualizer"]'));
|
|
48
|
+
if (visualizer) {
|
|
49
|
+
visualizer.toggle();
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
</script>
|
|
53
|
+
|
|
54
|
+
{# Dev mode indicator (optional) #}
|
|
55
|
+
<div style="position: fixed; top: 0; left: 0; background: #ef4444; color: white; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 600; z-index: 9999; border-bottom-right-radius: 0.375rem; font-family: system-ui, -apple-system, sans-serif;">
|
|
56
|
+
DEV MODE
|
|
57
|
+
</div>
|
|
58
|
+
{% endif %}
|