Child pages
  • fluid.renderer.selectorsToCutpoints

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Wiki Markup
{include:sneak peek warning}
{div:class=api-page}

h1. 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}
fluid.renderer.selectorsToCutpoints(selectors, options);
{code}
*File name:* {{RendererUtilities.js}}

h2. Parameters

{span:class=borderless-table}
|*{{selectors}}*| (Object) An object containing named selectors. |
|*{{options}}*| (Object) Options that will configure how the process works. See [Options|#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}
{
    id: <string>,
    selector: <string>
}
{code}

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

h3. Examples
{section}
{column}
{code: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 rightleft will produce the following {{cutpoints}} array:
{code: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}
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 rightleft will produce the following {{cutpoints}} array:
{code: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}