API Docs for: 1.0.0
Show:

File: Resources/public/js/views/ez-contenteditview.js

/*
 * 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-contenteditview', function (Y) {
    "use strict";
    /**
     * Provides the Content Edit View class
     *
     * @module ez-contenteditview
     */
    Y.namespace('eZ');

    var IS_SHOWING_INFOS = 'is-showing-infos',
        CONTENT_SEL = '.ez-main-content',
        ESCAPE_KEY = 27,
        FORM_CONTAINER = '.ez-contenteditformview-container',
        ACTION_BAR_CONTAINER = '.ez-editactionbar-container';

    /**
     * The content edit view
     *
     * @namespace eZ
     * @class ContentEditView
     * @constructor
     * @extends eZ.TemplateBasedView
     */
    Y.eZ.ContentEditView = Y.Base.create('contentEditView', Y.eZ.TemplateBasedView, [], {
        events: {
            '.ez-view-close': {'tap': '_closeView'},
            'header': {
                'mouseover': '_showDetails',
                'mouseout': '_hideDetails',
                'tap': '_showDetails',
            },
            '.ez-change-content-language-link': {
                'tap': '_changeLanguage',
            }
        },

        /**
         * Initializer is called upon view's init
         * Creating and managing child views inside it
         *
         * @method initializer
         */
        initializer: function () {
            this.after('activeChange', function (e) {
                if ( e.newVal ) {
                    this._setFocus();
                }
            });
            this.after('languageCodeChange', function (e) {
                this.get('formView').setAttrs({
                    'languageCode': this.get('languageCode'),
                    'version': this.get('version'),
                });
                if ( this.get('active') ) {
                    this.render();
                }
            });
            this.after('versionChange', function (e) {
                this.get('formView').set('version', this.get('version'));
            });

            this.on(['*:saveAction', '*:publishAction'], this._handleSavePublish);
            this.on('*:previewAction', this._saveAndPreview);
        },

        /**
         * `previewAction` event handler. It fires the `saveAction` draft so
         * that the draft is saved before trying to preview the version.
         *
         * @method _saveAndPreview
         * @protected
         * @param {EventFacade} e
         */
        _saveAndPreview: function (e) {
            // TODO before trying to save the draft, we should first check if
            // that's necessary, maybe the draft is already saved and up to date
            // with the data in the edit form.
            // see https://jira.ez.no/browse/EZP-25200
            this.fire('saveAction', {
                content: e.content,
                callback: e.callback,
                notificationText: {
                    started: Y.eZ.trans('saving.draft.to.generate.the.preview', {}, 'contentedit'),
                    error: Y.eZ.trans('failed.saving.draft.to.generate.the.preview', {}, 'contentedit'),
                },
            });
        },

        /**
         * Event handler for the saveAction and publishAction events. It
         * enriches the event facade with the updated fields and the form
         * validity
         *
         * @method _handleSavePublish
         * @protected
         * @param {Object} e event facade
         */
        _handleSavePublish: function (e) {
            var form = this.get('formView');

            e.fields = form.getFields();
            e.formIsValid = form.isValid();
            e.serverSideErrorCallback = function (serverSideErrors) {
                form.setServerSideErrors(serverSideErrors);
            };
        },

        /**
         * Destructor is called upon view's destruction
         * Destroying and cleaning up child views
         *
         * @method destructor
         */
        destructor: function () {
            this.get('formView').destroy();
            this.get('actionBar').destroy();
        },

        /**
         * Return JSONified owner if the content still have an owner.
         * A content with a deleted owner is considered like having no owner.
         *
         * @method _getOwner
         * @return {Object | null}
         */
        _getOwner: function () {
            return this.get('owner') ? this.get('owner').toJSON() : null;
        },

        /**
         * Renders the content edit view
         *
         * @method render
         * @return {eZ.ContentEditView} the view itself
         */
        render: function () {
            var container = this.get('container');

            container.setHTML(this.template({
                content: this.get('content').toJSON(),
                version: this.get('version').toJSON(),
                mainLocation: this.get('mainLocation').toJSON(),
                contentType: this.get('contentType').toJSON(),
                owner: this._getOwner(),
                languageCode: this.get('languageCode')
            }));
            if ( this._isTouch() ) {
                container.addClass('is-using-touch-device');
            }

            container.one(FORM_CONTAINER).append(this.get('formView').render().get('container'));

            // Note: render() is drawing non-height-responsive version of the action bar
            // but handleHeightUpdate() event will be triggered from app.handleContentEdit(), when everything is loaded to draw the responsive version
            container.one(ACTION_BAR_CONTAINER).append(this.get('actionBar').render().get('container'));
            this._uiSetMinHeight();

            return this;
        },

        /**
         * Sets the minimum height of the view
         *
         * @private
         * @method _uiSetMinHeight
         */
        _uiSetMinHeight: function () {
            var container = this.get('container');

            container.one(CONTENT_SEL).setStyle('minHeight', container.get('winHeight') + 'px');
        },

        /**
         * Returns the title of the page when the content edit view is the
         * active view
         *
         * @method getTitle
         * @return String
         */
        getTitle: function () {
            return 'Editing "' + this.get('content').get('name') + '"';
        },

        /**
         * Set current input focus on the view
         *
         * @method setFocus
         * @protected
         */
        _setFocus: function () {
            this.get('container').one(CONTENT_SEL).focus();
        },

        /**
         * Shows the technical infos of the content.
         *
         * @method _showDetails
         * @protected
         */
        _showDetails: function () {
            this.get('container').addClass(IS_SHOWING_INFOS);
        },

        /**
         * Hides the technical infos of the content.         *
         *
         * @method _hideDetails
         * @protected
         */
        _hideDetails: function () {
            this.get('container').removeClass(IS_SHOWING_INFOS);
        },

        /**
         * Event event handler for the close link in the content edit view
         *
         * @method _closeView
         * @protected
         * @param {Object} e event facade of the tap event
         */
        _closeView: function (e) {
            /**
             * Fired when the close link is clicked
             *
             * @event closeView
             */
            this.fire('closeView');
            e.preventDefault();
        },

        /**
         * Event event handler for any key pressed within the content edit view
         *
         * @method _handleKeyboard
         * @protected
         * @deprecated this method is deprecated and will be removed in PlatformUI 2.0
         * @param {Object} e event facade of the keyboard event
         */
        _handleKeyboard: function (e) {
            console.warn('[DEPRECATED] method _handleKeyboard is deprecated and will be removed in PlatformUI 2.0');
            if (e.keyCode === ESCAPE_KEY) {
                this._closeView(e);
            }

        },

        /**
         * Returns whether the current browser is a touch device or not
         *
         * @method _isTouch
         * @private
         * @return {Boolean}
         */
        _isTouch: function () {
            return Y.UA.touchEnabled;
        },

        /**
         * Tap event handler on change language button. It fires `changeLanguage` event.
         *
         * @method _changeLanguage
         * @private
         * @param {EventFacade} e
         */
        _changeLanguage: function (e) {
            e.preventDefault();

            /**
             * Fired when the change language link was tapped
             *
             * @event changeLanguage
             * @param {Array} fields fields that will be used after changing the language - they are passed here
             * to persist field values after the language is changed
             */
            this.fire('changeLanguage', {fields: this.get('formView').getFields()});
        },
    }, {
        ATTRS: {
            /**
             * The content being edited
             *
             * @attribute content
             * @default {}
             * @type {eZ.Content}
             * @required
             */
            content: {},

            /**
             * The version being edited
             *
             * @attribute content
             * @default {}
             * @type {eZ.Version}
             * @required
             */
            version: {},

            /**
             * The content type of the content being edited
             *
             * @attribute contentType
             * @default {}
             * @required
             */
            contentType: {
                writeOnce: "initOnly",
            },

            /**
             * The main location of the content being edited
             *
             * @attribute mainLocation
             * @default {}
             * @required
             */
            mainLocation: {
                writeOnce: "initOnly",
            },

            /**
             * The owner of the content being edited
             *
             * @attribute owner
             * @type {eZ.User | null}
             * @required
             */
            owner: {
                writeOnce: "initOnly",
            },

            /**
             * The logged in user
             *
             * @attribute user
             * @type {eZ.User}
             * @required
             */
            user: {},

            /**
             * The ContentEditFormView (by default) instance which will be used to render form
             *
             * @attribute formView
             * @default new Y.eZ.ContentEditFormView()
             * @type {eZ.ContentEditFormView}
             * @required
             */
            formView: {
                valueFn: function () {
                    return new Y.eZ.ContentEditFormView({
                        config: this.get('config'),
                        contentType: this.get('contentType'),
                        content: this.get('content'),
                        version: this.get('version'),
                        languageCode: this.get('languageCode'),
                        bubbleTargets: this,
                        user: this.get('user'),
                    });
                }
            },

            /**
             * The EditActionBarView (by default) instance
             *
             * @attribute actionBar
             * @default new Y.eZ.EditActionBarView()
             * @type {eZ.EditActionBarView}
             * @required
             */
            actionBar: {
                valueFn: function () {
                    return new Y.eZ.EditActionBarView({
                        content: this.get('content'),
                        version: this.get('version'),
                        contentType: this.get('contentType'),
                        languageCode: this.get('languageCode'),
                        bubbleTargets: this,
                    });
                }
            },

            /**
             * The language code in which the content is edited.
             *
             * @attribute languageCode
             * @default ''
             * @type {String}
             * @required
             */
            languageCode: '',
        }
    });
});