PHP Classes

File: public/js/tinymce/src/plugins/table/src/test/js/browser/DragResizeTest.js

Recommend this page to a friend!
  Classes of Abed Nego Ragil Putra   GoLavaCMS   public/js/tinymce/src/plugins/table/src/test/js/browser/DragResizeTest.js   Download  
File: public/js/tinymce/src/plugins/table/src/test/js/browser/DragResizeTest.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: GoLavaCMS
Publish content on Web pages with SEO support
Author: By
Last change:
Date: 6 years ago
Size: 10,815 bytes
 

Contents

Class file image Download
asynctest( 'browser.tinymce.plugins.table.DragResizeTest', [ 'ephox.agar.api.Assertions', 'ephox.agar.api.Chain', 'ephox.agar.api.GeneralSteps', 'ephox.agar.api.Logger', 'ephox.agar.api.Mouse', 'ephox.agar.api.Pipeline', 'ephox.agar.api.Step', 'ephox.agar.api.UiFinder', 'ephox.agar.api.Waiter', 'ephox.katamari.api.Cell', 'ephox.mcagar.api.TinyApis', 'ephox.mcagar.api.TinyLoader', 'ephox.sugar.api.dom.Hierarchy', 'ephox.sugar.api.node.Element', 'ephox.sugar.api.view.Height', 'ephox.sugar.api.view.Width', 'global!document', 'global!window', 'tinymce.plugins.table.Plugin', 'tinymce.themes.modern.Theme' ], function ( Assertions, Chain, GeneralSteps, Logger, Mouse, Pipeline, Step, UiFinder, Waiter, Cell, TinyApis, TinyLoader, Hierarchy, Element, Height, Width, document, window, TablePlugin, ModernTheme ) { var success = arguments[arguments.length - 2]; var failure = arguments[arguments.length - 1]; ModernTheme(); TablePlugin(); var sDragDrop = function (container, selector, dx, dy) { return Chain.asStep(container, [ UiFinder.cFindIn(selector), Mouse.cMouseDown, Mouse.cMouseMoveTo(dx, dy), Mouse.cMouseUpTo(dx, dy) ]); }; var sDragDropBlocker = function (container, selector, dx, dy) { return Chain.asStep({}, [ Chain.fromParent(Chain.inject(container), [ Chain.fromChains([ UiFinder.cFindIn(selector), Mouse.cMouseDown ]), Chain.fromChains([ UiFinder.cFindIn('div.ephox-dragster-blocker'), Mouse.cMouseMove, Mouse.cMouseMoveTo(dx, dy), Mouse.cMouseUpTo(dx, dy) ]) ]) ]); }; var sMouseover = function (container, selector) { return Chain.asStep(container, [ UiFinder.cFindIn(selector), Mouse.cMouseOver ]); }; var state = Cell(null); var sSetStateFrom = function (editor, path) { return Step.sync(function () { var element = Hierarchy.follow(Element.fromDom(editor.getBody()), path).getOrDie('could not find element'); var height = Height.get(element); var width = Width.get(element); state.set({ h: height, w: width }); }); }; var sResetState = Step.sync(function () { state.set(null); }); var looseEqual = function (exp, act, loose) { return Math.abs(exp - act) <= loose; }; var sAssertSizeChange = function (editor, path, change) { return Step.sync(function () { var element = Hierarchy.follow(Element.fromDom(editor.getBody()), path).getOrDie('could not find element'); var height = Height.get(element); var width = Width.get(element); var changedHeight = state.get().h + change.dh; var changedWidth = state.get().w + change.dw; Assertions.assertEq('height has changed as expected', true, looseEqual(changedHeight, height, 2)); Assertions.assertEq('width has changed as expected', true, looseEqual(changedWidth, width, 2)); }); }; var tableHtml = '<table style="border-collapse: collapse; width: 367px; height: 90px;" border="1">' + '<tbody>' + '<tr>' + '<td style="width: 180px;">a</td>' + '<td style="width: 180px;">b</td>' + '</tr>' + '<tr>' + '<td style="width: 180px;">1</td>' + '<td style="width: 180px;">2</td>' + '</tr>' + '</tbody>' + '</table>'; var sWaitForSelection = function (editor, tinyApis) { return GeneralSteps.sequence([ tinyApis.sSetSelection([0, 0, 0, 0, 0], 0, [0, 0, 0, 0, 0], 0), Waiter.sTryUntil( 'wait for resize handles', UiFinder.sExists(Element.fromDom(editor.getBody()), '#mceResizeHandlese'), 10, 1000 ) ]); }; TinyLoader.setup(function (editor, onSuccess, onFailure) { var tinyApis = TinyApis(editor); Pipeline.async({}, [ tinyApis.sFocus, Logger.t('resize table height by dragging bottom', GeneralSteps.sequence([ tinyApis.sSetContent('<table style="border-collapse: collapse;border: 0;"><tbody><tr><td style="height:45px;">a</td></tr><tr><td style="height:45px;">a</td></tr></tbody></table>'), sSetStateFrom(editor, [0, 0, 0, 0]), sWaitForSelection(editor, tinyApis), sMouseover(Element.fromDom(editor.getBody()), 'td'), sDragDropBlocker(Element.fromDom(editor.getDoc().documentElement), 'div[data-row="0"]', 0, 50), sAssertSizeChange(editor, [0, 0, 0, 0], { dh: 50, dw: 0 }), sResetState ])), Logger.t('resize table width by dragging right side', GeneralSteps.sequence([ tinyApis.sSetContent('<table style="border-collapse: collapse;border: 0;"><tbody><tr><td style="height:45px;">a</td></tr><tr><td style="height:45px;">a</td></tr></tbody></table>'), sSetStateFrom(editor, [0, 0, 0, 0]), sWaitForSelection(editor, tinyApis), sMouseover(Element.fromDom(editor.getBody()), 'td'), sDragDropBlocker(Element.fromDom(editor.getDoc().documentElement), 'div[data-column="0"]', 50, 0), sAssertSizeChange(editor, [0, 0, 0, 0], { dh: 0, dw: 50 }), sResetState ])), Logger.t('Resize table bigger with handle, then resize row height bigger by dragging middle border', GeneralSteps.sequence([ tinyApis.sSetContent(tableHtml), sSetStateFrom(editor, [0]), sWaitForSelection(editor, tinyApis), sDragDrop(Element.fromDom(editor.getBody()), '#mceResizeHandlese', 50, 50), sMouseover(Element.fromDom(editor.getBody()), 'td'), sDragDropBlocker(Element.fromDom(editor.getDoc().documentElement), 'div[data-row="0"]', 0, 50), sAssertSizeChange(editor, [0], { dh: 100, dw: 50 }), sResetState ])), Logger.t('Resize table bigger with handle, then resize row height smaller by dragging middle border', GeneralSteps.sequence([ tinyApis.sSetContent(tableHtml), sSetStateFrom(editor, [0]), sWaitForSelection(editor, tinyApis), sDragDrop(Element.fromDom(editor.getBody()), '#mceResizeHandlese', 50, 50), sMouseover(Element.fromDom(editor.getBody()), 'td'), sDragDropBlocker(Element.fromDom(editor.getDoc().documentElement), 'div[data-row="0"]', 0, -30), sAssertSizeChange(editor, [0], { dh: 20, dw: 50 }), sResetState ])), Logger.t('Resize table bigger with handle, then resize column width bigger by dragging middle border', GeneralSteps.sequence([ tinyApis.sSetContent(tableHtml), sSetStateFrom(editor, [0]), sWaitForSelection(editor, tinyApis), sDragDrop(Element.fromDom(editor.getBody()), '#mceResizeHandlese', 50, 50), sMouseover(Element.fromDom(editor.getBody()), 'td'), sDragDropBlocker(Element.fromDom(editor.getDoc().documentElement), 'div[data-column="0"]', 50, 0), sAssertSizeChange(editor, [0], { dh: 50, dw: 50 }), sResetState ])), Logger.t('Resize table bigger with handle, then resize column width smaller by dragging middle border', GeneralSteps.sequence([ tinyApis.sSetContent(tableHtml), sSetStateFrom(editor, [0]), sWaitForSelection(editor, tinyApis), sDragDrop(Element.fromDom(editor.getBody()), '#mceResizeHandlese', 50, 50), sMouseover(Element.fromDom(editor.getBody()), 'td'), sDragDropBlocker(Element.fromDom(editor.getDoc().documentElement), 'div[data-column="0"]', -30, 0), sAssertSizeChange(editor, [0], { dh: 50, dw: 50 }), sResetState ])), Logger.t('Resize table smaller with handle, then resize row height bigger by dragging middle border', GeneralSteps.sequence([ tinyApis.sSetContent(tableHtml), sSetStateFrom(editor, [0]), sWaitForSelection(editor, tinyApis), sDragDrop(Element.fromDom(editor.getBody()), '#mceResizeHandlese', -10, -10), sMouseover(Element.fromDom(editor.getBody()), 'td'), sDragDropBlocker(Element.fromDom(editor.getDoc().documentElement), 'div[data-row="0"]', 0, 50), sAssertSizeChange(editor, [0], { dh: 40, dw: -10 }), sResetState ])), Logger.t('Resize table smaller with handle, then resize row height smaller by dragging middle border', GeneralSteps.sequence([ tinyApis.sSetContent(tableHtml), sSetStateFrom(editor, [0]), sWaitForSelection(editor, tinyApis), sDragDrop(Element.fromDom(editor.getBody()), '#mceResizeHandlese', -10, -10), sMouseover(Element.fromDom(editor.getBody()), 'td'), sDragDropBlocker(Element.fromDom(editor.getDoc().documentElement), 'div[data-row="0"]', 0, -20), sAssertSizeChange(editor, [0], { dh: -30, dw: -10 }), sResetState ])), Logger.t('Resize table smaller with handle, then resize column width bigger by dragging middle border', GeneralSteps.sequence([ tinyApis.sSetContent(tableHtml), sSetStateFrom(editor, [0]), sWaitForSelection(editor, tinyApis), sDragDrop(Element.fromDom(editor.getBody()), '#mceResizeHandlese', -10, -10), sMouseover(Element.fromDom(editor.getBody()), 'td'), sDragDropBlocker(Element.fromDom(editor.getDoc().documentElement), 'div[data-column="0"]', 50, 0), sAssertSizeChange(editor, [0], { dh: -10, dw: -10 }), sResetState ])), Logger.t('Resize table smaller with handle, then resize column width smaller by dragging middle border', GeneralSteps.sequence([ tinyApis.sSetContent(tableHtml), sSetStateFrom(editor, [0]), sWaitForSelection(editor, tinyApis), sDragDrop(Element.fromDom(editor.getBody()), '#mceResizeHandlese', -10, -10), sMouseover(Element.fromDom(editor.getBody()), 'td'), sDragDropBlocker(Element.fromDom(editor.getDoc().documentElement), 'div[data-column="0"]', -20, 0), sAssertSizeChange(editor, [0], { dh: -10, dw: -10 }), sResetState ])) ], onSuccess, onFailure); }, { plugins: 'table', content_style: 'table {border: 0;padding:0;} td {border: 0;padding:0;}', height: 400, skin_url: '/project/src/skins/lightgray/dist/lightgray' }, success, failure); } );