2018/19 winter redesign proposal

assets/compiled/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

development/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["babel-preset-env"],
+  "plugins": ["babel-plugin-syntax-dynamic-import"]
+}

development/.gitignore

@@ -0,0 +1,3 @@
+/node_modules
+yarn.lock
+package-lock.json

development/assets/js/app.js

@@ -0,0 +1,17 @@
+window.smoothScroll = require("smoothscroll");
+
+(() => {
+
+    const init = () => {
+        require('./scripts/internal-links')();
+        require('./scripts/blur-hero')();
+        require('./scripts/meetups-map')();
+    };
+
+    if(['interactive', 'complete'].indexOf(document.readyState) >= 0) {
+        init();
+    } else {
+        document.addEventListener("DOMContentLoaded", init);
+    }
+
+})();

development/assets/js/classes/abstract/generic-class.js

@@ -0,0 +1,18 @@
+export default class GenericClass {
+    constructor(...args){
+
+        if (this.constructor === GenericClass) {
+            throw new TypeError(`Abstract class "GenericClass" cannot be instantiated directly.`); 
+        }
+
+        const fields = this.constructor.fields;
+        args.forEach((arg, i) => {
+            const field = fields[i];
+            if (!field){ 
+                console.warn(`Too many arguments.`);
+                return; 
+            }
+            this[field] = arg;
+        });
+    }
+}

development/assets/js/classes/meetup-list.js

@@ -0,0 +1,19 @@
+import Meetup from './meetup';
+
+module.exports = class MeetupList {
+    constructor(...args){
+        this.meetups = [];
+        args.forEach((meetup) => {
+            if (meetup instanceof Meetup) {
+                this.meetups.push(meetup);
+            } else {
+                console.warn(`MeetupList class constructor accept only Meetup objects.`);
+            }
+        });
+    }
+    getWithCoordinates() {
+        return this.meetups.filter((meetup) => {
+            return meetup.lat && meetup.lng;
+        });
+    }
+}

development/assets/js/classes/meetup.js

@@ -0,0 +1,20 @@
+import GenericClass from './abstract/generic-class';
+
+const Meetup = class Meetup extends GenericClass {
+    constructor(...args){
+        super(...args);
+    }
+    getMapboxCoords() {
+        return [this.lng, this.lat];
+    }
+    createMarkerDOMElement(className = `mapbox__marker bg-img bg-img--cover`) {
+        let el = document.createElement('div');
+        el.className = className;
+        el.style.backgroundImage = `url(${ Meetup.backgroundPath }/${ this.icon }.png)`;
+        return el;
+    }
+}
+Meetup.fields = [`lat`, `lng`, `name`, `icon`];
+Meetup.backgroundPath = `/assets/img/sisters`;
+
+export default Meetup;

development/assets/js/classes/resolution-checker.js

@@ -0,0 +1,34 @@
+import { breakpoints, mobile } from '../settings/breakpoints';
+
+let ResolutionChecker =  class ResolutionChecker{
+    constructor() {
+        throw new TypeError(`ResolutionChecker is a static class.`); 
+    }
+    static getWindowWidth() {
+        return Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+    }
+    static getBreakpointsValue(breakpoint) {
+        let value = ResolutionChecker.breakpoints[breakpoint];
+        if (value) {
+            return value;
+        } else {
+            throw new Error(`There is no breakpoint named ${ breakpoint }.`);
+        }
+    }
+    static under(breakpoint) {
+        return ResolutionChecker.getWindowWidth() < ResolutionChecker.getBreakpointsValue(breakpoint);
+    }
+    static above(breakpoint) {
+        return ResolutionChecker.getWindowWidth() < ResolutionChecker.getBreakpointsValue(breakpoint);
+    }
+    static isMobile() {
+        return ResolutionChecker.getWindowWidth() < ResolutionChecker.mobile;
+    }
+    static isComputer() {
+        return !ResolutionChecker.isMobile();
+    }
+};
+
+ResolutionChecker.breakpoints = breakpoints;
+ResolutionChecker.mobile = mobile;
+module.exports = ResolutionChecker;

development/assets/js/scripts/blur-hero.js

@@ -0,0 +1,24 @@
+import ResolutionChecker from '../classes/resolution-checker';
+
+const ratio = 0.05;
+const idleOffset = 30;
+const maxBlur = 5;
+const hero = document.querySelector(`#main-hero > figure`);
+
+module.exports = () => {
+
+    // Check and assume if mobile, tablet, etc.
+    if (ResolutionChecker.isMobile()){
+        return;
+    }
+
+    // Create handler function...
+    const handle = () => {
+        let blur = Math.round((window.scrollY - idleOffset) * ratio);
+        hero.style.filter = `blur(${ blur > 0 ? (blur > maxBlur ? maxBlur : blur) : 0 }px)`;
+    };
+
+    // ...and apply it.
+    window.addEventListener(`scroll`, handle);
+    handle();
+}

development/assets/js/scripts/internal-links.js

@@ -0,0 +1,26 @@
+const scrollingClass = `scrolling`;
+
+module.exports = function() {
+
+    const current = window.location.protocol + "//" + window.location.host + window.location.pathname;
+
+    document.querySelectorAll('a').forEach((link) => {
+        if (link.href && link.href.match(`^${current}$|^${current}#`)){
+            link.addEventListener('click', function(event){
+                event.preventDefault();
+                let htmlClasses = document.documentElement.classList;
+                if (htmlClasses.contains(scrollingClass)) {
+                    return;
+                }
+                let target = /\#(.*)/.exec(link.href);
+                target = target ? document.querySelector(target[0]) : document.querySelector('body');
+                if (target) {
+                    htmlClasses.add(scrollingClass);
+                    smoothScroll(target, 700, () => {
+                        htmlClasses.remove(scrollingClass);
+                    });
+                }
+            });
+        }
+    });
+};

development/assets/js/scripts/meetups-map.js

@@ -0,0 +1,38 @@
+import ResolutionChecker from '../classes/resolution-checker';
+import mapboxgl from 'mapbox-gl';
+
+const meetupsMapContainer = `#meetups-map .mapbox__canvas > div`;
+
+module.exports = () => {
+
+    // Do not run script if mobile.
+    if (ResolutionChecker.isMobile()){
+        return;
+    }
+
+    // Set public mapbox key.
+    mapboxgl.accessToken = require('./../settings/secrets/mapbox-token');
+
+    // Craete a map with default settings and custom modifiers.
+    let map = new mapboxgl.Map(
+        Object.assign(
+            require(`./../settings/map-default`), {
+            container: document.querySelector(meetupsMapContainer),
+        })
+    );
+
+    // Add controls.
+    map.addControl(new mapboxgl.NavigationControl({ showCompass: false, }));
+
+    // Import meetups list and initialize map bounds.
+    const meetups = require(`../settings/meetups`).getWithCoordinates();
+    let bounds = new mapboxgl.LngLatBounds(); 
+
+    // Expand bounds and put meetup on a map.
+    meetups.forEach((meetup) => {
+        let coords = meetup.getMapboxCoords();
+        new mapboxgl.Marker(meetup.createMarkerDOMElement()).setLngLat(coords).addTo(map);
+        bounds.extend(coords);
+    });
+    map.fitBounds(bounds, { padding: 70 });
+}

development/assets/js/settings/breakpoints.js

@@ -0,0 +1,10 @@
+module.exports = {
+    breakpoints: {
+        small: 0,
+        medium: 480,
+        large: 860,
+        xlarge: 1024,
+        xxlarge: 1200,
+    },
+    mobile: 860,
+}

development/assets/js/settings/map-default.js

@@ -0,0 +1,25 @@
+module.exports = {
+
+    // Default light map.
+    style: `mapbox://styles/mapbox/light-v9`,
+
+    // Zoom settings.
+    zoom: 5,
+    boxZoom: false,
+    scrollZoom: false,
+    touchZoomRotate: false,
+
+    // Pitch settings.
+    pitch: 0,
+    pitchWithRotate: false,
+    dragRotate: false,
+
+    // Limit map to  fit US bounds.
+    maxBounds: [
+        [-126.7844079, 22.7433195,],
+        [-64.9513812, 51.3457868,],
+    ],
+
+    // Utah state center.
+    center: [-111.950684, 39.419220],
+};

development/assets/js/settings/meetups.js

@@ -0,0 +1,18 @@
+import MeetupList from '../classes/meetup-list';
+import Meetup from '../classes/meetup';
+
+module.exports = new MeetupList(
+    new Meetup(40.429729, -111.891950, `UtahJS - Lehi`, `utahjs`),
+    new Meetup(40.727978, -111.889150, `UtahJS - Salt Lake City`, `utahjs`),
+    new Meetup(41.222759, -111.970421, `UtahJS - Ogden`, `utahjs`),
+    new Meetup(40.559351, -111.902370, `Angular Utah`, `angularjs`),
+    new Meetup(40.573693, -111.897990, `Elm`, `elm`),
+    new Meetup(40.421154, -111.8841860, `Ionic`, `ionic`),
+    new Meetup(40.429729, -111.891950, `Lunch.JS`, `lunchjs`),
+    new Meetup(40.429729, -111.891950, `Lecture Series`, `lectureseries`),
+    new Meetup(40.727512, -111.890070, `Node.js SLC`, `nodejs`),
+    new Meetup(40.233800, -111.658500, `Node.js Provo`, `nodejs`),
+    new Meetup(40.429720, -111.892080, `ReactJS`, `reactjs`),
+    new Meetup(40.764500, -111.891180, `UReactJS`, `ureactjs`),
+    new Meetup(40.427773, -111.891975, `VueJS`, `vuejs`),
+);

development/assets/js/settings/secrets/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

development/assets/sass/_prototyping.scss

@@ -0,0 +1,2 @@
+/* This file contains all testing css rules. */
+/* It should be empty on production. */

development/assets/sass/custom/all.scss

@@ -0,0 +1,5 @@
+@import "fonts/all";
+@import "mixins/all";
+@import "utilities/all";
+@import "components/all";
+@import "elements/all";

development/assets/sass/custom/components/_hero.scss

@@ -0,0 +1,15 @@
+.s-hero {
+    $c: &;
+
+    & {
+        position: relative;
+    }
+
+    #{$c}__bg-image {
+        z-index: -10;
+        position: absolute;
+        @include fill-parent;
+        @include background-size(cover);
+        background-position: center center;
+    }
+}

development/assets/sass/custom/components/_mapbox.scss

@@ -0,0 +1,38 @@
+.mapbox__container {
+    $c: &;
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+}
+
+.mapbox__canvas {
+    $c: &;
+    @include fill-parent();
+    position: absolute;
+
+    & > div {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.mapbox__marker {
+    $c: &;
+
+    & {
+        cursor: default;
+        transition: 
+            opacity .3s ease-in-out,
+            width .3s ease-in-out,
+            height .3s ease-in-out;
+        width: 2.2rem;
+        height: 2.2rem;
+        opacity: .8;
+
+        &:hover {
+            width: 2.6rem;
+            height: 2.6rem;
+            opacity: 1;
+        }
+    }    
+}

development/assets/sass/custom/components/_meetup-badge.scss

@@ -0,0 +1,32 @@
+.s-meetup-badge {
+    $c: &;
+
+    #{$c}__logo {
+        padding: rem-calc(25px);
+        padding-bottom: rem-calc(10px);
+        max-height: rem-calc(100px);
+        margin: auto;
+        display: block;
+        transition-duration: .3s;
+    } 
+
+    #{$c}__header {
+        @include ff-roboto();
+        font-weight: 300;
+    }
+
+    & {
+        margin-top: rem-calc(20px);
+        position: relative;
+
+        & > a {
+            display: block;
+
+            &:hover {
+                #{$c}__logo {
+                    transform: translateY(-8%);
+                }
+            }
+        }
+    }
+}