Skip to content

Instantly share code, notes, and snippets.

View wiseoldman's full-sized avatar
🔥

Phil. wiseoldman

🔥
View GitHub Profile
@wiseoldman
wiseoldman / social-share.js
Last active April 11, 2018 09:47
[Social sharing] Social sharing functionality #social
function socialShare (e) {
e.preventDefault();
const href = this.getAttribute('href');
const options = 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,';
const network = this.getAttribute('data-network');
const networks = {
facebook: { width: 600, height: 300 },
twitter: { width: 600, height: 254 },
google: { width: 515, height: 490 },
@wiseoldman
wiseoldman / arrows.scss
Created April 11, 2018 09:46
[Line arrow mixin] Line arrow mixin for scss #arrow
@mixin arrow($line-width:4px, $size:4px, $color:#000, $direction:down) {
border: solid $color;
border-width: 0 $line-width $line-width 0;
display: inline-block;
padding: $size;
margin-top: -$size;
@if $direction == down {
transform: rotate(45deg);
} @else if $direction == up {
@wiseoldman
wiseoldman / NavigationScrollHandler.js
Last active March 12, 2019 09:43
[NavigationScrollHandler] Add a class to the navigation when scrolling X pixels using requestAnimationFrame for better performance. The snippet also handles fixed navigations with the WordPress admin-bar #navigation
class NavigationScrollHandler {
constructor({ scrollDistance = 100, onEnter = () => {}, onExit = () => {}, headerElement = false } = {}) {
this.onEnter = onEnter;
this.onExit = onExit;
this.scrollDistance = scrollDistance;
this.headerElement = headerElement;
this.visibleAdminBar = document.querySelector('body.admin-bar');
this.lastKnownScrollY = 0;
this.ticking = false;
@wiseoldman
wiseoldman / _navigation-icon.scss
Last active May 2, 2018 14:26
[Burger menu] Burger menu with open/close animation #navigation
$icon_color: $c_prim;
$icon_easing: ease-in-out;
$icon_easing_duration: 200ms;
#navigation-toggle {
height: 30px;
padding: 5px 0 !important;
cursor: pointer;
div,
@wiseoldman
wiseoldman / _debounce.js
Last active May 3, 2018 14:02
[Debounce] Small module to debounce (e.g. scroll and resize functions) #debounce
function debounce (func, wait, immediate) {
let timeout;
return () => {
const context = this;
const args = arguments;
let later = () => {
timeout = null;
if (!immediate) func.apply(context, args);
@wiseoldman
wiseoldman / _print.js
Last active May 4, 2018 08:53
[PrintButton] Small snippet for creating a print button
class PrintButton {
constructor(PRINT_CLASS = '.print') {
this.PRINT_CLASS = PRINT_CLASS;
this.PRINT_TARGETS = document.querySelectorAll(this.PRINT_CLASS);
if (this.PRINT_TARGETS.length) {
this.addPrintListener();
}
}
@wiseoldman
wiseoldman / FloatingLabel.js
Last active February 25, 2019 13:58
[FloatingLabel] Floating labels for inputs #input #form
class FloatingLabel {
constructor(WRAPPER_ELEMENT, INPUT_TYPE) {
this.WRAPPER_ELEMENT = WRAPPER_ELEMENT;
this.INPUT_TYPE = INPUT_TYPE;
this.INPUT_SELECTOR = '.' + this.WRAPPER_ELEMENT.split(' ').join('.');
this.INPUT_WRAPPERS = document.querySelectorAll(this.INPUT_SELECTOR);
this.init();
}
init() {
@wiseoldman
wiseoldman / BlockInputKeys.js
Created May 23, 2018 11:03
[BlockInputKeys] Block an array of keys on inputs #form
class BlockInputKeys {
constructor(INPUT_TYPE, BLOCKED_KEYS) {
this.INPUT_TYPE = INPUT_TYPE;
this.BLOCKED_KEYS = BLOCKED_KEYS;
this.NUMBER_INPUTS = document.querySelectorAll(this.INPUT_TYPE);
this.init();
}
init() {
for (let i = 0; i < this.NUMBER_INPUTS.length; i++) {
@wiseoldman
wiseoldman / _input-mixins.scss
Created May 29, 2018 09:48
[Input mixins] Mixins for input fields #scss
@mixin placeholderColor($color) {
&:-moz-placeholder {
color: $color;
}
&:-ms-input-placeholder {
color: $color;
}
&::-moz-placeholder {
@wiseoldman
wiseoldman / _ie-check.js
Created October 22, 2018 14:38
[Internet Explorer check] Check if the browser is Internet Explorer #ie #fallback
function is_ie() {
const UA = window.navigator.userAgent;
const MS_IE = UA.indexOf("MSIE ");
if (MS_IE > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
return true;
}
return false;
}