Child pages
  • fluid.renderer.selectorsToCutpoints

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

...

Div
classapi-page

fluid.renderer.selectorsToCutpoints(selectors, options)

Section
Column
width70%

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

Code Block
javascript
javascript
bgColorwhite
borderStylenonejavascript
fluid.renderer.selectorsToCutpoints(selectors, options);

File name: RendererUtilities.js

Parameters

Span
classborderless-table

selectors

(Object) An object containing named selectors.

options

(Object) Options that will configure how the process works. See Options below for more information.

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>
}

Notes

fluid.renderer.selectorsToCutpoints will use the selector names as the {{id}}s in the cutpoints.

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);
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" }
]
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"],
});
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" }
]

Note that the addToPanel selector has not been converted into a cutpoint, and that two cutpoint IDs have a colon (":") added to the name.