lato_cms 3.0.7 → 3.0.9
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.
- checksums.yaml +4 -4
- data/app/assets/javascripts/lato_cms/controllers/lato_cms_advanced_editor_controller.js +14 -36
- data/app/assets/javascripts/lato_cms/controllers/lato_cms_page_preview_controller.js +64 -1
- data/app/assets/stylesheets/lato_cms/application.scss +51 -3
- data/app/views/lato_cms/pages/show.html.erb +51 -15
- data/config/locales/en.yml +6 -1
- data/config/locales/it.yml +6 -1
- data/lib/lato_cms/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a2f231b3624de0d429fc3f73d0e659d0556543c9a657d54b939308b581ad53b4
|
|
4
|
+
data.tar.gz: be81b76ce28bc8b5e72345ac640eb4279285a9e70b9bf345f80399f7e4773cfb
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 28b6cc9fe5db40ff256bfed0055470a4c1d0ce1d22e9a601373832b6daac8b8215126555ab9e37d67ac58918e3b1d9c188cb0669716b7fb8370d8262b32c5276
|
|
7
|
+
data.tar.gz: 7ec553cebf51a13d07823c77fbab3c06043365f30b14753ec86ff9d6847c386955d6536833b199754007e1f91073b0e353ef635e0eee7f87f19843e111ef410e
|
|
@@ -1,55 +1,33 @@
|
|
|
1
1
|
import { Controller } from "@hotwired/stimulus"
|
|
2
2
|
|
|
3
3
|
export default class extends Controller {
|
|
4
|
-
static targets = ["
|
|
4
|
+
static targets = ["editorCol", "reopenBtn"]
|
|
5
|
+
static values = { listPath: String }
|
|
5
6
|
|
|
6
|
-
isActive = false
|
|
7
7
|
isSidebarOpen = true
|
|
8
8
|
|
|
9
|
-
// ───
|
|
9
|
+
// ─── Advanced full-screen editor is the only view ────────────────────────────
|
|
10
|
+
// The full-screen layout is rendered server-side (--active class + body CSS) so
|
|
11
|
+
// it survives re-renders (e.g. component clone) with no flash. JS only wires up
|
|
12
|
+
// Escape-to-back and the sidebar toggle.
|
|
10
13
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
activate() {
|
|
16
|
-
this.isActive = true
|
|
17
|
-
this.isSidebarOpen = true
|
|
18
|
-
|
|
19
|
-
this.rowTarget.classList.add('lato-cms-advanced-editor__row--active')
|
|
20
|
-
document.body.classList.add('lato-cms-advanced-editor--open')
|
|
21
|
-
|
|
22
|
-
this.toggleBtnTarget.title = 'Exit advanced editor'
|
|
23
|
-
this.toggleBtnTarget.querySelector('i').className = 'bi bi-fullscreen-exit'
|
|
24
|
-
this.collapseBtnTarget.classList.remove('d-none')
|
|
25
|
-
this.editorColTarget.classList.remove('lato-cms-advanced-editor__editor-col--collapsed')
|
|
26
|
-
this.reopenBtnTarget.hidden = true
|
|
27
|
-
|
|
28
|
-
this._escHandler = (e) => { if (e.key === 'Escape') this.deactivate() }
|
|
14
|
+
connect() {
|
|
15
|
+
// Escape returns to the pages list instead of exiting to a base view.
|
|
16
|
+
this._escHandler = (e) => { if (e.key === 'Escape') this.back() }
|
|
29
17
|
document.addEventListener('keydown', this._escHandler)
|
|
30
18
|
}
|
|
31
19
|
|
|
32
|
-
|
|
33
|
-
this.isActive = false
|
|
34
|
-
this.isSidebarOpen = true
|
|
35
|
-
|
|
36
|
-
this.rowTarget.classList.remove('lato-cms-advanced-editor__row--active')
|
|
37
|
-
document.body.classList.remove('lato-cms-advanced-editor--open')
|
|
38
|
-
|
|
39
|
-
this.toggleBtnTarget.title = 'Advanced editor'
|
|
40
|
-
this.toggleBtnTarget.querySelector('i').className = 'bi bi-fullscreen'
|
|
41
|
-
this.collapseBtnTarget.classList.add('d-none')
|
|
42
|
-
this.editorColTarget.classList.remove('lato-cms-advanced-editor__editor-col--collapsed')
|
|
43
|
-
this.reopenBtnTarget.hidden = true
|
|
44
|
-
|
|
20
|
+
disconnect() {
|
|
45
21
|
document.removeEventListener('keydown', this._escHandler)
|
|
46
22
|
}
|
|
47
23
|
|
|
24
|
+
back() {
|
|
25
|
+
if (this.hasListPathValue) window.location.href = this.listPathValue
|
|
26
|
+
}
|
|
27
|
+
|
|
48
28
|
// ─── Toggle sidebar within advanced mode ─────────────────────────────────────
|
|
49
29
|
|
|
50
30
|
toggleSidebar() {
|
|
51
|
-
if (!this.isActive) return
|
|
52
|
-
|
|
53
31
|
this.isSidebarOpen = !this.isSidebarOpen
|
|
54
32
|
this.editorColTarget.classList.toggle('lato-cms-advanced-editor__editor-col--collapsed', !this.isSidebarOpen)
|
|
55
33
|
this.reopenBtnTarget.hidden = this.isSidebarOpen
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Controller } from '@hotwired/stimulus'
|
|
2
2
|
|
|
3
3
|
export default class extends Controller {
|
|
4
|
-
static targets = ['iframe']
|
|
4
|
+
static targets = ['iframe', 'viewport', 'deviceBtn', 'customWidth', 'dimensions']
|
|
5
5
|
|
|
6
6
|
connect () {
|
|
7
7
|
this.handleComponentChange = this.handleComponentChange.bind(this)
|
|
@@ -11,6 +11,12 @@ export default class extends Controller {
|
|
|
11
11
|
|
|
12
12
|
if (this.hasIframeTarget) {
|
|
13
13
|
this.iframeTarget.addEventListener('load', this.handleIframeLoad)
|
|
14
|
+
|
|
15
|
+
// Live viewport dimensions readout
|
|
16
|
+
if (window.ResizeObserver) {
|
|
17
|
+
this.resizeObserver = new window.ResizeObserver(() => this.updateDimensions())
|
|
18
|
+
this.resizeObserver.observe(this.iframeTarget)
|
|
19
|
+
}
|
|
14
20
|
}
|
|
15
21
|
|
|
16
22
|
window.requestAnimationFrame(() => {
|
|
@@ -24,6 +30,8 @@ export default class extends Controller {
|
|
|
24
30
|
if (this.hasIframeTarget) {
|
|
25
31
|
this.iframeTarget.removeEventListener('load', this.handleIframeLoad)
|
|
26
32
|
}
|
|
33
|
+
|
|
34
|
+
if (this.resizeObserver) this.resizeObserver.disconnect()
|
|
27
35
|
}
|
|
28
36
|
|
|
29
37
|
refresh () {
|
|
@@ -37,6 +45,61 @@ export default class extends Controller {
|
|
|
37
45
|
}
|
|
38
46
|
}
|
|
39
47
|
|
|
48
|
+
// Constrain the preview iframe to a device viewport width.
|
|
49
|
+
setDevice (event) {
|
|
50
|
+
if (!this.hasViewportTarget) return
|
|
51
|
+
|
|
52
|
+
const device = event.currentTarget.dataset.device
|
|
53
|
+
|
|
54
|
+
this.iframeTarget.style.maxWidth = ''
|
|
55
|
+
this.viewportTarget.classList.remove(
|
|
56
|
+
'lato-cms-page-preview__viewport--tablet',
|
|
57
|
+
'lato-cms-page-preview__viewport--mobile',
|
|
58
|
+
'lato-cms-page-preview__viewport--custom'
|
|
59
|
+
)
|
|
60
|
+
if (device !== 'desktop') {
|
|
61
|
+
this.viewportTarget.classList.add(`lato-cms-page-preview__viewport--${device}`)
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
this.deviceBtnTargets.forEach(btn => {
|
|
65
|
+
btn.classList.toggle('active', btn.dataset.device === device)
|
|
66
|
+
})
|
|
67
|
+
|
|
68
|
+
if (this.hasCustomWidthTarget) this.customWidthTarget.value = ''
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// Constrain the preview iframe to a user-defined width (px).
|
|
72
|
+
setCustomWidth () {
|
|
73
|
+
if (!this.hasViewportTarget || !this.hasCustomWidthTarget) return
|
|
74
|
+
|
|
75
|
+
const width = parseInt(this.customWidthTarget.value, 10)
|
|
76
|
+
|
|
77
|
+
this.deviceBtnTargets.forEach(btn => btn.classList.remove('active'))
|
|
78
|
+
this.viewportTarget.classList.remove(
|
|
79
|
+
'lato-cms-page-preview__viewport--tablet',
|
|
80
|
+
'lato-cms-page-preview__viewport--mobile'
|
|
81
|
+
)
|
|
82
|
+
|
|
83
|
+
if (Number.isFinite(width) && width > 0) {
|
|
84
|
+
this.viewportTarget.classList.add('lato-cms-page-preview__viewport--custom')
|
|
85
|
+
this.iframeTarget.style.maxWidth = `${width}px`
|
|
86
|
+
} else {
|
|
87
|
+
// Empty/invalid input → revert to desktop
|
|
88
|
+
this.viewportTarget.classList.remove('lato-cms-page-preview__viewport--custom')
|
|
89
|
+
this.iframeTarget.style.maxWidth = ''
|
|
90
|
+
this.deviceBtnTargets.forEach(btn => {
|
|
91
|
+
btn.classList.toggle('active', btn.dataset.device === 'desktop')
|
|
92
|
+
})
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
updateDimensions () {
|
|
97
|
+
if (!this.hasIframeTarget || !this.hasDimensionsTarget) return
|
|
98
|
+
|
|
99
|
+
const rect = this.iframeTarget.getBoundingClientRect()
|
|
100
|
+
this.dimensionsTarget.textContent = `${Math.round(rect.width)} × ${Math.round(rect.height)} px`
|
|
101
|
+
}
|
|
102
|
+
|
|
40
103
|
handleComponentChange (event) {
|
|
41
104
|
this.activeComponent = event.detail
|
|
42
105
|
this.postActiveComponent()
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
// ── Advanced editor mode ───────────────────────────────────────────────────────
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
// Full-screen editor is the only view on the page show: lock background scroll.
|
|
4
|
+
body.controller-pages.action-show {
|
|
4
5
|
overflow: hidden;
|
|
5
6
|
}
|
|
6
7
|
|
|
@@ -25,8 +26,11 @@ body.lato-cms-advanced-editor--open {
|
|
|
25
26
|
border: none !important;
|
|
26
27
|
border-radius: 0 !important;
|
|
27
28
|
|
|
28
|
-
|
|
29
|
-
|
|
29
|
+
// Preview viewport fills the space below the device toolbar
|
|
30
|
+
> .lato-cms-page-preview__viewport {
|
|
31
|
+
flex: 1 1 auto;
|
|
32
|
+
min-height: 0;
|
|
33
|
+
height: auto;
|
|
30
34
|
}
|
|
31
35
|
|
|
32
36
|
// No-preview placeholder fills full screen
|
|
@@ -95,6 +99,50 @@ body.lato-cms-advanced-editor--open {
|
|
|
95
99
|
}
|
|
96
100
|
}
|
|
97
101
|
|
|
102
|
+
// ── Page preview viewport (responsive device modes) ────────────────────────────
|
|
103
|
+
|
|
104
|
+
.lato-cms-page-preview__viewport {
|
|
105
|
+
display: flex;
|
|
106
|
+
justify-content: center;
|
|
107
|
+
align-items: stretch;
|
|
108
|
+
overflow: auto;
|
|
109
|
+
background: var(--bs-secondary-bg, #f1f3f5);
|
|
110
|
+
height: calc(100dvh - 230px);
|
|
111
|
+
|
|
112
|
+
iframe {
|
|
113
|
+
width: 100%;
|
|
114
|
+
height: 100%;
|
|
115
|
+
border: none;
|
|
116
|
+
display: block;
|
|
117
|
+
background: #fff;
|
|
118
|
+
transition: max-width 0.25s ease, max-height 0.25s ease;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
// Device modes: constrain to realistic viewport size and center vertically
|
|
122
|
+
&--tablet,
|
|
123
|
+
&--mobile,
|
|
124
|
+
&--custom {
|
|
125
|
+
align-items: center;
|
|
126
|
+
padding: 1rem;
|
|
127
|
+
|
|
128
|
+
iframe {
|
|
129
|
+
border: 1px solid var(--bs-border-color);
|
|
130
|
+
border-radius: 12px;
|
|
131
|
+
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
&--tablet iframe {
|
|
136
|
+
max-width: 768px;
|
|
137
|
+
max-height: 1024px;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
&--mobile iframe {
|
|
141
|
+
max-width: 375px;
|
|
142
|
+
max-height: 812px;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
98
146
|
// ── Component form status ──────────────────────────────────────────────────────
|
|
99
147
|
|
|
100
148
|
.lato-cms-component-form__status {
|
|
@@ -3,15 +3,55 @@
|
|
|
3
3
|
{ label: @page.title }
|
|
4
4
|
] %>
|
|
5
5
|
|
|
6
|
-
<div data-controller="lato-cms-advanced-editor">
|
|
7
|
-
<div class="row align-items-stretch lato-cms-advanced-editor__row
|
|
6
|
+
<div data-controller="lato-cms-advanced-editor" data-lato-cms-advanced-editor-list-path-value="<%= lato_cms.pages_path %>">
|
|
7
|
+
<div class="row align-items-stretch lato-cms-advanced-editor__row lato-cms-advanced-editor__row--active">
|
|
8
8
|
|
|
9
9
|
<%# ── Preview column ─────────────────────────────────────────────────── %>
|
|
10
|
-
<div class="col-12 col-lg-6 mb-4 lato-cms-advanced-editor__preview-col"
|
|
10
|
+
<div class="col-12 col-lg-6 mb-4 lato-cms-advanced-editor__preview-col">
|
|
11
11
|
<% if @page.frontend_url.present? %>
|
|
12
12
|
<div class="card h-100" style="overflow: hidden;" data-controller="lato-cms-page-preview">
|
|
13
|
-
<div class="card-
|
|
14
|
-
<
|
|
13
|
+
<div class="card-header d-flex justify-content-between align-items-center py-2 gap-2">
|
|
14
|
+
<div class="btn-group btn-group-sm" role="group">
|
|
15
|
+
<button type="button" class="btn btn-outline-secondary active"
|
|
16
|
+
title="<%= t('lato_cms.show_preview_desktop_tooltip') %>"
|
|
17
|
+
data-controller="lato-tooltip"
|
|
18
|
+
data-action="click->lato-cms-page-preview#setDevice"
|
|
19
|
+
data-device="desktop"
|
|
20
|
+
data-lato-cms-page-preview-target="deviceBtn">
|
|
21
|
+
<i class="bi bi-display"></i>
|
|
22
|
+
</button>
|
|
23
|
+
<button type="button" class="btn btn-outline-secondary"
|
|
24
|
+
title="<%= t('lato_cms.show_preview_tablet_tooltip') %>"
|
|
25
|
+
data-controller="lato-tooltip"
|
|
26
|
+
data-action="click->lato-cms-page-preview#setDevice"
|
|
27
|
+
data-device="tablet"
|
|
28
|
+
data-lato-cms-page-preview-target="deviceBtn">
|
|
29
|
+
<i class="bi bi-tablet"></i>
|
|
30
|
+
</button>
|
|
31
|
+
<button type="button" class="btn btn-outline-secondary"
|
|
32
|
+
title="<%= t('lato_cms.show_preview_mobile_tooltip') %>"
|
|
33
|
+
data-controller="lato-tooltip"
|
|
34
|
+
data-action="click->lato-cms-page-preview#setDevice"
|
|
35
|
+
data-device="mobile"
|
|
36
|
+
data-lato-cms-page-preview-target="deviceBtn">
|
|
37
|
+
<i class="bi bi-phone"></i>
|
|
38
|
+
</button>
|
|
39
|
+
</div>
|
|
40
|
+
<div class="d-flex align-items-center gap-2">
|
|
41
|
+
<div class="input-group input-group-sm" style="width: 130px;">
|
|
42
|
+
<input type="number" class="form-control" min="320" max="3840" step="1"
|
|
43
|
+
placeholder="<%= t('lato_cms.show_preview_custom_width_placeholder') %>"
|
|
44
|
+
title="<%= t('lato_cms.show_preview_custom_width_tooltip') %>"
|
|
45
|
+
data-controller="lato-tooltip"
|
|
46
|
+
data-action="input->lato-cms-page-preview#setCustomWidth"
|
|
47
|
+
data-lato-cms-page-preview-target="customWidth">
|
|
48
|
+
<span class="input-group-text">px</span>
|
|
49
|
+
</div>
|
|
50
|
+
<span class="badge text-bg-light font-monospace" data-lato-cms-page-preview-target="dimensions">—</span>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="lato-cms-page-preview__viewport" data-lato-cms-page-preview-target="viewport">
|
|
54
|
+
<iframe src="<%= @page.frontend_url %>" data-lato-cms-page-preview-target="iframe"></iframe>
|
|
15
55
|
</div>
|
|
16
56
|
</div>
|
|
17
57
|
<% else %>
|
|
@@ -39,20 +79,16 @@
|
|
|
39
79
|
<span class="vr"></span>
|
|
40
80
|
<%= lato_cms_page_actions_dropdown(@page, show_edit: lato_cms_admin?, show_translations: lato_cms_admin?, show_delete: lato_cms_admin?, hide_show: true) %>
|
|
41
81
|
<span class="vr"></span>
|
|
42
|
-
<button class="btn btn-sm btn-outline-primary
|
|
82
|
+
<button class="btn btn-sm btn-outline-primary"
|
|
43
83
|
title="<%= t('lato_cms.show_hide_panel_tooltip') %>"
|
|
44
84
|
data-controller="lato-tooltip"
|
|
45
|
-
data-action="click->lato-cms-advanced-editor#toggleSidebar"
|
|
46
|
-
data-lato-cms-advanced-editor-target="collapseBtn">
|
|
85
|
+
data-action="click->lato-cms-advanced-editor#toggleSidebar">
|
|
47
86
|
<i class="bi bi-layout-sidebar-reverse"></i>
|
|
48
87
|
</button>
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
data-lato-cms-advanced-editor-target="toggleBtn">
|
|
54
|
-
<i class="bi bi-fullscreen"></i>
|
|
55
|
-
</button>
|
|
88
|
+
<%= link_to lato_cms.pages_path, class: 'btn btn-sm btn-outline-danger',
|
|
89
|
+
title: t('lato_cms.show_back_to_list_tooltip'), data: { controller: 'lato-tooltip' } do %>
|
|
90
|
+
<i class="bi bi-box-arrow-left"></i>
|
|
91
|
+
<% end %>
|
|
56
92
|
</div>
|
|
57
93
|
</div>
|
|
58
94
|
<div class="card-body" style="overflow-y: auto; max-height: calc(100dvh - 230px);">
|
data/config/locales/en.yml
CHANGED
|
@@ -47,9 +47,14 @@ en:
|
|
|
47
47
|
show_no_preview_description: Set the <strong>Frontend URL</strong> to see the page preview.
|
|
48
48
|
show_edit_settings_cta: Edit page settings
|
|
49
49
|
show_editor_title: Editor
|
|
50
|
-
show_advanced_editor_tooltip: Advanced editor
|
|
51
50
|
show_hide_panel_tooltip: Hide panel
|
|
52
51
|
show_show_editor_panel_tooltip: Show editor panel
|
|
52
|
+
show_back_to_list_tooltip: Back to pages
|
|
53
|
+
show_preview_desktop_tooltip: Desktop
|
|
54
|
+
show_preview_tablet_tooltip: Tablet
|
|
55
|
+
show_preview_mobile_tooltip: Mobile
|
|
56
|
+
show_preview_custom_width_tooltip: Custom width
|
|
57
|
+
show_preview_custom_width_placeholder: Width
|
|
53
58
|
show_no_template_title: No template assigned
|
|
54
59
|
show_no_template_description: Assign a template to start editing fields.
|
|
55
60
|
show_template_unavailable: "The template <strong>%{template_id}</strong> is no longer available. Please assign a different template."
|
data/config/locales/it.yml
CHANGED
|
@@ -47,9 +47,14 @@ it:
|
|
|
47
47
|
show_no_preview_description: Imposta il <strong>URL Frontend</strong> per visualizzare l'anteprima della pagina.
|
|
48
48
|
show_edit_settings_cta: Modifica impostazioni pagina
|
|
49
49
|
show_editor_title: Editor
|
|
50
|
-
show_advanced_editor_tooltip: Editor avanzato
|
|
51
50
|
show_hide_panel_tooltip: Nascondi pannello
|
|
52
51
|
show_show_editor_panel_tooltip: Mostra pannello editor
|
|
52
|
+
show_back_to_list_tooltip: Torna alle pagine
|
|
53
|
+
show_preview_desktop_tooltip: Desktop
|
|
54
|
+
show_preview_tablet_tooltip: Tablet
|
|
55
|
+
show_preview_mobile_tooltip: Mobile
|
|
56
|
+
show_preview_custom_width_tooltip: Larghezza personalizzata
|
|
57
|
+
show_preview_custom_width_placeholder: Larghezza
|
|
53
58
|
show_no_template_title: Nessun template assegnato
|
|
54
59
|
show_no_template_description: Assegna un template per iniziare a modificare i campi.
|
|
55
60
|
show_template_unavailable: "Il template <strong>%{template_id}</strong> non e piu disponibile. Assegna un template diverso."
|
data/lib/lato_cms/version.rb
CHANGED