Orthogonal.js

Logo

A JavaScript dependency-injector

View the Project on GitHub fivebyfive-se/orthogonal

Classes

Orthogonal ⇐ OrthoInjector

The main entry point

OrthoCache

Cache-handler. Service can be injected as $cache from Orthogonal.

OrthoExpressionParser

Primarily used for dependency injection. Contains methods for reflection -- parsing functions to see which parameters it has and what they're called. Can be dependency injected as a service via Orthogonal as $expressionParser.

OrthoInjector

Dependency injector. Itself injected as $injector from Orthogonal.

OrthoStoreAction

Represents an action in OrthoStore

OrthoStore

Simple state-management. Dependency-injected as $store from Orthogonal.

OrthoStoreSelector

Class representing a selector in OrthoStore.

OrthoStoreSubscriber

representing a subscriber in OrthoStore

ColorHarmony

Color-harmony generator

ColorHelper

Helpers for converting colors among color-spaces

ColorWheel

Class for creating color-wheels that can be drawn on an HTML canvas.

ArrayHelper
CssHelper
DomHelper
LinearInterpolationHelper
ObjectHelper
QueryHelper
StringHelper

Objects

rootServices : object

Injectable services

colorServices : object

Injectable services

Constants

$ortho : Orthogonal
$cache : OrthoCache
$expressionParser : OrthoExpressionParser
$injector : OrthoInjector
$store : OrthoStore
$window : external:Window
$document : external:Document
$colorHarmony : ColorHarmony
$colorHelper : ColorHelper
$colorWheel : ColorWheelFactory

Functions

orthogonal()

Initializes Orthogonal

registerExtensions(extensions)
addGetter(obj, name, handler)

Helper function for adding a new getter-method to an object.

dirtyable(baseObj, dirtyProperty) ⇒ any

Wrap an value in a Proxy which sets a property, isDirty when the property named in dirtyProperty is modified.

Typedefs

ColorRGB : Object
ColorHSV : Object
ColorHSL : Object
PartialColor : Object

An object representing parts of a color in RGBA colorspace

RgbColor : Object

An object representing a color in RGB colorspace

RgbaColor : Object

An object representing a color in RGBA colorspace


ColorHarmony

Color-harmony generator


colorHarmony.harmonize(harmony, color) ⇒ Array.<ColorHSL>

Calculate colors for harmony, starting from color

Returns: Array.<ColorHSL> - - Resulting harmonized list of colors

Param Type
harmony string
color ColorHSL


colorHarmony.harmonyNames() ⇒ Array.<string>

Get a list of all available harmonies' names


colorHarmony.harmonies() ⇒ Object

Get a list of all available harmonies


ColorHelper

Helpers for converting colors among color-spaces


colorHelper.hex_to_rgb(hex) ⇒ ColorRGB

Convert Hex to RGB.

Param Type
hex string


colorHelper.hex_to_hsl(hex) ⇒ ColorHSL

Convert hex string to HSL

Param Type
hex string


colorHelper.hsl_to_rgb(param0) ⇒ ColorRGB

Param Type
param0 ColorHSL


colorHelper.hsl_to_hex(param0) ⇒ string

Param Type
param0 ColorHSL


colorHelper.hsl_to_hsv(param0) ⇒ ColorHSV

Param Type
param0 ColorHSL


colorHelper.hsv_to_hsl(param0) ⇒ ColorHSL

Param Type
param0 ColorHSV


colorHelper.rgb_to_hex(param0) ⇒ string

Param Type
param0 ColorRGB


colorHelper.rgb_to_hsl(param0) ⇒ ColorHSL

Param Type
param0 ColorRGB


colorHelper.rybhue_to_hslhue(hue) ⇒ number

Translate from RYB color space to HSL

Param Type
hue number


colorHelper.hslhue_to_rybhue(hue) ⇒ number

Translate from HSL color space to RYN

Param Type
hue number


colorHelper.any_to_string(source, type) ⇒ string

Convert from any color space to any string format

Param Type Description
source any
type string "hex", "rgb", "hsl", or "hsv"


colorHelper.any_to_hsl(source) ⇒ ColorHSL

Convert from any color space (include string representations), to HSL.

Param Type
source any


ColorWheel

Class for creating color-wheels that can be drawn on an HTML canvas.


colorWheel.set_canvas(canvas)

Param Type
canvas any


colorWheel.color_at(mouseEvent) ⇒ ColorHSL

Calculate the color at the given mouse position

Param Type
mouseEvent external:MouseEvent


colorWheel.color_to_pos(param0) ⇒ Object

Calculate the position of the given color in the color wheel.

Param Type
param0 ColorHSL


colorWheel.draw(canvas)

Draw the color wheel.

Param Type
canvas any


ArrayHelper

Alias: ArrayHelper


new exports.arrayFactory()

Array manipulation


ArrayHelper.ensureArray(arrOrItem) ⇒ Array.<any>

Returns: Array.<any> - arrOrItem if it is an array, or [arrOrItem] if not.

Param Type
arrOrItem any, Array.<any>


ArrayHelper.repeat(value, length) ⇒ Array.<any>

Returns: Array.<any> - An array containing value length times.

Param Type
value any
length number


CssHelper


new CssHelper()

Helpers for working with CSS


CssHelper.getVar(key, root) ⇒ string

Get CSS variable with name key, if it exists under root

Param Type Default
key string
root external:HTMLELement


CssHelper.getVarAsColor(key, root) ⇒ ColorRgb

Get CSS variable with name key, if it exists under root, converted to RGB.

Param Type Default
key string
root external:HTMLELement


CssHelper.classNames(element, ...variants) ⇒ Array.<string>

Create a list of classnames, consisting of element + element--variant for every variants

Param Type
element string
...variants string


DomHelper


new DomHelper()

Helpers for handling DOM


DomHelper.onEvents(element, eventNames, ...callbacks)

Connectcallbacks to the list of events in eventNames onelement.

Param Type
element external:Element
eventNames Array.<string>
...callbacks function


DomHelper.onEventsWithoutDefault(element, eventNames, ...callbacks)

Connect callbacks to the list of events in eventNames on element. Also wraps all callbacks in a function that calls `e.preventDefault()' on all trigger events.

Param Type
element external:Element
eventNames Array.<string>
...callbacks function


DomHelper.dispatchOnEvent(element, eventNames, store, action, payloadSelector)

Dispatch action on store when the given eventNames occur. payloadSelector is a callback-function, which transforms an element into a payload.

Param Type
element external:Node
eventNames string, Array.<string>
store OrthoStore
action string
payloadSelector function


DomHelper.getPosition(element) ⇒ Object

Get x and y coordinates of element

Param Type
element external:Element


DomHelper.getSize(element) ⇒ Object

Get dimensions of element

Param Type
element external:Element


DomHelper.getValue(element) ⇒ string

Get sanitized value from element (assumed to be an input element), or empty string if there is no value.

Param Type
element external:Element


DomHelper.setValue(element, value) ⇒ string

Set sanitized value on element (assumed to be an input element), or empty string if there is no value.

Param Type
element external:Element
value string


DomHelper.createTag(tagName, attributes, ...children) ⇒ external:HTMLElement

Create an HTML element.

Param Type
tagName string
attributes Object
...children any


DomHelper.ensureElement(selectorOrElement) ⇒ external:Element

If selectOrElement is an Element, return it, otherwise try to find it treating selectOrElement as a dom query.

Param Type
selectorOrElement string, exernal:Element


LinearInterpolationHelper


new LinearInterpolationHelper()

Useful interpolation helpers for converting between scales


LinearInterpolationHelper.lerp(x, y, a) ⇒ Number

Returns: Number - A value between x and y at the decimal point a.

Param Type Description
x Number
y Number
a Number Ratio -- between 0.0 and 1.0 (inclusive)

Example

$linear->lerp(0, 10, .5); // => 5


LinearInterpolationHelper.clamp(a, min, max) ⇒ Number

Returns: Number - a or min if a < min, or max if a > max.

Param Type Default Description
a Number
min Number 0 (default: 0)
max Number 1 (default: 1)

Example

$linear->clamp(10, 2, 5); // => 5


LinearInterpolationHelper.invlerp(x, y, a) ⇒ Number

Returns: Number - Where a falls between x and y as a ratio between 0.0 and 1.0. @see lerp

Param Type
x Number
y Number
a Number


LinearInterpolationHelper.range(x1, y1, x2, y2, a) ⇒ Number

Converts a number from one range to another

Returns: Number - The value a converted to the value at the same place in [x2 ... y2] as a has in [x1 ... y1]

Param Type
x1 Number
y1 Number
x2 Number
y2 Number
a Number


LinearInterpolationHelper.rangeMap(map, from, to, val) ⇒ Number

Returns: Number - If maps is an array of maps containing at least the keys from the string from and to, representing corresponding values in two ranges, return val from range from fitted to the range b.

Param Type Description
map Array.<Map.<string, Array.<Number>>> s
from string
to string
val Number


LinearInterpolationHelper.modLimit(num, max) ⇒ number

Return num limited to between 0 and max, using modulo logic

Param Type
num number
max number


ObjectHelper


new ObjectHelper()

Object manipulation


QueryHelper


new QueryHelper()

Helpers for querying the dom


QueryHelper.map(root, selector, callback) ⇒ Array.<any>

Wrapper around querySelectorAll allowing you to pass along a callback to call on all elements found

Returns: Array.<any> - The mapped list

Param Type
root external:HTMLElement
selector string
callback function


QueryHelper.queryByAttribute(root, attribute) ⇒ Object

Query by attribute name.

Returns: Object - all matching elements, plus metadata.

Param Type
root external:HTMLElement
attribute string


QueryHelper.dataSelectorAll(root, attribute, ...otherAttributes) ⇒ Array.<any>

Query by data-attribute. Optionally adds other attributes to result

Returns: Array.<any> - List of elements, along with index, and attribute values.

Param Type
root external:HTMLElement
attribute string
...otherAttributes any


StringHelper


new StringHelper()

String manipulation


StringHelper.sanitize(str) ⇒ string

Make sure argument is stringy

Param Type
str string


StringHelper.isEmpty(str) ⇒ boolean

Check if argument is empty, i.e. undefined, null, '' &c.

Param Type
str string, any


StringHelper.hexToRgb(hex) ⇒ RgbColor

Convert a color in hex format (e.g. #fff, #00ffee) to RGB.

Param Type
hex string


StringHelper.rgbaToRgb(rgba) ⇒ RgbaColor

Parse a color in RGBA string format.

Param Type
rgba string


StringHelper.snakeToCamel(str) ⇒ string

Convert a string from snake-case to camelCase.

Param Type
str string


StringHelper.camelToSnake(str) ⇒ string

Convert a string from camelCase to snake-case.

Param Type
str string


rootServices : object

Injectable services


colorServices : object

Injectable services


$ortho : Orthogonal


$cache : OrthoCache


$expressionParser : OrthoExpressionParser


$injector : OrthoInjector


$store : OrthoStore


$window : external:Window


$document : external:Document


$colorHarmony : ColorHarmony


$colorHelper : ColorHelper


$colorWheel : ColorWheelFactory


orthogonal()

Initializes Orthogonal


registerExtensions(extensions)

Param Type
extensions any


addGetter(obj, name, handler)

Helper function for adding a new getter-method to an object.

Param Type
obj any
name string
handler function


dirtyable(baseObj, dirtyProperty) ⇒ any

Wrap an value in a Proxy which sets a property, isDirty when the property named in dirtyProperty is modified.

Returns: any - Proxied version of baseObj

Param Type
baseObj any
dirtyProperty string


ColorRGB : Object

Properties

Name Type
r number
g number
b number


ColorHSV : Object

Properties

Name Type
h number
s number
v number


ColorHSL : Object

Properties

Name Type
h number
s number
l number


PartialColor : Object

An object representing parts of a color in RGBA colorspace

Properties

Name Type Description
r number Red
g number Green
b number Blue
a number Alpha


RgbColor : Object

An object representing a color in RGB colorspace

Properties

Name Type Description
r number Red
g number Green
b number Blue


RgbaColor : Object

An object representing a color in RGBA colorspace

Properties

Name Type Description
r number Red
g number Green
b number Blue
a number Alpha