Lines 307-357
Link Here
|
307 |
</div> <!-- /.col-sm-9 --> |
307 |
</div> <!-- /.col-sm-9 --> |
308 |
|
308 |
|
309 |
</div> <!-- /.row --> |
309 |
</div> <!-- /.row --> |
310 |
<div class="row w-25 m-auto p-4 border border-4 border-warning br-4 rounded text-center"> |
|
|
311 |
<h1>🚧 Static Page with Vue Components 🚧</h1> |
312 |
|
313 |
<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> |
314 |
</div> <!-- /.row --> |
315 |
<div class="row w-25 m-auto p-4 border border-4 border-warning br-5 rounded text-center mt-4"> |
316 |
<p> |
317 |
<span>Uncomment me in <span class="font-monospace">intranet-main.tt</span> 👇</span><br> |
318 |
<span class="font-monospace text-danger">-<!-- <hello-world></hello-world> --></span><br> |
319 |
<span class="font-monospace text-success">+<hello-world></hello-world></span> |
320 |
</p> |
321 |
<!-- <hello-world></hello-world> --> |
322 |
</div> <!-- /.row --> |
323 |
|
324 |
<div class="row w-25 m-auto p-4 border border-4 border-warning br-5 rounded text-center mt-4"> |
325 |
<dialog-island id="surprise"></dialog-island> |
326 |
<button id="surprise-button" class="btn btn-primary">Click me for a surprise!</button> |
327 |
</div> |
328 |
|
310 |
|
329 |
[% MACRO jsinclude BLOCK %] |
311 |
[% MACRO jsinclude BLOCK %] |
330 |
[% INCLUDE 'calendar.inc' %] |
312 |
[% INCLUDE 'calendar.inc' %] |
331 |
[% Asset.js("js/vue/dist/islands.js", "init" => "1") | $raw %] |
313 |
|
332 |
<!-- |
|
|
333 |
[% SET islands = Asset.js("js/vue/dist/islands.esm.js").match('(src="([^"]+)")').1 %] |
334 |
<script src="[% islands %]" type="module"></script> |
335 |
<script type="module"> |
336 |
import { hydrate } from "[% islands %]"; |
337 |
hydrate(); |
338 |
</script> |
339 |
--> |
340 |
<script> |
314 |
<script> |
341 |
var MSG_CONFIRM_DELETE = _("Are you sure you want to delete this news item? This cannot be undone."); |
315 |
var MSG_CONFIRM_DELETE = _("Are you sure you want to delete this news item? This cannot be undone."); |
342 |
$(document).ready(function(){ |
316 |
$(document).ready(function(){ |
343 |
$(".news_delete").on("click", function(){ |
317 |
$(".news_delete").on("click", function(){ |
344 |
return confirmDelete(MSG_CONFIRM_DELETE); |
318 |
return confirmDelete(MSG_CONFIRM_DELETE); |
345 |
}); |
319 |
}); |
346 |
|
|
|
347 |
setTimeout(() => { |
348 |
const [firstHelloIslandsElement] = document.getElementsByTagName("hello-islands"); |
349 |
firstHelloIslandsElement.message = 'This is a delayed update to the message attribute of the web commponent.' |
350 |
}, 2000); |
351 |
|
352 |
$("#surprise-button").on("click", () => { |
353 |
$("#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>`); |
354 |
}); |
355 |
}); |
320 |
}); |
356 |
</script> |
321 |
</script> |
357 |
[% END %] |
322 |
[% END %] |