From 2136f060217457fcd016d0b28594d6d9c14fe8d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Noco=C5=84?= Date: Mon, 20 Jan 2020 12:29:04 +0100 Subject: [PATCH 1/3] Added injection of drag-mock script to PageBuilder and FormBuilder --- Resources/encore/ez.config.manager.js | 19 +++++++++++++++ Resources/public/js/scripts/drag-mock.js | 30 ++++++++++++++++++++++++ 2 files changed, 49 insertions(+) create mode 100644 Resources/encore/ez.config.manager.js create mode 100644 Resources/public/js/scripts/drag-mock.js diff --git a/Resources/encore/ez.config.manager.js b/Resources/encore/ez.config.manager.js new file mode 100644 index 00000000..a10ea4c2 --- /dev/null +++ b/Resources/encore/ez.config.manager.js @@ -0,0 +1,19 @@ +const path = require('path'); + +module.exports = (eZConfig, eZConfigManager) => { + const scriptPath = '../public/js/scripts/drag-mock.js'; + eZConfigManager.add({ + eZConfig, + entryName: 'ezplatform-page-builder-edit-js', + newItems: [ + path.resolve(__dirname, scriptPath), + ], + }); + eZConfigManager.add({ + eZConfig, + entryName: 'ezplatform-form-builder-common-js', + newItems: [ + path.resolve(__dirname, scriptPath), + ], + }); +}; diff --git a/Resources/public/js/scripts/drag-mock.js b/Resources/public/js/scripts/drag-mock.js new file mode 100644 index 00000000..f427c689 --- /dev/null +++ b/Resources/public/js/scripts/drag-mock.js @@ -0,0 +1,30 @@ +/* drag-mock library +https://github.com/andywer/drag-mock +version 1.4.0 + +The MIT License (MIT) + +Copyright (c) 2015 Andy Wermke + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + +*/ + + +!function t(e,n,r){function a(i,u){if(!n[i]){if(!e[i]){var s="function"==typeof require&&require;if(!u&&s)return s(i,!0);if(o)return o(i,!0);var c=new Error("Cannot find module '"+i+"'");throw c.code="MODULE_NOT_FOUND",c}var f=n[i]={exports:{}};e[i][0].call(f.exports,function(t){var n=e[i][1][t];return a(n?n:t)},f,f.exports,t,e,n,r)}return n[i].exports}for(var o="function"==typeof require&&require,i=0;i=0&&t.splice(n,1)}var r=function(){this.dataByFormat={},this.dropEffect="none",this.effectAllowed="all",this.files=[],this.types=[]};r.prototype.clearData=function(t){t?(delete this.dataByFormat[t],n(this.types,t)):(this.dataByFormat={},this.types=[])},r.prototype.getData=function(t){return this.dataByFormat[t]},r.prototype.setData=function(t,e){return this.dataByFormat[t]=e,this.types.indexOf(t)<0&&this.types.push(t),!0},r.prototype.setDragImage=function(){},e.exports=r},{}],3:[function(t,e){function n(){}function r(t,e,r){if("function"==typeof e&&(r=e,e=null),!t||"object"!=typeof t)throw new Error("Expected first parameter to be a targetElement. Instead got: "+t);return{targetElement:t,eventProperties:e||{},configCallback:r||n}}function a(t,e,n){e&&(e.length<2?n&&e(t):e(t,t.type))}function o(t,e,n,r,o,u){e.forEach(function(e){var s=i.createEvent(e,o,r),c=e===n;a(s,u,c),t.dispatchEvent(s)})}var i=t("./eventFactory"),u=t("./DataTransfer"),s=function(){this.lastDragSource=null,this.lastDataTransfer=null,this.pendingActionsQueue=[]};s.prototype._queue=function(t){this.pendingActionsQueue.push(t),1===this.pendingActionsQueue.length&&this._queueExecuteNext()},s.prototype._queueExecuteNext=function(){if(0!==this.pendingActionsQueue.length){var t=this,e=this.pendingActionsQueue[0],n=function(){t.pendingActionsQueue.shift(),t._queueExecuteNext()};0===e.length?(e.call(this),n()):e.call(this,n)}},s.prototype.dragStart=function(t,e,n){var a=r(t,e,n),i=["mousedown","dragstart","drag"],s=new u;return this._queue(function(){o(a.targetElement,i,"drag",s,a.eventProperties,a.configCallback),this.lastDragSource=t,this.lastDataTransfer=s}),this},s.prototype.dragOver=function(t,e,n){var a=r(t,e,n),i=["mousemove","mouseover","dragover"];return this._queue(function(){o(a.targetElement,i,"drag",this.lastDataTransfer,a.eventProperties,a.configCallback)}),this},s.prototype.dragLeave=function(t,e,n){var a=r(t,e,n),i=["mousemove","mouseover","dragleave"];return this._queue(function(){o(a.targetElement,i,"dragleave",this.lastDataTransfer,a.eventProperties,a.configCallback)}),this},s.prototype.drop=function(t,e,n){var a=r(t,e,n),i=["mousemove","mouseup","drop"],u=["dragend"];return this._queue(function(){o(a.targetElement,i,"drop",this.lastDataTransfer,a.eventProperties,a.configCallback),this.lastDragSource&&o(this.lastDragSource,u,"drop",this.lastDataTransfer,a.eventProperties,a.configCallback)}),this},s.prototype.then=function(t){return this._queue(function(){t.call(this)}),this},s.prototype.delay=function(t){return this._queue(function(e){window.setTimeout(e,t)}),this},e.exports=s},{"./DataTransfer":2,"./eventFactory":4}],4:[function(t,e){function n(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n]);return t}function r(t,e,r){"DragEvent"===e&&(e="CustomEvent");var a=window[e],o={view:window,bubbles:!0,cancelable:!0};n(o,r);var i=new a(t,o);return n(i,r),i}function a(t,e,r){var a;switch(e){case"MouseEvent":a=document.createEvent("MouseEvent"),a.initEvent(t,!0,!0);break;default:a=document.createEvent("CustomEvent"),a.initCustomEvent(t,!0,!0,0)}return r&&n(a,r),a}function o(t,e,n){try{return r(t,e,n)}catch(o){return a(t,e,n)}}var i=t("./DataTransfer"),u=["drag","dragstart","dragover","dragend","drop","dragleave"],s={createEvent:function(t,e,n){var r="CustomEvent";t.match(/^mouse/)&&(r="MouseEvent");var a=o(t,r,e);return u.indexOf(t)>-1&&(a.dataTransfer=n||new i),a}};e.exports=s},{"./DataTransfer":2}],5:[function(t,e){function n(t,e,n){return t[e].apply(t,n)}var r=t("./DragDropAction"),a={dragStart:function(){return n(new r,"dragStart",arguments)},dragOver:function(){return n(new r,"dragOver",arguments)},dragLeave:function(){return n(new r,"dragLeave",arguments)},drop:function(){return n(new r,"drop",arguments)},delay:function(){return n(new r,"delay",arguments)},DataTransfer:t("./DataTransfer"),DragDropAction:t("./DragDropAction"),eventFactory:t("./eventFactory")};e.exports=a},{"./DataTransfer":2,"./DragDropAction":3,"./eventFactory":4}]},{},[1]); \ No newline at end of file From 87ed13533349db5d844ff5761ec52bce8048990d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Noco=C5=84?= Date: Mon, 20 Jan 2020 12:43:08 +0100 Subject: [PATCH 2/3] Added doc to README --- doc/features.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/doc/features.md b/doc/features.md index 7053838f..dc49eba1 100644 --- a/doc/features.md +++ b/doc/features.md @@ -8,7 +8,7 @@ See [BehatBundle examples](https://github.com/ezsystems/BehatBundle/tree/7.0/fea - create Users with complex permissions - create given YAML configuration -## Logging into the repository +### Logging into the repository Use the [TestContext](../Context/Api/TestContext.php) to log in to the Repository and perform API calls as given user. You can tag your scenario with `@admin` to be automatically logged in as admin user before the scenario starts. @@ -18,6 +18,12 @@ Look at [AdminUI feature files](https://github.com/ezsystems/ezplatform-admin-ui - `EzSystems\EzPlatformAdminUi\Behat\Helper\Hooks` - `EzSystems\EzPlatformAdminUi\Behat\Helper\UtilityContext` +#### Improved drag and drop + +Selenium does not support drag and drop interactions between iframes. To achieve that you can use the `UtilityContext::moveWithHover` method (which also supports hover simulation between the actions). The method accepts JS expression such as `document.evaluate` or `document.querySelector` to find elements between which the interaction will happen. + +Before you start using that you need to inject the [dragMock script](../Resources/public/js/scripts/drag-mock.js) into your templates: one way of doing this is described in [Webpack Encore configuration doc](https://doc.ezplatform.com/en/latest/guide/bundles/#configuration-from-a-bundle). See [ez.config.manager.js](../Resources/encore/ez.config.manager.js) for an example. + ## BehatBundle extension With `EzBehatExtension` enabled you can inject services into your Context classes using the `@injectService` annotation. From 3fa21df293f489b40f2cd4212236386d5e8331fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Noco=C5=84?= Date: Mon, 20 Jan 2020 13:37:40 +0100 Subject: [PATCH 3/3] Make sure the entries are present before modyfing them --- Resources/encore/ez.config.manager.js | 10 +++++++--- doc/features.md | 4 ++-- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/Resources/encore/ez.config.manager.js b/Resources/encore/ez.config.manager.js index a10ea4c2..dddbccdf 100644 --- a/Resources/encore/ez.config.manager.js +++ b/Resources/encore/ez.config.manager.js @@ -1,19 +1,23 @@ const path = require('path'); module.exports = (eZConfig, eZConfigManager) => { - const scriptPath = '../public/js/scripts/drag-mock.js'; + if (!eZConfig.entry['ezplatform-page-builder-edit-js'] || !eZConfig.entry['ezplatform-form-builder-common-js']) { + return; + } + + const dragMockScriptPath = '../public/js/scripts/drag-mock.js'; eZConfigManager.add({ eZConfig, entryName: 'ezplatform-page-builder-edit-js', newItems: [ - path.resolve(__dirname, scriptPath), + path.resolve(__dirname, dragMockScriptPath), ], }); eZConfigManager.add({ eZConfig, entryName: 'ezplatform-form-builder-common-js', newItems: [ - path.resolve(__dirname, scriptPath), + path.resolve(__dirname, dragMockScriptPath), ], }); }; diff --git a/doc/features.md b/doc/features.md index dc49eba1..287ab507 100644 --- a/doc/features.md +++ b/doc/features.md @@ -20,9 +20,9 @@ Look at [AdminUI feature files](https://github.com/ezsystems/ezplatform-admin-ui #### Improved drag and drop -Selenium does not support drag and drop interactions between iframes. To achieve that you can use the `UtilityContext::moveWithHover` method (which also supports hover simulation between the actions). The method accepts JS expression such as `document.evaluate` or `document.querySelector` to find elements between which the interaction will happen. +Selenium does not support drag and drop interactions between iframes. To achieve that you can use the `UtilityContext::moveWithHover` method (which also supports hover simulation between the actions). See the [drag-mock documentation](https://github.com/andywer/drag-mock#browser) (the library we use behind the scenes) for more information. -Before you start using that you need to inject the [dragMock script](../Resources/public/js/scripts/drag-mock.js) into your templates: one way of doing this is described in [Webpack Encore configuration doc](https://doc.ezplatform.com/en/latest/guide/bundles/#configuration-from-a-bundle). See [ez.config.manager.js](../Resources/encore/ez.config.manager.js) for an example. +Before you start using that you need to inject the [drag-mock script](../Resources/public/js/scripts/drag-mock.js) into your templates: one way of doing this is described in [Webpack Encore configuration doc](https://doc.ezplatform.com/en/latest/guide/bundles/#configuration-from-a-bundle). For an example see [ez.config.manager.js](../Resources/encore/ez.config.manager.js). ## BehatBundle extension