Skip to content

Instantly share code, notes, and snippets.

View dgrammatiko's full-sized avatar
💭
👀 4 my next gig

Dimitris Grammatikogiannis dgrammatiko

💭
👀 4 my next gig
View GitHub Profile

Using Bootstrap in Joomla 4

Joomla 4 introduces a modular approach for interactive components

  • What is a modular approach?
  • The functionality is broken down into individual components, files. There is no one file approach as it was with Bootstrap in Joomla 3. This was done for efficiency and performance gains (send only the code that is needed instead of delivering everything in case some page will need so component).

How to deal with Interactive components

  • Load what you need per case! There are helper functions that will help you achieve this and, it is dead easy just call the function with the appropriate arguments.
/**
* Fetch PHP versions
* Author Dimitris Grammatikogiannis
* License MIT
*/
// Needs "@octokit/rest" installed!
const { Octokit } = require("@octokit/rest");
const { writeFile, readFile } = require('fs/promises');
// Adjust this
/**
* Copyright Dimitris Grammatikogiannis
* Lisence MIT
*
*/
const toolbarActionButton = document.querySelector('#toolbar-status-group');
const dropdown = toolbarActionButton.querySelector('.dropdown-menu');
const dropdownButton = toolbarActionButton.querySelector('.dropdown-toggle');
var BROWSER_DEFAULT = 'BROWSER_DEFAULT';
var languages = {
// not a language, used to represent absence of a language defaulting to browser language
BROWSER_DEFAULT: {
name: 'Browser default',
nativeName: 'Browser default'
},
ab: {
name: 'Abkhaz',
nativeName: 'аҧсуа'
@dgrammatiko
dgrammatiko / index.html
Last active August 26, 2020 18:14
Simple Joomla 4 API consumption
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Joomla 4 API DEMO</title>
</head>
<body>
<div id="auth"></div>
@dgrammatiko
dgrammatiko / easings.css
Created July 21, 2020 10:31 — forked from argyleink/easings.css
Handy CSS properties for easing functions
:root {
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
@dgrammatiko
dgrammatiko / configuration.h
Last active May 20, 2020 21:00
Ender 5, skr 1.3, BLTouch, Nimble, E3D V6
/**
* Marlin 3D Printer Firmware
* Copyright (c) 2020 MarlinFirmware [https://github.com/MarlinFirmware/Marlin]
*
* Based on Sprinter and grbl.
* Copyright (c) 2011 Camiel Gubbels / Erik van der Zalm
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
@dgrammatiko
dgrammatiko / analytics.js
Last active May 15, 2022 00:15 — forked from janispritzkau/analytics.js
Minimal Google Analytics script in modern javascript (677 bytes minified)
((document, location, navigator) => {
const domain = location.hostname.split(".")
const match = document.cookie.match(/(^|; ?)_ga=GA1\.\d\.(\d+\.\d+)(;|$)/)
// use existing client id or generate one
const cid = match ? match[2] : ~~(2147483648 * Math.random()) + "." + ~~(Date.now() / 1000)
// set cookie at highest possible domain level
for (let i = domain.length; i--;) {
const cookie = `_ga=GA1.${domain.length - i}.${cid}`
@dgrammatiko
dgrammatiko / TinyMCE.js
Last active May 4, 2020 17:39
Joomla 4 tinyMCE DnD using own handler
/**
* @copyright Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
((tinyMCE, Joomla, window, document) => {
'use strict';
Joomla.JoomlaTinyMCE = {
/**
/* eslint-disable require-jsdoc */
export class BaseElement extends LitElement {
constructor() {
super();
}
createRenderRoot() {
// Disable shadow DOM.