Merge pull request #1 from evanshunt/js-breakpoints

Js breakpoints

.babelrc

@@ -0,0 +1,7 @@
+{
+    "presets": [
+        [
+            "@babel/preset-env"
+        ]
+    ]
+}

.gitignore

@@ -0,0 +1,2 @@
+/node_modules/
+**/.DS_Store

breakpoints/_variables.scss

@@ -7,6 +7,13 @@ $desktop-extra-large: 1920px !default;
 $breakpointList: (
     'large-phone': $large-phone,
     'tablet': $tablet,
+    'desktop': $desktop,
     'desktop-large': $desktop-large,
     'desktop-extra-large': $desktop-extra-large
 ) !default;
+
+:export {
+    @each $name, $width in $breakpointList {
+        #{$name}: #{$width};
+    }
+}

package.json

@@ -1,14 +1,17 @@
 {
   "name": "@evanshunt/derekstrap",
-  "version": "0.0.2",
-  "description": "An SCSS base layout and styles library by Evans Hunt",
-  "main": "index.js",
+  "version": "0.1.0",
+  "description": "A base layout and styles library by Evans Hunt",
+  "main": "dist/main.js",
   "keywords": [
     "scss",
     "derek",
     "evans",
     "hunt"
   ],
+  "scripts": {
+    "build": "webpack --mode production"
+  },
   "author": "Evans Hunt Tech Team (https://www.evanshunt.com)",
   "license": "ISC",
   "dependencies": {
@@ -26,5 +29,12 @@
   "bugs": {
     "url": "https://github.com/evanshunt/derekstrap/issues"
   },
-  "homepage": "https://github.com/evanshunt/derekstrap#readme"
+  "homepage": "https://github.com/evanshunt/derekstrap#readme",
+  "devDependencies": {
+    "@babel/core": "^7.11.1",
+    "@babel/preset-env": "^7.11.0",
+    "babel-loader": "^8.1.0",
+    "webpack": "^4.44.1",
+    "webpack-cli": "^3.3.12"
+  }
 }

src/Breakpoints.js

@@ -0,0 +1,48 @@
+import debounce from "./debounce";
+
+const Breakpoints = {
+    breakpoints: {},
+    noUnitBreakpoints: {},
+    currentBreakpoint: '',
+    init: function (breakpoints) {
+        this.breakpoints = breakpoints;
+        this.noUnitBreakpoints = Object.fromEntries(
+            Object.entries(this.breakpoints).map(
+                ([key, value]) => [key, Number(value.replace(/\D/g, ''))]
+            )
+        );
+
+        this.currentBreakpoint = this.getCurrent();
+        window.addEventListener('resize', this.eventEmitter);
+    },
+    getCurrent: function () {
+        const width = window.innerWidth;
+        const breakpoint = Object.entries(this.noUnitBreakpoints).reduce((accumulator, entry) => {
+            if (accumulator && width < accumulator[1]) {
+                accumulator = null;
+            }
+
+            if (width >= entry[1] && accumulator && accumulator[1] < entry[1]) {
+                return entry;
+            }
+
+            return accumulator;
+        });
+
+        return breakpoint ? breakpoint[0] : null;
+    },
+    eventEmitter: debounce(() => {
+        const newBreakpoint = Breakpoints.getCurrent();
+        if (newBreakpoint !== Breakpoints.currentBreakpoint) {
+            window.dispatchEvent(new CustomEvent('breakpointChange', {
+                detail: {
+                    breakpoint: newBreakpoint,
+                    lastBreakpoint: Breakpoints.currentBreakpoint
+                }
+            }));
+            Breakpoints.currentBreakpoint = newBreakpoint;
+        }
+    }, 50),
+};
+
+export default Breakpoints;

src/debounce.js

@@ -0,0 +1,22 @@
+// https://davidwalsh.name/javascript-debounce-function
+
+// Returns a function, that, as long as it continues to be invoked, will not
+// be triggered. The function will be called after it stops being called for
+// N milliseconds. If `immediate` is passed, trigger the function on the
+// leading edge, instead of the trailing.
+function debounce(func, wait, immediate) {
+    var timeout;
+    return function () {
+        var context = this, args = arguments;
+        var later = function () {
+            timeout = null;
+            if (!immediate) func.apply(context, args);
+        };
+        var callNow = immediate && !timeout;
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+        if (callNow) func.apply(context, args);
+    };
+}
+
+export default debounce;

src/index.js

@@ -0,0 +1,11 @@
+import debounce from "./debounce";
+import setUserAgent from "./setUserAgent";
+import Breakpoints from "./Breakpoints";
+
+const Derekstrap = {
+    init: function () {
+        setUserAgent();
+    }
+}
+
+export {debounce, Derekstrap, Breakpoints};

src/setUserAgent.js

@@ -0,0 +1,5 @@
+function setUserAgent() {
+    document.documentElement.setAttribute('data-useragent', navigator.userAgent);
+}
+
+export default setUserAgent;

webpack.config.js

@@ -0,0 +1,22 @@
+const path = require('path');
+
+module.exports = {
+    entry: './src/index.js',
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'main.js',
+        library: 'Derekstrap',
+        libraryTarget: 'umd'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: 'babel-loader'
+                }
+            }
+        ]
+    },
+};