本文整理匯總了TypeScript中@ephox/alloy.Toggling類的典型用法代碼示例。如果您正苦於以下問題：TypeScript Toggling類的具體用法？TypeScript Toggling怎麽用？TypeScript Toggling使用的例子？那麽, 這裏精選的類代碼示例或許可以為您提供幫助。
在下文中一共展示了Toggling類的9個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: 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')
})
])
})
]
});
};示例2: 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);
})
])
])
})
};
};示例3:
editor.undoManager.transact(function () {
if (Toggling.isOn(item)) {
editor.formatter.remove(value);
} else {
editor.formatter.apply(value);
}
});示例4:
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})
])
});
};示例5:
Step.sync(function () {
const component = memento.get(realm.socket());
Assertions.assertEq(
'Selected/Pressed state of component: (' + Attr.get(component.element(), 'class') + ')',
state,
Toggling.isOn(component)
);
}),示例6: 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')
})
])
})
]
})
]
});
};示例7: 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);
})
]);
};示例8: 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;
};示例9: 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)
])
})
]));
};