formstrap 0.3.0 → 0.3.1
Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2d52dd192e41d84f75bc6be46186bd8a5739ab34f72b8a03a7f57a2518024356
|
4
|
+
data.tar.gz: 21985d08ac6f4837e06385a0de891e0785366322f8504a537f22a89d397903aa
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: d4e86b30d1f485050c98c72ef426d3590624544e86675b41efe409382595d8f121878b437cf5fdb7ff8dc7aef71dd11c5f689b3bae73d805d1011f6c68cd965b
|
7
|
+
data.tar.gz: 1f04bdc357480984893120ef11166a2c62ade2e80ad793d49814a550f5e35099fd559ca05f57070ce51a166691a1c4c9a916fedd357b29f38c41b563e3c15601
|
@@ -18,6 +18,7 @@ export default class extends Controller {
|
|
18
18
|
this.iframeTarget.addEventListener('load', () => {
|
19
19
|
this.hideLoader()
|
20
20
|
this.resizeIframe()
|
21
|
+
this.autoResizeIframe()
|
21
22
|
})
|
22
23
|
|
23
24
|
// Offcanvas closes
|
@@ -28,6 +29,22 @@ export default class extends Controller {
|
|
28
29
|
})
|
29
30
|
}
|
30
31
|
|
32
|
+
autoResizeIframe () {
|
33
|
+
// eslint-disable-next-line no-undef
|
34
|
+
const observer = new MutationObserver((mutations) => {
|
35
|
+
mutations.forEach((mutation) => {
|
36
|
+
this.resizeIframe()
|
37
|
+
})
|
38
|
+
})
|
39
|
+
|
40
|
+
// Target the body of the iframe for observing
|
41
|
+
const innerDoc = this.iframeTarget.contentWindow.document
|
42
|
+
observer.observe(innerDoc.body, {
|
43
|
+
childList: true, // Listen for additions/removals of child nodes
|
44
|
+
subtree: true // Listen for changes in the whole subtree
|
45
|
+
})
|
46
|
+
}
|
47
|
+
|
31
48
|
showLoader () {
|
32
49
|
this.loaderTarget.classList.remove('d-none')
|
33
50
|
}
|
@@ -141,7 +158,7 @@ export default class extends Controller {
|
|
141
158
|
scaleFactor () {
|
142
159
|
const width = this.iframeWrapperTarget.getBoundingClientRect().width
|
143
160
|
const viewportWidth = window.innerWidth
|
144
|
-
return (width / viewportWidth).toFixed(1)
|
161
|
+
return parseFloat((width / viewportWidth).toFixed(1))
|
145
162
|
}
|
146
163
|
|
147
164
|
// Replace the body of the iframe with the new content
|
@@ -153,11 +170,21 @@ export default class extends Controller {
|
|
153
170
|
// Dynamically resize the iFrame to fit its content
|
154
171
|
resizeIframe () {
|
155
172
|
const scaleFactor = this.scaleFactor()
|
156
|
-
const iframeContentHeight = this.
|
173
|
+
const iframeContentHeight = this.iFrameContentHeight()
|
157
174
|
const iframeHeight = iframeContentHeight * scaleFactor
|
158
|
-
|
175
|
+
|
176
|
+
this.iframeTarget.style.height = `${iframeContentHeight.toFixed()}px`
|
159
177
|
this.iframeTarget.style.opacity = 1
|
160
|
-
this.iframeWrapperTarget.style.height = iframeHeight
|
178
|
+
this.iframeWrapperTarget.style.height = `${iframeHeight.toFixed()}px`
|
179
|
+
}
|
180
|
+
|
181
|
+
iFrameContentHeight () {
|
182
|
+
const firstElement = this.iframeTarget.contentWindow.document.body.firstElementChild
|
183
|
+
const firstElementStyle = window.getComputedStyle(firstElement)
|
184
|
+
|
185
|
+
const height = firstElement.scrollHeight
|
186
|
+
const margins = parseInt(firstElementStyle.marginTop) + parseInt(firstElementStyle.marginBottom)
|
187
|
+
return height + margins
|
161
188
|
}
|
162
189
|
|
163
190
|
getAuthenticityToken () {
|
@@ -11308,6 +11308,7 @@ var nested_preview_controller_default = class extends Controller {
|
|
11308
11308
|
this.iframeTarget.addEventListener("load", () => {
|
11309
11309
|
this.hideLoader();
|
11310
11310
|
this.resizeIframe();
|
11311
|
+
this.autoResizeIframe();
|
11311
11312
|
});
|
11312
11313
|
this.offcanvasTarget.addEventListener("hide.bs.offcanvas", (event) => {
|
11313
11314
|
if (!this.update()) {
|
@@ -11315,6 +11316,18 @@ var nested_preview_controller_default = class extends Controller {
|
|
11315
11316
|
}
|
11316
11317
|
});
|
11317
11318
|
}
|
11319
|
+
autoResizeIframe() {
|
11320
|
+
const observer = new MutationObserver((mutations) => {
|
11321
|
+
mutations.forEach((mutation) => {
|
11322
|
+
this.resizeIframe();
|
11323
|
+
});
|
11324
|
+
});
|
11325
|
+
const innerDoc = this.iframeTarget.contentWindow.document;
|
11326
|
+
observer.observe(innerDoc.body, {
|
11327
|
+
childList: true,
|
11328
|
+
subtree: true
|
11329
|
+
});
|
11330
|
+
}
|
11318
11331
|
showLoader() {
|
11319
11332
|
this.loaderTarget.classList.remove("d-none");
|
11320
11333
|
}
|
@@ -11396,7 +11409,7 @@ var nested_preview_controller_default = class extends Controller {
|
|
11396
11409
|
scaleFactor() {
|
11397
11410
|
const width = this.iframeWrapperTarget.getBoundingClientRect().width;
|
11398
11411
|
const viewportWidth = window.innerWidth;
|
11399
|
-
return (width / viewportWidth).toFixed(1);
|
11412
|
+
return parseFloat((width / viewportWidth).toFixed(1));
|
11400
11413
|
}
|
11401
11414
|
updatePreview(html) {
|
11402
11415
|
this.iframeTarget.contentWindow.document.body.innerHTML = html;
|
@@ -11404,11 +11417,18 @@ var nested_preview_controller_default = class extends Controller {
|
|
11404
11417
|
}
|
11405
11418
|
resizeIframe() {
|
11406
11419
|
const scaleFactor = this.scaleFactor();
|
11407
|
-
const iframeContentHeight = this.
|
11420
|
+
const iframeContentHeight = this.iFrameContentHeight();
|
11408
11421
|
const iframeHeight = iframeContentHeight * scaleFactor;
|
11409
|
-
this.iframeTarget.style.height = iframeContentHeight
|
11422
|
+
this.iframeTarget.style.height = `${iframeContentHeight.toFixed()}px`;
|
11410
11423
|
this.iframeTarget.style.opacity = 1;
|
11411
|
-
this.iframeWrapperTarget.style.height = iframeHeight
|
11424
|
+
this.iframeWrapperTarget.style.height = `${iframeHeight.toFixed()}px`;
|
11425
|
+
}
|
11426
|
+
iFrameContentHeight() {
|
11427
|
+
const firstElement = this.iframeTarget.contentWindow.document.body.firstElementChild;
|
11428
|
+
const firstElementStyle = window.getComputedStyle(firstElement);
|
11429
|
+
const height = firstElement.scrollHeight;
|
11430
|
+
const margins = parseInt(firstElementStyle.marginTop) + parseInt(firstElementStyle.marginBottom);
|
11431
|
+
return height + margins;
|
11412
11432
|
}
|
11413
11433
|
getAuthenticityToken() {
|
11414
11434
|
const tokenTag = document.querySelector('meta[name="csrf-token"]');
|
@@ -2,7 +2,7 @@
|
|
2
2
|
<!-- Preview placeholder -->
|
3
3
|
<div class="nested-preview-iframe-wrapper position-relative" role="button" data-nested-preview-target="iframeWrapper" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-<%= form.options[:child_index] %>" aria-controls="offcanvasRight" data-turbo-cache="false">
|
4
4
|
<iframe src="<%= url %>" class="pe-none" data-nested-preview-target="iframe"></iframe>
|
5
|
-
<div data-nested-preview-target="loader" class="nested-preview-loader
|
5
|
+
<div data-nested-preview-target="loader" class="nested-preview-loader">
|
6
6
|
<div class="spinner-grow text-secondary" role="status">
|
7
7
|
<span class="visually-hidden">Loading...</span>
|
8
8
|
</div>
|
@@ -18,7 +18,7 @@
|
|
18
18
|
<div class="offcanvas-body">
|
19
19
|
|
20
20
|
<div class="alert alert-danger d-none" data-nested-preview-target="error">
|
21
|
-
|
21
|
+
<%= t(".error") %>
|
22
22
|
</div>
|
23
23
|
|
24
24
|
<!-- Row content -->
|
data/lib/formstrap/version.rb
CHANGED
data/package.json
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: formstrap
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.3.
|
4
|
+
version: 0.3.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Jef Vlamings
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2024-03-
|
11
|
+
date: 2024-03-18 00:00:00.000000000 Z
|
12
12
|
dependencies: []
|
13
13
|
description: An extensive Bootstrap form library to power your Ruby On Rails application.
|
14
14
|
email:
|