Rilla.js

Writing JS Made Easy

Rilla.js is a lightweight JavaScript utility library designed to simplify development and improve the developer experience.

Warning: This early build (v0.1) is still in development and may undergo significant changes without prior notice, potentially breaking your code. Use it for testing purposes only.

Getting Started

CDN

Alternatively, you can start using it via CDN:

Installation

Simply add the rilla.min.js script tag in the <head> section of your HTML file:

DOM Selection

$(element) Raw

Select DOM elements using id, className, tagName, etc:

As a method to an element to select its child or children:

Select a child or children of an element:

Chain the selected element or elements with vanilla JS or Rilla methods:

$getElement Raw

An internal helper function to easily get an element passed as an argument:

DOM Traversal

$this Raw

Execute a callback function or logic on an element while maintaining method chaining:

$parent Raw

Find a parent element at the specified level:

$children Raw

Find all child elements at the specified level:

$siblings Raw

Get all sibling elements:

DOM Manipulation

$wrap Raw

Wrap an element with a new element:

$unwrap Raw

Unwrap an element from its parent if it's not <html> or <body>.

If an only child, delete the parent element:

If not an only child, move the element outside the parent:

$render Raw

Render HTML content into the element, replacing any existing content:

$prepend Raw

Create and insert an element as the first child(ren) of the element:

$append Raw

Create and insert an element as the last child(ren) of the element:

$before Raw

Create and insert an element before the element:

$after Raw

Create and insert an element after the element:

$text Raw

GET the textContent of an element:

SET the textContent of an element:

$value Raw

GET the value of an element:

SET the value of an element:

$inner Raw

GET the innerHTML of an element:

SET the innerHTML of an element:

$outer Raw

GET the outerHTML of an element:

SET the outerHTML of an element:

Event Handling

$on Raw

Add an event listener to a element:

$off Raw

Remove all the event listeners of an element:

Remove all listeners for a specific event:

Remove a specific event listener:

$prevent Raw

Add preventDefault() to an event listener:

$stop Raw

Add stopPropagation() to an event listener:

$dom Raw

Execute code when the DOM is fully loaded and ready:

$window Raw

Execute code when the entire page (including all resources) has finished loading:

Attribute Utilities

$attr Raw

GET the value of an attribute:

SET the value of an attribute:

$data Raw

Sample HTML element:

GET all the data attributes of an element:

GET a specific data attribute of an element:

SET a data attribute of an element:

DELETE a specific data attribute of an element:

DELETE all the data attributes of an element:

$css Raw

Sample CSS of an element:

GET the computed style value of a specific css property of an element:

SET the computed style value of a specific css property of an element:

SET using a function callback:

SET multilple properties (object):

$class Raw

Sample HTML of an element:

GET all the classes of an element:

CHECK if a specific class exists:

SET the class of an element:

DELETE the class of an element:

$hasClass Raw

Check if an element has a specific class. Returns a boolean:

$addClass Raw

Add a class/classes to an element:

$removeClass Raw

Remove a class/classes from an element:

$toggleClass Raw

Toggle the class/classes of an element:

String Manipulation

$toTitleCase Raw

Converts a string to title case with automatic handling of minor words and special cases.

Minor words handled: a, an, and, as, at, but, by, for, if, in, is, nor, of, on, or, per, so, the, to, up, via, vs, vs., yet.

As a function:

Everything above, as a method:

$toSentenceCase Raw

Converts a string to sentence case (first letter capitalized, rest lowercase):

Everything above, as a method:

$toKebabCase Raw

Converts a string to kebab-case (lowercase with hyphens separating words).

Everything above, as a method:

$truncate Raw

Shorten a string to a specified character limit, as a function:

Everything above, as a method:

Array Manipulation

$shuffle Raw

Shuffle an array using the Fisher-Yates algorithm, as a function:

Everything above, as a method:

Element Visibility

$show Raw

Show (hidden) elements with customizable display types and transition, as a function:

As a method:

$hide Raw

Hide elements, as a function:

As a method:

$toggle Raw

Toggle element visibility with customizable display types and transition, as a function:

As a method:

animateIn (optional)

Show elements with smooth CSS animations. Handles animation timing, cleanup, callback, and user motion preferences.

Add the following function to your script:

This function assumes your elements are hidden using a CSS class .hidden:

Modify the animation duration by replacing the default 200ms. Also if your app doesn't support the toggle setting for enabling/disabling motion effects, you can remove the condition for isMotionEffectsEnabled like so:

Lastly, this requires any of the following CSS:

slide-in-left

slide-in-right

slide-in-up

slide-in-down

zoom-in

animateOut (optional)

Hide elements with smooth CSS animations. Handles animation timing, cleanup, callback, and user motion preferences.

Add the following function to your script:

This function assumes your elements would be hidden using a CSS class .hidden:

Modify the animation duration by replacing the default 200ms. Also if your app doesn't support the toggle setting for enabling/disabling motion effects, you can remove the condition for isMotionEffectsEnabled like so:

Lastly, this requires any of the following CSS:

slide-out-left

slide-out-right

slide-out-up

slide-out-down

zoom-out

animateToggle (optional)

Toggle elements with smooth CSS animations:

animateSlideScreens (optional)

Swap two "screens" i.e. elements visibility with smooth slide transition:

animateZoomScreens (optional)

Swap two "screens" i.e. elements visibility with smooth zoom transition:

Storage Utilities

$local Raw

This method uses the helper function $rillaStore.

GET the value of a localStorage key:

SET the value of a localStorage key:

DELETE a localStorage key and its value:

$session Raw

This method uses the helper function $rillaStore.

GET the value of a sessionStorage key:

SET the value of a sessionStorage key:

DELETE a sessionStorage key and its value:

Element Interaction

draggable Raw

Add the following CSS classes to your stylesheet:

Then, to make a container (or an element) draggable, add the .draggable class to the container, and .drag-handle to the element you want to assign as the handle:

URL Utilities

$url Raw

GET the full page URL, or GET a specific URL property (protocol, hostname, pathname, etc.):

Valid properties: href, origin, protocol, host, hostname, port, pathname, search, hash, username, password.

$param Raw

GET a URL parameter value:

SET a URL parameter:

$hash Raw

GET the page hash fragment:

SET the page hash fragment:

Page Utilities

$title Raw

GET the current page title:

SET a new page title:

More Information

GitHub Repository

Explore the source code, report issues, or contribute on GitHub.

License

Rilla.js is open source and distributed under the MIT License.