Child pages
  • fluid.renderer.selectorsToCutpoints

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migration of unmigrated content due to installation of a new plugin
Include Page
sneak peek warning
sneak peek warning
{div:class=} h1.
Wiki Markup
Div
classapi-page

fluid.renderer.selectorsToCutpoints(selectors,

options)

{section} {column:width=70%} Produce a list of renderer [cutpoints|#Cutpoints] based on the provided selectors. {code:javascript|borderStyle=none|bgColor=white}

Section
Column
width70%

Produce a list of renderer cutpoints based on the provided selectors.

Code Block
javascript
bgColorwhite
borderStylenone
javascript

fluid.renderer.selectorsToCutpoints(selectors, options);
{code} *

File

name:

* {{

RendererUtilities.js

}} h2. Parameters {span:class=

Parameters

Span
classborderless-table

} |*{{selectors}}*|

selectors

(Object)

An

object

containing

named

selectors.

| |*{{options}}*|

options

(Object)

Options

that

will

configure

how

the

process

works.

See

[

|#Options]

below

for

more

information.

| {span} h2. Return Value {span:class=borderless-table} |*Array*| An array of cutpoint specifications | {span} {column} {column:width=5%} {column} {column} h3. See Also * [fluid.render] {column} {section} ---- h3. Options The following options configure out the cutpoint creation process occurs: ||Name||Description|| | {{selectorsToIgnore}} | A list of selector names to ignore. Cutpoints will not be created for these selectors | | {{repeatingSelectors}} | A list of selector names that identify elements that will repeat.| h3. Cutpoints A cutpoint has the form: {code:javascript}

Return Value

Span
classborderless-table

Array

An array of cutpoint specifications

Column
width5%

Column

See Also


Options

The following options configure out the cutpoint creation process occurs:

Name

Description

selectorsToIgnore

A list of selector names to ignore. Cutpoints will not be created for these selectors

repeatingSelectors

A list of selector names that identify elements that will repeat.

Cutpoints

A cutpoint has the form:

Code Block
javascript
javascript

{
    id: <string>,
    selector: <string>
}
{code} h3. Notes {{

Notes

fluid.renderer.selectorsToCutpoints

}}

will

use

the

selector

names

as

the

{{id}}s

in

the

cutpoints.

h3. Examples {section} {column} {code:javascript}

Examples

Section
Column
Code Block
javascript
javascript

var selectors = {
    cancel: ".csc-confirmationDialogButton-cancel",
    proceed: ".csc-confirmationDialogButton-proceed",
    act: ".csc-confirmationDialogButton-act",
    close: ".csc-confirmationDialog-closeBtn"
};
var cutpoints = fluid.renderer.selectorsToCutpoints(selectors);
{code} {column} {column} The code to the left will produce the following {{cutpoints}} array: {code:javascript}
Column

The code to the left will produce the following cutpoints array:

Code Block
javascript
javascript

[
    { id: "cancel", selector: ".csc-confirmationDialogButton-cancel" },
    { id: "proceed", selector: ".csc-confirmationDialogButton-proceed" },
    { id: "act", selector: ".csc-confirmationDialogButton-act" },
    { id: "close", selector: ".csc-confirmationDialog-closeBtn" }
]
{code} {column} {section} {section} {column} {code:javascript}
Section
Column
Code Block
javascript
javascript

var selectors = {
    addToPanel: ".csc-autocomplete-addToPanel",
    authorityItem: ".csc-autocomplete-authorityItem",
    noMatches: ".csc-autocomplete-noMatches",
    matches: ".csc-autocomplete-matches",
    matchItem: ".csc-autocomplete-matchItem",
    longestMatch: ".csc-autocomplete-longestMatch",
    addTermTo: ".csc-autocomplete-addTermTo"
};
var cutpoints = fluid.renderer.selectorsToCutpoints(selectors, {
    selectorsToIgnore: [ "addToPanel" ],
    repeatingSelectors: ["matchItem", "authorityItem"],
});
{code} {column} {column} The code to the left will produce the following {{cutpoints}} array: {code:javascript}
Column

The code to the left will produce the following cutpoints array:

Code Block
javascript
javascript

[
    addToPanel: ".csc-autocomplete-addToPanel",
    { id: "authorityItem:", selector: ".csc-autocomplete-authorityItem" },
    { id: "noMatches", selector: ".csc-autocomplete-noMatches" },
    { id: "matches", selector: ".csc-autocomplete-matches" },
    { id: "matchItem:", selector: ".csc-autocomplete-matchItem" },
    { id: "longestMatch", selector: ".csc-autocomplete-longestMatch" },
    { id: "addTermTo", selector: ".csc-autocomplete-addTermTo" }
]
{code}

Note

that

the

{{

addToPanel

}}

selector

has

not

been

converted

into

a

cutpoint,

and

that

two

cutpoint

IDs

have

a

colon

(":")

added

to

the

name.

{column} {section} {div}