Frontend Library

CRG specific HTML attributes

Channel Syntax

Throughout this section we will use the following words for parts of a channel name:

• The whole channel name is split into multiple components by ..
• Each component is of the form field(id). If the id is empty, the parentheses are also skipped.
  • Sometimes an id also has multiple components separated by..
• The field of a channel name is the last field in it.

Each element has a channel context. This will be inherited from the parent element and can be modified with the sbContext attribute.

Whereever a channel name is expected, it will be processed as follows:

• [*] is replaced by the current channel context.
• Any substring of the form [name] will look for the closest HTML attribute name walking up the DOM tree and use its value.
  • If no such attribute is found, it will use the value of the URL parameter name if it exists.
  • If this also doesn't exist, no replacement is done.
• If the channel name starts with a character assigned as a prefix by sbPrefix in the element or one of its ancestors, the character is replaced by that prefix and processing ends.
  • If there is also a suffix defined along with the prefix, that suffix is appended to the channel name.
• If the channel name starts with / the / is discarded and processing ends.
• For each ^ at the start of the channel name one component from the end of the current channel context is discarded along with the ^.
  • The remaining channel context, if not empty, is prefixed to the channel name, separated by a ..

When multiple channels are given, they are all processed separately.

Other Syntax and Behaviour

• When an attribute supports multiple instances, these instances are always separated by |. When an instance takes multiple arguments, they are always separated by :. If an argument accepts multiple values, they are always separated by ,.
  • This means that you cannot use |, :, or , in any argument values.
  • Any whitespace around |, :, or , is trimmed on parsing, so you can use it freely to format your HTML for readability.
  • If an attribute takes options of the form key=value, whitespace around = is also trimmed.
  • If multiple instances are defined for attributes that don't support them, the first instance will be used, all others will be discarded.
• It is possible to leave arguments empty while still setting later arguments by having two (or more) colons follow each other. These will get the default values as specified.
• Unless otherwise specified, functions will be called with up to four arguments, in order:
  • k - The enriched name of the channel from which the current value is coming or to which it will be going. If no such channel exists, the channel context of the element on which the function was triggered.
  • v - For functions that convert from channels the value of the first given channel with a nonempty value. If none has a value the last channel will be used. For other attributes on input or select elements the value of the element. Otherwise true.
  • elem - A jQuery set containing (only) the element on which the function was triggered.
  • event - The JS event that triggered the function call (if any).
• If an attribute is given multiple channels, an update will be triggered whenever any of the channels change, but the changed channels/values may not be passed to the conversion function, if a channel listed earlier has a value.
• If a non-boolean function of the above type is expected and no function with the given name is found, the value will be prefixed with return and that will be used as function.
  • If the function is left empty, the function return v will be used.
• If a boolean function of the abvoe type is expected and no function with the given name is found, the value will be prefixed with return v and that will be used as function.
  • If the function is left empty, a function returning true if and only if v is either the boolean true or the string true is returned.
  • ! is replaced by the negation of the above function.

sbAttr

Sets HTML attributes of an element based on a channel value.

pos	what	semantics	remarks
1	attribute	the HTML attribute to set
2	channels	the channel(s) to be listened to
3	function	a function that converts the value from the channel

sbAutoFitOn

Sets channels for which AutoFit on the element will be triggered when their value changes.

This attribute does not support multiple instances. (But it does support multiple channels on the single instance.)

pos	what	semantics	remarks
1	channels	the channel(s) to be listened to

Notes:

• This only has an effect on elements with class sbAutoFit.
• Channels listened to by sbDisplay will also trigger AutoFit, so there is no need to add sbAutoFitOn for those. Instead this attribute is intended for situations where a channel's value can affect the element's size but not its content.

sbCall

Calls a JS function when an element is clicked/changed.

pos	what	semantics	remarks
1	function	the function to be called

sbClass

Toggles a CSS class based on a channel value.

pos	what	semantics	remarks
1	channels	the channel(s) to be listened to	only the first channel given will be set
2	class	the CSS class to toggle
3	function	a function that evaluates the value from the channel

sbContext

Modifies the channel context of the current element.

This attribute does not support multiple instances.

pos	what	semantics	remarks
1	channel	channel name to be used as prefix on all attributes
2	channel	channel name to be used as prefix on all attributes except sbForeach

On an HTML element with sbForeach, sbForeach is always processed first, taking only the first argument into account. On the elements inserted by sbForeach, sbContext will then be set to the first argument of the original sbContext, followed by the component created by sbForeach and then the second argument of the original sbContext, all separated by ..

If both arguments are given on an element without sbForeach, they will simply be joined by a ..

sbControl

Synchronizes element and channel values.

pos	what	semantics	remarks
1	channels	the channel(s) to be listened to and set	only the first channel given will be set
2	function	a function that converts the value from the channel for display
3	function	a function that converts the value from the element for the channel

sbCss

Sets CSS properties of an element based on a channel value.

pos	what	semantics	remarks
1	property	the CSS property to set
2	channels	the channel(s) to be listened to
3	function	a function that converts the value from the channel

sbDisplay

Sets the contents of an element based on a channel value.

Arguments:

pos	what	semantics	remarks
1	channels	the channel(s) to be listened to
2	function	a function that converts the value from the channel for display
3	options	The keyword html if the result of the conversion is HTML code instead of text.	Inserted HTML code will be parsed for CRG attributes.

sbForeach

Repeats an HTML element (and its contents) for multiple ids on the same field.

• In each copy field(id) will be appended to the channel context unless the noContext option is specified.
  • See sbContext for how the two attributes interact.
• In each copy there will be an attribute named as the field with the id as value.
• This attribute does not support multiple instances.

Arguments:

pos	what	semantics	remarks
1	field	the field for which the element should be repeated on each/multiple ids
2	fixed keys	list of ids that should appear first (in the order given)
		AND/OR ids prefixed by - that should be skipped
3	sort function	comparator function that takes two HTML elements and returns true iff the second argument is to be displayed first
		OR name of an attribute that should be compared to determine sort order	append ,num to sort numerically
		OR the keyword only to indicate that only fixed keys should be displayed
4	options	onInsert= followed by a js function that is to be called on an inserted element
		AND/OR onRemove= followed by a js function that is called on an element before it is removed	same parameters as onInsert
		AND/OR resort= followed by a channel. The element will be resorted when the value of that channel changes	onInsert will be called again when a resort is triggered on an element
		AND/OR part= followed by a number. Only that many components of the id will be considered, starting at the front
		AND/OR filter= follwed by a string. Only ids starting with the string are considered.	filter=^ will use the string [<field>] would yield in a path
		AND/OR the keyword noId indicating that field(id).Id is not a valid channel
		AND/OR the keyword noContext

sbOn

Adds event triggers.

Arguments:

pos	what	semantics	remarks
1	event	the event to listen for	can be any event accepted by the jQuery on() function
2	function	the function to be called

sbPrefix

Defines prefixes to be used on channel names.

Arguments:

pos	what	semantics	remarks
1	selector	character that is to be replaced
2	prefix	prefix the character is to be replaced with
3	suffix	suffix that is to be apended to the channel when the prefix is inserted

In order to avoid surprising behaviour, characters that have a special meaning in CRG HTML attributes or at the start of channel names (|, :,,,/,^, ") must not be used as selector. Due to components in CRG channel names starting with capital letters, those should also be avoided in order to avoid surprises.

If there are multiple definitions for the same prefix in the current element and its ancestors, the definition closest to the current element will be used.

sbProp

Sets HTML properties of an element based on a channel value.

pos	what	semantics	remarks
1	property	the HTML property to set
2	channels	the channel(s) to be listened to
3	function	a function that converts the value from the channel

sbSet

Sets the value of a channel.

Arguments:

pos	what	semantics	remarks
1	channel	the channel to be changed
2	function	a function that converts the element value for the channel.
3	flag	change on numeric channels to indicate the value is an offset instead of absolute
		OR reset on ...Clock(*).Time to reset the time to the start	either maximum or minimum time depending on clock direction

sbToggle

Sets a CSS class based on a channel and toggles it on click.

pos	what	semantics	remarks
1	channels	the channel(s) to be listened to and set	only the first channel given will be set
2	class	the class to be toggled	default: sbActive

CRG specific CSS classes

In order to achieve a consistent look & feel, CRG uses a set of CSS classes across screens that are then given a consistent styling. The actual layout of many of these classes can be modified by themes.

sbAutoFit

Maximize the font size of the element while making sure the contents still fit. Note: This works best with elements that are a fixed percentage of screen width/height.

sbSegment

The gray boxes with rounded corners in the default theme.

sbFillArea

On an sbSegment: Make the segment fill the enclosing container

sbSegmentGroup

Group of sbSegments to be arranged side by side.

sbGroup

Group of elements within an sbSegment. Contents are arranged as a left-to-right flexbox by default. In the default theme, multiple consecutive groups are separated by a dashed white line.

sbStack

Displays the contents of the element as a top-to-bottom flexbox.

sbHeader

sbGroup or table row that serves as header. Has a reddish color in the default theme.

sbSubHeader

sbGroup or table row that serves as a subheader. Has a brownish color in the default theme.

sbSheets

Element that contains paperwork to be displayed as in the WFTDA statsbook.

sbHasAnnotation

Within a sheet of paperwork indicates that the cell has an annotation by displaying a red box in the corner.

sbActive

Indicates that the element is active. Green background in the default theme.

sbClickMe

Indicates an element that the user likely wants to use in the current state. Orange background in the default theme.

sbUnserved

Indicates a skater that has an unserved penalty. Light blue background in the default theme.

sbInBox

Indicates a skater curently in the box. Red background in the defaultt theme.

sbNoDistract

Indicates an element or group of elements that is less important. Lighter background and smaller font in the default theme.

sbImportant

Indicates an important elment. Larger font size in the default theme.

sbVeryImportant

Indicates a very important elment. Even larger font size than sbImportant in the default theme.

sbVeryVeryImportant

Indicates a very very important element. Even larger font size than sbVeryImportant in the default theme.

sbSpinner

Displays a spinning circle, indicating an opration is in progress.

sbClickable

Turns the curser over an element into a pointer.

sbInvisible

Makes an element invisible (but still taking up space).

sbHide

Completely removes an element.

sbTemplates

Indicates that the element contains dialog templates.

sbKeyControl

Indicates that the element can be assigned a hotkey.

sbShowBySheetStyle

Indicates that the element should only be shown on some types of sheets. The type of sheet is determined by the closest sbSheetStyle attribute found in the element's ancestors. Which sheet types the elment is shown on is defined by additional sbShowOn* classes as follows:

sbSheetStyle	classes shown
pbt	sbShowOnPbt
boxview	sbShowOnBoxView
sk	sbShowOnSk
pt	sbShowOnPt, sbShowOnPurePt
lt	sbShowOnLt, sbShowOnPureLt
plt	sbShowOnPlt, sbShowOnPt, sbShowOnLt
sheet	sbShowOnSheet, sbShowOnPt
operator	sbShowOnSk, sbShowOnOperator
whiteboard	sbShowOnWhiteboard, sbShowOnPt