Merge pull request #9 from dew326/ezs-805-preselected-content-type

EZS-805: Preselected content type

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
@@ -60,3 +60,25 @@ parameters:
                 - 2     # /Home
                 - 43    # /Media
 ```
+
+## Default location for content type
+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 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'
+*                                     this parameter is limited to the Create tab, config that works across all tabs will be added in the future
+*/
+app.fire('contentDiscover', {
+    config: {
+        // ...
+        visibleMethod: 'create',
+        contentTypeIdentifier: 'image'
+    }
+});
+```

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 {

bundle/Resources/public/js/views/cof-contentcreationview.js

@@ -73,13 +73,15 @@ 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);
             this.on('*:contentLoaded', this._hideCreateContentView, this, true);
             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);
         },
 
         /**
@@ -142,31 +147,36 @@ 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;
-            } 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.
              * Listened in the cof.Plugin.createContentSelectContentType
+             *
+             * @event fetchContentTypes
              */
             this.fire('fetchContentTypes');
         },
@@ -238,14 +248,18 @@ 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');
+
+            this.set('fetchContentTypesPrevented', true);
         },
 
         /**
@@ -256,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;
@@ -275,10 +289,14 @@ 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();
+
+            this.set('fetchContentTypesPrevented', false);
         },
 
         /**
@@ -380,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);
 
@@ -484,6 +504,56 @@ 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
+                         *
+                         * @event prepareContentModel
+                         * @param contentType {eZ.ContentType} the content type model
+                         */
+                        contentTypeSelector.fire('prepareContentModel', {contentType: contentType});
+                    }
+                }, this));
+            }, this));
+        },
     }, {
         ATTRS: {
             /**
@@ -605,6 +675,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
+            },
         }
     });
 });

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});
          },

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);
         },
 
         /**
@@ -90,12 +91,41 @@ 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'),
             });
         },
+
+        /**
+         * Sets content type identifier.
+         *
+         * @protected
+         * @method _setContentTypeIdentifier
+         * @param event {Object} event facade
+         */
+        _setContentTypeIdentifier: function (event) {
+            var contentTypeIdentifier = event.newVal;
+
+            if (contentTypeIdentifier && contentTypeIdentifier !== event.prevVal) {
+                this.get('tabCreateView').get('contentCreationView').set('contentTypeIdentifier', contentTypeIdentifier);
+            }
+        },
     }, {
         NS: 'createContentUniversalDiscoveryWidgetPlugin',
         ATTRS: {

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',