API Docs for: 1.0.0
Show:

File: Resources/public/js/views/ez-editpreviewview.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-editpreviewview', function (Y) {
    "use strict";
    /**
     * Provides the Edit Preview View class
     *
     * @module ez-editpreviewview
     */
    Y.namespace('eZ');

    var IS_HIDDEN_CLASS = 'is-editpreview-hidden',
        IS_LOADING_CLASS = 'is-loading';

    /**
     * The edit preview view
     *
     * @namespace eZ
     * @class EditPreviewView
     * @constructor
     * @extends eZ.TemplateBasedView
     */
    Y.eZ.EditPreviewView = Y.Base.create('editPreviewView', Y.eZ.TemplateBasedView, [], {
        events: {
            '.ez-preview-hide': {'tap': '_editPreviewHide'}
        },

        /**
         * Returns the version to use to generate the preview. If the version
         * was not saved yet, we are actually generating the preview to the
         * current version.
         *
         * @method _getPreviewedVersion
         * @return {eZ.Version}
         */
        _getPreviewedVersion: function () {
            var version = this.get('version'),
                currentVersion = this.get('content').get('currentVersion');

            return version.isNew() ? currentVersion : version;
        },

        /**
         * Renders the edit preview
         *
         * @method render
         * @return {eZ.EditPreview} the view itself
         */
        render: function () {
            var container = this.get('container'),
                content = this.get('content'),
                version = this._getPreviewedVersion(),
                languageCode = this.get('languageCode');

            container.setHTML(this.template({
                mode: this.get('previewModes')[this.get('currentModeId')],
                source: '/content/versionview/' + content.get('contentId') + '/' + version.get('versionNo') + '/' + languageCode,
                legend: version.get('names')[languageCode]
            })).addClass(IS_LOADING_CLASS);

            this._attachedViewEvents.push(container.one('.ez-preview-iframe').on('load', function () {
                container.removeClass(IS_LOADING_CLASS);
            }));

            return this;
        },

        /**
         * Showing the edit preview view with a nice transition
         *
         * @method show
         */
        show: function (newWidth) {
            var previewContainer = this.get('container').get('parentNode');

            if ( this.isHidden() ) {
                previewContainer.setStyles({
                    'width': newWidth + 'px',
                    'height': previewContainer.get('winHeight') + 'px',
                });
                previewContainer.setXY([newWidth * 2, previewContainer.get('docScrollY')]);
                previewContainer.removeClass(IS_HIDDEN_CLASS);
            }

            this.render();
        },

        /**
         * Event event handler for the "close preview" link in the edit preview
         * Hiding the edit preview with a nice transition
         *
         * @method _editPreviewHide
         * @protected
         * @param {Object} e event facade of the tap event
         */
        _editPreviewHide: function (e) {
            e.preventDefault();
            this.get('container').get('parentNode').addClass(IS_HIDDEN_CLASS);
            /**
             * Fired when the "close preview" link is clicked
             *
             * @event editPreviewHide
             */
            this.fire('editPreviewHide');
        },

        /**
         * Checks whether the preview is hidden
         *
         * @method isHidden
         * @return {Boolean}
         */
        isHidden: function () {
            return this.get('container').get('parentNode').hasClass(IS_HIDDEN_CLASS);
        },
    }, {
        ATTRS: {
            /**
             * Preview parameters for different modes
             *
             * @attribute previewModes
             * @default []
             * @required
             */
            previewModes: {
                value: {
                    "desktop": {
                        id: "desktop",
                        width: 1100,
                        height: 700
                    },
                    "tablet": {
                        id: "tablet",
                        width: 769, /* preview-tablet.png image has such a strange dimensions */
                        height: 1025 /* preview-tablet.png image has such a strange dimensions */
                    },
                    "mobile": {
                        id: "mobile",
                        width: 321, /* preview-mobile.png image has such a strange dimensions */
                        height: 481 /* preview-mobile.png image has such a strange dimensions */
                    }
                }
            },

            /**
             * Mode of the actual preview to be rendered
             *
             * @attribute currentModeId
             * @default "mobile"
             * @required
             */
            currentModeId: {
                value: "mobile"
            },

            /**
             * Content which should be previewed
             *
             * @attribute content
             * @type Y.eZ.Content
             * @default {}
             * @required
             */
            content: {
                value: {}
            },

            /**
             * The version which should be previewed
             *
             * @attribute version
             * @type eZ.Version
             * @default {}
             * @required
             */
            version: {
                value: {}
            },

            /**
             * The languageCode of the content previewed
             *
             * @attribute languageCode
             * @type String
             * @required
             */
            languageCode: {
                value: ''
            }

        }
    });
});