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; }