Marcus marcus-at-localhost

All the ways to make a Web Component (native and Alpine.js) #webcomponents #alpinejs

https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/

const template = document.createElement('template');
template.innerHTML = `
  <style>
    * {
      font-size: 200%;
    }

HTMX and Bootstrap Toasts

Just a little demo how to use bootstraps toasts component with HTMX and custom triggers. Toasts are stackable and grouped by message (so the same message doesn't pop up several times, when already open.

A Pen by Marcus at Localhost on CodePen.

License.

V1

This listens for a HX-Trigger moGetBookmarkButton_ID event on the #bookmark_item_* element to trigger hx-get

kirby()->response()->header('HX-Trigger','moGetBookmarkButton_' . $product->id())
//kirby()->response()->header('HX-Trigger','moGetBookmarkButton_b2')

Just things I find, but not need right now #htmx

Trigger Third Party Behavior

bigskysoftware/htmx#1158 (comment)

htmx.onLoad(function (content) {
	content.querySelectorAll('[data-dismiss-target]').forEach(triggerEl => {
		const targetEl = document.querySelector(triggerEl.getAttribute('data-dismiss-target'))

#kirby #php

<?php

return function ($page, $pages, $kirby, $site) {
	/**
	 * Don't show old applications
	 */
	if ( $page-&gt;dateFrom()-&gt;toDate() &gt; time() || $page-&gt;dateTo()-&gt;toDate() &lt; time()) {

#wordpress #xquery #domdocument

theme-child/function.php

<?php
function callback($buffer) {
	
	// prevent ajax/json and admin stuff being mangled
	if (strpos(trim($buffer), '<') !== 0 || is_admin()) {

#htmx #kirby

if (kirby()->request()->is('POST')) {

	if(!kirby()->request()->header('HX-Request')){
		go('membersarea');
	}

Timezones

Two approaches to deal with timezones server- and client side.

Save timestamp in GMT, use JavaScript to get user timezone from browser settings and display dynamicall on website (see code samples)
Save timestamp in GMT, use JavaScript to detect user timezone from browser and store it. Also show a dropdown with all timezones for the user to choose from. Then use that to render DateTime on the server.

#js #date #datetime #intl #alpinejs

Retrieve Plugin Data #kirby #php

Eg. get a blueprint or a template path in a controller:

// index.php
Kirby::plugin('my/plugin', [
	'blueprints' => [
 'profile_form' =&gt; __DIR__ . '/blueprints/form.yml',

	//@see https://codepen.io/localhorst/pen/dyqbboY
	(function () {
	'use strict'
	if(location.hash){
	const triggerEl = document.querySelector(location.hash)
	bootstrap.Tab.getOrCreateInstance(triggerEl).show() // Select tab by name
	}

	const selectableTabList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tab"]'))
	selectableTabList.forEach((selectableTab) => {