Danny Blue deebloo

👋

Hello!

Trying to make computers do thing as a Principal Software Engineer at @Noctua-Technology. Views are my own

deebloo / joist-handler-example.ts

Last active August 30, 2020 00:39

	import { component, State, handle, JoistElement, get } from '@joist/component';
	import { template, html } from '@joist/component/lit-html';

	@component<number>({
	tagName: 'app-root',
	state: 0,
	render: template(({ state, run }) => {
	return html`
	<button @click=${run('dec')}>-</button>
	<span>${state}</span>

deebloo / element-styles.ts

Last active August 23, 2020 17:31

	import { component, JoistElement } from '@joist/component';
	import { template, html } from '@joist/component/lit-html';

	@component({
	tagName: 'app-root',
	shadowDom: 'open',
	state: {
	title: 'Hello World'
	},
	styles: [`

deebloo / component-state-async.ts

Last active August 23, 2020 23:24

	import { component, State, JoistElement, get } from '@joist/component';
	import { template, html } from '@joist/component/lit-html';

	@component<number>({
	tagName: 'my-counter',
	state: 'Hello',
	render: template(({ state }) => html`${state}`)
	})
	class MyCounterElement extends JoistElement {
	@get(State)

deebloo / property-validators.ts

Created August 23, 2020 17:37

	import { component, property, JoistElement } from '@joist/component';

	function isString(val: unknown) {
	if (typeof val === 'string') {
	return null;
	}

	return { message: 'error' };
	}

deebloo / joist-handlers-1.ts

Last active August 26, 2020 14:47

	import { component, State, handle, JoistElement, get } from '@joist/component';
	import { template, html } from '@joist/component/lit-html';

	@component({
	tagName: 'my-counter',
	state: 0,
	render: template(({ state, run }) => {
	return html`
	<button @click=${run('decrement')}>-</button>
	<span>${state}</span>

deebloo / joist-handlers-2.ts

Last active August 26, 2020 15:27

	import { component, State, handle, JoistElement, get } from '@joist/component';
	import { template, html } from '@joist/component/lit-html';

	@component({
	tagName: 'my-counter',
	state: 0,
	render: template(({ state, run }) => {
	return html`
	<button @click=${run('dec_btn_clicked', -1)}>-</button>
	<span>${state}</span>

deebloo / joist-handlers-3.ts

Last active August 26, 2020 15:32

	import { component, State, handle, JoistElement, get } from '@joist/component';
	import { template, html } from '@joist/component/lit-html';

	@component({
	tagName: 'my-counter',
	state: 0,
	render: template(({ state, run }) => {
	return html`
	<button @click=${run('dec_btn_clicked', -1)}>-</button>
	<span>${state}</span>

deebloo / joist-handlers-on-complete.ts

Created September 1, 2020 00:59

	import { component, State, handle, JoistElement, get, HandlerCtx } from '@joist/component';
	import { template, html } from '@joist/component/lit-html';

	@component({
	tagName: 'my-counter',
	state: 0,
	render: template(({ state, run }) => {
	return html`
	<button @click=${run('dec_btn_clicked', -1)}>-</button>
	<span>${state}</span>

deebloo / focus-trap.ts

Created August 12, 2021 13:01

A utility class for creating and interacting with a focus trap. (ex. keep focus in a modal)

	export function getFocusableEls(element: HTMLElement) {
	return element.querySelectorAll<HTMLElement>(
	'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'
	);
	}

	export class FocusTrap {
	private focusableEls!: NodeListOf<HTMLElement>;
	private firstFocusableEl?: HTMLElement;
	private lastFocusableEl?: HTMLElement;

deebloo / scroll-helpers.ts

Last active September 16, 2021 18:32

	// Freezes document scrolling without remove scrollbar.
	// This gets rid of the annoying jump that happens when you set the body overflow to hidden
	// Maintains scroll position on the page
	export function freezeScroll() {
	document.body.style.top = -document.documentElement.scrollTop + 'px';
	document.body.style.position = 'fixed';
	document.body.style.left = '0';
	document.body.style.right = '0';
	document.body.style.overflowY = 'scroll';
	}