@frostsw/frostjs

FrostJS

A lightweight JS for basic DOM manipulation and more.

FrostJS Initialisation

You can initialise FrostJS using fr alias

fr(function(){
    // fr() event binding codes here
});

You can have multiple fr(function(){ }); in a single script if necessary, but keep in mind that one of this instance will be enough.
fr() functions, or any function, that is used to bind events must be called through this function, otherwise the browser will throw fr is undefined error.

---

Numbers Only

fr("#txtText").typing(FrostJS.Typing.NUMBERS);

---

Titlecase

<textarea id="area">This is a text area</textarea>

fr("#area").typing(FrostJS.Typing.TITLECASE);

---

Binding an event

You can bind an event to an element using .on() method. For list of DOM events, click here.

Syntax:
frObject.on("event_name", callback);

callback must be in a form of anonymous function or an existing function name .

Test Button

// Using anonymous function:
fr(".btn").on("click", function (e) {
    alert(fr("#area").val());
});
// Using an existing function name:
fr("#myBtn").on("blur", myFunction);
function myFunction(){
//code to trigger
}

---

Programmatically trigger an event

Syntax:
frObject.trigger("event_name");

Click to trigger

fr("#btnButton").trigger("click");

---

Class toggle

This can be used to add a class if it doesn't exist within the element, or remove it if it exists.

Syntax:
frObject.toggleClass("class_name");

Toggle Click again to toggle.

fr("#toggleButton").toggleClass("active");

---

Switching classes

Switch 1 Switch 2

fr("#switch1").on("click", function (e) {
    fr("#switch1").class("active", "inactive");
    fr("#switch2").class("inactive", "active");
});
fr("#switch2").on("click", function (e) {
fr("#switch2").class("active", "inactive");
fr("#switch1").class("inactive", "active");
});

.class() method can be used to add/remove classes.

Syntax:
frObject.class("class_to_add", "class_to_remove");

The second parameter is optional, indicating that you can add a class without the need to remove an existing class.

fr("#switch1").class("btn-primary");

You can remove a class without the need to add a new class. Simply use empty string.

fr("#switch1").class("", "btn-primary");

---

Adding/removing multiple classes

You can add/remove multiple classes by separating each classes with space.

Add classes to this button

fr(".switch").class("active add1", "inactive remove2");

• You can use the .class() method without any arguments to get the classes of the element.
• You can also use .hasClass("class_name") to determine if the element contains a given class name.

---

XHR

POST GET

Result

---

Adding a plug-in

Click me to try the plugin Click to add "Change To Blue" plugin

---

Adding an element

Add Element

---

Adding an element by tag

Add Element By Tag

---

Remove

Remove Remove Myself :(

---

Serialisation of Form with multiple files and values.

Serialisation of form with FormData (for uploading images with other fields), enctype is required for this to work

username
password
select Option 1 Option 2 Option 3

Single File:
Multiple Files:

Serialise

    fr.xhr({
        url: "xhr-test.php",
        headers: {enctype: "multipart/form-data"},
        data: fr("/form-sample").serialise(new FormData())
    }).then(function (r) {
        alert(r);
    });

---

Submitting Form via XHR

This method automatically serialise the form and submit the form to the given action attribute

username
password
Multiple Select
Option 1 Option 2 Option 3

Submit

fr("/form-sample-xhr").xhr({
    success: function (r) {
        alert(r);
    }
});

---

Starting version 1.2.11, you can now access elements through their fr attributes as property of FrostJS. <xmp> OK </xmp>

    fr.myButton.text("Hello");