├── README.md
└── js
    ├── sortNumberArray.js
    ├── stringBoolToBool.js
    ├── getElementsByClassName.js
    ├── domWalk.js
    ├── arrayMerge.js
    ├── matchesSelector.js
    ├── getAbsoluteUrl.js
    ├── fnParamsFromArray.js
    ├── deepFreeze.js
    ├── getUrlParam.js
    ├── once.js
    ├── createTable.js
    ├── publish-subscribe.js
    ├── insertRuleCSS.js
    ├── throttle.js
    ├── relativeTimeValue.js
    ├── objectIterator.js
    ├── debounce.js
    ├── poll.js
    ├── filterMapReduce.js
    ├── timers.js
    ├── lazyLoadImages.js
    ├── domTreeTraversal.js
    ├── measureSitePerformance.js
    ├── flattenNestedArray.js
    └── vanillahelpers.js


/README.md:
--------------------------------------------------------------------------------
1 | # JS Utils
2 | 
3 | Utility functions in JavaScript


--------------------------------------------------------------------------------
/js/sortNumberArray.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Sort numeric Array
 3 |  */
 4 | (function () {
 5 |   var arr = [2, 5, 1, 19, 26, 7];
 6 | 
 7 |   arr.sort(function (a, b) {
 8 |     return a - b;
 9 |   });
10 | })();


--------------------------------------------------------------------------------
/js/stringBoolToBool.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Convert string values 'true'/'false' to boolean true/false.
 3 |  *
 4 |  */
 5 | 
 6 | (function () {
 7 |   // BASIC TECHIQUE
 8 | 
 9 |   // This will work only if the string values are only one of the either ('true'/'false')
10 |   // Will return misleading results if the string value is different
11 |   var a = 'true';
12 |   var boolVal = (a === true); // Returns true
13 | 
14 |   // TRICK
15 |   var b = 'true';
16 |   var boolVal = JSON.parse(b); // Returns true.. throws an error if we use any other string other than 'true' or 'false'
17 | 
18 | })();


--------------------------------------------------------------------------------
/js/getElementsByClassName.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Native JavaScript implementation of getElementsByClassName() -- Polyfill
 3 |  *
 4 |  * @param node
 5 |  * @param classname
 6 |  * @returns {*}
 7 |  */
 8 | 
 9 | function getElementsByClassName(classname) {
10 |   var results = [];
11 |   var elemsUnderCurrNode = this.getElementsByTagName("*"); // 'this' value is the current node referenced
12 |   var r = new RegExp('\\b' + classname + '\\b');  // \b is word separator
13 | 
14 |   for (var i = 0; i < elemsUnderCurrNode.length; i++) {
15 |     var classNames = elemsUnderCurrNode[i].className;
16 |     if (classNames && r.test(classNames)) {
17 |       results[results.length] = elemsUnderCurrNode[i];
18 |     }
19 |   }
20 |   return results;
21 | }


--------------------------------------------------------------------------------
/js/domWalk.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Walk through all elements in the DOM
 3 |  *
 4 |  * @Reference:
 5 |  * https://www.kirupa.com/html5/traversing_the_dom.htm
 6 |  *
 7 |  * @param node
 8 |  */
 9 | 
10 | function walkTheDOM(node) {
11 |   if (node.nodeType == 1) {
12 |     //console.log(node.tagName);
13 |     node = node.firstChild;
14 | 
15 |     while (node) {
16 |       walkTheDOM(node);
17 |       node = node.nextSibling;
18 |     }
19 |   }
20 | }
21 | 
22 | // Example usage: Process all Text nodes on the page
23 | walkTheDOM(document.body, function (node) {
24 |   if (node.nodeType === 3) { // Is it a Text node?
25 |     var text = node.data.trim();
26 |     if (text.length > 0) { // Does it have non white-space text content?
27 |       // process text
28 |     }
29 |   }
30 | });


--------------------------------------------------------------------------------
/js/arrayMerge.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Merge 2 arrays into one.
 3 |  *
 4 |  *  - Using concat()      -- Create a new toArray.
 5 |  *  - Using Array push()  -- Modifies existing array.
 6 |  */
 7 | 
 8 | (function () {
 9 |   // Using concat() - CREATES A NEW ARRAY
10 |   var alpha = ['a', 'b', 'c'];
11 |   var numeric = [1, 2, 3];
12 | 
13 |   var alphaNumeric = alpha.concat(numeric);
14 | 
15 |   console.log(alphaNumeric);
16 |   // Result: ['a', 'b', 'c', 1, 2, 3]
17 | 
18 | 
19 |   // Using Array prototye push (Efficient): DOES NOT CREATE A NEW ARRAY
20 |   var a1 = [1, 2, 3];
21 |   var a2 = [4, 5, 6];
22 | 
23 |   Array.prototype.push.apply(a1, a2);
24 |   console.log(a1);
25 |   // Result: [1, 2, 3, 4, 5, 6]
26 | 
27 | 
28 |   // array_merge() as a function
29 |   var array_merge = Function.prototype.apply.bind(Array.prototype.push);
30 |   // USAGE
31 |   array_merge(a1, a2);
32 | 
33 | })();
34 | 


--------------------------------------------------------------------------------
/js/matchesSelector.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * matchesSelector()
 3 |  *
 4 |  * Oftentimes we validate input before moving forward; ensuring a truthy value, ensuring forms data is valid, etc.
 5 |  * But how often do we ensure an element qualifies for moving forward?  You can use a matchesSelector function to
 6 |  * validate if an element is of a given selector match.
 7 |  *
 8 |  */
 9 | 
10 | (function () {
11 |   function matchesSelector(el, selector) {
12 |     var p = Element.prototype;
13 |     var f =
14 |       p.matches ||
15 |       p.webkitMatchesSelector ||
16 |       p.mozMatchesSelector ||
17 |       p.msMatchesSelector ||
18 |       function (s) {
19 |         return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
20 |       };
21 |     return f.call(el, selector);
22 |   }
23 | 
24 |   // Usage
25 |   matchesSelector(document.getElementById('myDiv'), 'div.someSelector[some-attribute=true]');
26 | 
27 | })();


--------------------------------------------------------------------------------
/js/getAbsoluteUrl.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * getAbsoluteUrl()
 3 |  *
 4 |  * Dealing with URL formats can be a real nightmare.  Think of how just a few characters can effect a URL's absolute endpoint:
 5 |  * starting or not starting with /
 6 |  * starting with //
 7 |  * starting with ?
 8 |  * starting with #...and so on
 9 |  * What if you want an absolute URL though?  One that starts with http or https?
10 |  * You can use an A element to get that absolute URL
11 |  *
12 |  * @Reference:
13 |  * http://davidwalsh.name/get-absolute-url
14 |  *
15 |  */
16 | 
17 | (function () {
18 |   var getAbsoluteUrl = (function () {
19 |     var a;
20 | 
21 |     return function (url) {
22 |       if (!a) {
23 |         a = document.createElement('a');
24 |         a.href = url;
25 | 
26 |         return a.href;
27 |       }
28 |     };
29 |   })();
30 | 
31 |   // Usage
32 |   getAbsoluteUrl('/something'); // http://localhost:3000/something
33 | 
34 | })();


--------------------------------------------------------------------------------
/js/fnParamsFromArray.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * A function has 3 params.
 3 |  * The values to be passed to the params, are in an array.
 4 |  *
 5 |  * What is a simple trick to pass the parameters to the function from an array
 6 |  *
 7 |  * Short Answer: Use fn.apply(null, array);
 8 |  *
 9 |  */
10 | 
11 | // In ES5 -- You can use fn.apply()
12 | (function () {
13 |   var arr = [1, 2, 3]; // The array values need to passed to params a, b, c.
14 |   function testFn(a, b, c) {
15 |     // Some logic
16 |   }
17 | 
18 |   // Use apply() to pass array values as parameters.
19 |   testFn.apply(null, arr);
20 | 
21 | })();
22 | 
23 | // In ES6 -- You can use the spread operator (..var)
24 | (function() {
25 |   var arr = [1, 2, 3]; // The array values need to passed to params a, b, c.
26 |   function testFn(a, b, c) {
27 |     // Some logic
28 |   }
29 | 
30 |   // Use the spread operator (...) in ES6 to pass array values as parameters.
31 |   testFn(...arr);
32 | })();


--------------------------------------------------------------------------------
/js/deepFreeze.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Object.freze() is shallow.
 3 |  * Let's make a deepFreeze() function
 4 |  */
 5 | 
 6 | obj1 = {
 7 |   internal: {}
 8 | };
 9 | 
10 | Object.freeze(obj1);
11 | obj1.internal.a = 'aValue';
12 | 
13 | console.log(obj1.internal.a); // aValue
14 | 
15 | // To make the object fully immutable, freeze each object in obj1
16 | function deepFreeze(obj) {
17 |   // Retrieve the property names defined on obj
18 |   var propNames = Object.getOwnPropertyNames(obj);
19 | 
20 |   // Freeze properties before freezing self
21 |   propNames.forEach(function (name) {
22 |     var prop = obj[name];
23 | 
24 |     // Freeze prop if it is an object
25 |     if (typeof prop == 'object' && prop !== null && !Object.isFrozen(prop)) {
26 |       deepFreeze(prop);
27 |     }
28 |   });
29 | 
30 |   // Freeze self
31 |   return Object.freeze(obj);
32 | }
33 | 
34 | // Test deepFreeze
35 | var obj2 = {
36 |   internal: {}
37 | };
38 | 
39 | deepFreeze(obj2);
40 | obj2.internal.a = 'anotherValue';
41 | console.log(obj2.internal.a); // undefined
42 | 


--------------------------------------------------------------------------------
/js/getUrlParam.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Get param value from the url
 3 |  *
 4 |  * window.location.search
 5 |  * Returns the query string part of the url, including the leading question mark (?). It's supported across all browsers.
 6 |  *
 7 |  * encodeURIComponent() - encodes a URI component.
 8 |  * decodeURIComponent() - decodes a URI component.
 9 |  *
10 |  * encodeUR() - encodes the complete url.
11 |  * decodeUR() - decodes the complete url.
12 |  */
13 | 
14 | 
15 | (function () {
16 |   function getQueryParam(paramName) {
17 |     // We apply substring(1) on the queryString to remove the leading question mark(?)
18 |     var query = window.location.search.substring(1);
19 |     var vars = query.split('&');
20 |     for (var i = 0; i < vars.length; i++) {
21 |       var pair = vars[i].split('=');
22 |       if (pair[0] === paramName) {
23 |         return decodeURIComponent(pair[1]);
24 |       }
25 |     }
26 |     // If param name is not found in the query string, return false.
27 |     return false;
28 |   }
29 | 
30 |   // If the url is https://www.vasanthk.com?user=vasa
31 |   // getqueryParam(user) returns 'vasa'
32 | })();


--------------------------------------------------------------------------------
/js/once.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * once()
 3 |  *
 4 |  * The function ensure that a given function can be called once and only once, thus preventing duplicate initialization
 5 |  *
 6 |  * Link: http://sinonjs.org/
 7 |  */
 8 | 
 9 | // Implementation 1
10 | (function () {
11 |   function once(fn) {
12 |     var returnValue, called = false;
13 |     return function () {
14 |       if (!called) {
15 |         called = true;
16 |         returnValue = fn.apply(this, arguments);
17 |       }
18 |       return returnValue;
19 |     };
20 |   }
21 | 
22 |   // Usage
23 |   var canOnlyFireOnce = once(function () {
24 |     console.log('Fired!');
25 |   });
26 | 
27 |   canOnlyFireOnce();  // Fired!
28 |   canOnlyFireOnce();  // undefined
29 | })();
30 | 
31 | // Implementation 2
32 | (function () {
33 |   function once(fn, context) {
34 |     var result;
35 | 
36 |     return function () {
37 |       if (fn) {
38 |         fn.apply(context || this, arguments);
39 |         fn = null;
40 |       }
41 |       return result;
42 |     };
43 |   }
44 | 
45 |   // Usage
46 |   var canOnlyFireOnce = once(function () {
47 |     console.log('Fired!');
48 |   });
49 | 
50 |   canOnlyFireOnce();  // Fired!
51 |   canOnlyFireOnce();  // undefined
52 | 
53 | })();
54 | 


--------------------------------------------------------------------------------
/js/createTable.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Generate table
 3 |  */
 4 | 
 5 | function generate_table() {
 6 |   // get the reference for the body
 7 |   var body = document.getElementsByTagName("body")[0];
 8 | 
 9 |   // creates a <table> element and a <tbody> element
10 |   var tbl = document.createElement("table");
11 |   var tblBody = document.createElement("tbody");
12 | 
13 |   // creating all cells
14 |   for (var i = 0; i < 2; i++) {
15 |     // creates a table row
16 |     var row = document.createElement("tr");
17 | 
18 |     for (var j = 0; j < 2; j++) {
19 |       // Create a <td> element and a text node, make the text
20 |       // node the contents of the <td>, and put the <td> at
21 |       // the end of the table row
22 |       var cell = document.createElement("td");
23 |       var cellText = document.createTextNode("cell in row " + i + ", column " + j);
24 |       cell.appendChild(cellText);
25 |       row.appendChild(cell);
26 |     }
27 | 
28 |     // add the row to the end of the table body
29 |     tblBody.appendChild(row);
30 |   }
31 | 
32 |   // put the <tbody> in the <table>
33 |   tbl.appendChild(tblBody);
34 |   // appends <table> into <body>
35 |   body.appendChild(tbl);
36 |   // sets the border attribute of tbl to 2;
37 |   tbl.setAttribute("border", "2");
38 | }


--------------------------------------------------------------------------------
/js/publish-subscribe.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Publish-Subscribe
 3 |  *
 4 |  * @Reference:
 5 |  * https://davidwalsh.name/pubsub-javascript
 6 |  *
 7 |  */
 8 | 
 9 | // Pub-Sub module to help you publish to a topic and anyone can subscribe.
10 | var events = (function() {
11 |   var topics = {};
12 | 
13 |   return  {
14 |     subscribe: function(topic, listener) {
15 |       // Create the topic's object if not created.
16 |       if(!topics.hasOwnProperty(topic)) topics[topic] = [];
17 | 
18 |       // Add the listener to queue
19 |       var index = topics[topic].push(listener) - 1;
20 | 
21 |       // Provide handle back for removal of topic
22 |       return {
23 |         remove: function() {
24 |           delete topics[topic][index];
25 |         }
26 |       }
27 |     },
28 |     publish: function(topic, info) {
29 |       // If the topic doesn't exist, or there's no listeners in queue, just leave
30 |       if(!topics.hasOwnProperty(topic)) return;
31 | 
32 |       // Cycle through topics queue, fire!
33 |       topics[topic].forEach(function(item) {
34 |         item(info != undefined ? info : {});
35 |       })
36 |     }
37 |   }
38 | })();
39 | 
40 | 
41 | // Publishing to a topic
42 | events.publish('/page/load', {
43 |   url: '/some/url/path'   // any argument
44 | });
45 | 
46 | 
47 | // ...and subscribing to said topic in order to be notified of events:
48 | var subscription = events.subscribe('/page.load', function(obj) {
49 |   // Do something now that the event has occurred.
50 | });
51 | 
52 | // ..sometime later where I no longer want subscription...
53 | subscription.remove();


--------------------------------------------------------------------------------
/js/insertRuleCSS.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * We all know that we can grab a NodeList from a selector (via document.querySelectorAll) and give each of them a style,
 3 |  * but what's more efficient is setting that style to a selector (like you do in a stylesheet)
 4 |  *
 5 |  * This is especially useful when working on a dynamic, AJAX-heavy site.  If you set the style to a selector,
 6 |  * you don't need to account for styling each element that may match that selector (now or in the future).
 7 |  *
 8 |  * @Reference:
 9 |  * http://davidwalsh.name/add-rules-stylesheets
10 |  *
11 |  */
12 | 
13 | (function () {
14 |   var sheet = (function () {
15 |     // Create <style> tag
16 |     var style = document.createElement('style');
17 | 
18 |     // Add a media (and/or media query) here if you'd like!
19 |     // style.setAttribute('media', 'screen')
20 |     // style.setAttribute('media', 'only screen and (max-width : 1024px)')
21 | 
22 |     // Webkit hack :-/
23 |     style.appendChild(document.createTextNode(''));
24 | 
25 |     // Add the <style> element to the page
26 |     document.head.appendChild(style);
27 |     return style.sheet;
28 |   })();
29 | 
30 |   // Usage
31 |   sheet.insertRule('header { float: left; opacity: 0.8; }', 1);
32 |   // Stylesheets have an insertRule method which isn't available in earlier IE's but is now the standard for rule injection.
33 |   // The second argument, the index, represents the index at which to insert the rule.
34 |   // This is helpful so that you can insert the same rule/code and define which wins out.
35 |   // The default for index is -1, which means the end of the collection.
36 | 
37 | })();


--------------------------------------------------------------------------------
/js/throttle.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Throttle Events
 3 |  *
 4 |  * Throttling is a means by which we can limit the number of times a function can be called in a given period. For instance, we may have a method that should be called no more than 5 times per second.
 5 |  *
 6 |  * @Reference:
 7 |  * http://sampsonblog.com/749/simple-throttle-function
 8 |  * http://drupalmotion.com/article/debounce-and-throttle-visual-explanation
 9 |  * https://remysharp.com/2010/07/21/throttling-function-calls
10 |  * http://stackoverflow.com/a/27078401/1672655
11 |  * https://css-tricks.com/debouncing-throttling-explained-examples/
12 |  */
13 | 
14 | (function () {
15 |   // Allow callback to run at most 1 time per 100ms
16 |   window.addEventListener("resize", throttle(callback, 100));
17 |   // Allow callback to run on each resize event
18 |   window.addEventListener("resize", callback2);
19 | 
20 |   function callback() {
21 |     console.count("Throttled");
22 |   }
23 | 
24 |   function callback2() {
25 |     console.count("Not Throttled");
26 |   }
27 | 
28 |   function throttle(callback, limit) {
29 |     var wait = false;                   // Initially, we're not waiting
30 |     return function () {                // We return a throttled function
31 |       if (!wait) {                      // If we're not waiting
32 |         callback.call();                // Execute users function
33 |         wait = true;                    // Prevent future invocations
34 |         setTimeout(function () {        // After a period of time
35 |           wait = false;                 // And allow future invocations
36 |         }, limit);
37 |       }
38 |     }
39 |   }
40 | })();


--------------------------------------------------------------------------------
/js/relativeTimeValue.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * relativeTimeValue()
 3 |  *
 4 |  * Display when something was posted, as a relative time value, like “5 days ago”
 5 |  * Note: This function returns relative time only if less than a month since current date.
 6 |  */
 7 | 
 8 | (function () {
 9 |   function relativeTimeValue(now, time) {
10 |     var date = new Date(time || '');
11 |     var currDate = new Date(now || '');
12 |     var diff = ((currDate.getTime() - date.getTime()) / 1000); // Divide by 1000, since date().getTime() is in milliseconds
13 |     var dayDiff = Math.floor(diff / 86400);
14 | 
15 |     if (isNaN(dayDiff) || dayDiff < 0 || dayDiff >= 31) {
16 |       return null;
17 |     } else {
18 |       return dayDiff === 0 &&
19 |         (
20 |           // If less than a day
21 |           diff < 60 && 'just now' ||
22 |           diff < 120 && '1 minute ago' ||
23 |           diff < 3600 && Math.floor(diff / 60) + ' minutes ago' ||
24 |           diff < 7200 && '1 hour ago' ||
25 |           diff < 86400 && Math.floor(diff / 3600) + ' hours ago'
26 |         ) ||
27 |         dayDiff === 1 && 'Yesterday' ||
28 |         dayDiff < 7 && dayDiff + ' days ago' ||
29 |         dayDiff < 31 && Math.ceil(dayDiff / 7) + ' weeks ago';
30 |     }
31 |   }
32 | 
33 |   // Usage
34 |   console.log(relativeTimeValue('2008/01/28 22:25:00', '2008/01/28 22:23:30')); // 1 minute ago
35 |   console.log(relativeTimeValue('2008/01/28 22:25:00', '2008/01/27 22:23:30')); // Yesterday
36 |   console.log(relativeTimeValue('2008/01/28 22:25:00', '2008/01/27 22:23:30')); // Yesterday
37 |   console.log(relativeTimeValue('2008/01/28 22:25:00', '2008/01/26 22:23:30')); // 2 days ago
38 | })();


--------------------------------------------------------------------------------
/js/objectIterator.js:
--------------------------------------------------------------------------------
 1 | //Iterate through object
 2 | const obj = {
 3 |   foo: 'bar',
 4 |   comes: 'is',
 5 |   from: 'object'
 6 | };
 7 | for(let key in obj) {
 8 |   if(obj.hasOwnProperty(key)) {
 9 |     let valueOfKey = obj[key];
10 |     console.log('%s: %s', key, valueOfKey);
11 |   }
12 | }
13 | 
14 | //Iterate through array of objects
15 | const objArr = [{
16 |   some: 'value',
17 |   dummy: 'string'
18 | },
19 | {
20 |   iterate: 'better',
21 |   without: 'hassle'
22 | }];
23 | for(let obj of objArr) {
24 |   console.log('incoming object => %s', JSON.stringify(obj));
25 |   
26 |   for(let key in obj) {
27 |     if(obj.hasOwnProperty(key)) {
28 |       let valueOfKey = obj[key];
29 |       console.log('key => %s: value => %s', key, valueOfKey);
30 |     }
31 |   }
32 | }
33 | 
34 | //Iterate through arrays in objects
35 | const arrObjArr = [{
36 |   foo: ['bar', 'buz', 278, {prop: 'erty'}],
37 |   tar: 'ball'
38 | },
39 | {
40 |   lang: 'en',
41 |   city: 'Chicago'
42 | }];
43 | for(let obj of arrObjArr) {
44 |   
45 |   console.log('all object values => ', _getObjectValues(obj, true));
46 |   
47 |   _getObjectValues(obj, false, values => {
48 |     values.forEach( (value, valueIndex) => {
49 |       value.constructor === Array 
50 |       ? 
51 |       value.forEach((item, index) => {
52 |         if(typeof item === 'object') item = JSON.stringify(item);
53 |         console.log('index => %s: item => %s', index, item);
54 |       })
55 |       : 
56 |       console.log('key => %s: value => %s', Object.keys(obj)[valueIndex], value);  
57 |     })
58 |   });
59 |   
60 | }
61 | 
62 | function _getObjectValues(obj, plain, cb) {
63 |   let values = [];
64 |     
65 |   for(let key in obj) {
66 |     if(obj.hasOwnProperty(key)) { 
67 |       values.push(obj[key]);
68 |     }
69 |   }
70 |   
71 |   if(!plain && cb) {
72 |     cb(values);
73 |   } else {
74 |     return values;
75 |   };
76 | }
77 | 


--------------------------------------------------------------------------------
/js/debounce.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Debounce Events
 3 |  *
 4 |  * The debounce function can be a game changer when it comes to event fueled performance.
 5 |  * If you aren't using a debouncing function with a scroll, resize, key* event, you're probably doing it wrong.
 6 |  *
 7 |  * Working:
 8 |  * Debounce returns a function that, as long as it continues to be invoked, will not be triggered.
 9 |  * The function will be called after it stops being called for N milliseconds.
10 |  *
11 |  * If 'immediate' parameter is passed, trigger the function on leading edge instead of the trailing.
12 |  * ie. It is called every time when the event is triggered (if set to true)
13 |  *
14 |  * The debounce function will not allow a callback to be used more than once per given time frame.
15 |  * This is especially important when assigning a callback function to frequently-firing events.
16 |  *
17 |  * @Reference:
18 |  * http://davidwalsh.name/essential-javascript-functions
19 |  * http://modernjavascript.blogspot.co.uk/2013/08/building-better-debounce.html
20 |  * http://drupalmotion.com/article/debounce-and-throttle-visual-explanation
21 |  * https://css-tricks.com/debouncing-throttling-explained-examples/
22 |  */
23 | 
24 | (function () {
25 |   function debounce(func, wait, immediate) {
26 |     var timeout;
27 |     return function () {
28 |       var context = this;
29 |       var args = Array.prototype.slice.call(arguments);
30 | 
31 |       // Clear any timeouts already present.
32 |       clearTimeout(timeout);
33 | 
34 |       // Call function with after timeout.
35 |       timeout = setTimeout(function () {
36 |         timeout = null;
37 |         if (!immediate) {
38 |           func.apply(context, args);
39 |         }
40 |       }, wait);
41 | 
42 |       // If immediate param is passed on there is no active timeout.
43 |       if (immediate && !timeout) {
44 |         func.apply(context, args);
45 |       }
46 |     };
47 |   }
48 | 
49 |   var myEffecientFn = debounce(function () {
50 |     // All the taxing stuff you do
51 |   }, 250);
52 | 
53 |   window.addEventListener('resize', myEffecientFn);
54 | })();
55 | 


--------------------------------------------------------------------------------
/js/poll.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Polling
 3 |  *
 4 |  * Sometimes you don't get to plug into an event to signify a desired state --
 5 |  * if the event doesn't exist, you need to check for your desired state at intervals.
 6 |  *
 7 |  * Polling isn't necessarily a consequence of async coding but it has definitely increased in usage
 8 |  * and importance due to our desire to write async code.
 9 |  *
10 |  * @Reference:
11 |  * http://davidwalsh.name/javascript-polling
12 |  *
13 |  */
14 | 
15 | // Without Deferred/Promise
16 | 
17 | (function () {
18 |   function poll(fn, callback, errback, timeout, interval) {
19 |     var endTime = Number(new Date()) + (timeout || 2000);
20 |     interval = interval || 100;
21 | 
22 |     (function p() {
23 |       // If the condition is met, we're done!
24 |       if (fn()) {
25 |         callback();
26 |       }
27 |       // If the condition isn't met but the timeout hasn't elapsed
28 |       else if (Number(new Date()) < endTime) {
29 |         setTimeout(p, interval);
30 |       }
31 |       // Didn't match and too much time -- reject!
32 |       else {
33 |         errback(new Error('timed out for ' + fn + ': ' + arguments));
34 |       }
35 |     })();
36 |   }
37 | 
38 |   // Usage: Ensure element is visible.
39 |   poll(
40 |     function () {
41 |       return document.getElementById('lightbox').offsetWidth > 0;
42 |     },
43 |     function () {
44 |       // Done, success callback
45 |     },
46 |     function () {
47 |       // Error, failure callback
48 |     }
49 |   );
50 | 
51 | })();
52 | 
53 | 
54 | // With Deferred/Promises
55 | 
56 | (function () {
57 |   function poll(fn, timeout, interval) {
58 |     var dfd = new Deferred();
59 |     var endTime = Number(new Date()) + (timeout || 2000);
60 |     interval = interval || 100;
61 | 
62 |     (function p() {
63 |       // If the condition is met, we are done!
64 |       if (fn()) {
65 |         dfd.resolve();
66 |       }
67 |       // If the condition hasn't been met but the timeout hasn't elapsed
68 |       else if (Number(new Date() < endTime)) {
69 |         setTimeout(p, interval);
70 |       }
71 |       // Didn't match the criteria and takes too much time -- reject
72 |       else {
73 |         dfd.reject(new Error('timed out for ' + fn + ': ' + arguments));
74 |       }
75 |     })();
76 | 
77 |     return dfd.promise;
78 |   }
79 | 
80 |   // Usage: ensure element is visible
81 |   poll(function () {
82 |     return document.getElementById('lightbox').offsetWidth > 0;
83 |   }, 2000, 150);
84 | 
85 | })();


--------------------------------------------------------------------------------
/js/filterMapReduce.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Partly to celebrate the announcement of the 12th Doctor and to make things a little more interesting we are going to
 3 |  * use data about the 12 Doctors as we unpack .filter(), .map(), and .reduce().
 4 |  *
 5 |  * Here is the data format we will be using:
 6 |  * var doctors = [{ number: 9,  actor: 'Christopher Eccleston', begin: 2005, end: 2005 }];
 7 |  *
 8 |  * Desired output format:
 9 |  * [{ doctorNumber: '#9',  playedBy: 'Christopher Eccleston', yearsPlayed: 1 }]
10 |  *
11 |  * Problem to Solve
12 |  * What we want to do is to take all the Doctors from year 2000 until today and change their data up just a little bit.
13 |  * We want to massage the data a little bit and have keys of doctorNumber, playedBy, and yearsPlayed.
14 |  * We don't want to just directly map one field to another, but for doctorNumber we want to prepend a '#' and for
15 |  * the yearsPlayed we want to want how many years the doctor played and not a range.
16 |  *
17 |  * @Link: http://elijahmanor.com/reducing-filter-and-map-down-to-reduce/
18 |  */
19 | 
20 | var doctors = [
21 |   {number: 1, actor: 'William Hartnell', begin: 1963, end: 1966},
22 |   {number: 2, actor: 'Patrick Troughton', begin: 1966, end: 1969},
23 |   {number: 3, actor: 'Jon Pertwee', begin: 1970, end: 1974},
24 |   {number: 4, actor: 'Tom Baker', begin: 1974, end: 1981},
25 |   {number: 5, actor: 'Peter Davison', begin: 1982, end: 1984},
26 |   {number: 6, actor: 'Colin Baker', begin: 1984, end: 1986},
27 |   {number: 7, actor: 'Sylvester McCoy', begin: 1987, end: 1989},
28 |   {number: 8, actor: 'Paul McGann', begin: 1996, end: 1996},
29 |   {number: 9, actor: 'Christopher Eccleston', begin: 2005, end: 2005},
30 |   {number: 10, actor: 'David Tennant', begin: 2005, end: 2010},
31 |   {number: 11, actor: 'Matt Smith', begin: 2010, end: 2013},
32 |   {number: 12, actor: 'Peter Capaldi', begin: 2013, end: 2013}
33 | ];
34 | 
35 | // Using filter() and map()
36 | doctors = doctors.filter(function (doctor) {
37 |   return doctor.begin > 2000;
38 | }).map(function (doctor) {
39 |   return {  // return what new object will look like.
40 |     doctorNumber: '#' + doctor.number,
41 |     playedBy: doctor.actor,
42 |     yearsPlayed: doctor.end - doctor.begin + 1
43 |   };
44 | });
45 | 
46 | console.log(JSON.stringify(doctors, null, 4));
47 | 
48 | // Using reduce()
49 | // Syntax: arr.reduce(callback[, initialValue])
50 | doctors = doctors.reduce(function (memo, doctor) {
51 |   if (doctor.begin > 2000) {  // This serves as our 'filter'
52 |     memo.push({ // This serves as our 'map'
53 |       doctorNumber: '#' + doctor.number,
54 |       playedBy: doctor.actor,
55 |       yearsPlayed: doctor.end - doctor.begin + 1
56 |     });
57 |   }
58 |   return memo;
59 | }, []);
60 | 


--------------------------------------------------------------------------------
/js/timers.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Understanding Timers: setTimeout and setInterval
 3 |  *
 4 |  * Browser provides a built-in scheduler which allows to setup function calls for execution after given period of time.
 5 |  *
 6 |  * setInterval() schedules the repeating execution after every delay microseconds. It can be stopped by clearInterval call.
 7 |  *
 8 |  * Gotchas:
 9 |  * - Interesting things start to happen when func takes more than the delay. If the execution is impossible, it is queued.
10 |  * Only one execution can be queued.
11 |  * Thus, setInterval(func, delay) does not guarantee a given delay between executions.
12 |  * There are cases when the real delay is more or less than given. In fact, it doesn’t guarantee that there be any delay at all.
13 |  *
14 |  * - Functions executed by setInterval/setTimeout have this = window, or this = undefined in ES5 strict mode.
15 |  *
16 |  * @Reference: http://javascript.info/tutorial/settimeout-setinterval
17 |  */
18 | 
19 | (function () {
20 |   // setTimeout()
21 |   function f() {
22 |     alert('Hi');
23 |   }
24 | 
25 |   setTimeout(f, 1000);
26 | 
27 |   // Cancelling the execution
28 |   var timerId = setTimeout(function () {
29 |     alert(1)
30 |   }, 1000);
31 |   clearTimeout(timerId);
32 | 
33 | 
34 |   // Exercise: Create the clock using setInterval()
35 |   (function () {
36 |     // HTML
37 |     //<div id="clock">
38 |     //  <span id="hour">hh</span>:<span id="min">mm</span>:<span id="sec">ss</span>
39 |     //</div>
40 | 
41 |     var timerId;
42 | 
43 |     function clockStart() {
44 |       if (timerId) return;
45 | 
46 |       // setInterval does not promise any real execution delay. So every update creates a brand new Date object and uses it to update the clock.
47 |       timerId = setInterval(update, 1000);
48 |       update(); // Called right away so that user doesn't need to wait 1000ms for the start.
49 |     }
50 | 
51 |     function clockStop() {
52 |       clearInterval(timerId);
53 |       timerId = null;
54 |     }
55 | 
56 |     function update() {
57 |       var date = new Date();
58 | 
59 |       var hours = date.getHours();
60 |       if (hours < 10) {
61 |         hours = '0' + hours;
62 |       }
63 |       document.getElementById('hour').innerHTML = hours;
64 | 
65 |       var minutes = date.getMinutes();
66 |       if (minutes < 10) {
67 |         minutes = '0' + minutes;
68 |       }
69 |       document.getElementById('min').innerHTML = minutes;
70 | 
71 |       var seconds = date.getSeconds();
72 |       if (seconds < 10) {
73 |         seconds = '0' + seconds;
74 |       }
75 |       document.getElementById('sec').innerHTML = seconds
76 |     }
77 | 
78 |     // init clock
79 |     clockStart();
80 |   })();
81 | 
82 |   // Repeating with known delay
83 |   // When we need a fixed delay, rescheduling with setTimeout is used.
84 |   // Here is the example which gives alert every two seconds with setTimeout instead of setInterval:
85 | 
86 | 
87 |   (function () {
88 |     var i = 1;
89 |     var timer = setTimeout(function () {
90 |       alert(i++);
91 |       timer = setTimeout(arguments.callee, 2000);
92 |     }, 2000)
93 |   })();
94 | 
95 | })();


--------------------------------------------------------------------------------
/js/lazyLoadImages.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Simple Vanilla JS implementation to lazy load images.
 3 |  *
 4 |  * @Reference:
 5 |  * http://developer.telerik.com/featured/lazy-loading-images-on-the-web/
 6 |  * More detailed library:
 7 |  * https://github.com/vasanthk/layzr.js/blob/master/src/layzr.js
 8 |  */
 9 | 
10 | 
11 | // Step 1
12 | //
13 | // The first thing is to make sure the images do not load by specifying the image source
14 | // using a data-src attribute rather than placing it in the src.
15 | // <img data-src="images/Robin.jpg" alt="" />
16 | // Note that you may want to add a width and height to your images to ensure that
17 | // they take up the appropriate space. For our sample that isn’t completely necessary.
18 | 
19 | 
20 | // Step 2
21 | //
22 | // Test if an image is within the viewport.
23 | // Hint: Use `getBoundingClientRect`
24 | // To use this function, we’d pass an image or an image container and the function will return
25 | // true if the passed element is within the viewport, or false if it is not.
26 | 
27 | // For a better isElementInViewPort() function check:
28 | // https://github.com/verlok/lazyload/blob/master/src/lazyload.js#L67
29 | function isElementInViewPort(el) {
30 |   var rect = el.getBoundingClientRect();
31 | 
32 |   return (
33 |     rect.top >= 0 &&
34 |     rect.left >= 0 &&
35 |     rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
36 |     rect.right <= (window.innerWidth || document.documentElement.clientWidth)
37 |   );
38 | }
39 | 
40 | // Step 3
41 | //
42 | // We need to get all of the images we want to lazy load and then test them
43 | // against this function every time a scroll or change to the viewport occurs.
44 | 
45 | var throttledLazyLoad = throttle(lazyLoadImages);
46 | 
47 | //these handlers will be removed once the images have loaded
48 | window.addEventListener("DOMContentLoaded", throttledLazyLoad);
49 | window.addEventListener("load", throttledLazyLoad);
50 | window.addEventListener("resize", throttledLazyLoad);
51 | window.addEventListener("scroll", throttledLazyLoad);
52 | 
53 | function lazyLoadImages() {
54 |   var images = document.querySelectorAll("img[data-src]");
55 | 
56 |   images.forEach(function (item) {
57 |     if (isElementInViewPort(item)) {
58 |       item.setAttribute("src", item.getAttribute("data-src"));
59 |       item.removeAttribute("data-src");
60 |     }
61 |   });
62 | 
63 |   // if all the images are loaded, stop calling the handler
64 |   if (images.length == 0) {
65 |     window.removeEventListener("DOMContentLoaded", throttledLazyLoad);
66 |     window.removeEventListener("load", throttledLazyLoad);
67 |     window.removeEventListener("resize", throttledLazyLoad);
68 |     window.removeEventListener("scroll", throttledLazyLoad);
69 |   }
70 | }
71 | 
72 | // Helper function to throttle events
73 | function throttle(fn, interval) {
74 |   var wait = false;
75 | 
76 |   return function () {
77 |     var context = this;
78 |     var args = Array.prototype.slice.call(arguments);
79 |     if (!wait) {
80 |       fn.apply(context, args);
81 |       wait = true;
82 | 
83 |       setTimeout(function () {
84 |         wait = false;
85 |       }, interval);
86 |     }
87 |   };
88 | }


--------------------------------------------------------------------------------
/js/domTreeTraversal.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Given a node from a DOM tree find the node in the same position from an identical DOM tree.
  3 |  * Diagrammatic representation below:
  4 |  *
  5 |  * A         B
  6 |  *
  7 |  * O        O
  8 |  * |\       |\
  9 |  * O O      O O
 10 |  * /|\      /|\
 11 |  * O O O    O O O
 12 |  * \        \
 13 |  * O        O
 14 |  *
 15 |  * Link:
 16 |  * http://stackoverflow.com/a/19779708/1672655
 17 |  *
 18 |  * DOM traversal
 19 |  * Implementation 1: http://jsfiddle.net/3u8o9twp/2/
 20 |  * Implementation 2: http://jsfiddle.net/kpq8thxc/2/
 21 |  * Other: http://jsfiddle.net/domenlightenment/xw68Q/
 22 |  */
 23 | 
 24 | /**
 25 |  * Implementation 1
 26 |  */
 27 | 
 28 | (function () {
 29 |   var givenNode = document.getElementById("node1");       // Given node.
 30 |   var givenDomRoot = document.getElementById("dom1");     // Given DOM tree root.
 31 |   var identicalDomRoot = document.getElementById("dom2"); // Identical DOM tree root.
 32 |   var result;
 33 | 
 34 |   // Given a node and a tree, extract the nodes path.
 35 |   function getPath(node, domRoot) {
 36 |     var path = [];
 37 |     var current = node;
 38 | 
 39 |     while (current !== domRoot) {
 40 |       path.unshift(getIndexOf(current.parentNode.childNodes, current));
 41 |       current = current.parentNode;
 42 |     }
 43 |     return path;
 44 |   }
 45 | 
 46 |   // Given a tree and a path, let's locate a node
 47 |   function locateNodeFromIdenticalDom(domRoot, path) {
 48 |     var current = domRoot;
 49 |     for (var i = 0; i < path.length; i++) {
 50 |       current = current.childNodes[path[i]];
 51 |     }
 52 |     return current;
 53 |   }
 54 | 
 55 |   // Helper function
 56 |   function getIndexOf(arr, val) {
 57 |     // call(this, param)
 58 |     Array.prototype.indexOf.call(arr, val);
 59 |   }
 60 | 
 61 |   // Returns the node in the same position as the target node, but in the new tree.
 62 |   function getDoppelgangerNode(givenNode) {
 63 |     return locateNodeFromIdenticalDom(identicalDomRoot, getPath(givenNode, givenDomRoot));
 64 |   }
 65 | 
 66 |   // Call it!
 67 |   result = getDoppelgangerNode(givenNode, givenDomRoot, identicalDomRoot);
 68 |   console.log(result);
 69 | })();
 70 | 
 71 | /**
 72 |  * Implementation 2
 73 |  */
 74 | 
 75 | (function () {
 76 |   var tree1 = document.getElementById('dom1'),
 77 |     tree2 = document.getElementById("dom2"),
 78 |     node1 = document.getElementById("node1");
 79 | 
 80 |   NodeList.prototype.indexOf = function (item) {
 81 |     return Array.prototype.indexOf.call(this, item);
 82 |   };
 83 | 
 84 |   //build a ref tree that contains the parent index
 85 |   function buildTree(childNode, baseNode, tree) {
 86 |     tree = tree || [];
 87 |     if (childNode !== baseNode) {
 88 |       var parentNode = childNode.parentNode;
 89 |       if (parentNode) {
 90 |         var index = parentNode.childNodes.indexOf(childNode);
 91 |         tree.push(index);
 92 |         return buildTree(parentNode, baseNode, tree);
 93 |       }
 94 |     }
 95 | 
 96 |     return tree;
 97 |   }
 98 | 
 99 |   function getChildNodeFromParentTree(parentNode, parentTree) {
100 |     var index = parentTree.pop();
101 |     var childNode = parentNode.childNodes[index];
102 | 
103 |     if (parentTree.length > 0) {
104 |       return getChildNodeFromParentTree(childNode, parentTree);
105 |     } else {
106 |       return childNode;
107 |     }
108 |   }
109 | 
110 |   var otherNode = getChildNodeFromParentTree(tree2, buildTree(node1, tree1));
111 |   console.log(otherNode);
112 | 
113 | })();


--------------------------------------------------------------------------------
/js/measureSitePerformance.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Measure site performance using Navigation Timing API
 3 |  *
 4 |  * Note: The last event in navigation timing event is LoadEventEnd,
 5 |  * so you have to wait for the window.onload event to fire before calling any Javascript.
 6 |  * Support: IE9+, Android 4.0+, iOS 9+
 7 |  *
 8 |  * Uses:
 9 |  * Network latency (): responseEnd-fetchStart
10 |  * Time taken for page load once the page is received from the server: loadEventEnd-responseEnd
11 |  * Whole process of navigation and page load: loadEventEnd-navigationStart.
12 |  *
13 |  * There are, of course, several ways to "open a page". This is where performance.navigation comes in handy. This API has just two attributes:
14 |  *
15 |  * redirectCount: the number of times the document request was redirected.
16 |  * type: the navigation that lead to the page being loaded.
17 |  *
18 |  * Type is an enumeration with one of three values:
19 |  * 0: action by the user such as clicking a link or entering a URL in the browser address bar
20 |  * 1: page reload
21 |  * 2: navigation by moving back or forward through history
22 |  *
23 |  * Links:
24 |  * http://engineering.tripadvisor.com/html5-navigation-timing/
25 |  * http://www.html5rocks.com/en/tutorials/webperformance/basics/
26 |  * http://developer.telerik.com/featured/introduction-navigation-timing-api/
27 |  * http://engineering.tripadvisor.com/wp-content/uploads/2015/08/timing-overview.png
28 |  *
29 |  * Library:
30 |  * https://github.com/addyosmani/timing.js/blob/master/timing.js
31 |  */
32 | 
33 | window.onload = function () {
34 |   // Check for browser support
35 |   if (!(window.performance && window.performance.timing)) {
36 |     return;
37 |   }
38 |   // Wrap it around a setTimeout to make sure to get it after the load event has ended.
39 |   setTimeout(function () {
40 |     console.log(window.performance.timing);
41 |     console.log(window.performance.navigation);
42 |   }, 0);
43 | };
44 | 
45 | /**
46 |  * User Timing API
47 |  * Support: IE10+, Android 4.4+
48 |  *
49 |  * Links:
50 |  * http://www.noupe.com/design/using-html5-apis-measure-performance-with-user-and-navigation-timing-87346.html
51 |  * http://www.html5rocks.com/en/tutorials/webperformance/usertiming/
52 |  *
53 |  * "window.performance.now()” method, you can start measurement at any place of the web application,
54 |  * for example, within a script that runs a computationally intensive function.
55 |  * In contrast to the “Date(0)” object, which provides system timing as a time stamp,
56 |  * the User Timing API gives you millisecond accuracy with several decimal places.
57 |  * Analyzing the loading performance of an image.
58 |  */
59 | 
60 | var measuring_start = window.performance.now();
61 | var measuring_end;
62 | document.getElementsByTagName('img')[0].addEventListener('load', function() {
63 |   measuring_end = window.performance.now();
64 |   console.log('Image load time: ', measuring_end - measuring_start);
65 | }, false);
66 | 
67 | /**
68 |  * Instead of setting marks with the “now()” method and allocating them a variable,
69 |  * you can use the “mark()” method and give each mark a specific name.
70 |  *
71 |  * “measure()” method then calculates the difference between the two marks.
72 |  */
73 | 
74 | window.performance.mark('start');
75 | window.performance.mark('end');
76 | window.performance.measure('difference', 'start', 'end');
77 | 
78 | // To read out the measuring data use the “getEntriesByType()” method. With this method you can determine
79 | // the names as well as the measured, or rather calculated, timings for the marks set with “mark()” and “measure()”.
80 | 
81 | var marks = window.performance.getEntriesByType('mark');
82 | var measuring_differences = window.performance.getEntriesByType('measure');
83 | 
84 | console.log(mark[0].name + ': ' + mark[0].startTime);
85 | console.log(mark[1].name + ': ' + mark[1].startTime);
86 | console.log(measuring_differences[0].name + ': ' + measuring_differences[0].duration);


--------------------------------------------------------------------------------
/js/flattenNestedArray.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Flatten Nested array
  3 |  *
  4 |  * Eg. Input array [1, 2, [3, 4, [5, 6]]]
  5 |  * On flattening the array it should output [1, 2, 3, 4, 5, 6]
  6 |  *
  7 |  * This array can have multiple types: {}, [], "", undefined, null, 123 -- All valid types inside the array.
  8 |  *
  9 |  * Link:
 10 |  * http://stackoverflow.com/a/29158887/1672655
 11 |  * https://github.com/facebook/fbjs/blob/master/src/core/flattenArray.js
 12 |  * http://www.jstips.co/en/flattening-multidimensional-arrays-in-javascript/
 13 |  *
 14 |  * Iterative Solution works good for large arrays as it prevents the stack from overflowing
 15 |  * http://stackoverflow.com/questions/29991016/iterative-solution-for-flattening-n-th-nested-arrays-in-javascript
 16 |  * http://blog.benoitvallon.com/tips/flattening-arrays-in-javascript/
 17 |  *
 18 |  * Tail call optimization
 19 |  * http://programmers.stackexchange.com/questions/194646/what-methods-are-there-to-avoid-a-stack-overflow-in-a-recursive-algorithm
 20 |  */
 21 | 
 22 | //CASE 1: Recursive Solution: Simple and fast!
 23 | (function () {
 24 |   var arr = [1, 2, [3, 4, [5, 6]]];
 25 | 
 26 |   function flattenArray(arr, result) {
 27 |     if (!result) {
 28 |       var result = [];
 29 |     }
 30 | 
 31 |     for (var i = 0; i < arr.length; i++) {
 32 |       // Fastest and most efficient way to check if a variable is an array.
 33 |       if (Array.isArray(arr[i])) {
 34 |         // Note:
 35 |         // 1. arr[i].constructor === Array also works -- to check if Array.
 36 |         // 2. Constructor check for Array is without string quotes
 37 |         flattenArray(arr[i], result);
 38 |       } else {
 39 |         result.push(arr[i]);
 40 |       }
 41 |     }
 42 |     return result;
 43 |   }
 44 | 
 45 |   console.log(flattenArray(arr)); // Returns [1, 2, 3, 4, 5, 6]
 46 | })();
 47 | 
 48 | // CASE 2: Iterative solution - For large arrays it avoids stack overflow caused by recursive calls
 49 | // Link: http://stackoverflow.com/a/29991836/1672655
 50 | (function () {
 51 |   var input = [1, {a: 2}, [3], [[4, 5], 6], 7];
 52 | 
 53 |   function flatten(input) {
 54 |     var placeholder = [input];
 55 |     var lastIndex = [-1];
 56 |     var output = [];
 57 |     var i;
 58 | 
 59 |     while (placeholder.length) {
 60 |       input = placeholder.pop();
 61 |       i = lastIndex.pop() + 1;
 62 | 
 63 |       for (; i < input.length; i++) {
 64 |         if (Array.isArray(input[i])) {
 65 |           placeholder.push(input);
 66 |           lastIndex.push(i);
 67 |           input = input[i];
 68 |           i = -1;
 69 |         } else {
 70 |           output.push(input[i]);
 71 |         }
 72 |       }
 73 |     }
 74 |     return output;
 75 |   }
 76 | 
 77 |   console.log('Flattened array: ', flatten(input));
 78 | })();
 79 | 
 80 | // CASE 3: Clever iterative solution (Less performant than Case 2)
 81 | // Link: http://stackoverflow.com/a/29991996/1672655
 82 | (function() {
 83 |   var input = [1, {a: 2}, [3], [[4, 5], 6], 7];
 84 |   var output = input;
 85 | 
 86 |   while(output.some(Array.isArray)) {
 87 |     output = [].concat.apply([], output);
 88 |     // Array tricks: http://www.2ality.com/2012/07/apply-tricks.html
 89 |   }
 90 | 
 91 |   console.log('Flattened array: ', output);
 92 | })();
 93 | 
 94 | // CASE 4: One liner!
 95 | (function () {
 96 |   var arr = [1, 2, [3, 4, [5, 6]]];
 97 | 
 98 |   function flatten(a) {
 99 |     return Array.isArray(a) ? [].concat.apply([], a.map(flatten)) : [a];
100 |   }
101 | 
102 |   console.log(flatten(arr)); // Returns [1, 2, 3, 4, 5, 6]
103 | })();
104 | 
105 | // CASE 5: Compact with ES6 arrow syntax!
106 | (function () {
107 |   var arr = [1, 2, [3, 4, [5, 6]]];
108 |   var flatten = a => Array.isArray(a) ? [].concat(...a.map(flatten)) : [a];
109 | 
110 |   console.log(flatten(arr)); // Returns [1, 2, 3, 4, 5, 6]
111 | })();
112 | 
113 | // CASE 6: Using ES6 yield
114 | (function () {
115 |   var arr = [1, 2, [3, 4, [5, 6]]];
116 | 
117 |   function *flatten(a) {
118 |     if (Array.isArray(a)) {
119 |       for (var e of a) {
120 |         yield *flatten(e);
121 |       }
122 |     } else {
123 |       yield a;
124 |     }
125 |   }
126 | 
127 |   console.log(Array.from(flatten(arr))); // Returns [1, 2, 3, 4, 5, 6]
128 | })();
129 | 
130 | // CASE 7: Hacky way using toString()
131 | (function () {
132 |   var arr = [1, 2, [3, 4, [5, 6]]];
133 | 
134 |   function flatten(array) {
135 |     return array.toString().split(',').map(function (n) {
136 |       return parseInt(n, 10);
137 |     });
138 |   }
139 | 
140 |   console.log(flatten(arr)); // Returns [1, 2, 3, 4, 5, 6]
141 | })();
142 | 


--------------------------------------------------------------------------------
/js/vanillahelpers.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Vanilla JS Helpers
  3 |  */
  4 | 
  5 | // Backward compatible Vanilla JS
  6 | // Status constants
  7 | var url = "http://swapi.co/api/people/1/";
  8 | var DONE = 4;
  9 | var OK = 200;
 10 | var ajax = new XMLHttpRequest();
 11 | 
 12 | ajax.open('GET', url);
 13 | ajax.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
 14 | ajax.responseType = 'json';
 15 | ajax.send();
 16 | 
 17 | ajax.onreadystatechange = function () {
 18 |   if (ajax.readyState === DONE && ajax.status === OK) {
 19 |     console.log(JSON.parse(ajax.responseText));
 20 |   }
 21 | };
 22 | 
 23 | // Create HTML
 24 | // Helper function to create an element with attributes
 25 | function tag(name, attrs, text) {
 26 |   var el = document.createElement(name);
 27 | 
 28 |   if (typeof attrs === 'object' && attrs !== null) {
 29 |     Object.keys(attrs).forEach(function (key) {
 30 |       el.setAttribute(key, attrs[key]);
 31 |     });
 32 |   }
 33 | 
 34 |   if (text && typeof text === 'string') {
 35 |     el.textContent = text;
 36 |   }
 37 | 
 38 |   return el;
 39 | }
 40 | 
 41 | // Now create some DOM nodes
 42 | var li = tag('li', {
 43 |   'id': 'unique123',
 44 |   'data-id': 123,
 45 |   'class': 'item active'
 46 | });
 47 | 
 48 | var p = tag('p');
 49 | 
 50 | // querySelectorAll shorthand
 51 | function $(selector) {
 52 |   return document.querySelectorAll(selector);
 53 | }
 54 | 
 55 | // Get siblings
 56 | // http://stackoverflow.com/a/4379864/1672655
 57 | function getAllSiblings(el) {
 58 |   var result = [];
 59 |   var node = el.parentNode.firstChild;
 60 |   while (node && node.nodeType === 1 && node !== el) {
 61 |     result.push(node);
 62 |     node = node.nextElementSibling || node.nextSibling;
 63 |   }
 64 |   return result;
 65 | }
 66 | 
 67 | // Add text to the paragraph and append it to the list item
 68 | p.textContent = 'Lorem ipsum dolor';
 69 | li.appendChild(p);
 70 | 
 71 | // Append the list item to the body
 72 | document.body.appendChild(li);
 73 | 
 74 | // Or append it somewhere else
 75 | document.getElementById('output-div').appendChild(li);
 76 | document.querySelector('.content').appendChild(li);
 77 | 
 78 | // Sample: el.parentNode.children[0].classList.remove('active');
 79 | // return elem.classList && elem.classList.contains('btn');
 80 | 
 81 | // Other DOM methods/props you can use include:
 82 | li.innerHTML = 'some html string';
 83 | var txt = document.createTextNode('hello');
 84 | 
 85 | var my_text = document.createTextNode('Hello!');
 86 | var span = document.getElementById('my-span');
 87 | span.appendChild(my_text);
 88 | // OR
 89 | span.textContent = 'hello';
 90 | // and more...
 91 | 
 92 | // Node.cloneNode(false) - duplicate of the node on which this method was called. (Not its children)
 93 | // appendChild() or insertBefore() method to insert the node to the document (End or beginning)
 94 | // Create a new, plain <span> element
 95 | var sp1 = document.createElement("span");
 96 | // Get a reference to the element, before we want to insert the element
 97 | var sp2 = document.getElementById("childElement");
 98 | // Get a reference to the parent element
 99 | var parentDiv = sp2.parentNode;
100 | // Insert the new element into the DOM before sp2
101 | parentDiv.insertBefore(sp1, sp2);
102 | 
103 | // There is no insertAfter method. It can be emulated by combining the insertBefore method with nextSibling.
104 | parentDiv.insertBefore(sp1, sp2.nextSibling);
105 | 
106 | 
107 | // To convert an array-like object to an array, use Array.from()
108 | // ES6
109 | const foo = document.querySelectorAll('.foo');
110 | const nodes = Array.from(foo);
111 | 
112 | 
113 | // On ready
114 | // Vanilla JS Version
115 | var domReady = function (callback) {
116 |   document.readyState === "interactive" ||
117 |   document.readyState === "complete" ? callback() : document.addEventListener("DOMContentLoaded", callback);
118 | };
119 | 
120 | domReady(function () {
121 | 
122 | });
123 | 
124 | 
125 | // Event delegation
126 | document.addEventListener("click", delegate(buttonsFilter, buttonHandler));
127 | 
128 | // Common helper for event delegation.
129 | function delegate(criteria, listener) {
130 |   return function (e) {
131 |     var el = e.target;
132 |     do {
133 |       if (!criteria(el)) {
134 |         continue;
135 |       }
136 |       e.delegateTarget = el;
137 |       listener.call(this, e);
138 |       return;
139 |     } while ((el = el.parentNode));
140 |   };
141 | }
142 | 
143 | // Custom filter to check for required DOM elements
144 | function buttonsFilter(elem) {
145 |   return (elem instanceof HTMLElement) && elem.matches(".btn");
146 |   // OR
147 |   // For < IE9
148 |   // return elem.classList && elem.classList.contains('btn');
149 | }
150 | 
151 | // Custom event handler function
152 | function buttonHandler(e) {
153 |   var button = e.delegateTarget;
154 |   if (!button.classList.contains("active"))
155 |     button.classList.add("active");
156 |   else
157 |     button.classList.remove("active");
158 | }
159 | // On click
160 | btn.onclick = function () {
161 |   modal.style.display = 'block';
162 | };
163 | 
164 | 
165 | // Get siblings
166 | // Example: To toggle open/close in an accordion
167 | acc.nextElementSibling.classList.toggle("show");
168 | var otherAccordions = getSiblings(elem, '.panel');
169 | function getSiblings(elem, matchesSelector) {
170 |   var siblings = [];
171 |   var sibling = elem.parentNode.firstChild;
172 |   for (; sibling; sibling = sibling.nextSibling) {
173 |     if (sibling instanceof HTMLElement && sibling !== elem && sibling.matches(matchesSelector)) {
174 |       siblings.push(sibling);
175 |     }
176 |   }
177 |   return siblings;
178 | }
179 | 
180 | // Get sibling elements
181 | var getSiblings = function (elem) {
182 |   var siblings = [];
183 |   for (var sibling = elem.parentNode.firstElementChild; sibling; sibling = sibling.nextElementSibling) {
184 |     if (sibling !== elem) {
185 |       siblings.push(sibling);
186 |     }
187 |   }
188 |   return siblings;
189 | };
190 | 
191 | var elem = document.querySelector('#some-element');
192 | var siblings = getSiblings(elem);


--------------------------------------------------------------------------------