From 081cf4d0d0bbd76dbdbb0df7f00f3544c337717f Mon Sep 17 00:00:00 2001 From: Damien Pobel Date: Wed, 23 Jul 2014 08:06:25 +0200 Subject: [PATCH 1/4] EZP-23147: As a developer, I want to be able to write plugins for the apps --- Resources/views/PlatformUI/shell.html.twig | 1 + 1 file changed, 1 insertion(+) diff --git a/Resources/views/PlatformUI/shell.html.twig b/Resources/views/PlatformUI/shell.html.twig index e0e0b639a..837c2df1c 100644 --- a/Resources/views/PlatformUI/shell.html.twig +++ b/Resources/views/PlatformUI/shell.html.twig @@ -137,6 +137,7 @@ viewContainer: '.ez-view-container', root: "{{ app.request.attributes.get( 'semanticPathinfo' ) }}", assetRoot: "{{ asset( '/' ) }}", + plugins: Y.eZ.PluginRegistry.getPlugins(Y.eZ.PlatformUIApp.NAME), capi: new Y.eZ.CAPI( "{{ app.request.uriForPath('/')|trim('/') }}", new Y.eZ.SessionAuthAgent() From bb01f923d84ffac818a8455328d19d1d3877d947 Mon Sep 17 00:00:00 2001 From: Damien Pobel Date: Wed, 23 Jul 2014 10:35:31 +0200 Subject: [PATCH 2/4] EZP-23147: Moved the Handlebars partial registration to an app plugin --- Resources/config/yui.yml | 4 ++ Resources/public/js/apps/ez-platformuiapp.js | 16 ------ .../apps/plugins/ez-registerpartialsplugin.js | 51 +++++++++++++++++++ .../js/apps/assets/ez-platformuiapp-tests.js | 10 ---- Tests/js/apps/ez-platformuiapp.html | 2 - .../assets/ez-registerpartialsplugin-tests.js | 38 ++++++++++++++ .../plugins/ez-registerpartialsplugin.html | 44 ++++++++++++++++ .../assets/pluginregister-tests.js | 0 .../plugins/ez-contenttreeplugin.html | 2 +- .../plugins/ez-objectrelationloadplugin.html | 2 +- 10 files changed, 139 insertions(+), 30 deletions(-) create mode 100644 Resources/public/js/apps/plugins/ez-registerpartialsplugin.js create mode 100644 Tests/js/apps/plugins/assets/ez-registerpartialsplugin-tests.js create mode 100644 Tests/js/apps/plugins/ez-registerpartialsplugin.html rename Tests/js/{views/services/plugins => }/assets/pluginregister-tests.js (100%) diff --git a/Resources/config/yui.yml b/Resources/config/yui.yml index 90ec963d0..1c69e2581 100644 --- a/Resources/config/yui.yml +++ b/Resources/config/yui.yml @@ -25,6 +25,7 @@ parameters: - 'ez-errorview' - 'ez-usermodel' - 'ez-pluginregistry' + - 'ez-registerpartialsplugin' path: js/apps/ez-platformuiapp.js ez-viewservice: requires: ['base', 'parallel'] @@ -220,6 +221,9 @@ parameters: ez-pluginregistry: requires: ['array-extras'] path: js/services/ez-pluginregistry.js + ez-registerpartialsplugin: + requires: ['plugin', 'handlebars', 'base', 'node', 'ez-pluginregistry'] + path: js/apps/plugins/ez-registerpartialsplugin.js ez-viewservicebaseplugin: requires: ['plugin', 'base'] path: js/views/services/plugins/ez-viewservicebaseplugin.js diff --git a/Resources/public/js/apps/ez-platformuiapp.js b/Resources/public/js/apps/ez-platformuiapp.js index 3e62df3b0..8f8eaf460 100644 --- a/Resources/public/js/apps/ez-platformuiapp.js +++ b/Resources/public/js/apps/ez-platformuiapp.js @@ -17,7 +17,6 @@ YUI.add('ez-platformuiapp', function (Y) { APP_LOADING = 'is-app-loading', MINIMIZE_DISCOVERY_BAR_CLASS = 'is-discoverybar-minimized', ERROR_VIEW_CONTAINER = '.ez-errorview-container', - PARTIALS_SEL = '.ez-platformui-app-partial', /** * Fired whenever a fatal error occurs and application is not able to continue current action @@ -144,8 +143,6 @@ YUI.add('ez-platformuiapp', function (Y) { // Listening for events fired on child views this.views.errorView.instance.addTarget(this); - // Registering handlebars partials - this._registerPartials(); this._registerUrlHelpers(); }, @@ -532,19 +529,6 @@ YUI.add('ez-platformuiapp', function (Y) { } }, - /** - * Register any handlebar partials situated in the DOM and sporting - * PARTIALS_SEL class - * - * @method _registerPartials - * @protected - */ - _registerPartials: function () { - Y.all(PARTIALS_SEL).each(function (partial) { - Y.Handlebars.registerPartial(partial.get('id'), partial.getHTML()); - }); - }, - /** * Registers the URL related handlebars helpers, ie: * diff --git a/Resources/public/js/apps/plugins/ez-registerpartialsplugin.js b/Resources/public/js/apps/plugins/ez-registerpartialsplugin.js new file mode 100644 index 000000000..cac432110 --- /dev/null +++ b/Resources/public/js/apps/plugins/ez-registerpartialsplugin.js @@ -0,0 +1,51 @@ +/* + * Copyright (C) eZ Systems AS. All rights reserved. + * For full copyright and license information view LICENSE file distributed with this source code. + */ +YUI.add('ez-registerpartialsplugin', function (Y) { + "user strict"; + /** + * Provides the register partials plugin + * + * @module ez-registerpartialsplugin + */ + Y.namespace('eZ.Plugin'); + + var PARTIALS_SEL = '.ez-platformui-app-partial'; + + /** + * Register partial plugin. It's a plugin for the PlatformUI application to + * automatically register Handlebars partials found in the DOM. + * + * @namespace eZ.Plugin + * @class RegisterPartials + * @constructor + * @extends Plugin.Base + */ + Y.eZ.Plugin.RegisterPartials = Y.Base.create('registerPartialsPlugin', Y.Plugin.Base, [], { + initializer: function () { + this._registerPartials(); + }, + + /** + * Register the handlebar partials available in the DOM. The content of + * any element with the class `ez-platformui-app-partial` is considered + * as a handlebars partial and is registered with its `id` as the + * partial name. + * + * @method _registerPartials + * @protected + */ + _registerPartials: function () { + Y.all(PARTIALS_SEL).each(function (partial) { + Y.Handlebars.registerPartial(partial.get('id'), partial.getHTML()); + }); + }, + }, { + NS: 'registerPartials', + }); + + Y.eZ.PluginRegistry.registerPlugin( + Y.eZ.Plugin.RegisterPartials, ['platformuiApp'] + ); +}); diff --git a/Tests/js/apps/assets/ez-platformuiapp-tests.js b/Tests/js/apps/assets/ez-platformuiapp-tests.js index 4b2dd8ea0..0a8202e44 100644 --- a/Tests/js/apps/assets/ez-platformuiapp-tests.js +++ b/Tests/js/apps/assets/ez-platformuiapp-tests.js @@ -419,16 +419,6 @@ YUI.add('ez-platformuiapp-tests', function (Y) { "asset should add the slash" ); }, - - "Should register partials found inside the DOM": function () { - var template = Y.Handlebars.compile('Test partial should be here: {{> ezTestPartial}}'); - - Y.Assert.isFunction(template); - Y.Assert.areEqual( - "Test partial should be here: I'm a test partial!", - template() - ); - }, }); handleMainViewTest = new Y.Test.Case({ diff --git a/Tests/js/apps/ez-platformuiapp.html b/Tests/js/apps/ez-platformuiapp.html index 79ecf7bf4..f1ded6c95 100644 --- a/Tests/js/apps/ez-platformuiapp.html +++ b/Tests/js/apps/ez-platformuiapp.html @@ -17,8 +17,6 @@ - - + + + + + + + diff --git a/Tests/js/views/services/plugins/assets/pluginregister-tests.js b/Tests/js/assets/pluginregister-tests.js similarity index 100% rename from Tests/js/views/services/plugins/assets/pluginregister-tests.js rename to Tests/js/assets/pluginregister-tests.js diff --git a/Tests/js/views/services/plugins/ez-contenttreeplugin.html b/Tests/js/views/services/plugins/ez-contenttreeplugin.html index 2c7688693..e2e7d6a40 100644 --- a/Tests/js/views/services/plugins/ez-contenttreeplugin.html +++ b/Tests/js/views/services/plugins/ez-contenttreeplugin.html @@ -6,7 +6,7 @@ - + - + + + + + + From 1204feafac713e3ed91a49f8a38399b5d84d45c2 Mon Sep 17 00:00:00 2001 From: Damien Pobel Date: Fri, 25 Jul 2014 14:52:22 +0200 Subject: [PATCH 4/4] EZP-23147: Moved the DOM state handling to a dedicated app plugin --- Resources/config/yui.yml | 4 + Resources/public/js/apps/ez-platformuiapp.js | 35 ------ .../js/apps/plugins/ez-domstateplugin.js | 72 +++++++++++ .../js/apps/assets/ez-platformuiapp-tests.js | 43 ------- .../plugins/assets/ez-domstateplugin-tests.js | 112 ++++++++++++++++++ Tests/js/apps/plugins/ez-domstateplugin.html | 44 +++++++ 6 files changed, 232 insertions(+), 78 deletions(-) create mode 100644 Resources/public/js/apps/plugins/ez-domstateplugin.js create mode 100644 Tests/js/apps/plugins/assets/ez-domstateplugin-tests.js create mode 100644 Tests/js/apps/plugins/ez-domstateplugin.html diff --git a/Resources/config/yui.yml b/Resources/config/yui.yml index 0cc88198e..dfd6cba4b 100644 --- a/Resources/config/yui.yml +++ b/Resources/config/yui.yml @@ -26,6 +26,7 @@ parameters: - 'ez-pluginregistry' - 'ez-registerpartialsplugin' - 'ez-registerurlhelpersplugin' + - 'ez-domstateplugin' path: js/apps/ez-platformuiapp.js ez-viewservice: requires: ['base', 'parallel'] @@ -221,6 +222,9 @@ parameters: ez-pluginregistry: requires: ['array-extras'] path: js/services/ez-pluginregistry.js + ez-domstateplugin: + requires: ['plugin', 'base', 'node', 'ez-pluginregistry'] + path: js/apps/plugins/ez-domstateplugin.js ez-registerpartialsplugin: requires: ['plugin', 'handlebars', 'base', 'node', 'ez-pluginregistry'] path: js/apps/plugins/ez-registerpartialsplugin.js diff --git a/Resources/public/js/apps/ez-platformuiapp.js b/Resources/public/js/apps/ez-platformuiapp.js index 48d7b3ed7..7ba394335 100644 --- a/Resources/public/js/apps/ez-platformuiapp.js +++ b/Resources/public/js/apps/ez-platformuiapp.js @@ -15,7 +15,6 @@ YUI.add('ez-platformuiapp', function (Y) { var L = Y.Lang, APP_OPEN = 'is-app-open', APP_LOADING = 'is-app-loading', - MINIMIZE_DISCOVERY_BAR_CLASS = 'is-discoverybar-minimized', ERROR_VIEW_CONTAINER = '.ez-errorview-container', /** @@ -136,44 +135,10 @@ YUI.add('ez-platformuiapp', function (Y) { this.set('loading', true); }); - this.on('*:minimizeDiscoveryBarAction', this._minimizeDiscoveryBar); - - this.on('*:navigationModeChange', this._uiSetNavigationModeClass); - // Listening for events fired on child views this.views.errorView.instance.addTarget(this); }, - /** - * navigationModeChange event handler, it sets or unsets the navigation - * mode class provided in the event facade to handle the fact that the - * navigation hub can be fixed or not. - * - * @method _uiSetNavigationModeClass - * @protected - * @param {Object} e navigation mode event facade - */ - _uiSetNavigationModeClass: function (e) { - if ( e.navigation.value ) { - this.get('container').addClass(e.navigation.modeClass); - } else { - this.get('container').removeClass(e.navigation.modeClass); - } - }, - - /** - * minimizeDiscoveryBarAction event handler, toggles the discovery bar - * mininized class on the app container to minimize/maximize the - * discovery bar - * - * @method _minimizeDiscoveryBar - * @protected - * @param {Object} e event facade of the minimizeDiscoveryBarAction - */ - _minimizeDiscoveryBar: function (e) { - this.get('container').toggleClass(MINIMIZE_DISCOVERY_BAR_CLASS); - }, - /** * Generates the URI for a route identified by its name. All * placeholders are replaced by the value found in the `params` diff --git a/Resources/public/js/apps/plugins/ez-domstateplugin.js b/Resources/public/js/apps/plugins/ez-domstateplugin.js new file mode 100644 index 000000000..836c2fa63 --- /dev/null +++ b/Resources/public/js/apps/plugins/ez-domstateplugin.js @@ -0,0 +1,72 @@ +/* + * Copyright (C) eZ Systems AS. All rights reserved. + * For full copyright and license information view LICENSE file distributed with this source code. + */ +YUI.add('ez-domstateplugin', function (Y) { + "user strict"; + /** + * Provides the DOM state plugin + * + * @module ez-domstateplugin + */ + Y.namespace('eZ.Plugin'); + + var MINIMIZE_DISCOVERY_BAR_CLASS = 'is-discoverybar-minimized'; + + /** + * DOM State plugin. Reflects the application state in the DOM by setting + * some classes depending on the events. + * + * @namespace eZ.Plugin + * @class DomState + * @constructor + * @extends Plugin.Base + */ + Y.eZ.Plugin.DomState = Y.Base.create('domStatePlugin', Y.Plugin.Base, [], { + initializer: function () { + this.onHostEvent( + '*:minimizeDiscoveryBarAction', this._uiMinimizeDiscoveryBar + ); + this.onHostEvent( + '*:navigationModeChange', this._uiNavigationModeChange + ); + }, + + /** + * `minimizeDiscoveryBarAction` event handler. It toggles the discovery + * bar mininized class on the app container to minimize/maximize it. + * + * @method _uiMinimizeDiscoveryBar + * @protected + * @param {Object} e minimizeDiscoveryBarAction event facade + */ + _uiMinimizeDiscoveryBar: function (e) { + this.get('host').get('container').toggleClass(MINIMIZE_DISCOVERY_BAR_CLASS); + }, + + /** + * `navigationModeChange` event handler. it sets or unsets the + * navigation mode class provided in the event facade to handle the fact + * that the navigation hub can be fixed or not. + * + * @method _uiNavigationModeChange + * @protected + * @param {Object} e navigationModeChange event facade + */ + _uiNavigationModeChange: function (e) { + var container = this.get('host').get('container'); + + if ( e.navigation.value ) { + container.addClass(e.navigation.modeClass); + } else { + container.removeClass(e.navigation.modeClass); + } + }, + }, { + NS: 'domState', + }); + + Y.eZ.PluginRegistry.registerPlugin( + Y.eZ.Plugin.DomState, ['platformuiApp'] + ); +}); diff --git a/Tests/js/apps/assets/ez-platformuiapp-tests.js b/Tests/js/apps/assets/ez-platformuiapp-tests.js index 823ec7534..69bb9542c 100644 --- a/Tests/js/apps/assets/ez-platformuiapp-tests.js +++ b/Tests/js/apps/assets/ez-platformuiapp-tests.js @@ -230,49 +230,6 @@ YUI.add('ez-platformuiapp-tests', function (Y) { "Test action should have been retried" ); }, - - "Should toggle the discovery bar minimized class on minimizeDiscoveryBarAction event": function () { - var container = this.app.get('container'); - - this.app.fire('whatever:minimizeDiscoveryBarAction'); - Y.Assert.isTrue( - container.hasClass('is-discoverybar-minimized'), - "The app container should have the discovery bar minimized class" - ); - this.app.fire('whatever:minimizeDiscoveryBarAction'); - Y.Assert.isFalse( - container.hasClass('is-discoverybar-minimized'), - "The app container should have the discovery bar minimized class" - ); - }, - - "Should set a class on the app container when receiving a 'navigationModeChange' event": function () { - var container = this.app.get('container'), - testClass = 'test-class'; - - this.app.fire('whatever:navigationModeChange', { - navigation: { - modeClass: testClass, - value: true - } - }); - - Y.Assert.isTrue( - container.hasClass(testClass), - "The container should have the class '" + testClass + "'" - ); - - this.app.fire('whatever:navigationModeChange', { - navigation: { - modeClass: testClass, - value: false - } - }); - Y.Assert.isFalse( - container.hasClass(testClass), - "The container should not have the class '" + testClass + "'" - ); - }, }); titleTest = new Y.Test.Case({ diff --git a/Tests/js/apps/plugins/assets/ez-domstateplugin-tests.js b/Tests/js/apps/plugins/assets/ez-domstateplugin-tests.js new file mode 100644 index 000000000..c5ef3277e --- /dev/null +++ b/Tests/js/apps/plugins/assets/ez-domstateplugin-tests.js @@ -0,0 +1,112 @@ +/* + * Copyright (C) eZ Systems AS. All rights reserved. + * For full copyright and license information view LICENSE file distributed with this source code. + */ +YUI.add('ez-domstateplugin-tests', function (Y) { + var registerTest, + minimizeTest, navigationModeTest, + Assert = Y.Assert; + + minimizeTest = new Y.Test.Case({ + name: "eZ DOM State Plugin test: minimizeDiscoveryBarAction event", + + setUp: function () { + this.minimizedClass = 'is-discoverybar-minimized'; + this.app = new Y.Base(); + this.app.set('container', Y.one('.app-container')); + this.plugin = new Y.eZ.Plugin.DomState({ + host: this.app + }); + }, + + tearDown: function () { + Y.one('.app-container').removeClass(this.minimizedClass); + this.app.destroy(); + this.plugin.destroy(); + delete this.app; + delete this.plugin; + }, + + "Should add the minimized class": function () { + var container = this.app.get('container'); + + this.app.fire('whatever:minimizeDiscoveryBarAction'); + Assert.isTrue( + container.hasClass(this.minimizedClass), + "The app container should have the discovery bar minimized class" + ); + }, + + "Should remove the minimized class": function () { + var container = this.app.get('container'); + + this["Should add the minimized class"](); + this.app.fire('whatever:minimizeDiscoveryBarAction'); + Assert.isFalse( + container.hasClass(this.minimizedClass), + "The app container should have the discovery bar minimized class" + ); + }, + }); + + navigationModeTest = new Y.Test.Case({ + name: "eZ DOM State Plugin test: navigationModeChange event", + + setUp: function () { + this.modeClass = 'mode-class'; + this.app = new Y.Base(); + this.app.set('container', Y.one('.app-container')); + this.plugin = new Y.eZ.Plugin.DomState({ + host: this.app + }); + }, + + tearDown: function () { + Y.one('.app-container').removeClass(this.modeClass); + this.app.destroy(); + this.plugin.destroy(); + delete this.app; + delete this.plugin; + }, + + "Should add the mode class": function () { + var container = this.app.get('container'); + + this.app.fire( 'whatever:navigationModeChange', { + navigation: { + value: true, + modeClass: this.modeClass + } + }); + Assert.isTrue( + container.hasClass(this.modeClass), + "The app container should have the mode class" + ); + }, + + "Should remove the mode class": function () { + var container = this.app.get('container'); + + this["Should add the mode class"](); + this.app.fire( 'whatever:navigationModeChange', { + navigation: { + value: false, + modeClass: this.modeClass + } + }); + Assert.isFalse( + container.hasClass(this.modeClass), + "The app container should not have the mode class" + ); + }, + }); + + registerTest = new Y.Test.Case(Y.eZ.Test.PluginRegisterTest); + registerTest.Plugin = Y.eZ.Plugin.DomState; + registerTest.components = ['platformuiApp']; + + Y.Test.Runner.setName("eZ DOM State Plugin tests"); + Y.Test.Runner.add(minimizeTest); + Y.Test.Runner.add(navigationModeTest); + Y.Test.Runner.add(registerTest); +}, '', {requires: ['test', 'base', 'ez-domstateplugin', 'ez-pluginregister-tests']}); diff --git a/Tests/js/apps/plugins/ez-domstateplugin.html b/Tests/js/apps/plugins/ez-domstateplugin.html new file mode 100644 index 000000000..21ee99f7c --- /dev/null +++ b/Tests/js/apps/plugins/ez-domstateplugin.html @@ -0,0 +1,44 @@ + + + +eZ DOM State Plugin tests + + + +
+ + + + + + +