JS refactoring part 2: helper functions, poyfills

assets/js/_helpers.js

@@ -0,0 +1,233 @@
+'use strict';
+// Contains only auxiliary methods
+// May be included and executed unlimited number of times without any consequences
+
+// Polyfills for IE11
+Array.prototype.find = Array.prototype.find || function (condition) {
+    return this.filter(condition)[0];
+};
+Array.from = Array.from || function (source) {
+    return Array.prototype.slice.call(source);
+};
+NodeList.prototype.forEach = NodeList.prototype.forEach || function (callback) {
+    Array.from(this).forEach(callback);
+};
+String.prototype.includes = String.prototype.includes || function (searchString) {
+    return this.indexOf(searchString) >= 0;
+};
+String.prototype.startsWith = String.prototype.startsWith || function (prefix) {
+    return this.substr(0, prefix.length) === prefix;
+};
+Math.sign = Math.sign || function(x) {
+    x = +x;
+    if (!x) return x; // 0 and NaN
+    return x > 0 ? 1 : -1;
+};
+if (!window.hasOwnProperty('HTMLDetailsElement') && !window.hasOwnProperty('mockHTMLDetailsElement')) {
+    window.mockHTMLDetailsElement = true;
+    const style = 'details:not([open]) > :not(summary) {display: none}';
+    document.head.appendChild(document.createElement('style')).textContent = style;
+
+    addEventListener('click', function (e) {
+        if (e.target.nodeName !== 'SUMMARY') return;
+        const details = e.target.parentElement;
+        if (details.hasAttribute('open'))
+            details.removeAttribute('open');
+        else
+            details.setAttribute('open', '');
+    });
+}
+
+// Monstrous global variable for handy code
+window.helpers = window.helpers || {
+    /**
+     * https://en.wikipedia.org/wiki/Clamping_(graphics)
+     * @param {Number} num Source number
+     * @param {Number} min Low border
+     * @param {Number} max High border
+     * @returns {Number} Clamped value
+     */
+    clamp: function (num, min, max) {
+        if (max < min) {
+            var t = max; max = min; min = t; // swap max and min
+        }
+
+        if (max < num)
+            return max;
+        if (min > num)
+            return min;
+        return num;
+    },
+
+    /** @private */
+    _xhr: function (method, url, options, callbacks) {
+        const xhr = new XMLHttpRequest();
+        xhr.open(method, url);
+
+        // Default options
+        xhr.responseType = 'json';
+        xhr.timeout = 10000;
+        // Default options redefining
+        if (options.responseType)
+            xhr.responseType = options.responseType;
+        if (options.timeout)
+            xhr.timeout = options.timeout;
+
+        if (method === 'POST')
+            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+        // better than onreadystatechange because of 404 codes https://stackoverflow.com/a/36182963
+        xhr.onloadend = function () {
+            if (xhr.status === 200) {
+                if (callbacks.on200) {
+                    // fix for IE11. It doesn't convert response to JSON
+                    if (xhr.responseType === '' && typeof(xhr.response) === 'string')
+                        callbacks.on200(JSON.parse(xhr.response));
+                    else
+                        callbacks.on200(xhr.response);
+                }
+            } else {
+                // handled by onerror
+                if (xhr.status === 0) return;
+
+                if (callbacks.onNon200)
+                    callbacks.onNon200(xhr);
+            }
+        };
+
+        xhr.ontimeout = function () {
+            if (callbacks.onTimeout)
+                callbacks.onTimeout(xhr);
+        };
+
+        xhr.onerror = function () {
+            if (callbacks.onError)
+                callbacks.onError(xhr);
+        };
+
+        if (options.payload)
+            xhr.send(options.payload);
+        else
+            xhr.send();
+    },
+    /** @private */
+    _xhrRetry: function(method, url, options, callbacks) {
+        if (options.retries <= 0) {
+            console.warn('Failed to pull', options.entity_name);
+            if (callbacks.onTotalFail)
+                callbacks.onTotalFail();
+            return;
+        }
+        helpers._xhr(method, url, options, callbacks);
+    },
+    /**
+     * @callback callbackXhrOn200
+     * @param {Object} response - xhr.response
+     */
+    /**
+     * @callback callbackXhrError
+     * @param {XMLHttpRequest} xhr
+     */
+    /**
+     * @param {'GET'|'POST'} method - 'GET' or 'POST'
+     * @param {String} url - URL to send request to
+     * @param {Object} options - other XHR options
+     * @param {XMLHttpRequestBodyInit} [options.payload=null] - payload for POST-requests
+     * @param {'arraybuffer'|'blob'|'document'|'json'|'text'} [options.responseType=json]
+     * @param {Number} [options.timeout=10000]
+     * @param {Number} [options.retries=1]
+     * @param {String} [options.entity_name='unknown'] - string to log
+     * @param {Number} [options.retry_timeout=1000]
+     * @param {Object} callbacks - functions to execute on events fired
+     * @param {callbackXhrOn200} [callbacks.on200]
+     * @param {callbackXhrError} [callbacks.onNon200]
+     * @param {callbackXhrError} [callbacks.onTimeout]
+     * @param {callbackXhrError} [callbacks.onError]
+     * @param {callbackXhrError} [callbacks.onTotalFail] - if failed after all retries
+     */
+     xhr: function(method, url, options, callbacks) {
+        if (!options.retries || options.retries <= 1) {
+            helpers._xhr(method, url, options, callbacks);
+            return;
+        }
+
+        if (!options.entity_name) options.entity_name = 'unknown';
+        if (!options.retry_timeout) options.retry_timeout = 1000;
+        const retries_total = options.retries;
+        let currentTry = 1;
+
+        const retry = function () {
+            console.warn('Pulling ' + options.entity_name + ' failed... ' + (currentTry++) + '/' + retries_total);
+            setTimeout(function () {
+                options.retries--;
+                helpers._xhrRetry(method, url, options, callbacks);
+            }, options.retry_timeout);
+        };
+
+        callbacks._onError = callbacks.onError;
+        callbacks.onError = function (xhr) {
+            if (callbacks._onError)
+                callbacks._onError();
+            retry();
+        };
+
+        callbacks._onTimeout = callbacks.onTimeout;
+        callbacks.onTimeout = function (xhr) {
+            if (callbacks._onTimeout)
+                callbacks._onTimeout();
+            retry();
+        };    
+        helpers._xhrRetry(method, url, options, callbacks);
+    },
+
+    /**
+     * @typedef {Object} invidiousStorage
+     * @property {(key:String) => Object} get
+     * @property {(key:String, value:Object)} set
+     * @property {(key:String)} remove
+     */
+
+    /**
+     * Universal storage, stores and returns JS objects. Uses inside localStorage or cookies
+     * @type {invidiousStorage}
+     */
+    storage: (function () {
+        // access to localStorage throws exception in Tor Browser, so try is needed
+        let localStorageIsUsable = false;
+        try{localStorageIsUsable = !!localStorage.setItem;}catch(e){}
+
+        if (localStorageIsUsable) {
+            return {
+                get: function (key) { if (localStorage[key]) return JSON.parse(decodeURIComponent(localStorage[key])); },
+                set: function (key, value) { localStorage[key] = encodeURIComponent(JSON.stringify(value)); },
+                remove: function (key) { localStorage.removeItem(key); }
+            };
+        }
+
+        console.info('Storage: localStorage is disabled or unaccessible trying cookies');
+        return {
+            get: function (key) {
+                const cookiePrefix = key + '=';
+                function findCallback(cookie) {return cookie.startsWith(cookiePrefix);}
+                const matchedCookie = document.cookie.split('; ').find(findCallback);
+                if (matchedCookie) {
+                    const cookieBody = matchedCookie.replace(cookiePrefix, '');
+                    if (cookieBody.length === 0) return;
+                    return JSON.parse(decodeURIComponent(cookieBody));
+                }
+            },
+            set: function (key, value) {
+                const cookie_data = encodeURIComponent(JSON.stringify(value));
+
+                // Set expiration in 2 year
+                const date = new Date();
+                date.setFullYear(date.getFullYear()+2);
+
+                document.cookie = key + '=' + cookie_data + '; expires=' + date.toGMTString();
+            },
+            remove: function (key) {
+                document.cookie = key + '=; Max-Age=0';
+            }
+        };
+    })()
+};

assets/js/community.js

@@ -1,13 +1,6 @@
 'use strict';
 var community_data = JSON.parse(document.getElementById('community_data').textContent);
 
-String.prototype.supplant = function (o) {
-    return this.replace(/{([^{}]*)}/g, function (a, b) {
-        var r = o[b];
-        return typeof r === 'string' || typeof r === 'number' ? r : a;
-    });
-};
-
 function hide_youtube_replies(event) {
     var target = event.target;
 
@@ -38,67 +31,52 @@ function show_youtube_replies(event) {
     target.setAttribute('data-sub-text', sub_text);
 }
 
-function number_with_separator(val) {
-    while (/(\d+)(\d{3})/.test(val.toString())) {
-        val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
-    }
-    return val;
-}
-
 function get_youtube_replies(target, load_more) {
     var continuation = target.getAttribute('data-continuation');
 
     var body = target.parentNode.parentNode;
     var fallback = body.innerHTML;
     body.innerHTML =
         '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
-
+    
     var url = '/api/v1/channels/comments/' + community_data.ucid +
         '?format=html' +
         '&hl=' + community_data.preferences.locale +
         '&thin_mode=' + community_data.preferences.thin_mode +
         '&continuation=' + continuation;
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 10000;
-    xhr.open('GET', url, true);
 
-    xhr.onreadystatechange = function () {
-        if (xhr.readyState === 4) {
-            if (xhr.status === 200) {
-                if (load_more) {
-                    body = body.parentNode.parentNode;
-                    body.removeChild(body.lastElementChild);
-                    body.innerHTML += xhr.response.contentHtml;
-                } else {
-                    body.removeChild(body.lastElementChild);
+    helpers.xhr('GET', url, {}, {
+        on200: function (response) {
+            if (load_more) {
+                body = body.parentNode.parentNode;
+                body.removeChild(body.lastElementChild);
+                body.innerHTML += response.contentHtml;
+            } else {
+                body.removeChild(body.lastElementChild);
 
-                    var p = document.createElement('p');
-                    var a = document.createElement('a');
-                    p.appendChild(a);
+                var p = document.createElement('p');
+                var a = document.createElement('a');
+                p.appendChild(a);
 
-                    a.href = 'javascript:void(0)';
-                    a.onclick = hide_youtube_replies;
-                    a.setAttribute('data-sub-text', community_data.hide_replies_text);
-                    a.setAttribute('data-inner-text', community_data.show_replies_text);
-                    a.innerText = community_data.hide_replies_text;
+                a.href = 'javascript:void(0)';
+                a.onclick = hide_youtube_replies;
+                a.setAttribute('data-sub-text', community_data.hide_replies_text);
+                a.setAttribute('data-inner-text', community_data.show_replies_text);
+                a.innerText = community_data.hide_replies_text;
 
-                    var div = document.createElement('div');
-                    div.innerHTML = xhr.response.contentHtml;
+                var div = document.createElement('div');
+                div.innerHTML = response.contentHtml;
 
-                    body.appendChild(p);
-                    body.appendChild(div);
-                }
-            } else {
-                body.innerHTML = fallback;
+                body.appendChild(p);
+                body.appendChild(div);
             }
+        },
+        onNon200: function (xhr) {
+            body.innerHTML = fallback;
+        },
+        onTimeout: function (xhr) {
+            console.warn('Pulling comments failed');
+            body.innerHTML = fallback;
         }
-    };
-
-    xhr.ontimeout = function () {
-        console.warn('Pulling comments failed.');
-        body.innerHTML = fallback;
-    };
-
-    xhr.send();
+    });
 }