Skip to content
/ gorilla.js Public

gorilla.js 🦍 - the only javascript utility library 🦄 you'll ever need.

js.gorilla.moe

License

GPL-2.0 license
3 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

mistweaverco/gorilla.js

BranchesTags

Repository files navigation

gorilla.js

gorilla.js 🦍 - the only javascript utility library 🦄 you'll ever need.

Small

Minified 6.41 KB 💪; Minified and Gzipped only 2.6 KB bytes 🔥!

jQuery 3.0.0-alpha1 is 85 KB 😢; Minified and Gzipped still a whopping 🍔 29 KB 🙈.

Supported Browsers

Internet Explorer 9

Don't be sad, we got you IE >= 9 users covered ❤.

(Even if this means supporting 7 years old software 🤷)

There's a gorilla.compat.min.js version, which even works in IE9 🚀👻!

Methods

gorilla.after

Wrapper for appending elements after some element.

var newListElement = gorilla.create("li")
        .attr("style", "color:red;").html("New List Element");
// Appends a new list element after the 3rd li found in the DOM
gorilla.find("li").get(2).after(newListElement);

gorilla.ajax

Simple ajax request wrapper which returns a promise.

gorilla.ajax({
        url: "pokemon/pokedex.json",
        method: "POST",
        cache: true,
        requestContentType: "application/x-www-form-urlencoded",
        headers: {
                "X-Gorilla-Custom-Header": "This is really awesome!",
                "X-Gorilla-Custom-Header2": "Gorilla Fam for life!",
                "X-Gorilla-Style": "Best style in the universe!"
        },
        params: {
                format: "json",
                query: "all"
        }
})
.then((result) => {
        console.log(result);
})
.catch((err) => {
        console.log(err);
});

Consecutive ajax requests made easy and without callback hell:

// first, load pokemon items
gorilla.ajax({ url: "pokemon/items.json" })
.then((pokemonItems) => {
        console.log(JSON.parse(pokemonItems));
        // after pokemon items have been loaded, load pokemon skills
        return gorilla.ajax({ url: "pokemon/skills.json" });
})
.catch((errPokemonItems) => {
        // loading pokemon items failed
        console.log(errPokemonItems);
})
.then((pokemonSkills) => {
        console.log(JSON.parse(pokemonSkills));
        // after pokemon skills have been loaded, load pokemon types
        return gorilla.ajax({ url: "pokemon/types.json" });
})
.catch((errPokemonSkills) => {
        // loading pokemon skills failed
        console.log(errPokemonSkills);
})
.then((pokemonTypes) => {
        // these are the pokemon types
        console.log(JSON.parse(pokemonTypes));
})
.catch((errPokemonTypes) => {
        // loading pokemon types failed
        console.log(errPokemonTypes);
});

gorilla.append

Wrapper for appendChild.

var newListElement = gorilla.create("li")
        .attr("style", "color:red;").html("New List Element");
gorilla.find("ul").get(0).append(newListElement);

gorilla.attr

Wrapper for setAttribute and getAttribute.

// retrieve `href` value of first link
gorilla.find("a").get(0).attr("href")

// set href value of first link
gorilla.find("a").get(0).attr("href", "#foo");

Set multiple values at once:

gorilla.find("a").get(0).attr({
  "href": "test.html",
  "data-foo": "baz",
  "data-bar": "foo"
});

gorilla.before

Wrapper for insertBefore.

var newFirstListElement = gorilla.create("li").html("First List Element");
// Insert `newFirstListElement` before the first `li` found.
gorilla.find("li").get(0).before(newFirstListElement);

gorilla.copyToClipboard

Copies text to the clipboard.

let text = "This is some awesome text.";
gorilla.copyToClipboard(text);

gorilla.compareJSON

Compares to JSON structures and returns either true if they are identical in terms of properties, or false if they don't have each others properties.

var json1 = {
        foo: true,
        moo: false
};

var json2 = {
        foo: true,
        moo: false
};

var json3 = {
        foo: true,
        moo: true
};

var json4 = {
        foo: false,
        moo: false
};

// This should return true, because they are seen as "equal"
console.log(gorilla.compareJSON(json1, json2);

// This should return false, because they lack have the same
// properties, but not the same values for each property
console.log(gorilla.compareJSON(json3, json4);

gorilla.css

Gets the getComputedStyle for an element. Also can set CSS styles (<div style="color:red;border:1px solid black;">).

When used as a setter, it returns the element itself. When used as a getter, it returns the values.

Get specific CSS style:

gorilla.css(el, "color");
// or
gorilla.find("li").get(0).css("color");

Get all CSS styles:

gorilla.css(el);
// or
gorilla.find("li").get(0).css();

Get specific CSS styles:

gorilla.css(el, ["color", "border"]);
// or
gorilla.find("li").get(0).css(["color", "border"]);

Set CSS styles:

gorilla.css(el, {
        color: "#f00",
        border: "1px solid #000"
});
// or
gorilla.find("li").get(0).css({
        color: "#f00",
        border: "1px solid #000"
});

gorilla.create

Returns the element.

Wrapper for document.createElement.

gorilla.create("input")
        .attr("type", "text")
        .attr("placeholder", "E-Mail");

gorilla.data

Helper for setting and getting data- attributes.

Set single data- attribute

Returns the element.

Set one data- attribute (set data-autosuggest to string true):

gorilla.create("input")
        .data("autosuggest", "true");

Set multiple data- attributes at once

Returns the element.

gorilla.create("input")
        .data({
                autosuggest: true,
                timeout: false
                keynav: true
        });

Get single data- value

Returns a string or null.

Get data- value (get the value for data-autosuggest):

gorilla.find("input").get(0).data("autosuggest");

Get multiple data- values at once

Returns JSON.

gorilla.find("input").get(0).data([
  "autosuggest",
  "timeout"
]);

The output would look something like this:

{
  "autosuggest": "true",
  "timeout": "25000"
}

gorilla.DOMReady

Simple DOMReady wrapper.

gorilla.DOMReady(function() {
        alert("dom is ready!");
});

gorilla.find

Advanced querySelectorAll with attaching convenience methods to elements. This method always returns an array of objects and you either need to use the get method or the find("selector")[3] element by index method to get the element.

gorilla.find("ul").get(0)
        .find("li").get(2)
        .find("a").get(0)
        .on("click", function(evt) {
                evt.preventDefault();
                alert("click");
        });

gorilla.getImageData

Returns a JSON including width and height of the requested image.

gorilla.getImageData("https://gorilla.moe/favicon.ico")
        .then((res) => console.log(res))
        .catch((err) => console.log(err))

gorilla.getParsedURL

Returns a parsed URL object.

gorilla.getParsedURL("https://cdn.gorilla.moe/conor-mcgregor-song.mp4?gorilla=moe#hashicorp");

Returns

{
        "hash": "#hashicorp",
        "host": "cdn.gorilla.moe",
        "hostname": "cdn.gorilla.moe",
        "href": "cdn.gorilla.moe",
        "pathname": "/conor-mcgregor-song.mp4",
        "port": undefined,
        "protocol": "https",
        "search": "?gorilla=moe"
}

gorilla.getRandomNumber

Returns a random number.

gorilla.getRandomNumber();
var min = -200; // if omitted, defaults to 0
var max = 200; //  if omitted, defaults to Number.MAX_SAFE_INTEGER
gorilla.getRandomNumber(min, max);

gorilla.getUnixtime

Returns the current UNIX-Timestamp.

console.log(gorilla.getUnixtime());

gorilla.getURLParams

Returns a URL params object.

console.log(gorilla.getURLParams("index.php?param1=value1&param2=value2"));

Should return;

{
        "param1": "value1",
        "param2": "value2"
}

gorilla.height

Setter and getter for (DOM-)element height.

Usage:

gorilla.height(el); // get the height of el
gorilla.find("ul").get(0).height(); // get the height of the first <ul> tag.

Set the height (numbers only - translated to px):

gorilla.height(el, 200); // set height of el to 200px
// this translates to el.style.height = '200px';

// set the height of the first <ul> tag to 200px
gorilla.find("ul").get(0).height(200);

gorilla.html

Wrapper for innerHTML.

gorilla.find("a").get(0).html("This is a Hyperlink.");

gorilla.inArray

Utility function. Checks for existence of needle in array.

gorilla.inArray(array, needle);

// returns true
gorilla.inArray([1, 2, 3], 1);
// returns true
gorilla.inArray([1, 2, 3], 3);
// returns true
gorilla.inArray([1, 2, 3], 2);
// returns false
gorilla.inArray([1, 2, 3], 4);

gorilla.loadCSS

Easy to use CSS file loader. Creates a <link rel="stylesheet" href=""> tag and returns a promise.

gorilla.loadCSS("https://cdn.sstatic.net/Shared/stacks.css")
.then((el) => {
        // link tag
        console.log(el);
})
.catch((err) => {
        console.log(err);
});

or multiple files, one by one..

gorilla.loadCSS("https://cdn.sstatic.net/Shared/stacks.css")
.then((el) => {
        console.log(el);
        return gorilla.loadCSS("https://cdn.sstatic.net/Sites/stackoverflow/primary-unified.css");
})
.catch((err) => console.log(err))
.then((el) => {
        console.log(el);
})
.catch((err) => console.log(err));

gorilla.loadJS

Easy to use JavaScript file loader. Create a <script> tag and returns a promise.

gorilla.loadJS("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/core.js")
.then((el) => {
        // script tag
        console.log(el);
})
.catch((err) => {
        console.log(err);
});

or multiple files, one by one..

gorilla.loadJS("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/core.js")
.then((el) => {
        console.log(el);
        return gorilla.loadJS("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js");
})
.catch((err) => console.log(err))
.then((el) => {
        console.log(el);
})
.catch((err) => console.log(err));

gorilla.log

Sexy wrapper around console.log, console.warn, console.debug and console.error.

// defaults to info (green)
gorilla.log()("Hello there.", "hai", 1, true, {foo: true, bar: 'baz'});
// explicitly call info (green)
gorilla.log("info")("Hello there.", "hai", 1, true, {foo: true, bar: 'baz'});
// warn (yellow)
gorilla.log("warn")("Hello there.", "hai", 1, true, {foo: true, bar: 'baz'});
// error (red)
gorilla.log("error")("Hello there.", "hai", 1, true, {foo: true, bar: 'baz'});
// debug (blue)
gorilla.log("debug")("Hello there.", "hai", 1, true, {foo: true, bar: 'baz'});

gorilla.on

Simple wrapper for addEventListener. Each element that was returned by gorilla.find has a method on attached to it.

gorilla.find("a").get(0).on(function(evt) {
        evt.preventDefault();
        alert("click");
});

gorilla.one

Advanced querySelector with attached convenience methods on the element. This method returns an element or null.

const anchor = gorilla.one("a");
if (anchor) {
        gorilla.one("a").on(function(evt) {
                evt.preventDefault();
                alert("click");
        });
}

gorilla.prepend

Wrapper for insertBefore.

var newFirstListElement = gorilla.create("li").html("First List Element");
// Insert `newFirstListElement` before the first `li` found.
gorilla.find("li").get(0).prepend(newFirstListElement);

gorilla.remove

Removes a node and all its children.

// Removes the first li tag found
gorilla.find("li").get(0).remove();

gorilla.serialize

Encode a set of form elements (or JSON/JavaScript Object) as a string for submission.

Serialize Form-data:

gorilla.serialize(gorilla.find("form").get(0));

Serialze JSON:

gorilla.serialize({
  id: 1,
  name: "Gorilla Moe",
  title: "Blogpost #1",
  content: "Awesome content goes here..",
  tags: {
    0: "javascript",
    1: "golang",
    2: "php",
    3: {
      0: "foo",
      1: "bar",
      2: "baz"
    }
  }
});

// Returns
// id=1&name=Gorilla%20Moe&title=Blogpost%20%231&content=Awesome%20content%20goes%20here..&tags[0]=javascript&tags[1]=golang&tags[2]=php&tags[3][0]=foo&tags[3][1]=bar&tags[3][2]=baz

gorilla.stringEndsWith

Returns true if the haystack string ends with the needle string.

Usage:

// Returns true
gorilla.stringEndsWith("This haystack ends with", "with");
// Returns false
gorilla.stringEndsWith("This haystack ends with foo", "with");

gorilla.stringFormat

Formats a string.

Usage:

gorilla.stringFormat("I have %i apples and I really %s them.", 1337, "hate");

Or with more human friendly variables (because everything is a string 😜)

gorilla.stringFormat("I have %count dogs and I really %mood them.", 3, "adore");

gorilla.waitForElementToBePresent

Waits for DOM-Element to become present (/available).

The default interval (opts.interval=200) it checks for the existence of the element is 200ms.

The default timeout (opts.timeout=5000) it errors out (return cb(err, null)) when the element is not found is 5000ms.

If opts.timeout is set to Number.Infinity it will keep checking for the element indefinitely.

Usage:

// wait for element with id foobar to become ready
gorilla.waitForElementToBePresent("#foobar", (err, res) => {
        if (err) return console.log(err);
        console.log(res);
});
// append div#foobar after 2.5 seconds to the body tag
setTimeout(() => {
  document.body.appendChild(gorilla.create("div").attr("id","foobar"));
},2500);

Check every 200ms for element to become available, for a total of 10 seconds; then fail.

// wait for element with id foobar to become ready
gorilla.waitForElementToBePresent("#foobar", (err, res) => {
        if (err) return console.log(err);
        console.log(res);
}, {
        timeout: 10000,
        interval: 200
});

gorilla.width

Setter and getter for (DOM-)element width.

Usage:

gorilla.width(el); // get the width of el
gorilla.find("ul").get(0).width(); // get the width of the first <ul> tag.

Set the width (numbers only - translated to px):

gorilla.width(el, 200); // set width of el to 200px
// this translates to el.style.width = '200px';

// set the width of the first <ul> tag to 200px
gorilla.find("ul").get(0).width(200);

Credits

Icon

Icon (free for commercial use) made by Martin Berube.

About

gorilla.js 🦍 - the only javascript utility library 🦄 you'll ever need.

js.gorilla.moe

Topics

javascript jquery javascript-library lightweight-framework helper-functions helper-tool

Resources

Readme

License

GPL-2.0 license
Activity
Custom properties

Stars

3 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

1 tags

Packages

No packages published

Contributors 2

  •  
  •  

Languages