本文整理匯總了TypeScript中@ephox/alloy.GuiFactory類的典型用法代碼示例。如果您正苦於以下問題：TypeScript GuiFactory類的具體用法？TypeScript GuiFactory怎麽用？TypeScript GuiFactory使用的例子？那麽, 這裏精選的類代碼示例或許可以為您提供幫助。
在下文中一共展示了GuiFactory類的10個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: renderColorInput
(store, doc, body) => {
return GuiFactory.build(
Container.sketch({
dom: {
classes: [ 'colorinput-container' ]
},
components: [
renderColorInput({
type: 'colorinput',
name: 'alpha',
label: Option.some('test-color-input'),
}, helpers.shared, {
colorPicker: (callback, value) => {},
hasCustomColors: () => true,
getColors: () => [
{ type: choiceItem, text: 'Turquoise', value: '#18BC9B' },
{ type: choiceItem, text: 'Green', value: '#2FCC71' },
{ type: choiceItem, text: 'Blue', value: '#3598DB' },
{ type: choiceItem, text: 'Purple', value: '#9B59B6' },
{ type: choiceItem, text: 'Navy Blue', value: '#34495E' }
],
getColorCols: () => 3
})
]
})
);
},示例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:
const renderText = (text: string): AlloySpec => ({
dom: {
tag: 'div',
classes: [ ItemClasses.textClass ]
},
components: [ GuiFactory.text(I18n.translate(text)) ]
});示例4: zoomFit
return memContainer.getOpt(anyInSystem).map((panel) => {
const aImg = GuiFactory.external({
element: img
});
Replacing.replaceAt(panel, 1, Option.some(aImg));
const lastViewRect = viewRectState.get();
const viewRect = {
x: 0,
y: 0,
w: img.dom().naturalWidth,
h: img.dom().naturalHeight
};
viewRectState.set(viewRect);
const rect = Rect.inflate(viewRect, -20, -20);
rectState.set(rect);
if (lastViewRect.w !== viewRect.w || lastViewRect.h !== viewRect.h) {
zoomFit(panel, img);
}
repaintImg(panel, img);
return img;
});示例5:
moveTo: (x: number, y: number) => {
InlineView.showAt(notificationWrapper, {
anchor: 'makeshift',
x,
y
}, GuiFactory.premade(notification));
},示例6: closeWindow
const factory = (contents: Types.Dialog.Dialog<T>, internalInitialData: T, dataValidator: Processor): Types.Dialog.DialogInstanceApi<T> => {
const initialData = validateData<T>(internalInitialData, dataValidator);
const dialogInit = {
dataValidator,
initialData,
internalDialog: contents
};
const dialogUi = renderInlineDialog<T>(
dialogInit,
{
redial: DialogManager.DialogManager.redial,
closeWindow: () => {
InlineView.hide(inlineDialog);
closeWindow(dialogUi.instanceApi);
}
},
extras.backstage, ariaAttrs
);
const inlineDialog = GuiFactory.build(InlineView.sketch({
lazySink: extras.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 fireDimissalEvent formCloseEvent, because it is on the parent component of the dialog
AlloyEvents.run(SystemEvents.dismissRequested(), (comp, se) => {
AlloyTriggers.emit(dialogUi.dialog, formCancelEvent);
})
])
])
}));
InlineView.showAt(
inlineDialog,
anchor,
GuiFactory.premade(dialogUi.dialog)
);
dialogUi.instanceApi.setData(initialData);
Keying.focusIn(dialogUi.dialog);
return dialogUi.instanceApi;
};示例7: renderInsertTableMenuItem
export function renderInsertTableMenuItem(spec: Menu.FancyMenuItem): ItemTypes.WidgetItemSpec {
const numRows = 10;
const numColumns = 10;
const sizeLabelId = Id.generate('size-label');
const cells = makeCells(sizeLabelId, numRows, numColumns);
const memLabel = Memento.record({
dom: {
tag: 'span',
classes: ['tox-insert-table-picker__label'],
attributes: {
id: sizeLabelId
}
},
components: [GuiFactory.text('0x0')],
behaviours: Behaviour.derive([
Replacing.config({})
])
});
return {
type: 'widget',
data: { value: Id.generate('widget-id')},
dom: {
tag: 'div',
classes: ['tox-fancymenuitem'],
},
autofocus: true,
components: [ItemWidget.parts().widget({
dom: {
tag: 'div',
classes: ['tox-insert-table-picker']
},
components: makeComponents(cells).concat(memLabel.asSpec()),
behaviours: Behaviour.derive([
AddEventsBehaviour.config('insert-table-picker', [
AlloyEvents.runWithTarget<CellEvent>(cellOverEvent, (c, t, e) => {
const row = e.event().row();
const col = e.event().col();
selectCells(cells, row, col, numRows, numColumns);
Replacing.set(memLabel.get(c), [makeLabelText(row, col)]);
}),
AlloyEvents.runWithTarget<CellEvent>(cellExecuteEvent, (c, _, e) => {
spec.onAction({numRows: e.event().row() + 1, numColumns: e.event().col() + 1});
AlloyTriggers.emit(c, SystemEvents.sandboxClose());
})
]),
Keying.config({
initSize: {
numRows,
numColumns
},
mode: 'flatgrid',
selector: '[role="button"]'
})
])
})]
};
}示例8:
const updateText: NotificationSketchApis['updateText'] = (comp, text) => {
if (comp.getSystem().isConnected()) {
const banner = memBannerText.get(comp);
Replacing.set(banner, [
GuiFactory.text(text)
]);
}
};示例9: renderHtmlPanel
(store, doc, body) => {
return GuiFactory.build(
renderHtmlPanel({
type: 'htmlpanel',
html: '<br /><br /><hr />',
presets: 'presentation'
})
);
},示例10:
Arr.last(stack.get()).each((last) => {
stack.set(stack.get().slice(0, stack.get().length - 1));
AlloyTriggers.emitWith(comp, changeSlideEvent, {
// Because we are using premade, we should have access to the same element
// to give focus (although it isn't working)
contents: GuiFactory.premade(last.bar),
focus: last.focus
});
});