fluid.renderer.selectorsToCutpoints(selectors, options)

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

fluid.renderer.selectorsToCutpoints(selectors, options);

File name: RendererUtilities.js

Parameters

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

Array

An array of cutpoint specifications

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:

{
    id: <string>,
    selector: <string>
}

Notes

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

Examples

var selectors = {
    cancel: ".csc-confirmationDialogButton-cancel",
    proceed: ".csc-confirmationDialogButton-proceed",
    act: ".csc-confirmationDialogButton-act",
    close: ".csc-confirmationDialog-closeBtn"
};
var cutpoints = fluid.renderer.selectorsToCutpoints(selectors);

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

[
    { id: "cancel", selector: ".csc-confirmationDialogButton-cancel" },
    { id: "proceed", selector: ".csc-confirmationDialogButton-proceed" },
    { id: "act", selector: ".csc-confirmationDialogButton-act" },
    { id: "close", selector: ".csc-confirmationDialog-closeBtn" }
]
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"],
});

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

[
    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.