LCARS.helper

Toggle Groups

The LCARS SDK doesn't have checkboxes/radios and instead they are simply a class added to an element called 'toggle'. Elements with data-toggleGroup / object.data.toggleGroup set, only one element can be toggled at a time. A single toggle with no group only toggles itself.

Under the LCARS.helpers the Toggle Groups are stored for easy reference. Do Not Modify

LCARS.helper.toggleGroups:{toggleGroupName:{elementID:'elementID', elementID:'elementID'}}

Random Color

Pass: Array of Color Name Strings
Return: Random Color Name String

LCARS.helper.aRandColor(['bg-blue-1', 'bg-green-3', 'bg-white'])
LCARS.helper.aRandColor(aColors)
Log: 'bg-green-3'

Random Color group

Pass: Array of Color Name Strings
Return: Array of Color Name Strings limited to

LCARS.helper.aRandColorGroup(['bg-blue-1', 'bg-green-3', 'bg-orange-3', 'bg-green-4'], 2)
LCARS.helper.aRandColorGroup(aColors, 2)
Log: ['bg-green-3, 'bg-orange-3']

Viewport Scale & Zoom

There are two ways to manage the UI viewport without having to be 'Website Responsive'. Attach either a Zoom or Scale event to the viewport wrapper. The values calculated are based on the window width/height to the passed UI optimal width/height values. Max sets a top limit of how far to zoom/scale otherwise the viewport will be both vertically and horizontally centered in the window.

Note: Zoom is not cross-browser safe. While it generally provides a higher visual quality when enlarged/shrank it can really only be used in Chromium powered webviews.

LCARS.helper.viewportZoom(object, {width:1440, height:1080, max:false});
LCARS.helper.viewportScale(object, {width:1440, height:1080, max:true});

//Attach CSS Zoom on Element
arrive:function(){
    var dom = this.dom;
    LCARS.helper.viewportZoom(dom, {width:1920, height:1192});
    window.addEventListener("resize", function(){
        LCARS.helper.viewportZoom(dom, {width:1920, height:1192}); 
    });
}

//Attach Scale on Element
arrive:function(){
    var dom = this.dom;
    LCARS.helper.viewportScale(dom, {width:1920, height:1192});
    window.addEventListener("resize", function(){
        LCARS.helper.viewportScale(dom, {width:1920, height:1192}); 
    });
}

Toggle Check

Only Utilized for the Toggle State pass-through. Manages toggle states and toggle states of toggle groups.

Pass: DOM Element from Interaction Event, Attached Event Function

LCARS.helper.toggleCheck(dom, fValue)