export const renderCollection = (spec: Types.Collection.Collection, providersBackstage: UiFactoryBackstageProviders): SketchSpec => {
// DUPE with TextField.
const pLabel = spec.label.map((label) => renderLabel(label, providersBackstage));
const runOnItem = (f: (c: AlloyComponent, tgt: Element, itemValue: string) => void) => <T extends EventFormat>(comp: AlloyComponent, se: SimulatedEvent<T>) => {
SelectorFind.closest(se.event().target(), '[data-collection-item-value]').each((target) => {
f(comp, target, Attr.get(target, 'data-collection-item-value'));
});
};
const escapeAttribute = (ch) => {
if (ch === '"') { return '"'; }
return ch;
};
const setContents = (comp, items) => {
const htmlLines = Arr.map(items, (item) => {
const textContent = spec.columns === 1 ? `<div class="tox-collection__item-label">${item.text}</div>` : '';
const iconContent = `<div class="tox-collection__item-icon">${item.icon}</div>`;
// Replacing the hyphens and underscores in collection items with spaces
// to ensure the screen readers pronounce the words correctly.
// This is only for aria purposes. Emoticon and Special Character names will still use _ and - for autocompletion.
const mapItemName = {
'_': ' ',
' - ': ' ',
'-': ' '
};
// Title attribute is added here to provide tooltips which might be helpful to sighted users.
// Using aria-label here overrides the Apple description of emojis and special characters in Mac/ MS description in Windows.
// But if only the title attribute is used instead, the names are read out twice. i.e., the description followed by the item.text.
const ariaLabel = item.text.replace(/\_| \- |\-/g, (match) => {
return mapItemName[match];
});
return `<div class="tox-collection__item" tabindex="-1" data-collection-item-value="${escapeAttribute(item.value)}" title="${ariaLabel}" aria-label="${ariaLabel}">${iconContent}${textContent}</div>`;
});
const chunks = spec.columns > 1 && spec.columns !== 'auto' ? Arr.chunk(htmlLines, spec.columns) : [ htmlLines ];
const html = Arr.map(chunks, (ch) => {
return `<div class="tox-collection__group">${ch.join('')}</div>`;
});
Html.set(comp.element(), html.join(''));
};
const collectionEvents = [
AlloyEvents.run<SugarEvent>(NativeEvents.mouseover(), runOnItem((comp, tgt) => {
Focus.focus(tgt);
})),
AlloyEvents.run<SugarEvent>(SystemEvents.tapOrClick(), runOnItem((comp, tgt, itemValue) => {
AlloyTriggers.emitWith(comp, formActionEvent, {
name: spec.name,
value: itemValue
});
})),
AlloyEvents.run(NativeEvents.focusin(), runOnItem((comp, tgt, itemValue) => {
SelectorFind.descendant(comp.element(), '.' + ItemClasses.activeClass).each((currentActive) => {
Class.remove(currentActive, ItemClasses.activeClass);
});
Class.add(tgt, ItemClasses.activeClass);
})),
AlloyEvents.run(NativeEvents.focusout(), runOnItem((comp, tgt, itemValue) => {
SelectorFind.descendant(comp.element(), '.' + ItemClasses.activeClass).each((currentActive) => {
Class.remove(currentActive, ItemClasses.activeClass);
});
})),
AlloyEvents.runOnExecute(runOnItem((comp, tgt, itemValue) => {
AlloyTriggers.emitWith(comp, formActionEvent, {
name: spec.name,
value: itemValue
});
}))
];
const pField = AlloyFormField.parts().field({
dom: {
tag: 'div',
// FIX: Read from columns
classes: [ 'tox-collection' ].concat(spec.columns !== 1 ? [ 'tox-collection--grid' ] : [ 'tox-collection--list' ])
},
components: [ ],
factory: { sketch: Fun.identity },
behaviours: Behaviour.derive([
Replacing.config({ }),
Representing.config({
store: {
mode: 'memory',
initialValue: [ ]
},
onSetValue: (comp, items) => {
setContents(comp, items);
if (spec.columns === 'auto') {
detectSize(comp, 5, 'tox-collection__item').each(({ numRows, numColumns }) => {
Keying.setGridSize(comp, numRows, numColumns);
});
}
AlloyTriggers.emit(comp, formResizeEvent);
}
}),
Tabstopping.config({ }),
Keying.config(
deriveCollectionMovement(spec.columns, 'normal')
),
AddEventsBehaviour.config('collection-events', collectionEvents)
])
});
const extraClasses = ['tox-form__group--collection'];
return renderFormFieldWith(pLabel, pField, extraClasses);
};
const renderTextField = function (spec: TextFieldFoo, providersBackstage: UiFactoryBackstageProviders) {
const pLabel = spec.label.map((label) => renderLabel(label, providersBackstage));
const baseInputBehaviours = [
Keying.config({
mode: 'execution',
useEnter: spec.multiline !== true,
useControlEnter: spec.multiline === true,
execute: (comp) => {
AlloyTriggers.emit(comp, formSubmitEvent);
return Option.some(true);
},
}),
AddEventsBehaviour.config('textfield-change', [
AlloyEvents.run(NativeEvents.input(), (component, _) => {
AlloyTriggers.emitWith(component, formChangeEvent, { name: spec.name } );
}),
AlloyEvents.run(SystemEvents.postPaste(), (component, _) => {
AlloyTriggers.emitWith(component, formChangeEvent, { name: spec.name } );
})
]),
Tabstopping.config({})
];
const validatingBehaviours = spec.validation.map((vl) => {
return Invalidating.config({
getRoot(input) {
return Traverse.parent(input.element());
},
invalidClass: 'tox-invalid',
validator: {
validate(input) {
const v = Representing.getValue(input);
const result = vl.validator(v);
return Future.pure(result === true ? Result.value(v) : Result.error(result));
},
validateOnLoad: vl.validateOnLoad
}
});
}).toArray();
const pField = AlloyFormField.parts().field({
tag: spec.multiline === true ? 'textarea' : 'input',
inputAttributes: spec.placeholder.fold(
() => {},
(placeholder) => ({ placeholder: providersBackstage.translate(placeholder) })
),
inputClasses: [spec.classname],
inputBehaviours: Behaviour.derive(
Arr.flatten<Behaviour.NamedConfiguredBehaviour<Behaviour.BehaviourConfigSpec, Behaviour.BehaviourConfigDetail>>([
baseInputBehaviours,
validatingBehaviours
])
),
selectOnFocus: false,
factory: AlloyInput
});
const extraClasses = spec.flex ? ['tox-form__group--stretched'] : [];
return renderFormFieldWith(pLabel, pField, extraClasses);
};