LCARS.setting

Global Settings

These are general settings that handle adding/removing specific classes or other attributes for an element. They are not attached to an elements prototype and such require the object to be passed. Any global setting can be overridden on a per element/widget basis within that elements/widgets prototype.

All elements should come with the premade setter and getter:

LCARS.active.elementID.set('settingName', value);
LCARS.active.elementID.get('settingName');

altLabel

Sets: DOM Attribute | data-altLabel="value"
Pass: String

attr

Sets: DOM Attributes
Pass-Set: object | {'attrName':'attrValue', 'attrName2':'attrValue2'}
Pass-Remove: object | {'attrName':null}

class

Sets: DOM Class
Pass-Set: object | {'className':true, 'className2':true}
Pass-Remove: object | {'className2':false}

children

This setting does not set anything but instead creates the child elements of this element. The setting is recursive so it will continue to loop until there are no more children to create. Additionally, if a DOM string is passed it will simply be appended to the parent element.

Pass: Array of Objects | [{type:'button'}, {type:'button'}, {type:'row', children:[{...}]}]
Pass: String | <div><h2>Some Text</h2></div>

color

For the text || title elements there is a built in replace to swap the standard 'bg-' prefix for 'text-'.

Sets: DOM Class
Pass-Set: String | 'bg-blue-3' || 'text-red-2'
Pass-Remove: null

colors

This setting is generally used to quickly assign color values to child elements within a parent. Each direct child of the parent, in order, matching indexes to the passed array of color strings.

Loops through and calls the color setting

Sets: DOM Classes
Pass-Set: Array | ['bg-blue-3', 'bg-green-1', 'bg-blue-5']
Pass-Remove: ['bg-blue-3', null, 'bg-blue-5']

direction

Sets: DOM Class
Pass-Set: String
Pass-Remove: null

disabled

Sets: CSS Class - .disabled
Pass: Boolean

fade

Sets: CSS Class - .fade
Pass: Boolean

flex

Sets: CSS Class | .flex-v || .flex-h
Pass-Set: String | v || h
Pass-Remove: null

flexc

Sets: CSS Class | .flex-c-v|| .flex-c-h
Pass-Set: String | v || h
Pass-Remove: null

hidden

Sets: CSS Class | .hidden
Pass: Boolean

href

Sets: DOM Attribute
Pass-Set: String
Pass-Remove: null

html

Empties the element and appends the passed html string. HTML created this way is not tracked or maintained within the LCARS framework. Best used for dynamic content areas continually updated with raw html.

Sets: Creates DOM Objects
Pass-Set: String
Pass-Remove: null

inputValue

Sets: DOM Attribute
Pass-Set: String
Pass-Remove: null

label

Sets: DOM Attribute | data-altLabel="value"
Pass-Set: String
Pass-Remove: null

name

Sets: DOM Attribute
Pass-Set: String
Pass-Remove: null

group

Sets: DOM Attribute | data-group="value"
Pass-Set: String
Pass-Remove: null

noEvent

Sets: CSS Class | .no-event
Pass: Boolean

noTransition

Sets: CSS Class | .no-transition
Pass: Boolean

password

Turns an Text Input into a Password Input

Sets: DOM Attribute
Pass: Boolean

readOnly

Makes an input Read Only

Sets: DOM Attribute
Pass: Boolean

reverse

Sets: CSS Class | .reverse
Pass: Boolean

size

Sets: DOM Class
Pass-Set: String
Pass-Remove: null

src

Sets: DOM Attribute
Pass-Set: String
Pass-Remove: null

state

Sets: DOM Class
Pass-Set: String
Pass-Remove: null

style

Sets: Inline CSS
Pass-Set: object | {'style-name':'value', 'max-height':'190px'}
Pass-Remove: object | {'style-name':false}

text

Sets: DOM Content
Pass-Set: String Pass-Remove: null

toggle

Allows an element to have a toggle state. Visual representation is project independent. Toggle state will only toggle if a mouse/touch event is attached to the element. For 'eyecandy' switches simply attach an empty function to the click event.

Sets: CSS Class | .toggle
Pass: Boolean

Events That Accept Toggle Action:

• click
• mouseup
• tapend
• tap
• singletap
• doubletap
• taphold
• swipe
• swipeup
• swiperight
• swipedown
• swipeleft
• swipeend
• tap2
• taphold2

toggleGroup

Sets: DOM Attribute | data-toggleGroup="value"
Pass-Set: String
Pass-Remove: null

version

Sets: DOM Class
Pass-Set: String
Pass-Remove: null

arrive & leave

Attach a function to trigger when an element enters the DOM and another function to trigger when an element leaves the dom.

Functions gets bound to the prototype instance.

Do not use Leave as a substitute for Delete. There is no guarentee the prototype will still exist while the Leave function triggers. Use Leave as an internal function while an element/widget is functioning.

Pass-Set: Function
Pass-Remove: null

https://github.com/uzairfarooq/arrive

event

General function group.

Functions gets bound to the prototype instance.

Pass-Set: Object | {functionName:function(){}, functionName:function(){}}

receiver

Function group to receive data.

Functions gets bound to the prototype instance.

Pass-Set: Object | {functionName:function(){}, functionName:function(){}}

delete

Functions that are looped through when the LCARS.delete is called.

Functions get bound to the prototype instance.

Pass-Set: Object | {functionName:function(){}, functionName:function(){}}

Mouse, Touch & Screen Events

Mouse/Tap/Screen events are where the majority of jQuery is utilized in the LCARS SDK. Only use Mouse events when there is no concern for device/input variation.

For touch events: https://github.com/benmajor/jQuery-Touch-Events

Functions 'this' are bound to the prototype instance.

Pass-Set: Function

• click

• mouseenter

• mouseleave

• mousedown

• mouseup

• mousemove

• mouseout

• mouseover

• hover

• tapstart

• tapend

• tap

• singletap

• doubletap

• taphold

• swipe

• swipeup

• swiperight

• swipedown

• swipeleft

• swipeend

• tap2

• taphold2

• scrollstart

• scrollend

• orientationchange