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 %] |