A simple element template chooser for properties-panel >= 1

Last update: May 30, 2022

Overview

`@bpmn-io/element-template-chooser`

A simple element template chooser for properties-panel >= 1.

Usage

import BpmnModeler from 'bpmn-js/lib/Modeler';

import ElementTemplateChooserModule from '@bpmn-io/element-template-chooser';

const modeler = new BpmnModeler({
  additionalModules: [
    ...
    ElementTemplateChooserModule
  ],
  ...
});

// load templates and choose via the properties panel
modeler.on('elementTemplates.errors', event => {
  const { errors } = event;

  showTemplateErrors(errors);
});

modeler.get('elementTemplatesLoader').setTemplates(ELEMENT_TEMPLATES_JSON);

// alternatively, choose programmatically
// from a given list of element templates
const task = modeler.get('elementRegistry').get('MyTask');

const task = await (
  modeler.get('elementTemplateChooser').choose(task, ELEMENT_TEMPLATES_JSON)
);

Checkout ./example for a full featured integration example.

Run locally

To run the example app, execute:

npm start

License

MIT

Comments

Enable the ability to group templates

Is your feature request related to a problem? Please describe

When selecting a template in the element template chooser for a larger list of 60 or 90 templates the cognitive load for new users in particular is rather high orienting and finding the desired template.

Describe the solution you'd like

It would be helpful to introduce some sort of optional grouping functionality to enable the ability to group templates based on to defined criteria in the list (for example semantically or based on mutual providers).

Group 1 Template 2 Template 6 Template 9 Group 2 Template 3 Template 5 Template 10

The groups shouldn't be selectable by the mouse or keyboard focus. That way the list would be structured and easier to digest and with the search box on top you are able to narrow the selection down even further.

Describe alternatives you considered

Only show a subset of elements initially, and indicate there is more available if you search (https://github.com/bpmn-io/element-template-chooser/issues/5#issuecomment-1076125238).
enhancement

opened by rpkoller 23

TypeError: e.scrollIntoViewIfNeeded is not a function

Describe the Bug

Just updated to the latest version 0.0.3 - great work everyone and big thank you!

The only issue: when clicking on "+ Select" for a template, the template chooser opens but the browser console outputs this exception:

Uncaught (in promise) TypeError: e.scrollIntoViewIfNeeded is not a function
    AR https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    SR https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    __h https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    __c https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    __c https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    JA https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    A https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    $A https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    FA https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    setState https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    __ https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    AR https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    SR https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    wR https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    setTimeout handler*n https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    diffed https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    diffed https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    XA https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    HA https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    __e https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    XA https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    HA https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    __e https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    XA https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    HA https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    XA https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    HA https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    XA https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    tR https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    _refresh https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:74
    open https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:82
    open https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:62
    TR https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    r https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    _invokeListener https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    _invokeListeners https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    fire https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    onClick https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Wg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Gg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Jg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Jg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Yg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Fg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Yg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Fg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Yg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Fg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Yg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Fg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Jg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Yg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Fg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Jg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Yg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Fg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Jg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Yg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Fg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Yg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Fg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Jg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Yg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Fg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Jg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Yg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Fg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Yg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Fg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2

Selecting a template with the mouse works, but keyboard interaction doesn't. I can't scroll with the keyboard and search doesn't work either. Both is certainly a follow-up error off the exception.

Environment

Library versions:

bug

opened by jurgenhaas 5

When navigating a long list by the keyboard the list doesn't scroll
Describe the Bug For long lists https://github.com/bpmn-io/element-template-chooser/issues/3 has limited the height of the template chooser to prevent that the list extends below the fold. Problem is if you navigate the list by the cursor keys on the keyboard and you navigate down as soon as the last visible template is reached the focus disappears because the list doesn't scroll.

Steps to Reproduce

open the template chooser (in case you have more templates available than the height of the template chooser)

hit the down key until the focus area disappears

Expected Behavior the scroll position should mind the position of the focus area

Environment

Host (Browser/Node version), if applicable: Safari 13.1.2, Firefox 98.0.1

OS: MacOS 10.13.6

Library version: "@bpmn-io/element-template-chooser": "0.0.1"

bug a11y
opened by rpkoller 3
Update open() example in readme

The open method accepts only 1 argument, from https://github.com/bpmn-io/element-template-chooser/blob/af5579cf104d172f73a284dd752682fb1a96e14c/src/element-template-chooser/ElementTemplateChooser.js#L99

opened by compact 2

Chooser does not work with `element-templates` provider

Describe the Bug

When selecting a template, this exception is thrown in the browser console:

elementTemplate.select Error: no command handler registered for <propertiesPanel.zeebe.changeTemplate>
    _internalExecute https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    execute https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    _updateTemplate https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:49
    fR https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    promise callback*fR/< https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    r https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    _invokeListener https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    _invokeListeners https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    fire https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    onClick https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Wg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Gg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Jg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Jg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Xg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Vg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Xg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Vg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Xg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Vg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Xg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Vg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Jg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Xg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Vg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Jg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Xg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Vg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Jg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Xg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Vg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Xg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Vg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Jg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Xg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Vg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Jg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Xg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Vg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Xg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2
    Vg https://danse.dev.jurgenhaas.de/modules/contrib/bpmn_io/webpack/bpmn-modeller.js?v=8.7.1:2

That's because ElementTemplateChooser.prototype._updateTemplate should call propertiesPanel.camunda.changeTemplate instead of propertiesPanel.zeebe.changeTemplate

When replacing that, everything works perfectly.

Steps to Reproduce

Integrate the chooser alongside the Camunda Platform element-templates provider
Select template
Error is thrown

Expected Behavior

Chooser is working no matter which element templates provider is chosen. Cf. this comment.

bug

opened by jurgenhaas 1

Importing CSS files doesn't work

The script ElementTemplateChooser.js contains the following line:

import './ElementTemplateChooser.css';

When build a webpack, this throws this error:

ERROR in ./node_modules/@bpmn-io/element-template-chooser/lib/ElementTemplateChooser.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .bio-properties-panel {
|   --select-template-background-color: var(--color-blue-205-100-50);
|   --select-template-hover-background-color: var(--color-blue-205-100-45);
 @ ./node_modules/@bpmn-io/element-template-chooser/lib/ElementTemplateChooser.js 20:0-38
 @ ./node_modules/@bpmn-io/element-template-chooser/lib/index.js 7:0-62 13:35-57
 @ ./node_modules/@bpmn-io/element-template-chooser/index.js 1:0-32 1:0-32
 @ ./src/bpmn-modeller.js 9:0-77 21:8-36

Removing that line completely fixes this and adding the CSS to the HTML then shows the correct behavior.

bug

opened by jurgenhaas 1

Update to bpmn-js@11 (new popup menu foundations)
What is inside?

Build on top of new properties panel foundations

Remove most code

No user facing changes

BREAKING CHANGES

API changed to ElementTemplateChooser.open(element)
opened by nikku 0
Update UI

This updates the UI, incorporating a couple of fixes (#10), but also improvements on mouse + keyboard interaction, as well as grouping + search (#5).

Closes #10 Closes #5

opened by nikku 0
UI refresh

Refresh UI, provide pre-built distributio + fix basic issues:

Closes https://github.com/bpmn-io/element-template-chooser/issues/1, https://github.com/bpmn-io/element-template-chooser/issues/2, #6

opened by nikku 0
Template chooser grows out of the bottom screen border

Describe the Bug

When having lot's of templates, the chooser is too high and grows out of the screen at the bottom. This should be fixed with a scrollbar and I'm opening a PR to propose a fix for that.
bug

opened by jurgenhaas 0
The focus style for the element template chooser list view has a too low color contrast
Describe the Bug If you take a look at the screenshot on the projects description page (same is reproducible when actually using it) https://github.com/bpmn-io/element-template-chooser/blob/master/resources/screenshot.png you notice that the grey focus style for the template selected has a background color of #EDEEED while the background has #FEFFFE which leads to a color contrast ratio of 1.2:1 but the goal should be >= 3:1(WCAG21 SC 1.4.11). That way the focus isn't visible or makes it had for people with lower vision to determine which element among multiple elements has the keyboard focus (SC 2.4.7)

Environment

Library version: "@bpmn-io/element-template-chooser": "0.0.1"

bug backlog a11y
opened by rpkoller 8

Owner

bpmn.io

Rendering toolkits and editors for BPMN 2.0, CMMN, DMN, and forms.

GitHub

Gatsby-Formik-contact-form-with-backend-panel - Full working contact form with backend GUI panel.

Gatsby minimal starter ?? Quick start Create a Gatsby site. Use the Gatsby CLI to create a new site, specifying the minimal starter. # create a new Ga

1 Jan 2, 2022

A modern client panel for the Pterodactyl® panel, made by Wrible Development.

Dashboardsy A modern client panel for the Pterodactyl® panel, made by Wrible Development. Support Discord: https://discord.gg/zVcDkSZNu7 Screenshots S

23 Jan 1, 2023

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

3 May 18, 2022

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

4 May 3, 2022

Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

14 Jan 3, 2023

Math Calc is a simple algebra calculator with options for basic addition, subtraction, multiplication, and division as well as many more mathematical properties.

Math-Calc Math Calc is a simple algebra calculator with options for basic addition, subtraction, multiplication, and division as well as many more mat

1 Dec 25, 2021

This simple extension can automatically load NBN availability information for properties on realestate.com.au & domain.com.au including technology type, maximum line speed, and co-existance status if available.

NBN Availability Check Chrome Extension This simple extension can automatically load NBN availability information for properties on realestate.com.au

17 Aug 17, 2022

JavaScript micro-library: pass in an element and a callback and this will trigger when you click anywhere other than the element

Add a click listener to fire a callback for everywhere on the window except your chosen element. Installation run npm install @lukeboyle/when-clicked-

5 May 13, 2021

Simple customizable slide panel (without jQuery)

toolslide.js Minimalistic customizable slide panel (without jQuery) Table of contents Quick start Usage Examples Options Methods Events Browser suppor

5 May 23, 2022

A package to toggle properties of your HTML tags.

Toggler A package(atleast the code) to toggle properties of tags. I mostly use toggle classes while making a switch theme method, button interaction e

6 Jan 9, 2022

Download Notion pages as markdown and image files, preserving hierarchy and enabling workflow properties. Works with Docusaurus.

notion-pull notion-pull lets you use Notion as your editor for markdown-based static site generators like Docusaurus. Using Notion instead of raw mark

46 Jan 7, 2023

🧩 TypeScript utility type in order to ensure to return only properties (not methods) containing values in primitive types such as number or boolean (not Value Objects)

?? TypeScript Primitives type TypeScript utility type in order to ensure to return only properties (not methods) containing values in primitive types

82 Dec 7, 2022

A complete media query framework for CSS, to apply specific properties in specific screen

A complete media query framework for CSS, to apply specific properties in specific screen Note: Size of every media query is `50px, 100px, 150px, 200p

6 Aug 23, 2022

Extract CSS custom properties and a JavaScript config from Drupal's theme breakpoints

Drupal breakpoints to CSS To eliminate the need for different places for breakpoints and only maintain a single source of truth for those, this node_m

4 Nov 21, 2022

In this project, I built a to-do list app, which is inspired by the minimalist website. Build withHTML/CSS & JavaScript best practices: Correct use of tags, elements, properties and syntax.

Webpack Exercise In this project, I built a to-do list app, which is inspired by the minimalist website. Built With HTML/CSS & JavaScript best practic

3 Oct 11, 2022