Skip to content

Instantly share code, notes, and snippets.

View arniebradfo's full-sized avatar

James Bradford arniebradfo

View GitHub Profile
@arniebradfo
arniebradfo / app.tsx
Last active January 29, 2024 14:33
React Disable Imported Styles
import React from 'react'
LazyCssComponent = React.lazy(() => import('./cssComponent'))
AnotherLazyCssComponent = React.lazy(() => import('./anotherCssComponent'))
export const App: React.FC = () =>(
<React.Suspense fallback={<></>}>
{condition && <LazyCssComponent/>}
{!condition && <AnotherLazyCssComponent/>}
</React.Suspense>
@arniebradfo
arniebradfo / button.css
Last active May 27, 2018 23:18
Detect Tab vs Click Navigation
form button:focus,
.input-tabbing button:focus
{
border: 1px solid DeepPink;
}
@arniebradfo
arniebradfo / button.css
Last active May 27, 2018 23:16
Device Mouse or Touch Input Detection
.input-mouse button:hover{
background-color: black;
color: white;
}
@arniebradfo
arniebradfo / keeps-class.comonent.ts
Last active July 25, 2018 15:34
Angular non destructive class HostBinding
import { Component, Input, HostBinding } from '@angular/core';
/*
<gist-keeps-class class="some classes" [booleanInput]="true" [stringInput]="some-thing"></gist-keeps-class>
will output this:
<gist-keeps-class class="some classes has-boolean some-thing" >
this component keeps class="class" attributes
</gist-keeps-class>
it's not throughly tested, but should work?
@arniebradfo
arniebradfo / app-component-registry.ts
Last active May 27, 2021 19:14
Get a Angular component by a string corresponding to its class name
/**
* @author http://bradford.digital
* @link https://stackoverflow.com/questions/42949647/resolve-type-of-component-from-string-in-angular2
*
* Keep a registry of key:value pairs that is the string name of a component and the Component reference
* The registry is stored in an exported const named COMPONENTREGISTRY
* Add to the registry by using the registerComponent() function as an adorner. example:
* @registerComponent
* @Component({...})
* export class AnExampleComponent {...}
@arniebradfo
arniebradfo / any.component.html
Last active October 22, 2024 18:40
Angular *ngFor recursive list tree template
<h1>Angular 2 Recursive List</h1>
<ul>
<ng-template #recursiveList let-list>
<li *ngFor="let item of list">
{{item.title}}
<ul *ngIf="item.children.length > 0">
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
</ul>
</li>
</ng-template>
@arniebradfo
arniebradfo / safariValidationPollyfill.js
Last active June 7, 2016 21:53
Safari Form Validation Pollyfill - halts form submission if it has invalid required fields and adds tool tip like other browsers do
/**
* Safari Form Validation Pollyfill
* halts form submission if it has invalid required fields
* and adds tool tip emulating other browser's native behavior
* Tooltip is styled to match safari
*
* @requires modernizer.js
* @link https://gist.github.com/arniebradfo/1d59554b8e2db28d1b3effc048be06cc/
* @author James Bradford
* @link http://arniebradfo.com
@arniebradfo
arniebradfo / wp-shortcode-add-body-class.php
Last active June 23, 2022 18:28
WordPress shortcode that adds classes to the html body
<?php // ...in functions.php
// adds wp shortcode that adds css classes to the html body
// use in your page and post content like this:
// [bodyclass class="add these classes to the body"]
function use_bodyclass_shortcode( $classes ) {
global $post;
// check if the post has the bodyclass shortcode