Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
},
backstage, ariaAttrs
);
const inlineDialogComp = GuiFactory.build(InlineView.sketch({
lazySink: backstage.shared.getSink,
dom: {
tag: 'div',
classes: [ ]
},
// Fires the default dismiss event.
fireDismissalEventInstead: { },
inlineBehaviours: Behaviour.derive([
AddEventsBehaviour.config('window-manager-inline-events', [
// Can't just fireDismissalEvent formCloseEvent, because it is on the parent component of the dialog
AlloyEvents.run(SystemEvents.dismissRequested(), (comp, se) => {
AlloyTriggers.emit(dialogUi.dialog, formCancelEvent);
}),
]),
...inlineAdditionalBehaviours(editor, isStickyToolbar)
])
}));
inlineDialog.set(inlineDialogComp);
// Position the inline dialog
InlineView.showWithin(
inlineDialogComp,
anchor,
GuiFactory.premade(dialogUi.dialog),
Option.some(Body.body())
);{
dom: {
tag: 'div',
classes: (isTouch ? [ 'tox-dialog-wrap__backdrop', 'tox-dialog-wrap__backdrop--opaque' ] : [ 'tox-dialog-wrap__backdrop' ])
}
}
]
}
},
modalBehaviours: Behaviour.derive([
// Dupe warning.
AddEventsBehaviour.config('basic-dialog-events', [
AlloyEvents.run(formCancelEvent, (comp, se) => {
spec.onCancel();
}),
AlloyEvents.run(formSubmitEvent, (comp, se) => {
spec.onSubmit();
}),
])
])
}
);
};fieldBehaviours: Behaviour.derive([
AddEventsBehaviour.config('form-field-events', [
AlloyEvents.run(colorInputChangeEvent, (comp, se) => {
memColorButton.getOpt(comp).each((colorButton) => {
Css.set(colorButton.element(), 'background-color', se.event().color());
});
AlloyTriggers.emitWith(comp, formChangeEvent, { name: spec.name } );
}),
AlloyEvents.run(colorSwatchChangeEvent, (comp, se) => {
FormField.getField(comp).each((field) => {
Representing.setValue(field, se.event().value());
// Focus the field now that we've set its value
Composing.getCurrent(comp).each(Focusing.focus);
});
}),
AlloyEvents.run(colorPickerCancelEvent, (comp, se) => {
FormField.getField(comp).each((field) => {
Composing.getCurrent(comp).each(Focusing.focus);
});
})
])
])
});
};// 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([
Disabling.config({ disabled: spec.disabled }),
Tabstopping.config({ }),
AddEventsBehaviour.config('selectbox-change', [
AlloyEvents.run(NativeEvents.change(), (component, _) => {
AlloyTriggers.emitWith(component, formChangeEvent, { name: spec.name } );
})
])
])
});
const chevron: Option = 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 = {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: {dropdownBehaviours: Behaviour.derive([
...spec.dropdownBehaviours,
DisablingConfigs.button(spec.disabled),
Unselecting.config({ }),
Replacing.config({ }),
AddEventsBehaviour.config('dropdown-events', [
onControlAttached(spec, editorOffCell),
onControlDetached(spec, editorOffCell)
]),
AddEventsBehaviour.config('menubutton-update-display-text', [
AlloyEvents.run(updateMenuText, (comp, se) => {
optMemDisplayText.bind((mem) => mem.getOpt(comp)).each((displayText) => {
Replacing.set(displayText, [ GuiFactory.text(sharedBackstage.providers.translate(se.event().text())) ] );
});
}),
AlloyEvents.run(updateMenuIcon, (comp, se) => {
optMemDisplayIcon.bind((mem) => mem.getOpt(comp)).each((displayIcon) => {
Replacing.set(displayIcon, [ renderReplacableIconFromPack(se.event().icon(), sharedBackstage.providers.icons) ] );
});
})
])
]),
eventOrder: Merger.deepMerge(toolbarButtonEventOrder, {
mousedown: [ 'focusing', 'alloy.base.behaviour', 'item-type-events', 'normal-dropdown-events' ]
}),
sandboxBehaviours: Behaviour.derive([
Keying.config({
mode: 'special',
onLeft: onLeftOrRightInMenu,
onRight: onLeftOrRightInMenu
})Html.set(comp.element(), html.join(''));
};
const onClick = runOnItem((comp, se, tgt, itemValue) => {
se.stop();
AlloyTriggers.emitWith(comp, formActionEvent, {
name: spec.name,
value: itemValue
});
});
const collectionEvents = [
AlloyEvents.run(NativeEvents.mouseover(), runOnItem((comp, se, tgt) => {
Focus.focus(tgt);
})),
AlloyEvents.run(NativeEvents.click(), onClick),
AlloyEvents.run(SystemEvents.tap(), onClick),
AlloyEvents.run(NativeEvents.focusin(), runOnItem((comp, se, tgt) => {
SelectorFind.descendant(comp.element(), '.' + ItemClasses.activeClass).each((currentActive) => {
Class.remove(currentActive, ItemClasses.activeClass);
});
Class.add(tgt, ItemClasses.activeClass);
})),
AlloyEvents.run(NativeEvents.focusout(), runOnItem((comp) => {
SelectorFind.descendant(comp.element(), '.' + ItemClasses.activeClass).each((currentActive) => {
Class.remove(currentActive, ItemClasses.activeClass);
});
})),
AlloyEvents.runOnExecute(runOnItem((comp, se, tgt, itemValue) => {
AlloyTriggers.emitWith(comp, formActionEvent, {
name: spec.name,
value: itemValuereturn state.getBlobState();
}
}
}),
AddEventsBehaviour.config('image-tools-events', [
AlloyEvents.run(ImageToolsEvents.internal.undo(), undo),
AlloyEvents.run(ImageToolsEvents.internal.redo(), redo),
AlloyEvents.run(ImageToolsEvents.internal.zoom(), zoom),
AlloyEvents.run(ImageToolsEvents.internal.back(), back),
AlloyEvents.run(ImageToolsEvents.internal.apply(), apply),
AlloyEvents.run(ImageToolsEvents.internal.transform(), transform),
AlloyEvents.run(ImageToolsEvents.internal.tempTransform(), tempTransform),
AlloyEvents.run(ImageToolsEvents.internal.transformApply(), transformApply),
AlloyEvents.run(ImageToolsEvents.internal.swap(), swap)
]),
ComposingConfigs.self()
])
};
};coupledFieldBehaviours: Behaviour.derive([
Disabling.config({
disabled: spec.disabled,
onDisabled: (comp) => {
AlloyFormCoupledInputs.getField1(comp).bind(AlloyFormField.getField).each(Disabling.disable);
AlloyFormCoupledInputs.getField2(comp).bind(AlloyFormField.getField).each(Disabling.disable);
AlloyFormCoupledInputs.getLock(comp).each(Disabling.disable);
},
onEnabled: (comp) => {
AlloyFormCoupledInputs.getField1(comp).bind(AlloyFormField.getField).each(Disabling.enable);
AlloyFormCoupledInputs.getField2(comp).bind(AlloyFormField.getField).each(Disabling.enable);
AlloyFormCoupledInputs.getLock(comp).each(Disabling.enable);
}
}),
AddEventsBehaviour.config('size-input-events2', [
AlloyEvents.run(ratioEvent, function (component, simulatedEvent) {
const isField1 = simulatedEvent.event().isField1();
const optCurrent = isField1 ? AlloyFormCoupledInputs.getField1(component) : AlloyFormCoupledInputs.getField2(component);
const optOther = isField1 ? AlloyFormCoupledInputs.getField2(component) : AlloyFormCoupledInputs.getField1(component);
const value1 = optCurrent.map(Representing.getValue).getOr('');
const value2 = optOther.map(Representing.getValue).getOr('');
converter = makeRatioConverter(value1, value2);
})
])
])
});
};return `<div class="tox-collection__group">${ch.join('')}</div>`;
});
Html.set(comp.element(), html.join(''));
};
const onClick = runOnItem((comp, se, tgt, itemValue) => {
se.stop();
AlloyTriggers.emitWith(comp, formActionEvent, {
name: spec.name,
value: itemValue
});
});
const collectionEvents = [
AlloyEvents.run(NativeEvents.mouseover(), runOnItem((comp, se, tgt) => {
Focus.focus(tgt);
})),
AlloyEvents.run(NativeEvents.click(), onClick),
AlloyEvents.run(SystemEvents.tap(), onClick),
AlloyEvents.run(NativeEvents.focusin(), runOnItem((comp, se, tgt) => {
SelectorFind.descendant(comp.element(), '.' + ItemClasses.activeClass).each((currentActive) => {
Class.remove(currentActive, ItemClasses.activeClass);
});
Class.add(tgt, ItemClasses.activeClass);
})),
AlloyEvents.run(NativeEvents.focusout(), runOnItem((comp) => {
SelectorFind.descendant(comp.element(), '.' + ItemClasses.activeClass).each((currentActive) => {
Class.remove(currentActive, ItemClasses.activeClass);
});
})),
AlloyEvents.runOnExecute(runOnItem((comp, se, tgt, itemValue) => {