flyter.attach('.ftr', 'text');Four different types by default: text, checkboxes, radio and select
Flyter provides two renderers by default, popup and inline mode
Lot of configuration and customization options and callbacks available
Asynchronous callbacks on loading, rendering, initialization and more
The latest documentation can be found on the github repo page.
Github & Documentationflyter.attach('#ex-doc', {
initialValue: ['1'],
emptyValueDisplay: "I'm not feeling anything today",
type: {
name: 'checkbox',
config: {
dataSource: [
{ label: '😊', value: '1' },
{ label: '❤️', value: '2' },
{ label: '🔥', value: '3' },
{ label: '🍺', value: '4' },
],
}
},
valueFormatter: async (val, instance) => {
// Here we ask the current instance to build the value which
// would have been displayed if we didn't overload valueFormatter.
// It uses the type to build a readable value, uses the one from
// the current editing session if any or builds one on the fly otherwise
const readableValue = await instance.buildStandardReadableValue(val);
return `Today I'm feeling ${readableValue}`;
}
});Note that some configuration value can expect various format such as json, number or boolean. In these cases you can add a modifier to the configuration value:
json to parse value to a json objectbool or boolean to parse value to a booleanint to parse value to an integerfloat to parse value to a float numberdata-fcnf-renderer-config-popper_config:json='{"placement":"bottom"}' <div class="flyter-attr" data-fcnf-initial_value="Edit me">Edit me</div>
<div class="flyter-attr"
data-fcnf-type-name="text"
data-fcnf-type-config-type="textarea"
data-fcnf-initial_value="Edit me too!"
data-fcnf-renderer-config-popper_config:json='{"placement":"bottom"}'>Edit me</div> Flyter can be attached to any kind of element. It will append new children to it to work. This might cause problem, for example with buttons when triggering it, as the triggered element will not be the button but the span which flyter has appended to it. To handle it you can use the triggerOnTarget option.
flyter.attach('.flyter-btn', {
triggerOnTarget: true, // will attach trigger to the target given during initialization
renderer: {
config: {
popperConfig: {
modifiers: [
{
name: 'offset',
options: {
offset: [50, 70], // offset to match this big bootstrap button
}
}
]
}
}
}
});