first commit

_ext/sass/_colors.scss

@@ -0,0 +1,160 @@
+$base-color: #332f35;
+$shop: #b63831;
+$red: #e3474a;
+
+$palettes: (
+    base: (
+        background: (
+            default: $base-color,
+            hover: lighten($base-color, 5%),
+            lighthover: lighten($base-color, 4%),
+        ),
+        foreground: (
+            default: lighten($base-color, 20%),
+            text: lighten($base-color, 50%),
+            bold: lighten($base-color, 60%),
+            weak: lighten($base-color, 30%),
+            link: lighten($base-color, 100%),
+            h1: lighten($base-color, 100%),
+            h2: lighten($base-color, 70%),
+            h3: lighten($base-color, 60%),
+            surveyQuestion: lighten($base-color, 60%),
+            hover: lighten($base-color, 40%),
+            separator: lighten($base-color, 5%),
+            disabled: lighten($base-color, 10%),
+        )
+    ),
+    user-menu: (
+        background: (
+            default: darken($base-color, 3%),
+            hover: darken($base-color, 1.5%),
+        ),
+        foreground: (
+            default: lighten($base-color, 50%),
+            hover: lighten($base-color, 100%),
+        )
+    ),
+    menu: (
+        background: (
+            default: lighten($base-color, 5%),
+            hover: lighten($base-color, 15%),
+        ),
+        foreground: (
+            default: lighten($base-color, 50%),
+            hover: lighten($base-color, 100%),
+        )
+    ),
+    button: (
+        background: (
+            default: lighten($base-color, 10%),
+            hover: lighten($base-color, 15%),
+        ),
+        foreground: (
+            default: lighten($base-color, 80%),
+            text: lighten($base-color, 100%),
+        )
+    ),
+    selectedTool: (
+        background: (
+            default: lighten($base-color, 10%),
+        ),
+        foreground: (
+            default: lighten($base-color, 50%),
+        )
+    ),
+    subbutton: (
+        background: (
+            hover: lighten($base-color, 15%),
+        ),
+        foreground: (
+            default: lighten($base-color, 30%),
+            hover:  lighten($base-color, 50%),
+        )
+    ),
+    indent: (
+        background: (
+            default: darken($base-color, 4%),
+            separator: darken($base-color, 8%),
+            hover: lighten($base-color, 5%),
+        ),
+        foreground: (
+            default: #fff,
+            symbol: lighten($base-color, 5%),
+            symbol-hover: lighten($base-color, 20%),
+            weak: lighten($base-color, 20%),
+            form: lighten($base-color, 50%),
+        )
+    ),
+    indent-dark: (
+        background: (
+            default: darken($base-color, 6%),
+            separator: darken($base-color, 11%),
+            button: lighten($base-color, 2.5%),
+            button-hover: lighten($base-color, 5%),
+        ),
+        foreground: (
+          default: lighten($base-color, 30%),
+          link: lighten($base-color, 40%),
+          hover: lighten($base-color, 50%),
+          button: lighten($base-color, 50%),
+          button-hover: lighten($base-color, 70%),
+        )
+    ),
+    footer: (
+        background: (
+            default: darken($base-color, 9%),
+        ),
+        foreground: (
+            default: lighten($base-color, 20%),
+            hover: lighten($base-color, 35%),
+            symbol: lighten($base-color, 7.5%),
+        ),
+    ),
+    warning-banner: (
+        background: (
+            default: lighten($base-color, 10%),
+            button: lighten($base-color, 20%),
+            button-hover: lighten($base-color, 25%),
+        ),
+        foreground: (
+            default: lighten($base-color, 50%),
+            button: lighten($base-color, 40%),
+            button-hover: lighten($base-color, 45%),
+        ),
+    ),
+    image-label: (
+        background: (
+            default: lighten($base-color, 15%),
+        ),
+        foreground: (
+            default: lighten($base-color, 80%),
+        ),
+        triangle: (
+            default: lighten($base-color, 6%),
+        ),
+    ),
+    shop: (
+        background: (
+            default: $shop,
+            hover: lighten($shop, 5%),
+        ),
+        foreground: (
+            default: lighten($shop, 65%),
+        ),
+    ),
+);
+
+@function color($element: 'base', $location: 'background', $hover: 'default') {
+    @return map-get(map-get(map-get($palettes, $element), $location), $hover);
+}
+
+$twitter: #00b6f1;
+$patreon: #F96854;
+$facebook: #3b5998;
+$reddit: #ff5700;
+$youtube: #b31217;
+$pintrest: #cb2027;
+$tumblr: #2c4762;
+$deviantart: #4a5d4e;
+$instagram: #c2368a;
+$pixeljoint: #73d731;

_ext/sass/_zindex.scss

@@ -0,0 +1,67 @@
+// this function is used whenever you need to define a z-index
+@function -z($key, $mod: 0) {
+
+  $index: -index($layers, $key) * 10;
+
+  @if $mod {
+    @return $index + $mod;
+  }
+
+  @return $index;
+}
+
+// dependency for the other function
+@function -index($list, $value) {
+  @for $i from 1 through length($list) {
+    @if nth($list, $i) == $value {
+      @return $i;
+    }
+  }
+
+  @return null;
+}
+
+
+/*
+
+define your layers from bottom to top:
+
+$layers: (
+  background,
+  content,
+  dropdown,
+  subnav,
+  mobile-nav,
+  header,
+  overlay,
+  modal,
+  modal-background,
+  modal-content
+);
+
+
+
+//////////use:
+
+.test {
+  z-index: -z(content);
+}
+
+
+
+
+//////////go one layer above content
+
+.test-2 {
+  z-index: -z(content, 1);
+}
+
+
+
+///////////go one layer below content
+
+.test-2 {
+  z-index: -z(content, -1)
+}
+
+*/

_ext/scripts/libraries/cookies.js

@@ -0,0 +1,172 @@
+/*
+ * Cookies.js - 1.2.3
+ * https://github.com/ScottHamper/Cookies
+ *
+ * This is free and unencumbered software released into the public domain.
+ */
+(function (global, undefined) {
+    'use strict';
+
+    var factory = function (window) {
+        if (typeof window.document !== 'object') {
+            throw new Error('Cookies.js requires a `window` with a `document` object');
+        }
+
+        var Cookies = function (key, value, options) {
+            return arguments.length === 1 ?
+                Cookies.get(key) : Cookies.set(key, value, options);
+        };
+
+        // Allows for setter injection in unit tests
+        Cookies._document = window.document;
+
+        // Used to ensure cookie keys do not collide with
+        // built-in `Object` properties
+        Cookies._cacheKeyPrefix = 'cookey.'; // Hurr hurr, :)
+        
+        Cookies._maxExpireDate = new Date('Fri, 31 Dec 9999 23:59:59 UTC');
+
+        Cookies.defaults = {
+            path: '/',
+            secure: false
+        };
+
+        Cookies.get = function (key) {
+            if (Cookies._cachedDocumentCookie !== Cookies._document.cookie) {
+                Cookies._renewCache();
+            }
+            
+            var value = Cookies._cache[Cookies._cacheKeyPrefix + key];
+
+            return value === undefined ? undefined : decodeURIComponent(value);
+        };
+
+        Cookies.set = function (key, value, options) {
+            options = Cookies._getExtendedOptions(options);
+            options.expires = Cookies._getExpiresDate(value === undefined ? -1 : options.expires);
+
+            Cookies._document.cookie = Cookies._generateCookieString(key, value, options);
+
+            return Cookies;
+        };
+
+        Cookies.expire = function (key, options) {
+            return Cookies.set(key, undefined, options);
+        };
+
+        Cookies._getExtendedOptions = function (options) {
+            return {
+                path: options && options.path || Cookies.defaults.path,
+                domain: options && options.domain || Cookies.defaults.domain,
+                expires: options && options.expires || Cookies.defaults.expires,
+                secure: options && options.secure !== undefined ?  options.secure : Cookies.defaults.secure
+            };
+        };
+
+        Cookies._isValidDate = function (date) {
+            return Object.prototype.toString.call(date) === '[object Date]' && !isNaN(date.getTime());
+        };
+
+        Cookies._getExpiresDate = function (expires, now) {
+            now = now || new Date();
+
+            if (typeof expires === 'number') {
+                expires = expires === Infinity ?
+                    Cookies._maxExpireDate : new Date(now.getTime() + expires * 1000);
+            } else if (typeof expires === 'string') {
+                expires = new Date(expires);
+            }
+
+            if (expires && !Cookies._isValidDate(expires)) {
+                throw new Error('`expires` parameter cannot be converted to a valid Date instance');
+            }
+
+            return expires;
+        };
+
+        Cookies._generateCookieString = function (key, value, options) {
+            key = key.replace(/[^#$&+\^`|]/g, encodeURIComponent);
+            key = key.replace(/\(/g, '%28').replace(/\)/g, '%29');
+            value = (value + '').replace(/[^!#$&-+\--:<-\[\]-~]/g, encodeURIComponent);
+            options = options || {};
+
+            var cookieString = key + '=' + value;
+            cookieString += options.path ? ';path=' + options.path : '';
+            cookieString += options.domain ? ';domain=' + options.domain : '';
+            cookieString += options.expires ? ';expires=' + options.expires.toUTCString() : '';
+            cookieString += options.secure ? ';secure' : '';
+
+            return cookieString;
+        };
+
+        Cookies._getCacheFromString = function (documentCookie) {
+            var cookieCache = {};
+            var cookiesArray = documentCookie ? documentCookie.split('; ') : [];
+
+            for (var i = 0; i < cookiesArray.length; i++) {
+                var cookieKvp = Cookies._getKeyValuePairFromCookieString(cookiesArray[i]);
+
+                if (cookieCache[Cookies._cacheKeyPrefix + cookieKvp.key] === undefined) {
+                    cookieCache[Cookies._cacheKeyPrefix + cookieKvp.key] = cookieKvp.value;
+                }
+            }
+
+            return cookieCache;
+        };
+
+        Cookies._getKeyValuePairFromCookieString = function (cookieString) {
+            // "=" is a valid character in a cookie value according to RFC6265, so cannot `split('=')`
+            var separatorIndex = cookieString.indexOf('=');
+
+            // IE omits the "=" when the cookie value is an empty string
+            separatorIndex = separatorIndex < 0 ? cookieString.length : separatorIndex;
+
+            var key = cookieString.substr(0, separatorIndex);
+            var decodedKey;
+            try {
+                decodedKey = decodeURIComponent(key);
+            } catch (e) {
+                if (console && typeof console.error === 'function') {
+                    console.error('Could not decode cookie with key "' + key + '"', e);
+                }
+            }
+            
+            return {
+                key: decodedKey,
+                value: cookieString.substr(separatorIndex + 1) // Defer decoding value until accessed
+            };
+        };
+
+        Cookies._renewCache = function () {
+            Cookies._cache = Cookies._getCacheFromString(Cookies._document.cookie);
+            Cookies._cachedDocumentCookie = Cookies._document.cookie;
+        };
+
+        Cookies._areEnabled = function () {
+            var testKey = 'cookies.js';
+            var areEnabled = Cookies.set(testKey, 1).get(testKey) === '1';
+            Cookies.expire(testKey);
+            return areEnabled;
+        };
+
+        Cookies.enabled = Cookies._areEnabled();
+
+        return Cookies;
+    };
+    var cookiesExport = (global && typeof global.document === 'object') ? factory(global) : factory;
+
+    // AMD support
+    if (typeof define === 'function' && define.amd) {
+        define(function () { return cookiesExport; });
+    // CommonJS/Node.js support
+    } else if (typeof exports === 'object') {
+        // Support Node.js specific `module.exports` (which can be a function)
+        if (typeof module === 'object' && typeof module.exports === 'object') {
+            exports = module.exports = cookiesExport;
+        }
+        // But always support CommonJS module 1.1.1 spec (`exports` cannot be a function)
+        exports.Cookies = cookiesExport;
+    } else {
+        global.Cookies = cookiesExport;
+    }
+})(typeof window === 'undefined' ? this : window);

_ext/scripts/utilities/getSetText.js

@@ -0,0 +1,10 @@
+//get text of specified element
+function getText(elementId) {
+	var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
+	return element.textContent;
+}
+
+function setText(elementId, text) {
+	var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
+	element.textContent = text;
+}

_ext/scripts/utilities/getSetValue.js

@@ -0,0 +1,11 @@
+
+
+function getValue(elementId) {
+	var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
+	return element.value;
+}
+
+function setValue(elementId, value) {
+	var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
+	element.value = value;
+}

_ext/scripts/utilities/hexToRgb.js

@@ -0,0 +1,21 @@
+//put in a hex color code (f464b2 or #f464b2) string 
+//and get an rgb color object {r:0,g:0,b:0}
+//divisor is an optional argument, which makes it so you can get values other than 0-255
+
+function hexToRgb(hex, divisor) {
+    //if divisor isn't set, set it to one (so it has no effect)
+    divisor = divisor || 1;
+    
+    //split given hex code into array of 3 values
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex.trim());
+    
+    //console.log('hex: '+hex)
+    //console.log([parseInt(result[1], 16)/divisor, parseInt(result[2], 16)/divisor, parseInt(result[3], 16)/divisor])
+    //console.log(result)
+    
+    return result ? {
+        r: parseInt(result[1], 16)/divisor,
+        g: parseInt(result[2], 16)/divisor,
+        b: parseInt(result[3], 16)/divisor
+    } : null;
+}

_ext/scripts/utilities/hslToRgb.js

@@ -0,0 +1,32 @@
+function hslToRgb(h, s, l){
+    h /= 255;
+    s /= 255;
+    l /= 255;
+    
+    var r, g, b;
+
+    if(s == 0){
+        r = g = b = l; // achromatic
+    }else{
+        var hue2rgb = function hue2rgb(p, q, t){
+            if(t < 0) t += 1;
+            if(t > 1) t -= 1;
+            if(t < 1/6) return p + (q - p) * 6 * t;
+            if(t < 1/2) return q;
+            if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+            return p;
+        }
+
+        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        var p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1/3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1/3);
+    }
+
+    return {
+      r:Math.round(r * 255), 
+      g:Math.round(g * 255), 
+      b:Math.round(b * 255)
+    };
+}

_ext/scripts/utilities/on.js

@@ -0,0 +1,22 @@
+//add event listener for any element which calls a function
+//element can be provided as a direct reference or with just a string of the name
+
+function on(event, elementId, functionCallback) {
+	
+	
+	
+	//if element provided is string, get the actual element
+	var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
+	
+	//console.log('added '+event+' event listener on '+element) 
+	
+	element.addEventListener(event,
+	  function (e) {
+	     // e = event
+	     //this = element clicked
+	     functionCallback(e, this);
+	     //if you need to access the event or this variable, you need to add them
+	     //when you define the callback, but you cant use the word this, eg:
+	     //on('click', menuButton, function (e, button) {});
+	  });
+}

_ext/scripts/utilities/onChildren.js

@@ -0,0 +1,14 @@
+//add event listener to each of specified element's children
+
+function onChildren(event, parentElement, functionCallback) {
+	console.log('onChildren()');
+	
+	var parentElement = (typeof parentElement == 'string' ? document.getElementById(parentElement) : parentElement);
+	
+	var children = parentElement.children;
+	
+	//loop through children and add onClick listener
+	for (var i = 0; i < children.length; i++) {
+		on(event, children[i],functionCallback);
+	}
+}

_ext/scripts/utilities/onClick.js

@@ -0,0 +1,9 @@
+//DEPRECATED - USE on('click')
+
+
+//add click event listener for any element which calls a function
+//element can be provided as a direct reference or with just a string of the name
+function onClick(elementId, functionCallback) {
+	var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
+	element.addEventListener('click',functionCallback);
+}

_ext/scripts/utilities/onClickChildren.js

@@ -0,0 +1,13 @@
+//add click listener to each of specified element's children
+
+function onClickChildren(parentElement, functionCallback) {
+	
+	var parentElement = (typeof parentElement == 'string' ? document.getElementById(parentElement) : parentElement);
+	
+	var children = parentElement.children;
+	
+	//loop through children and add onClick listener
+	for (var i = 0; i < children.length; i++) {
+		onClick(children[i],functionCallback);
+	}
+}

_ext/scripts/utilities/rgbToHex.js

@@ -0,0 +1,23 @@
+//convert rgb values to a hex string for html
+function rgbToHex (argument0,g,b) {
+  var r;
+  
+  //if the first argument is an object
+  if (typeof argument0 === 'object'){
+    r = argument0.r;
+    g = argument0.g;
+    b = argument0.b;
+  }
+  else 
+    r = argument0;
+  
+  //console.log('converting rgb('+r+','+g+','+b+') to hex');
+  
+  //convert a decimal number to 2-digit hex
+  function componentToHex (c) {
+  	var hex = c.toString(16);
+  	return hex.length == 1 ? "0" + hex : hex;
+  }
+
+	return componentToHex(r) + componentToHex(g) + componentToHex(b);
+}

_ext/scripts/utilities/rgbToHsl.js

@@ -0,0 +1,36 @@
+//put in red green blue values and get out hue saturation luminosity values
+
+function rgbToHsl(argument0, g, b){
+  var r;
+  
+  //if the first argument is an object
+  if (typeof argument0 === 'object'){
+    r = argument0.r;
+    g = argument0.g;
+    b = argument0.b;
+  }
+  else 
+    r = argument0;
+  
+  
+  
+    r /= 255, g /= 255, b /= 255;
+    
+    var max = Math.max(r, g, b), min = Math.min(r, g, b);
+    var hue, saturation, luminosity = (max + min) / 2;
+
+    if(max == min){
+        hue = saturation = 0; // achromatic
+    }else{
+        var d = max - min;
+        saturation = luminosity > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch(max){
+            case r: hue = (g - b) / d + (g < b ? 6 : 0); break;
+            case g: hue = (b - r) / d + 2; break;
+            case b: hue = (r - g) / d + 4; break;
+        }
+        hue /= 6;
+    }
+
+    return {h:hue, s:saturation, l:luminosity};
+}

_ext/scripts/utilities/select.js

@@ -0,0 +1,20 @@
+//add class .selected to specified element
+function select(elementId) {
+  //console.log(arguments.callee.caller.name, 'selected ', elementId);
+	var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
+	element.classList.add('selected');
+}
+
+//remove .selected class from specified element
+function deselect(elementId) {
+  //console.log('deselected ', elementId);
+	var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
+	element.classList.remove('selected');
+}
+
+//toggle the status of the .selected class on the specified element
+function toggle(elementId) {
+  //console.log('toggled ', elementId);
+	var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
+	element.classList.toggle('selected');
+}