gdibble

/** isMobile - Feature Detection of an actual mobile device
 * @description The localStorage.mobile works in Chrome mobile; the latter works in Safari mobile.
 *              Does not trigger desktop browsers with or w/o the dev-tools open and/or on a mobile simulator.
 * @see https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser/71030087#71030087
 */

const isMobile = localStorage.mobile || window.navigator.maxTouchPoints > 1;

gdibble

/** CloseConfirm.module.scss - Animated x → ✓
 * @see https://codepen.io/gdibble/pen/LYePYXL
 * @example <button className={styles.CloseConfirm} type="button" onClick={someFn}><div className="check"> </div></button>
 */
 
$SkyBlue100: #08b2e3;

.CloseConfirm {
  position: absolute;
  top: 0.25em;

gdibble

/** replaceJSX
 * RegExp search text and replace with JSX
 * @see https://stackoverflow.com/a/63647844
 * @param {string} str
 * @param {RegExp} find
 * @param {JSX} replace
 * @returns {JSX}
 */
export default function replaceJSX(str, find, replace) {
  const parts = str.split(find);

gdibble

/**
 * @function findDateRanges
 * @description Find and group date-ranges in an Array of dates
 *
 * @param {Array} sourceCollection - containing ISODateStrings in any order
 * @param {?Array} destinationCollection - defaults to []
 *
 * @returns {Array} - ^destinationCollection passed or new Array
 *
 * @example findDateRanges([

gdibble

/**
 * intersectionObj
 *   Pass an array of objects to find the similar objects
 *   You may also pass a single prop as a string, or an array of props to ignore
 *   Returns an array of the items which intersected
 *
 *   Usage example:
 *     var arr = [ { id:1, b:2, c:3 }, { id:2, b:3, c:4 }, { id:3, b:2, c:3 } ];
 *     _.intersectionObj(arr, 'id');
 *   » [ { id:1, b:2, c:3 }, { id:3, b:2, c:3 } ]

gdibble

function clone(thing, opts) {
  var newObject = {};
  if (thing instanceof Array) {
    return thing.map(function (i) { return clone(i, opts); });
  } else if (thing instanceof Date) {
    return new Date(thing);
  } else if (thing instanceof RegExp) {
    return new RegExp(thing);
  } else if (thing instanceof Function) {
    return opts && opts.newFns ? new Function('return ' + thing.toString())() : thing;

gdibble

.grab-cursor
  cursor: url('http://www.google.com/intl/en_ALL/mapfiles/openhand.cur'), all-scroll
  cursor: url('data:image/vnd.microsoft.icon;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8='), all-scroll
  cursor: -webkit-grab
  cursor: -moz-grab
  cursor: -o-grab
  cursor: -ms-grab
  cursor: grab

.grabbing-cursor

gdibble

/* Detection:             http://gist.github.com/df3fd4016e632344336f3227a6f159e6
 *  While userAgent sniffing is not ideal, arguably it is best in most cases
 *   throw in some proper feature detection & this will give you vast UI/UX control
 */
var userAgent = navigator.userAgent || navigator.vendor || window.opera || navigator.platform;
this.isMobile = (function (browserUserAgent) { return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(browserUserAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|n

gdibble

/**
 * Regular Expresion IndexOf for Arrays
 *   This little addition to the Array prototype will iterate over array
 *   and return the index of the first element which matches the provided
 *   regular expresion. Note: This will not match on objects.
 * @param  {RegEx}   rx The regular expression to test with. E.g. /-ba/gim
 * @return {Numeric} -1 means not found
 */
if (typeof Array.prototype.reIndexOf === 'undefined') {
  Array.prototype.reIndexOf = function (str) {

gdibble

/*
 * return random number within lower/upper range
 *   output a whole number by passing returnInteger=1
 *   Examples: $R(0, 10);     >>>  3.141592653589793
 *             $R(0, 10, 1);  >>>  7
 */
function $R(lowerLimit, upperLimit, returnInteger) {
  var step1 = Math.random() * (upperLimit - lowerLimit);
  if (returnInteger && (returnInteger === 1)) {
    return lowerLimit + parseInt(step1, 10);