Skip to content

Instantly share code, notes, and snippets.

@c-kick
c-kick / hnl.stickyStuck
Last active June 23, 2023 13:06
adds class 'stuck' to elements that are stuck. Uses Bootstraps' `position-sticky` class as a selector.
View hnl.stickyStuck
const stickes = document.body.querySelectorAll('.position-sticky');
window.addEventListener('scroll', function(){
stickes.forEach(function(el){
let stuck = false;
const rect = el.getBoundingClientRect();
if (window.getComputedStyle(el).bottom == 'auto') {
stuck = rect.top === parseInt(window.getComputedStyle(el).top, 10);
} else if (window.getComputedStyle(el).top == 'auto') {
stuck = rect.height + rect.top < window.innerHeight;
@c-kick
c-kick / debouncer.mjs
Created March 14, 2023 13:43
Rate-limiter/debouncer module for JavaScript. See https://code.hnldesign.nl/demo/hnl.debounce.html
View debouncer.mjs
/**
*
* debounceThis ES6 module v1.2 (03-2023)
* Debounces/rate-limits the provided function (callback)
*
* Example usage:
*
* import {debounceThis} from "debouncer.mjs";
*
* window.addEventListener('scroll', debounceThis((e)=> {
@c-kick
c-kick / doubleClickHandler.js
Last active May 12, 2023 12:03
doubleClickHandler - handles double-click events on elements
View doubleClickHandler.js
/**
* Handles the click event to detect single or double clicks.
* @param {MouseEvent} event - The click event object.
*/
function doubleClickHandler(event) {
const target = event.target;
if (new Date().getTime() - (target._lastTouch || 0) > 500) {
// Not a double click
target._lastTouch = new Date().getTime();
@c-kick
c-kick / hnl.isVisible.mjs
Created May 8, 2023 11:31
Check if an element is visible
View hnl.isVisible.mjs
/** isVisible
*
* Determines whether an element is visible within the (specified, or Window) viewport. Executes the callback based
* on that result. The callback is called with two parameters: a boolean that's true if the element is visible, along
* with the element's bounding box, including 'pageY' and 'pageX' which contain the element's position as relative to
* the whole document. Useful for scrolling into view.
*
* The viewport can be omitted, specified partially or completely.
*
* Usage: isVisible(myElement, callback, {viewport object});
@c-kick
c-kick / hnl.mobileConsole.js
Last active March 22, 2023 18:48
NOTE: V2 Released! Seehttps://github.com/c-kick/mobileConsole hnl.mobileConsole.js - extends JavaScript's console to display a visual console inside the webpage. Very usefull for debugging JS on mobile devices with no real console. Info and demo: http://www.hnldesign.nl/work/code/mobileconsole-javascript-console-for-mobile-devices/
View hnl.mobileConsole.js
/*!
*
* NEW VERSION AT https://github.com/c-kick/mobileConsole
*
* hnl.mobileConsole - javascript mobile console - v1.3.8 - 04/01/2021
* Adds html console to webpage. Especially useful for debugging JS on mobile devices.
* Supports 'log', 'trace', 'info', 'warn', 'error', 'group', 'groupEnd', 'table', 'assert', 'clear'
* Inspired by code by Jakub Fiala (https://gist.github.com/jakubfiala/8fe3461ab6508f46003d)
* Licensed under the MIT license
*
@c-kick
c-kick / hnl.debounce.v4.js
Last active March 12, 2023 17:42
JavaScript function prototype debouncer v4.1 - debounces functions that are prone to repetitive calling (on events such as mousewheel, orientationchange, resize, etc). Demo: https://code.hnldesign.nl/demo/hnl.debounce.html
View hnl.debounce.v4.js
/**
* JavaScript function prototype debouncer 4.3 - 2010-2022 hnldesign.nl - Klaas Leussink
* Demo: https://code.hnldesign.nl/demo/hnl.debounce.html
*
* Based on code by Paul Irish and the original debouncing function from John Hann
* http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
* Register deBouncer as a function prototype.
*
* All debounced variants of the function (depending on the supplied debouncing parameters (see below)
* are stored inside a 'dbObj' Object inside the debounced function.
@c-kick
c-kick / hnl.inertial.js
Created November 17, 2014 21:50
jQuery - Simulate Momentum Scrolling
View hnl.inertial.js
/**
* jQuery inertial Scroller v1.5
* (c)2013 hnldesign.nl
* This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/4.0/.
*
* More information: http://www.hnldesign.nl/work/code/momentum-scrolling-using-jquery/
*/
/*jslint browser: true*/
/*global $, jQuery*/
@c-kick
c-kick / hnl.collision.detection.js
Last active January 26, 2023 07:50
jQuery - Collision detection for absolute positioned elements
View hnl.collision.detection.js
/*!
* jQuery Collision Detection - v1.0 - 1/7/2014
* http://www.hnldesign.nl/work/code/collision-prevention-using-jquery/
*
* Copyright (c) 2014 HN Leussink
* Dual licensed under the MIT and GPL licenses.
*
* Example: http://code.hnldesign.nl/demo/hnl.collision.detection.html
*/
@c-kick
c-kick / zha_ikea_tradfri_4button_remote_color.yaml
Last active October 31, 2022 09:59 — forked from orcema/zha_ikea_tradfri_4button_remote_color.yaml
blueprint zha_ikea_tradfri_4button_remote_color
View zha_ikea_tradfri_4button_remote_color.yaml
#Blueprint by Klaas Leussink / hnldesign.nl (c) 2022
blueprint:
name: ZHA - IKEA TRADFRI - 4 Button Remote - Color Lights
source_url: https://gist.github.com/c-kick/299999c9512c4260fe6de1cd843efdde
description: This automation simulates the use of the IKEA TRADFRI remote control
connected through ZHA. Original blueprint by orcema, modified by hnldesign/c-kick,
- added brightness and color control inputs (for usage with IKEA TRADFRI bulbs)
- more fine-grained dimming
- color_temp changing
domain: automation
@c-kick
c-kick / schedule_booleans.yaml
Last active October 31, 2022 09:59
Automation which uses schedules to set two indicators (booleans): a morning schedule and a home indicator. Also provides schedule/calendar overrides. See description for usage.
View schedule_booleans.yaml
#Blueprint by Klaas Leussink / hnldesign.nl (c) 2022
blueprint:
name: Set schedule-related booleans
source_url: https://gist.github.com/c-kick/b4dcdae9d9fa85ca8c51cdedd7293bf5
description: >-
This automation uses schedules to set two indicators (booleans): a morning schedule (useful for short morning routines on working days) and a home indicator (useful for indicating people are home, until they go to bed). It also includes an option to use a holiday calendar, which sets the home indicator on the specified start and end times if the current day is a holiday. Another option is a vacation override, which - when set to active - ignores *all* schedules/calendars and uses the specified 'vacation schedule' instead.
domain: automation
input:
morning_routine_schedules:
name: Morning schedule(s)