API Changes from 2.0 to 3.0

Edit on GitHub

This page contains a list of the features, APIs, and etc. that have changed in Infusion 3.0.

Framework Changes

Core Framework Changes

This section describes major APIs that were in common use. For information about less widely-used features removed in 3.0, consult Deprecations in 2.0.

Model Transformations

  • fluid.transforms.round can take in scale and method options for rounding numbers to a decimal value. Additionally, numbers round away from 0 (i.e 0.5 -> 1, -0.5 -> -1).
  • fluid.transforms.valueMapper takes an defaultInput option to provide the model data directly. This also provides a location for adding nested transformations.

Fluid Document

fluid.focus and fluid.blur now return an ES6 promise resolved when the related DOM event fires. In Infusion 2.0, they would immediately return the node that the event was bound to.

Preferences Framework

Model Changes

Reset

By default, reset will only reset the preferences model path. Other model values will remain unchanged. If you'd like to also have these paths changed, add a listener to the beforeReset event to execute a fireChangeRequest for the model paths you need to reset. (See: ArrowScrolling.js)

listeners: {
    "beforeReset.resetPanelIndex": {
        listener: "{that}.applier.fireChangeRequest",
        args: {path: "panelIndex", value: 0, type: "ADD", source: "reset"}
    }
}
Model Paths

A prefsEditor is configured with the fluid.remoteModelComponent grade. This adds a local and remote model path for managing model changes between the component and those stored elsewhere. Any model value that should be persisted must be relayed into the local model path.

Any prefsEditor using the fluid.prefs.arrowScrolling grade, such as the one contained in fluid.prefs.separatedPanel, will contain the following new model paths.

Model Path Default Description
panelIndex 0 The index of the panel to scroll to in the small screen responsive view.
panelMaxIndex A number representing the index of the last panel The maximum index that panelIndex can take. It is calculated from the total number of panels present.

Preference Map

The keyword "default" was used to setup a model relay between an internal model and the preferences state. If no existing preference was stored, the value was taken from the "default" property of the related primary schema. The keyword has been changed to "value".

In 2.0
{
    "preferenceMap": {
        "fluid.prefs.tableOfContents": {
            "model.toc": "default"
        }
    }
}
In 3.0
{
    "preferenceMap": {
        "fluid.prefs.tableOfContents": {
            "model.toc": "value"
        }
    }
}

Preference Editor

Selectors

The panels selector, by default .flc-prefsEditor-panel, is used to find all panel containers within the preference editor. The mobile presentation of UIO makes use of this to determine which panel is in view.

UI Options / Separated Panel
In 2.0
<!-- BEGIN markup for Preference Editor -->
<div class="flc-prefsEditor-separatedPanel fl-prefsEditor-separatedPanel">
    <!-- This div is for the sliding panel that shows and hides the Preference Editor controls -->
    <div class="fl-panelBar">
        <span class="fl-prefsEditor-buttons">
            <button id="reset" class="flc-prefsEditor-reset fl-prefsEditor-reset">
                <span class="fl-icon-undo"></span>
                Reset
            </button>
            <button id="show-hide" class="flc-slidingPanel-toggleButton fl-prefsEditor-showHide">
                Show/Hide
            </button>
        </span>
    </div>
</div>
<!-- END markup for Preference Editor -->
In 3.0
<!-- BEGIN markup for Preference Editor -->
<div class="flc-prefsEditor-separatedPanel fl-prefsEditor-separatedPanel">
    <!--
        This div is for the sliding panel bar that shows and hides the Preference Editor controls in the mobile view.
        A separate panel bar for mobile displays is needed to preserve the correct tab order.
    -->
    <div class="fl-panelBar fl-panelBar-smallScreen">
        <span class="fl-prefsEditor-buttons">
            <button class="flc-slidingPanel-toggleButton fl-prefsEditor-showHide">
                Show/Hide
            </button>
            <button class="flc-prefsEditor-reset fl-prefsEditor-reset">
                <span class="fl-icon-undo"></span>
                Reset
            </button>
        </span>
    </div>

    <!-- This is the div that will contain the Preference Editor component -->
    <div class="flc-slidingPanel-panel flc-prefsEditor-iframe"></div>

    <!--
        This div is for the sliding panel bar that shows and hides the Preference Editor controls in the desktop view.
        A separate panel bar for desktop displays is needed to preserve the correct tab order.
    -->
    <div class="fl-panelBar fl-panelBar-wideScreen">
        <span class="fl-prefsEditor-buttons">
            <button class="flc-slidingPanel-toggleButton fl-prefsEditor-showHide">
                Show/Hide
            </button>
            <button class="flc-prefsEditor-reset fl-prefsEditor-reset">
                <span class="fl-icon-undo"></span>
                Reset
            </button>
        </span>
    </div>
</div>
<!-- END markup for Preference Editor -->

Panel Changes

Selectors

All panels must supply a header selector, by default .flc-prefsEditor-header. This will be used by the fluid.prefs.arrowScrolling grade to provide the clickable arrows for navigating between adjusters in the small screen responsive view.

Contrast

The "Contrast" panel was refactored to be based off of the fluid.prefs.panel.themePicker grade.

Selectors
In 3.0.0 In 2.0.0
Selector Name Selector Selector Name Selector
description .flc-prefsEditor-themePicker-descr contrastDescr .flc-prefsEditor-contrast-descr
label .flc-prefsEditor-themePicker-label label .flc-prefsEditor-contrast-label
Message Bundle Changes
Message Bundle In 3.0.0 In 2.0.0
contrast.json "label" "contrastLabel"
"description" "contrastDescr"
"multiplier"
Line Spacing

The "Line Spacing" panel was refactored to be based off of the fluid.prefs.panel.stepperAdjuster grade.

Model Changes
In 3.0.0 In 2.0.0
value lineSpace
Message Bundle Changes
Message Bundle In 3.0.0 In 2.0.0
lineSpace.json "label" "lineSpaceLabel"
"description" "lineSpaceDescr"
"multiplier"

The "Links and Buttons" adjusters and enactors are collapsed to a single preference called "Enhance Inputs".

Model Changes
In 3.0.0 In 2.0.0
value
  • links
  • inputsLarger
Message Bundle Changes
In 3.0.0 In 2.0.0
Message Bundle Property Message Bundle Property
enhanceInputs.json label linksControls.json linksControlsLabel
description inputsLarger.json inputsChoiceLabel
linksControls.json LinksChoiceLabel
switchOn
switchOff
Table of Contents

The table of contents panel was refactored to be based off of the fluid.prefs.panel.switchAdjuster grade.

Model Changes
In 3.0.0 In 2.0.0
value toc
Message Bundle Changes
Message Bundle In 3.0.0 In 2.0.0
tableOfContents.json "label" "tocLabel"
"description" "tocDescr"
"switchOn"
"switchOff"
Text Size

The text size panel was refactored to be based off of the fluid.prefs.panel.stepperAdjuster grade.

Model Changes
In 3.0.0 In 2.0.0
value textSize
Message Bundle Changes
Message Bundle In 3.0.0 In 2.0.0
textSize.json "label" "textSizeLabel"
"description" "textSizeDescr"
"multiplier"
Text to Speech

The text to speech panel was refactored to be based off of the fluid.prefs.panel.switchAdjuster grade.

Model Changes
In 3.0.0 In 2.0.0
value speak
Message Bundle Changes
Message Bundle In 3.0.0 In 2.0.0
speak.json "label" "speakLabel"
"description" "speakDescr"
"switchOn"
"switchOff"

Store Changes

The fluid.prefs.store grade has been refactored to use fluid.dataSource as its base grade.

Primary Schema Changes

In 3.0.0 In 2.0.0
"enumLabels"
"multipleOf" "divisibleBy"

Component API Changes

Reorderer Component

  • The stylisticOffset selector was no longer in use and has been removed.

Tabs Component

The fluid.tabs component has been removed.

Textfield Slider

Removed the jQuery UI Slider, in favour of using a native HTML5 range input.