本文整理匯總了TypeScript中@ephox/agar.NamedChain.merge方法的典型用法代碼示例。如果您正苦於以下問題:TypeScript NamedChain.merge方法的具體用法?TypeScript NamedChain.merge怎麽用?TypeScript NamedChain.merge使用的例子?那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類@ephox/agar.NamedChain
的用法示例。
在下文中一共展示了NamedChain.merge方法的6個代碼示例,這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚,您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: cClickContextToolbarButton
const cGetImageSources = (label) => {
return NamedChain.asChain(
[
NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
Chain.label('Store img src before flip', NamedChain.write('srcBeforeFlip', cGetImageSrc)),
Chain.label('Flip image', NamedChain.read('editor', cClickContextToolbarButton(label))),
// Wait for image to flip
Chain.wait(500),
Chain.label('Store img src after flip', NamedChain.write('srcAfterFlip', cGetImageSrc)),
NamedChain.merge(['srcBeforeFlip', 'srcAfterFlip'], 'urls'),
NamedChain.output('urls')
]
);
};
示例2: cInsertTable
const cUnmergeCellsMeasureTableWidth = (label, data) => {
return Log.chain('TBA', 'Merge and unmerge cells, measure table widths', NamedChain.asChain(
[
NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
Chain.label('Insert table', NamedChain.direct('editor', cInsertTable(label, data.html), 'element')),
Chain.label('Drag SE (-100, 0)', NamedChain.read('editor', TableTestUtils.cDragHandle('se', -100, 0))),
Chain.label('Store width before merge', NamedChain.write('widthBefore', TableTestUtils.cGetWidth)),
Chain.label('Merge table cells', NamedChain.read('editor', TableTestUtils.cMergeCells(data.select))),
Chain.label('Split table cells', NamedChain.read('editor', TableTestUtils.cSplitCells)),
Chain.label('Store width after merge/unmerge', NamedChain.write('widthAfter', TableTestUtils.cGetWidth)),
NamedChain.merge(['widthBefore', 'widthAfter'], 'widths'),
NamedChain.output('widths')
]
));
};
示例3: cInsertTable
const cInsertColumnMeasureWidth = (label, data) => {
return Log.chain('TBA', 'Insert column before, insert column after, erase column and measure table widths', NamedChain.asChain(
[
NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
Chain.label('Insert table', NamedChain.direct('editor', cInsertTable(label, data.html), 'element')),
Chain.label('Drag SE (-100, 0)', NamedChain.read('editor', TableTestUtils.cDragHandle('se', -100, 0))),
Chain.label('Store width before split', NamedChain.write('widthBefore', TableTestUtils.cGetWidth)),
Chain.label('Insert column before', NamedChain.read('editor', TableTestUtils.cInsertColumnBefore)),
Chain.label('Insert column after', NamedChain.read('editor', TableTestUtils.cInsertColumnAfter)),
Chain.label('Delete column', NamedChain.read('editor', TableTestUtils.cDeleteColumn)),
Chain.label('Store width after split', NamedChain.write('widthAfter', TableTestUtils.cGetWidth)),
NamedChain.merge(['widthBefore', 'widthAfter'], 'widths'),
NamedChain.output('widths')
]
));
};
示例4: Plugin
UnitTest.asynctest('browser.tinymce.plugins.table.ResizeTableTest', (success, failure) => {
const lastObjectResizeStartEvent = Cell<any>(null);
const lastObjectResizedEvent = Cell<any>(null);
Plugin();
SilverTheme();
const assertWithin = function (value, min, max) {
Assertions.assertEq('asserting if value falls within a certain range', true, value >= min && value <= max);
};
const cAssertWidths = Chain.op(function (input: any) {
const expectedPx = input.widthBefore.px - 100;
const expectedPercent = input.widthAfter.px / input.widthBefore.px * 100;
// not able to match the percent exactly - there's always a difference in fractions, so lets assert a small range instead
assertWithin(input.widthAfter.px, expectedPx - 1, expectedPx + 1);
Assertions.assertEq('table width should be in percents', true, input.widthAfter.isPercent);
assertWithin(input.widthAfter.raw, expectedPercent - 1, expectedPercent + 1);
});
const cBindResizeEvents = Chain.mapper(function (input: any) {
const objectResizeStart = (e) => {
lastObjectResizeStartEvent.set(e);
};
const objectResized = (e) => {
lastObjectResizedEvent.set(e);
};
input.editor.on('ObjectResizeStart', objectResizeStart);
input.editor.on('ObjectResized', objectResized);
return {
objectResizeStart,
objectResized
};
});
const cUnbindResizeEvents = Chain.mapper(function (input: any) {
input.editor.off('ObjectResizeStart', input.events.objectResizeStart);
input.editor.off('ObjectResized', input.events.objectResized);
return {};
});
const cClearResizeEventData = Chain.op(() => {
lastObjectResizeStartEvent.set(null);
lastObjectResizedEvent.set(null);
});
const cTableInsertResizeMeasure = NamedChain.asChain([
NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
NamedChain.write('events', cBindResizeEvents),
NamedChain.direct('editor', TableTestUtils.cInsertTable(5, 2), 'element'),
NamedChain.write('widthBefore', TableTestUtils.cGetWidth),
NamedChain.read('element', Mouse.cTrueClick),
NamedChain.read('editor', TableTestUtils.cDragHandle('se', -100, 0)),
NamedChain.write('widthAfter', TableTestUtils.cGetWidth),
NamedChain.write('events', cUnbindResizeEvents),
NamedChain.merge(['widthBefore', 'widthAfter'], 'widths'),
NamedChain.output('widths')
]);
const cAssertWidthsShouldBe = (unit: string) => Chain.op((input: any) => {
const expectingPercent = (unit === '%');
Assertions.assertEq(`table width before resizing is in ${unit}`, expectingPercent, input.widthBefore.isPercent);
Assertions.assertEq(`table width after resizing is in ${unit}`, expectingPercent, input.widthAfter.isPercent);
});
const cAssertEventData = (state, expectedEventName) => Chain.op((_) => {
Assertions.assertEq('Should be table element', 'TABLE', state.get().target.nodeName);
Assertions.assertEq('Should be expected resize event', expectedEventName, state.get().type);
Assertions.assertEq('Should have width', 'number', typeof state.get().width);
Assertions.assertEq('Should have height', 'number', typeof state.get().height);
});
NamedChain.pipeline([
NamedChain.write('editor', Editor.cFromSettings({
plugins: 'table',
width: 400,
theme: 'silver',
base_url: '/project/tinymce/js/tinymce',
})),
// when table is resized by one of the handlers it should retain the dimension units after the resize, be it px or %
cClearResizeEventData,
NamedChain.direct('editor', cTableInsertResizeMeasure, 'widths'),
NamedChain.read('widths', cAssertWidths),
cAssertEventData(lastObjectResizeStartEvent, 'objectresizestart'),
cAssertEventData(lastObjectResizedEvent, 'objectresized'),
// using configuration option [table_responsive_width=true] we are able to control the default units of the table
cClearResizeEventData,
NamedChain.read('editor', ApiChains.cSetContent('')),
NamedChain.direct('editor', cTableInsertResizeMeasure, 'widths'),
NamedChain.read('widths', cAssertWidthsShouldBe('%')),
cAssertEventData(lastObjectResizeStartEvent, 'objectresizestart'),
cAssertEventData(lastObjectResizedEvent, 'objectresized'),
cClearResizeEventData,
//.........這裏部分代碼省略.........
示例5: Plugin
UnitTest.asynctest('browser.tinymce.plugins.table.ResizeTableTest', (success, failure) => {
const lastObjectResizeStartEvent = Cell<any>(null);
const lastObjectResizedEvent = Cell<any>(null);
Plugin();
Theme();
const cGetBody = Chain.mapper(function (editor: any) {
return TinyDom.fromDom(editor.getBody());
});
const cInsertTable = function (cols, rows) {
return Chain.mapper(function (editor: any) {
return TinyDom.fromDom(editor.plugins.table.insertTable(cols, rows));
});
};
const cDragHandle = function (id, deltaH, deltaV) {
return NamedChain.asChain([
NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
NamedChain.direct('editor', cGetBody, 'editorBody'),
NamedChain.read('editorBody', Chain.control(
UiFinder.cFindIn('#mceResizeHandle' + id),
Guard.tryUntil('wait for resize handlers', 100, 40000)
)),
NamedChain.read('editorBody', Chain.fromChains([
UiFinder.cFindIn('#mceResizeHandle' + id),
Mouse.cMouseDown,
Mouse.cMouseMoveTo(deltaH, deltaV),
Mouse.cMouseUp
])),
NamedChain.outputInput
]);
};
const cGetWidth = Chain.mapper(function (input: any) {
const editor = input.editor;
const elm = input.element.dom();
const rawWidth = editor.dom.getStyle(elm, 'width');
const pxWidth = editor.dom.getStyle(elm, 'width', true);
return {
raw: parseFloat(rawWidth),
px: parseInt(pxWidth, 10),
isPercent: /%$/.test(rawWidth)
};
});
const assertWithin = function (value, min, max) {
Assertions.assertEq('asserting if value falls within a certain range', true, value >= min && value <= max);
};
const cAssertWidths = Chain.op(function (input: any) {
const expectedPx = input.widthBefore.px - 100;
const expectedPercent = input.widthAfter.px / input.widthBefore.px * 100;
// not able to match the percent exactly - there's always a difference in fractions, so lets assert a small range instead
assertWithin(input.widthAfter.px, expectedPx - 1, expectedPx + 1);
Assertions.assertEq('table width should be in percents', true, input.widthAfter.isPercent);
assertWithin(input.widthAfter.raw, expectedPercent - 1, expectedPercent + 1);
});
const cBindResizeEvents = Chain.mapper(function (input: any) {
const objectResizeStart = (e) => {
lastObjectResizeStartEvent.set(e);
};
const objectResized = (e) => {
lastObjectResizedEvent.set(e);
};
input.editor.on('ObjectResizeStart', objectResizeStart);
input.editor.on('ObjectResized', objectResized);
return {
objectResizeStart,
objectResized
};
});
const cUnbindResizeEvents = Chain.mapper(function (input: any) {
input.editor.off('ObjectResizeStart', input.events.objectResizeStart);
input.editor.off('ObjectResized', input.events.objectResized);
return {};
});
const cClearResizeEventData = Chain.op(() => {
lastObjectResizeStartEvent.set(null);
lastObjectResizedEvent.set(null);
});
const cTableInsertResizeMeasure = NamedChain.asChain([
NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
NamedChain.write('events', cBindResizeEvents),
NamedChain.direct('editor', cInsertTable(5, 2), 'element'),
NamedChain.write('widthBefore', cGetWidth),
NamedChain.read('element', Mouse.cTrueClick),
NamedChain.read('editor', cDragHandle('se', -100, 0)),
NamedChain.write('widthAfter', cGetWidth),
NamedChain.write('events', cUnbindResizeEvents),
NamedChain.merge(['widthBefore', 'widthAfter'], 'widths'),
//.........這裏部分代碼省略.........
示例6: function
UnitTest.asynctest('browser.tinymce.plugins.table.ResizeTableTest', function () {
const success = arguments[arguments.length - 2];
const failure = arguments[arguments.length - 1];
Plugin();
Theme();
const cGetBody = Chain.mapper(function (editor) {
return TinyDom.fromDom(editor.getBody());
});
const cInsertTable = function (cols, rows) {
return Chain.mapper(function (editor) {
return TinyDom.fromDom(editor.plugins.table.insertTable(cols, rows));
});
};
const cDragHandle = function (id, deltaH, deltaV) {
return NamedChain.asChain([
NamedChain.direct(NamedChain.inputName(), Chain.identity, 'editor'),
NamedChain.direct('editor', cGetBody, 'editorBody'),
NamedChain.read('editorBody', Chain.control(
UiFinder.cFindIn('#mceResizeHandle' + id),
Guard.tryUntil('wait for resize handlers', 100, 40000)
)),
NamedChain.read('editorBody', Chain.fromChains([
UiFinder.cFindIn('#mceResizeHandle' + id),
Mouse.cMouseDown,
Mouse.cMouseMoveTo(deltaH, deltaV),
Mouse.cMouseUp
])),
NamedChain.outputInput
]);
};
const cGetWidth = Chain.mapper(function (input) {
const editor = input.editor;
const elm = input.element.dom();
const rawWidth = editor.dom.getStyle(elm, 'width');
const pxWidth = editor.dom.getStyle(elm, 'width', true);
return {
raw: parseFloat(rawWidth),
px: parseInt(pxWidth, 10),
isPercent: /%$/.test(rawWidth)
};
});
const assertWithin = function (value, min, max) {
Assertions.assertEq('asserting if value falls within a certain range', true, value >= min && value <= max);
};
const cAssertWidths = Chain.op(function (input) {
const expectedPx = input.widthBefore.px - 100;
const expectedPercent = input.widthAfter.px / input.widthBefore.px * 100;
// not able to match the percent exactly - there's always a difference in fractions, so lets assert a small range instead
assertWithin(input.widthAfter.px, expectedPx - 1, expectedPx + 1);
Assertions.assertEq('table width should be in percents', true, input.widthAfter.isPercent);
assertWithin(input.widthAfter.raw, expectedPercent - 1, expectedPercent + 1);
});
NamedChain.pipeline([
NamedChain.write('editor', Editor.cFromSettings({
plugins: 'table',
width: 400,
skin_url: '/project/js/tinymce/skins/lightgray'
})),
NamedChain.direct('editor', cInsertTable(5, 2), 'element'),
NamedChain.write('widthBefore', cGetWidth),
NamedChain.read('element', Mouse.cTrueClick),
NamedChain.read('editor', cDragHandle('se', -100, 0)),
NamedChain.write('widthAfter', cGetWidth),
NamedChain.merge(['widthBefore', 'widthAfter'], 'widths'),
NamedChain.read('widths', cAssertWidths),
NamedChain.read('editor', Editor.cRemove)
], function () {
success();
}, failure);
});