grapples

Grapples

• JavaScript package of 13 useful functions.
• Made to saving time, simplify codes & code shortening.
• Grapples are pretty much like React-Hooks but in Vanilla JavaScript.

CDN Download

<script src="https://cdn.jsdelivr.net/npm/grapples@latest/Grapples.js"></script>

NPM Download

npm i grapples@latest --save

To get started, let's first take a look at all the grapples.

• Changes Detection

  • applyOnVariableChanges - run a function when a specified variable value changes.
  • applyOnCookieChanges - run a function when a specified cookie...
  • applyOnLocalStorageChanges - run a function when a specified local storage item...
  • applyOnSessionStorageChanges - run a function when a specified session storage item...

• Utility

  • applyClick - click a set of elements in one function.
  • applyFocus - focus on the element...
  • applyUniqueId - give a set of elements a generated unique id.
  • applyUniqueClass - give a set of elements...
  • applyScript - Import Any Scripts By Their URL.

• Temporary Data

  • applyTempCookie - create a cookie with automatic deletion after duration.
  • applyTempLocalStorage - create a local storage item with auto...
  • applyTempSessionStorage - create a session storage item with auto...

• Events

  • applyOnHover - run a function when hovering over a specified element.

Changes Detection Usage

• applyOnVariableChanges:

let boolean = false;
let runOnChange = () => console.log(`The variable value changed`);
applyOnVariableChanges(() => boolean, runOnChange);
// the function "runOnChange" will run when the variable "boolean" changed.
boolean = true; // console: "The variable value changed"
// Notes:
// You must define a function returns the variable same like the first argument in the grapple.
// You can define a third argument for the number of times the 'runOnChange' function is run.
// 3 = Just run the function for the first 3 changes.

• applyOnCookieChanges:

document.cookie = "text=GrapplesAreAmazing; path=/;";
let runOnChange = () => console.log(`The cookie value changed`);
applyOnCookieChanges("text", runOnChange);
// the function "runOnChange" will run when the cookie "text" changed.
document.cookie = "text=GrapplesAreCool; path=/;"; // console: "The cookie value changed"
// Note: You can define a third argument for the number of times the 'runOnChange' function is run.
// 3 = Just run the function for the first 3 changes.

• applyOnLocalStorageChanges:

localStorage.setItem("binary", "01001010 01010011");
let runOnChange = () => console.log(`The local storage item value changed`);
applyOnLocalStorageChanges("binary", runOnChange);
// the function "runOnChange" will run when the local storage item "text" changed.
localStorage.setItem("binary", "01101010 01110011"); // console: "The local storage item value changed"
// Note: You can define a third argument for the number of times the 'runOnChange' function is run.
// 3 = Just run the function for the first 3 changes.

• applyOnSessionStorageChanges:

sessionStorage.setItem("binary", "01001010 01010011");
let runOnChange = () => console.log(`The session storage item value changed`);
applyOnSessionStorageChanges("binary", runOnChange);
// the function "runOnChange" will run when the session storage item "text" changed.
sessionStorage.setItem("binary", "01101010 01110011"); // console: "The session storage item value changed"
// Note: You can define a third argument for the number of times the 'runOnChange' function is run.
// 3 = Just run the function for the first 3 changes.

Utility

• applyClick:

applyClick(["button.btn1", "button.btn2", "button.btn3"]);
// The grapple will click all the elements in the array.
// Note: you must define the elements by their ids, classes or tags name (querySelector).

• applyFocus:

applyFocus("input.email");
// The grapple will focus on the element.
// Note: you must define the element by their ids, classes or tags name (querySelector).

• applyUniqueId:

applyUniqueId(["h1.heading1", "h2.heading2", "a.anchor"]);
// The grapple will set a unique id for all the elements in the array.
// Note: you must define the element by their ids, classes or tags name (querySelector).

• applyUniqueClass:

applyUniqueClass(["h1#heading1", "h2#heading2", "a#anchor"]);
// The grapple will add a unique class for all the elements in the array.
// Note: you must define the element by their ids, classes or tags name (querySelector).

• applyScript:

let url = "https://cdn.jsdelivr.net/npm/grapples@latest/Grapples.js";
applyScript(url)
    .then(() => {
         console.log("Script Uploaded To The Page Successfully");
    }).catch(error => {
         console.log("Cannot Uploading Script");
    });
// Note: module-type scripts are not supported.

Temporary Data

• applyTempCookie:

let key = "username";
let value = "jehaad";
let durationInMinutes = 10;
let path = "/";

applyTempCookie(key, value, durationInMinutes, path);
// Note: to cancel the deletion don't define the third argument

• applyTempLocalStorage:

let key = "loginStatus";
let value = true;
let durationInMinutes = 15;

applyTempLocalStorage(key, value, durationInMinutes);
// Note: to cancel the deletion don't define the third argument

• applyTempSessionStorage:

let key = "password";
let value = 123456;
let durationInMinutes = 2;

applyTempSessionStorage(key, value, durationInMinutes);
// Note: to cancel the deletion don't define the third argument

Events

• applyOnHover:

applyOnHover(["#div"], function() {
    console.log("Don't hover me");
});
// Note: you must define the element by their ids, classes or tags name (querySelector).