page-editor.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../polymerfire/firebase-document.html">
<link rel="import" href="../css-grid/css-grid.html">
<link rel="import" href="../paper-fab/paper-fab.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-icons/image-icons.html">
<link rel="import" href="../page-operator/page-operator.html">
<link rel="import" href="../paper-toast/paper-toast.html">
<link rel="import" href="../attribute-editor/attribute-editor.html">

<dom-module id="page-editor">
    <template>
        <style type="text/css">
            :host {
                display: none;
            }
            :host([active]){
                display: block;
            }
            .preview {
                position: fixed;
                bottom: 50px;
                right: 120px;
            }
            .save  {
                position: fixed;
                bottom: 50px;
                right: 50px;
            }
        </style>
        <firebase-document></firebase-document>
        <page-operator locale="[[routedata.locale]]" name="[[routedata.name]]" template-name="[[templateName]]"></page-operator>

        <css-grid
            path="/"
            rawcomponents="{{templatecomponents}}"
            in-edit-mode="[[inEditMode]]"
            in-content-mode="[[inContentMode]]">
        </css-grid>

        <paper-fab class="preview" icon="image:remove-red-eye" on-click="_enterPreviewMode"></paper-fab>
        <paper-fab class="save" icon="icons:save" on-click="_sendDataForSave"></paper-fab>

        <paper-toast text="The content has been queued for save operation."></paper-toast>
    </template>

    <script>
        Polymer({
            is: 'page-editor',

            properties: {
                inEditMode: {
                    type: Boolean,
                    value: false,
                    notify: true
                },

                inContentMode: {
                    type: Boolean,
                    value: true,
                    notify: true
                },

                routedata: {
                    type: Object,
                    notify: true,
                    observer: '_routedataChanged'
                },

                templatecomponents: {
                    type: Object,
                    notify: true,
                    reflectToAttribute: false,
                    value: {}
                },

                inPreviewMode: {
                    type: Boolean,
                    notify: true,
                    value: false,
                    reflectToAttribute: false
                },

                templateName: {
                    type: String,
                    notify: true,
                    reflectToAttribute: false
                }
            },

            _routedataChanged: function() {
                var path = '/pages/' + this._getPath();
                this.set('templatecomponents', {});
                this.async( () => {
                    this.$$('firebase-document').getStoredValue(path)
                    .then((data) => {
                        this.templateName = data.template;
                        this.contentData = data.components;
                        return this.$$('firebase-document').getStoredValue('/templates/' + data.template);
                    })
                    .then((data) => {
                        if(!!this.contentData) {
                            var mergedData = this._handleContent(data, this.contentData);
                            this.set('templatecomponents', mergedData);
                        } else {
                             this.set('templatecomponents', data);
                        }
                    });
                });
            },

            _handleContent: function(obj1, obj2) {
                Object.keys(obj2).forEach((key) => {
                    obj1[key]['usercontent'] = obj2[key]['usercontent'] || {};
                    // TODO : Add nested user content. Refer <review-page>
                });

                return obj1;
            },

            _getPath: function() {
                return this.routedata.locale + '/' + this.routedata.name;
            },

            _enterPreviewMode: function() {
                this.inPreviewMode = !this.inPreviewMode;
                if(this.inPreviewMode) {
                    tinymce.EditorManager.editors.forEach(function(element) {
                        element.show();
                        element.hide();
                    });
                } else {
                    tinymce.EditorManager.editors.forEach(function(element) {
                        element.hide();
                        element.show();
                    });
                }
            },

            _sendDataForSave: function() {
                var path = '/approvals/pages/' + this._getPath();

                this.$$('firebase-document').setStoredValue(path + '/template', this.templateName)
                .then(() => {
                    tinymce.EditorManager.editors.forEach(function(element) {
                        element.fire('save');
                    });
                    this.fire('iron-signal', {
                        name: 'attribute-save',
                        data: null
                    });
                    this.$$('paper-toast').open();
                });

            }
        });
    </script>
</dom-module>