selectors

Javascript object containing selectors for various fragments of the Inline Edit component.

The object can contain any subset of the following keys:
  text
  editContainer
  edit
  textEditButton
Any values not provided will revert to the default.

selectors: {
    text: ".flc-inlineEdit-text",
    editContainer: ".flc-inlineEdit-editContainer",
    edit: ".flc-inlineEdit-edit",
    textEditButton: ".flc-inlineEdit-textEditButton"
}

NOTE: The default editModeRenderer uses the default selector ".flc-inlineEdit-edit". If you are using the default editModeRenderer, do not over-ride this selector.

 strings

Configuration of short messages and strings which the component uses in its UI

key-value structure with string values

key-value structure with string values. The object can contain any subset of the following keys:

  editField
  editContainer
  editModeInstruction
  textEditButton

listeners

JavaScript object containing listeners to be attached to the supported events.

Keys in the object are event names, values are functions or arrays of functions.

See Supported Events

styles

Javascript object containing CSS style names that will be applied to the Inline Edit component.

The object can contain any subset of the following keys:
  text
  edit
  invitation
  defaultViewStyle
  emptyDefaultViewText
  focus
  tooltip
  editModeInstruction
  displayView
  textEditButton
Any values not provided will revert to the default.

styles: {
    text: "fl-inlineEdit-text",
    edit: "fl-inlineEdit-edit",
    invitation: "fl-inlineEdit-invitation",
    defaultViewStyle: "fl-inlineEdit-emptyText-invitation",
    emptyDefaultViewText: "fl-inlineEdit-emptyDefaultViewText",
    focus: "fl-inlineEdit-focus",
    tooltip: "fl-inlineEdit-tooltip",
    editModeInstruction: "fl-inlineEdit-editModeInstruction",
    displayView: "fl-inlineEdit-simple-editableText fl-inlineEdit-textContainer",
    textEditButton: "fl-offScreen-hidden"
}

NOTE: The default editModeRenderer uses the default style fl-inlineEdit-edit. If you are using the default editModeRenderer, do not over-ride this style.

paddings

Javascript object containing pixel values that will configure the size of the edit field.

The object can contain any subset of the following keys:
  edit
  minimumEdit
  minimumView
Any values not provided will revert to the default.

applyEditPadding

Indicates whether the values stored for edit and minimumEdit will be applied to the edit mode or ignored

boolean

true

submitOnEnter

Determines whether receiving an "Enter" keypress will cause the component to finish editing and commit the changed value. If this is given a direct value true or false, the value will be honoured. If the value is left at undefined, the default behaviour will be inferred from the tag peering with the editField selector - a <input>> tag will cause submission, whereas a <textarea> will not.

boolean

undefined

 displayModeRenderer

A function that calls upon the markup corresponding to the display mode of the component.

function - InlineEditRenderer
See InlineEdit Types for more info.

defaultDisplayModeRenderer, a function that creates the displayModeRenderer

editModeRenderer

A function that creates or recognises the markup corresponding to the editable view of the component. The function is intended to inspect the state of the existing markup, and if it is "incomplete" in some way, to fill in the required fields. In all cases, the function returns a structure

return {
  container: [jQuery],
  field: [jQuery]
};

where container is a container element for the edit field and field is the editable field itself. The value held within field is intended to be stored and retrieved in the document using the editAccessor function, which is a ViewAccessor

function - InlineEditRenderer
See InlineEdit Types for more info.

defaultEditModeRenderer, a function that creates the edit field based on the following template:

<span><input type='text' class='flc-inlineEdit-edit fl-inlineEdit-edit'/></span>

displayAccessor

A ViewAccessor, or name of one, which is used to store and retrieve the editable value from the read-only view of the control, peering with the tag referenced by the selector text. The standard accessor uses the standard jQuery functions val or text depending on the tag type.

ViewAccessor
See InlineEdit Types for more info.

"fluid.inlineEdit.standardAccessor"

displayView

A InlineEditView, or name of one, which is used to operate the implementation of the refreshView method as applied to the read-only view of the component. This contains a single method named refreshView which brings the state of this view in line with the component's model, performing any work (in general, dealing with any default text) in addition to the raw value-fetching work done by the displayAccessor

InlineEditView
See InlineEdit Types for more info.

"fluid.inlineEdit.standardDisplayView"

editAccessor

As for displayAccessor, but for use when the editable view of the component is shown

ViewAccessor
See #InlineEdit Types for more info.

"fluid.inlineEdit.standardAccessor"

editView

As for displayView, but for use when the editable view of the component is shown

InlineEditView
See InlineEdit Types for more info.

"fluid.inlineEdit.standardEditView"

lazyEditView

For editRenderer s which are particularly expensive, for example, those which instantiate a rich text editing component, it is valuable to delay their rendering until they are required. Setting lazyEditView to true will ensure that the editRenderer is not triggered until the component is sent into edit mode.

boolean

false

blurHandlerBinder

A function which acts on the overall component to bind a handler for the blur event received on the editable view. For integrations where the editable view is a complex collection of elements, such as dropdown inlineEdit, this needs to take an arbitrary form. A standard implementation is provided as fluid.deadMansBlur which will infer that focus is leaving a set of elements if none of them receives a focus after a blur within a 150 millisecond horizon

function(that)

null

selectOnEdit

Indicates whether or not to automatically select the editable text when the component switches into edit mode.

boolean

false

useTooltip

Indicates whether or not the component should display a custom ("invitation") tooltip on mouse hover

boolean

false

tooltipText

The text to use for the tooltip to be displayed when hovering the mouse over the component

string

"Click item to edit"

tooltipId

The id to be used for the DOM node holding the tooltip

string

"tooltip"

tooltipDelay

The delay, in ms, between starting to hover over the component and showing the tooltip

number

1000