marcus-at-localhost

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.

marcus-at-localhost

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')

marcus-at-localhost

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'))

marcus-at-localhost

#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()) {

marcus-at-localhost

#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()) {

marcus-at-localhost

#htmx #kirby

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

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

marcus-at-localhost

//@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) => {

marcus-at-localhost

Timezones

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

1. Save timestamp in GMT, use JavaScript to get user timezone from browser settings and display dynamicall on website (see code samples)
2. 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

marcus-at-localhost

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' => __DIR__ . '/blueprints/form.yml',

marcus-at-localhost

Bla

• Mark
• Down