SigurdMW

// remember to run first: npm i --save-dev webpack path babel-core babel-preset-es2015 babel-loader

/* Simplistic .babelrc file:
{
  "presets": ["es2015"]
}

*/
var path = require('path');

SigurdMW

// filemane: gulpfile.js
// ruby must be installed, then run gem install sass
// npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del gulp-babel babel-preset-env --save-dev
// also need to get jshint to work: .jshintrc


/*
UPDATE: without ruby: https://github.com/dlmanning/gulp-sass
ex: 

SigurdMW

// classlist helper for better browser compat
var hasClass = function(el, className){
  if (el.classList){
    return el.classList.contains(className);
  } else {
    return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
  }
}

SigurdMW

// classlist helper for better browser compat
var hasClass = function (el, className) {
    if (el.classList) {
        return el.classList.contains(className);
    } else {
        return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
    }
}

// helper for setting multiple attributes to same element

SigurdMW

// npm install --save-dev gulp babelify browserify babel-preset-es2015 gulp-connect vinyl-source-stream vinyl-buffer gulp-uglify gulp-sourcemaps

/*
folder structure: 
build
src/js/index.js
static/index.html
package.json
gulpfile.js
*/

SigurdMW

{
  "name": "skuld-frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "backstop test",
    "approve-tests": "backstop approve",
    "build": "set NODE_ENV=production && webpack -p",
    "watch": "webpack --cache=false --watch"

SigurdMW

...
@Styles.Render("~/Bundles/CSS")
...
@Scripts.Render("~/Bundles/JS")
...

SigurdMW

// npm install --save-dev w3cjs
var w3cjs = require('w3cjs');

var timer = 0;
var takeTime = setInterval(function() {
  timer = timer + 1;
}, 1);

const validationService = (target) => {
  return new Promise((resolve, reject) => {

SigurdMW

class MegaMenu {
    constructor() {
        this.options = {
            selector: "mega-menu",
            trigger: "menu-link--has-children"
        }

        this.menuOpen = false;
        this.documentBody = document.body;
        this.megaMenu = document.querySelector("." + this.options.selector);

SigurdMW

function polyfill() {

    // allow using el.querySelectorAll(...).forEach(...) for looping through nodeLists
    if (!NodeList.prototype.forEach) {
        NodeList.prototype.forEach = Array.prototype.forEach;
    }

    // allow using [].findIndex(...) in all browsers
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex
    // https://tc39.github.io/ecma262/#sec-array.prototype.findIndex