Marquee

• Graphics Link

Definition

<cst-marquee>

<sub-theme/>

<sub-font/>

<sub-style/>

<sub-access/>

<sub-item/>

<sub-item/>

<sub-options />

<sub-help-icon/>

<sub-feature-flag/>

</cst-marquee>

OR

<cst-element name="marquee" schema="" schema-prop=""/>

Example

<cst-marquee id="" >

<sub-theme name="" clr-var1="" clr-var2=""/>

<sub-font name="" font-var1="" font-var2=""/>

<sub-style name="" width="" height=""/>

<sub-access can-view="" can-modify=""/>

<sub-item text=""/>

<sub-item text=""/>

<sub-options items-prop="" item-text-prop=""/>

<sub-help-icon name="" position="" title="" link="">

<sub-feature-flag is-flipper="">

</cst-marquee>

Attributes

Attribute	Value	Description
id	string type	Identifier for component.
behavior	string type - scroll/slide/alternate	Defines the type of scrolling.
direction	string type - up/down/left/right	Defines the direction of scrolling the content.
loop	number type	Specifies how many times to loop. The default value is INFINITE, which means that the marquee loops endlessly.
scrolldelay	number type	Sets the interval between each scroll movement in milliseconds.
scrollamount	number type	Sets the amount of scrolling at each interval in pixels. The default value is 6.
disabled	boolean type	Specifies if component should be disabled.(aurelia ext attribute)
class	cst-marquee	Specifies class to be applied(Multiple classes can be given with space).
sub-theme	object type	Specifies theme to be used for component.
sub-font	object type	Specifies fonts to be used for component.
sub-style	object type	Specifies style to be applied to component.
sub-options	object type	Specifies the options of the component.
sub-help-icon	object type	Specifies help icon to be displayed.
sub-feature-flag	object	Specifies what features to enable/disable.
other	any type	Any other info.
schema	object type	Specifies JSON schema.
schema-prop	string type	Specifies property to be used to pick schema.

Sub element attributes

sub-theme

Property	Value	Description
name	primary(default)/secondary/custom	Name of the theme.
clr-label	string type	If custom then specific/ named color variables

sub-font

Property	Value	Description
name	roboto (default)/custom	Name of the font
font-text	string type	If custom then specific/ named font variables.
font-label	string type
font-error	string type

sub-style

Property	Value	Description
name	Design name	Name of design to be used.
width	percentage/pixels/string(x-small,small,medium,large,x-large)	Gives width/any other prop value

sub-options

Property	Value	Description
items-prop	string type	Property of item array
item-id-prop	string type	Property of item's id.
item-text-prop	string type	Property of item's text, display as label.

sub-help-icon

Property	Value	Description
name	string type	Icon name.
position	left/right	Position of the icon.
title	string type	Icon tooltip
link	string type	Link to be opened on click.

sub-feature-flag

Property	Value	Description
is-flipper	boolean type	Display marquee as flipper

Schema Examples

Full schema

Fetch appropriate based on schemaProp

let schema = {

type: "object",

required: ["news"], //= required

properties: {

news: {

type: "string",

title:"News",//= label

cstAttr: {

raw:{ //loop & add to element

disabled : true,

class:'outline cst-class1',

behavior: 'scroll',

direction: 'left',

loop: 3,

scrolldelay: 20,

scrollamount: 20

},

subStyle:{ //loop & add to element style

name: '', // Default star

width:'',

height:'',

fontSize:''

},

subOptions:{

itemsProp: '',

itemTextProp: ''

},

subHelpIcon: {

name: '',

position: '',

title:'',

link:''

},

subFeatureFlag: {

isFlipper: false

},

subTheme:{

name:'',

clrLabel:''

},

subFont:{

name:'',

fontText:'',

fontLabel:'',

fontError:''

},

itemsSource: '', //to check in page object

itemsSourceAPI: '',

}

}

}

}

let schemaProp = 'news';

let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;

let data = [

{

text: ''

}

]

Exact schema

let schema = {

type: "string",

title: "News", //= label

cstAttr: {

}

}

let schemaProp = '';

let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;

Nested object

Nested object schemaProp

let schema = {};

let schemaProp = 'EMDDetails.news';

var finalSchema = schema;

let schemaPropSplits = schemaProp.split('.');

for(let prop of schemaPropSplits){

finalSchema = finalSchema.properties[schemaProp];

}

Material Measurement Guidelines

Events

Attribute	Description
onplayclick	Fires when the play button click.
onpauseclick	Fires when the pause button click.
onnextclick	Fires when the next button click.
onpreviousclick	Fires when the previous button click.
onfullviewclick	Fires when the full view button click.
onhover	Fires when the element's value hover.
onhoverleave	Fires when the element's value hover leave.
oninvalid	Script to be run when an element is invalid.

Event Method signature

method(parentRefObj, evtObj, elm, others)

Parameters description

Parameter	Value	Description
parentRefObj	parentRefObj = { parentContext, loopParentContext, doubleLoopParentContext }	Parent Context references
evtObj	object	Event object
elm	object	Element value
others	any	Other value

OverRidable Classes

• cst-ovr-marquee
• cst-ovr-marquee-txt

Unit Test Screenshots

Responsiveness Test Screenshots

Design Images

Demo link

Features

• Display marquee with given text
• Play, pause, next and previous button click functionality is there
• If is-flipper is there, marquee will display as flipper design