|
Lines 331-384
Link Here
|
| 331 |
<!-- /.row --> |
331 |
<!-- /.row --> |
| 332 |
</div> |
332 |
</div> |
| 333 |
<!-- /#container-main.container-fluid --> |
333 |
<!-- /#container-main.container-fluid --> |
| 334 |
<div class="row w-25 m-auto p-4 border border-4 border-warning br-4 rounded text-center"> |
|
|
| 335 |
<h1>🚧 Static Page with Vue Components 🚧</h1> |
| 336 |
|
| 337 |
<hello-islands message="This is an attribute on the web component, that's bound to a prop in the Vue component. Cool, right?" color="dodgerblue"></hello-islands> |
| 338 |
</div> |
| 339 |
<!-- /.row --> |
| 340 |
<div class="row w-25 m-auto p-4 border border-4 border-warning br-5 rounded text-center mt-4"> |
| 341 |
<p> |
| 342 |
<span>Uncomment me in <span class="font-monospace">intranet-main.tt</span> 👇</span><br /> |
| 343 |
<span class="font-monospace text-danger">-<!-- <hello-world></hello-world> --></span><br /> |
| 344 |
<span class="font-monospace text-success">+<hello-world></hello-world></span> |
| 345 |
</p> |
| 346 |
<!-- <hello-world></hello-world> --> |
| 347 |
</div> |
| 348 |
<!-- /.row --> |
| 349 |
|
| 350 |
<div class="row w-25 m-auto p-4 border border-4 border-warning br-5 rounded text-center mt-4"> |
| 351 |
<dialog-island id="surprise"></dialog-island> |
| 352 |
<button id="surprise-button" class="btn btn-primary">Click me for a surprise!</button> |
| 353 |
</div> |
| 354 |
|
| 355 |
[% MACRO jsinclude BLOCK %] |
334 |
[% MACRO jsinclude BLOCK %] |
| 356 |
[% INCLUDE 'calendar.inc' %] |
335 |
[% INCLUDE 'calendar.inc' %] |
| 357 |
[% Asset.js("js/vue/dist/islands.js", "init" => "1") | $raw %] |
|
|
| 358 |
<!-- |
| 359 |
[% SET islands = Asset.js("js/vue/dist/islands.esm.js").match('(src="([^"]+)")').1 %] |
| 360 |
<script src="[% islands %]" type="module"> |
| 361 |
</script> |
| 362 |
<script type="module"> |
| 363 |
import { hydrate } from "[% islands %]"; |
| 364 |
hydrate(); |
| 365 |
</script> |
| 366 |
--> |
| 367 |
<script> |
336 |
<script> |
| 368 |
var MSG_CONFIRM_DELETE = _("Are you sure you want to delete this news item? This cannot be undone."); |
337 |
var MSG_CONFIRM_DELETE = _("Are you sure you want to delete this news item? This cannot be undone."); |
| 369 |
$(document).ready(function () { |
338 |
$(document).ready(function () { |
| 370 |
$(".news_delete").on("click", function () { |
339 |
$(".news_delete").on("click", function () { |
| 371 |
return confirmDelete(MSG_CONFIRM_DELETE); |
340 |
return confirmDelete(MSG_CONFIRM_DELETE); |
| 372 |
}); |
341 |
}); |
| 373 |
|
|
|
| 374 |
setTimeout(() => { |
| 375 |
const [firstHelloIslandsElement] = document.getElementsByTagName("hello-islands"); |
| 376 |
firstHelloIslandsElement.message = "This is a delayed update to the message attribute of the web commponent."; |
| 377 |
}, 2000); |
| 378 |
|
| 379 |
$("#surprise-button").on("click", () => { |
| 380 |
$("#surprise").attr("warning", `<span>Yes, this is <span class="font-monospace">Dialog.vue</span> (in a wrapper component)!</span><span class="d-none">${Math.random()}</span>`); |
| 381 |
}); |
| 382 |
}); |
342 |
}); |
| 383 |
</script> |
343 |
</script> |
| 384 |
[% END %] |
344 |
[% END %] |