Utility methods that are intended for use in Angular.io web applications developed by Educational Media Solutions.
Find the web application template source code on GitHub to review implementation in context.
Find a working example of this component here.
Note that this module does not include components or services that must be declared in your module.ts file.
These utility methods act like globally scoped functions (though they're not really).
Note that there is a peer dependency defined for this library that must also be installed (underscore.js)
npm i underscore ems-web-app-utils --save
Component Usage:
import { Component, AfterViewInit } from '@angular/core';
import { trace, delay } from "ems-web-app-utils";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent implements AfterViewInit {
constructor() {
}
ngAfterViewInit() {
delay(() => trace("view initialized"));
}
}
Can be used as the callback argument to Array.sort
(["e","a","c", "d", "b"]).sort(alphabetize); // ["a", "b", "c", "d", "e"]
Also can be used to alphabetize array of objects using key (note: this method mutates original array)
alphabetize([{"label": "b"}, { "label": "a" }], "label"); //[{ "label": "a" }, {"label": "b"}]
Creates a deep copy of the supplied object. References are not maintained. Recursion not supported.
const copy = clone({hello: [{ nested: "object", params: [1,2,3] }]}); //{hello: [{ nested: "object", params: [1,2,3] }]}
dateStrings(date?: Date): { year: string, month: string, date: string, time: string seconds: string }
Returns a hash of date properties as strings (for formatting)
const dateinfo = dateStrings(new Date("2021/01/01")); { year: "2021", "month": "01", "date": "01", "time": "00:00", "seconds": "00" }
Alias for window.setTimeout
delay(() => console.log("test")); // same as window.setTimeout(() => console.log("test"), 0);
delay(() => console.log("test"),100); // same as window.setTimeout(() => console.log("test"), 100);
Downloads in memory string as file (in web browser)
download("header 1,header 2\nvalue 1, value 2\nvalue 3, value 4","Sample Spreadseet", "csv"); //outputs: "sample-spreadsheet.csv" as CSV file
alias for falsy
Returns an array of keys in an enum typescript object
enum Grade {
K = "K",
Grade1 = "1",
Grade2 = "2",
Grade3 = "3",
Grade4 = "4",
Grade5 = "5"
}
const keys = enumKeys(Grade); // ["K", "Grade1", "Grade2", "Grade3", "Grade4", "Grade5"];
Returns an array of values in an enum typescript object
enum Grade {
K = "K",
Grade1 = "1",
Grade2 = "2",
Grade3 = "3",
Grade4 = "4",
Grade5 = "5"
}
const values = enumValues(Grade); // ["K", "1", "2", "3", "4", "5"];
Evaluates whether supplied object is falsy or empty
const obj = {}; falsy(obj); //true
const obj = {hello: "world"}; falsy(obj); //false
const arr = []; falsy(arr); //true
const arr = [1,2,3]; falsy(arr); //false
const str = ""; falsy(str); //true
const str = " "; falsy(str); //true
const str = "hello"; falsy(str); //false
const bool = false; falsy(bool); //true
const bool = true; falsy(bool); //false
const boolString = "False"; falsy(boolString); //true
const boolString = "false"; falsy(boolString); //true
const boolString = "FalSe"; falsy(boolString); //true
const boolString = "true"; falsy(boolString); //false
const num = 0; falsy(num); //true
const num = -1; falsy(num); //false
const num = 1; falsy(num); //false
Sets browser focus on supplied element
const $button = $("body").add("<button class='focus-me'>Focus Me</button>");
focus(".focus-me"); //focuses button after one turn of JS engine
Handles rounding errors when calculating sub percentages of a data set. Ensures that all segments add up to 100%.
getLargestRemainder([24, 25, 50]); // [25,25,50]
Returns get parameters from the browser url
getparams(); // { debug: true, userId: 1, hello: "world" } where http://localhost/?debug=true&userId=1&hello=world
getparams("hello"); // "world" where http://localhost/?debug=true&userId=1&hello=world
alias for truthy
Converts string to kebab case
kebab("Hello Big_World 2022-01-01"); // "hello-big-world-2022-01-01"
Swaps an item in an array with a newer value
const array = [ { id: 1, name: "Old Name" }, { id: 2, name: "Test User" }];
replaceItem(array, {id: 1, name: "New Name"}); // [ { id: 1, name: "New Name" }, { id: 2, name: "Test User" }]
const array2 = [ { id: 1, name: "Old Name" }, { id: 2, name: "Test User" }];
replaceItem(array, { id: 200, name: "Test User" }, "name"); // [ { id: 1, name: "Old Name" }, { id: 200, name: "Test User" }]
A combination of tick
and delay
called with an async function to pause the execution for the provided number of milliseconds.
async function doSomething() {
$(".element-to-transition-out.render").removeClass("render");
await sleep(250)
$(".element-to-transition-out").hide();
$(".element-to-transition-in").show();
await sleep(0);
$(".element-to-transition-in").addClass("render");
await sleep(250);
console.log("transition complete!");
}
Converts string to snake case
snakecase("Hello Big-World 2022-01-01"); // "hello_big_world_2022_01_01"
Awaits one turn of the JS engine
async function test() {
$(".torender").css("display","block").addClass("transparent"); //renders the object on screen with 0 opactiy
await tick(); // browser tick paints the above state
$(".torender").removeClass("transparent); //animates opacity to 1 to fade in object
}
Returns MySQL date/time string from optionally supplied date
const date = new Date("2021/01/01");
const dateString = timestamp(date); // "2021-01-01 00:00:00";
const dateString2 = timestamp(date, false); // "2021-01-01";
const nowDateString = timestamp(); // whatever the current date time is
Outputs each argument to a line in console log IF ?debug=true parameter is set on the url (This method is an homage to the like-named, late great ActionScript 2 utility function)
trace(someObject, anotherObject, "---", 123); //four console logs at http://localhost/?debug=true
Removes leading and trailing whitespace from string
trim(" hello "); // "hello"
Evaluates whether supplied object is truthy or populated
const obj = {}; truthy(obj); //false
const obj = {hello: "world"}; truthy(obj); //true
const arr = []; truthy(arr); //false
const arr = [1,2,3]; truthy(arr); //true
const str = ""; truthy(str); //false
const str = " "; truthy(str); //false
const str = "hello"; truthy(str); //true
const bool = false; truthy(bool); //false
const bool = true; truthy(bool); //true
const boolString = "False"; truthy(boolString); //false
const boolString = "false"; truthy(boolString); //false
const boolString = "FalSe"; truthy(boolString); //false
const boolString = "true"; truthy(boolString); //true
const num = 0; truthy(num); //false
const num = -1; truthy(num); //true
const num = 1; truthy(num); //true
Applies regex to test for valid email
validateEmail("test@test"); //false
validateEmail("test@test.co"); //true
Uses regex ex:
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
Determines whether the supplied object is within the browser's viewport
const inRangeElement = $(".block.inview").get(0);
const outOfRangeElement = $(".block.waydownbelow").get(0);
let inView = viewport(inRangeElement); // true;
inView = viewport(outOfRangeElement); // false
npm run build
git commit -a -m "message"
npm version patch
npm publish