Documentation Home Github Functions in Bijou

Namespace

element

element

The element namespace of Bijou.js, containing functions to create elements from query selectors, enable custom right click options, test if an element is on screen, replace the text of an element without altering it's styling, and much more!

View Source _copyright.js, line 116

Methods

# static exports.addEventListeners(element, events, handler, useCaptureopt, argsopt) → {Element}

Adds multiple event listeners with one callback to the element specified.

Parameters:
Name Type Attributes Default Description
element Element

The element to add the event listeners to.
events Array.<String>

The array of events to listen for.
handler eventListenersCallback

The function to run when the events happen.
useCapture Boolean | Object <optional>
 false

Whether to use capture, or an options object.
args Array <optional>
 false

The arguments to use in the handler function.

View Source element.js, line 756

The HTML element passed.

Element
Example
// Reset a timer every user interaction.
let timer = 0;
setInterval(() => timer++, 1);
_$.addEventListeners(
 document,
 ["mousemove", "click", "scroll", "keypress"],
 () => timer = 0,
);

# static exports.addStyles(el, styles) → {Object}

Adds the specified styles to the element specified.

Parameters:
Name Type Description
el Element

The element to add the styles to.
styles Object

An object that represents the styles to be added. (camelCased)

View Source element.js, line 915

the style object of the element.

Object
Example
_$.addStyles(document.documentElement, {backgroundColor: "#101010", color: "white"})

# static exports.attributes(el) → {Array.<object>}

Returns an array of objects representing the attributes of a passed element.

Parameters:
Name Type Description
el Element

The HMTL element to get attributes from.

View Source element.js, line 1019

The array of objects representing the attributes

Array.<object>
Example
// Say the <html> tag of the document was "<html style='background-color: #101010;'>", then the function below would log "style," to the console.
console.log(Object.keys(_$.attributes(document.documentElement).join(", "));

# static exports.compStyle(el, prop) → {String}

Gets a property from the computed style of an element.

Parameters:
Name Type Description
el Element

The element whose styles to get.
prop String

The css-property value to get of the styles.

View Source element.js, line 951

The computed style property for the element specified.

String
Example
console.log(_$.compStyle(document.documentElement, "background-color")); // logs the background colour of the document

# static exports.context() → {Array.<HTMLElement>}

Re-enables the use of <menu> and <menuitem> tags for corner clicking.

View Source element.js, line 305

An array of all the HTML elements passed.

Array.<HTMLElement>
Example
//HTML:
```
<h1 contextmenu="menu">Corner click me</h1>
<menu>
 <menuitem label="An item!">
 <menuitem label="Another item!">
</menu>
```
//JS
_$.context();
// Now the user can corner click the items that have parents with a "contextmenu" attribute! Try it out here: https://bcs88.csb.app/

# static exports.create(querySelector, contentopt)

Create a DOM element from a querySelector with option to include content

Parameters:
Name Type Attributes Description
querySelector String

(optional) default to div
content String | Number | DOMElement <optional>

(optional)

View Source element.js, line 241

DOMElement

Example
- _$.create(); // <div>
- _$.create('span#my-id.my-class.second-class'); // <span id="my-id" class="my-class second-class">
- _$.create('#my-id.my-class.second-class', 'text to insert', 12345); // <div id="my-id" class="my-class second-class">

# static exports.createElement(str) → {Element}

Creates an HTML element from the specified string.

Parameters:
Name Type Description
str String

The string of the HTML element to create.

View Source element.js, line 933

The created element.

Element
Example
//Returns a div with an id of "id_here" and innerText of "Testing!"
_$.createElement("<div id='id_here'>Testing!</div>");

# static exports.disableRightClick(el) → {HTMLElement}

Disables right click on the element specified.

Parameters:
Name Type Description
el HTMLElement

The element to disable right click on.

View Source element.js, line 983

The HTML element that now has right click disabled.

HTMLElement
Example
_$.disableRightClick(document.documentElement)

# static exports.drag(dragHandle, dragTarget) → {Element}

Allows an element to be dragged and dropped.

Parameters:
Name Type Description
dragHandle Element

The element that when dragged should move the dragTarget.
dragTarget Element

The element that should be moved when the dragHandle is dragged.

View Source element.js, line 667

The element.

Element
Example
_$.drag('div span', 'div'); // Allows the first <div> on the page to be dragged by the <span> element inside it.

# static exports.elementContains(parent, child) → {Boolean}

Tests if an element is a child element of another element.

Parameters:
Name Type Description
parent HTMLElement

The parent element to test.
child HTMLElement

The child element to test.

View Source element.js, line 120

If the element is a child or not

Boolean
Examples
_$.elementContains(document.querySelector("#container"), document.querySelector("#img"));//If the element with an id of "img" is inside the #container element this will return true, otherwise it will return false
//Note that the easiest way to do this would be to use _$.onOutsideClick(), but this is another way that demonstrates the use of this function.
//Listen for a click outside of an element (in this case the div#popup element) then remove the popup element.
document.querySelector("div#popup").addEventListener("click", (e) => {
 let contains = _$.elementContains(document.querySelector("div#popup"), e.target);
 if (!contains){
   document.querySelector("div#popup".remove()
 }
})

# static exports.elementReady(parentopt, selector) → {Promise}

Waits for an element satisfying selector to exist, then resolves promise with the element.

Parameters:
Name Type Attributes Default Description
parent HTMLElement <optional>
 document.documentElement

The parent element to watch.
selector String

The querySelector to watch for.

View Source element.js, line 76

A promise resolved when the element exists.

Promise
Example
_$.elementReady("#text").then((e) => e.remove());//Wait for an element with an ID of "text" then removes it.

# static exports.elementSiblings(n) → {Array.<Element>}

Get the siblings of a DOM element

Parameters:
Name Type Description
n Element

The element to get siblings of

View Source element.js, line 970

The array of sibling elements.

Array.<Element>
Example
_$.each(_$.elementSiblings(document.querySelectorAll("li")), (el) => el.style.backgroundColor = 'white');
// Make every sibling of the first list item's background color white.

# static exports.fullScreen(element) → {Promise}

Enters fullscreen on an element.

Parameters:
Name Type Description
element Element

The element to enter full screen with.

View Source element.js, line 1124

A promise resolved when fullscreen is entered.

Promise
Example
_$.fullScreen(document.documentElement); // Make the window fullscreen

# static exports.getImages(elopt, includeDuplicatesopt) → {Array}

Gets all the images that are children of the specified element.

Parameters:
Name Type Attributes Default Description
el HTMLElement <optional>
 document.documentElement

The element to get images from (e.g. document.body)
includeDuplicates Boolean <optional>
 false

Whether to include duplicate images, defaults to false.

View Source element.js, line 172

The array of image urls.

Array
Example
//Get all the images on the page and convert their url's to data urls then log that list to console.
_$.getImages().forEach(image_url => {
 image_data_list.push(_$.imageToData(image_url))
})
console.log(image_data_list);

# static exports.inPartialView(el) → {Boolean}

Tests if the given DOM element is partially (or fully) in view.

Parameters:
Name Type Description
el Element

The element to test.

View Source element.js, line 442

Whether the DOM element is partially in view.

Boolean
Example
// Alerts "In view!" if the first <div> in the document is partially or fully view.
if (_$.inPartialView(document.querySelector("div"))) alert("In view!");

# static exports.inView(el) → {Boolean}

Tests whether the specified element is fully in view.

Parameters:
Name Type Description
el Element

The DOM element to test.

View Source element.js, line 412

Whether the element is completely in view.

Boolean
Example
// Alerts "In view!" if the first <div> in the document is in view.
if (_$.inView(document.querySelector("div"))) alert("In view!");

# static exports.inlineCSS(el) → {Object}

Converts all of the styles for an element to inline CSS. This is nice for production sites because it means that they will look the same on all browsers. (Because it uses computed style.)

Parameters:
Name Type Description
el Element

The element to convert.

View Source element.js, line 999

The computed styles of the element.

Object
Example
_$.inlineCSS(document.querySelector("h1")); // Converts the styles for the <h1> element to inline using the style="___" attribute

# static exports.observeMutations(element, callback, options) → {MutationObserver}

Observes the mutations of the html element specified.

Parameters:
Name Type Description
element Element

The element to observe
callback function

The callback function to run when a mutation happens.
options Object

The options to use.

View Source element.js, line 1046

The mutation observer.

MutationObserver
Example
_$.observeMutations(document, console.log); // Logs all the mutations that happen to the console.

# static exports.parents(el) → {Array.<HTMLElement>}

Gets the parent elements of the element given.

Parameters:
Name Type Description
el HTMLElement

The element

View Source element.js, line 148

An array of the parent elements from deepest to outermost.

Array.<HTMLElement>
Example
//Where the html is like so:
```
<html>
 <head>
 </head>
 <body>
   <div id="img">
    <img src="https://example.com/example.png">
   </div>
 </body>
</html>
```
_$.parents(document.querySelector("img"));//[div#img, body, html]

# static exports.parseHTML(string, mimeTypeopt) → {HTMLDocument}

Parses the string of HTML specified and returns an HTML element of it.

Parameters:
Name Type Attributes Default Description
string String

The HTML string to parse.
mimeType String <optional>
 "text/html"

The mimeType of the string.

View Source element.js, line 649

The HTML document element of the HTML string specified.

HTMLDocument
Example
let html = _$.parseHTML("<div id='hello'><textarea></textarea></div>");
html.querySelector("textarea");//Returns the textarea!

# static exports.querySelector(elem) → {String}

Generates a querySelector for an element passed in.

Parameters:
Name Type Description
elem Element

The element to generate the querySelector for.

View Source element.js, line 516

The generated querySelector.

String
Example
const textarea = document.getElementById('textarea');
console.log(_$.querySelector(textarea)); //Logs "#textarea" to the console.

# static exports.removeComments(el) → {HTMLElement}

Removes comments from the element specified.

Parameters:
Name Type Description
el Element

The element to remove comments from.

View Source element.js, line 624

The HTML element with the comments removed.

HTMLElement
Example
_$.removeComments(document.documentElement);//Removes the comments from the document element.

# static exports.renderElement(param, container) → {HTMLElement}

Renders an HTML element from an object in the container specified.

Parameters:
Name Type Description
param Object

The type of object (the HTML tagName)
container HTMLElement

The html element to render it in.

View Source element.js, line 201

The HTML element rendered.

HTMLElement
Example
//Renders a button in the document body.
_$.renderElement({
  type: 'button',
  props: {
    type: 'button',
    className: 'btn',
    onClick: () => alert('Clicked'),
    children: [{ props: { nodeValue: 'Click me' } }]
  }
}, document.body)

# static exports.replaceSelection(replacementText) → {Range}

Replaces the selected text in a contentEditable div with the HTML given.

Parameters:
Name Type Description
replacementText String

The replacement HTML to replace with.

View Source element.js, line 1145

A range representing the users selection.

Range
Example
// Add a simple contenteditable div to the page.
document.appendChild(_$.createElement("<div contenteditable id='text'></div>"));
_$.replaceSelection("<b>BOLD TEXT</b> <small>Bijou is awesome</small><h1>You need to use it</h1>");
//Replaces the selection! =)

# static exports.replaceText(el, callback) → {HTMLElement}

Replaces the text in an element by running it through a callback.

Parameters:
Name Type Description
el Element

The element to replace the text of.
callback replaceTextCallback

The callback to run (Gets passed the element's text).

View Source element.js, line 479

The HTML element passed.

HTMLElement
Example
_$.replaceText(document.querySelector("div"), (text) => text.toUpperCase());
// Converts the text of the first <div> element to upperCase.

# static exports.ripple(el, obj) → {HTMLElement}

Applies a material design ripple effect to the element specified. Works best with buttons and similar elements. This comes from my GitHub repo here: https://github.com/explosion-scratch/ripple

Parameters:
Name Type Attributes Default Description
el HTMLElement

The element to apply the ripple effect to.
obj Object

The object with (optional) time, color, opacity and event parameters for controlling the ripple effect. If these are not present the effect relies on data-* attributes, and then defaults and look good in general.
time Number <optional>
 1000

The time in milliseconds the ripple should take.
color String <optional>
 "currentColor"

The color of the ripple effect.
opacity Number <optional>
 .3

The opacity of the ripple effect.
event String <optional>
 "mousedown"

The event to listen for to trigger the ripple effect.

View Source element.js, line 22

The HTML element that the ripple effect was applied to. (The same one passed in the first param).

HTMLElement
Example
_$.each(document.querySelectorAll("button"), _$.ripple)
//Accepts attributes too!
// data-time: The time in milliseconds that it takes the ripple to fade away
// data-color: A CSS color that the ripple should have as it's color
// data-opacity: The starting opacity of the ripple effect.
// data-event: The event to listen for to apply the ripple.

# static exports.sortTable(element, cellValopt) → {HTMLTableElement}

Parameters:
) element, and the index of the cell.

Name Type Attributes Description
element HTMLTableElement

The table to sort
cellVal sortTableCallback <optional>

The callback function to run with the element to get the value of the cell. This is passed the cell (

) element, and the row (

View Source element.js, line 800

The table element. Sorts a table using JavaScript. This appends click listeners to every TH in the table.

HTMLTableElement
Examples
_$.sortTable(document.querySelector("table"));//Done.
_$.sortTable(document.querySelector("table"), (i) => i.getAttribute("data-sort"));//Sorts the table by each cell's 'data-sort' attribute.

# static exports.sortTableBy(th, ascending) → {HTMLTableElement}

Sorts a table by a element.

Parameters:
Name Type Description
th HTMLTableElement

The table header (

 element) to sort with.

ascending Boolean

Whether to sort the table ascending or descending.

View Source element.js, line 865

The table element.

HTMLTableElement
Example
//Note that this example pretty much recreates the _$ sortTable function, which is much more cross browser and good than this recreation. If sorting a whole table please use that.
_$.each(document.querySelectorAll("#table th"), (th) => {
 th.addEventListener("click", () => {
   //Add event listeners to each of them.
   _$.sortTableBy(th, th.asc = !th.asc);//Toggle the "asc" attribute on the th.
 });
})

# static exports.textNodes(el) → {Array}

Gets a list of all the text nodes in an element

Parameters:
Name Type Description
el Element

The element to get the text nodes of.

View Source element.js, line 498

The text nodes.

Array
Example
_$.textNodes(document.querySelector("h1"))[0].textContent = "hello world"; // replaces the text with "hello world" without deleting other elements

# static exports.tilt(el, x, y, perspectiveopt, amountopt) → {String}

Tilts a specified element to point towards the specified position. Note that 0,0 is the center of the screen in coordinates.

Parameters:
Name Type Attributes Default Description
el Element

The element to tilt.
x Number

The x value of the mouse
y Number

The y value of the mouse
perspective Number <optional>
 500

The perspective
amount Number <optional>
 30

The amount to tilt.

View Source element.js, line 1090

The css transform string.

String
Example
// Tilt the first image in the document whenever the mouse moves.
let el = document.querySelector("img");
el.onmousemove = (e) => {
 let x = e.layerX;
 let y = e.layerY
 _$.tilt(el, x, y);
}