export const renderSelectBox = (spec: Types.SelectBox.SelectBox, providersBackstage: UiFactoryBackstageProviders): SketchSpec => {
const translatedOptions = Arr.map(spec.items, (item) => {
return {
text: providersBackstage.translate(item.text),
value: item.value
};
});
// DUPE with TextField.
const pLabel = spec.label.map((label) => renderLabel(label, providersBackstage));
const pField = AlloyFormField.parts().field({
// TODO: Alloy should not allow dom changing of an HTML select!
dom: { },
selectAttributes: {
size: spec.size
},
options: translatedOptions,
factory: AlloyHtmlSelect,
selectBehaviours: Behaviour.derive([
Tabstopping.config({ }),
AddEventsBehaviour.config('selectbox-change', [
AlloyEvents.run(NativeEvents.change(), (component, _) => {
AlloyTriggers.emitWith(component, formChangeEvent, { name: spec.name } );
})
])
])
});
const chevron = spec.size > 1 ? Option.none() :
Option.some({
dom: {
tag: 'div',
classes: ['tox-selectfield__icon-js'],
innerHtml: Icons.get('chevron-down', providersBackstage.icons)
}
});
const selectWrap: SimpleSpec = {
dom: {
tag: 'div',
classes: ['tox-selectfield']
},
components: Arr.flatten([[pField], chevron.toArray()])
};
return AlloyFormField.sketch({
dom: {
tag: 'div',
classes: ['tox-form__group']
},
components: Arr.flatten<AlloySpec>([pLabel.toArray(), [selectWrap]])
});
};
return ApproxStructure.build(function (s, str/*, arr*/) {
const children = Arr.map(texts, function (text, i) {
return Arr.flatten([
index === i && before ? [ s.text(str.is(Zwsp.ZWSP)) ] : [ ],
[
s.element(
'a',
{
attrs: {
'data-mce-selected': str.none('inline-boundary'),
'data-mce-href': str.is('#'),
'href': str.is('#')
},
children: [
s.text(str.is(text))
]
}
)
],
index === i && before === false ? [ s.text(str.is(Zwsp.ZWSP)) ] : [ ]
]);
});
return s.element('p', {
children: addGeckoBr(s, str, Arr.flatten(children))
});
});
return Arr.bind(navigation.concat(navigation.slice(0, 1)), (nav, i) => {
const exploration = (nav.subitems.length > 0) ? [
Keyboard.sKeydown(doc, Keys.right(), { }),
sAssertFocusOnItem(doc, nav.subitems[0])
].concat(
Arr.bind(
nav.subitems.slice(1).concat(nav.subitems.slice(0, 1)),
(si) => [
Keyboard.sKeydown(doc, Keys.down(), { }),
sDelay,
sAssertFocusOnItem(doc, si)
]
)
).concat([
Keyboard.sKeydown(doc, Keys.escape(), { })
]) : [
// Should do nothing
Keyboard.sKeydown(doc, Keys.right(), { })
];
return Arr.flatten([
[ sAssertFocusOnItem(doc, nav.item) ],
exploration,
[ sAssertFocusOnItem(doc, nav.item) ],
[ sDelay ],
// Move to the next one
i < navigation.length ? [ Keyboard.sKeydown(doc, Keys.down(), { }) ] : [ ]
]);
});
const sBookmarkTest = (namedChains) => {
return Chain.asStep({}, [
NamedChain.asChain(Arr.flatten([
[ cCreateNamedEditor ],
namedChains,
[ cRemoveEditor ]
])
)]);
};
const dom = (hasIcons: boolean, columns: Types.ColumnTypes, presets: Types.PresetTypes) => {
const menuClasses = getMenuClasses(presets);
return {
tag: 'div',
classes: Arr.flatten([
[ menuClasses.menu, `tox-menu-${columns}-column` ],
hasIcons ? [ menuClasses.hasIcons ] : [ ]
])
};
};
components: Arr.map(spec.fields, function (field, i) {
return i <= spec.maxFieldIndex ? Container.sketch({
dom: UiDomFactory.dom('<div class="${prefix}-serialised-dialog-screen"></div>'),
components: Arr.flatten([
[ navigationButton(-1, 'previous', (i > 0)) ],
[ parts.field(field.name, field.spec) ],
[ navigationButton(+1, 'next', (i < spec.maxFieldIndex)) ]
])
}) : parts.field(field.name, field.spec);
})
TinyLoader.setup(function (editor, onSuccess, onFailure) {
Pipeline.async({}, Arr.flatten([
[
sParseStyles(editor),
sProtectConditionalCommentsInHeadFoot(editor)
],
suite.toSteps(editor)
]), onSuccess, onFailure);
teardown(editor);
}, {
TinyLoader.setup((editor: Editor, onSuccess, onFailure) => {
const uiContainer = Element.fromDom(editor.getContainer());
const contentAreaContainer = Element.fromDom(editor.getContentAreaContainer());
const tinyApis = TinyApis(editor);
Pipeline.async({ }, Arr.flatten([
sUiContainerTest(editor, uiContainer, tinyApis),
sContentAreaContainerTest(contentAreaContainer)
]), onSuccess, onFailure);
},
const controlHWrapper = (): AlloySpec => {
return {
dom: {
tag: 'div',
classes: ['tox-form__controls-h-stack']
},
components: Arr.flatten([
[memUrlBox.asSpec()],
optUrlPicker.map(() => renderInputButton(spec.label, browseUrlEvent, 'tox-browse-url', 'browse', providersBackstage)).toArray()
])
};
};
(linkInfo) => {
const history = filterByQuery(term, historyTargets(urlBackstage.getHistory(fileType)));
return fileType === 'file' ? joinMenuLists([
history,
filterByQuery(term, headerTargets(linkInfo)),
filterByQuery(term, Arr.flatten([
anchorTargetTop(linkInfo),
anchorTargets(linkInfo),
anchorTargetBottom(linkInfo)
]))
])
: history;
}
