From e24eea8a28f33c905b11d2faac6f8f31762366b6 Mon Sep 17 00:00:00 2001 From: Dariusz Szut Date: Fri, 17 Jun 2016 15:24:16 +0200 Subject: [PATCH 1/5] EZS-805: Preselected content type --- .../css/theme/views/content-creation.css | 5 ++ .../js/views/cof-contentcreationview.js | 82 +++++++++++++++++-- ...-createcontent-universaldiscoveryplugin.js | 16 ++++ 3 files changed, 98 insertions(+), 5 deletions(-) diff --git a/bundle/Resources/public/css/theme/views/content-creation.css b/bundle/Resources/public/css/theme/views/content-creation.css index b24700a..7cad33e 100644 --- a/bundle/Resources/public/css/theme/views/content-creation.css +++ b/bundle/Resources/public/css/theme/views/content-creation.css @@ -5,6 +5,7 @@ .ez-view-contentcreationview { text-align: left; + position: relative; } .ez-view-contentcreationview .cof-content-creation__header { @@ -82,6 +83,7 @@ background: #fdfdfd; } +.ez-view-contentcreationview.is-loading:before, .ez-view-contentcreationview .is-loading:before { content: ""; height: 100%; @@ -91,8 +93,10 @@ top: 0; left: 0; border-radius: 5px; + z-index: 5 } +.ez-view-contentcreationview.is-loading:after, .ez-view-contentcreationview .is-loading:after { content: '\f110'; color: #3FB499; @@ -101,6 +105,7 @@ left: 50%; font-family: 'studiofont'; animation: spin .7s infinite linear; + z-index: 5 } .ez-view-contentcreationview .cof-btn--edit-location { diff --git a/bundle/Resources/public/js/views/cof-contentcreationview.js b/bundle/Resources/public/js/views/cof-contentcreationview.js index 799375f..7c802a7 100644 --- a/bundle/Resources/public/js/views/cof-contentcreationview.js +++ b/bundle/Resources/public/js/views/cof-contentcreationview.js @@ -73,6 +73,7 @@ YUI.add('cof-contentcreationview', function (Y) { this.on('displayedChange', this._getContentTypes, this); this.on('contentTypeGroupsChange', this._renderContentTypeSelector, this); + this.on('contentTypeGroupsChange', this._preselectContentType, this); this.on('*:itemSelected', this._enableNextButton, this); this.on('*:itemSelected', this._toggleTooltip, this); this.on('selectedLocationChange', this._updateSelectedLocation, this); @@ -80,6 +81,7 @@ YUI.add('cof-contentcreationview', function (Y) { this.on('*:closeView', this._hideCreateContentView, this, false); this.on('suggestedLocationsChange', this._setDefaultLocation, this); this.on('suggestedLocationsChange', this._renderSuggestedLocations, this); + this.on('contentTypeIdentifierChange', this._goToSecondPage, this); this.get('contentTypeSelectorView').on('selectedContentTypeChange', this._fetchSuggestedLocations, this); }, @@ -131,7 +133,10 @@ YUI.add('cof-contentcreationview', function (Y) { * @method _enableFinishButton */ _enableFinishButton: function () { - this.get('container').one(SELECTOR_FINISH_BUTTON).removeClass(CLASS_BUTTON_DISABLED); + var container = this.get('container'); + + container.removeClass(CLASS_LOADING); + container.one(SELECTOR_FINISH_BUTTON).removeClass(CLASS_BUTTON_DISABLED); }, /** @@ -144,9 +149,10 @@ YUI.add('cof-contentcreationview', function (Y) { _getContentTypes: function (event) { var eventNewVal = event.newVal, container = this.get('container'), + contentTypeContainer = container.one(SELECTOR_CONTENT_TYPE), + nextButton = container.one(SELECTOR_NEXT_BUTTON), restoreFormState = this.get('restoreFormState'); - if (!eventNewVal && !restoreFormState) { this._resetFormState(); @@ -155,14 +161,16 @@ YUI.add('cof-contentcreationview', function (Y) { this.set('restoreFormState', false); return; - } else if (restoreFormState) { + } else if (restoreFormState || this.get('fetchContentTypesPrevented')) { return; } this.get('contentTypeSelectorView').hideTooltip(); - container.one(SELECTOR_CONTENT_TYPE).addClass(CLASS_LOADING); - container.one(SELECTOR_NEXT_BUTTON).addClass(CLASS_BUTTON_DISABLED); + if (contentTypeContainer && nextButton) { + contentTypeContainer.addClass(CLASS_LOADING); + nextButton.addClass(CLASS_BUTTON_DISABLED); + } /** * Fetches the content types data. @@ -246,6 +254,8 @@ YUI.add('cof-contentcreationview', function (Y) { * */ this.fire('openUniversalDiscoveryWidget'); + + this.set('fetchContentTypesPrevented', true); }, /** @@ -279,6 +289,8 @@ YUI.add('cof-contentcreationview', function (Y) { this.fire('setParentLocation', {selectedLocation: eventNewVal.location}); this._enableFinishButton(); + + this.set('fetchContentTypesPrevented', false); }, /** @@ -484,6 +496,55 @@ YUI.add('cof-contentcreationview', function (Y) { this._toggleSuggestedLocations(); }, + + /** + * Changes page when the content type is preselected. + * + * @method _goToSecondPage + * @protected + * @param event {Object} event facade + */ + _goToSecondPage: function (event) { + if (!event.newVal) { + return; + } + + this.get('container').addClass(CLASS_LOADING); + + this.set('activePage', 0); + this._changeFormPage(); + }, + + /** + * Sets the preselected content type. + * + * @method _preselectContentType + * @protected + * @param event {Object} event facade + */ + _preselectContentType: function (event) { + var preselectedContentType = this.get('contentTypeIdentifier'), + contentTypeGroups = event.newVal, + contentTypeSelector = this.get('contentTypeSelectorView'); + + contentTypeGroups.forEach(Y.bind(function (contentTypeGroup) { + contentTypeGroup.get('contentTypes').forEach(Y.bind(function (contentType) { + if (preselectedContentType === contentType.get('identifier')) { + contentTypeSelector.set('selectedContentType', contentType); + + this._enableNextButton({text: contentType.get('names')[contentType.get('mainLanguageCode')]}); + + /** + * Fired to prepare content model for content type. + * Listened in the eZS.Plugin.SelectCreateContent + * + * @param contentType {Object} the content type model + */ + contentTypeSelector.fire('prepareContentModel', {contentType: contentType}); + } + }, this)); + }, this)); + }, }, { ATTRS: { /** @@ -605,6 +666,17 @@ YUI.add('cof-contentcreationview', function (Y) { redirectionPrevented: { value: false }, + + /** + * Should prevent from getting content types? + * + * @attribute fetchContentTypesPrevented + * @type Boolean + * @default false + */ + fetchContentTypesPrevented: { + value: false + }, } }); }); diff --git a/bundle/Resources/public/js/views/plugins/cof-createcontent-universaldiscoveryplugin.js b/bundle/Resources/public/js/views/plugins/cof-createcontent-universaldiscoveryplugin.js index cba70b0..2f9a03b 100644 --- a/bundle/Resources/public/js/views/plugins/cof-createcontent-universaldiscoveryplugin.js +++ b/bundle/Resources/public/js/views/plugins/cof-createcontent-universaldiscoveryplugin.js @@ -33,6 +33,7 @@ YUI.add('cof-createcontent-universaldiscoveryplugin', function (Y) { host.on('*:restoreDiscoveryWidget', this._restoreDiscoveryWidgetState, this); host.on('*:contentLoaded', this._closeDiscoveryWidget, this); host.on('activeChange', this._toggleTabCreateVisibility, this); + host.on('contentTypeIdentifierChange', this._setContentTypeIdentifier, this); }, /** @@ -96,6 +97,21 @@ YUI.add('cof-createcontent-universaldiscoveryplugin', function (Y) { selection: host.get('selection'), }); }, + + /** + * Sets content type identifier. + * + * @protected + * @method _setContentTypeIdentifier + * @param event {Object} event facade + */ + _setContentTypeIdentifier: function (event) { + var eventNewVal = event.newVal; + + if (eventNewVal && eventNewVal !== event.prevVal) { + this.get('tabCreateView').get('contentCreationView').set('contentTypeIdentifier', eventNewVal); + } + }, }, { NS: 'createContentUniversalDiscoveryWidgetPlugin', ATTRS: { From 2746a426b3f14ed7ba422d6b92046b3a149cf83e Mon Sep 17 00:00:00 2001 From: Dariusz Szut Date: Tue, 21 Jun 2016 15:29:06 +0200 Subject: [PATCH 2/5] updated Readme.md --- README.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/README.md b/README.md index 7482e52..29f034b 100644 --- a/README.md +++ b/README.md @@ -60,3 +60,21 @@ parameters: - 2 # /Home - 43 # /Media ``` + +## Preselected content type +To set the content type you have to provide 'contentTypeIdentifier' in the config of the 'contentDiscover' event. +Example: +```javascript +/** +* ... +* @param config.visibleMethod {String} which tab should be open. Default: 'browse', possible values: 'browse', 'search', 'create' +* @param config.contentTypeIdentifier {String} content type identifier. Default: none, example values: 'image', 'blog', 'article', 'blog_post' +*/ +app.fire('contentDiscover', { + config: { + // ... + visibleMethod: 'create', + contentTypeIdentifier: 'image' + } +}); +``` From 988108ee4dd963f27a1cb1b4fc624dcd1be13582 Mon Sep 17 00:00:00 2001 From: Dariusz Szut Date: Tue, 21 Jun 2016 15:59:34 +0200 Subject: [PATCH 3/5] changes after review --- .../plugins/cof-createcontent-universaldiscoveryplugin.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/bundle/Resources/public/js/views/plugins/cof-createcontent-universaldiscoveryplugin.js b/bundle/Resources/public/js/views/plugins/cof-createcontent-universaldiscoveryplugin.js index 2f9a03b..961cbd0 100644 --- a/bundle/Resources/public/js/views/plugins/cof-createcontent-universaldiscoveryplugin.js +++ b/bundle/Resources/public/js/views/plugins/cof-createcontent-universaldiscoveryplugin.js @@ -106,10 +106,10 @@ YUI.add('cof-createcontent-universaldiscoveryplugin', function (Y) { * @param event {Object} event facade */ _setContentTypeIdentifier: function (event) { - var eventNewVal = event.newVal; + var contentTypeIdentifier = event.newVal; - if (eventNewVal && eventNewVal !== event.prevVal) { - this.get('tabCreateView').get('contentCreationView').set('contentTypeIdentifier', eventNewVal); + if (contentTypeIdentifier && contentTypeIdentifier !== event.prevVal) { + this.get('tabCreateView').get('contentCreationView').set('contentTypeIdentifier', contentTypeIdentifier); } }, }, { From 01e1ce4f9bde52badd9954ddaff693c07027c666 Mon Sep 17 00:00:00 2001 From: Dariusz Szut Date: Wed, 22 Jun 2016 08:48:27 +0200 Subject: [PATCH 4/5] added doc about default location --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 29f034b..3fb850e 100644 --- a/README.md +++ b/README.md @@ -61,6 +61,9 @@ parameters: - 43 # /Media ``` +## Default location for content type +If suggested locations are given for content type (or default) the first location in the list will be preselected as location. + ## Preselected content type To set the content type you have to provide 'contentTypeIdentifier' in the config of the 'contentDiscover' event. Example: @@ -69,6 +72,7 @@ Example: * ... * @param config.visibleMethod {String} which tab should be open. Default: 'browse', possible values: 'browse', 'search', 'create' * @param config.contentTypeIdentifier {String} content type identifier. Default: none, example values: 'image', 'blog', 'article', 'blog_post' +* config.contentTypeIdentifier is limited to the Create tab, config that works across all tabs will be added in the future */ app.fire('contentDiscover', { config: { From e9f893c97651bb5d5833b9560a59fb204c7fa389 Mon Sep 17 00:00:00 2001 From: Dariusz Szut Date: Wed, 22 Jun 2016 10:45:50 +0200 Subject: [PATCH 5/5] changes after review --- README.md | 8 +++--- .../js/views/cof-contentcreationview.js | 27 ++++++++++++------- .../js/views/cof-contenttypeselectorview.js | 6 +++-- ...-createcontent-universaldiscoveryplugin.js | 14 ++++++++++ .../plugins/cof-selectcontenttypeplugin.js | 7 +++++ 5 files changed, 47 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 3fb850e..38c57e1 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ Platform UI Content on the Fly feature 4. Clear cache and setup assets with `$ composer run-script post-update-cmd` - *(if you use prod env make sure that is set with `$ export SYMFONY_ENV=prod` first)*. + *(if you use prod env make sure that it is set with `$ export SYMFONY_ENV=prod` first)*. ## Configuration @@ -62,17 +62,17 @@ parameters: ``` ## Default location for content type -If suggested locations are given for content type (or default) the first location in the list will be preselected as location. +If suggested locations are provided for a Content Type (or default) the first location in the list will be preselected. ## Preselected content type -To set the content type you have to provide 'contentTypeIdentifier' in the config of the 'contentDiscover' event. +To set the Content Type you have to provide the 'contentTypeIdentifier' in the config of the 'contentDiscover' event. Example: ```javascript /** * ... * @param config.visibleMethod {String} which tab should be open. Default: 'browse', possible values: 'browse', 'search', 'create' * @param config.contentTypeIdentifier {String} content type identifier. Default: none, example values: 'image', 'blog', 'article', 'blog_post' -* config.contentTypeIdentifier is limited to the Create tab, config that works across all tabs will be added in the future +* this parameter is limited to the Create tab, config that works across all tabs will be added in the future */ app.fire('contentDiscover', { config: { diff --git a/bundle/Resources/public/js/views/cof-contentcreationview.js b/bundle/Resources/public/js/views/cof-contentcreationview.js index 7c802a7..7567643 100644 --- a/bundle/Resources/public/js/views/cof-contentcreationview.js +++ b/bundle/Resources/public/js/views/cof-contentcreationview.js @@ -147,17 +147,17 @@ YUI.add('cof-contentcreationview', function (Y) { * @param event {Object} event facade */ _getContentTypes: function (event) { - var eventNewVal = event.newVal, + var displayed = event.newVal, container = this.get('container'), contentTypeContainer = container.one(SELECTOR_CONTENT_TYPE), nextButton = container.one(SELECTOR_NEXT_BUTTON), restoreFormState = this.get('restoreFormState'); - if (!eventNewVal && !restoreFormState) { + if (!displayed && !restoreFormState) { this._resetFormState(); return; - } else if (eventNewVal && restoreFormState) { + } else if (displayed && restoreFormState) { this.set('restoreFormState', false); return; @@ -175,6 +175,8 @@ YUI.add('cof-contentcreationview', function (Y) { /** * Fetches the content types data. * Listened in the cof.Plugin.createContentSelectContentType + * + * @event fetchContentTypes */ this.fire('fetchContentTypes'); }, @@ -246,12 +248,14 @@ YUI.add('cof-contentcreationview', function (Y) { * Fired to save the current state of Discovery Widget. * Listened in the cof.Plugin.CreateContentUniversalDiscovery * + * @event saveDiscoveryState */ this.fire('saveDiscoveryState'); /** * Fired to open new Discovery Widget. - * Listened in the cof.Plugin.createContentSelectContentType + * Listened in the cof.Plugin.selectContentType * + * @event openUniversalDiscoveryWidget */ this.fire('openUniversalDiscoveryWidget'); @@ -266,9 +270,9 @@ YUI.add('cof-contentcreationview', function (Y) { * @param event {Object} event facade */ _updateSelectedLocation: function (event) { - var eventNewVal = event.newVal, - locationPath = eventNewVal.location.get('path'), - contentInfo = eventNewVal.contentInfo, + var selectedLocation = event.newVal, + locationPath = selectedLocation.location.get('path'), + contentInfo = selectedLocation.contentInfo, selectedName = contentInfo.get('name'), pathSeparator = '/', selectedPath = pathSeparator; @@ -285,8 +289,10 @@ YUI.add('cof-contentcreationview', function (Y) { * Fired to set selected location where place the new content. * Listened in the eZS.Plugin.UniversalDiscoveryWidgetService * + * @event setParentLocation + * @param selectedLocation {Object} the selected location */ - this.fire('setParentLocation', {selectedLocation: eventNewVal.location}); + this.fire('setParentLocation', {selectedLocation: selectedLocation.location}); this._enableFinishButton(); @@ -392,6 +398,8 @@ YUI.add('cof-contentcreationview', function (Y) { * Fired to fetch a list of suggested locations. * Listened in the cof.Plugin.CreateContentUniversalDiscovery * + * @event fetchSuggestedLocations + * @param event {eZ.ContentType} the seleceted content type */ this.fire('fetchSuggestedLocations', event); @@ -538,7 +546,8 @@ YUI.add('cof-contentcreationview', function (Y) { * Fired to prepare content model for content type. * Listened in the eZS.Plugin.SelectCreateContent * - * @param contentType {Object} the content type model + * @event prepareContentModel + * @param contentType {eZ.ContentType} the content type model */ contentTypeSelector.fire('prepareContentModel', {contentType: contentType}); } diff --git a/bundle/Resources/public/js/views/cof-contenttypeselectorview.js b/bundle/Resources/public/js/views/cof-contenttypeselectorview.js index fff4f41..ef5d1c8 100644 --- a/bundle/Resources/public/js/views/cof-contenttypeselectorview.js +++ b/bundle/Resources/public/js/views/cof-contenttypeselectorview.js @@ -74,8 +74,9 @@ YUI.add('cof-contenttypeselectorview', function (Y) { /** * Informs an item is selected. - * Listened in the eZS.CreateContentPopupView + * Listened in the cof.ContentCreationView * + * @event itemSelected * @param text {String} text to show on remove button */ this.fire('itemSelected', {text: event.text}); @@ -196,7 +197,8 @@ YUI.add('cof-contenttypeselectorview', function (Y) { * Fired to prepare content model for content type. * Listened in the eZS.Plugin.SelectCreateContent * - * @param contentType {Object} the content type model + * @event prepareContentModel + * @param contentType {eZ.ContentType} the content type model */ this.fire('prepareContentModel', {contentType: type}); }, diff --git a/bundle/Resources/public/js/views/plugins/cof-createcontent-universaldiscoveryplugin.js b/bundle/Resources/public/js/views/plugins/cof-createcontent-universaldiscoveryplugin.js index 961cbd0..36225a7 100644 --- a/bundle/Resources/public/js/views/plugins/cof-createcontent-universaldiscoveryplugin.js +++ b/bundle/Resources/public/js/views/plugins/cof-createcontent-universaldiscoveryplugin.js @@ -91,8 +91,22 @@ YUI.add('cof-createcontent-universaldiscoveryplugin', function (Y) { _closeDiscoveryWidget: function (event) { var host = this.get('host'); + /** + * Fired to confirm selection in the universal discovery widget. + * Listened in the eZ.UniversalDiscoveryView + * + * @event confirmSelectedContent + * @param selection {Object} the selected content + */ host.fire('confirmSelectedContent', {selection: event}); + /** + * Fired to inform thaht content is discovered. + * Listened in the eZ.Plugin.UniversalDiscovery + * + * @event contentDiscovered + * @param selection {Object} the selected content + */ host.fire('contentDiscovered', { selection: host.get('selection'), }); diff --git a/bundle/Resources/public/js/views/plugins/cof-selectcontenttypeplugin.js b/bundle/Resources/public/js/views/plugins/cof-selectcontenttypeplugin.js index fcb03de..1558897 100644 --- a/bundle/Resources/public/js/views/plugins/cof-selectcontenttypeplugin.js +++ b/bundle/Resources/public/js/views/plugins/cof-selectcontenttypeplugin.js @@ -40,6 +40,13 @@ YUI.add('cof-selectcontenttypeplugin', function (Y) { event.target.set('suggestedLocations', result); }) .catch(function (error) { + /** + * Displays a notification bar with error message. + * Listened by eZ.PlatformUIApp + * + * @event notify + * @param notification {Object} notification data + */ host.fire('notify', { notification: { text: error.message || 'An unexpected error has occurred',