The utility namespace of Bijou.js, containing utilities to do many things, such as playing audio, fetching JSON, preloading images and much more.

Namespaces

cookies
preload
regex

Members

# static exports.createStream

Creates a MediaStream with all of the tracks passed.

View Source utility.js, line 21

Example

//Combine video from screen share with audio from microphone
const audioStream = await navigator.mediaDevices.getUserMedia({audio: true});
//Get the audio track, streams can have more than one track.
const audioTrack = audioStream.getAudioTracks()[0];

//Do the same for video (get from screen share)
const videoStream = await navigator.mediaDevices.getDisplayMedia({video: true});
const videoTrack = videoStream.getVideoTracks()[0];

//   Now use the _$.createStream function to create a new stream with the
// audio from the microphone and the video from the screen share.
const combinedStream = createStream(audioStream, videoStream);//Order doesn't matter, _$.createStream also accepts an array of streams.

# static exports.manipulate

View Source utility.js, line 77

Example

//Greenscreen effect
let video = document.createElement("video");
video.setAttribute("autoplay", true);
document.body.appendChild(video);

//Now the cool part
let videotrack = await navigator.mediaDevices.getUserMedia({video: true})
		.then(stream => stream.getVideoTracks()[0]);

//    Basically manipulate the video track using canvas, and for every color,
// if its green value is above 200 then make that pixel transparent.
// Creating a simple greenscreen effect.
video.srcObject = _$.createStream(
_$.manipulate(videotrack, (color) => {
		if (color.green > 200){
			//Simple greenscreen effect
			color.alpha = 0;
		}
		return color;
	})
)

# static exports.request

Request a URL and get the data back in a specific format.

View Source utility.js, line 1282

Example

let response = await _$.request({
	url: "https://google.com",
	as: ["html", "bloburl"],
	timeout: 1000
})
// → {html: #document, bloburl: "blob:https://github.com/abc-def-ghi"}

# static exports.tag

Creates a template literal tag. Read more here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates

View Source utility.js, line 326

Example

let t = tag(_$.escapeHTML);
//Notice the "t" at the beginning of the template literal. (t`Some text`).
console.log(t`This will not be escaped <i>Italics!</i> ${"But this will, <i>Not italic</i>"}`)

Methods

# static callbackify(fn) → {function}

Converts a function that returns a promise into a callback based function

Parameters:

Name	Type	Description
`fn`	`function`	The function to 'callbackify'.

View Source utility.js, line 424

Returns:

The callback based function.

Type: function

Example

let getUUID = _$.callbackify((limit) =>
   fetch(
       `https://apis.explosionscratc.repl.co/uuid?limit=1${escape(parseInt(limit))}`
   ).then(res => res.json()));

getUUID(console.log, 500);//Get 500 uuid's from my API and log them to the console.

# static exports.arrayToCSV(arr, delimiteropt) → {String}

Converts an array to CSV (Comma separated values) data.

Parameters:

Name	Type	Attributes	Default	Description
`arr`	`Array`			The array to convert.
`delimiter`	`String`	<optional>	,	The separator (By default this is a comma.)

View Source utility.js, line 1094

Returns:

The comma separated array.

Type: String

Example

console.log(_$.arrayToCSV([1,2,3,4])); // "1,2,3,4"

# static exports.browser() → {String}

Returns the browser that the user is using.

View Source utility.js, line 1191

Returns:

A string of the browser name that the user is using.

Type: String

Example

_$.browser(); // For me this (correctly) returns "Chrome"

# static exports.copy(str) → {String}

Copies the string inputted to the clipboard.

Parameters:

Name	Type	Description
`str`	`String`	The string to copy.

View Source utility.js, line 1162

Returns:

The string copied.

Type: String

Example

_$.copy("Hello world");

# static exports.formatHTML(html) → {String}

Formats a string of HTML using indents. Note that this does not format CSS or JS in the HTML.

Parameters:

Name	Type	Description
`html`	`String`	The string of HTML to format.

View Source utility.js, line 621

Returns:

The formatted string of HTML.

Type: String

Example

console.log(_$.formatHTML("<h1>moo</h1><div id="hi">hello <span>world</span></div>"));
Logs the following to the console:
```
   <h1>moo</h1>
   <div id='hi'>hello <span>world</span>
   </div>
   ```

# static exports.getHTML(url, callback) → {Promise}

Gets HTML from a URL and performs a callback with it.

Parameters:

Name	Type	Description
`url`	`String`	The url of the HTML to be fetched.
`callback`	`function`	The function to be run with the HTML code.

View Source utility.js, line 682

Returns:

A promise resolved when the HTML is fetched and parsed.

Type: Promise

Example

// Logs the HTML of wikipedia.org to the console.
_$.getHTML("https://wikipedia.org", (html) => console.log(html));

# static exports.getJSON(url, callback) → {Promise}

Gets JSON from a URL and performs a callback with it.

Parameters:

Name	Type	Description
`url`	`String`	The url of the JSON to be fetched.
`callback`	`function`	The function to be run with the JSON code.

View Source utility.js, line 653

Returns:

A promise resolved when the JSON is fetched and parsed.

Type: Promise

Example

_$.getJSON("http://date.jsontest.com/", (json) => {alert("The current time is " + json.time)})

# static exports.htmlToImage(html, optsopt) → {Promise.<string>}

Converts a string of HTML to an image (!!)

Parameters:

Name	Type	Attributes	Default	Description
`html`	`String`			The HTML string to transform into an image
`opts`	`Object.<string>`	<optional>	{x: 0, y: 0, width: 300, height: 400}	The object with options.
`x`	`Number`	<optional>	0	The x position of the text
`y`	`Number`	<optional>	0	The y position of the text
`width`	`Number`	<optional>	300	The width of the output image.
`height`	`Number`	<optional>	400	The height of the output image.

View Source utility.js, line 377

Returns:

A promise that resolves into the data URL string of the image.

Type: Promise.<string>

# static exports.imageToData(url, callback) → {Promise}

Fetches an image and runs the callback with the data url of the image.

Parameters:

Name	Type	Description
`url`	`String`	The url of the image to load.
`callback`	`function`	The callback function.

View Source utility.js, line 850

Returns:

A promise fulfulled when the image is loaded.

Type: Promise

Example

//Replaces every image's url with its respective data url.
_$.each(document.querySelectorAll('img'), (img) => {
  _$.imageToData(img.src, (data) => {
   img.src = data;
 })
})

# static exports.injectCSS(css) → {HTMLElement}

Injects CSS into the document head.

Parameters:

Name	Type	Description
`css`	`String`	The CSS to inject.

View Source utility.js, line 554

Returns:

The CSS