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