本文整理汇总了TypeScript中@ephox/alloy.Toggling.config方法的典型用法代码示例。如果您正苦于以下问题:TypeScript Toggling.config方法的具体用法?TypeScript Toggling.config怎么用?TypeScript Toggling.config使用的例子?那么恭喜您, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类@ephox/alloy.Toggling
的用法示例。
在下文中一共展示了Toggling.config方法的10个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: function
const field = function (name, placeholder) {
const inputSpec = Memento.record(Input.sketch({
placeholder,
onSetValue (input, data) {
// If the value changes, inform the container so that it can update whether the "x" is visible
AlloyTriggers.emit(input, NativeEvents.input());
},
inputBehaviours: Behaviour.derive([
Composing.config({
find: Option.some
}),
Tabstopping.config({ }),
Keying.config({
mode: 'execution'
})
]),
selectOnFocus: false
}));
const buttonSpec = Memento.record(
Button.sketch({
dom: UiDomFactory.dom('<button class="${prefix}-input-container-x ${prefix}-icon-cancel-circle ${prefix}-icon"></button>'),
action (button) {
const input = inputSpec.get(button);
Representing.setValue(input, '');
}
})
);
return {
name,
spec: Container.sketch({
dom: UiDomFactory.dom('<div class="${prefix}-input-container"></div>'),
components: [
inputSpec.asSpec(),
buttonSpec.asSpec()
],
containerBehaviours: Behaviour.derive([
Toggling.config({
toggleClass: Styles.resolve('input-container-empty')
}),
Composing.config({
find (comp) {
return Option.some(inputSpec.get(comp));
}
}),
AddEventsBehaviour.config(clearInputBehaviour, [
// INVESTIGATE: Because this only happens on input,
// it won't reset unless it has an initial value
AlloyEvents.run(NativeEvents.input(), function (iContainer) {
const input = inputSpec.get(iContainer);
const val = Representing.getValue(input);
const f = val.length > 0 ? Toggling.off : Toggling.on;
f(iContainer);
})
])
])
})
};
};
示例2:
const makeCell = (row, col, labelId) => {
const emitCellOver = (c) => AlloyTriggers.emitWith(c, cellOverEvent, {row, col} );
const emitExecute = (c) => AlloyTriggers.emitWith(c, cellExecuteEvent, {row, col} );
return GuiFactory.build({
dom: {
tag: 'div',
attributes: {
role: 'button',
['aria-labelledby']: labelId
}
},
behaviours: Behaviour.derive([
AddEventsBehaviour.config('insert-table-picker-cell', [
AlloyEvents.run(NativeEvents.mouseover(), Focusing.focus),
AlloyEvents.run(SystemEvents.execute(), emitExecute),
AlloyEvents.run(SystemEvents.tapOrClick(), emitExecute)
]),
Toggling.config({
toggleClass: 'tox-insert-table-picker__selected',
toggleOnExecute: false
}),
Focusing.config({onFocus: emitCellOver})
])
});
};
示例3: function
const sketch = function (rawSpec) {
const spec = ValueSchema.asRawOrDie('SizeSlider', schema, rawSpec);
const isValidValue = function (valueIndex) {
return valueIndex >= 0 && valueIndex < spec.sizes.length;
};
const onChange = function (slider, thumb, valueIndex) {
if (isValidValue(valueIndex)) {
spec.onChange(valueIndex);
}
};
return Slider.sketch({
dom: {
tag: 'div',
classes: [
Styles.resolve('slider-' + spec.category + '-size-container'),
Styles.resolve('slider'),
Styles.resolve('slider-size-container') ]
},
onChange,
onDragStart (slider, thumb) {
Toggling.on(thumb);
},
onDragEnd (slider, thumb) {
Toggling.off(thumb);
},
min: 0,
max: spec.sizes.length - 1,
stepSize: 1,
getInitialValue: spec.getInitialValue,
snapToGrid: true,
sliderBehaviours: Behaviour.derive([
Receivers.orientation(Slider.refresh)
]),
components: [
Slider.parts().spectrum({
dom: UiDomFactory.dom('<div class="${prefix}-slider-size-container"></div>'),
components: [
UiDomFactory.spec('<div class="${prefix}-slider-size-line"></div>')
]
}),
Slider.parts().thumb({
dom: UiDomFactory.dom('<div class="${prefix}-slider-thumb"></div>'),
behaviours: Behaviour.derive([
Toggling.config({
toggleClass: Styles.resolve('thumb-active')
})
])
})
]
});
};
示例4: function
const sketch = function (onView, translate): SketchSpec {
const memIcon = Memento.record(
Container.sketch({
dom: UiDomFactory.dom('<div aria-hidden="true" class="${prefix}-mask-tap-icon"></div>'),
containerBehaviours: Behaviour.derive([
Toggling.config({
toggleClass: Styles.resolve('mask-tap-icon-selected'),
toggleOnExecute: false
})
])
})
);
const onViewThrottle = Throttler.first(onView, 200);
return Container.sketch({
dom: UiDomFactory.dom('<div class="${prefix}-disabled-mask"></div>'),
components: [
Container.sketch({
dom: UiDomFactory.dom('<div class="${prefix}-content-container"></div>'),
components: [
Button.sketch({
dom: UiDomFactory.dom('<div class="${prefix}-content-tap-section"></div>'),
components: [
memIcon.asSpec()
],
action (button) {
onViewThrottle.throttle();
},
buttonBehaviours: Behaviour.derive([
Toggling.config({
toggleClass: Styles.resolve('mask-tap-icon-selected')
})
])
})
]
})
]
});
};
示例5: function
const getToggleBehaviours = function (command) {
return Behaviour.derive([
Toggling.config({
toggleClass: Styles.resolve('toolbar-button-selected'),
toggleOnExecute: false,
aria: {
mode: 'pressed'
}
}),
Receivers.format(command, function (button, status) {
const toggle = status ? Toggling.on : Toggling.off;
toggle(button);
})
]);
};
示例6: renderCommonToolbarButton
const renderToolbarToggleButtonWith = (spec: Toolbar.ToolbarToggleButton, providersBackstage: UiFactoryBackstageProviders, bonusEvents: AlloyEvents.AlloyEventKeyAndHandler<any>[]) => {
return Merger.deepMerge(
renderCommonToolbarButton(spec,
{
toolbarButtonBehaviours: [
Replacing.config({ }),
Toggling.config({ toggleClass: ToolbarButtonClasses.Ticked, aria: { mode: 'pressed' }, toggleOnExecute: false })
].concat(bonusEvents.length > 0 ? [
// TODO: May have to pass through eventOrder if events start clashing
AddEventsBehaviour.config('toolbarToggleButtonWith', bonusEvents)
] : [ ]),
getApi: getToggleApi,
onSetup: spec.onSetup
},
providersBackstage
)
) as SketchSpec;
};
示例7: function
const styleselect = function () {
return Buttons.forToolbar('style-formats', function (button) {
editor.fire('toReading');
realm.dropup().appear(styleFormatsMenu, Toggling.on, button);
}, Behaviour.derive([
Toggling.config({
toggleClass: Styles.resolve('toolbar-button-selected'),
toggleOnExecute: false,
aria: {
mode: 'pressed'
}
}),
Receiving.config({
channels: Objects.wrapAll([
Receivers.receive(TinyChannels.orientationChanged(), Toggling.off),
Receivers.receive(TinyChannels.dropupDismissed(), Toggling.off)
])
})
]));
};
示例8: function
export default function () {
const makeGroup = function (gSpec) {
const scrollClass = gSpec.scrollable === true ? '${prefix}-toolbar-scrollable-group' : '';
return {
dom: UiDomFactory.dom('<div aria-label="' + gSpec.label + '" class="${prefix}-toolbar-group ' + scrollClass + '"></div>'),
tgroupBehaviours: Behaviour.derive([
AddEventsBehaviour.config('adhoc-scrollable-toolbar', gSpec.scrollable === true ? [
AlloyEvents.runOnInit(function (component, simulatedEvent) {
Css.set(component.element(), 'overflow-x', 'auto');
Scrollables.markAsHorizontal(component.element());
Scrollable.register(component.element());
})
] : [ ])
]),
components: [
Container.sketch({
components: [
ToolbarGroup.parts().items({ })
]
})
],
markers: {
itemClass: Styles.resolve('toolbar-group-item')
},
items: gSpec.items
};
};
const toolbar = GuiFactory.build(
Toolbar.sketch(
{
dom: UiDomFactory.dom('<div class="${prefix}-toolbar"></div>'),
components: [
Toolbar.parts().groups({ })
],
toolbarBehaviours: Behaviour.derive([
Toggling.config({
toggleClass: Styles.resolve('context-toolbar'),
toggleOnExecute: false,
aria: {
mode: 'none'
}
}),
Keying.config({
mode: 'cyclic'
})
]),
shell: true
}
)
);
const wrapper = GuiFactory.build(
Container.sketch({
dom: {
classes: [ Styles.resolve('toolstrip') ]
},
components: [
GuiFactory.premade(toolbar)
],
containerBehaviours: Behaviour.derive([
Toggling.config({
toggleClass: Styles.resolve('android-selection-context-toolbar'),
toggleOnExecute: false
})
])
})
);
const resetGroups = function () {
Toolbar.setGroups(toolbar, initGroups.get());
Toggling.off(toolbar);
};
const initGroups = Cell([ ]);
const setGroups = function (gs) {
initGroups.set(gs);
resetGroups();
};
const createGroups = function (gs) {
return Arr.map(gs, Fun.compose(ToolbarGroup.sketch, makeGroup));
};
const refresh = function () {
Toolbar.refresh(toolbar);
};
const setContextToolbar = function (gs) {
Toggling.on(toolbar);
Toolbar.setGroups(toolbar, gs);
};
const restoreToolbar = function () {
if (Toggling.isOn(toolbar)) {
resetGroups();
//.........这里部分代码省略.........
示例9: function
const makeSlider = function (spec) {
const getColor = function (hue) {
// Handle edges.
if (hue < 0) {
return 'black';
} else if (hue > 360) {
return 'white';
} else {
return 'hsl(' + hue + ', 100%, 50%)';
}
};
// Does not fire change intentionally.
const onInit = function (slider, thumb, value) {
const color = getColor(value);
Css.set(thumb.element(), 'background-color', color);
};
const onChange = function (slider, thumb, value) {
const color = getColor(value);
Css.set(thumb.element(), 'background-color', color);
spec.onChange(slider, thumb, color);
};
return Slider.sketch({
dom: UiDomFactory.dom('<div class="${prefix}-slider ${prefix}-hue-slider-container"></div>'),
components: [
Slider.parts()['left-edge'](UiDomFactory.spec('<div class="${prefix}-hue-slider-black"></div>')),
Slider.parts().spectrum({
dom: UiDomFactory.dom('<div class="${prefix}-slider-gradient-container"></div>'),
components: [
UiDomFactory.spec('<div class="${prefix}-slider-gradient"></div>')
],
behaviours: Behaviour.derive([
Toggling.config({
toggleClass: Styles.resolve('thumb-active')
})
])
}),
Slider.parts()['right-edge'](UiDomFactory.spec('<div class="${prefix}-hue-slider-white"></div>')),
Slider.parts().thumb({
dom: UiDomFactory.dom('<div class="${prefix}-slider-thumb"></div>'),
behaviours: Behaviour.derive([
Toggling.config({
toggleClass: Styles.resolve('thumb-active')
})
])
})
],
onChange,
onDragStart (slider, thumb) {
Toggling.on(thumb);
},
onDragEnd (slider, thumb) {
Toggling.off(thumb);
},
onInit,
stepSize: 10,
min: 0,
max: 360,
getInitialValue: spec.getInitialValue,
sliderBehaviours: Behaviour.derive([
Receivers.orientation(Slider.refresh)
])
});
};
示例10: sequence
const renderField = (s) => {
return {
uid: s.uid,
dom: {
tag: 'div',
classes: [ 'tox-dropzone-container' ]
},
behaviours: Behaviour.derive([
RepresentingConfigs.memory([ ]),
ComposingConfigs.self(),
Disabling.config({}),
Toggling.config({
toggleClass: 'dragenter',
toggleOnExecute: false
}),
AddEventsBehaviour.config('dropzone-events', [
AlloyEvents.run('dragenter', sequence([ stopper, Toggling.toggle ])),
AlloyEvents.run('dragleave', sequence([ stopper, Toggling.toggle ])),
AlloyEvents.run('dragover', stopper),
AlloyEvents.run('drop', sequence([ stopper, onDrop ])),
AlloyEvents.run(NativeEvents.change(), onSelect)
]),
]),
components: [
{
dom: {
tag: 'div',
classes: [ 'tox-dropzone' ],
styles: {}
},
components: [
{
dom: {
tag: 'p',
innerHtml: providersBackstage.translate('Drop an image here')
}
},
Button.sketch({
dom: {
tag: 'button',
innerHtml: providersBackstage.translate('Browse for an image'),
styles: {
position: 'relative'
},
classes: [ 'tox-button', 'tox-button--secondary']
},
components: [
memInput.asSpec()
],
action: (comp) => {
const inputComp = memInput.get(comp);
inputComp.element().dom().click();
},
buttonBehaviours: Behaviour.derive([
Tabstopping.config({ })
])
})
]
}
]
};
};