Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

In the Preferences Framework, "Panels" are Infusion renderer components that present adjusters, or controls to the user to allow them to adjust the preference settings. For more information about Infusion Components, see Understanding Infusion Components and other pages linked to in the "See Also" panel on this page.

The configuration information used to define a preferences panel must include certain required information:

  • the fluid.prefs.panelspanel and autoInit grades (provided by the Framework)
  • a Preference Map (see below)
  • a renderer proto-tree or produceTree function
  • selectors for rendering the controls, labels, etc
  • any other information required by the panel

...

Code Block
javascript
javascript
fluid.defaults("fluid.prefs.panelspanel.textSize", {
    gradeNames: ["fluid.prefs.panelspanel", "autoInit"],
    preferenceMap: {
        "fluid.prefs.textSize": {
            "model.value": "default",
            "range.min": "minimum",
            "range.max": "maximum"
        }
    },
    ....
Code Block
javascript
javascript
fluid.defaults("fluid.prefs.panelspanel.textFont", {
    gradeNames: ["fluid.prefs.panelspanel", "autoInit"],
    preferenceMap: {
        "fluid.prefs.textFont": {
            "model.value": "default",
            "controlValues.textFont": "enum"
        }
    },
    ....

...

Code Block
javascript
javascript
fluid.defaults("fluid.prefs.panelspanel.lineSpace", {
    gradeNames: ["fluid.prefs.panelspanel", "autoInit"],
    preferenceMap: {
        "fluid.prefs.lineSpace": {
            "model.value": "default",
            "range.min": "minimum",
            "range.max": "maximum"
        }
    },
    range: {
        min: 1,
        max: 2
    },
    selectors: {
        lineSpace: ".flc-prefsEditor-line-space",
        label: ".flc-prefsEditor-line-space-label",
        narrowIcon: ".flc-prefsEditor-line-space-narrowIcon",
        wideIcon: ".flc-prefsEditor-line-space-wideIcon",
        multiplier: ".flc-prefsEditor-multiplier"
    },
    protoTree: {
        label: {messagekey: "lineSpaceLabel"},
        narrowIcon: {messagekey: "lineSpaceNarrowIcon"},
        wideIcon: {messagekey: "lineSpaceWideIcon"},
        multiplier: {messagekey: "multiplier"},
        lineSpace: {
            decorators: {
                type: "fluid",
                func: "fluid.prefs.textfieldSlider"
            }
        }
    },
    sliderOptions: {
        orientation: "horizontal",
        step: 0.1,
        range: "min"
    }
});

...

Code Block
javascript
javascript
fluid.defaults("fluid.videoPlayer.panels.captionSettings", {
    gradeNames: ["fluid.prefs.panelspanel", "autoInit"],
    preferenceMap: {
        "fluid.videoPlayer.captions": {
            // the key is the internal model path, the value is the path into the schema
            "model.show": "default"
        },
        "fluid.videoPlayer.captionLanguage": {
            "model.language": "default"
        }
    },
    model: {
        show: false,
        language: "en"
    },
    listeners: {
        onCreate: "fluid.videoPlayer.panels.captionSettings.toggleLanguageOnShow"
    },
    strings: {
        language: ["English", "French"]
    },
    controlValues: {
        language: ["en", "fr"]
    },
    styles: {
        icon: "fl-icon"
    },
    selectors: {
        label: ".flc-videoPlayer-media-label",
        show: ".flc-videoPlayer-media",
        choiceLabel: ".flc-videoPlayer-media-choice-label",
        language: ".flc-videoPlayer-media-language"
    },
    produceTree: "fluid.videoPlayer.panels.captionSettings.produceTree"
});

...