Table of contents

Gists
Custom Ready / Load / onLoad
Custom Sort Array
Group and object by key and possible subkey
Union / Enum for JS
1. java like enum can be used for pointer type function
Print separate page from current page
Script to fill form example
Get All CSS for element and children- returns css string
embed, inject, or load an HTML file into an HTML document
Add to Reddit Custom Feed
get middle of webpage
run an async await inline
Conditional load scripts included in HTML by manipulating the type attribute
Currying

Gists

AddToCustomFeed.js

FormFillScript.js

GetCSSFromElement.js

JsEnumUnion.js

NewDocumentAndWindow.js

ReadHTMLToNewDocument.js

SeeFormChange.js

SendFormWithFileInput.js

groupArrayOfObjectsByKey.js

Custom Ready / Load / onLoad

window.addEventListener("load", async function () {
    const promise = await fetchHTMLFile(pathToHTML);
    document.querySelector("#insertion").innerHTML = await promise.text();
}, false,);

or

function ready(fn) {
    if (document.readyState !== "loading") {
        fn();
    }
    else {
        document.addEventListener("DOMContentLoaded", fn);
    }
}

ready(loadHTML);

Custom Sort Array

function sortOptions(a, b) {
    var at = a.textContent, bt = b.textContent;
    return at > bt
           ? 1
           : at < bt
             ? -1
             : 0;
}

if (selectBox) {
    let options = Array.from(selectBox.children).sort(sortOptions);
    selectBox.append(...options);
    addBlankSelectOption(selectBox);
}

Group and object by key and possible subkey

Returns:
{(key to group by) : [{(secondary key) : (key to group by)}]}

groupArrayOfObjectsByKey

Union / Enum for JS

java like enum can be used for pointer type function

resource

Union Example

Print separate page from current page

print pre-defined page

Script to fill form example

fill form

Get All CSS for element and children- returns css string

recursive css

embed, inject, or load an HTML file into an HTML document

fetch and insert html into onload

const pathToHTML = '/assets/HTMLSnippets/Nav.html';

async function fetchHTMLFile(path) {
    return await fetch(path);
}

async function loadHTML() {
    console.log(navigator.userAgent);
    if (/(iphone|android|blackberry|webos)/i.test(navigator.userAgent)) {
        const promise = await fetchHTMLFile(pathToHTML);
        document.querySelector('#insertion').innerHTML = await promise.text();
    }
}

function ready(fn) {
    if (document.readyState !== 'loading') {
        fn();
    }
    else {
        document.addEventListener('DOMContentLoaded', fn);
    }
}

ready(loadHTML);

load html and css file into html doc

//************** Add path to files to test **********************//
//path to html file you want to use
const pathToHTML = "/Yuma_Regional/yuma_regional_launch.html";
//path to html file you want to use

//path to css file
const cssFilePath = "01Launch_Page_Default_Template.css";
//path to css file
//************** Add path to files to test **********************//

const cssLink = document.createElement("link");
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
cssLink.href = cssFilePath;
document.querySelector("head").appendChild(cssLink);

window.addEventListener("load", async function () {
    const promise = await fetchHTMLFile(pathToHTML);
    const html = await promise.text();
    document.querySelector("body").innerHTML = html;
}, false,);

async function fetchHTMLFile(path) {
    return await fetch(path);
}

Create a new document and open in a new window using ReadableStream

using readable stream takes html file and inserts it into a current window document

inject html file into the current window

Add to Reddit Custom Feed

get middle of webpage

const x = window.innerWidth / 2;
const y = window.innerHeight / 2;

const eye = document.documentElement;
const {left, top, width, height} = eye.getBoundingClientRect();
const centerX = left + width / 2;
const centerY = top + height / 2;

run an async await inline

(async () => {
    await createDataUrls(clonedTableArray, dimensionsObj, additionalSlides, resolveURLCreation, rejectURL,);
})();

Conditional load scripts included in HTML by manipulating the type attribute

if (conditional === true) {
    const cScripts = document.querySelectorAll(".conditional");

    cScripts.forEach((item) => {
        const script = document.createElement("script");

        const attrs = item.getAttributeNames();

        attrs.forEach((attr) => {
            script.setAttribute(attr, item.getAttribute(attr));
        });

        script.type = "text/javascript";

        script.async = false;

        item.remove();

        document.head.appendChild(script);
    });
}

Currying

Basically, it allows you to transform a function like f(a, b, c) into something like f(a)(b)(c).
What that means is that you can split up a function with multiple arguments into a
sequence of functions with one argument each.

const newUser = function (name, age, skill) {
    return {
        name, age, skill,
    };
};

newUser("John", 27, "JS");

Now to the curry part:

const newUser = function (name) {
  return function (age) {
    return function (skill) {
      return {
        name,
        age,
        skill,
      };
    };
  };
};

newUser("John")(27)("JS");

Add in some arrow functions and voila:

const newUser = (name) => (age) => (skill) => {
  name, age, skill;
};

The purpose of all this you might ask?

Think about situations when you don’t have the complete data available in the beginning and you still need your function to gradually pass through
your app and receive its arguments step by step as
more and more data is arriving, until you add the final argument and receive the output.