Skip to content

Instantly share code, notes, and snippets.

Avatar
💯
Product Designer Interactive Storyteller

Scott C. Krause neodigm

💯
Product Designer Interactive Storyteller
View GitHub Profile
View doTwoTouch.js
var doTwoTouch = (function( _d, _q){ // Capture Pinch attempt on carousel
var eCntr, aEv=[];
setTimeout(function(){
if( oTopmenu && oTopmenu.isMobile() ) doTwoTouch.init();
}, 2800);
return {
"init": function(){
eCntr = _d.querySelector( _q[0] );
if( eCntr ){
eCntr.addEventListener("pointerdown", doTwoTouch.twoTouchDown );
View smooth_scrollto_with_ie11.js
function doScrollToCollections(sQuery, nOffset){
var eColl = document.querySelector( sQuery );
if( eColl && nOffset ){
window.scrollTo(0,0);
if( oTopmenu.isMobile() ) nOffset += 80; // Sticky
if( window.msCrypto ){ // Detect IE11
window.scrollTo(0, ( eColl.offsetTop - nOffset ));
}else{
window.scrollTo({ top: ( eColl.getBoundingClientRect().top - nOffset ), behavior: "smooth" });
}
@neodigm
neodigm / disable_inline_stylesheet_by_selector.js
Last active Jan 17, 2021
Remove unwanted inline stylesheets by selector
View disable_inline_stylesheet_by_selector.js
var doRemoveSS = ( (_d, _q)=>{
let aS = [ ... _d.styleSheets];
aS.forEach( (oS)=>{
if( !oS.href ){
let aCSSR = [ ... oS.cssRules];
aCSSR.forEach( (oR)=>{
if( typeof oR.selectorText != "undefined"){
if( oR.selectorText.indexOf( _q ) != -1){
console.log( oR.selectorText );
oS.disabled = true;
View canvasToPNG.js
let image = document.querySelectorAll("canvas")[0].toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href=image;
@neodigm
neodigm / vue_make_all_parents_relative.js
Created Nov 28, 2020
Walk through DOM making all parents position relative - Vue.js method snippet
View vue_make_all_parents_relative.js
// Vue.js Method
"doHeroClick": function( ev ){
ev.preventDefault();
if( oTopmenu && !oTopmenu.isMobile() ){
var eTarget = this.$refs["pdp_zoom_reveal"];
eTarget = eTarget.parentNode;
if( eTarget ){
while( eTarget.tagName !== "HTML" ){
eTarget.style.position = "relative";
eTarget = eTarget.parentNode;
View prefers_reduced_motion.js
// Grab the prefers reduced media query.
const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
// Check if the media query matches or is not available.
if (!mediaQuery || mediaQuery.matches) {
doSomethingWithoutAnimation();
} else {
doSomethingWithAnimation();
}
View zoom.html
var sMU_dt , sMU_mob; // LTDC PDP Exp Col Jan S3
sMU_mob = `
<span class="hero__container"
:class="{'hidden' : isPlayingVideo }">
<aside class="hero-sm__pre--aside">
<section id="js-flick__hero--id" :class="{'vis_hide' : !bFlickHero, 'vis_show' : bFlickHero }">
<div id="js-flickHero--id" class="hero__container--flick">
<article class="flickhero__cell" v-for="(fh, nOrder) in aFlickHero">
<img class="hero__image" :src="fh.img" alt="Hero Image">
@neodigm
neodigm / popover_ux_pattern.js
Last active Dec 8, 2020
A popover is a transient view that shows on a content screen when a user clicks on a control button or within a defined area.
View popover_ux_pattern.js
// A popover is a transient view that shows on a content screen when a user clicks on a control button or within
// a defined area. Declarative implementation.
var oPopOver = (function( _w, _d, _q ){ // Popover UX pattern
let arPops = [], ePos, iOffTop=0, iOffLft=0;
return {
"init": function(){ // wire DOM events
arPops= [].slice.call(_d.querySelectorAll(_q));
_w.addEventListener("resize", oPopOver.closeAll);
_w.addEventListener("scroll", oPopOver.closeAll);
_d.body.addEventListener("click", function( e ){ // Outside Click close
@neodigm
neodigm / hugo.html
Created Oct 24, 2020
Hugo Go Template Short code list logic
View hugo.html
{{ $dir := (.Get "dir") }}
{{ if eq $dir "" }} {{ $dir = "assets" }} {{ end }}
{{/*
get all files that matches the directory name
which is passed as argument dir="" to the shortcode:
*/}}
{{ $assets := .Page.Resources.Match (printf "%s/*" $dir) }}
{{ $assetdir := (printf "%s/%s" (.Page.Path | path.Dir) $dir) }}
{{ $page_resources := .Page.Resources.ByType "image" }}
@neodigm
neodigm / isWebGL.js
Created Oct 9, 2020
Detect WebGL 2 browser support
View isWebGL.js
var isWebGL2Available = function () { // Does this browser support WebGL 2?
try {
var canvas = document.createElement('canvas')
return !!(window.WebGL2RenderingContext && canvas.getContext('webgl2'))
} catch (e) {
return false
}
}