Skip to content

Instantly share code, notes, and snippets.

Avatar
🛠️
Working on Mithril type stuff

Barney Carroll barneycarroll

🛠️
Working on Mithril type stuff
View GitHub Profile
@barneycarroll
barneycarroll / cor.js
Created Oct 26, 2021
Generators as generic sub-routines
View cor.js
‎‎
@barneycarroll
barneycarroll / unfuckReact.js
Last active Oct 25, 2021
React components are so fucking stupid, it's unbelievable. 3 months with this library version 15 and the glaring stupidity of the API just keeps coming in waves. Fixing some of this stuff – just for the sake of internal consistency – would have been so simple. The number of hoops you're required to jump through for trivial shit. Ugh.
View unfuckReact.js
const mounted = new WeakSet()
export default (component, displayName = component.displayName || component.name || 'React.Component') => {
const host = {
[displayName] : class extends React.Component {
constructor(){
this.state = {}
component.apply(this, arguments)
}
@barneycarroll
barneycarroll / changeTag.js
Created Aug 3, 2021
Replace an element with a new one that has a different tagName
View changeTag.js
export default function changeTag(original, tagName){
// Create a replacement tag of the desired type
const replacement = document.createElement(tagName)
// Grab all of the original's attributes, and pass them to the replacement
Array.prototype.forEach.call(original.attributes, ({name, value}) => {
replacement.setAttribute(name, value)
})
// Persist contents
@barneycarroll
barneycarroll / fileInput.css
Last active Jul 28, 2021
Total input[type=file] style control with pure CSS. File type inputs are notoriously hard to style, due to different semi-serious style restrictions in the name of security (the argument being that a file input presents access to the user's private file system, and should as such always look unambiguously like what it is — redundant if you ask m…
View fileInput.css
.fileContainer {
overflow: hidden;
position: relative;
}
.fileContainer [type=file] {
cursor: inherit;
display: block;
font-size: 999px;
filter: alpha(opacity=0);
@barneycarroll
barneycarroll / target.support.js
Last active Jul 13, 2021
Attempt at detecting CSS `:target` support
View target.support.js
// Determine whether or not we need to run fallback code by testing for `:target` support.
var targetSupport = ( function targetSupport(){
var iframe = document.createElement( 'iframe' );
var body = document.getElementsByTagName( 'body' )[ 0 ];
var doc;
var outcome;
iframe.tabindex = -1;
iframe.style.display = 'none';
@barneycarroll
barneycarroll / animator.js
Last active Jun 11, 2021
A factory for decorating Mithril modules / views / elements with incoming and outgoing animations.
View animator.js
var animating = false;
// Define an animator consisting of optional incoming and outgoing animations.
// alwaysAnimate is false unless specified as true: false means an incoming animation will only trigger if an outgoing animation is also in progress.
// forcing dontClone to true means the outward animation will use the original element rather than a clone. This could improve performance by recycling elements, but can lead to trouble: clones have the advantage of being stripped of all event listeners.
function animator( incoming, outgoing, alwaysAnimate, dontClone ){
// The resulting animator can be applied to any number of components
return function animate( x, y, z ){
var config;
var parent;
@barneycarroll
barneycarroll / README.md
Last active Jun 3, 2021
Lock and unlock a page's scroll position.
View README.md

jquery.scrollLock.js

Useful for when a blocking user experience is needed (in my case, didn't want people unwittingly loosing their place by scrolling while a modal required their attention): $.scrollLock() locks the body in place, preventing scroll until it is unlocked.

// Locks the page if it's currently unlocked
$.scrollLock();

// ...or vice versa
@barneycarroll
barneycarroll / ui_io.js
Created May 23, 2021
User Interface Input / Output is a tool for observing all event triggers (UI input) & DOM mutations (UI output). Initialised with an optional callback function which receives all such entries in format {type: 'mutation' || 'event', time: performance.now(), data: originalEventOrMutationRecords}, the returned instance exposes {logs, next, disconne…
View ui_io.js
import muty from 'muty'
export default function ui_io(callback = Function.prototype){
const {addEventListener} = EventTarget.prototype
const promises = []
const listeners = []
const logs = []
function register(entry){
@barneycarroll
barneycarroll / eventListenerListener.js
Created May 12, 2021
Intercept & release / remove all event listeners. Partially as an easy way to make Mithril router single-SPA compliant.
View eventListenerListener.js
const {addEventListener} = EventTarget.prototype
export default function EventListenerListener({
blocking = false,
removing = true,
visitor = Function.prototype,
} = {}){
if(this instanceof EventListenerListener){}
else return new EventListenerListener(...arguments)