Merge pull request #240 from ONLYOFFICE/feature/optimization

Feature/optimization

apps/api/documents/api.js

@@ -736,8 +736,15 @@
             : config.type === "embedded"
                 ? "embed"
                 : "main";
-        path += "/index.html";
 
+        var index = "/index.html";
+        if (config.editorConfig && config.editorConfig.targetApp!=='desktop') {
+            var customization = config.editorConfig.customization;
+            if ( typeof(customization) == 'object' && (customization.loaderName || customization.loaderLogo)) {
+                index = "/index_loader.html";
+            }
+        }
+        path += index;
         return path;
     }
 
@@ -754,6 +761,11 @@
                 params += "&customer=ONLYOFFICE";
             if ( (typeof(config.editorConfig.customization) == 'object') && config.editorConfig.customization.loaderLogo) {
                 if (config.editorConfig.customization.loaderLogo !== '') params += "&logo=" + config.editorConfig.customization.loaderLogo;
+            } else if ( (typeof(config.editorConfig.customization) == 'object') && config.editorConfig.customization.logo) {
+                if (config.type=='embedded' && config.editorConfig.customization.logo.imageEmbedded)
+                    params += "&headerlogo=" + config.editorConfig.customization.logo.imageEmbedded;
+                else if (config.type!='embedded' && config.editorConfig.customization.logo.image)
+                    params += "&headerlogo=" + config.editorConfig.customization.logo.image;
             }
         }
 

apps/common/main/lib/component/Button.js

@@ -319,7 +319,7 @@ define([
 
             me.trigger('render:before', me);
 
-            me.cmpEl = $(me.el);
+            me.cmpEl = me.$el || $(me.el);
 
             if (parentEl) {
                 me.setElement(parentEl, false);

apps/common/main/lib/component/CheckBox.js

@@ -104,27 +104,25 @@ define([
         },
 
         render: function (parentEl) {
-            var me = this,
+            var me = this;
-                el = $(this.el);
             if (!me.rendered) {
                 if (parentEl) {
                     this.setElement(parentEl, false);
                     parentEl.html(this.template({
                         labelText: this.options.labelText
                     }));
-                    el = $(this.el);
                 } else {
-                    el.html(this.template({
+                    me.$el.html(this.template({
                         labelText: this.options.labelText
                     }));
                 }
 
-                this.$chk = el.find('input[type=button]');
+                this.$chk = me.$el.find('input[type=button]');
-                this.$label = el.find('label');
+                this.$label = me.$el.find('label');
-                this.$chk.on('click', _.bind(this.onItemCheck, this));
+                this.$chk.on('click', this.onItemCheck.bind(this));
-            }
 
-            this.rendered = true;
+                this.rendered = true;
+            }
 
             if (this.options.disabled)
                 this.setDisabled(this.options.disabled);

apps/common/main/lib/component/ColorPalette.js

@@ -91,16 +91,14 @@ define([
                     this.setElement(parentEl, false);
                     parentEl.html(this.cmpEl);
                 } else {
-                    $(this.el).html(this.cmpEl);
+                    me.$el.html(this.cmpEl);
                 }
             } else {
-                this.cmpEl = $(this.el);
+                this.cmpEl = me.$el || $(this.el);
             }
 
             if (!me.rendered) {
-                var el = this.cmpEl;
+                me.cmpEl.on('click', 'span.color-item', me.itemClick.bind(me));
-
-                el.on('click', 'span.color-item', _.bind(this.itemClick, this));
             }
 
             me.rendered = true;

apps/common/main/lib/component/ColorPaletteExt.js

@@ -108,12 +108,12 @@ define([
                     this.setElement(parentEl, false);
                     parentEl.html(this.cmpEl);
                 } else {
-                    $(this.el).html(this.cmpEl);
+                    this.$el.html(this.cmpEl);
                 }
 
-                this.cmpEl.on('click', _.bind(this.handleClick, this));
+                this.cmpEl.on('click', me.handleClick.bind(me));
             } else {
-                this.cmpEl = $(this.el);
+                this.cmpEl = me.$el || $(this.el);
             }
 
             me.rendered = true;

apps/common/main/lib/component/ComboBox.js

@@ -104,8 +104,7 @@ define([
             initialize : function(options) {
                 Common.UI.BaseView.prototype.initialize.call(this, options);
 
-                var me = this,
+                var me = this;
-                    el = $(this.el);
 
                 this.id             = me.options.id || Common.UI.getId();
                 this.cls            = me.options.cls;
@@ -158,10 +157,10 @@ define([
                         this.setElement(parentEl, false);
                         parentEl.html(this.cmpEl);
                     } else {
-                        $(this.el).html(this.cmpEl);
+                        this.$el.html(this.cmpEl);
                     }
                 } else {
-                    this.cmpEl = $(this.el);
+                    this.cmpEl = me.$el || $(this.el);
                 }
 
                 if (!me.rendered) {

apps/common/main/lib/component/ComboDataView.js

@@ -148,7 +148,7 @@ define([
 
                 me.trigger('render:before', me);
 
-                me.cmpEl = $(me.el);
+                me.cmpEl = me.$el || $(me.el);
 
                 var templateEl = me.template({
                     id      : me.id,

apps/common/main/lib/component/DataView.js

@@ -135,7 +135,7 @@ define([
             if (_.isUndefined(this.model.id))
                 return this;
 
-            var el = $(this.el);
+            var el = this.$el || $(this.el);
 
             el.html(this.template(this.model.toJSON()));
             el.addClass('item');
@@ -262,7 +262,6 @@ define([
 
             this.trigger('render:before', this);
 
-            this.cmpEl = $(this.el);
             if (parentEl) {
                 this.setElement(parentEl, false);
                 this.cmpEl = $(this.template({
@@ -272,6 +271,7 @@ define([
 
                 parentEl.html(this.cmpEl);
             } else {
+                this.cmpEl = me.$el || $(this.el);
                 this.cmpEl.html(this.template({
                     groups: me.groups ? me.groups.toJSON() : null,
                     style: me.style
@@ -766,6 +766,435 @@ define([
         }
     });
 
+    Common.UI.DataViewSimple = Common.UI.BaseView.extend({
+        options : {
+            handleSelect: true,
+            enableKeyEvents: true,
+            keyMoveDirection: 'both', // 'vertical', 'horizontal'
+            restoreHeight: 0,
+            scrollAlwaysVisible: false,
+            useBSKeydown: false
+        },
+
+        template: _.template([
+            '<div class="dataview inner" style="<%= style %>">',
+            '<% _.each(items, function(item) { %>',
+                '<% if (!item.id) item.id = Common.UI.getId(); %>',
+                '<div class="item" <% if(!!item.tip) { %> data-toggle="tooltip" <% } %> ><%= itemTemplate(item) %></div>',
+            '<% }) %>',
+            '</div>'
+        ].join('')),
+
+        initialize : function(options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+            var me = this;
+
+            me.template       = me.options.template       || me.template;
+            me.store          = me.options.store          || new Common.UI.DataViewStore();
+            me.itemTemplate   = me.options.itemTemplate   || null;
+            me.handleSelect   = me.options.handleSelect;
+            me.parentMenu     = me.options.parentMenu;
+            me.enableKeyEvents= me.options.enableKeyEvents;
+            me.useBSKeydown   = me.options.useBSKeydown; // only with enableKeyEvents && parentMenu
+            me.style          = me.options.style        || '';
+            me.scrollAlwaysVisible = me.options.scrollAlwaysVisible || false;
+            if (me.parentMenu)
+                me.parentMenu.options.restoreHeight = (me.options.restoreHeight>0);
+            me.rendered       = false;
+            if (me.options.keyMoveDirection=='vertical')
+                me.moveKeys = [Common.UI.Keys.UP, Common.UI.Keys.DOWN];
+            else if (me.options.keyMoveDirection=='horizontal')
+                me.moveKeys = [Common.UI.Keys.LEFT, Common.UI.Keys.RIGHT];
+            else
+                me.moveKeys = [Common.UI.Keys.UP, Common.UI.Keys.DOWN, Common.UI.Keys.LEFT, Common.UI.Keys.RIGHT];
+            if (me.options.el)
+                me.render();
+        },
+
+        render: function (parentEl) {
+            var me = this;
+            this.trigger('render:before', this);
+            if (parentEl) {
+                this.setElement(parentEl, false);
+                this.cmpEl = $(this.template({
+                    items: me.store.toJSON(),
+                    itemTemplate: me.itemTemplate,
+                    style: me.style
+                }));
+
+                parentEl.html(this.cmpEl);
+            } else {
+                this.cmpEl = me.$el || $(this.el);
+                this.cmpEl.html(this.template({
+                    items: me.store.toJSON(),
+                    itemTemplate: me.itemTemplate,
+                    style: me.style
+                }));
+            }
+            var modalParents = this.cmpEl.closest('.asc-window');
+            if (modalParents.length < 1)
+                modalParents = this.cmpEl.closest('[id^="menu-container-"]'); // context menu
+            if (modalParents.length > 0) {
+                this.tipZIndex = parseInt(modalParents.css('z-index')) + 10;
+            }
+
+            if (!this.rendered) {
+                if (this.parentMenu) {
+                    this.cmpEl.closest('li').css('height', '100%');
+                    this.cmpEl.css('height', '100%');
+                    this.parentMenu.on('show:after', _.bind(this.alignPosition, this));
+                    this.parentMenu.on('show:after', _.bind(this.onAfterShowMenu, this));
+                } else if (this.store.length>0)
+                    this.onAfterShowMenu();
+
+                if (this.enableKeyEvents && this.parentMenu && this.handleSelect) {
+                    this.parentMenu.on('show:before', function(menu) { me.deselectAll(); });
+                    this.parentMenu.on('show:after', function(menu) {
+                        Common.NotificationCenter.trigger('dataview:focus');
+                        _.delay(function() {
+                            menu.cmpEl.find('.dataview').focus();
+                        }, 10);
+                    }).on('hide:after', function() {
+                        Common.NotificationCenter.trigger('dataview:blur');
+                    });
+                }
+                this.attachKeyEvents();
+                this.cmpEl.on( "click", "div.item", _.bind(me.onClickItem, me));
+            }
+            if (_.isUndefined(this.scroller)) {
+                this.scroller = new Common.UI.Scroller({
+                    el: $(this.el).find('.inner').addBack().filter('.inner'),
+                    useKeyboard: this.enableKeyEvents && !this.handleSelect,
+                    minScrollbarLength  : 40,
+                    wheelSpeed: 10,
+                    alwaysVisibleY: this.scrollAlwaysVisible
+                });
+            }
+
+            this.rendered = true;
+
+            this.cmpEl.on('click', function(e){
+                if (/dataview/.test(e.target.className)) return false;
+            });
+
+            this.trigger('render:after', this);
+            return this;
+        },
+
+        selectRecord: function(record, suspendEvents) {
+            if (!this.handleSelect)
+                return;
+
+            if (suspendEvents)
+                this.suspendEvents();
+
+            this.deselectAll(suspendEvents);
+
+            if (record) {
+                record.set({selected: true});
+                var idx = _.indexOf(this.store.models, record);
+                if (idx>=0 && this.dataViewItems && this.dataViewItems.length>idx) {
+                    this.dataViewItems[idx].el.addClass('selected');
+                }
+            }
+
+            if (suspendEvents)
+                this.resumeEvents();
+            return record;
+        },
+
+        selectByIndex: function(index, suspendEvents) {
+            if (this.store.length > 0 && index > -1 && index < this.store.length) {
+                return this.selectRecord(this.store.at(index), suspendEvents);
+            }
+        },
+
+        deselectAll: function(suspendEvents) {
+            if (suspendEvents)
+                this.suspendEvents();
+
+            _.each(this.store.where({selected: true}), function(record){
+                record.set({selected: false});
+            });
+            this.cmpEl.find('.item.selected').removeClass('selected');
+
+            if (suspendEvents)
+                this.resumeEvents();
+        },
+
+        getSelectedRec: function() {
+            return this.store.findWhere({selected: true});
+        },
+
+        onResetItems: function() {
+            this.dataViewItems && _.each(this.dataViewItems, function(item) {
+                var tip = item.el.data('bs.tooltip');
+                if (tip) {
+                    if (tip.dontShow===undefined)
+                        tip.dontShow = true;
+                    (tip.tip()).remove();
+                }
+            }, this);
+            this.dataViewItems = null;
+
+            var template = _.template([
+                '<% _.each(items, function(item) { %>',
+                    '<% if (!item.id) item.id = Common.UI.getId(); %>',
+                    '<div class="item" <% if(!!item.tip) { %> data-toggle="tooltip" <% } %> ><%= itemTemplate(item) %></div>',
+                '<% }) %>'
+            ].join(''));
+            this.cmpEl && this.cmpEl.find('.inner').html(template({
+                items: this.store.toJSON(),
+                itemTemplate: this.itemTemplate,
+                style : this.style
+            }));
+
+            if (!_.isUndefined(this.scroller)) {
+                this.scroller.destroy();
+                delete this.scroller;
+            }
+
+            this.scroller = new Common.UI.Scroller({
+                el: $(this.el).find('.inner').addBack().filter('.inner'),
+                useKeyboard: this.enableKeyEvents && !this.handleSelect,
+                minScrollbarLength  : 40,
+                wheelSpeed: 10,
+                alwaysVisibleY: this.scrollAlwaysVisible
+            });
+
+            if (!this.parentMenu && this.store.length>0)
+                this.onAfterShowMenu();
+            this._layoutParams = undefined;
+        },
+
+        setStore: function(store) {
+            if (store) {
+                this.store = store;
+                this.onResetItems();
+            }
+        },
+
+        onClickItem: function(e) {
+            if ( this.disabled ) return;
+
+            window._event = e;  //  for FireFox only
+
+            var index = $(e.currentTarget).closest('div.item').index(),
+                record = (index>=0) ? this.store.at(index) : null,
+                view = (index>=0) ? this.dataViewItems[index] : null;
+            if (!record || !view) return;
+
+            record.set({selected: true});
+            var tip = view.el.data('bs.tooltip');
+            if (tip) (tip.tip()).remove();
+
+            if (!this.isSuspendEvents) {
+                this.trigger('item:click', this, view.el, record, e);
+            }
+        },
+
+        onAfterShowMenu: function(e) {
+            if (!this.dataViewItems) {
+                var me = this;
+                this.dataViewItems = [];
+                _.each(this.cmpEl.find('div.item'), function(item, index) {
+                    var $item = $(item),
+                        rec = me.store.at(index);
+                    me.dataViewItems.push({el: $item});
+                    if (rec.get('tip')) {
+                        $item.tooltip({
+                            title       : rec.get('tip'),
+                            placement   : 'cursor',
+                            zIndex : me.tipZIndex
+                        });
+                    }
+                });
+            }
+        },
+
+        scrollToRecord: function (record) {
+            if (!record) return;
+            var innerEl = $(this.el).find('.inner'),
+                inner_top = innerEl.offset().top,
+                idx = _.indexOf(this.store.models, record),
+                div = (idx>=0 && this.dataViewItems.length>idx) ? this.dataViewItems[idx].el : innerEl.find('#' + record.get('id'));
+            if (div.length<=0) return;
+
+            var div_top = div.offset().top,
+                div_first = this.dataViewItems[0].el,
+                div_first_top = (div_first.length>0) ? div_first[0].offsetTop : 0;
+            if (div_top < inner_top + div_first_top || div_top+div.outerHeight() > inner_top + innerEl.height()) {
+                if (this.scroller) {
+                    this.scroller.scrollTop(innerEl.scrollTop() + div_top - inner_top - div_first_top, 0);
+                } else {
+                    innerEl.scrollTop(innerEl.scrollTop() + div_top - inner_top - div_first_top);
+                }
+            }
+        },
+
+        onKeyDown: function (e, data) {
+            if ( this.disabled ) return;
+            if (data===undefined) data = e;
+            if (_.indexOf(this.moveKeys, data.keyCode)>-1 || data.keyCode==Common.UI.Keys.RETURN) {
+                data.preventDefault();
+                data.stopPropagation();
+                var rec = this.getSelectedRec();
+                if (data.keyCode==Common.UI.Keys.RETURN) {
+                    if (this.selectedBeforeHideRec) // only for ComboDataView menuPicker
+                        rec = this.selectedBeforeHideRec;
+                    this.trigger('item:click', this, this, rec, e);
+                    if (this.parentMenu)
+                        this.parentMenu.hide();
+                } else {
+                    var idx = _.indexOf(this.store.models, rec);
+                    if (idx<0) {
+                        if (data.keyCode==Common.UI.Keys.LEFT) {
+                            var target = $(e.target).closest('.dropdown-submenu.over');
+                            if (target.length>0) {
+                                target.removeClass('over');
+                                target.find('> a').focus();
+                            } else
+                                idx = 0;
+                        } else
+                            idx = 0;
+                    } else if (this.options.keyMoveDirection == 'both') {
+                        if (this._layoutParams === undefined)
+                            this.fillIndexesArray();
+                        var topIdx = this.dataViewItems[idx].topIdx,
+                            leftIdx = this.dataViewItems[idx].leftIdx;
+
+                        idx = undefined;
+                        if (data.keyCode==Common.UI.Keys.LEFT) {
+                            while (idx===undefined) {
+                                leftIdx--;
+                                if (leftIdx<0) {
+                                    var target = $(e.target).closest('.dropdown-submenu.over');
+                                    if (target.length>0) {
+                                        target.removeClass('over');
+                                        target.find('> a').focus();
+                                        break;
+                                    } else
+                                        leftIdx = this._layoutParams.columns-1;
+                                }
+                                idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
+                            }
+                        } else if (data.keyCode==Common.UI.Keys.RIGHT) {
+                            while (idx===undefined) {
+                                leftIdx++;
+                                if (leftIdx>this._layoutParams.columns-1) leftIdx = 0;
+                                idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
+                            }
+                        } else if (data.keyCode==Common.UI.Keys.UP) {
+                            while (idx===undefined) {
+                                topIdx--;
+                                if (topIdx<0) topIdx = this._layoutParams.rows-1;
+                                idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
+                            }
+                        } else {
+                            while (idx===undefined) {
+                                topIdx++;
+                                if (topIdx>this._layoutParams.rows-1) topIdx = 0;
+                                idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
+                            }
+                        }
+                    } else {
+                        idx = (data.keyCode==Common.UI.Keys.UP || data.keyCode==Common.UI.Keys.LEFT)
+                            ? Math.max(0, idx-1)
+                            : Math.min(this.store.length - 1, idx + 1) ;
+                    }
+
+                    if (idx !== undefined && idx>=0) rec = this.store.at(idx);
+                    if (rec) {
+                        this._fromKeyDown = true;
+                        this.selectRecord(rec);
+                        this._fromKeyDown = false;
+                        this.scrollToRecord(rec);
+                    }
+                }
+            } else {
+                this.trigger('item:keydown', this, rec, e);
+            }
+        },
+
+        attachKeyEvents: function() {
+            if (this.enableKeyEvents && this.handleSelect) {
+                var el = $(this.el).find('.inner').addBack().filter('.inner');
+                el.addClass('canfocused');
+                el.attr('tabindex', '0');
+                el.on((this.parentMenu && this.useBSKeydown) ? 'dataview:keydown' : 'keydown', _.bind(this.onKeyDown, this));
+            }
+        },
+
+        setDisabled: function(disabled) {
+            this.disabled = disabled;
+            $(this.el).find('.inner').addBack().filter('.inner').toggleClass('disabled', disabled);
+        },
+
+        isDisabled: function() {
+            return this.disabled;
+        },
+
+        alignPosition: function() {
+            var menuRoot = (this.parentMenu.cmpEl.attr('role') === 'menu')
+                    ? this.parentMenu.cmpEl
+                    : this.parentMenu.cmpEl.find('[role=menu]'),
+                docH = Common.Utils.innerHeight()-10,
+                innerEl = $(this.el).find('.inner').addBack().filter('.inner'),
+                parent = innerEl.parent(),
+                margins =  parseInt(parent.css('margin-top')) + parseInt(parent.css('margin-bottom')) + parseInt(menuRoot.css('margin-top')),
+                paddings = parseInt(menuRoot.css('padding-top')) + parseInt(menuRoot.css('padding-bottom')),
+                menuH = menuRoot.outerHeight(),
+                top = parseInt(menuRoot.css('top')),
+                props = {minScrollbarLength  : 40};
+            this.scrollAlwaysVisible && (props.alwaysVisibleY = this.scrollAlwaysVisible);
+
+            if (top + menuH > docH ) {
+                innerEl.css('max-height', (docH - top - paddings - margins) + 'px');
+                this.scroller.update(props);
+            } else if ( top + menuH < docH && innerEl.height() < this.options.restoreHeight ) {
+                innerEl.css('max-height', (Math.min(docH - top - paddings - margins, this.options.restoreHeight)) + 'px');
+                this.scroller.update(props);
+            }
+        },
+
+        fillIndexesArray: function() {
+            if (this.dataViewItems.length<=0) return;
+
+            this._layoutParams = {
+                itemsIndexes:   [],
+                columns:        0,
+                rows:           0
+            };
+
+            var el = this.dataViewItems[0].el,
+                itemW = el.outerWidth() + parseInt(el.css('margin-left')) + parseInt(el.css('margin-right')),
+                offsetLeft = this.$el.offset().left,
+                offsetTop = el.offset().top,
+                prevtop = -1, topIdx = 0, leftIdx = 0;
+
+            for (var i=0; i<this.dataViewItems.length; i++) {
+                var item = this.dataViewItems[i];
+                var top = item.el.offset().top - offsetTop;
+                leftIdx = Math.floor((item.el.offset().left - offsetLeft)/itemW);
+                if (top>prevtop) {
+                    prevtop = top;
+                    this._layoutParams.itemsIndexes.push([]);
+                    topIdx = this._layoutParams.itemsIndexes.length-1;
+                }
+                this._layoutParams.itemsIndexes[topIdx][leftIdx] = i;
+                item.topIdx = topIdx;
+                item.leftIdx = leftIdx;
+                if (this._layoutParams.columns<leftIdx) this._layoutParams.columns = leftIdx;
+            }
+            this._layoutParams.rows = this._layoutParams.itemsIndexes.length;
+            this._layoutParams.columns++;
+        },
+
+        onResize: function() {
+            this._layoutParams = undefined;
+        }
+    });
+
     $(document).on('keydown.dataview', '[data-toggle=dropdown], [role=menu]',  function(e) {
         if (e.keyCode !== Common.UI.Keys.UP && e.keyCode !== Common.UI.Keys.DOWN && e.keyCode !== Common.UI.Keys.LEFT && e.keyCode !== Common.UI.Keys.RIGHT && e.keyCode !== Common.UI.Keys.RETURN) return;
 

apps/common/main/lib/component/DimensionPicker.js

@@ -97,7 +97,7 @@ define([
 
                 me = this;
 
-                rootEl = $(this.el);
+                rootEl = me.$el || $(this.el);
 
                 me.itemSize    = me.options.itemSize;
                 me.minRows     = me.options.minRows;
@@ -133,7 +133,7 @@ define([
             },
 
             render: function() {
-                $(this.el).html(this.template());
+                (this.$el || $(this.el)).html(this.template());
 
                 return this;
             },

apps/common/main/lib/component/HSBColorPicker.js

@@ -82,7 +82,7 @@ define([
             Common.UI.BaseView.prototype.initialize.call(this, options);
 
             var me = this,
-                el = $(this.el),
+                el = me.$el || $(this.el),
                 arrowSatBrightness, arrowHue,
                 areaSatBrightness, areaHue,
                 previewColor, previewTransparentColor, previewColorText,
@@ -278,7 +278,7 @@ define([
         },
 
         render: function () {
-            $(this.el).html(this.template());
+            (this.$el || $(this.el)).html(this.template());
 
             this.trigger('render:after', this);
             return this;

apps/common/main/lib/component/InputField.js

@@ -94,8 +94,7 @@ define([
             initialize : function(options) {
                 Common.UI.BaseView.prototype.initialize.call(this, options);
 
-                var me = this,
+                var me = this;
-                    el = $(this.el);
 
                 this.id             = me.options.id || Common.UI.getId();
                 this.cls            = me.options.cls;
@@ -142,10 +141,10 @@ define([
                         this.setElement(parentEl, false);
                         parentEl.html(this.cmpEl);
                     } else {
-                        $(this.el).html(this.cmpEl);
+                        this.$el.html(this.cmpEl);
                     }
                 } else {
-                    this.cmpEl = $(this.el);
+                    this.cmpEl = this.$el;
                 }
 
                 if (!me.rendered) {

apps/common/main/lib/component/MaskedField.js

@@ -48,7 +48,7 @@ define([
             Common.UI.BaseView.prototype.initialize.call(this, options);
 
             var me = this,
-                el = $(this.el);
+                el = me.$el || $(this.el);
 
             el.addClass('masked-field user-select');
             el.attr('maxlength', me.options.maxLength);
@@ -75,11 +75,11 @@ define([
 
         setValue: function(value) {
             if (this.options.maskExp.test(value) && value.length<=this.options.maxLength)
-                $(this.el).val(value);
+                this.$el.val(value);
         },
 
         getValue: function() {
-            $(this.el).val();
+            this.$el.val();
         }
     });
 });

apps/common/main/lib/component/Menu.js

@@ -208,7 +208,7 @@ define([
 
                 this.trigger('render:before', this);
 
-                this.cmpEl = $(this.el);
+                this.cmpEl = me.$el || $(this.el);
 
                 if (parentEl) {
                     this.setElement(parentEl, false);
@@ -225,7 +225,7 @@ define([
                         this.cmpEl = this.template({
                             options : me.options
                         });
-                        $(this.el).append(this.cmpEl);
+                        this.$el.append(this.cmpEl);
                     }
                 }
 
@@ -246,7 +246,7 @@ define([
                     if (this.options.maxHeight) {
                         menuRoot.css({'max-height': me.options.maxHeight});
                         this.scroller = new Common.UI.Scroller({
-                            el: $(this.el).find('.dropdown-menu '),
+                            el: me.$el.find('.dropdown-menu '),
                             minScrollbarLength: 30,
                             suppressScrollX: true,
                             alwaysVisibleY: this.scrollAlwaysVisible
@@ -547,7 +547,7 @@ define([
                         if (top + menuH > docH) {
                             menuRoot.css('max-height', (docH - top) + 'px');
                             (!this.scroller) && (this.scroller = new Common.UI.Scroller({
-                                el: $(this.el).find('.dropdown-menu '),
+                                el: this.$el.find('.dropdown-menu '),
                                 minScrollbarLength: 30,
                                 suppressScrollX: true,
                                 alwaysVisibleY: this.scrollAlwaysVisible
@@ -588,4 +588,447 @@ define([
             })()
         })
     })();
+
+    Common.UI.MenuSimple = Common.UI.BaseView.extend({
+        options : {
+            cls         : '',
+            style       : '',
+            itemTemplate: null,
+            items       : [],
+            menuAlign   : 'tl-bl',
+            menuAlignEl : null,
+            offset      : [0, 0],
+            cyclic      : true,
+            search      : false,
+            scrollAlwaysVisible: true
+        },
+
+        template: _.template([
+            '<ul class="dropdown-menu <%= options.cls %>" oo_editor_input="true" style="<%= options.style %>" role="menu">',
+                '<% _.each(items, function(item) { %>',
+                    '<% if (!item.id) item.id = Common.UI.getId(); %>',
+                    '<% item.checked = item.checked || false;  %>',
+                    '<li><%= itemTemplate(item) %></li>',
+                '<% }) %>',
+            '</ul>'
+        ].join('')),
+
+        initialize : function(options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+
+            var me = this;
+
+            this.id             = this.options.id || Common.UI.getId();
+            this.itemTemplate   = this.options.itemTemplate || _.template([
+                                                                '<a id="<%= id %>" <% if(typeof style !== "undefined") { %> style="<%= style %>" <% } %>',
+                                                                    '<% if(typeof canFocused !== "undefined") { %> tabindex="-1" type="menuitem" <% } %>',
+                                                                    '<% if(typeof stopPropagation !== "undefined") { %> data-stopPropagation="true" <% } %>',
+                                                                    'class="<% if (checked) { %> checked <% } %>" >',
+                                                                    '<% if (typeof iconCls !== "undefined") { %>',
+                                                                        '<span class="menu-item-icon <%= iconCls %>"></span>',
+                                                                    '<% } %>',
+                                                                '<%= caption %>',
+                                                                '</a>'
+                                                            ].join(''));
+            this.rendered       = false;
+            this.items          = this.options.items || [];
+            this.offset         = [0, 0];
+            this.menuAlign      = this.options.menuAlign;
+            this.menuAlignEl    = this.options.menuAlignEl;
+            this.scrollAlwaysVisible = this.options.scrollAlwaysVisible;
+            this.search = this.options.search;
+
+            if (this.options.restoreHeight) {
+                this.options.restoreHeight = (typeof (this.options.restoreHeight) == "number") ? this.options.restoreHeight : (this.options.maxHeight ? this.options.maxHeight : 100000);
+                !this.options.maxHeight && (this.options.maxHeight = this.options.restoreHeight);
+            }
+
+            if (!this.options.cyclic) this.options.cls += ' no-cyclic';
+
+            if (this.options.el)
+                this.render();
+
+            Common.UI.Menu.Manager.register(this);
+        },
+
+        remove: function() {
+            Common.UI.Menu.Manager.unregister(this);
+            Common.UI.BaseView.prototype.remove.call(this);
+        },
+
+        render: function(parentEl) {
+            var me = this;
+
+            this.trigger('render:before', this);
+
+            this.cmpEl = me.$el || $(this.el);
+
+            parentEl && this.setElement(parentEl, false);
+
+            if (!me.rendered) {
+                this.cmpEl = $(this.template({
+                    items: me.items,
+                    itemTemplate: me.itemTemplate,
+                    options : me.options
+                }));
+
+                parentEl ? parentEl.append(this.cmpEl) : this.$el.append(this.cmpEl);
+            }
+
+            var rootEl = this.cmpEl.parent(),
+                menuRoot = (rootEl.attr('role') === 'menu') ? rootEl : rootEl.find('[role=menu]');
+            this.menuRoot = menuRoot;
+
+            if (menuRoot) {
+                if (!me.rendered) {
+                    menuRoot.on( "click", "li",       _.bind(me.onItemClick, me));
+                    menuRoot.on( "mousedown", "li",   _.bind(me.onItemMouseDown, me));
+                }
+
+                if (this.options.maxHeight) {
+                    menuRoot.css({'max-height': me.options.maxHeight});
+                    this.scroller = new Common.UI.Scroller({
+                        el: me.$el.find('.dropdown-menu '),
+                        minScrollbarLength: 30,
+                        suppressScrollX: true,
+                        alwaysVisibleY: this.scrollAlwaysVisible
+                    });
+                }
+
+                menuRoot.css({
+                    position    : 'fixed',
+                    right       : 'auto',
+                    left        : -1000,
+                    top         : -1000
+                });
+
+                this.parentEl = menuRoot.parent();
+
+                this.parentEl.on('show.bs.dropdown',    _.bind(me.onBeforeShowMenu, me));
+                this.parentEl.on('shown.bs.dropdown',   _.bind(me.onAfterShowMenu, me));
+                this.parentEl.on('hide.bs.dropdown',    _.bind(me.onBeforeHideMenu, me));
+                this.parentEl.on('hidden.bs.dropdown',  _.bind(me.onAfterHideMenu, me));
+                this.parentEl.on('keydown.after.bs.dropdown', _.bind(me.onAfterKeydownMenu, me));
+
+                menuRoot.hover(
+                    function(e) { me.isOver = true;},
+                    function(e) { me.isOver = false; }
+                );
+            }
+
+            this.rendered = true;
+
+            this.trigger('render:after', this);
+
+            return this;
+        },
+
+        resetItems: function(items) {
+            this.items = items || [];
+            this.$items = null;
+            var template = _.template([
+                                '<% _.each(items, function(item) { %>',
+                                    '<% if (!item.id) item.id = Common.UI.getId(); %>',
+                                    '<% item.checked = item.checked || false;  %>',
+                                    '<li><%= itemTemplate(item) %></li>',
+                                '<% }) %>'
+                            ].join(''));
+            this.cmpEl && this.cmpEl.html(template({
+                items: this.items,
+                itemTemplate: this.itemTemplate,
+                options : this.options
+            }));
+        },
+
+        isVisible: function() {
+            return this.rendered && (this.cmpEl.is(':visible'));
+        },
+
+        show: function() {
+            if (this.rendered && this.parentEl && !this.parentEl.hasClass('open')) {
+                this.cmpEl.dropdown('toggle');
+            }
+        },
+
+        hide: function() {
+            if (this.rendered && this.parentEl) {
+                if ( this.parentEl.hasClass('open') )
+                    this.cmpEl.dropdown('toggle');
+                else if (this.parentEl.hasClass('over'))
+                    this.parentEl.removeClass('over');
+            }
+        },
+
+        onItemClick: function(e) {
+            if (e.which != 1 && e.which !== undefined)
+                return false;
+
+            var index = $(e.currentTarget).closest('li').index(),
+                item = (index>=0) ? this.items[index] : null;
+            if (!item) return;
+
+            if (item.disabled)
+                return false;
+
+            if (item.checkable && !item.checked)
+                this.setChecked(index, !item.checked);
+
+            this.isOver = false;
+            if (item.stopPropagation) {
+                e.stopPropagation();
+                var me = this;
+                _.delay(function(){
+                    me.$el.parent().parent().find('[data-toggle=dropdown]').focus();
+                }, 10);
+                return;
+            }
+            this.trigger('item:click', this, item, e);
+        },
+
+        onItemMouseDown: function(e) {
+            if (e.which != 1) {
+                e.preventDefault();
+                e.stopPropagation();
+
+                return false;
+            }
+            e.stopPropagation();
+        },
+
+        setChecked: function(index, check, suppressEvent) {
+            this.toggle(index, check, suppressEvent);
+        },
+
+        toggle: function(index, toggle, suppressEvent) {
+            var state = !!toggle;
+            var item = this.items[index];
+
+            this.clearAll();
+
+            if (item && item.checkable) {
+                item.checked = state;
+
+                if (this.rendered) {
+                    var itemEl = item.el || this.cmpEl.find('#'+item.id);
+                    if (itemEl) {
+                        itemEl.toggleClass('checked', item.checked);
+                        if (!_.isEmpty(item.iconCls)) {
+                            itemEl.css('background-image', 'none');
+                        }
+                    }
+                }
+
+                if (!suppressEvent)
+                    this.trigger('item:toggle', this, item, state);
+            }
+        },
+
+        setDisabled: function(disabled) {
+            this.disabled = !!disabled;
+
+            if (this.rendered)
+                this.cmpEl.toggleClass('disabled', this.disabled);
+        },
+
+        isDisabled: function() {
+            return this.disabled;
+        },
+
+        onBeforeShowMenu: function(e) {
+            Common.NotificationCenter.trigger('menu:show');
+            this.trigger('show:before', this, e);
+            this.alignPosition();
+        },
+
+        onAfterShowMenu: function(e) {
+            this.trigger('show:after', this, e);
+            if (this.scroller) {
+                this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible});
+                var menuRoot = this.menuRoot,
+                    $selected = menuRoot.find('> li .checked');
+                if ($selected.length) {
+                    var itemTop = $selected.position().top,
+                        itemHeight = $selected.height(),
+                        listHeight = menuRoot.height();
+                    if (itemTop < 0 || itemTop + itemHeight > listHeight) {
+                        menuRoot.scrollTop(menuRoot.scrollTop() + itemTop + itemHeight - (listHeight/2));
+                    }
+                    setTimeout(function(){$selected.focus();}, 1);
+                }
+            }
+            this._search = {};
+            if (this.search && !this.$items) {
+                var me = this;
+                this.$items = this.menuRoot.find('> li').find('> a');
+                _.each(this.$items, function(item, index) {
+                    me.items[index].el = $(item);
+                });
+            }
+        },
+
+        onBeforeHideMenu: function(e) {
+            this.trigger('hide:before', this, e);
+
+            if (Common.UI.Scroller.isMouseCapture())
+                e.preventDefault();
+        },
+
+        onAfterHideMenu: function(e, isFromInputControl) {
+            this.trigger('hide:after', this, e, isFromInputControl);
+            Common.NotificationCenter.trigger('menu:hide', this, isFromInputControl);
+        },
+
+        onAfterKeydownMenu: function(e) {
+            if (e.keyCode == Common.UI.Keys.RETURN) {
+                var li = $(e.target).closest('li');
+                if (li.length<=0) li = $(e.target).parent().find('li .dataview');
+                if (li.length>0) li.click();
+                if (!li.hasClass('dropdown-submenu'))
+                    Common.UI.Menu.Manager.hideAll();
+                if ( $(e.currentTarget).closest('li').hasClass('dropdown-submenu')) {
+                    e.stopPropagation();
+                    return false;
+                }
+            } else if (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN)  {
+                this.fromKeyDown = true;
+            } else if (e.keyCode == Common.UI.Keys.ESC)  {
+//                    Common.NotificationCenter.trigger('menu:afterkeydown', e);
+//                    return false;
+            } else if (this.search && e.keyCode > 64 && e.keyCode < 91 && e.key){
+                var me = this;
+                clearTimeout(this._search.timer);
+                this._search.timer = setTimeout(function () { me._search = {}; }, 1000);
+
+                (!this._search.text) && (this._search.text = '');
+                (!this._search.char) && (this._search.char = e.key);
+                (this._search.char !== e.key) && (this._search.full = true);
+                this._search.text += e.key;
+                if (this._search.index===undefined) {
+                    this._search.index = this.$items.index(this.$items.filter(':focus'));
+                }
+                this.selectCandidate();
+            }
+        },
+
+        selectCandidate: function() {
+            var index = this._search.index || 0,
+                re = new RegExp('^' + ((this._search.full) ? this._search.text : this._search.char), 'i'),
+                itemCandidate, idxCandidate;
+
+            for (var i=0; i<this.items.length; i++) {
+                var item = this.items[i];
+                if (re.test(item.caption)) {
+                    if (!itemCandidate) {
+                        itemCandidate = item;
+                        idxCandidate = i;
+                    }
+                    if (this._search.full && i==index || i>index) {
+                        itemCandidate = item;
+                        idxCandidate = i;
+                        break;
+                    }
+                }
+            }
+
+            if (itemCandidate) {
+                this._search.index = idxCandidate;
+                var item = itemCandidate.el;
+                if (this.scroller) {
+                    this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible});
+                    var itemTop = item.position().top,
+                        itemHeight = item.height(),
+                        listHeight = this.menuRoot.height();
+                    if (itemTop < 0 || itemTop + itemHeight > listHeight) {
+                        this.menuRoot.scrollTop(this.menuRoot.scrollTop() + itemTop + itemHeight - (listHeight/2));
+                    }
+                }
+                item.focus();
+            }
+        },
+
+        setOffset: function(offsetX, offsetY) {
+            this.offset[0] = _.isUndefined(offsetX) ? this.offset[0] : offsetX;
+            this.offset[1] = _.isUndefined(offsetY) ? this.offset[1] : offsetY;
+            this.alignPosition();
+        },
+
+        getOffset: function() {
+            return this.offset;
+        },
+
+        alignPosition: function(fixedAlign, fixedOffset) {
+            var menuRoot = this.menuRoot,
+                menuParent  = this.menuAlignEl || menuRoot.parent(),
+                m           = this.menuAlign.match(/^([a-z]+)-([a-z]+)/),
+                offset      = menuParent.offset(),
+                docW        = Common.Utils.innerWidth(),
+                docH        = Common.Utils.innerHeight() - 10, // Yep, it's magic number
+                menuW       = menuRoot.outerWidth(),
+                menuH       = menuRoot.outerHeight(),
+                parentW     = menuParent.outerWidth(),
+                parentH     = menuParent.outerHeight();
+
+            var posMenu = {
+                'tl': [0, 0],
+                'bl': [0, menuH],
+                'tr': [menuW, 0],
+                'br': [menuW, menuH]
+            };
+            var posParent = {
+                'tl': [0, 0],
+                'tr': [parentW, 0],
+                'bl': [0, parentH],
+                'br': [parentW, parentH]
+            };
+            var left = offset.left - posMenu[m[1]][0] + posParent[m[2]][0] + this.offset[0];
+            var top  = offset.top  - posMenu[m[1]][1] + posParent[m[2]][1] + this.offset[1];
+
+            if (left + menuW > docW)
+                if (menuParent.is('li.dropdown-submenu')) {
+                    left = offset.left - menuW + 2;
+                } else {
+                    left = docW - menuW;
+                }
+
+            if (this.options.restoreHeight) {
+                if (typeof (this.options.restoreHeight) == "number") {
+                    if (top + menuH > docH) {
+                        menuRoot.css('max-height', (docH - top) + 'px');
+                        (!this.scroller) && (this.scroller = new Common.UI.Scroller({
+                            el: this.$el.find('.dropdown-menu '),
+                            minScrollbarLength: 30,
+                            suppressScrollX: true,
+                            alwaysVisibleY: this.scrollAlwaysVisible
+                        }));
+                    } else if ( top + menuH < docH && menuRoot.height() < this.options.restoreHeight) {
+                        menuRoot.css('max-height', (Math.min(docH - top, this.options.restoreHeight)) + 'px');
+                    }
+                }
+            } else {
+                if (top + menuH > docH) {
+                    if (fixedAlign && typeof fixedAlign == 'string') { // how to align if menu height > window height
+                        m = fixedAlign.match(/^([a-z]+)-([a-z]+)/);
+                        top  = offset.top  - posMenu[m[1]][1] + posParent[m[2]][1] + this.offset[1] + (fixedOffset || 0);
+                    } else
+                        top = docH - menuH;
+                }
+
+                if (top < 0)
+                    top = 0;
+            }
+
+            if (this.options.additionalAlign)
+                this.options.additionalAlign.call(this, menuRoot, left, top);
+            else
+                menuRoot.css({left: Math.ceil(left), top: Math.ceil(top)});
+        },
+
+        clearAll: function() {
+            this.cmpEl && this.cmpEl.find('li > a.checked').removeClass('checked');
+            _.each(this.items, function(item){
+                item.checked = false;
+            });
+        }
+    });
+
 });

apps/common/main/lib/component/MenuItem.js

@@ -119,8 +119,7 @@ define([
         initialize : function(options) {
             Common.UI.BaseView.prototype.initialize.call(this, options);
 
-            var me = this,
+            var me = this;
-                el = $(this.el);
 
             this.id             = me.options.id || Common.UI.getId();
             this.cls            = me.options.cls;
@@ -138,7 +137,7 @@ define([
             this.hint           = me.options.hint;
             this.rendered       = false;
 
-            if (this.menu !== null && !(this.menu instanceof Common.UI.Menu)) {
+            if (this.menu !== null && !(this.menu instanceof Common.UI.Menu) && !(this.menu instanceof Common.UI.MenuSimple)) {
                 this.menu = new Common.UI.Menu(_.extend({}, me.options.menu));
             }
 
@@ -148,7 +147,7 @@ define([
 
         render: function() {
             var me = this,
-                el = $(this.el);
+                el = me.$el || $(this.el);
 
             me.trigger('render:before', me);
 
@@ -159,7 +158,7 @@ define([
                     el.off('click');
                     Common.UI.ToggleManager.unregister(me);
 
-                    $(this.el).html(this.template({
+                    el.html(this.template({
                         id      : me.id,
                         caption : me.caption,
                         iconCls : me.iconCls,
@@ -170,7 +169,7 @@ define([
                     if (me.menu) {
                         el.addClass('dropdown-submenu');
 
-                        me.menu.render($(this.el));
+                        me.menu.render(el);
                         el.mouseenter(_.bind(me.menu.alignPosition, me.menu));
 //                        el.focusin(_.bind(me.onFocusItem, me));
                         el.focusout(_.bind(me.onBlurItem, me));
@@ -214,7 +213,7 @@ define([
                     }
 
                     if (this.disabled)
-                        $(this.el).toggleClass('disabled', this.disabled);
+                        el.toggleClass('disabled', this.disabled);
 
                     el.on('click',      _.bind(this.onItemClick, this));
                     el.on('mousedown',  _.bind(this.onItemMouseDown, this));
@@ -223,7 +222,7 @@ define([
                 }
             }
 
-            me.cmpEl = $(this.el);
+            me.cmpEl = el;
             me.rendered = true;
 
             me.trigger('render:after', me);

apps/common/main/lib/component/MetricSpinner.js

@@ -128,7 +128,7 @@ define([
             Common.UI.BaseView.prototype.initialize.call(this, options);
 
             var me = this,
-                el = $(this.el);
+                el = me.$el || $(this.el);
 
             el.addClass('spinner');
 
@@ -165,7 +165,7 @@ define([
             this.setRawValue(this.value);
 
             if (this.options.width) {
-                $(this.el).width(this.options.width);
+                el.width(this.options.width);
             }
 
             if (this.options.defaultValue===undefined)
@@ -176,7 +176,7 @@ define([
         },
 
         render: function () {
-            var el = $(this.el);
+            var el = this.$el || $(this.el);
             el.html(this.template);
 
             this.$input = el.find('.form-control');
@@ -189,7 +189,7 @@ define([
         },
 
         setDisabled: function(disabled) {
-            var el = $(this.el);
+            var el = this.$el || $(this.el);
             if (disabled !== this.disabled) {
                 el.find('button').toggleClass('disabled', disabled);
                 el.toggleClass('disabled', disabled);

apps/common/main/lib/component/RadioBox.js

@@ -76,8 +76,7 @@ define([
         initialize : function(options) {
             Common.UI.BaseView.prototype.initialize.call(this, options);
 
-            var me = this,
+            var me = this;
-                el = $(this.el);
 
             this.name =  this.options.name || Common.UI.getId();
 
@@ -94,7 +93,7 @@ define([
         },
 
         render: function () {
-            var el = $(this.el);
+            var el = this.$el || $(this.el);
             el.html(this.template({
                 labelText: this.options.labelText,
                 name: this.name

apps/common/main/lib/component/Scroller.js

@@ -78,7 +78,7 @@ define([
             render: function() {
                 var me = this;
 
-                me.cmpEl = $(this.el);
+                me.cmpEl = me.$el || $(this.el);
 
                 if (!me.rendered) {
                     me.cmpEl.perfectScrollbar(_.extend({}, me.options));

apps/common/main/lib/component/Slider.js

@@ -104,8 +104,7 @@ define([
         initialize : function(options) {
             Common.UI.BaseView.prototype.initialize.call(this, options);
 
-            var me = this,
+            var me = this;
-                el = $(this.el);
 
             me.width = me.options.width;
             me.minValue = me.options.minValue;
@@ -131,10 +130,10 @@ define([
                     this.setElement(parentEl, false);
                     parentEl.html(this.cmpEl);
                 } else {
-                    $(this.el).html(this.cmpEl);
+                    me.$el.html(this.cmpEl);
                 }
             } else {
-                this.cmpEl = $(this.el);
+                this.cmpEl = me.$el;
             }
 
             this.cmpEl.find('.track-center').width(me.options.width - 14);
@@ -299,8 +298,7 @@ define([
         initialize : function(options) {
             Common.UI.BaseView.prototype.initialize.call(this, options);
 
-            var me = this,
+            var me = this;
-                el = $(this.el);
 
             me.width = me.options.width;
             me.minValue = me.options.minValue;
@@ -326,10 +324,10 @@ define([
                     this.setElement(parentEl, false);
                     parentEl.html(this.cmpEl);
                 } else {
-                    $(this.el).html(this.cmpEl);
+                    this.$el.html(this.cmpEl);
                 }
             } else {
-                this.cmpEl = $(this.el);
+                this.cmpEl = this.$el;
             }
 
             var el = this.cmpEl;

apps/common/main/lib/component/Switcher.js

@@ -65,8 +65,7 @@ define([
         initialize : function(options) {
             Common.UI.BaseView.prototype.initialize.call(this, options);
 
-            var me = this,
+            var me = this;
-                el = $(this.el);
 
             me.width = me.options.width;
             me.thumbWidth = me.options.thumbWidth;
@@ -89,10 +88,10 @@ define([
                     this.setElement(parentEl, false);
                     parentEl.html(this.cmpEl);
                 } else {
-                    $(this.el).html(this.cmpEl);
+                    this.$el.html(this.cmpEl);
                 }
             } else {
-                this.cmpEl = $(this.el);
+                this.cmpEl = this.$el;
             }
 
             this.thumb = this.cmpEl.find('.thumb');

apps/common/main/lib/component/TableStyler.js

@@ -335,10 +335,10 @@ define([
                     this.setElement(parentEl, false);
                     parentEl.html(this.cmpEl);
                 } else {
-                    $(this.el).html(this.cmpEl);
+                    this.$el.html(this.cmpEl);
                 }
             } else {
-                this.cmpEl = $(this.el);
+                this.cmpEl = this.$el;
             }
 
             me.rendered = true;

apps/common/main/lib/component/ThemeColorPalette.js

@@ -98,7 +98,7 @@ define([
             Common.UI.BaseView.prototype.initialize.call(this, options);
 
             var me = this,
-                el = $(this.el);
+                el = me.$el || $(this.el);
 
             this.colors = me.options.colors || this.generateColorData(me.options.themecolors, me.options.effects, me.options.standardcolors, me.options.transparent);
 
@@ -116,7 +116,7 @@ define([
         },
 
         render: function () {
-            $(this.el).html(this.template({colors: this.colors}));
+            this.$el.html(this.template({colors: this.colors}));
             return this;
         },
 
@@ -144,7 +144,7 @@ define([
         },
 
         updateCustomColors: function() {
-            var el = $(this.el);
+            var el = this.$el || $(this.el);
             if (el) {
                 var selected = el.find('a.' + this.selectedCls),
                     color = (selected.length>0 && /color-dynamic/.test(selected[0].className)) ? selected.attr('color') : undefined;
@@ -221,7 +221,7 @@ define([
         },
 
         setCustomColor: function(color) {
-            var el = $(this.el);
+            var el = this.$el || $(this.el);
             color = /#?([a-fA-F0-9]{6})/.exec(color);
             if (color) {
                 this.saveCustomColor(color[1]);
@@ -272,7 +272,7 @@ define([
         },
 
         select: function(color, suppressEvent) {
-            var el = $(this.el);
+            var el = this.$el || $(this.el);
             el.find('a.' + this.selectedCls).removeClass(this.selectedCls);
 
             if (typeof(color) == 'object' ) {
@@ -321,7 +321,7 @@ define([
         },
 
         selectByRGB: function(rgb, suppressEvent) {
-            var el = $(this.el);
+            var el = this.$el || $(this.el);
             el.find('a.' + this.selectedCls).removeClass(this.selectedCls);
 
             var color = (typeof(rgb) == 'object') ? rgb.color : rgb;
@@ -351,7 +351,7 @@ define([
             if (effectcolors===undefined || standartcolors===undefined) return;
 
             var me = this,
-                el = $(this.el);
+                el = me.$el || $(this.el);
 
             if (me.aColorElements === undefined) {
                 me.aColorElements = el.find('a.palette-color');
@@ -407,7 +407,7 @@ define([
             if (value)
                 this.select(value, true);
             else {
-                var selected = $(this.el).find('a.' + this.selectedCls);
+                var selected = el.find('a.' + this.selectedCls);
                 if (selected.length && selected.hasClass('palette-color-effect')) {
                     this.value = selected[0].className.match(this.colorRe)[1].toUpperCase();
                 }
@@ -416,7 +416,7 @@ define([
         },
 
         clearSelection: function(suppressEvent) {
-            $(this.el).find('a.' + this.selectedCls).removeClass(this.selectedCls);
+            this.$el.find('a.' + this.selectedCls).removeClass(this.selectedCls);
             this.value = undefined;
         },
 

apps/common/main/lib/component/TreeView.js

@@ -193,7 +193,7 @@ define([
                 });
 
                 if (view) {
-                    var innerEl = $(this.el).find('.inner').addBack().filter('.inner');
+                    var innerEl = (this.$el || $(this.el)).find('.inner').addBack().filter('.inner');
                     if (innerEl) {
                         (this.dataViewItems.length<1) && innerEl.find('.empty-text').remove();
 

apps/common/main/lib/controller/Plugins.js

@@ -172,7 +172,7 @@ define([
         },
 
         onAfterRender: function(panelPlugins) {
-            panelPlugins.viewPluginsList.on('item:click', _.bind(this.onSelectPlugin, this));
+            panelPlugins.viewPluginsList && panelPlugins.viewPluginsList.on('item:click', _.bind(this.onSelectPlugin, this));
             this.bindViewEvents(this.panelPlugins, this.events);
             var me = this;
             Common.NotificationCenter.on({

apps/common/main/lib/controller/ReviewChanges.js

@@ -618,7 +618,7 @@ define([
                 comments.setPreviewMode(disable);
 
             var leftMenu = app.getController('LeftMenu');
-            leftMenu.leftMenu.getMenu('file').miProtect.setDisabled(disable);
+            leftMenu.leftMenu.getMenu('file').getButton('protect').setDisabled(disable);
             leftMenu.setPreviewMode(disable);
 
             if (this.view) {

apps/common/main/lib/util/utils.js

@@ -846,6 +846,47 @@ Common.Utils.injectComponent = function ($slot, cmp) {
     }
 };
 
+jQuery.fn.extend({
+    elementById: function (id, parent) {
+        /**
+         * usage:   $obj.findById('#id')
+         *          $().findById('#id', $obj | node)
+         *          $.fn.findById('#id', $obj | node)
+         *
+         * return:  dom element
+         * */
+        var _el = document.getElementById(id.substring(1));
+        if ( !_el ) {
+            parent = parent || this;
+            if ( parent instanceof jQuery ) {
+                parent.each(function (i, node) {
+                    _el = node.querySelectorAll(id);
+                    if ( _el.length == 0 ) {
+                        if ( ('#' + node.id) == id ) {
+                            _el = node;
+                            return false;
+                        }
+                    } else
+                    if ( _el.length ) {
+                        _el = _el[0];
+                        return false;
+                    }
+                })
+            } else {
+                _el = parent.querySelectorAll(id);
+                if ( _el && _el.length ) return _el[0];
+            }
+        }
+
+        return _el;
+    },
+
+    findById: function (id, parent) {
+        var _el = $.fn.elementById.apply(this, arguments);
+        return !!_el ? $(_el) : $();
+    }
+});
+
 Common.Utils.InternalSettings.set('toolbar-height-tabs', 32);
 Common.Utils.InternalSettings.set('toolbar-height-tabs-top-title', 28);
 Common.Utils.InternalSettings.set('toolbar-height-controls', 67);

apps/common/main/lib/view/About.js

@@ -45,6 +45,7 @@ define([
 
     Common.Views.About = Common.UI.BaseView.extend(_.extend({
         menu: undefined,
+        rendered: false,
         options: {
             alias: 'Common.Views.About'
         },
@@ -152,81 +153,95 @@ define([
         },
 
         render: function() {
-            var el = $(this.el);
+            if ( !this.rendered ) {
-            el.html(this.template({
+                this.rendered = true;
-                publishername: '{{PUBLISHER_NAME}}',
-                publisheraddr: '{{PUBLISHER_ADDRESS}}',
-                publisherurl: '{{PUBLISHER_URL}}',
-                supportemail: '{{SUPPORT_EMAIL}}',
-                phonenum: '{{PUBLISHER_PHONE}}',
-                scope: this
-            }));
 
-            el.addClass('about-dlg');
+                var _$l = $(this.template({
-            this.cntLicenseeInfo = $('#id-about-licensee-info');
+                    publishername: '{{PUBLISHER_NAME}}',
-            this.cntLicensorInfo = $('#id-about-licensor-info');
+                    publisheraddr: '{{PUBLISHER_ADDRESS}}',
-            this.divCompanyLogo = $('#id-about-company-logo');
+                    publisherurl: '{{PUBLISHER_URL}}',
-            this.lblCompanyName = $('#id-about-company-name');
+                    supportemail: '{{SUPPORT_EMAIL}}',
-            this.lblCompanyAddress = $('#id-about-company-address');
+                    phonenum: '{{PUBLISHER_PHONE}}',
-            this.lblCompanyMail = $('#id-about-company-mail');
+                    scope: this
-            this.lblCompanyUrl = $('#id-about-company-url');
+                }));
-            this.lblCompanyLic = $('#id-about-company-lic');
 
-            if (_.isUndefined(this.scroller)) {
+                this.cntLicenseeInfo = _$l.findById('#id-about-licensee-info');
-                this.scroller = new Common.UI.Scroller({
+                this.cntLicensorInfo = _$l.findById('#id-about-licensor-info');
-                    el: $(this.el),
+                this.divCompanyLogo = _$l.findById('#id-about-company-logo');
-                    suppressScrollX: true
+                this.lblCompanyName = _$l.findById('#id-about-company-name');
-                });
+                this.lblCompanyAddress = _$l.findById('#id-about-company-address');
+                this.lblCompanyMail = _$l.findById('#id-about-company-mail');
+                this.lblCompanyUrl = _$l.findById('#id-about-company-url');
+                this.lblCompanyLic = _$l.findById('#id-about-company-lic');
+
+                if ( this.licData )
+                    this.setLicInfo(this.licData);
+
+                this.$el.html(_$l);
+                this.$el.addClass('about-dlg');
+
+                if (_.isUndefined(this.scroller)) {
+                    this.scroller = new Common.UI.Scroller({
+                        el: this.$el,
+                        suppressScrollX: true
+                    });
+                }
             }
 
             return this;
         },
 
         setLicInfo: function(data){
-            if (data && typeof data == 'object' && typeof(data.customer)=='object') {
+            if ( !this.rendered ) {
-                var customer = data.customer;
+                this.licData = data || true;
-                
+            } else {
-                $('#id-about-licensor-logo').addClass('hidden');
+                if (data && typeof data == 'object' && typeof(data.customer)=='object') {
-                $('#id-about-licensor-short').removeClass('hidden');
+                    var customer = data.customer;
-                this.cntLicensorInfo.addClass('hidden');
 
-                this.cntLicenseeInfo.removeClass('hidden');
+                    $('#id-about-licensor-logo').addClass('hidden');
-                this.cntLicensorInfo.removeClass('margin-bottom');
+                    $('#id-about-licensor-short').removeClass('hidden');
+                    this.cntLicensorInfo.addClass('hidden');
 
-                var value = customer.name;
+                    this.cntLicenseeInfo.removeClass('hidden');
-                value && value.length ?
+                    this.cntLicensorInfo.removeClass('margin-bottom');
+
+                    var value = customer.name;
+                    value && value.length ?
                         this.lblCompanyName.text(value) :
                         this.lblCompanyName.parents('tr').addClass('hidden');
 
-                value = customer.address;
+                    value = customer.address;
-                value && value.length ?
+                    value && value.length ?
                         this.lblCompanyAddress.text(value) :
                         this.lblCompanyAddress.parents('tr').addClass('hidden');
 
-                (value = customer.mail) && value.length ?
+                    (value = customer.mail) && value.length ?
                         this.lblCompanyMail.attr('href', "mailto:"+value).text(value) :
                         this.lblCompanyMail.parents('tr').addClass('hidden');
 
-                if ((value = customer.www) && value.length) {
+                    if ((value = customer.www) && value.length) {
-                    var http = !/^https?:\/{2}/i.test(value) ? "http:\/\/" : '';
+                        var http = !/^https?:\/{2}/i.test(value) ? "http:\/\/" : '';
-                    this.lblCompanyUrl.attr('href', http+value).text(value);
+                        this.lblCompanyUrl.attr('href', http+value).text(value);
-                } else
+                    } else
-                    this.lblCompanyUrl.parents('tr').addClass('hidden');
+                        this.lblCompanyUrl.parents('tr').addClass('hidden');
 
-                (value = customer.info) && value.length ?
+                    (value = customer.info) && value.length ?
                         this.lblCompanyLic.text(value) :
                         this.lblCompanyLic.parents('tr').addClass('hidden');
 
-                (value = customer.logo) && value.length ?
+                    (value = customer.logo) && value.length ?
                         this.divCompanyLogo.html('<img src="'+value+'" style="max-width:216px; max-height: 35px;" />') :
                         this.divCompanyLogo.parents('tr').addClass('hidden');
-            } else {
+                } else {
-                this.cntLicenseeInfo.addClass('hidden');
+                    this.cntLicenseeInfo.addClass('hidden');
-                this.cntLicensorInfo.addClass('margin-bottom');
+                    this.cntLicensorInfo.addClass('margin-bottom');
+                }
             }
         },
 
         show: function () {
+            if ( !this.rendered ) this.render();
+
             Common.UI.BaseView.prototype.show.call(this,arguments);
             this.fireEvent('show', this );
         },

apps/common/main/lib/view/Comments.js

@@ -72,6 +72,99 @@ define([
         return tpl;
     }
 
+    var CommentsPanelDataView = Common.UI.DataView.extend((function() {
+        return {
+            options : {
+                handleSelect: false,
+                scrollable: true,
+                listenStoreEvents: false,
+                template: _.template('<div class="dataview-ct inner"></div>')
+            },
+
+            getTextBox: function () {
+                var text = $(this.el).find('textarea');
+                return (text && text.length) ? text : undefined;
+            },
+            setFocusToTextBox: function () {
+                var text = $(this.el).find('textarea');
+                if (text && text.length) {
+                    var val = text.val();
+                    text.focus();
+                    text.val('');
+                    text.val(val);
+                }
+            },
+            getActiveTextBoxVal: function () {
+                var text = $(this.el).find('textarea');
+                return (text && text.length) ? text.val().trim() : '';
+            },
+            autoHeightTextBox: function () {
+                var view = this,
+                    textBox = $(this.el).find('textarea'),
+                    domTextBox = null,
+                    minHeight = 50,
+                    lineHeight = 0,
+                    scrollPos = 0,
+                    oldHeight = 0,
+                    newHeight = 0;
+
+                function updateTextBoxHeight() {
+                    if (domTextBox.scrollHeight > domTextBox.clientHeight) {
+                        textBox.css({height: (domTextBox.scrollHeight + lineHeight) + 'px'});
+                    } else {
+                        oldHeight = domTextBox.clientHeight;
+                        if (oldHeight >= minHeight) {
+
+                            textBox.css({height: minHeight + 'px'});
+
+                            if (domTextBox.scrollHeight > domTextBox.clientHeight) {
+                                newHeight = Math.max(domTextBox.scrollHeight + lineHeight, minHeight);
+                                textBox.css({height: newHeight + 'px'});
+                            }
+                        }
+                    }
+
+                    view.autoScrollToEditButtons();
+                }
+
+                if (textBox && textBox.length) {
+                    domTextBox = textBox.get(0);
+
+                    if (domTextBox) {
+                        lineHeight = parseInt(textBox.css('lineHeight'), 10) * 0.25;
+                        updateTextBoxHeight();
+                        textBox.bind('input propertychange', updateTextBoxHeight)
+                    }
+                }
+
+                this.textBox = textBox;
+            },
+            clearTextBoxBind: function () {
+                if (this.textBox) {
+                    this.textBox.unbind('input propertychange');
+                    this.textBox = undefined;
+                }
+            },
+            autoScrollToEditButtons: function () {
+                var button = $('#id-comments-change'),  // TODO: add to cache
+                    btnBounds = null,
+                    contentBounds = this.el.getBoundingClientRect(),
+                    moveY = 0,
+                    padding = 7;
+
+                if (button.length) {
+                    btnBounds = button.get(0).getBoundingClientRect();
+                    if (btnBounds && contentBounds) {
+                        moveY = contentBounds.bottom - (btnBounds.bottom + padding);
+                        if (moveY < 0) {
+                            this.scroller.scrollTop(this.scroller.getScrollTop() - moveY);
+                        }
+                    }
+                }
+            }
+        }
+    })());
+
     Common.Views.Comments = Common.UI.BaseView.extend(_.extend({
         el: '#left-panel-comments',
         template: _.template(panelTemplate),
@@ -81,11 +174,126 @@ define([
         textBoxAutoSizeLocked: undefined, // disable autosize textbox
         viewmode: false,
 
+        _commentsViewOnItemClick: function (picker, item, record, e) {
+            var me = this;
+            var btn, showEditBox, showReplyBox, commentId, replyId, hideAddReply;
+
+            function readdresolves() {
+                me.update();
+            }
+
+            btn = $(e.target);
+            if (btn) {
+                showEditBox = record.get('editText');
+                showReplyBox = record.get('showReply');
+                commentId = record.get('uid');
+                replyId =  btn.attr('data-value');
+
+                if (btn.hasClass('btn-edit')) {
+                    if (!_.isUndefined(replyId)) {
+                        me.fireEvent('comment:closeEditing', [commentId]);
+                        me.fireEvent('comment:editReply', [commentId, replyId]);
+
+                        me.commentsView.reply = replyId;
+
+                        this.autoHeightTextBox();
+
+                        readdresolves();
+
+                        me.hookTextBox();
+
+                        this.autoScrollToEditButtons();
+                        this.setFocusToTextBox();
+                    } else {
+
+                        if (!showEditBox) {
+                            me.fireEvent('comment:closeEditing');
+                            record.set('editText', true);
+
+                            this.autoHeightTextBox();
+                            readdresolves();
+                            this.setFocusToTextBox();
+                            me.hookTextBox();
+                        }
+                    }
+                } else if (btn.hasClass('btn-delete')) {
+                    if (!_.isUndefined(replyId)) {
+                        me.fireEvent('comment:removeReply', [commentId, replyId]);
+                    } else {
+                        me.fireEvent('comment:remove', [commentId]);
+                        Common.NotificationCenter.trigger('edit:complete', me);
+                    }
+
+                    me.fireEvent('comment:closeEditing');
+                    readdresolves();
+                } else if (btn.hasClass('user-reply')) {
+                    me.fireEvent('comment:closeEditing');
+                    record.set('showReply', true);
+
+                    readdresolves();
+
+                    this.autoHeightTextBox();
+                    me.hookTextBox();
+
+                    this.autoScrollToEditButtons();
+                    this.setFocusToTextBox();
+                } else if (btn.hasClass('btn-reply', false)) {
+                    if (showReplyBox) {
+                        me.fireEvent('comment:addReply', [commentId, this.getActiveTextBoxVal()]);
+                        me.fireEvent('comment:closeEditing');
+
+                        readdresolves();
+                    }
+                } else if (btn.hasClass('btn-close', false)) {
+
+                    me.fireEvent('comment:closeEditing', [commentId]);
+
+                } else if (btn.hasClass('btn-inner-edit', false)) {
+                    if (!_.isUndefined(me.commentsView.reply)) {
+                        me.fireEvent('comment:changeReply', [commentId, me.commentsView.reply, this.getActiveTextBoxVal()]);
+                        me.commentsView.reply = undefined;
+                    } else if (showEditBox) {
+                        me.fireEvent('comment:change', [commentId, this.getActiveTextBoxVal()]);
+                    }
+
+                    me.fireEvent('comment:closeEditing');
+
+                    readdresolves();
+
+                } else if (btn.hasClass('btn-inner-close', false)) {
+                    me.fireEvent('comment:closeEditing');
+
+                    me.commentsView.reply = undefined;
+
+                    readdresolves();
+                } else if (btn.hasClass('btn-resolve', false)) {
+                    var tip = btn.data('bs.tooltip');
+                    if (tip) tip.dontShow = true;
+
+                    me.fireEvent('comment:resolve', [commentId]);
+
+                    readdresolves();
+                } else if (btn.hasClass('btn-resolve-check', false)) {
+                    var tip = btn.data('bs.tooltip');
+                    if (tip) tip.dontShow = true;
+
+                    me.fireEvent('comment:resolve', [commentId]);
+
+                    readdresolves();
+                } else if (!btn.hasClass('msg-reply') &&
+                    !btn.hasClass('btn-resolve-check') &&
+                    !btn.hasClass('btn-resolve')) {
+                    me.fireEvent('comment:show', [commentId, false]);
+                }
+            }
+        },
+
         initialize: function (options) {
             Common.UI.BaseView.prototype.initialize.call(this, options);
 
             this.store = this.options.store;
         },
+
         render: function () {
             var me = this;
 
@@ -134,255 +342,51 @@ define([
                     }
                 });
             }
-            var CommentsPanelDataView = Common.UI.DataView.extend((function() {
 
-                return {
+            if (this.commentsView) {
+                this.commentsView.onResetItems();
+            } else {
+                this.commentsView = new CommentsPanelDataView({
+                    el: $('.messages-ct',me.el),
+                    store: me.store,
+                    itemTemplate: _.template(replaceWords(commentsTemplate, {
+                        textAddReply: me.textAddReply,
+                        textAdd: me.textAdd,
+                        textCancel: me.textCancel,
+                        textEdit: me.textEdit,
+                        textReply: me.textReply,
+                        textClose: me.textClose,
+                        maxCommLength: Asc.c_oAscMaxCellOrCommentLength
+                    }))
+                });
 
-                    options : {
+                var addtooltip = function (dataview, view, record) {
-                        handleSelect: false,
+                    if (view.tipsArray) {
-                        scrollable: true,
+                        view.tipsArray.forEach(function(item){
-                        listenStoreEvents: false,
+                            item.remove();
-                        template: _.template('<div class="dataview-ct inner"></div>')
+                        });
-                    },
-
-                    getTextBox: function () {
-                        var text = $(this.el).find('textarea');
-                        return (text && text.length) ? text : undefined;
-                    },
-                    setFocusToTextBox: function () {
-                        var text = $(this.el).find('textarea');
-                        if (text && text.length) {
-                            var val = text.val();
-                            text.focus();
-                            text.val('');
-                            text.val(val);
-                        }
-                    },
-                    getActiveTextBoxVal: function () {
-                        var text = $(this.el).find('textarea');
-                        return (text && text.length) ? text.val().trim() : '';
-                    },
-                    autoHeightTextBox: function () {
-                        var view = this,
-                            textBox = $(this.el).find('textarea'),
-                            domTextBox = null,
-                            minHeight = 50,
-                            lineHeight = 0,
-                            scrollPos = 0,
-                            oldHeight = 0,
-                            newHeight = 0;
-
-                        function updateTextBoxHeight() {
-                            if (domTextBox.scrollHeight > domTextBox.clientHeight) {
-                                textBox.css({height: (domTextBox.scrollHeight + lineHeight) + 'px'});
-                            } else {
-                                oldHeight = domTextBox.clientHeight;
-                                if (oldHeight >= minHeight) {
-
-                                    textBox.css({height: minHeight + 'px'});
-
-                                    if (domTextBox.scrollHeight > domTextBox.clientHeight) {
-                                        newHeight = Math.max(domTextBox.scrollHeight + lineHeight, minHeight);
-                                        textBox.css({height: newHeight + 'px'});
-                                    }
-                                }
-                            }
-
-                            view.autoScrollToEditButtons();
-                        }
-
-                        if (textBox && textBox.length) {
-                            domTextBox = textBox.get(0);
-
-                            if (domTextBox) {
-                                lineHeight = parseInt(textBox.css('lineHeight'), 10) * 0.25;
-                                updateTextBoxHeight();
-                                textBox.bind('input propertychange', updateTextBoxHeight)
-                            }
-                        }
-
-                        this.textBox = textBox;
-                    },
-                    clearTextBoxBind: function () {
-                        if (this.textBox) {
-                            this.textBox.unbind('input propertychange');
-                            this.textBox = undefined;
-                        }
-                    },
-                    autoScrollToEditButtons: function () {
-                        var button = $('#id-comments-change'),  // TODO: add to cache
-                            btnBounds = null,
-                            contentBounds = this.el.getBoundingClientRect(),
-                            moveY = 0,
-                            padding = 7;
-
-                        if (button.length) {
-                            btnBounds = button.get(0).getBoundingClientRect();
-                            if (btnBounds && contentBounds) {
-                                moveY = contentBounds.bottom - (btnBounds.bottom + padding);
-                                if (moveY < 0) {
-                                    this.scroller.scrollTop(this.scroller.getScrollTop() - moveY);
-                                }
-                            }
-                        }
                     }
-                }
+
-            })());
+                    var arr = [],
-            if (CommentsPanelDataView) {
+                        btns = $(view.el).find('.btn-resolve');
-                if (this.commentsView) {
+                    btns.tooltip({title: me.textResolve, placement: 'cursor'});
-                    this.commentsView.onResetItems();
+                    btns.each(function(idx, item){
-                } else {
+                        arr.push($(item).data('bs.tooltip').tip());
-                    this.commentsView = new CommentsPanelDataView({
-                        el: $('.messages-ct',me.el),
-                        store: me.store,
-                        itemTemplate: _.template(replaceWords(commentsTemplate, {
-                            textAddReply: me.textAddReply,
-                            textAdd: me.textAdd,
-                            textCancel: me.textCancel,
-                            textEdit: me.textEdit,
-                            textReply: me.textReply,
-                            textClose: me.textClose,
-                            maxCommLength: Asc.c_oAscMaxCellOrCommentLength
-                        }))
                     });
-
+                    btns = $(view.el).find('.btn-resolve-check');
-                    var addtooltip = function (dataview, view, record) {
+                    btns.tooltip({title: me.textOpenAgain, placement: 'cursor'});
-                        if (view.tipsArray) {
+                    btns.each(function(idx, item){
-                            view.tipsArray.forEach(function(item){
+                        arr.push($(item).data('bs.tooltip').tip());
-                                item.remove();
-                            });
-                        }
-
-                        var arr = [],
-                            btns = $(view.el).find('.btn-resolve');
-                        btns.tooltip({title: me.textResolve, placement: 'cursor'});
-                        btns.each(function(idx, item){
-                            arr.push($(item).data('bs.tooltip').tip());
-                        });
-                        btns = $(view.el).find('.btn-resolve-check');
-                        btns.tooltip({title: me.textOpenAgain, placement: 'cursor'});
-                        btns.each(function(idx, item){
-                            arr.push($(item).data('bs.tooltip').tip());
-                        });
-                        view.tipsArray = arr;
-                    };
-                    this.commentsView.on('item:add', addtooltip);
-                    this.commentsView.on('item:remove', addtooltip);
-                    this.commentsView.on('item:change', addtooltip);
-
-                    this.commentsView.on('item:click', function (picker, item, record, e) {
-                        var btn, showEditBox, showReplyBox, commentId, replyId, hideAddReply;
-
-                        function readdresolves() {
-                            me.update();
-                        }
-
-                        btn = $(e.target);
-                        if (btn) {
-                            showEditBox = record.get('editText');
-                            showReplyBox = record.get('showReply');
-                            commentId = record.get('uid');
-                            replyId =  btn.attr('data-value');
-
-                            if (btn.hasClass('btn-edit')) {
-                                if (!_.isUndefined(replyId)) {
-                                    me.fireEvent('comment:closeEditing', [commentId]);
-                                    me.fireEvent('comment:editReply', [commentId, replyId]);
-
-                                    me.commentsView.reply = replyId;
-
-                                    this.autoHeightTextBox();
-
-                                    readdresolves();
-
-                                    me.hookTextBox();
-
-                                    this.autoScrollToEditButtons();
-                                    this.setFocusToTextBox();
-                                } else {
-
-                                    if (!showEditBox) {
-                                        me.fireEvent('comment:closeEditing');
-                                        record.set('editText', true);
-
-                                        this.autoHeightTextBox();
-                                        readdresolves();
-                                        this.setFocusToTextBox();
-                                        me.hookTextBox();
-                                    }
-                                }
-                            } else if (btn.hasClass('btn-delete')) {
-                                if (!_.isUndefined(replyId)) {
-                                    me.fireEvent('comment:removeReply', [commentId, replyId]);
-                                } else {
-                                    me.fireEvent('comment:remove', [commentId]);
-                                    Common.NotificationCenter.trigger('edit:complete', me);
-                                }
-
-                                me.fireEvent('comment:closeEditing');
-                                readdresolves();
-                            } else if (btn.hasClass('user-reply')) {
-                                me.fireEvent('comment:closeEditing');
-                                record.set('showReply', true);
-
-                                readdresolves();
-
-                                this.autoHeightTextBox();
-                                me.hookTextBox();
-
-                                this.autoScrollToEditButtons();
-                                this.setFocusToTextBox();
-                            } else if (btn.hasClass('btn-reply', false)) {
-                                if (showReplyBox) {
-                                    me.fireEvent('comment:addReply', [commentId, this.getActiveTextBoxVal()]);
-                                    me.fireEvent('comment:closeEditing');
-
-                                    readdresolves();
-                                }
-                            } else if (btn.hasClass('btn-close', false)) {
-
-                                me.fireEvent('comment:closeEditing', [commentId]);
-
-                            } else if (btn.hasClass('btn-inner-edit', false)) {
-                                if (!_.isUndefined(me.commentsView.reply)) {
-                                    me.fireEvent('comment:changeReply', [commentId, me.commentsView.reply, this.getActiveTextBoxVal()]);
-                                    me.commentsView.reply = undefined;
-                                } else if (showEditBox) {
-                                    me.fireEvent('comment:change', [commentId, this.getActiveTextBoxVal()]);
-                                }
-
-                                me.fireEvent('comment:closeEditing');
-
-                                readdresolves();
-
-                            } else if (btn.hasClass('btn-inner-close', false)) {
-                                me.fireEvent('comment:closeEditing');
-
-                                me.commentsView.reply = undefined;
-
-                                readdresolves();
-                            } else if (btn.hasClass('btn-resolve', false)) {
-                                var tip = btn.data('bs.tooltip');
-                                if (tip) tip.dontShow = true;
-
-                                me.fireEvent('comment:resolve', [commentId]);
-
-                                readdresolves();
-                            } else if (btn.hasClass('btn-resolve-check', false)) {
-                                var tip = btn.data('bs.tooltip');
-                                if (tip) tip.dontShow = true;
-
-                                me.fireEvent('comment:resolve', [commentId]);
-
-                                readdresolves();
-                            } else if (!btn.hasClass('msg-reply') &&
-                                !btn.hasClass('btn-resolve-check') &&
-                                !btn.hasClass('btn-resolve')) {
-                                me.fireEvent('comment:show', [commentId, false]);
-                            }
-                        }
                     });
-                }
+                    view.tipsArray = arr;
+                };
+
+                this.commentsView.on({
+                    'item:add': addtooltip,
+                    'item:remove': addtooltip,
+                    'item:change': addtooltip,
+                    'item:click': this._commentsViewOnItemClick.bind(this)
+                });
             }
 
             if (!this.rendered) this.setupLayout();
@@ -482,7 +486,7 @@ define([
         },
 
         setupLayout: function () {
-            var me = this, parent = $(me.el);
+            var me = this, parent = me.$el;
 
             var add = $('.new-comment-ct', me.el),
                 to = $('.add-link-ct', me.el),

apps/common/main/lib/view/Header.js

@@ -489,13 +489,13 @@ define([
 
                     if ( !config.isEdit ) {
                         if ( (config.canDownload || config.canDownloadOrigin) && !config.isOffline  )
-                            this.btnDownload = createTitleButton('svg-btn-download', $html.find('#slot-hbtn-download'));
+                            this.btnDownload = createTitleButton('svg-btn-download', $html.findById('#slot-hbtn-download'));
 
                         if ( config.canPrint )
-                            this.btnPrint = createTitleButton('svg-btn-print', $html.find('#slot-hbtn-print'));
+                            this.btnPrint = createTitleButton('svg-btn-print', $html.findById('#slot-hbtn-print'));
 
                         if ( config.canEdit && config.canRequestEditRights )
-                            this.btnEdit = createTitleButton('svg-btn-edit', $html.find('#slot-hbtn-edit'));
+                            this.btnEdit = createTitleButton('svg-btn-edit', $html.findById('#slot-hbtn-edit'));
                     }
                     me.btnOptions.render($html.find('#slot-btn-options'));
 
@@ -519,12 +519,12 @@ define([
                     me.setUserName(me.options.userName);
 
                     if ( config.canPrint && config.isEdit ) {
-                        me.btnPrint = createTitleButton('svg-btn-print', $('#slot-btn-dt-print', $html), true);
+                        me.btnPrint = createTitleButton('svg-btn-print', $html.findById('#slot-btn-dt-print'), true);
                     }
 
-                    me.btnSave = createTitleButton('svg-btn-save', $('#slot-btn-dt-save', $html), true);
+                    me.btnSave = createTitleButton('svg-btn-save', $html.findById('#slot-btn-dt-save'), true);
-                    me.btnUndo = createTitleButton('svg-btn-undo', $('#slot-btn-dt-undo', $html), true);
+                    me.btnUndo = createTitleButton('svg-btn-undo', $html.findById('#slot-btn-dt-undo'), true);
-                    me.btnRedo = createTitleButton('svg-btn-redo', $('#slot-btn-dt-redo', $html), true);
+                    me.btnRedo = createTitleButton('svg-btn-redo', $html.findById('#slot-btn-dt-redo'), true);
 
                     if ( me.btnSave.$icon.is('svg') ) {
                         me.btnSave.$icon.addClass('icon-save');

apps/common/main/lib/view/Plugins.js

@@ -88,22 +88,22 @@ define([
             el && (this.$el = $(el));
             this.$el.html(this.template({scope: this}));
 
-            this.viewPluginsList = new Common.UI.DataView({
+            // this.viewPluginsList = new Common.UI.DataView({
-                el: $('#plugins-list'),
+            //     el: $('#plugins-list'),
-                store: this.storePlugins,
+            //     store: this.storePlugins,
-                enableKeyEvents: false,
+            //     enableKeyEvents: false,
-                itemTemplate: _.template([
+            //     itemTemplate: _.template([
-                    '<div id="<%= id %>" class="item-plugins" style="display: <% if (visible) {%> block; <%} else {%> none; <% } %>">',
+            //         '<div id="<%= id %>" class="item-plugins" style="display: <% if (visible) {%> block; <%} else {%> none; <% } %>">',
-                        '<div class="plugin-icon" style="background-image: url(' + '<%= baseUrl %>' + '<%= variations[currentVariation].get("icons")[((window.devicePixelRatio > 1) ? 1 : 0) + (variations[currentVariation].get("icons").length>2 ? 2 : 0)] %>);"></div>',
+            //             '<div class="plugin-icon" style="background-image: url(' + '<%= baseUrl %>' + '<%= variations[currentVariation].get("icons")[((window.devicePixelRatio > 1) ? 1 : 0) + (variations[currentVariation].get("icons").length>2 ? 2 : 0)] %>);"></div>',
-                        '<% if (variations.length>1) { %>',
+            //             '<% if (variations.length>1) { %>',
-                        '<div class="plugin-caret img-commonctrl"></div>',
+            //             '<div class="plugin-caret img-commonctrl"></div>',
-                        '<% } %>',
+            //             '<% } %>',
-                        '<%= name %>',
+            //             '<%= name %>',
-                    '</div>'
+            //         '</div>'
-                ].join(''))
+            //     ].join(''))
-            });
+            // });
-            this.lockedControls.push(this.viewPluginsList);
+            // this.lockedControls.push(this.viewPluginsList);
-            this.viewPluginsList.cmpEl.off('click');
+            // this.viewPluginsList.cmpEl.off('click');
 
             this.pluginName = $('#current-plugin-header label');
             this.pluginsPanel = $('#plugins-box');

apps/documenteditor/embed/index.html

@@ -15,170 +15,94 @@
 
     <style type="text/css">
         .loadmask {
-            position: absolute;
             left: 0;
             top: 0;
+            position: absolute;
             height: 100%;
             width: 100%;
             overflow: hidden;
             border: none;
             background-color: #f4f4f4;
-            z-index: 20002;
+            z-index: 10000;
         }
 
-        .loader-page {
+        .loadmask > .brendpanel {
             width: 100%;
-            height: 170px;
-            bottom: 42%;
             position: absolute;
+            height: 32px;
+            background-color: #e2e2e2;
+        }
+
+        .loadmask > .brendpanel > div {
+            display: flex;
+            align-items: center;
+            height: 100%;
+        }
+
+        .loadmask > .brendpanel .loading-logo {
+            max-width: 200px;
+            height: 24px;
+            margin: 0 auto;
             text-align: center;
-            line-height: 10px;
         }
 
-        .loader-logo {
+        .loadmask > .brendpanel .loading-logo > img {
-            max-height: 160px;
-            margin-bottom: 10px;
-        }
-
-        .loader-page-romb {
-            width: 40px;
             display: inline-block;
+            max-width: 100px;
+            max-height: 20px;
+            margin-top: 2px;
+            opacity: 0;
         }
 
-        .loader-page-text {
+        .loadmask > .brendpanel .circle {
+            vertical-align: middle;
+            width: 24px;
+            height: 24px;
+            border-radius: 12px;
+            margin: 4px 10px;
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .loadmask > .placeholder {
+            background: #fbfbfb;
             width: 100%;
-            bottom: 42%;
+            height: 100%;
-            position: absolute;
+            padding-top: 56px;
-            text-align: center;
-            color: #888;
-            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-            line-height: 20px;
         }
 
-        .loader-page-text-loading {
+        .loadmask > .placeholder > .line {
-            font-size: 14px;
+            height: 15px;
+            margin: 30px;
+            background: #e2e2e2;
+            overflow: hidden;
+            position: relative;
+
+            -webkit-animation: flickerAnimation 2s infinite ease-in-out;
+            -moz-animation: flickerAnimation 2s infinite ease-in-out;
+            -o-animation: flickerAnimation 2s infinite ease-in-out;
+            animation: flickerAnimation 2s infinite ease-in-out;
         }
 
-        .loader-page-text-customer {
+        @keyframes flickerAnimation {
-            font-size: 16px;
+            0%   { opacity:0.1; }
-            margin-bottom: 5px;
+            50%  { opacity:1; }
+            100% { opacity:0.1; }
         }
-
+        @-o-keyframes flickerAnimation{
-        .romb {
+            0%   { opacity:0.1; }
-            width: 40px;
+            50%  { opacity:1; }
-            height: 40px;
+            100% { opacity:0.1; }
-            -webkit-transform: rotate(135deg) skew(20deg, 20deg);
-            -moz-transform: rotate(135deg) skew(20deg, 20deg);
-            -ms-transform: rotate(135deg) skew(20deg, 20deg);
-            -o-transform: rotate(135deg) skew(20deg, 20deg);
-            position: absolute;
-            background: red;
-            border-radius: 6px;
-            -webkit-animation: movedown 3s infinite ease;
-            -moz-animation: movedown 3s infinite ease;
-            -ms-animation: movedown 3s infinite ease;
-            -o-animation: movedown 3s infinite ease;
-            animation: movedown 3s infinite ease;
         }
-
+        @-moz-keyframes flickerAnimation{
-        #blue {
+            0%   { opacity:0.1; }
-            z-index: 3;
+            50%  { opacity:1; }
-            background: #55bce6;
+            100% { opacity:0.1; }
-            -webkit-animation-name: blue;
-            -moz-animation-name: blue;
-            -ms-animation-name: blue;
-            -o-animation-name: blue;
-            animation-name: blue;
         }
-
+        @-webkit-keyframes flickerAnimation{
-        #red {
+            0%   { opacity:0.1; }
-            z-index:1;
+            50%  { opacity:1; }
-            background: #de7a59;
+            100% { opacity:0.1; }
-            -webkit-animation-name: red;
-            -moz-animation-name: red;
-            -ms-animation-name: red;
-            -o-animation-name: red;
-            animation-name: red;
         }
-
-        #green {
-            z-index: 2;
-            background: #a1cb5c;
-            -webkit-animation-name: green;
-            -moz-animation-name: green;
-            -ms-animation-name: green;
-            -o-animation-name: green;
-            animation-name: green;
-        }
-
-        @-webkit-keyframes red {
-              0%    { top:120px; background: #de7a59; }
-             10%    { top:120px; background: #F2CBBF; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0;}
-             20%    { background: #E6E4E4; }
-             30%    { background: #D2D2D2; }
-             40%    { top:120px; }
-            100%    { top:120px; background: #de7a59; }
-        }
-
-        @keyframes red {
-              0%    { top:120px; background: #de7a59; }
-             10%    { top:120px; background: #F2CBBF; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0; }
-             20%    { background: #E6E4E4; }
-             30%    { background: #D2D2D2; }
-             40%    { top:120px; }
-            100%    { top:120px; background: #de7a59; }
-        }
-
-        @-webkit-keyframes green {
-              0%    { top:110px; background: #a1cb5c; opacity:1; }
-             10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #EFEFEF; top:0; opacity:1; }
-             30%    { background:#E6E4E4; }
-             70%    { top:110px; }
-            100%    { top:110px; background: #a1cb5c; }
-        }
-
-        @keyframes green {
-              0%    { top:110px; background: #a1cb5c; opacity:1; }
-             10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #EFEFEF; top:0; opacity:1; }
-             30%    { background:#E6E4E4; }
-             70%    { top:110px; }
-            100%    { top:110px; background: #a1cb5c; }
-        }
-
-        @-webkit-keyframes blue {
-              0%    { top:100px; background: #55bce6; opacity:1; }
-             10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #f4f4f4; top:0; opacity:0; }
-             45%    { background: #EFEFEF; top:0; opacity:0.2; }
-            100%    { top:100px; background: #55bce6; }
-        }
-
-        @keyframes blue {
-              0%    { top:100px; background: #55bce6; opacity:1; }
-             10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #fff; top:0; opacity:0; }
-             45%    { background: #EFEFEF; top:0; opacity:0.2; }
-            100%    { top:100px; background: #55bce6; }
-        }
-
     </style>
 
     <!--[if lt IE 9]>
@@ -187,6 +111,7 @@
   </head>
 
   <body class="embed-body">
+      <div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="circle"></div><div class="brand-logo loading-logo"><img src=""></div><div class="circle"></div></div></div><div class="placeholder"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
 
       <!-- debug begin -->
       <script type="text/javascript">var less=less||{};less.env='development';</script>
@@ -232,50 +157,19 @@
                         .replace(/>/g, '&gt;');
             }
 
-            var params = getUrlParams(),
+           var params = getUrlParams(),
-                lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
+               lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
-                customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+               logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null;
-                margin = (customer !== '') ? 50 : 20,
-                loading = 'Loading...',
-                logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
 
-            window.frameEditorId = params["frameEditorId"];
+           window.frameEditorId = params["frameEditorId"];
 
-           if ( lang == 'de')      loading = 'Ladevorgang...';
+           var elem = document.querySelector('.loading-logo');
-           else if ( lang == 'es') loading = 'Cargando...';
+           if (elem && logo) {
-           else if ( lang == 'fr') loading = 'Chargement en cours...';
+               elem.style.backgroundImage= 'none';
-           else if ( lang == 'it') loading = 'Caricamento in corso...';
+               var img = document.querySelector('.loading-logo img');
-           else if ( lang == 'pt') loading = 'Carregando...';
+               img && img.setAttribute('src', logo);
-           else if ( lang == 'ru') loading = 'Загрузка...';
+               img.style.opacity = 1;
-           else if ( lang == 'sl') loading = 'Nalaganje...';
+           }
-           else if ( lang == 'tr') loading = 'Yükleniyor...';
-           else if ( lang == 'bg') loading = 'Зареждане...';
-           else if ( lang == 'cs') loading = 'Nahrávám...';
-           else if ( lang == 'hu') loading = 'Betöltés...';
-           else if ( lang == 'ja') loading = '読み込み中...';
-           else if ( lang == 'ko') loading = '로드 중...';
-           else if ( lang == 'lv') loading = 'Ieladēšana ...';
-           else if ( lang == 'nl') loading = 'Laden...';
-           else if ( lang == 'pl') loading = 'Ładowanie...';
-           else if ( lang == 'sk') loading = 'Nahrávam...';
-           else if ( lang == 'uk') loading = 'Завантаження...';
-           else if ( lang == 'vi') loading = 'Đang tải...';
-           else if ( lang == 'zh') loading = '加载中...';
-
-            document.write(
-                '<div id="loading-mask" class="loadmask">' +
-                    '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
-                        ((logo!==null) ? logo :
-                        '<div class="loader-page-romb">' +
-                            '<div class="romb" id="blue"></div>' +
-                            '<div class="romb" id="green"></div>' +
-                            '<div class="romb" id="red"></div>' +
-                        '</div>') +
-                    '</div>' +
-                    '<div class="loader-page-text">' +  customer +
-                    '<div class="loader-page-text-loading">' + loading + '</div>' +
-                    '</div>' +
-                '</div>');
         </script>
 
       <div id="editor_sdk" class="viewer" style="overflow: hidden;" tabindex="-1"></div>

apps/documenteditor/embed/index.html.deploy

@@ -13,168 +13,93 @@
 
     <style type="text/css">
         .loadmask {
-            position: absolute;
             left: 0;
             top: 0;
+            position: absolute;
             height: 100%;
             width: 100%;
             overflow: hidden;
             border: none;
             background-color: #f4f4f4;
-            z-index: 20002;
+            z-index: 10000;
         }
 
-        .loader-page {
+        .loadmask > .brendpanel {
             width: 100%;
-            height: 170px;
-            bottom: 42%;
             position: absolute;
+            height: 32px;
+            background-color: #e2e2e2;
+        }
+
+        .loadmask > .brendpanel > div {
+            display: flex;
+            align-items: center;
+            height: 100%;
+        }
+
+        .loadmask > .brendpanel .loading-logo {
+            max-width: 200px;
+            height: 24px;
+            margin: 0 auto;
             text-align: center;
-            line-height: 10px;
         }
 
-        .loader-logo {
+        .loadmask > .brendpanel .loading-logo > img {
-            max-height: 160px;
-            margin-bottom: 10px;
-        }
-
-        .loader-page-romb {
-            width: 40px;
             display: inline-block;
+            max-width: 100px;
+            max-height: 20px;
+            margin-top: 2px;
+            opacity: 0;
         }
 
-        .loader-page-text {
+        .loadmask > .brendpanel .circle {
+            vertical-align: middle;
+            width: 24px;
+            height: 24px;
+            border-radius: 12px;
+            margin: 4px 10px;
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .loadmask > .placeholder {
+            background: #fbfbfb;
             width: 100%;
-            bottom: 42%;
+            height: 100%;
-            position: absolute;
+            padding-top: 56px;
-            text-align: center;
-            color: #888;
-            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-            line-height: 20px;
         }
 
-        .loader-page-text-loading {
+        .loadmask > .placeholder > .line {
-            font-size: 14px;
+            height: 15px;
+            margin: 30px;
+            background: #e2e2e2;
+            overflow: hidden;
+            position: relative;
+
+            -webkit-animation: flickerAnimation 2s infinite ease-in-out;
+            -moz-animation: flickerAnimation 2s infinite ease-in-out;
+            -o-animation: flickerAnimation 2s infinite ease-in-out;
+            animation: flickerAnimation 2s infinite ease-in-out;
         }
 
-        .loader-page-text-customer {
+        @keyframes flickerAnimation {
-            font-size: 16px;
+            0%   { opacity:0.1; }
-            margin-bottom: 5px;
+            50%  { opacity:1; }
+            100% { opacity:0.1; }
         }
-
+        @-o-keyframes flickerAnimation{
-        .romb {
+            0%   { opacity:0.1; }
-            width: 40px;
+            50%  { opacity:1; }
-            height: 40px;
+            100% { opacity:0.1; }
-            -webkit-transform: rotate(135deg) skew(20deg, 20deg);
-            -moz-transform: rotate(135deg) skew(20deg, 20deg);
-            -ms-transform: rotate(135deg) skew(20deg, 20deg);
-            -o-transform: rotate(135deg) skew(20deg, 20deg);
-            position: absolute;
-            background: red;
-            border-radius: 6px;
-            -webkit-animation: movedown 3s infinite ease;
-            -moz-animation: movedown 3s infinite ease;
-            -ms-animation: movedown 3s infinite ease;
-            -o-animation: movedown 3s infinite ease;
-            animation: movedown 3s infinite ease;
         }
-
+        @-moz-keyframes flickerAnimation{
-        #blue {
+            0%   { opacity:0.1; }
-            z-index: 3;
+            50%  { opacity:1; }
-            background: #55bce6;
+            100% { opacity:0.1; }
-            -webkit-animation-name: blue;
-            -moz-animation-name: blue;
-            -ms-animation-name: blue;
-            -o-animation-name: blue;
-            animation-name: blue;
         }
-
+        @-webkit-keyframes flickerAnimation{
-        #red {
+            0%   { opacity:0.1; }
-            z-index:1;
+            50%  { opacity:1; }
-            background: #de7a59;
+            100% { opacity:0.1; }
-            -webkit-animation-name: red;
-            -moz-animation-name: red;
-            -ms-animation-name: red;
-            -o-animation-name: red;
-            animation-name: red;
-        }
-
-        #green {
-            z-index: 2;
-            background: #a1cb5c;
-            -webkit-animation-name: green;
-            -moz-animation-name: green;
-            -ms-animation-name: green;
-            -o-animation-name: green;
-            animation-name: green;
-        }
-
-        @-webkit-keyframes red {
-              0%    { top:120px; background: #de7a59; }
-             10%    { top:120px; background: #F2CBBF; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0;}
-             20%    { background: #E6E4E4; }
-             30%    { background: #D2D2D2; }
-             40%    { top:120px; }
-            100%    { top:120px; background: #de7a59; }
-        }
-
-        @keyframes red {
-              0%    { top:120px; background: #de7a59; }
-             10%    { top:120px; background: #F2CBBF; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0; }
-             20%    { background: #E6E4E4; }
-             30%    { background: #D2D2D2; }
-             40%    { top:120px; }
-            100%    { top:120px; background: #de7a59; }
-        }
-
-        @-webkit-keyframes green {
-              0%    { top:110px; background: #a1cb5c; opacity:1; }
-             10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #EFEFEF; top:0; opacity:1; }
-             30%    { background:#E6E4E4; }
-             70%    { top:110px; }
-            100%    { top:110px; background: #a1cb5c; }
-        }
-
-        @keyframes green {
-              0%    { top:110px; background: #a1cb5c; opacity:1; }
-             10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #EFEFEF; top:0; opacity:1; }
-             30%    { background:#E6E4E4; }
-             70%    { top:110px; }
-            100%    { top:110px; background: #a1cb5c; }
-        }
-
-        @-webkit-keyframes blue {
-              0%    { top:100px; background: #55bce6; opacity:1; }
-             10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #f4f4f4; top:0; opacity:0; }
-             45%    { background: #EFEFEF; top:0; opacity:0.2; }
-            100%    { top:100px; background: #55bce6; }
-        }
-
-        @keyframes blue {
-              0%    { top:100px; background: #55bce6; opacity:1; }
-             10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #fff; top:0; opacity:0; }
-             45%    { background: #EFEFEF; top:0; opacity:0.2; }
-            100%    { top:100px; background: #55bce6; }
         }
     </style>
 
@@ -184,6 +109,7 @@
   </head>
 
   <body class="embed-body">
+      <div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="circle"></div><div class="brand-logo loading-logo"><img src=""></div><div class="circle"></div></div></div><div class="placeholder"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
 
        <script>
             var  userAgent = navigator.userAgent.toLowerCase(),
@@ -225,49 +151,17 @@
             }
 
             var params = getUrlParams(),
-                lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
+                           lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
-                customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+                           logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null;
-                margin = (customer !== '') ? 50 : 20,
-                loading = 'Loading...',
-                logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
 
             window.frameEditorId = params["frameEditorId"];
-
+            var elem = document.querySelector('.loading-logo');
-            if ( lang == 'de')      loading = 'Ladevorgang...';
+            if (elem && logo) {
-            else if ( lang == 'es') loading = 'Cargando...';
+                elem.style.backgroundImage= 'none';
-            else if ( lang == 'fr') loading = 'Chargement en cours...';
+                var img = document.querySelector('.loading-logo img');
-            else if ( lang == 'it') loading = 'Caricamento in corso...';
+                img && img.setAttribute('src', logo);
-            else if ( lang == 'pt') loading = 'Carregando...';
+                img.style.opacity = 1;
-            else if ( lang == 'ru') loading = 'Загрузка...';
+            }
-            else if ( lang == 'sl') loading = 'Nalaganje...';
-            else if ( lang == 'tr') loading = 'Yükleniyor...';
-            else if ( lang == 'bg') loading = 'Зареждане...';
-            else if ( lang == 'cs') loading = 'Nahrávám...';
-            else if ( lang == 'hu') loading = 'Betöltés...';
-            else if ( lang == 'ja') loading = '読み込み中...';
-            else if ( lang == 'ko') loading = '로드 중...';
-            else if ( lang == 'lv') loading = 'Ieladēšana ...';
-            else if ( lang == 'nl') loading = 'Laden...';
-            else if ( lang == 'pl') loading = 'Ładowanie...';
-            else if ( lang == 'sk') loading = 'Nahrávam...';
-            else if ( lang == 'uk') loading = 'Завантаження...';
-            else if ( lang == 'vi') loading = 'Đang tải...';
-            else if ( lang == 'zh') loading = '加载中...';
-
-            document.write(
-                '<div id="loading-mask" class="loadmask">' +
-                    '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
-                        ((logo!==null) ? logo :
-                        '<div class="loader-page-romb">' +
-                            '<div class="romb" id="blue"></div>' +
-                            '<div class="romb" id="green"></div>' +
-                            '<div class="romb" id="red"></div>' +
-                        '</div>') +
-                    '</div>' +
-                    '<div class="loader-page-text">' +  customer +
-                    '<div class="loader-page-text-loading">' + loading + '</div>' +
-                    '</div>' +
-                '</div>');
         </script>
 
       <div id="editor_sdk" class="viewer" style="overflow: hidden;" tabindex="-1"></div>

apps/documenteditor/embed/index_loader.html

@@ -0,0 +1,375 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Documents</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <!-- debug begin -->
+    <link rel="stylesheet/less" type="text/css" href="resources/less/application.less" />
+    <!-- debug end -->
+
+    <!-- splash -->
+
+    <style type="text/css">
+        .loadmask {
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+            border: none;
+            background-color: #f4f4f4;
+            z-index: 20002;
+        }
+
+        .loader-page {
+            width: 100%;
+            height: 170px;
+            bottom: 42%;
+            position: absolute;
+            text-align: center;
+            line-height: 10px;
+        }
+
+        .loader-logo {
+            max-height: 160px;
+            margin-bottom: 10px;
+        }
+
+        .loader-page-romb {
+            width: 40px;
+            display: inline-block;
+        }
+
+        .loader-page-text {
+            width: 100%;
+            bottom: 42%;
+            position: absolute;
+            text-align: center;
+            color: #888;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            line-height: 20px;
+        }
+
+        .loader-page-text-loading {
+            font-size: 14px;
+        }
+
+        .loader-page-text-customer {
+            font-size: 16px;
+            margin-bottom: 5px;
+        }
+
+        .romb {
+            width: 40px;
+            height: 40px;
+            -webkit-transform: rotate(135deg) skew(20deg, 20deg);
+            -moz-transform: rotate(135deg) skew(20deg, 20deg);
+            -ms-transform: rotate(135deg) skew(20deg, 20deg);
+            -o-transform: rotate(135deg) skew(20deg, 20deg);
+            position: absolute;
+            background: red;
+            border-radius: 6px;
+            -webkit-animation: movedown 3s infinite ease;
+            -moz-animation: movedown 3s infinite ease;
+            -ms-animation: movedown 3s infinite ease;
+            -o-animation: movedown 3s infinite ease;
+            animation: movedown 3s infinite ease;
+        }
+
+        #blue {
+            z-index: 3;
+            background: #55bce6;
+            -webkit-animation-name: blue;
+            -moz-animation-name: blue;
+            -ms-animation-name: blue;
+            -o-animation-name: blue;
+            animation-name: blue;
+        }
+
+        #red {
+            z-index:1;
+            background: #de7a59;
+            -webkit-animation-name: red;
+            -moz-animation-name: red;
+            -ms-animation-name: red;
+            -o-animation-name: red;
+            animation-name: red;
+        }
+
+        #green {
+            z-index: 2;
+            background: #a1cb5c;
+            -webkit-animation-name: green;
+            -moz-animation-name: green;
+            -ms-animation-name: green;
+            -o-animation-name: green;
+            animation-name: green;
+        }
+
+        @-webkit-keyframes red {
+              0%    { top:120px; background: #de7a59; }
+             10%    { top:120px; background: #F2CBBF; }
+             14%    { background: #f4f4f4; top:120px; }
+             15%    { background: #f4f4f4; top:0;}
+             20%    { background: #E6E4E4; }
+             30%    { background: #D2D2D2; }
+             40%    { top:120px; }
+            100%    { top:120px; background: #de7a59; }
+        }
+
+        @keyframes red {
+              0%    { top:120px; background: #de7a59; }
+             10%    { top:120px; background: #F2CBBF; }
+             14%    { background: #f4f4f4; top:120px; }
+             15%    { background: #f4f4f4; top:0; }
+             20%    { background: #E6E4E4; }
+             30%    { background: #D2D2D2; }
+             40%    { top:120px; }
+            100%    { top:120px; background: #de7a59; }
+        }
+
+        @-webkit-keyframes green {
+              0%    { top:110px; background: #a1cb5c; opacity:1; }
+             10%    { top:110px; background: #CBE0AC; opacity:1; }
+             14%    { background: #f4f4f4; top:110px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #EFEFEF; top:0; opacity:1; }
+             30%    { background:#E6E4E4; }
+             70%    { top:110px; }
+            100%    { top:110px; background: #a1cb5c; }
+        }
+
+        @keyframes green {
+              0%    { top:110px; background: #a1cb5c; opacity:1; }
+             10%    { top:110px; background: #CBE0AC; opacity:1; }
+             14%    { background: #f4f4f4; top:110px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #EFEFEF; top:0; opacity:1; }
+             30%    { background:#E6E4E4; }
+             70%    { top:110px; }
+            100%    { top:110px; background: #a1cb5c; }
+        }
+
+        @-webkit-keyframes blue {
+              0%    { top:100px; background: #55bce6; opacity:1; }
+             10%    { top:100px; background: #BFE8F8; opacity:1; }
+             14%    { background: #f4f4f4; top:100px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #f4f4f4; top:0; opacity:0; }
+             45%    { background: #EFEFEF; top:0; opacity:0.2; }
+            100%    { top:100px; background: #55bce6; }
+        }
+
+        @keyframes blue {
+              0%    { top:100px; background: #55bce6; opacity:1; }
+             10%    { top:100px; background: #BFE8F8; opacity:1; }
+             14%    { background: #f4f4f4; top:100px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #fff; top:0; opacity:0; }
+             45%    { background: #EFEFEF; top:0; opacity:0.2; }
+            100%    { top:100px; background: #55bce6; }
+        }
+
+    </style>
+
+    <!--[if lt IE 9]>
+      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"></script>
+    <![endif]-->
+  </head>
+
+  <body class="embed-body">
+
+      <!-- debug begin -->
+      <script type="text/javascript">var less=less||{};less.env='development';</script>
+      <script src="../../../vendor/less/dist/less-1.5.1.js" type="text/javascript"></script>
+      <!-- debug end -->
+
+       <script>
+           var  userAgent = navigator.userAgent.toLowerCase(),
+                check = function(regex){ return regex.test(userAgent); };
+           if (!check(/opera/) && (check(/msie/) || check(/trident/))) {
+                var m = /msie (\d+\.\d+)/.exec(userAgent);
+                if (m && parseFloat(m[1]) < 10.0) {
+                    document.write(
+                        '<div id="id-error-mask" class="errormask">',
+                            '<div class="error-body" align="center">',
+                                '<div id="id-error-mask-title" class="title">Your browser is not supported.</div>',
+                                '<div id="id-error-mask-text">Sorry, ONLYOFFICE Document is currently only supported in the latest versions of the Chrome, Firefox, Safari or Internet Explorer web browsers.</div>',
+                            '</div>',
+                        '</div>'
+                    );
+                }
+           }
+           
+            function getUrlParams() {
+                var e,
+                    a = /\+/g,  // Regex for replacing addition symbol with a space
+                    r = /([^&=]+)=?([^&]*)/g,
+                    d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
+                    q = window.location.search.substring(1),
+                    urlParams = {};
+
+                while (e = r.exec(q))
+                    urlParams[d(e[1])] = d(e[2]);
+
+                return urlParams;
+            }
+
+            function encodeUrlParam(str) {
+                return str.replace(/&/g, '&amp;')
+                        .replace(/"/g, '&quot;')
+                        .replace(/'/g, '&#39;')
+                        .replace(/</g, '&lt;')
+                        .replace(/>/g, '&gt;');
+            }
+
+            var params = getUrlParams(),
+                lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
+                customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+                margin = (customer !== '') ? 50 : 20,
+                loading = 'Loading...',
+                logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
+
+            window.frameEditorId = params["frameEditorId"];
+
+           if ( lang == 'de')      loading = 'Ladevorgang...';
+           else if ( lang == 'es') loading = 'Cargando...';
+           else if ( lang == 'fr') loading = 'Chargement en cours...';
+           else if ( lang == 'it') loading = 'Caricamento in corso...';
+           else if ( lang == 'pt') loading = 'Carregando...';
+           else if ( lang == 'ru') loading = 'Загрузка...';
+           else if ( lang == 'sl') loading = 'Nalaganje...';
+           else if ( lang == 'tr') loading = 'Yükleniyor...';
+           else if ( lang == 'bg') loading = 'Зареждане...';
+           else if ( lang == 'cs') loading = 'Nahrávám...';
+           else if ( lang == 'hu') loading = 'Betöltés...';
+           else if ( lang == 'ja') loading = '読み込み中...';
+           else if ( lang == 'ko') loading = '로드 중...';
+           else if ( lang == 'lv') loading = 'Ieladēšana ...';
+           else if ( lang == 'nl') loading = 'Laden...';
+           else if ( lang == 'pl') loading = 'Ładowanie...';
+           else if ( lang == 'sk') loading = 'Nahrávam...';
+           else if ( lang == 'uk') loading = 'Завантаження...';
+           else if ( lang == 'vi') loading = 'Đang tải...';
+           else if ( lang == 'zh') loading = '加载中...';
+
+            document.write(
+                '<div id="loading-mask" class="loadmask">' +
+                    '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
+                        ((logo!==null) ? logo :
+                        '<div class="loader-page-romb">' +
+                            '<div class="romb" id="blue"></div>' +
+                            '<div class="romb" id="green"></div>' +
+                            '<div class="romb" id="red"></div>' +
+                        '</div>') +
+                    '</div>' +
+                    '<div class="loader-page-text">' +  customer +
+                    '<div class="loader-page-text-loading">' + loading + '</div>' +
+                    '</div>' +
+                '</div>');
+        </script>
+
+      <div id="editor_sdk" class="viewer" style="overflow: hidden;" tabindex="-1"></div>
+
+      <div class="overlay-controls" style="margin-left: -32px">
+          <ul class="left">
+              <li id="id-btn-zoom-in"><button class="overlay svg-icon zoom-up"></button></li>
+              <li id="id-btn-zoom-out"><button class="overlay svg-icon zoom-down"></button></li>
+          </ul>
+      </div>
+
+      <div class="toolbar" id="toolbar">
+          <div class="group left">
+              <div id="box-tools" class="dropdown">
+                  <button class="control-btn svg-icon tools"></button>
+              </div>
+          </div>
+          <div class="group center">
+              <span><a id="header-logo" class="brand-logo" href="http://www.onlyoffice.com/" target="_blank"></a></span>
+          </div>
+          <div class="group right">
+              <div class="item"><input id="page-number" class="form-control input-xs masked" type="text" value="0"><span class="text" id="pages" tabindex="-1">of 0</span></div>
+              <div class="item separator"></div>
+              <div class="item"><button id="id-btn-close" class="control-btn close"><span aria-hidden="true">&times;</span></button></div>
+          </div>
+      </div>
+
+      <div class="modal fade error" id="id-critical-error-dialog" tabindex="-1" role="dialog">
+          <div class="modal-dialog">
+              <div class="modal-content">
+                  <div class="modal-header">
+                      <h4 id="id-critical-error-title"></h4>
+                  </div>
+                  <div class="modal-body">
+                      <p id="id-critical-error-message"></p>
+                  </div>
+                  <div class="modal-footer">
+                      <button id="id-critical-error-close" class="btn btn-sm btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
+                  </div>
+              </div>
+          </div>
+      </div>
+
+      <div id="id-loadmask" class="hide modal cmd-loader-body">
+          <div class="cmd-loader-image"></div>
+          <div class="cmd-loader-title">Please wait...</div>
+      </div>
+
+      <div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
+
+      <!--vendor-->
+      <script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
+      <script type="text/javascript" src="../../../vendor/jquery.browser/dist/jquery.browser.min.js"></script>
+      <script type="text/javascript" src="../../../vendor/bootstrap/dist/js/bootstrap.js"></script>
+
+      <script type="text/javascript" src="../../../vendor/sockjs/sockjs.min.js"></script>
+      <script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
+
+      <script type="text/javascript" src="../sdk_dev_scripts.js"></script>
+      <script>
+          window.sdk_dev_scrpipts.forEach(function(item){
+              document.write('<script type="text/javascript" src="' + item + '"><\/script>');
+          });
+      </script>
+
+      <!--application-->
+      <script type="text/javascript" src="../../common/locale.js"></script>
+      <script type="text/javascript" src="../../common/Gateway.js"></script>
+      <script type="text/javascript" src="../../common/Analytics.js"></script>
+      <script type="text/javascript" src="../../common/embed/lib/util/utils.js"></script>
+      <script type="text/javascript" src="../../common/embed/lib/view/modals.js"></script>
+      <script type="text/javascript" src="../../common/embed/lib/controller/modals.js"></script>
+      <script type="text/javascript" src="js/ApplicationView.js"></script>
+      <script type="text/javascript" src="js/ApplicationController.js"></script>
+      <script type="text/javascript" src="js/application.js"></script>
+      <script type="text/javascript">
+          var isBrowserSupported = function() {
+              return  ($.browser.msie     && parseFloat($.browser.version) > 9)     ||
+                      ($.browser.chrome   && parseFloat($.browser.version) > 7)     ||
+                      ($.browser.safari   && parseFloat($.browser.version) > 4)     ||
+                      ($.browser.opera    && parseFloat($.browser.version) > 10.4)  ||
+                      ($.browser.mozilla  && parseFloat($.browser.version) > 3.9);
+          };
+
+          if (!isBrowserSupported()){
+              document.write(
+                  '<div id="id-error-mask" class="errormask">',
+                      '<div class="error-body" align="center">',
+                          '<div id="id-error-mask-title" class="title">Your browser is not supported.</div>',
+                          '<div id="id-error-mask-text">Sorry, ONLYOFFICE Document is currently only supported in the latest versions of the Chrome, Firefox, Safari or Internet Explorer web browsers.</div>',
+                      '</div>',
+                  '</div>'
+              );
+          }
+      </script>
+  </body>
+</html>

apps/documenteditor/embed/index_loader.html.deploy

@@ -0,0 +1,355 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Documents</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <link href="../../../apps/documenteditor/embed/resources/css/app-all.css" rel="stylesheet">
+
+    <!-- splash -->
+
+    <style type="text/css">
+        .loadmask {
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+            border: none;
+            background-color: #f4f4f4;
+            z-index: 20002;
+        }
+
+        .loader-page {
+            width: 100%;
+            height: 170px;
+            bottom: 42%;
+            position: absolute;
+            text-align: center;
+            line-height: 10px;
+        }
+
+        .loader-logo {
+            max-height: 160px;
+            margin-bottom: 10px;
+        }
+
+        .loader-page-romb {
+            width: 40px;
+            display: inline-block;
+        }
+
+        .loader-page-text {
+            width: 100%;
+            bottom: 42%;
+            position: absolute;
+            text-align: center;
+            color: #888;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            line-height: 20px;
+        }
+
+        .loader-page-text-loading {
+            font-size: 14px;
+        }
+
+        .loader-page-text-customer {
+            font-size: 16px;
+            margin-bottom: 5px;
+        }
+
+        .romb {
+            width: 40px;
+            height: 40px;
+            -webkit-transform: rotate(135deg) skew(20deg, 20deg);
+            -moz-transform: rotate(135deg) skew(20deg, 20deg);
+            -ms-transform: rotate(135deg) skew(20deg, 20deg);
+            -o-transform: rotate(135deg) skew(20deg, 20deg);
+            position: absolute;
+            background: red;
+            border-radius: 6px;
+            -webkit-animation: movedown 3s infinite ease;
+            -moz-animation: movedown 3s infinite ease;
+            -ms-animation: movedown 3s infinite ease;
+            -o-animation: movedown 3s infinite ease;
+            animation: movedown 3s infinite ease;
+        }
+
+        #blue {
+            z-index: 3;
+            background: #55bce6;
+            -webkit-animation-name: blue;
+            -moz-animation-name: blue;
+            -ms-animation-name: blue;
+            -o-animation-name: blue;
+            animation-name: blue;
+        }
+
+        #red {
+            z-index:1;
+            background: #de7a59;
+            -webkit-animation-name: red;
+            -moz-animation-name: red;
+            -ms-animation-name: red;
+            -o-animation-name: red;
+            animation-name: red;
+        }
+
+        #green {
+            z-index: 2;
+            background: #a1cb5c;
+            -webkit-animation-name: green;
+            -moz-animation-name: green;
+            -ms-animation-name: green;
+            -o-animation-name: green;
+            animation-name: green;
+        }
+
+        @-webkit-keyframes red {
+              0%    { top:120px; background: #de7a59; }
+             10%    { top:120px; background: #F2CBBF; }
+             14%    { background: #f4f4f4; top:120px; }
+             15%    { background: #f4f4f4; top:0;}
+             20%    { background: #E6E4E4; }
+             30%    { background: #D2D2D2; }
+             40%    { top:120px; }
+            100%    { top:120px; background: #de7a59; }
+        }
+
+        @keyframes red {
+              0%    { top:120px; background: #de7a59; }
+             10%    { top:120px; background: #F2CBBF; }
+             14%    { background: #f4f4f4; top:120px; }
+             15%    { background: #f4f4f4; top:0; }
+             20%    { background: #E6E4E4; }
+             30%    { background: #D2D2D2; }
+             40%    { top:120px; }
+            100%    { top:120px; background: #de7a59; }
+        }
+
+        @-webkit-keyframes green {
+              0%    { top:110px; background: #a1cb5c; opacity:1; }
+             10%    { top:110px; background: #CBE0AC; opacity:1; }
+             14%    { background: #f4f4f4; top:110px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #EFEFEF; top:0; opacity:1; }
+             30%    { background:#E6E4E4; }
+             70%    { top:110px; }
+            100%    { top:110px; background: #a1cb5c; }
+        }
+
+        @keyframes green {
+              0%    { top:110px; background: #a1cb5c; opacity:1; }
+             10%    { top:110px; background: #CBE0AC; opacity:1; }
+             14%    { background: #f4f4f4; top:110px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #EFEFEF; top:0; opacity:1; }
+             30%    { background:#E6E4E4; }
+             70%    { top:110px; }
+            100%    { top:110px; background: #a1cb5c; }
+        }
+
+        @-webkit-keyframes blue {
+              0%    { top:100px; background: #55bce6; opacity:1; }
+             10%    { top:100px; background: #BFE8F8; opacity:1; }
+             14%    { background: #f4f4f4; top:100px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #f4f4f4; top:0; opacity:0; }
+             45%    { background: #EFEFEF; top:0; opacity:0.2; }
+            100%    { top:100px; background: #55bce6; }
+        }
+
+        @keyframes blue {
+              0%    { top:100px; background: #55bce6; opacity:1; }
+             10%    { top:100px; background: #BFE8F8; opacity:1; }
+             14%    { background: #f4f4f4; top:100px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #fff; top:0; opacity:0; }
+             45%    { background: #EFEFEF; top:0; opacity:0.2; }
+            100%    { top:100px; background: #55bce6; }
+        }
+    </style>
+
+    <!--[if lt IE 9]>
+      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"></script>
+    <![endif]-->
+  </head>
+
+  <body class="embed-body">
+
+       <script>
+            var  userAgent = navigator.userAgent.toLowerCase(),
+                check = function(regex){ return regex.test(userAgent); };
+            if (!check(/opera/) && (check(/msie/) || check(/trident/))) {
+                var m = /msie (\d+\.\d+)/.exec(userAgent);
+                if (m && parseFloat(m[1]) < 10.0) {
+                    document.write(
+                        '<div id="id-error-mask" class="errormask">',
+                            '<div class="error-body" align="center">',
+                                '<div id="id-error-mask-title" class="title">Your browser is not supported.</div>',
+                                '<div id="id-error-mask-text">Sorry, ONLYOFFICE Document is currently only supported in the latest versions of the Chrome, Firefox, Safari or Internet Explorer web browsers.</div>',
+                            '</div>',
+                        '</div>'
+                    );
+                }
+            }
+
+            function getUrlParams() {
+                var e,
+                    a = /\+/g,  // Regex for replacing addition symbol with a space
+                    r = /([^&=]+)=?([^&]*)/g,
+                    d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
+                    q = window.location.search.substring(1),
+                    urlParams = {};
+
+                while (e = r.exec(q))
+                    urlParams[d(e[1])] = d(e[2]);
+
+                return urlParams;
+            }
+
+            function encodeUrlParam(str) {
+                return str.replace(/&/g, '&amp;')
+                        .replace(/"/g, '&quot;')
+                        .replace(/'/g, '&#39;')
+                        .replace(/</g, '&lt;')
+                        .replace(/>/g, '&gt;');
+            }
+
+            var params = getUrlParams(),
+                lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
+                customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+                margin = (customer !== '') ? 50 : 20,
+                loading = 'Loading...',
+                logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
+
+            window.frameEditorId = params["frameEditorId"];
+
+            if ( lang == 'de')      loading = 'Ladevorgang...';
+            else if ( lang == 'es') loading = 'Cargando...';
+            else if ( lang == 'fr') loading = 'Chargement en cours...';
+            else if ( lang == 'it') loading = 'Caricamento in corso...';
+            else if ( lang == 'pt') loading = 'Carregando...';
+            else if ( lang == 'ru') loading = 'Загрузка...';
+            else if ( lang == 'sl') loading = 'Nalaganje...';
+            else if ( lang == 'tr') loading = 'Yükleniyor...';
+            else if ( lang == 'bg') loading = 'Зареждане...';
+            else if ( lang == 'cs') loading = 'Nahrávám...';
+            else if ( lang == 'hu') loading = 'Betöltés...';
+            else if ( lang == 'ja') loading = '読み込み中...';
+            else if ( lang == 'ko') loading = '로드 중...';
+            else if ( lang == 'lv') loading = 'Ieladēšana ...';
+            else if ( lang == 'nl') loading = 'Laden...';
+            else if ( lang == 'pl') loading = 'Ładowanie...';
+            else if ( lang == 'sk') loading = 'Nahrávam...';
+            else if ( lang == 'uk') loading = 'Завантаження...';
+            else if ( lang == 'vi') loading = 'Đang tải...';
+            else if ( lang == 'zh') loading = '加载中...';
+
+            document.write(
+                '<div id="loading-mask" class="loadmask">' +
+                    '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
+                        ((logo!==null) ? logo :
+                        '<div class="loader-page-romb">' +
+                            '<div class="romb" id="blue"></div>' +
+                            '<div class="romb" id="green"></div>' +
+                            '<div class="romb" id="red"></div>' +
+                        '</div>') +
+                    '</div>' +
+                    '<div class="loader-page-text">' +  customer +
+                    '<div class="loader-page-text-loading">' + loading + '</div>' +
+                    '</div>' +
+                '</div>');
+        </script>
+
+      <div id="editor_sdk" class="viewer" style="overflow: hidden;" tabindex="-1"></div>
+
+      <div class="overlay-controls" style="margin-left: -32px">
+          <ul class="left">
+              <li id="id-btn-zoom-in"><button class="overlay svg-icon zoom-up"></button></li>
+              <li id="id-btn-zoom-out"><button class="overlay svg-icon zoom-down"></button></li>
+          </ul>
+      </div>
+
+      <div class="toolbar" id="toolbar">
+          <div class="group left">
+              <div id="box-tools" class="dropdown">
+                  <button class="control-btn svg-icon tools"></button>
+              </div>
+          </div>
+          <div class="group center">
+              <span><a id="header-logo" class="brand-logo" href="http://www.onlyoffice.com/" target="_blank"></a></span>
+          </div>
+          <div class="group right">
+              <div class="item"><input id="page-number" class="form-control input-xs masked" type="text" value="0"><span class="text" id="pages" tabindex="-1">of 0</span></div>
+              <div class="item separator"></div>
+              <div class="item"><button id="id-btn-close" class="control-btn close"><span aria-hidden="true">&times;</span></button></div>
+          </div>
+      </div>
+
+      <div class="modal fade error" id="id-critical-error-dialog" tabindex="-1" role="dialog">
+          <div class="modal-dialog">
+              <div class="modal-content">
+                  <div class="modal-header">
+                      <h4 id="id-critical-error-title"></h4>
+                  </div>
+                  <div class="modal-body">
+                      <p id="id-critical-error-message"></p>
+                  </div>
+                  <div class="modal-footer">
+                      <button id="id-critical-error-close" class="btn btn-sm btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
+                  </div>
+              </div>
+          </div>
+      </div>
+
+      <div id="id-loadmask" class="hide modal cmd-loader-body">
+          <div class="cmd-loader-image"></div>
+          <div class="cmd-loader-title">Please wait...</div>
+      </div>
+
+      <div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
+
+      <!--vendor-->
+      <script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
+      <script type="text/javascript" src="../../../vendor/jquery/jquery.browser.min.js"></script>
+      <script type="text/javascript" src="../../../vendor/bootstrap/dist/js/bootstrap.min.js"></script>
+      <script type="text/javascript" src="../../../vendor/sockjs/sockjs.min.js"></script>
+      <script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
+
+      <!--sdk-->
+      <script type="text/javascript" src="../../../../sdkjs/common/AllFonts.js"></script>
+      <script type="text/javascript" src="../../../../sdkjs/word/sdk-all-min.js"></script>
+
+      <!--application-->
+      <script type="text/javascript" src="../../../apps/documenteditor/embed/app-all.js"></script>
+      <script type="text/javascript">
+          var isBrowserSupported = function() {
+              return  ($.browser.msie     && parseFloat($.browser.version) > 9)     ||
+                      ($.browser.chrome   && parseFloat($.browser.version) > 7)     ||
+                      ($.browser.safari   && parseFloat($.browser.version) > 4)     ||
+                      ($.browser.opera    && parseFloat($.browser.version) > 10.4)  ||
+                      ($.browser.mozilla  && parseFloat($.browser.version) > 3.9);
+          };
+
+          if (!isBrowserSupported()){
+              document.write(
+                  '<div id="id-error-mask" class="errormask">',
+                      '<div class="error-body" align="center">',
+                          '<div id="id-error-mask-title" class="title">Your browser is not supported.</div>',
+                          '<div id="id-error-mask-text">Sorry, ONLYOFFICE Document is currently only supported in the latest versions of the Chrome, Firefox, Safari or Internet Explorer web browsers.</div>',
+                      '</div>',
+                  '</div>'
+              );
+          }
+      </script>
+  </body>
+</html>

apps/documenteditor/main/app/controller/Main.js

@@ -97,38 +97,9 @@ define([
                         'settings:apply': _.bind(this.applySettings, this)
                     }
                 });
-            },
 
-            onLaunch: function() {
+                var me = this,
-                var me = this;
+                    styleNames = ['Normal', 'No Spacing', 'Heading 1', 'Heading 2', 'Heading 3', 'Heading 4', 'Heading 5',
-
-                this.stackLongActions = new Common.IrregularStack({
-                    strongCompare   : function(obj1, obj2){return obj1.id === obj2.id && obj1.type === obj2.type;},
-                    weakCompare     : function(obj1, obj2){return obj1.type === obj2.type;}
-                });
-
-                this._state = {isDisconnected: false, usersCount: 1, fastCoauth: true, lostEditingRights: false, licenseType: false};
-                this.languages = null;
-                this.translationTable = [];
-                this.isModalShowed = 0;
-                // Initialize viewport
-
-                if (!Common.Utils.isBrowserSupported()){
-                    Common.Utils.showBrowserRestriction();
-                    Common.Gateway.reportError(undefined, this.unsupportedBrowserErrorText);
-                    return;
-                }
-
-                var value = Common.localStorage.getItem("de-settings-fontrender");
-                if (value === null)
-                    window.devicePixelRatio > 1 ? value = '1' : '0';
-                Common.Utils.InternalSettings.set("de-settings-fontrender", value);
-
-                // Initialize api
-
-                window["flat_desine"] = true;
-
-                var styleNames = ['Normal', 'No Spacing', 'Heading 1', 'Heading 2', 'Heading 3', 'Heading 4', 'Heading 5',
                                   'Heading 6', 'Heading 7', 'Heading 8', 'Heading 9', 'Title', 'Subtitle', 'Quote', 'Intense Quote', 'List Paragraph', 'footnote text'],
                 translate = {
                     'Series': this.txtSeries,
@@ -164,16 +135,39 @@ define([
                     "Hyperlink": this.txtHyperlink
                 };
                 styleNames.forEach(function(item){
-                    translate[item] = me.translationTable[item] = me['txtStyle_' + item.replace(/ /g, '_')] || item;
+                    translate[item] = me['txtStyle_' + item.replace(/ /g, '_')] || item;
                 });
-                me.translationTable['Header'] = this.txtHeader;
+                me.translationTable = translate;
-                me.translationTable['Footer'] = this.txtFooter;
+            },
 
-                this.api = new Asc.asc_docs_api({
+            onLaunch: function() {
-                    'id-view'  : 'editor_sdk',
+                var me = this;
-                    'translate': translate
+
+                this.stackLongActions = new Common.IrregularStack({
+                    strongCompare   : function(obj1, obj2){return obj1.id === obj2.id && obj1.type === obj2.type;},
+                    weakCompare     : function(obj1, obj2){return obj1.type === obj2.type;}
                 });
 
+                this._state = {isDisconnected: false, usersCount: 1, fastCoauth: true, lostEditingRights: false, licenseType: false};
+                this.languages = null;
+                this.isModalShowed = 0;
+                // Initialize viewport
+
+                if (!Common.Utils.isBrowserSupported()){
+                    Common.Utils.showBrowserRestriction();
+                    Common.Gateway.reportError(undefined, this.unsupportedBrowserErrorText);
+                    return;
+                }
+
+                var value = Common.localStorage.getItem("de-settings-fontrender");
+                if (value === null)
+                    window.devicePixelRatio > 1 ? value = '1' : '0';
+                Common.Utils.InternalSettings.set("de-settings-fontrender", value);
+
+                // Initialize api
+                window["flat_desine"] = true;
+                this.api = this.getApplication().getController('Viewport').getApi();
+
                 if (this.api){
                     this.api.SetDrawingFreeze(true);
                     switch (value) {
@@ -365,6 +359,9 @@ define([
                 if (this.appOptions.location == 'us' || this.appOptions.location == 'ca')
                     Common.Utils.Metric.setDefaultMetric(Common.Utils.Metric.c_MetricUnits.inch);
 
+                if (!this.editorConfig.customization || !(this.editorConfig.customization.loaderName || this.editorConfig.customization.loaderLogo))
+                    $('#editor_sdk').append('<div class="doc-placeholder">' + '<div class="line"></div>'.repeat(20) + '</div>');
+
                 Common.Controllers.Desktop.init(this.appOptions);
             },
 
@@ -1026,7 +1023,6 @@ define([
                             if (me.needToUpdateVersion)
                                 toolbarController.onApiCoAuthoringDisconnect();
                             me.api.UpdateInterfaceState();
-                            me.fillTextArt(me.api.asc_getTextArtPreviews());
 
                             Common.NotificationCenter.trigger('document:ready', 'main');
                             me.applyLicense();
@@ -1051,6 +1047,8 @@ define([
 
                 $(document).on('contextmenu', _.bind(me.onContextMenu, me));
                 Common.Gateway.documentReady();
+
+                $('.doc-placeholder').remove();
             },
 
             onLicenseChanged: function(params) {
@@ -1809,25 +1807,25 @@ define([
 
                 shapeStore.reset();
 
-                var groupscount = groupNames.length;
                 _.each(groupNames, function(groupName, index){
                     var store = new Backbone.Collection([], {
                         model: DE.Models.ShapeModel
-                    });
+                    }),
+                        arr = [];
 
                     var cols = (shapes[index].length) > 18 ? 7 : 6,
                         height = Math.ceil(shapes[index].length/cols) * 35 + 3,
                         width = 30 * cols;
 
                     _.each(shapes[index], function(shape, idx){
-                        store.add({
+                        arr.push({
                             data     : {shapeType: shape.Type},
                             tip      : me['txtShape_' + shape.Type] || (me.textShape + ' ' + (idx+1)),
                             allowSelected : true,
                             selected: false
                         });
                     });
-
+                    store.add(arr);
                     shapegrouparray.push({
                         groupName   : me.shapeGroupNames[index],
                         groupStore  : store,
@@ -1837,19 +1835,20 @@ define([
                 });
 
                 shapeStore.add(shapegrouparray);
-
                 setTimeout(function(){
-                    me.getApplication().getController('Toolbar').fillAutoShapes();
+                    me.getApplication().getController('Toolbar').onApiAutoShapes();
                 }, 50);
-
             },
 
             fillTextArt: function(shapes){
-                if (_.isEmpty(shapes)) return;
+                var arr = [],
-
-                var me = this, arr = [],
                     artStore = this.getCollection('Common.Collections.TextArt');
 
+                if (!shapes && artStore.length>0) {// shapes == undefined when update textart collection (from asc_onSendThemeColors)
+                    shapes = this.api.asc_getTextArtPreviews();
+                }
+                if (_.isEmpty(shapes)) return;
+
                 _.each(shapes, function(shape, index){
                     arr.push({
                         imageUrl : shape,
@@ -1859,15 +1858,6 @@ define([
                     });
                 });
                 artStore.reset(arr);
-
-                setTimeout(function(){
-                    me.getApplication().getController('Toolbar').fillTextArt();
-                }, 50);
-
-                setTimeout(function(){
-                    me.getApplication().getController('RightMenu').fillTextArt();
-                }, 50);
-
             },
 
             updateThemeColors: function() {
@@ -1875,10 +1865,6 @@ define([
                 setTimeout(function(){
                     me.getApplication().getController('RightMenu').UpdateThemeColors();
                 }, 50);
-                setTimeout(function(){
-                    me.getApplication().getController('DocumentHolder').getView().updateThemeColors();
-                }, 50);
-
                 setTimeout(function(){
                     me.getApplication().getController('Toolbar').updateThemeColors();
                 }, 50);
@@ -1890,7 +1876,7 @@ define([
                     this.updateThemeColors();
                     var me = this;
                     setTimeout(function(){
-                        me.fillTextArt(me.api.asc_getTextArtPreviews());
+                        me.fillTextArt();
                     }, 1);
                 }
             },

apps/documenteditor/main/app/controller/RightMenu.js

@@ -251,10 +251,6 @@ define([
             this.rightmenu.textartSettings.UpdateThemeColors();
         },
 
-        fillTextArt:  function() {
-            this.rightmenu.textartSettings.fillTextArt();
-        },
-
         updateMetricUnit: function() {
             this.rightmenu.headerSettings.updateMetricUnit();
             this.rightmenu.paragraphSettings.updateMetricUnit();
@@ -276,7 +272,7 @@ define([
             }
 
             if (this.editMode && this.api) {
-                this.rightmenu.shapeSettings.createDelayedElements();
+                // this.rightmenu.shapeSettings.createDelayedElements();
                 var selectedElements = this.api.getSelectedElements();
                 if (selectedElements.length>0) {
                     this.onFocusObject(selectedElements, !Common.localStorage.getBool("de-hide-right-settings", this.rightmenu.defaultHideRightMenu));

apps/documenteditor/main/app/controller/Toolbar.js

@@ -103,12 +103,15 @@ define([
             this.diagramEditor = null;
             this._isAddingShape = false;
             this.editMode = true;
+            this.binding = {};
 
             this.addListeners({
                 'Toolbar': {
                     'insert:break'      : this.onClickPageBreak,
                     'change:compact'    : this.onClickChangeCompact,
-                    'home:open'         : this.onHomeOpen
+                    'home:open'         : this.onHomeOpen,
+                    'add:chart'         : this.onSelectChart,
+                    'insert:textart'    : this.onInsertTextart
                 },
                 'FileMenu': {
                     'menu:hide': this.onFileMenu.bind(this, 'hide'),
@@ -312,7 +315,6 @@ define([
             toolbar.mnuColorSchema.on('item:click',                     _.bind(this.onColorSchemaClick, this));
             toolbar.mnuColorSchema.on('show:after',                     _.bind(this.onColorSchemaShow, this));
             toolbar.btnMailRecepients.on('click',                       _.bind(this.onSelectRecepientsClick, this));
-            toolbar.mnuInsertChartPicker.on('item:click',               _.bind(this.onSelectChart, this));
             toolbar.mnuPageNumberPosPicker.on('item:click',             _.bind(this.onInsertPageNumberClick, this));
             toolbar.btnEditHeader.menu.on('item:click',                 _.bind(this.onEditHeaderFooterClick, this));
             toolbar.mnuPageNumCurrentPos.on('click',                    _.bind(this.onPageNumCurrentPosClick, this));
@@ -370,7 +372,7 @@ define([
                 this.api.asc_registerCallback('asc_onCoAuthoringDisconnect', _.bind(this.onApiCoAuthoringDisconnect, this));
                 Common.NotificationCenter.on('api:disconnect', _.bind(this.onApiCoAuthoringDisconnect, this));
                 this.api.asc_registerCallback('asc_onCanCopyCut', _.bind(this.onApiCanCopyCut, this));
-                this.api.asc_registerCallback('asc_onMathTypes', _.bind(this.onMathTypes, this));
+                this.api.asc_registerCallback('asc_onMathTypes', _.bind(this.onApiMathTypes, this));
                 this.api.asc_registerCallback('asc_onColumnsProps', _.bind(this.onColumnsProps, this));
                 this.api.asc_registerCallback('asc_onSectionProps', _.bind(this.onSectionProps, this));
                 this.api.asc_registerCallback('asc_onContextMenu', _.bind(this.onContextMenu, this));
@@ -1838,11 +1840,8 @@ define([
             }
         },
 
-        onSelectChart: function(picker, item, record) {
+        onSelectChart: function(type) {
-            if (!record) return;
-
             var me      = this,
-                type    = record.get('type'),
                 chart = false;
 
             var selectedElements = me.api.getSelectedElements();
@@ -1882,6 +1881,19 @@ define([
             }
         },
 
+        onInsertTextart: function (data) {
+            if (this.api) {
+                this.toolbar.fireEvent('inserttextart', this.toolbar);
+                this.api.AddTextArt(data);
+
+                if (this.toolbar.btnInsertShape.pressed)
+                    this.toolbar.btnInsertShape.toggle(false, true);
+
+                Common.NotificationCenter.trigger('edit:complete', this.toolbar, this.toolbar.btnInsertTextArt);
+                Common.component.Analytics.trackEvent('ToolBar', 'Add Text Art');
+            }
+        },
+
         onInsertPageNumberClick: function(picker, item, record) {
             if (this.api)
                 this.api.put_PageNum(record.get('data').type, record.get('data').subtype);
@@ -2323,10 +2335,49 @@ define([
             this._state.clrtext_asccolor = color;
         },
 
+        onApiAutoShapes: function() {
+            var me = this;
+            var onShowBefore = function(menu) {
+                me.fillAutoShapes();
+                menu.off('show:before', onShowBefore);
+            };
+            me.toolbar.btnInsertShape.menu.on('show:before', onShowBefore);
+        },
+
         fillAutoShapes: function() {
             var me = this,
                 shapesStore = this.getApplication().getCollection('ShapeGroups');
 
+            var onShowAfter = function(menu) {
+                for (var i = 0; i < shapesStore.length; i++) {
+                    var shapePicker = new Common.UI.DataViewSimple({
+                        el: $('#id-toolbar-menu-shapegroup' + i, menu.items[i].$el),
+                        store: shapesStore.at(i).get('groupStore'),
+                        parentMenu: menu.items[i].menu,
+                        itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>')
+                    });
+                    shapePicker.on('item:click', function(picker, item, record, e) {
+                        if (me.api) {
+                            if (record) {
+                                me._addAutoshape(true, record.get('data').shapeType);
+                                me._isAddingShape = true;
+                            }
+
+                            if (me.toolbar.btnInsertText.pressed) {
+                                me.toolbar.btnInsertText.toggle(false, true);
+                            }
+
+                            if (e.type !== 'click')
+                                me.toolbar.btnInsertShape.menu.hide();
+                            Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnInsertShape);
+                            Common.component.Analytics.trackEvent('ToolBar', 'Add Shape');
+                        }
+                    });
+                }
+                menu.off('show:after', onShowAfter);
+            };
+            me.toolbar.btnInsertShape.menu.on('show:after', onShowAfter);
+
             for (var i = 0; i < shapesStore.length; i++) {
                 var shapeGroup = shapesStore.at(i);
 
@@ -2339,34 +2390,7 @@ define([
                         ]
                     })
                 });
-
                 me.toolbar.btnInsertShape.menu.addItem(menuItem);
-
-                var shapePicker = new Common.UI.DataView({
-                    el: $('#id-toolbar-menu-shapegroup' + i),
-                    store: shapeGroup.get('groupStore'),
-                    parentMenu: menuItem.menu,
-                    showLast: false,
-                    itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>')
-                });
-
-                shapePicker.on('item:click', function(picker, item, record, e) {
-                    if (me.api) {
-                        if (record) {
-                            me._addAutoshape(true, record.get('data').shapeType);
-                            me._isAddingShape = true;
-                        }
-
-                        if (me.toolbar.btnInsertText.pressed) {
-                            me.toolbar.btnInsertText.toggle(false, true);
-                        }
-
-                        if (e.type !== 'click')
-                            me.toolbar.btnInsertShape.menu.hide();
-                        Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnInsertShape);
-                        Common.component.Analytics.trackEvent('ToolBar', 'Add Shape');
-                    }
-                });
             }
         },
 
@@ -2375,12 +2399,44 @@ define([
 
             var me = this, equationsStore = this.getApplication().getCollection('EquationGroups');
 
-            me.equationPickers = [];
             me.toolbar.btnInsertEquation.menu.removeAll();
-            
+            var onShowAfter = function(menu) {
+                for (var i = 0; i < equationsStore.length; ++i) {
+                    var equationPicker = new Common.UI.DataViewSimple({
+                        el: $('#id-toolbar-menu-equationgroup' + i, menu.items[i].$el),
+                        parentMenu: menu.items[i].menu,
+                        store: equationsStore.at(i).get('groupStore'),
+                        scrollAlwaysVisible: true,
+                        itemTemplate: _.template('<div class="item-equation" '+
+                            'style="background-position:<%= posX %>px <%= posY %>px;" >' +
+                            '<div style="width:<%= width %>px;height:<%= height %>px;" id="<%= id %>"></div>' +
+                            '</div>')
+                    });
+                    equationPicker.on('item:click', function(picker, item, record, e) {
+                        if (me.api) {
+                            if (record)
+                                me.api.asc_AddMath(record.get('data').equationType);
+
+                            if (me.toolbar.btnInsertText.pressed) {
+                                me.toolbar.btnInsertText.toggle(false, true);
+                            }
+                            if (me.toolbar.btnInsertShape.pressed) {
+                                me.toolbar.btnInsertShape.toggle(false, true);
+                            }
+
+                            if (e.type !== 'click')
+                                me.toolbar.btnInsertEquation.menu.hide();
+                            Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnInsertEquation);
+                            Common.component.Analytics.trackEvent('ToolBar', 'Add Equation');
+                        }
+                    });
+                }
+                menu.off('show:after', onShowAfter);
+            };
+            me.toolbar.btnInsertEquation.menu.on('show:after', onShowAfter);
+
             for (var i = 0; i < equationsStore.length; ++i) {
                 var equationGroup = equationsStore.at(i);
-
                 var menuItem = new Common.UI.MenuItem({
                     caption: equationGroup.get('groupName'),
                     menu: new Common.UI.Menu({
@@ -2392,56 +2448,7 @@ define([
                         ]
                     })
                 });
-
                 me.toolbar.btnInsertEquation.menu.addItem(menuItem);
-
-                var equationPicker = new Common.UI.DataView({
-                    el: $('#id-toolbar-menu-equationgroup' + i),
-                    store: equationGroup.get('groupStore'),
-                    parentMenu: menuItem.menu,
-                    showLast: false,
-                    itemTemplate: _.template('<div class="item-equation" '+
-                        'style="background-position:<%= posX %>px <%= posY %>px;" >' +
-                        '<div style="width:<%= width %>px;height:<%= height %>px;" id="<%= id %>">')
-                });
-                if (equationGroup.get('groupHeight').length) {
-
-                    me.equationPickers.push(equationPicker);
-                    me.toolbar.btnInsertEquation.menu.on('show:after', function () {
-
-                        if (me.equationPickers.length) {
-                            var element = $(this.el).find('.over').find('.menu-shape');
-                            if (element.length) {
-                                for (var i = 0; i < me.equationPickers.length; ++i) {
-                                    if (element[0].id == me.equationPickers[i].el.id) {
-                                        me.equationPickers[i].scroller.update({alwaysVisibleY: true});
-                                        me.equationPickers.splice(i, 1);
-                                        return;
-                                    }
-                                }
-                            }
-                        }
-                    });
-                }
-
-                equationPicker.on('item:click', function(picker, item, record, e) {
-                    if (me.api) {
-                        if (record)
-                            me.api.asc_AddMath(record.get('data').equationType);
-
-                        if (me.toolbar.btnInsertText.pressed) {
-                            me.toolbar.btnInsertText.toggle(false, true);
-                        }
-                        if (me.toolbar.btnInsertShape.pressed) {
-                            me.toolbar.btnInsertShape.toggle(false, true);
-                        }
-
-                         if (e.type !== 'click')
-                             me.toolbar.btnInsertEquation.menu.hide();
-                        Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnInsertEquation);
-                        Common.component.Analytics.trackEvent('ToolBar', 'Add Equation');
-                    }
-                });
             }
         },
 
@@ -2453,6 +2460,16 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this.toolbar, this.toolbar.btnInsertEquation);
         },
 
+        onApiMathTypes: function(equation) {
+            this._equationTemp = equation;
+            var me = this;
+            var onShowBefore = function(menu) {
+                me.onMathTypes(me._equationTemp);
+                me.toolbar.btnInsertEquation.menu.off('show:before', onShowBefore);
+            };
+            me.toolbar.btnInsertEquation.menu.on('show:before', onShowBefore);
+        },
+
         onMathTypes: function(equation) {
             var equationgrouparray = [],
                 equationsStore = this.getCollection('EquationGroups');
@@ -2493,35 +2510,29 @@ define([
                     translationTable[Common.define.c_oAscMathType[name]] = this[translate];
                 }
             }
-
+            var i,id = 0, count = 0, length = 0, width = 0, height = 0, store = null, list = null, eqStore = null, eq = null, data;
-            var i,id = 0, count = 0, length = 0, width = 0, height = 0, store = null, list = null, eqStore = null, eq = null;
 
             if (equation) {
-
+                data = equation.get_Data();
-                count = equation.get_Data().length;
+                count = data.length;
-
                 if (count) {
                     for (var j = 0; j < count; ++j) {
-                        id = equation.get_Data()[j].get_Id();
+                        var group = data[j];
-                        width = equation.get_Data()[j].get_W();
+                        id = group.get_Id();
-                        height = equation.get_Data()[j].get_H();
+                        width = group.get_W();
+                        height = group.get_H();
 
                         store = new Backbone.Collection([], {
                             model: DE.Models.EquationModel
                         });
 
                         if (store) {
-
+                            var allItemsCount = 0, itemsCount = 0, ids = 0, arr = [];
-                            var allItemsCount = 0, itemsCount = 0, ids = 0;
+                            length = group.get_Data().length;
-
-                            length = equation.get_Data()[j].get_Data().length;
-
                             for (i = 0; i < length; ++i) {
-                                eqStore = equation.get_Data()[j].get_Data()[i];
+                                eqStore = group.get_Data()[i];
-
                                 itemsCount = eqStore.get_Data().length;
                                 for (var p = 0; p < itemsCount; ++p) {
-
                                     eq = eqStore.get_Data()[p];
                                     ids = eq.get_Id();
 
@@ -2530,8 +2541,7 @@ define([
                                     if (translationTable.hasOwnProperty(ids)) {
                                         translate = translationTable[ids];
                                     }
-
+                                    arr.push({
-                                    store.add({
                                         data            : {equationType: ids},
                                         tip             : translate,
                                         allowSelected   : true,
@@ -2545,7 +2555,7 @@ define([
 
                                 allItemsCount += itemsCount;
                             }
-
+                            store.add(arr);
                             width = c_oAscMathMainTypeStrings[id][1] * (width + 10);  // 4px margin + 4px margin + 1px border + 1px border
 
                             var normHeight = parseInt(370 / (height + 10)) * (height + 10);
@@ -2557,57 +2567,12 @@ define([
                             });
                         }
                     }
-
                     equationsStore.add(equationgrouparray);
-
                     this.fillEquations();
                 }
             }
         },
 
-        fillTextArt: function() {
-            if (!this.toolbar.btnInsertTextArt.rendered) return;
-            
-            var me = this;
-            if (this.toolbar.mnuTextArtPicker) {
-                var models = this.getApplication().getCollection('Common.Collections.TextArt').models,
-                    count = this.toolbar.mnuTextArtPicker.store.length;
-                if (count>0 && count==models.length) {
-                    var data = this.toolbar.mnuTextArtPicker.store.models;
-                    _.each(models, function(template, index){
-                        data[index].set('imageUrl', template.get('imageUrl'));
-                    });
-                } else {
-                    this.toolbar.mnuTextArtPicker.store.reset(models);
-                }
-            } else {
-                this.toolbar.mnuTextArtPicker = new Common.UI.DataView({
-                    el: $('#id-toolbar-menu-insart'),
-                    store: this.getApplication().getCollection('Common.Collections.TextArt'),
-                    parentMenu: this.toolbar.btnInsertTextArt.menu,
-                    showLast: false,
-                    itemTemplate: _.template('<div class="item-art"><img src="<%= imageUrl %>" id="<%= id %>" style="width:50px;height:50px;"></div>')
-                });
-
-                this.toolbar.mnuTextArtPicker.on('item:click', function(picker, item, record, e) {
-                    if (me.api) {
-                        if (record) {
-                            me.toolbar.fireEvent('inserttextart', me.toolbar);
-                            me.api.AddTextArt(record.get('data'));
-                        }
-
-                        if (me.toolbar.btnInsertShape.pressed)
-                            me.toolbar.btnInsertShape.toggle(false, true);
-
-                         if (e.type !== 'click')
-                             me.toolbar.btnInsertTextArt.menu.hide();
-                        Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnInsertTextArt);
-                        Common.component.Analytics.trackEvent('ToolBar', 'Add Text Art');
-                    }
-                });
-            }
-        },
-
         activateControls: function() {
             _.each(this.toolbar.toolbarControls, function(item){
                 item.setDisabled(false);

apps/documenteditor/main/app/controller/Viewport.js

@@ -116,11 +116,20 @@ define([
             Common.NotificationCenter.on('api:disconnect',              this.onApiCoAuthoringDisconnect.bind(this));
         },
 
+        getApi: function() {
+            return this.api;
+        },
 
         // When our application is ready, lets get started
         onLaunch: function() {
             // Create and render main view
             this.viewport = this.createView('Viewport').render();
+
+            this.api = new Asc.asc_docs_api({
+                'id-view'  : 'editor_sdk',
+                'translate': this.getApplication().getController('Main').translationTable
+            });
+
             this.header   = this.createView('Common.Views.Header', {
                 headerCaption: 'Document Editor',
                 storeUsers: DE.getCollection('Common.Collections.Users')

apps/documenteditor/main/app/view/ChartSettings.js

@@ -84,16 +84,16 @@ define([
             this._originalProps = null;
 
             this.render();
-
-            this.labelWidth = $(this.el).find('#chart-label-width');
-            this.labelHeight = $(this.el).find('#chart-label-height');
         },
 
         render: function () {
-            var el = $(this.el);
+            var el = this.$el || $(this.el);
             el.html(this.template({
                 scope: this
             }));
+
+            this.labelWidth = el.find('#chart-label-width');
+            this.labelHeight = el.find('#chart-label-height');
         },
 
         setApi: function(api) {

apps/documenteditor/main/app/view/DocumentHolder.js

@@ -743,21 +743,11 @@ define([
             };
 
             this.changeLanguageMenu = function(menu) {
-                var i;
                 if (me._currLang.id===null || me._currLang.id===undefined) {
-                    for (i=0; i<menu.items.length; i++)
+                    menu.clearAll();
-                        menu.items[i].setChecked(false);
-                    menu.currentCheckedItem = undefined;
                 } else {
-                    for (i=0; i<menu.items.length; i++) {
+                    var index = _.findIndex(menu.items, {langid: me._currLang.id});
-                        if (menu.items[i].options.langid === me._currLang.id) {
+                    (index>-1) && !menu.items[index].checked && menu.setChecked(index, true);
-                            menu.currentCheckedItem = menu.items[i];
-                            if (!menu.items[i].checked)
-                                menu.items[i].setChecked(true);
-                            break;
-                        } else if (menu.items[i].checked)
-                            menu.items[i].setChecked(false);
-                    }
                 }
             };
 
@@ -1850,11 +1840,6 @@ define([
             }
         },
 
-        updateThemeColors: function() {
-            this.effectcolors   = Common.Utils.ThemeColor.getEffectColors();
-            this.standartcolors = Common.Utils.ThemeColor.getStandartColors();
-        },
-
         onCutCopyPaste: function(item, e) {
             var me = this;
             if (me.api) {
@@ -2773,13 +2758,21 @@ define([
                 })
             });
 
+            var langTemplate = _.template([
+                '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= value %>" class="<% if (checked) { %> checked <% } %>">',
+                '<i class="icon <% if (spellcheck) { %> img-toolbarmenu spellcheck-lang <% } %>"></i>',
+                '<%= caption %>',
+                '</a>'
+            ].join(''));
+
             me.langTableMenu = new Common.UI.MenuItem({
                 caption     : me.langText,
-                menu        : new Common.UI.Menu({
+                menu        : new Common.UI.MenuSimple({
                     cls: 'lang-menu',
                     menuAlign: 'tl-tr',
                     restoreHeight: 285,
                     items   : [],
+                    itemTemplate: langTemplate,
                     search: true
                 })
             });
@@ -3426,11 +3419,12 @@ define([
 
             me.langParaMenu = new Common.UI.MenuItem({
                 caption     : me.langText,
-                menu        : new Common.UI.Menu({
+                menu        : new Common.UI.MenuSimple({
                     cls: 'lang-menu',
                     menuAlign: 'tl-tr',
                     restoreHeight: 285,
                     items   : [],
+                    itemTemplate: langTemplate,
                     search: true
                 })
             });
@@ -3828,58 +3822,39 @@ define([
             var me = this;
 
             if (langs && langs.length > 0 && me.langParaMenu && me.langTableMenu) {
-                me.langParaMenu.menu.removeAll();
+                var arrPara = [], arrTable = [];
-                me.langTableMenu.menu.removeAll();
+                _.each(langs, function(lang) {
-                _.each(langs, function(lang, index){
+                    var item = {
-                    me.langParaMenu.menu.addItem(new Common.UI.MenuItem({
                         caption     : lang.displayValue,
                         value       : lang.value,
                         checkable   : true,
-                        toggleGroup : 'popupparalang',
                         langid      : lang.code,
-                        spellcheck   : lang.spellcheck,
+                        spellcheck   : lang.spellcheck
-                        template: _.template([
+                    };
-                            '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= options.value %>">',
+                    arrPara.push(item);
-                                '<i class="icon <% if (options.spellcheck) { %> img-toolbarmenu spellcheck-lang <% } %>"></i>',
+                    arrTable.push(_.clone(item));
-                                '<%= caption %>',
+                });
-                            '</a>'
+                me.langParaMenu.menu.resetItems(arrPara);
-                        ].join(''))
+                me.langTableMenu.menu.resetItems(arrTable);
-                    }).on('click', function(item, e){
-                        if (me.api){
-                            if (!_.isUndefined(item.options.langid))
-                                me.api.put_TextPrLang(item.options.langid);
 
-                            me._currLang.paraid = item.options.langid;
+                me.langParaMenu.menu.on('item:click', function(menu, item){
-                            me.langParaMenu.menu.currentCheckedItem = item;
+                    if (me.api){
+                        if (!_.isUndefined(item.langid))
+                            me.api.put_TextPrLang(item.langid);
 
-                            me.fireEvent('editcomplete', me);
+                        me._currLang.paraid = item.langid;
-                        }
+                        me.fireEvent('editcomplete', me);
-                    }));
+                    }
+                });
 
-                    me.langTableMenu.menu.addItem(new Common.UI.MenuItem({
+                me.langTableMenu.menu.on('item:click', function(menu, item, e){
-                        caption     : lang.displayValue,
+                    if (me.api){
-                        value       : lang.value,
+                        if (!_.isUndefined(item.langid))
-                        checkable   : true,
+                            me.api.put_TextPrLang(item.langid);
-                        toggleGroup : 'popuptablelang',
-                        langid      : lang.code,
-                        spellcheck   : lang.spellcheck,
-                        template: _.template([
-                            '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= options.value %>">',
-                                '<i class="icon <% if (options.spellcheck) { %> img-toolbarmenu spellcheck-lang <% } %>"></i>',
-                                '<%= caption %>',
-                            '</a>'
-                        ].join(''))
-                    }).on('click', function(item, e){
-                        if (me.api){
-                            if (!_.isUndefined(item.options.langid))
-                                me.api.put_TextPrLang(item.options.langid);
 
-                            me._currLang.tableid = item.options.langid;
+                        me._currLang.tableid = item.langid;
-                            me.langTableMenu.menu.currentCheckedItem = item;
+                        me.fireEvent('editcomplete', me);
-
+                    }
-                            me.fireEvent('editcomplete', me);
-                        }
-                    }));
                 });
             }
         },

apps/documenteditor/main/app/view/FileMenu.js

@@ -49,6 +49,7 @@ define([
 
     DE.Views.FileMenu = Common.UI.BaseView.extend(_.extend({
         el: '#file-menu-panel',
+        rendered: false,
         options: {alias:'FileMenu'},
 
         template: _.template(tpl),
@@ -81,95 +82,109 @@ define([
         },
 
         render: function () {
-            this.$el = $(this.el);
+            var $markup = $(this.template());
-            this.$el.html(this.template());
 
             this.miSave = new Common.UI.MenuItem({
-                el      : $('#fm-btn-save',this.el),
+                el      : $markup.elementById('#fm-btn-save'),
                 action  : 'save',
                 caption : this.btnSaveCaption,
                 canFocused: false
             });
 
+            if ( !!this.options.miSave ) {
+                this.miSave.setDisabled(this.options.miSave.isDisabled());
+                delete this.options.miSave;
+            }
+
             this.miEdit = new Common.UI.MenuItem({
-                el      : $('#fm-btn-edit',this.el),
+                el      : $markup.elementById('#fm-btn-edit'),
                 action  : 'edit',
                 caption : this.btnToEditCaption,
                 canFocused: false
             });
 
             this.miDownload = new Common.UI.MenuItem({
-                el      : $('#fm-btn-download',this.el),
+                el      : $markup.elementById('#fm-btn-download'),
                 action  : 'saveas',
                 caption : this.btnDownloadCaption,
                 canFocused: false
             });
 
             this.miSaveCopyAs = new Common.UI.MenuItem({
-                el      : $('#fm-btn-save-copy',this.el),
+                el      : $markup.elementById('#fm-btn-save-copy'),
                 action  : 'save-copy',
                 caption : this.btnSaveCopyAsCaption,
                 canFocused: false
             });
 
             this.miSaveAs = new Common.UI.MenuItem({
-                el      : $('#fm-btn-save-desktop',this.el),
+                el      : $markup.elementById('#fm-btn-save-desktop'),
                 action  : 'save-desktop',
                 caption : this.btnSaveAsCaption,
                 canFocused: false
             });
 
             this.miPrint = new Common.UI.MenuItem({
-                el      : $('#fm-btn-print',this.el),
+                el      : $markup.elementById('#fm-btn-print'),
                 action  : 'print',
                 caption : this.btnPrintCaption,
                 canFocused: false
             });
 
             this.miRename = new Common.UI.MenuItem({
-                el      : $('#fm-btn-rename',this.el),
+                el      : $markup.elementById('#fm-btn-rename'),
                 action  : 'rename',
                 caption : this.btnRenameCaption,
                 canFocused: false
             });
 
+            if ( !!this.options.miRename ) {
+                this.miRename.setDisabled(this.options.miRename.isDisabled());
+                delete this.options.miRename;
+            }
+
             this.miProtect = new Common.UI.MenuItem({
-                el      : $('#fm-btn-protect',this.el),
+                el      : $markup.elementById('#fm-btn-protect'),
                 action  : 'protect',
                 caption : this.btnProtectCaption,
                 canFocused: false
             });
 
+            if ( !!this.options.miProtect ) {
+                this.miProtect.setDisabled(this.options.miProtect.isDisabled());
+                delete this.options.miProtect;
+            }
+
             this.miRecent = new Common.UI.MenuItem({
-                el      : $('#fm-btn-recent',this.el),
+                el      : $markup.elementById('#fm-btn-recent'),
                 action  : 'recent',
                 caption : this.btnRecentFilesCaption,
                 canFocused: false
             });
 
             this.miNew = new Common.UI.MenuItem({
-                el      : $('#fm-btn-create',this.el),
+                el      : $markup.elementById('#fm-btn-create'),
                 action  : 'new',
                 caption : this.btnCreateNewCaption,
                 canFocused: false
             });
 
             this.miAccess = new Common.UI.MenuItem({
-                el      : $('#fm-btn-rights',this.el),
+                el      : $markup.elementById('#fm-btn-rights'),
                 action  : 'rights',
                 caption : this.btnRightsCaption,
                 canFocused: false
             });
 
             this.miHistory = new Common.UI.MenuItem({
-                el      : $('#fm-btn-history',this.el),
+                el      : $markup.elementById('#fm-btn-history'),
                 action  : 'history',
                 caption : this.btnHistoryCaption,
                 canFocused: false
             });
 
             this.miHelp = new Common.UI.MenuItem({
-                el      : $('#fm-btn-help',this.el),
+                el      : $markup.elementById('#fm-btn-help'),
                 action  : 'help',
                 caption : this.btnHelpCaption,
                 canFocused: false
@@ -178,7 +193,7 @@ define([
             this.items = [];
             this.items.push(
                 new Common.UI.MenuItem({
-                    el      : $('#fm-btn-return',this.el),
+                    el      : $markup.elementById('#fm-btn-return'),
                     action  : 'back',
                     caption : this.btnCloseMenuCaption,
                     canFocused: false
@@ -194,7 +209,7 @@ define([
                 this.miRecent,
                 this.miNew,
                 new Common.UI.MenuItem({
-                    el      : $('#fm-btn-info',this.el),
+                    el      : $markup.elementById('#fm-btn-info'),
                     action  : 'info',
                     caption : this.btnInfoCaption,
                     canFocused: false
@@ -202,29 +217,31 @@ define([
                 this.miAccess,
                 this.miHistory,
                 new Common.UI.MenuItem({
-                    el      : $('#fm-btn-settings',this.el),
+                    el      : $markup.elementById('#fm-btn-settings'),
                     action  : 'opts',
                     caption : this.btnSettingsCaption,
                     canFocused: false
                 }),
                 this.miHelp,
                 new Common.UI.MenuItem({
-                    el      : $('#fm-btn-back',this.el),
+                    el      : $markup.elementById('#fm-btn-back'),
+                    // el      : _get_el('fm-btn-back'),
                     action  : 'exit',
                     caption : this.btnBackCaption,
                     canFocused: false
                 })
             );
 
-            var me = this;
+            this.rendered = true;
-            me.panels = {
+            this.$el.html($markup);
-//                    'saveas'    : (new DE.Views.FileMenuPanels.ViewSaveAs({menu:me})).render(),
+            this.$el.find('.content-box').hide();
-                'opts'      : (new DE.Views.FileMenuPanels.Settings({menu:me})).render(),
+            this.applyMode();
-                'info'      : (new DE.Views.FileMenuPanels.DocumentInfo({menu:me})).render(),
-                'rights'    : (new DE.Views.FileMenuPanels.DocumentRights({menu:me})).render()
-            };
 
-            me.$el.find('.content-box').hide();
+            if ( !!this.api ) {
+                this.panels['info'].setApi(this.api);
+                if ( this.panels['protect'] )
+                    this.panels['protect'].setApi(this.api);
+            }
 
             return this;
         },
@@ -232,6 +249,9 @@ define([
         show: function(panel, opts) {
             if (this.isVisible() && panel===undefined || !this.mode) return;
 
+            if ( !this.rendered )
+                this.render();
+
             var defPanel = (this.mode.canDownload && (!this.mode.isDesktopApp || !this.mode.isOffline)) ? 'saveas' : 'info';
             if (!panel)
                 panel = this.active || defPanel;
@@ -250,6 +270,16 @@ define([
         },
 
         applyMode: function() {
+            if (!this.panels) {
+                this.panels = {
+                    'opts'      : (new DE.Views.FileMenuPanels.Settings({menu:this})).render(this.$el.find('#panel-settings')),
+                    'info'      : (new DE.Views.FileMenuPanels.DocumentInfo({menu:this})).render(this.$el.find('#panel-info')),
+                    'rights'    : (new DE.Views.FileMenuPanels.DocumentRights({menu:this})).render(this.$el.find('#panel-rights'))
+                };
+            }
+
+            if (!this.mode) return;
+
             this.miDownload[((this.mode.canDownload || this.mode.canDownloadOrigin) && (!this.mode.isDesktopApp || !this.mode.isOffline))?'show':'hide']();
             this.miSaveCopyAs[((this.mode.canDownload || this.mode.canDownloadOrigin) && (!this.mode.isDesktopApp || !this.mode.isOffline)) && (this.mode.canRequestSaveAs || this.mode.saveAsUrl) ?'show':'hide']();
             this.miSaveAs[((this.mode.canDownload || this.mode.canDownloadOrigin) && this.mode.isDesktopApp && this.mode.isOffline)?'show':'hide']();
@@ -284,32 +314,29 @@ define([
             if ( this.mode.canCreateNew ) {
                 if (this.mode.templates && this.mode.templates.length) {
                     $('a',this.miNew.$el).text(this.btnCreateNewCaption + '...');
-                    this.panels['new'] = ((new DE.Views.FileMenuPanels.CreateNew({menu: this, docs: this.mode.templates})).render());
+                    !this.panels['new'] && (this.panels['new'] = ((new DE.Views.FileMenuPanels.CreateNew({menu: this, docs: this.mode.templates})).render()));
                 }
             }
 
-            if ( this.mode.canOpenRecent ) {
+            if ( this.mode.canOpenRecent && this.mode.recent ) {
-                if (this.mode.recent){
+                !this.panels['recent'] && (this.panels['recent'] = (new DE.Views.FileMenuPanels.RecentFiles({menu:this, recent: this.mode.recent})).render());
-                    this.panels['recent'] = (new DE.Views.FileMenuPanels.RecentFiles({menu:this, recent: this.mode.recent})).render();
-                }
             }
 
             if (this.mode.canProtect) {
-//                this.$el.find('#fm-btn-back').hide();
+                !this.panels['protect'] && (this.panels['protect'] = (new DE.Views.FileMenuPanels.ProtectDoc({menu:this})).render());
-                this.panels['protect'] = (new DE.Views.FileMenuPanels.ProtectDoc({menu:this})).render();
                 this.panels['protect'].setMode(this.mode);
             }
 
             if (this.mode.canDownload) {
-                this.panels['saveas'] = ((new DE.Views.FileMenuPanels.ViewSaveAs({menu: this})).render());
+                !this.panels['saveas'] && (this.panels['saveas'] = ((new DE.Views.FileMenuPanels.ViewSaveAs({menu: this})).render()));
             } else if (this.mode.canDownloadOrigin)
                 $('a',this.miDownload.$el).text(this.textDownload);
 
             if (this.mode.canDownload && (this.mode.canRequestSaveAs || this.mode.saveAsUrl)) {
-                this.panels['save-copy'] = ((new DE.Views.FileMenuPanels.ViewSaveCopy({menu: this})).render());
+                !this.panels['save-copy'] && (this.panels['save-copy'] = ((new DE.Views.FileMenuPanels.ViewSaveCopy({menu: this})).render()));
             }
 
-            if (this.mode.canHelp) {
+            if (this.mode.canHelp && !this.panels['help']) {
                 this.panels['help'] = ((new DE.Views.FileMenuPanels.Help({menu: this})).render());
                 this.panels['help'].setLangConfig(this.mode.lang);
             }
@@ -329,13 +356,22 @@ define([
                 this.mode = mode;
             }
 
-            if (!delay) this.applyMode();
+            if (!delay) {
+                if ( this.rendered )
+                    this.applyMode();
+            }
+            return this;
         },
 
         setApi: function(api) {
             this.api = api;
-            this.panels['info'].setApi(api);
+
-            if (this.panels['protect']) this.panels['protect'].setApi(api);
+            if ( this.rendered ) {
+                this.panels['info'].setApi(api);
+                if (this.panels['protect']) this.panels['protect'].setApi(api);
+            }
+
+            return this;
         },
 
         loadDocument: function(data) {
@@ -369,8 +405,11 @@ define([
         },
 
         SetDisabled: function(disable) {
-            this.miSave[(disable || !this.mode.isEdit)?'hide':'show']();
+            var _btn_save = this.getButton('save'),
-            this.miRename[(disable || !this.mode.canRename || this.mode.isDesktopApp) ?'hide':'show']();
+                _btn_rename = this.getButton('rename');
+
+            _btn_save[(disable || !this.mode.isEdit)?'hide':'show']();
+            _btn_rename[(disable || !this.mode.canRename || this.mode.isDesktopApp) ?'hide':'show']();
         },
 
         isVisible: function () {
@@ -378,8 +417,27 @@ define([
         },
 
         getButton: function(type) {
-            if (type == 'save')
+            if ( !this.rendered ) {
-                return this.miSave;
+                if (type == 'save') {
+                    return this.options.miSave ? this.options.miSave : (this.options.miSave = new Common.UI.MenuItem({}));
+                } else
+                if (type == 'rename') {
+                    return this.options.miRename ? this.options.miRename : (this.options.miRename = new Common.UI.MenuItem({}));
+                } else
+                if (type == 'protect') {
+                    return this.options.miProtect ? this.options.miProtect : (this.options.miProtect = new Common.UI.MenuItem({}));
+                }
+            } else {
+                if (type == 'save') {
+                    return this.miSave;
+                } else
+                if (type == 'rename') {
+                    return this.miRename;
+                 }else
+                if (type == 'protect') {
+                    return this.miProtect;
+                }
+            }
         },
 
         btnSaveCaption          : 'Save',

apps/documenteditor/main/app/view/FileMenuPanels.js

@@ -87,12 +87,12 @@ define([
         },
 
         render: function() {
-            $(this.el).html(this.template({rows:this.formats}));
+            this.$el.html(this.template({rows:this.formats}));
             $('.btn-doc-format',this.el).on('click', _.bind(this.onFormatClick,this));
 
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
-                    el: $(this.el),
+                    el: this.$el,
                     suppressScrollX: true
                 });
             }
@@ -148,12 +148,12 @@ define([
         },
 
         render: function() {
-            $(this.el).html(this.template({rows:this.formats}));
+            this.$el.html(this.template({rows:this.formats}));
             $('.btn-doc-format',this.el).on('click', _.bind(this.onFormatClick,this));
 
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
-                    el: $(this.el),
+                    el: this.$el,
                     suppressScrollX: true
                 });
             }
@@ -247,30 +247,31 @@ define([
             this.menu = options.menu;
         },
 
-        render: function() {
+        render: function(node) {
-            $(this.el).html(this.template({scope: this}));
+            var me = this;
+            var $markup = $(this.template({scope: this}));
 
             this.chInputMode = new Common.UI.CheckBox({
-                el: $('#fms-chb-input-mode'),
+                el: $markup.findById('#fms-chb-input-mode'),
                 labelText: this.strInputMode
             });
 
             /** coauthoring begin **/
             this.chLiveComment = new Common.UI.CheckBox({
-                el: $('#fms-chb-live-comment'),
+                el: $markup.findById('#fms-chb-live-comment'),
                 labelText: this.strLiveComment
-            }).on('change', _.bind(function(field, newValue, oldValue, eOpts){
+            }).on('change', function(field, newValue, oldValue, eOpts){
-                this.chResolvedComment.setDisabled(field.getValue()!=='checked');
+                me.chResolvedComment.setDisabled(field.getValue()!=='checked');
-            }, this));
+            });
 
             this.chResolvedComment = new Common.UI.CheckBox({
-                el: $('#fms-chb-resolved-comment'),
+                el: $markup.findById('#fms-chb-resolved-comment'),
                 labelText: this.strResolvedComment
             });
             /** coauthoring end **/
 
             this.chSpell = new Common.UI.CheckBox({
-                el: $('#fms-chb-spell-check'),
+                el: $markup.findById('#fms-chb-spell-check'),
                 labelText: this.strSpellCheckMode
             });
 
@@ -280,28 +281,28 @@ define([
             });
 
             this.chAutosave = new Common.UI.CheckBox({
-                el: $('#fms-chb-autosave'),
+                el: $markup.findById('#fms-chb-autosave'),
                 labelText: this.strAutosave
-            }).on('change', _.bind(function(field, newValue, oldValue, eOpts){
+            }).on('change', function(field, newValue, oldValue, eOpts){
-                if (field.getValue()!=='checked' && this.cmbCoAuthMode.getValue()) {
+                if (field.getValue()!=='checked' && me.cmbCoAuthMode.getValue()) {
-                    this.cmbCoAuthMode.setValue(0);
+                    me.cmbCoAuthMode.setValue(0);
-                    this.onSelectCoAuthMode(this.cmbCoAuthMode.getSelectedRecord());
+                    me.onSelectCoAuthMode(me.cmbCoAuthMode.getSelectedRecord());
                 }
-            }, this));
+            });
-            this.lblAutosave = $('#fms-lbl-autosave');
+            this.lblAutosave = $markup.findById('#fms-lbl-autosave');
 
             this.chForcesave = new Common.UI.CheckBox({
-                el: $('#fms-chb-forcesave'),
+                el: $markup.findById('#fms-chb-forcesave'),
                 labelText: this.strForcesave
             });
 
             this.chAlignGuides = new Common.UI.CheckBox({
-                el: $('#fms-chb-align-guides'),
+                el: $markup.findById('#fms-chb-align-guides'),
                 labelText: this.strAlignGuides
             });
 
             this.cmbZoom = new Common.UI.ComboBox({
-                el          : $('#fms-cmb-zoom'),
+                el          : $markup.findById('#fms-cmb-zoom'),
                 style       : 'width: 160px;',
                 editable    : false,
                 cls         : 'input-group-nr',
@@ -325,7 +326,7 @@ define([
 
             /** coauthoring begin **/
             this.cmbShowChanges = new Common.UI.ComboBox({
-                el          : $('#fms-cmb-show-changes'),
+                el          : $markup.findById('#fms-cmb-show-changes'),
                 style       : 'width: 160px;',
                 editable    : false,
                 cls         : 'input-group-nr',
@@ -337,7 +338,7 @@ define([
             });
 
             this.cmbCoAuthMode = new Common.UI.ComboBox({
-                el          : $('#fms-cmb-coauth-mode'),
+                el          : $markup.findById('#fms-cmb-coauth-mode'),
                 style       : 'width: 160px;',
                 editable    : false,
                 cls         : 'input-group-nr',
@@ -345,17 +346,17 @@ define([
                     { value: 1, displayValue: this.strFast, descValue: this.strCoAuthModeDescFast},
                     { value: 0, displayValue: this.strStrict, descValue: this.strCoAuthModeDescStrict }
                 ]
-            }).on('selected', _.bind( function(combo, record) {
+            }).on('selected', function(combo, record) {
-                if (record.value == 1 && (this.chAutosave.getValue()!=='checked'))
+                if (record.value == 1 && (me.chAutosave.getValue()!=='checked'))
-                    this.chAutosave.setValue(1);
+                    me.chAutosave.setValue(1);
-                this.onSelectCoAuthMode(record);
+                me.onSelectCoAuthMode(record);
-            }, this));
+            });
 
-            this.lblCoAuthMode = $('#fms-lbl-coauth-mode');
+            this.lblCoAuthMode = $markup.findById('#fms-lbl-coauth-mode');
             /** coauthoring end **/
 
             this.cmbFontRender = new Common.UI.ComboBox({
-                el          : $('#fms-cmb-font-render'),
+                el          : $markup.find('#fms-cmb-font-render'),
                 style       : 'width: 160px;',
                 editable    : false,
                 cls         : 'input-group-nr',
@@ -367,7 +368,7 @@ define([
             });
 
             this.cmbUnit = new Common.UI.ComboBox({
-                el          : $('#fms-cmb-unit'),
+                el          : $markup.findById('#fms-cmb-unit'),
                 style       : 'width: 160px;',
                 editable    : false,
                 cls         : 'input-group-nr',
@@ -379,18 +380,19 @@ define([
             });
 
             this.btnApply = new Common.UI.Button({
-                el: '#fms-btn-apply'
+                el: $markup.findById('#fms-btn-apply')
             });
 
-            this.btnApply.on('click', _.bind(this.applySettings, this));
+            this.btnApply.on('click', this.applySettings.bind(this));
+
+            this.$el = $(node).html($markup);
 
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
-                    el: $(this.el),
+                    el: this.$el,
                     suppressScrollX: true
                 });
             }
-
             return this;
         },
 
@@ -564,7 +566,7 @@ define([
         },
 
         render: function() {
-            $(this.el).html(this.template());
+            this.$el.html(this.template());
 
             this.viewRecentPicker = new Common.UI.DataView({
                 el: $('#id-recent-view'),
@@ -582,7 +584,7 @@ define([
 
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
-                    el: $(this.el),
+                    el: this.$el,
                     suppressScrollX: true
                 });
             }
@@ -644,14 +646,14 @@ define([
         },
 
         render: function() {
-            $(this.el).html(this.template({
+            this.$el.html(this.template({
                 scope: this,
                 docs: this.options[0].docs
             }));
 
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
-                    el: $(this.el),
+                    el: this.$el,
                     suppressScrollX: true
                 });
             }
@@ -784,23 +786,22 @@ define([
             this._locked = false;
         },
 
-        render: function() {
+        render: function(node) {
-            $(this.el).html(this.template({scope: this}));
-
             var me = this;
+            var $markup = $(me.template());
 
             // server info
-            this.lblPlacement = $('#id-info-placement');
+            this.lblPlacement = $markup.findById('#id-info-placement');
-            this.lblOwner = $('#id-info-owner');
+            this.lblOwner = $markup.findById('#id-info-owner');
-            this.lblUploaded = $('#id-info-uploaded');
+            this.lblUploaded = $markup.findById('#id-info-uploaded');
 
             // statistic info
-            this.lblStatPages = $('#id-info-pages');
+            this.lblStatPages = $markup.findById('#id-info-pages');
-            this.lblStatWords = $('#id-info-words');
+            this.lblStatWords = $markup.findById('#id-info-words');
-            this.lblStatParagraphs = $('#id-info-paragraphs');
+            this.lblStatParagraphs = $markup.findById('#id-info-paragraphs');
-            this.lblStatSymbols = $('#id-info-symbols');
+            this.lblStatSymbols = $markup.findById('#id-info-symbols');
-            this.lblStatSpaces = $('#id-info-spaces');
+            this.lblStatSpaces = $markup.findById('#id-info-spaces');
-            // this.lblEditTime = $('#id-info-edittime');
+            // this.lblEditTime = $markup.find('#id-info-edittime');
 
             // edited info
             var keyDownBefore = function(input, e){
@@ -815,37 +816,37 @@ define([
             };
 
             this.inputTitle = new Common.UI.InputField({
-                el          : $('#id-info-title'),
+                el          : $markup.findById('#id-info-title'),
                 style       : 'width: 200px;',
                 placeHolder : this.txtAddText,
                 validateOnBlur: false
             }).on('keydown:before', keyDownBefore);
             this.inputSubject = new Common.UI.InputField({
-                el          : $('#id-info-subject'),
+                el          : $markup.findById('#id-info-subject'),
                 style       : 'width: 200px;',
                 placeHolder : this.txtAddText,
                 validateOnBlur: false
             }).on('keydown:before', keyDownBefore);
             this.inputComment = new Common.UI.InputField({
-                el          : $('#id-info-comment'),
+                el          : $markup.findById('#id-info-comment'),
                 style       : 'width: 200px;',
                 placeHolder : this.txtAddText,
                 validateOnBlur: false
             }).on('keydown:before', keyDownBefore);
 
             // modify info
-            this.lblModifyDate = $('#id-info-modify-date');
+            this.lblModifyDate = $markup.findById('#id-info-modify-date');
-            this.lblModifyBy = $('#id-info-modify-by');
+            this.lblModifyBy = $markup.findById('#id-info-modify-by');
 
             // creation info
-            this.lblDate = $('#id-info-date');
+            this.lblDate = $markup.findById('#id-info-date');
-            this.lblApplication = $('#id-info-appname');
+            this.lblApplication = $markup.findById('#id-info-appname');
-            this.tblAuthor = $('#id-info-author table');
+            this.tblAuthor = $markup.findById('#id-info-author table');
-            this.trAuthor = $('#id-info-add-author').closest('tr');
+            this.trAuthor = $markup.findById('#id-info-add-author').closest('tr');
             this.authorTpl = '<tr><td><div style="display: inline-block;width: 200px;"><input type="text" spellcheck="false" class="form-control" readonly="true" value="{0}" ></div><div class="close img-commonctrl"></div></td></tr>';
 
             this.tblAuthor.on('click', function(e) {
-                var btn = $(e.target);
+                var btn = $markup.find(e.target);
                 if (btn.hasClass('close') && !btn.hasClass('disabled')) {
                     var el = btn.closest('tr'),
                         idx = me.tblAuthor.find('tr').index(el);
@@ -855,7 +856,7 @@ define([
             });
 
             this.inputAuthor = new Common.UI.InputField({
-                el          : $('#id-info-add-author'),
+                el          : $markup.findById('#id-info-add-author'),
                 style       : 'width: 200px;',
                 validateOnBlur: false,
                 placeHolder: this.txtAddAuthor
@@ -888,13 +889,13 @@ define([
 
             this.updateInfo(this.doc);
 
+            this.$el = $(node).html($markup);
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
-                    el: $(this.el),
+                    el: this.$el,
                     suppressScrollX: true
                 });
             }
-
             return this;
         },
 
@@ -1178,12 +1179,12 @@ define([
             this.menu = options.menu;
         },
 
-        render: function() {
+        render: function(node) {
-            $(this.el).html(this.template());
+            var $markup = $(this.template());
 
-            this.cntRights = $('#id-info-rights');
+            this.cntRights = $markup.findById('#id-info-rights');
             this.btnEditRights = new Common.UI.Button({
-                el: '#id-info-btn-edit'
+                el: $markup.elementById('#id-info-btn-edit')
             });
             this.btnEditRights.on('click', _.bind(this.changeAccessRights, this));
 
@@ -1191,16 +1192,17 @@ define([
 
             this.updateInfo(this.doc);
 
+            Common.NotificationCenter.on('collaboration:sharing', this.changeAccessRights.bind(this));
+            Common.NotificationCenter.on('collaboration:sharingdeny', this.onLostEditRights.bind(this));
+
+            this.$el = $(node).html($markup);
+
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
-                    el: $(this.el),
+                    el: this.$el,
                     suppressScrollX: true
                 });
             }
-
-            Common.NotificationCenter.on('collaboration:sharing', _.bind(this.changeAccessRights, this));
-            Common.NotificationCenter.on('collaboration:sharingdeny', _.bind(this.onLostEditRights, this));
-
             return this;
         },
 
@@ -1364,7 +1366,7 @@ define([
 
         render: function() {
             var me = this;
-            $(this.el).html(this.template());
+            this.$el.html(this.template());
 
             this.viewHelpPicker = new Common.UI.DataView({
                 el: $('#id-help-contents'),
@@ -1504,7 +1506,7 @@ define([
         },
 
         render: function() {
-            $(this.el).html(this.template({scope: this}));
+            this.$el.html(this.template({scope: this}));
 
             var protection = DE.getController('Common.Controllers.Protection').getView();
 
@@ -1531,7 +1533,7 @@ define([
             this.cntSignatureView = $('#id-fms-signature-view');
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
-                    el: $(this.el),
+                    el: this.$el,
                     suppressScrollX: true
                 });
             }

apps/documenteditor/main/app/view/HeaderFooterSettings.js

@@ -84,7 +84,7 @@ define([
         },
 
         render: function () {
-            var el = $(this.el);
+            var el = this.$el || $(this.el);
             el.html(this.template({
                 scope: this
             }));

apps/documenteditor/main/app/view/ImageSettings.js

@@ -82,16 +82,16 @@ define([
             this._originalProps = null;
 
             this.render();
-
-            this.labelWidth = $(this.el).find('#image-label-width');
-            this.labelHeight = $(this.el).find('#image-label-height');
         },
 
         render: function () {
-            var el = $(this.el);
+            var el = this.$el || $(this.el);
             el.html(this.template({
                 scope: this
             }));
+
+            this.labelWidth = el.find('#image-label-width');
+            this.labelHeight = el.find('#image-label-height');
         },
 
         setApi: function(api) {

apps/documenteditor/main/app/view/LeftMenu.js

@@ -90,13 +90,11 @@ define([
         },
 
         render: function () {
-            var el = $(this.el);
+            var $markup = $(this.template({}));
-            el.html(this.template({
-            }));
 
             this.btnSearch = new Common.UI.Button({
                 action: 'search',
-                el: $('#left-btn-search'),
+                el: $markup.elementById('#left-btn-search'),
                 hint: this.tipSearch + Common.Utils.String.platformKey('Ctrl+F'),
                 disabled: true,
                 enableToggle: true
@@ -104,7 +102,7 @@ define([
 
             this.btnAbout = new Common.UI.Button({
                 action: 'about',
-                el: $('#left-btn-about'),
+                el: $markup.elementById('#left-btn-about'),
                 hint: this.tipAbout,
                 enableToggle: true,
                 disabled: true,
@@ -113,14 +111,14 @@ define([
 
             this.btnSupport = new Common.UI.Button({
                 action: 'support',
-                el: $('#left-btn-support'),
+                el: $markup.elementById('#left-btn-support'),
                 hint: this.tipSupport,
                 disabled: true
             });
 
             /** coauthoring begin **/
             this.btnComments = new Common.UI.Button({
-                el: $('#left-btn-comments'),
+                el: $markup.elementById('#left-btn-comments'),
                 hint: this.tipComments + Common.Utils.String.platformKey('Ctrl+Shift+H'),
                 enableToggle: true,
                 disabled: true,
@@ -128,7 +126,7 @@ define([
             });
 
             this.btnChat = new Common.UI.Button({
-                el: $('#left-btn-chat'),
+                el: $markup.elementById('#left-btn-chat'),
                 hint: this.tipChat + Common.Utils.String.platformKey('Alt+Q'),
                 enableToggle: true,
                 disabled: true,
@@ -138,36 +136,37 @@ define([
             this.btnComments.hide();
             this.btnChat.hide();
 
-            this.btnComments.on('click',        _.bind(this.onBtnMenuClick, this));
+            this.btnComments.on('click',        this.onBtnMenuClick.bind(this));
-            this.btnComments.on('toggle',       _.bind(this.onBtnCommentsToggle, this));
+            this.btnComments.on('toggle',       this.onBtnCommentsToggle.bind(this));
-            this.btnChat.on('click',            _.bind(this.onBtnMenuClick, this));
+            this.btnChat.on('click',            this.onBtnMenuClick.bind(this));
             /** coauthoring end **/
 
             this.btnPlugins = new Common.UI.Button({
-                el: $('#left-btn-plugins'),
+                el: $markup.elementById('#left-btn-plugins'),
                 hint: this.tipPlugins,
                 enableToggle: true,
                 disabled: true,
                 toggleGroup: 'leftMenuGroup'
             });
             this.btnPlugins.hide();
-            this.btnPlugins.on('click',         _.bind(this.onBtnMenuClick, this));
+            this.btnPlugins.on('click',         this.onBtnMenuClick.bind(this));
 
             this.btnNavigation = new Common.UI.Button({
-                el: $('#left-btn-navigation'),
+                el: $markup.elementById('#left-btn-navigation'),
                 hint: this.tipNavigation,
                 enableToggle: true,
                 disabled: true,
                 toggleGroup: 'leftMenuGroup'
             });
-            this.btnNavigation.on('click',         _.bind(this.onBtnMenuClick, this));
+            this.btnNavigation.on('click',         this.onBtnMenuClick.bind(this));
 
-            this.btnSearch.on('click',          _.bind(this.onBtnMenuClick, this));
+            this.btnSearch.on('click',          this.onBtnMenuClick.bind(this));
-            this.btnAbout.on('toggle',          _.bind(this.onBtnMenuToggle, this));
+            this.btnAbout.on('toggle',          this.onBtnMenuToggle.bind(this));
 
             this.menuFile = new DE.Views.FileMenu();
-            this.menuFile.render();
+            this.btnAbout.panel = new Common.Views.About({el: '#about-menu-panel', appName: 'Document Editor'});
-            this.btnAbout.panel = (new Common.Views.About({el: $('#about-menu-panel'), appName: 'Document Editor'})).render();
+
+            this.$el.html($markup);
 
             return this;
         },

apps/documenteditor/main/app/view/MailMergeSettings.js

@@ -91,6 +91,31 @@ define([
             this.mergeMailData = undefined;
 
             this.render();
+        },
+
+        render: function () {
+            this.$el.html(this.template({
+                scope: this
+            }));
+        },
+
+        setApi: function(api) {
+            this.api = api;
+            if (this.api) {
+                this.api.asc_registerCallback('asc_onPreviewMailMergeResult',    _.bind(this.onPreviewMailMergeResult, this));
+                this.api.asc_registerCallback('asc_onEndPreviewMailMergeResult', _.bind(this.onEndPreviewMailMergeResult, this));
+                this.api.asc_registerCallback('asc_onStartMailMerge',            _.bind(this.onStartMailMerge, this));
+                this.api.asc_registerCallback('asc_onSaveMailMerge',             _.bind(this.onSaveMailMerge, this));
+                this.api.asc_registerCallback('asc_onEndAction',                 _.bind(this.onLongActionEnd, this));
+                Common.Gateway.on('setemailaddresses',                           _.bind(this.onSetEmailAddresses, this));
+                Common.Gateway.on('processmailmerge',                            _.bind(this.onProcessMailMerge, this));
+            }
+            return this;
+        },
+
+        createDelayedControls: function() {
+            var me = this,
+                _set = DE.enumLockMM;
 
             this.btnInsField = new Common.UI.Button({
                 cls: 'btn-text-menu-default',
@@ -133,32 +158,7 @@ define([
                 }
             });
             this.emptyDBControls.push(this.txtFieldNum);
-        },
 
-        render: function () {
-            this.$el.html(this.template({
-                scope: this
-            }));
-        },
-
-        setApi: function(api) {
-            this.api = api;
-            if (this.api) {
-                this.api.asc_registerCallback('asc_onPreviewMailMergeResult',    _.bind(this.onPreviewMailMergeResult, this));
-                this.api.asc_registerCallback('asc_onEndPreviewMailMergeResult', _.bind(this.onEndPreviewMailMergeResult, this));
-                this.api.asc_registerCallback('asc_onStartMailMerge',            _.bind(this.onStartMailMerge, this));
-                this.api.asc_registerCallback('asc_onSaveMailMerge',             _.bind(this.onSaveMailMerge, this));
-                this.api.asc_registerCallback('asc_onEndAction',                 _.bind(this.onLongActionEnd, this));
-                Common.Gateway.on('setemailaddresses',                           _.bind(this.onSetEmailAddresses, this));
-                Common.Gateway.on('processmailmerge',                            _.bind(this.onProcessMailMerge, this));
-            }
-            return this;
-        },
-
-        createDelayedControls: function() {
-            var me = this,
-                _set = DE.enumLockMM;
-            
             this.btnEditData = new Common.UI.Button({
                 el: me.$el.find('#mmerge-button-edit-data'),
                 lock: [_set.preview, _set.lostConnect]
@@ -760,8 +760,8 @@ define([
         },
 
         onStartMailMerge: function() {
-            this.btnInsField.menu.removeAll();
+            this.btnInsField && this.btnInsField.menu.removeAll();
-            this.txtFieldNum.setValue(1);
+            this.txtFieldNum && this.txtFieldNum.setValue(1);
             this.ChangeSettings({
                 recipientsCount: this.api.asc_GetReceptionsCount(),
                 fieldsList: this.api.asc_GetMailMergeFieldsNameList()

apps/documenteditor/main/app/view/ParagraphSettings.js

@@ -91,10 +91,16 @@ define([
                 {displayValue: this.textAuto,   defaultValue: 1, value: c_paragraphLinerule.LINERULE_AUTO, minValue: 0.5,    step: 0.01, defaultUnit: ''},
                 {displayValue: this.textExact,  defaultValue: 5, value: c_paragraphLinerule.LINERULE_EXACT, minValue: 0.03,   step: 0.01, defaultUnit: 'cm'}
             ];
+        },
+
+        render: function () {
+            var $markup = $(this.template({
+                scope: this
+            }));
 
             // Short Size
             this.cmbLineRule = new Common.UI.ComboBox({
-                el: $('#paragraph-combo-line-rule'),
+                el: $markup.findById('#paragraph-combo-line-rule'),
                 cls: 'input-group-nr',
                 menuStyle: 'min-width: 85px;',
                 editable: false,
@@ -105,7 +111,7 @@ define([
             this.lockedControls.push(this.cmbLineRule);
 
             this.numLineHeight = new Common.UI.MetricSpinner({
-                el: $('#paragraph-spin-line-height'),
+                el: $markup.findById('#paragraph-spin-line-height'),
                 step: .01,
                 width: 85,
                 value: '',
@@ -117,7 +123,7 @@ define([
             this.lockedControls.push(this.numLineHeight);
 
             this.numSpacingBefore = new Common.UI.MetricSpinner({
-                el: $('#paragraph-spin-spacing-before'),
+                el: $markup.findById('#paragraph-spin-spacing-before'),
                 step: .1,
                 width: 85,
                 value: '',
@@ -132,7 +138,7 @@ define([
             this.lockedControls.push(this.numSpacingBefore);
 
             this.numSpacingAfter = new Common.UI.MetricSpinner({
-                el: $('#paragraph-spin-spacing-after'),
+                el: $markup.findById('#paragraph-spin-spacing-after'),
                 step: .1,
                 width: 85,
                 value: '',
@@ -147,7 +153,7 @@ define([
             this.lockedControls.push(this.numSpacingAfter);
 
             this.chAddInterval = new Common.UI.CheckBox({
-                el: $('#paragraph-checkbox-add-interval'),
+                el: $markup.findById('#paragraph-checkbox-add-interval'),
                 labelText: this.strSomeParagraphSpace,
                 disabled: this._locked
             });
@@ -158,27 +164,25 @@ define([
                 disabled: this._locked,
                 menu        : true
             });
-            this.btnColor.render( $('#paragraph-color-btn'));
+            this.btnColor.render($markup.findById('#paragraph-color-btn'));
             this.lockedControls.push(this.btnColor);
 
-            this.numLineHeight.on('change', _.bind(this.onNumLineHeightChange, this));
+            this.numLineHeight.on('change', this.onNumLineHeightChange.bind(this));
-            this.numSpacingBefore.on('change', _.bind(this.onNumSpacingBeforeChange, this));
+            this.numSpacingBefore.on('change', this.onNumSpacingBeforeChange.bind(this));
-            this.numSpacingAfter.on('change', _.bind(this.onNumSpacingAfterChange, this));
+            this.numSpacingAfter.on('change', this.onNumSpacingAfterChange.bind(this));
-            this.chAddInterval.on('change', _.bind(this.onAddIntervalChange, this));
+            this.chAddInterval.on('change', this.onAddIntervalChange.bind(this));
-            this.cmbLineRule.on('selected', _.bind(this.onLineRuleSelect, this));
+            this.cmbLineRule.on('selected', this.onLineRuleSelect.bind(this));
-            this.cmbLineRule.on('hide:after', _.bind(this.onHideMenus, this));
+            this.cmbLineRule.on('hide:after', this.onHideMenus.bind(this));
-            $(this.el).on('click', '#paragraph-advanced-link', _.bind(this.openAdvancedSettings, this));
-            this.TextOnlySettings = $('.text-only');
-        },
 
-        render: function () {
+            this.linkAdvanced = $markup.findById('#paragraph-advanced-link');
-            var el = $(this.el);
-            el.html(this.template({
-                scope: this
-            }));
-
-            this.linkAdvanced = $('#paragraph-advanced-link');
             this.linkAdvanced.toggleClass('disabled', this._locked);
+
+            this.$el.on('click', '#paragraph-advanced-link', this.openAdvancedSettings.bind(this));
+            this.$el.html($markup);
+
+            this.TextOnlySettings = $('.text-only', this.$el);
+
+            this.rendered = true;
         },
 
         setApi: function(api) {
@@ -393,9 +397,9 @@ define([
         },
 
         createDelayedElements: function() {
+            this._initSettings = false;
             this.UpdateThemeColors();
             this.updateMetricUnit();
-            this._initSettings = false;
         },
 
         openAdvancedSettings: function(e) {

apps/documenteditor/main/app/view/RightMenu.js

@@ -146,32 +146,31 @@ define([
         },
 
         render: function (mode) {
-            var el = $(this.el);
-
             this.trigger('render:before', this);
 
             this.defaultHideRightMenu = mode.customization && !!mode.customization.hideRightMenu;
             var open = !Common.localStorage.getBool("de-hide-right-settings", this.defaultHideRightMenu);
-            el.css('width', ((open) ? MENU_SCALE_PART : SCALE_MIN) + 'px');
+            this.$el.css('width', ((open) ? MENU_SCALE_PART : SCALE_MIN) + 'px');
-            el.show();
+            this.$el.show();
 
-            el.html(this.template({}));
+            var $markup = $(this.template({}));
+            this.$el.html($markup);
 
-            this.btnText.setElement($('#id-right-menu-text'), false);           this.btnText.render();
+            this.btnText.setElement($markup.findById('#id-right-menu-text'), false);           this.btnText.render();
-            this.btnTable.setElement($('#id-right-menu-table'), false);         this.btnTable.render();
+            this.btnTable.setElement($markup.findById('#id-right-menu-table'), false);         this.btnTable.render();
-            this.btnImage.setElement($('#id-right-menu-image'), false);         this.btnImage.render();
+            this.btnImage.setElement($markup.findById('#id-right-menu-image'), false);         this.btnImage.render();
-            this.btnHeaderFooter.setElement($('#id-right-menu-header'), false); this.btnHeaderFooter.render();
+            this.btnHeaderFooter.setElement($markup.findById('#id-right-menu-header'), false); this.btnHeaderFooter.render();
-            this.btnChart.setElement($('#id-right-menu-chart'), false);         this.btnChart.render();
+            this.btnChart.setElement($markup.findById('#id-right-menu-chart'), false);         this.btnChart.render();
-            this.btnShape.setElement($('#id-right-menu-shape'), false);         this.btnShape.render();
+            this.btnShape.setElement($markup.findById('#id-right-menu-shape'), false);         this.btnShape.render();
-            this.btnTextArt.setElement($('#id-right-menu-textart'), false);     this.btnTextArt.render();
+            this.btnTextArt.setElement($markup.findById('#id-right-menu-textart'), false);     this.btnTextArt.render();
 
-            this.btnText.on('click',            _.bind(this.onBtnMenuClick, this));
+            this.btnText.on('click',            this.onBtnMenuClick.bind(this));
-            this.btnTable.on('click',           _.bind(this.onBtnMenuClick, this));
+            this.btnTable.on('click',           this.onBtnMenuClick.bind(this));
-            this.btnImage.on('click',           _.bind(this.onBtnMenuClick, this));
+            this.btnImage.on('click',           this.onBtnMenuClick.bind(this));
-            this.btnHeaderFooter.on('click',    _.bind(this.onBtnMenuClick, this));
+            this.btnHeaderFooter.on('click',    this.onBtnMenuClick.bind(this));
-            this.btnChart.on('click',           _.bind(this.onBtnMenuClick, this));
+            this.btnChart.on('click',           this.onBtnMenuClick.bind(this));
-            this.btnShape.on('click',           _.bind(this.onBtnMenuClick, this));
+            this.btnShape.on('click',           this.onBtnMenuClick.bind(this));
-            this.btnTextArt.on('click',         _.bind(this.onBtnMenuClick, this));
+            this.btnTextArt.on('click',         this.onBtnMenuClick.bind(this));
 
             this.paragraphSettings = new DE.Views.ParagraphSettings();
             this.headerSettings = new DE.Views.HeaderFooterSettings();
@@ -192,8 +191,8 @@ define([
                 });
                 this._settings[Common.Utils.documentSettingsType.MailMerge]   = {panel: "id-mail-merge-settings",      btn: this.btnMailMerge};
 
-                this.btnMailMerge.el    = $('#id-right-menu-mail-merge'); this.btnMailMerge.render().setVisible(true);
+                this.btnMailMerge.el    = $markup.findById('#id-right-menu-mail-merge'); this.btnMailMerge.render().setVisible(true);
-                this.btnMailMerge.on('click',       _.bind(this.onBtnMenuClick, this));
+                this.btnMailMerge.on('click', this.onBtnMenuClick.bind(this));
                 this.mergeSettings = new DE.Views.MailMergeSettings();
             }
 
@@ -208,8 +207,8 @@ define([
                 });
                 this._settings[Common.Utils.documentSettingsType.Signature]   = {panel: "id-signature-settings",      btn: this.btnSignature};
 
-                this.btnSignature.el    = $('#id-right-menu-signature'); this.btnSignature.render().setVisible(true);
+                this.btnSignature.el    = $markup.findById('#id-right-menu-signature'); this.btnSignature.render().setVisible(true);
-                this.btnSignature.on('click', _.bind(this.onBtnMenuClick, this));
+                this.btnSignature.on('click', this.onBtnMenuClick.bind(this));
                 this.signatureSettings = new DE.Views.SignatureSettings();
             }
 
@@ -222,27 +221,29 @@ define([
             }
 
             if (open) {
-                $('#id-paragraph-settings').parent().css("display", "inline-block" );
+                $markup.findById('#id-paragraph-settings').parent().css("display", "inline-block" );
-                $('#id-paragraph-settings').addClass("active");
+                $markup.findById('#id-paragraph-settings').addClass("active");
             }
 
+            // this.$el.html($markup);
             this.trigger('render:after', this);
 
             return this;
         },
 
         setApi: function(api) {
-            this.api = api;
+            var me = this;
-            var fire = function() { this.fireEvent('editcomplete', this); };
+            me.api = api;
-            this.paragraphSettings.setApi(api).on('editcomplete', _.bind( fire, this));
+            var _fire_editcomplete = function() {me.fireEvent('editcomplete', me);};
-            this.headerSettings.setApi(api).on('editcomplete', _.bind( fire, this));
+            this.paragraphSettings.setApi(api).on('editcomplete', _fire_editcomplete);
-            this.imageSettings.setApi(api).on('editcomplete', _.bind( fire, this));
+            this.headerSettings.setApi(api).on('editcomplete', _fire_editcomplete);
-            this.chartSettings.setApi(api).on('editcomplete', _.bind( fire, this));
+            this.imageSettings.setApi(api).on('editcomplete', _fire_editcomplete);
-            this.tableSettings.setApi(api).on('editcomplete', _.bind( fire, this));
+            this.chartSettings.setApi(api).on('editcomplete', _fire_editcomplete);
-            this.shapeSettings.setApi(api).on('editcomplete', _.bind( fire, this));
+            this.tableSettings.setApi(api).on('editcomplete', _fire_editcomplete);
-            this.textartSettings.setApi(api).on('editcomplete', _.bind( fire, this));
+            this.shapeSettings.setApi(api).on('editcomplete', _fire_editcomplete);
-            if (this.mergeSettings) this.mergeSettings.setApi(api).on('editcomplete', _.bind( fire, this));
+            this.textartSettings.setApi(api).on('editcomplete', _fire_editcomplete);
-            if (this.signatureSettings) this.signatureSettings.setApi(api).on('editcomplete', _.bind( fire, this));
+            if (this.mergeSettings) this.mergeSettings.setApi(api).on('editcomplete', _fire_editcomplete);
+            if (this.signatureSettings) this.signatureSettings.setApi(api).on('editcomplete', _fire_editcomplete);
         },
 
         setMode: function(mode) {

apps/documenteditor/main/app/view/ShapeSettings.js

@@ -78,6 +78,7 @@ define([
             this.imgprops = null;
             this._sendUndoPoint = true;
             this._sliderChanged = false;
+            this._texturearray = null;
 
             this.txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt);
 
@@ -100,7 +101,8 @@ define([
                 DisabledFillPanels: false,
                 DisabledControls: false,
                 HideShapeOnlySettings: false,
-                HideChangeTypeSettings: false
+                HideChangeTypeSettings: false,
+                isFromImage: false
             };
             this.lockedControls = [];
             this._locked = false;
@@ -126,6 +128,13 @@ define([
             this.fillControls = [];
 
             this.render();
+        },
+
+        render: function () {
+            var el = this.$el || $(this.el);
+            el.html(this.template({
+                scope: this
+            }));
 
             this.FillColorContainer = $('#shape-panel-color-fill');
             this.FillImageContainer = $('#shape-panel-image-fill');
@@ -136,13 +145,6 @@ define([
             this.CanChangeType = $('.change-type');
         },
 
-        render: function () {
-            var el = $(this.el);
-            el.html(this.template({
-                scope: this
-            }));
-        },
-
         setApi: function(api) {
             this.api = api;
             if (this.api) {
@@ -785,7 +787,8 @@ define([
                     || shapetype=='curvedConnector3' || shapetype=='curvedConnector4' || shapetype=='curvedConnector5'
                     || shapetype=='straightConnector1';
                 this.hideChangeTypeSettings(hidechangetype);
-                if (!hidechangetype) {
+                this._state.isFromImage = !!shapeprops.get_FromImage();
+                if (!hidechangetype && this.btnChangeShape.menu.items.length) {
                     this.btnChangeShape.menu.items[0].setVisible(shapeprops.get_FromImage());
                     this.btnChangeShape.menu.items[1].setVisible(!shapeprops.get_FromImage());
                 }
@@ -1480,6 +1483,7 @@ define([
         },
 
         createDelayedElements: function() {
+            this._initSettings = false;
             this.createDelayedControls();
             
             var global_hatch_menu_map = [
@@ -1513,37 +1517,17 @@ define([
                 this.PatternFillType = this.patternViewData[0].type;
             }
 
-            this.fillAutoShapes();
+            this.onInitStandartTextures();
+            this.onApiAutoShapes();
             this.UpdateThemeColors();
-            this._initSettings = false;
         },
 
         onInitStandartTextures: function(texture) {
             var me = this;
             if (texture && texture.length>0){
-                if (!this.btnTexture) {
+                me._texturearray = [];
-                    this.btnTexture = new Common.UI.ComboBox({
-                        el: $('#shape-combo-fill-texture'),
-                        template: _.template([
-                            '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">',
-                                '<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>',
-                                '<div style="display: table-cell;"></div>',
-                                '<button type="button" class="btn btn-default"><span class="caret img-commonctrl"></span></button>',
-                            '</div>'
-                        ].join(''))
-                    });
-                    this.textureMenu = new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="id-shape-menu-texture" style="width: 233px; margin: 0 5px;"></div>') }
-                        ]
-                    });
-                    this.textureMenu.render($('#shape-combo-fill-texture'));
-                    this.fillControls.push(this.btnTexture);
-                }
-
-                var texturearray = [];
                 _.each(texture, function(item){
-                    texturearray.push({
+                    me._texturearray.push({
                         imageUrl: item.get_image(),
                         name   : me.textureNames[item.get_id()],
                         type    : item.get_id(),
@@ -1551,15 +1535,41 @@ define([
                         selected: false
                     });
                 });
-                var mnuTexturePicker = new Common.UI.DataView({
+            }
-                    el: $('#id-shape-menu-texture'),
+
-                    restoreHeight: 174,
+            if (!me._texturearray || me._texturearray.length<1) return;
-                    parentMenu: me.textureMenu,
+            if (!this._initSettings && !this.btnTexture) {
-                    showLast: false,
+                this.btnTexture = new Common.UI.ComboBox({
-                    store: new Common.UI.DataViewStore(texturearray),
+                    el: $('#shape-combo-fill-texture'),
-                    itemTemplate: _.template('<div class="item-texture"><img src="<%= imageUrl %>" id="<%= id %>"></div>')
+                    template: _.template([
+                        '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">',
+                        '<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>',
+                        '<div style="display: table-cell;"></div>',
+                        '<button type="button" class="btn btn-default"><span class="caret img-commonctrl"></span></button>',
+                        '</div>'
+                    ].join(''))
                 });
-                mnuTexturePicker.on('item:click', _.bind(this.onSelectTexture, this));
+                this.textureMenu = new Common.UI.Menu({
+                    items: [
+                        { template: _.template('<div id="id-shape-menu-texture" style="width: 233px; margin: 0 5px;"></div>') }
+                    ]
+                });
+                this.textureMenu.render($('#shape-combo-fill-texture'));
+                this.fillControls.push(this.btnTexture);
+
+                var onShowBefore = function(menu) {
+                    var mnuTexturePicker = new Common.UI.DataView({
+                        el: $('#id-shape-menu-texture'),
+                        restoreHeight: 174,
+                        parentMenu: menu,
+                        showLast: false,
+                        store: new Common.UI.DataViewStore(me._texturearray || []),
+                        itemTemplate: _.template('<div class="item-texture"><img src="<%= imageUrl %>" id="<%= id %>"></div>')
+                    });
+                    mnuTexturePicker.on('item:click', _.bind(me.onSelectTexture, me));
+                    menu.off('show:before', onShowBefore);
+                };
+                this.textureMenu.on('show:before', onShowBefore);
             }
         },
 
@@ -1610,49 +1620,66 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
+        onApiAutoShapes: function() {
+            var me = this;
+            var onShowBefore = function(menu) {
+                me.fillAutoShapes();
+                menu.off('show:before', onShowBefore);
+            };
+            me.btnChangeShape.menu.on('show:before', onShowBefore);
+        },
+
         fillAutoShapes: function() {
             var me = this,
-                shapesStore = this.application.getCollection('ShapeGroups');
+                shapesStore = this.application.getCollection('ShapeGroups'),
+                count = shapesStore.length;
+
+            var onShowAfter = function(menu) {
+                for (var i=-1; i<count-1 && count>0; i++) {
+                    var store = shapesStore.at(i > -1 ? i : 0).get('groupStore');
+                    if (i<0) {
+                        store = store.clone();
+                        store.shift();
+                    }
+                    var shapePicker = new Common.UI.DataViewSimple({
+                        el: $('#id-shape-menu-shapegroup' + (i+1), menu.items[i+1].$el),
+                        store: store,
+                        parentMenu: menu.items[i+1].menu,
+                        itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>')
+                    });
+                    shapePicker.on('item:click', function(picker, item, record, e) {
+                        if (me.api) {
+                            me.api.ChangeShapeType(record.get('data').shapeType);
+                            me.fireEvent('editcomplete', me);
+                        }
+                        if (e.type !== 'click')
+                            me.btnChangeShape.menu.hide();
+                    });
+                }
+                menu.off('show:after', onShowAfter);
+            };
+            me.btnChangeShape.menu.on('show:after', onShowAfter);
 
-            var count = shapesStore.length;
             for (var i=-1; i<count-1 && count>0; i++) {
-                var shapeGroup = shapesStore.at(i>-1 ? i : i+1);
+                var shapeGroup = shapesStore.at(i > -1 ? i : i + 1);
                 var menuItem = new Common.UI.MenuItem({
                     caption: shapeGroup.get('groupName'),
                     menu: new Common.UI.Menu({
                         menuAlign: 'tr-tl',
                         items: [
-                            { template: _.template('<div id="id-shape-menu-shapegroup' + (i+1) + '" class="menu-shape" style="width: ' + (shapeGroup.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>') }
+                            {template: _.template('<div id="id-shape-menu-shapegroup' + (i + 1) + '" class="menu-shape" style="width: ' + (shapeGroup.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>')}
                         ]
                     })
                 });
                 me.btnChangeShape.menu.addItem(menuItem);
-
-                var store = shapeGroup.get('groupStore');
-                if (i<0) {
-                    store = store.clone();
-                    store.shift();
-                }
-                var shapePicker = new Common.UI.DataView({
-                    el: $('#id-shape-menu-shapegroup' + (i+1)),
-                    store: store,
-                    parentMenu: menuItem.menu,
-                    showLast: false,
-                    itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>')
-                });
-
-                shapePicker.on('item:click', function(picker, item, record, e) {
-                    if (me.api) {
-                        me.api.ChangeShapeType(record.get('data').shapeType);
-                        me.fireEvent('editcomplete', me);
-                    }
-                    if (e.type !== 'click')
-                        me.btnChangeShape.menu.hide();
-                });
             }
+            me.btnChangeShape.menu.items[0].setVisible(me._state.isFromImage);
+            me.btnChangeShape.menu.items[1].setVisible(!me._state.isFromImage);
         },
 
         UpdateThemeColors: function() {
+            if (this._initSettings) return;
+
             if (!this.btnBackColor) {
                 // create color buttons
                 this.btnBackColor = new Common.UI.ColorButton({
@@ -1674,7 +1701,6 @@ define([
                 });
                 this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this));
                 this.btnBackColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
-
                 this.btnFGColor = new Common.UI.ColorButton({
                     style: "width:45px;",
                     menu        : new Common.UI.Menu({
@@ -1751,7 +1777,6 @@ define([
                 this.colorsBorder.on('select', _.bind(this.onColorsBorderSelect, this));
                 this.btnBorderColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor));
             }
-            
             this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
             this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
             this.colorsFG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());

apps/documenteditor/main/app/view/Statusbar.js

@@ -66,7 +66,7 @@ define([
                 Common.Utils.String.format(this.pageIndexText, model.get('current'), model.get('count')) );
         }
 
-        function _clickLanguage(menu, item, state) {
+        function _clickLanguage(menu, item) {
             var $parent = menu.$el.parent();
             $parent.find('#status-label-lang').text(item.caption);
             this.langMenu.prevTip = item.value.value;
@@ -228,13 +228,13 @@ define([
                     disabled: true
                 });
 
-                this.langMenu = new Common.UI.Menu({
+                this.langMenu = new Common.UI.MenuSimple({
                     cls: 'lang-menu',
                     style: 'margin-top:-5px;',
                     restoreHeight: 285,
                     itemTemplate: _.template([
-                        '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= options.value.value %>">',
+                        '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= value.value %>" class="<% if (checked) { %> checked <% } %>">',
-                            '<i class="icon <% if (options.spellcheck) { %> img-toolbarmenu spellcheck-lang <% } %>"></i>',
+                            '<i class="icon <% if (spellcheck) { %> img-toolbarmenu spellcheck-lang <% } %>"></i>',
                             '<%= caption %>',
                         '</a>'
                     ].join('')),
@@ -340,18 +340,18 @@ define([
             },
 
             reloadLanguages: function(array) {
-                this.langMenu.removeAll();
+                var arr = [],
+                    saved = this.langMenu.saved;
                 _.each(array, function(item) {
-                    this.langMenu.addItem({
+                    arr.push({
                         caption     : item['displayValue'],
                         value       : {value: item['value'], code: item['code']},
                         checkable   : true,
-                        checked     : this.langMenu.saved == item['displayValue'],
+                        checked     : saved == item['displayValue'],
-                        spellcheck   : item['spellcheck'],
+                        spellcheck  : item['spellcheck']
-                        toggleGroup : 'language'
                     });
-                }, this);
+                });
-
+                this.langMenu.resetItems(arr);
                 if (this.langMenu.items.length>0) {
                     this.btnLanguage.setDisabled(!!this.mode.isDisconnected);
                 }
@@ -365,9 +365,9 @@ define([
                     this.langMenu.prevTip = info.value;
 
                     var lang = _.find(this.langMenu.items, function(item) { return item.caption == info.displayValue; });
-                    if (lang)
+                    if (lang) {
-                        lang.setChecked(true);
+                        this.langMenu.setChecked(this.langMenu.items.indexOf(lang), true);
-                    else {
+                    } else {
                         this.langMenu.saved = info.displayValue;
                         this.langMenu.clearAll();
                     }

apps/documenteditor/main/app/view/TableSettings.js

@@ -231,7 +231,7 @@ define([
         },
 
         render: function () {
-            var el = $(this.el);
+            var el = this.$el || $(this.el);
             el.html(this.template({
                 scope: this
             }));
@@ -431,10 +431,10 @@ define([
         },
 
         createDelayedElements: function() {
+            this._initSettings = false;
             this.createDelayedControls();
             this.UpdateThemeColors();
             this.updateMetricUnit();
-            this._initSettings = false;
         },
 
         ChangeSettings: function(props) {
@@ -641,6 +641,7 @@ define([
         },
 
         UpdateThemeColors: function() {
+            if (this._initSettings) return;
              if (!this.btnBackColor) {
                 // create color buttons
                  this.btnBorderColor = new Common.UI.ColorButton({
@@ -715,7 +716,6 @@ define([
                     data[index].set('imageUrl', template.asc_getImage());
                 });
             } else {
-                self.cmbTableTemplate.menuPicker.store.reset([]);
                 var arr = [];
                 _.each(Templates, function(template){
                     arr.push({
@@ -725,7 +725,7 @@ define([
                         tip    : template.asc_getDisplayName()
                     });
                 });
-                self.cmbTableTemplate.menuPicker.store.add(arr);
+                self.cmbTableTemplate.menuPicker.store.reset(arr);
             }
         },
 

apps/documenteditor/main/app/view/TextArtSettings.js

@@ -105,20 +105,24 @@ define([
             this.BorderSize = 0;
             this.BorderType = Asc.c_oDashType.solid;
 
+            DE.getCollection('Common.Collections.TextArt').bind({
+                reset: this.fillTextArt.bind(this)
+            });
+
             this.render();
+        },
+
+        render: function () {
+            var el = this.$el || $(this.el);
+            el.html(this.template({
+                scope: this
+            }));
 
             this.FillColorContainer = $('#textart-panel-color-fill');
             this.FillGradientContainer = $('#textart-panel-gradient-fill');
             this.TransparencyContainer = $('#textart-panel-transparent-fill');
         },
 
-        render: function () {
-            var el = $(this.el);
-            el.html(this.template({
-                scope: this
-            }));
-        },
-
         setApi: function(api) {
             this.api = api;
             return this;
@@ -985,15 +989,17 @@ define([
         },
 
         createDelayedElements: function() {
+            this._initSettings = false;
             this.createDelayedControls();
             this.UpdateThemeColors();
             this.fillTransform(this.api.asc_getPropertyEditorTextArts());
-            this._initSettings = false;
+            this.fillTextArt();
         },
 
         fillTextArt: function() {
+            if (this._initSettings) return;
+
             var me = this;
-            
             if (!this.cmbTextArt) {
                 this.cmbTextArt = new Common.UI.ComboDataView({
                     itemWidth: 50,
@@ -1017,6 +1023,10 @@ define([
 
             var models = this.application.getCollection('Common.Collections.TextArt').models,
                 count = this.cmbTextArt.menuPicker.store.length;
+            if (models.length<1) {
+                DE.getController('Main').fillTextArt(this.api.asc_getTextArtPreviews());
+                return;
+            }
             if (count>0 && count==models.length) {
                 var data = this.cmbTextArt.menuPicker.store.models;
                 _.each(models, function(template, index){
@@ -1073,6 +1083,7 @@ define([
         },
 
         UpdateThemeColors: function() {
+            if (this._initSettings) return;
             if (!this.btnBackColor) {
                 this.btnBorderColor = new Common.UI.ColorButton({
                     style: "width:45px;",
@@ -1132,7 +1143,6 @@ define([
                 this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this));
                 this.btnBackColor.menu.items[1].on('click',  _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
             }
-
             this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
             this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
             this.colorsGrad.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());

apps/documenteditor/main/app/view/Toolbar.js

@@ -506,12 +506,7 @@ define([
                         cls: 'btn-toolbar x-huge icon-top',
                         caption: me.capBtnInsChart,
                         iconCls: 'btn-insertchart',
-                        menu: new Common.UI.Menu({
+                        menu: true
-                            style: 'width: 435px;',
-                            items: [
-                                {template: _.template('<div id="id-toolbar-menu-insertchart" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>')}
-                            ]
-                        })
                     });
                     this.paragraphControls.push(this.btnInsertChart);
 
@@ -1270,7 +1265,7 @@ define([
             rendererComponents: function (html) {
                 var $host = $(html);
                 var _injectComponent = function (id, cmp) {
-                    Common.Utils.injectComponent($host.find(id), cmp);
+                    Common.Utils.injectComponent($host.findById(id), cmp);
                 };
 
                 _injectComponent('#slot-field-fontname', this.cmbFontName);
@@ -1656,6 +1651,91 @@ define([
                 this.paragraphControls.push(this.mnuPageNumCurrentPos);
                 this.paragraphControls.push(this.mnuInsertPageCount);
 
+                this.btnInsertChart.setMenu( new Common.UI.Menu({
+                    style: 'width: 435px;',
+                    items: [
+                        {template: _.template('<div id="id-toolbar-menu-insertchart" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>')}
+                    ]
+                }));
+
+                var onShowBefore = function(menu) {
+                    var picker = new Common.UI.DataView({
+                        el: $('#id-toolbar-menu-insertchart'),
+                        parentMenu: menu,
+                        showLast: false,
+                        restoreHeight: 421,
+                        groups: new Common.UI.DataViewGroupStore([
+                            {id: 'menu-chart-group-bar', caption: me.textColumn, headername: me.textCharts},
+                            {id: 'menu-chart-group-line', caption: me.textLine},
+                            {id: 'menu-chart-group-pie', caption: me.textPie},
+                            {id: 'menu-chart-group-hbar', caption: me.textBar},
+                            {id: 'menu-chart-group-area', caption: me.textArea, inline: true},
+                            {id: 'menu-chart-group-scatter', caption: me.textPoint, inline: true},
+                            {id: 'menu-chart-group-stock', caption: me.textStock, inline: true}
+                            // {id: 'menu-chart-group-surface', caption: me.textSurface}
+                        ]),
+                        store: new Common.UI.DataViewStore([
+                            { group: 'menu-chart-group-bar',     type: Asc.c_oAscChartTypeSettings.barNormal,          iconCls: 'column-normal'},
+                            { group: 'menu-chart-group-bar',     type: Asc.c_oAscChartTypeSettings.barStacked,         iconCls: 'column-stack'},
+                            { group: 'menu-chart-group-bar',     type: Asc.c_oAscChartTypeSettings.barStackedPer,      iconCls: 'column-pstack'},
+                            { group: 'menu-chart-group-bar',     type: Asc.c_oAscChartTypeSettings.barNormal3d,        iconCls: 'column-3d-normal'},
+                            { group: 'menu-chart-group-bar',     type: Asc.c_oAscChartTypeSettings.barStacked3d,       iconCls: 'column-3d-stack'},
+                            { group: 'menu-chart-group-bar',     type: Asc.c_oAscChartTypeSettings.barStackedPer3d,    iconCls: 'column-3d-pstack'},
+                            { group: 'menu-chart-group-bar',     type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective,    iconCls: 'column-3d-normal-per'},
+                            { group: 'menu-chart-group-line',    type: Asc.c_oAscChartTypeSettings.lineNormal,         iconCls: 'line-normal'},
+                            { group: 'menu-chart-group-line',    type: Asc.c_oAscChartTypeSettings.lineStacked,        iconCls: 'line-stack'},
+                            { group: 'menu-chart-group-line',    type: Asc.c_oAscChartTypeSettings.lineStackedPer,     iconCls: 'line-pstack'},
+                            { group: 'menu-chart-group-line',    type: Asc.c_oAscChartTypeSettings.line3d,             iconCls: 'line-3d'},
+                            { group: 'menu-chart-group-pie',     type: Asc.c_oAscChartTypeSettings.pie,                iconCls: 'pie-normal'},
+                            { group: 'menu-chart-group-pie',     type: Asc.c_oAscChartTypeSettings.doughnut,           iconCls: 'pie-doughnut'},
+                            { group: 'menu-chart-group-pie',     type: Asc.c_oAscChartTypeSettings.pie3d,              iconCls: 'pie-3d-normal'},
+                            { group: 'menu-chart-group-hbar',    type: Asc.c_oAscChartTypeSettings.hBarNormal,         iconCls: 'bar-normal'},
+                            { group: 'menu-chart-group-hbar',    type: Asc.c_oAscChartTypeSettings.hBarStacked,        iconCls: 'bar-stack'},
+                            { group: 'menu-chart-group-hbar',    type: Asc.c_oAscChartTypeSettings.hBarStackedPer,     iconCls: 'bar-pstack'},
+                            { group: 'menu-chart-group-hbar',    type: Asc.c_oAscChartTypeSettings.hBarNormal3d,       iconCls: 'bar-3d-normal'},
+                            { group: 'menu-chart-group-hbar',    type: Asc.c_oAscChartTypeSettings.hBarStacked3d,      iconCls: 'bar-3d-stack'},
+                            { group: 'menu-chart-group-hbar',    type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d,   iconCls: 'bar-3d-pstack'},
+                            { group: 'menu-chart-group-area',    type: Asc.c_oAscChartTypeSettings.areaNormal,         iconCls: 'area-normal'},
+                            { group: 'menu-chart-group-area',    type: Asc.c_oAscChartTypeSettings.areaStacked,        iconCls: 'area-stack'},
+                            { group: 'menu-chart-group-area',    type: Asc.c_oAscChartTypeSettings.areaStackedPer,     iconCls: 'area-pstack'},
+                            { group: 'menu-chart-group-scatter', type: Asc.c_oAscChartTypeSettings.scatter,            iconCls: 'point-normal'},
+                            { group: 'menu-chart-group-stock',   type: Asc.c_oAscChartTypeSettings.stock,              iconCls: 'stock-normal'}
+                            // { group: 'menu-chart-group-surface', type: Asc.c_oAscChartTypeSettings.surfaceNormal,      iconCls: 'surface-normal'},
+                            // { group: 'menu-chart-group-surface', type: Asc.c_oAscChartTypeSettings.surfaceWireframe,   iconCls: 'surface-wireframe'},
+                            // { group: 'menu-chart-group-surface', type: Asc.c_oAscChartTypeSettings.contourNormal,      iconCls: 'contour-normal'},
+                            // { group: 'menu-chart-group-surface', type: Asc.c_oAscChartTypeSettings.contourWireframe,   iconCls: 'contour-wireframe'}
+
+                        ]),
+                        itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
+                    });
+                    picker.on('item:click', function (picker, item, record, e) {
+                        if (record)
+                            me.fireEvent('add:chart', [record.get('type')]);
+                    });
+                    menu.off('show:before', onShowBefore);
+                };
+                this.btnInsertChart.menu.on('show:before', onShowBefore);
+
+                var onShowBeforeTextArt = function (menu) {
+                    var collection = DE.getCollection('Common.Collections.TextArt');
+                    if (collection.length<1)
+                        DE.getController('Main').fillTextArt(me.api.asc_getTextArtPreviews());
+                    var picker = new Common.UI.DataView({
+                        el: $('#id-toolbar-menu-insart'),
+                        store: collection,
+                        parentMenu: menu,
+                        showLast: false,
+                        itemTemplate: _.template('<div class="item-art"><img src="<%= imageUrl %>" id="<%= id %>" style="width:50px;height:50px;"></div>')
+                    });
+                    picker.on('item:click', function (picker, item, record, e) {
+                        if (record)
+                            me.fireEvent('insert:textart', [record.get('data')]);
+                        if (e.type !== 'click') menu.hide();
+                    });
+                    menu.off('show:before', onShowBeforeTextArt);
+                };
+                this.btnInsertTextArt.menu.on('show:before', onShowBeforeTextArt);
+
                 // set dataviews
 
                 var _conf = this.mnuMarkersPicker.conf;
@@ -1773,181 +1853,6 @@ define([
                 });
                 _conf && this.mnuPageNumberPosPicker.setDisabled(_conf.disabled);
 
-                this.mnuInsertChartPicker = new Common.UI.DataView({
-                    el: $('#id-toolbar-menu-insertchart'),
-                    parentMenu: this.btnInsertChart.menu,
-                    showLast: false,
-                    restoreHeight: 421,
-                    groups: new Common.UI.DataViewGroupStore([
-                        {id: 'menu-chart-group-bar', caption: me.textColumn, headername: me.textCharts},
-                        {id: 'menu-chart-group-line', caption: me.textLine},
-                        {id: 'menu-chart-group-pie', caption: me.textPie},
-                        {id: 'menu-chart-group-hbar', caption: me.textBar},
-                        {id: 'menu-chart-group-area', caption: me.textArea, inline: true},
-                        {id: 'menu-chart-group-scatter', caption: me.textPoint, inline: true},
-                        {id: 'menu-chart-group-stock', caption: me.textStock, inline: true}
-                        // {id: 'menu-chart-group-surface', caption: me.textSurface}
-                    ]),
-                    store: new Common.UI.DataViewStore([
-                        {
-                            group: 'menu-chart-group-bar',
-                            type: Asc.c_oAscChartTypeSettings.barNormal,
-                            allowSelected: true,
-                            iconCls: 'column-normal',
-                            selected: true
-                        },
-                        {
-                            group: 'menu-chart-group-bar',
-                            type: Asc.c_oAscChartTypeSettings.barStacked,
-                            allowSelected: true,
-                            iconCls: 'column-stack'
-                        },
-                        {
-                            group: 'menu-chart-group-bar',
-                            type: Asc.c_oAscChartTypeSettings.barStackedPer,
-                            allowSelected: true,
-                            iconCls: 'column-pstack'
-                        },
-                        {
-                            group: 'menu-chart-group-bar',
-                            type: Asc.c_oAscChartTypeSettings.barNormal3d,
-                            allowSelected: true,
-                            iconCls: 'column-3d-normal'
-                        },
-                        {
-                            group: 'menu-chart-group-bar',
-                            type: Asc.c_oAscChartTypeSettings.barStacked3d,
-                            allowSelected: true,
-                            iconCls: 'column-3d-stack'
-                        },
-                        {
-                            group: 'menu-chart-group-bar',
-                            type: Asc.c_oAscChartTypeSettings.barStackedPer3d,
-                            allowSelected: true,
-                            iconCls: 'column-3d-pstack'
-                        },
-                        {
-                            group: 'menu-chart-group-bar',
-                            type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective,
-                            allowSelected: true,
-                            iconCls: 'column-3d-normal-per'
-                        },
-                        {
-                            group: 'menu-chart-group-line',
-                            type: Asc.c_oAscChartTypeSettings.lineNormal,
-                            allowSelected: true,
-                            iconCls: 'line-normal'
-                        },
-                        {
-                            group: 'menu-chart-group-line',
-                            type: Asc.c_oAscChartTypeSettings.lineStacked,
-                            allowSelected: true,
-                            iconCls: 'line-stack'
-                        },
-                        {
-                            group: 'menu-chart-group-line',
-                            type: Asc.c_oAscChartTypeSettings.lineStackedPer,
-                            allowSelected: true,
-                            iconCls: 'line-pstack'
-                        },
-                        {
-                            group: 'menu-chart-group-line',
-                            type: Asc.c_oAscChartTypeSettings.line3d,
-                            allowSelected: true,
-                            iconCls: 'line-3d'
-                        },
-                        {
-                            group: 'menu-chart-group-pie',
-                            type: Asc.c_oAscChartTypeSettings.pie,
-                            allowSelected: true,
-                            iconCls: 'pie-normal'
-                        },
-                        {
-                            group: 'menu-chart-group-pie',
-                            type: Asc.c_oAscChartTypeSettings.doughnut,
-                            allowSelected: true,
-                            iconCls: 'pie-doughnut'
-                        },
-                        {
-                            group: 'menu-chart-group-pie',
-                            type: Asc.c_oAscChartTypeSettings.pie3d,
-                            allowSelected: true,
-                            iconCls: 'pie-3d-normal'
-                        },
-                        {
-                            group: 'menu-chart-group-hbar',
-                            type: Asc.c_oAscChartTypeSettings.hBarNormal,
-                            allowSelected: true,
-                            iconCls: 'bar-normal'
-                        },
-                        {
-                            group: 'menu-chart-group-hbar',
-                            type: Asc.c_oAscChartTypeSettings.hBarStacked,
-                            allowSelected: true,
-                            iconCls: 'bar-stack'
-                        },
-                        {
-                            group: 'menu-chart-group-hbar',
-                            type: Asc.c_oAscChartTypeSettings.hBarStackedPer,
-                            allowSelected: true,
-                            iconCls: 'bar-pstack'
-                        },
-                        {
-                            group: 'menu-chart-group-hbar',
-                            type: Asc.c_oAscChartTypeSettings.hBarNormal3d,
-                            allowSelected: true,
-                            iconCls: 'bar-3d-normal'
-                        },
-                        {
-                            group: 'menu-chart-group-hbar',
-                            type: Asc.c_oAscChartTypeSettings.hBarStacked3d,
-                            allowSelected: true,
-                            iconCls: 'bar-3d-stack'
-                        },
-                        {
-                            group: 'menu-chart-group-hbar',
-                            type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d,
-                            allowSelected: true,
-                            iconCls: 'bar-3d-pstack'
-                        },
-                        {
-                            group: 'menu-chart-group-area',
-                            type: Asc.c_oAscChartTypeSettings.areaNormal,
-                            allowSelected: true,
-                            iconCls: 'area-normal'
-                        },
-                        {
-                            group: 'menu-chart-group-area',
-                            type: Asc.c_oAscChartTypeSettings.areaStacked,
-                            allowSelected: true,
-                            iconCls: 'area-stack'
-                        },
-                        {
-                            group: 'menu-chart-group-area',
-                            type: Asc.c_oAscChartTypeSettings.areaStackedPer,
-                            allowSelected: true,
-                            iconCls: 'area-pstack'
-                        },
-                        {
-                            group: 'menu-chart-group-scatter',
-                            type: Asc.c_oAscChartTypeSettings.scatter,
-                            allowSelected: true,
-                            iconCls: 'point-normal'
-                        },
-                        {
-                            group: 'menu-chart-group-stock',
-                            type: Asc.c_oAscChartTypeSettings.stock,
-                            allowSelected: true,
-                            iconCls: 'stock-normal'
-                        }
-                        // { group: 'menu-chart-group-surface', type: Asc.c_oAscChartTypeSettings.surfaceNormal,      allowSelected: true, iconCls: 'surface-normal'},
-                        // { group: 'menu-chart-group-surface', type: Asc.c_oAscChartTypeSettings.surfaceWireframe,   allowSelected: true, iconCls: 'surface-wireframe'},
-                        // { group: 'menu-chart-group-surface', type: Asc.c_oAscChartTypeSettings.contourNormal,      allowSelected: true, iconCls: 'contour-normal'},
-                        // { group: 'menu-chart-group-surface', type: Asc.c_oAscChartTypeSettings.contourWireframe,   allowSelected: true, iconCls: 'contour-wireframe'}
-                    ]),
-                    itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
-                });
-
                 this.mnuTablePicker = new Common.UI.DimensionPicker({
                     el: $('#id-toolbar-menu-tablepicker'),
                     minRows: 8,

apps/documenteditor/main/index.html

@@ -22,157 +22,93 @@
             z-index: 1001;
         }
 
-        .loader-page {
+        .loadmask > .brendpanel {
             width: 100%;
-            height: 170px;
+            height: 56px;
-            bottom: 42%;
+            background: #446995;
-            position: absolute;
-            text-align: center;
-            line-height: 10px;
         }
 
-        .loader-logo {
+        .loadmask > .brendpanel > div {
-            max-height: 160px;
+            display: flex;
-            margin-bottom: 10px;
+            align-items: center;
         }
 
-        .loader-page-romb {
+        .loadmask > .brendpanel .spacer {
-            width: 40px;
+            margin-left: auto;
+        }
+
+        .loadmask > .brendpanel .loading-logo {
+            padding: 0 24px 0 12px;
+            max-width: 200px;
+            height: 20px;
+        }
+
+        .loadmask > .brendpanel .loading-logo > img {
             display: inline-block;
+            max-width: 100px;
+            max-height: 20px;
+            opacity: 0;
         }
 
-        .loader-page-text {
+        .loadmask > .brendpanel .circle {
-            width: 100%;
+            vertical-align: middle;
-            bottom: 42%;
+            width: 20px;
-            position: absolute;
+            height: 20px;
-            text-align: center;
+            border-radius: 12px;
-            color: #888;
+            margin: 4px 10px;
-            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            background: rgba(255, 255, 255, 0.2);
-            line-height: 20px;
         }
 
-        .loader-page-text-loading {
+        .loadmask > .brendpanel .rect {
-            font-size: 14px;
+            vertical-align: middle;
+            width: 50px;
+            height: 12px;
+            border-radius: 3px;
+            margin: 0 10px;
+            background: rgba(255, 255, 255, 0.2);
         }
 
-        .loader-page-text-customer {
+        .loadmask > .placeholder {
-            font-size: 16px;
+            background: #fbfbfb;
-            margin-bottom: 5px;
+            width: 796px;
+            margin: 112px auto;
+            height: 100%;
+            border: 1px solid #dfdfdf;
+            padding-top: 50px;
         }
 
-        .romb {
+        .loadmask > .placeholder > .line {
-            width: 40px;
+            height: 15px;
-            height: 40px;
+            margin: 30px 80px;
-            -webkit-transform: rotate(135deg) skew(20deg, 20deg);
+            background: #e2e2e2;
-            -moz-transform: rotate(135deg) skew(20deg, 20deg);
+            overflow: hidden;
-            -ms-transform: rotate(135deg) skew(20deg, 20deg);
+            position: relative;
-            -o-transform: rotate(135deg) skew(20deg, 20deg);
+
-            position: absolute;
+            -webkit-animation: flickerAnimation 2s infinite ease-in-out;
-            background: red;
+            -moz-animation: flickerAnimation 2s infinite ease-in-out;
-            border-radius: 6px;
+            -o-animation: flickerAnimation 2s infinite ease-in-out;
-            -webkit-animation: movedown 3s infinite ease;
+            animation: flickerAnimation 2s infinite ease-in-out;
-            -moz-animation: movedown 3s infinite ease;
-            -ms-animation: movedown 3s infinite ease;
-            -o-animation: movedown 3s infinite ease;
-            animation: movedown 3s infinite ease;
         }
 
-        #blue {
+        @keyframes flickerAnimation {
-            z-index: 3;
+            0%   { opacity:0.1; }
-            background: #55bce6;
+            50%  { opacity:1; }
-            -webkit-animation-name: blue;
+            100% { opacity:0.1; }
-            -moz-animation-name: blue;
-            -ms-animation-name: blue;
-            -o-animation-name: blue;
-            animation-name: blue;
         }
-
+        @-o-keyframes flickerAnimation{
-        #red {
+            0%   { opacity:0.1; }
-            z-index:1;
+            50%  { opacity:1; }
-            background: #de7a59;
+            100% { opacity:0.1; }
-            -webkit-animation-name: red;
-            -moz-animation-name: red;
-            -ms-animation-name: red;
-            -o-animation-name: red;
-            animation-name: red;
         }
-
+        @-moz-keyframes flickerAnimation{
-        #green {
+            0%   { opacity:0.1; }
-            z-index: 2;
+            50%  { opacity:1; }
-            background: #a1cb5c;
+            100% { opacity:0.1; }
-            -webkit-animation-name: green;
-            -moz-animation-name: green;
-            -ms-animation-name: green;
-            -o-animation-name: green;
-            animation-name: green;
         }
-
+        @-webkit-keyframes flickerAnimation{
-        @-webkit-keyframes red {
+            0%   { opacity:0.1; }
-              0%    { top:120px; background: #de7a59; }
+            50%  { opacity:1; }
-             10%    { top:120px; background: #F2CBBF; }
+            100% { opacity:0.1; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0;}
-             20%    { background: #E6E4E4; }
-             30%    { background: #D2D2D2; }
-             40%    { top:120px; }
-            100%    { top:120px; background: #de7a59; }
-        }
-
-        @keyframes red {
-              0%    { top:120px; background: #de7a59; }
-             10%    { top:120px; background: #F2CBBF; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0; }
-             20%    { background: #E6E4E4; }
-             30%    { background: #D2D2D2; }
-             40%    { top:120px; }
-            100%    { top:120px; background: #de7a59; }
-        }
-
-        @-webkit-keyframes green {
-              0%    { top:110px; background: #a1cb5c; opacity:1; }
-             10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #EFEFEF; top:0; opacity:1; }
-             30%    { background:#E6E4E4; }
-             70%    { top:110px; }
-            100%    { top:110px; background: #a1cb5c; }
-        }
-
-        @keyframes green {
-              0%    { top:110px; background: #a1cb5c; opacity:1; }
-             10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #EFEFEF; top:0; opacity:1; }
-             30%    { background:#E6E4E4; }
-             70%    { top:110px; }
-            100%    { top:110px; background: #a1cb5c; }
-        }
-
-        @-webkit-keyframes blue {
-              0%    { top:100px; background: #55bce6; opacity:1; }
-             10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #f4f4f4; top:0; opacity:0; }
-             45%    { background: #EFEFEF; top:0; opacity:0.2; }
-            100%    { top:100px; background: #55bce6; }
-        }
-
-        @keyframes blue {
-              0%    { top:100px; background: #55bce6; opacity:1; }
-             10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #fff; top:0; opacity:0; }
-             45%    { background: #EFEFEF; top:0; opacity:0.2; }
-            100%    { top:100px; background: #55bce6; }
         }
     </style>
 
@@ -228,49 +164,9 @@
 
         var params = getUrlParams(),
             lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
-            customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+            logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null;
-            margin = (customer !== '') ? 50 : 20,
-            loading = 'Loading...',
-            logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
 
         window.frameEditorId = params["frameEditorId"];
-
-        if ( lang == 'de')      loading = 'Ladevorgang...';
-        else if ( lang == 'es') loading = 'Cargando...';
-        else if ( lang == 'fr') loading = 'Chargement en cours...';
-        else if ( lang == 'it') loading = 'Caricamento in corso...';
-        else if ( lang == 'pt') loading = 'Carregando...';
-        else if ( lang == 'ru') loading = 'Загрузка...';
-        else if ( lang == 'sl') loading = 'Nalaganje...';
-        else if ( lang == 'tr') loading = 'Yükleniyor...';
-        else if ( lang == 'bg') loading = 'Зареждане...';
-        else if ( lang == 'cs') loading = 'Nahrávám...';
-        else if ( lang == 'hu') loading = 'Betöltés...';
-        else if ( lang == 'ja') loading = '読み込み中...';
-        else if ( lang == 'ko') loading = '로드 중...';
-        else if ( lang == 'lv') loading = 'Ieladēšana ...';
-        else if ( lang == 'nl') loading = 'Laden...';
-        else if ( lang == 'pl') loading = 'Ładowanie...';
-        else if ( lang == 'sk') loading = 'Nahrávam...';
-        else if ( lang == 'uk') loading = 'Завантаження...';
-        else if ( lang == 'vi') loading = 'Đang tải...';
-        else if ( lang == 'zh') loading = '加载中...';
-
-        if ( !stopLoading )
-            document.write(
-                '<div id="loading-mask" class="loadmask">' +
-                    '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
-                        ((logo!==null) ? logo :
-                            '<div class="loader-page-romb">' +
-                                '<div class="romb" id="blue"></div>' +
-                                '<div class="romb" id="green"></div>' +
-                                '<div class="romb" id="red"></div>' +
-                            '</div>') +
-                    '</div>' +
-                    '<div class="loader-page-text">' + customer +
-                        '<div class="loader-page-text-loading">' + loading + '</div>' +
-                    '</div>' +
-                '</div>');
     </script>
 
     <!-- debug begin -->
@@ -278,8 +174,21 @@
     <!-- debug end -->
 </head>
 <body>
+    <div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo.png"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div></div><div class="placeholder"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
     <div id="viewport"></div>
 
+    <script>
+        if (stopLoading) {
+            document.body.removeChild(document.getElementById('loading-mask'));
+        } else {
+            var elem = document.querySelector('.loading-logo img');
+            if (elem) {
+                logo && (elem.setAttribute('src', logo));
+                elem.style.opacity = 1;
+            }
+        }
+    </script>
+
     <script src="../../../vendor/svg-injector/svg-injector.min.js"></script>
     <img class="inline-svg" src="../../common/main/resources/img/header/buttons.svg">
     <img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
@@ -299,7 +208,7 @@
     </script>
 
     <!-- debug begin -->
-    <script type="text/javascript">var less=less||{};less.env='development';</script>
+    <script type="text/javascript">var less=less||{};less.env='development';less.async=true;</script>
     <script src="../../../vendor/less/dist/less-2.7.1.js" type="text/javascript"></script>
     <!-- debug end -->
 

apps/documenteditor/main/index.html.deploy

@@ -23,157 +23,93 @@
             z-index: 1001;
         }
 
-        .loader-page {
+        .loadmask > .brendpanel {
             width: 100%;
-            height: 170px;
+            height: 56px;
-            bottom: 42%;
+            background: #446995;
-            position: absolute;
-            text-align: center;
-            line-height: 10px;
         }
 
-        .loader-logo {
+        .loadmask > .brendpanel > div {
-            max-height: 160px;
+            display: flex;
-            margin-bottom: 10px;
+            align-items: center;
         }
 
-        .loader-page-romb {
+        .loadmask > .brendpanel .spacer {
-            width: 40px;
+            margin-left: auto;
+        }
+
+        .loadmask > .brendpanel .loading-logo {
+            padding: 0 24px 0 12px;
+            max-width: 200px;
+            height: 20px;
+        }
+
+        .loadmask > .brendpanel .loading-logo > img {
             display: inline-block;
+            max-width: 100px;
+            max-height: 20px;
+            opacity: 0;
         }
 
-        .loader-page-text {
+        .loadmask > .brendpanel .circle {
-            width: 100%;
+            vertical-align: middle;
-            bottom: 42%;
+            width: 20px;
-            position: absolute;
+            height: 20px;
-            text-align: center;
+            border-radius: 12px;
-            color: #888;
+            margin: 4px 10px;
-            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            background: rgba(255, 255, 255, 0.2);
-            line-height: 20px;
         }
 
-        .loader-page-text-loading {
+        .loadmask > .brendpanel .rect {
-            font-size: 14px;
+            vertical-align: middle;
+            width: 50px;
+            height: 12px;
+            border-radius: 3px;
+            margin: 0 10px;
+            background: rgba(255, 255, 255, 0.2);
         }
 
-        .loader-page-text-customer {
+        .loadmask > .placeholder {
-            font-size: 16px;
+            background: #fbfbfb;
-            margin-bottom: 5px;
+            width: 796px;
+            margin: 112px auto;
+            height: 100%;
+            border: 1px solid #dfdfdf;
+            padding-top: 50px;
         }
 
-        .romb {
+        .loadmask > .placeholder > .line {
-            width: 40px;
+            height: 15px;
-            height: 40px;
+            margin: 30px 80px;
-            -webkit-transform: rotate(135deg) skew(20deg, 20deg);
+            background: #e2e2e2;
-            -moz-transform: rotate(135deg) skew(20deg, 20deg);
+            overflow: hidden;
-            -ms-transform: rotate(135deg) skew(20deg, 20deg);
+            position: relative;
-            -o-transform: rotate(135deg) skew(20deg, 20deg);
+
-            position: absolute;
+            -webkit-animation: flickerAnimation 2s infinite ease-in-out;
-            background: red;
+            -moz-animation: flickerAnimation 2s infinite ease-in-out;
-            border-radius: 6px;
+            -o-animation: flickerAnimation 2s infinite ease-in-out;
-            -webkit-animation: movedown 3s infinite ease;
+            animation: flickerAnimation 2s infinite ease-in-out;
-            -moz-animation: movedown 3s infinite ease;
-            -ms-animation: movedown 3s infinite ease;
-            -o-animation: movedown 3s infinite ease;
-            animation: movedown 3s infinite ease;
         }
 
-        #blue {
+        @keyframes flickerAnimation {
-            z-index: 3;
+            0%   { opacity:0.1; }
-            background: #55bce6;
+            50%  { opacity:1; }
-            -webkit-animation-name: blue;
+            100% { opacity:0.1; }
-            -moz-animation-name: blue;
-            -ms-animation-name: blue;
-            -o-animation-name: blue;
-            animation-name: blue;
         }
-
+        @-o-keyframes flickerAnimation{
-        #red {
+            0%   { opacity:0.1; }
-            z-index:1;
+            50%  { opacity:1; }
-            background: #de7a59;
+            100% { opacity:0.1; }
-            -webkit-animation-name: red;
-            -moz-animation-name: red;
-            -ms-animation-name: red;
-            -o-animation-name: red;
-            animation-name: red;
         }
-
+        @-moz-keyframes flickerAnimation{
-        #green {
+            0%   { opacity:0.1; }
-            z-index: 2;
+            50%  { opacity:1; }
-            background: #a1cb5c;
+            100% { opacity:0.1; }
-            -webkit-animation-name: green;
-            -moz-animation-name: green;
-            -ms-animation-name: green;
-            -o-animation-name: green;
-            animation-name: green;
         }
-
+        @-webkit-keyframes flickerAnimation{
-        @-webkit-keyframes red {
+            0%   { opacity:0.1; }
-              0%    { top:120px; background: #de7a59; }
+            50%  { opacity:1; }
-             10%    { top:120px; background: #F2CBBF; }
+            100% { opacity:0.1; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0;}
-             20%    { background: #E6E4E4; }
-             30%    { background: #D2D2D2; }
-             40%    { top:120px; }
-            100%    { top:120px; background: #de7a59; }
-        }
-
-        @keyframes red {
-              0%    { top:120px; background: #de7a59; }
-             10%    { top:120px; background: #F2CBBF; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0; }
-             20%    { background: #E6E4E4; }
-             30%    { background: #D2D2D2; }
-             40%    { top:120px; }
-            100%    { top:120px; background: #de7a59; }
-        }
-
-        @-webkit-keyframes green {
-              0%    { top:110px; background: #a1cb5c; opacity:1; }
-             10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #EFEFEF; top:0; opacity:1; }
-             30%    { background:#E6E4E4; }
-             70%    { top:110px; }
-            100%    { top:110px; background: #a1cb5c; }
-        }
-
-        @keyframes green {
-              0%    { top:110px; background: #a1cb5c; opacity:1; }
-             10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #EFEFEF; top:0; opacity:1; }
-             30%    { background:#E6E4E4; }
-             70%    { top:110px; }
-            100%    { top:110px; background: #a1cb5c; }
-        }
-
-        @-webkit-keyframes blue {
-              0%    { top:100px; background: #55bce6; opacity:1; }
-             10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #f4f4f4; top:0; opacity:0; }
-             45%    { background: #EFEFEF; top:0; opacity:0.2; }
-            100%    { top:100px; background: #55bce6; }
-        }
-
-        @keyframes blue {
-              0%    { top:100px; background: #55bce6; opacity:1; }
-             10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #f4f4f4; top:0; opacity:0; }
-             45%    { background: #EFEFEF; top:0; opacity:0.2; }
-            100%    { top:100px; background: #55bce6; }
         }
     </style>
 
@@ -227,54 +163,28 @@
 
         var params = getUrlParams(),
             lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
-            customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+            logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null;
-            margin = (customer !== '') ? 50 : 20,
-            loading = 'Loading...',
-            logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
 
         window.frameEditorId = params["frameEditorId"];
-
-        if ( lang == 'de')      loading = 'Ladevorgang...';
-        else if ( lang == 'es') loading = 'Cargando...';
-        else if ( lang == 'fr') loading = 'Chargement en cours...';
-        else if ( lang == 'it') loading = 'Caricamento in corso...';
-        else if ( lang == 'pt') loading = 'Carregando...';
-        else if ( lang == 'ru') loading = 'Загрузка...';
-        else if ( lang == 'sl') loading = 'Nalaganje...';
-        else if ( lang == 'tr') loading = 'Yükleniyor...';
-        else if ( lang == 'bg') loading = 'Зареждане...';
-        else if ( lang == 'cs') loading = 'Nahrávám...';
-        else if ( lang == 'hu') loading = 'Betöltés...';
-        else if ( lang == 'ja') loading = '読み込み中...';
-        else if ( lang == 'ko') loading = '로드 중...';
-        else if ( lang == 'lv') loading = 'Ieladēšana ...';
-        else if ( lang == 'nl') loading = 'Laden...';
-        else if ( lang == 'pl') loading = 'Ładowanie...';
-        else if ( lang == 'sk') loading = 'Nahrávam...';
-        else if ( lang == 'uk') loading = 'Завантаження...';
-        else if ( lang == 'vi') loading = 'Đang tải...';
-        else if ( lang == 'zh') loading = '加载中...';
-
-        if ( !stopLoading )
-            document.write(
-                '<div id="loading-mask" class="loadmask">' +
-                    '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
-                        ((logo!==null) ? logo :
-                        '<div class="loader-page-romb">' +
-                            '<div class="romb" id="blue"></div>' +
-                            '<div class="romb" id="green"></div>' +
-                            '<div class="romb" id="red"></div>' +
-                        '</div>') +
-                    '</div>' +
-                    '<div class="loader-page-text">' +  customer +
-                        '<div class="loader-page-text-loading">' + loading + '</div>' +
-                    '</div>' +
-                '</div>');
     </script>
 
     <link rel="stylesheet" type="text/css" href="../../../apps/documenteditor/main/resources/css/app.css">
 </head>
 <body>
+    <div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo.png"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div></div><div class="placeholder"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
+    <div id="viewport"></div>
+
+    <script>
+        if (stopLoading) {
+            document.body.removeChild(document.getElementById('loading-mask'));
+        } else {
+            var elem = document.querySelector('.loading-logo img');
+            if (elem) {
+                logo && (elem.setAttribute('src', logo));
+                elem.style.opacity = 1;
+            }
+        }
+    </script>
 
     <script>
         window.requireTimeourError = function(){
@@ -315,7 +225,6 @@
     <inline src="resources/img/doc-formats/blank.svg" />
     <inline src="resources/img/toolbar/shapetypes.svg" />
 
-    <div id="viewport"></div>
     <script data-main="app" src="../../../vendor/requirejs/require.js"></script>
 
 </body>

apps/documenteditor/main/index_loader.html

@@ -0,0 +1,303 @@
+<!doctype html>
+<html>
+<head>
+    <title>ONLYOFFICE Documents</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=IE8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+    <link rel="icon" href="resources/img/favicon.ico" type="image/x-icon">
+
+    <!-- splash -->
+
+    <style type="text/css">
+        .loadmask {
+            left: 0;
+            top: 0;
+            position: absolute;
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+            border: none;
+            background-color: #f4f4f4;
+            z-index: 1001;
+        }
+        .loader-page {
+            width: 100%;
+            height: 170px;
+            bottom: 42%;
+            position: absolute;
+            text-align: center;
+            line-height: 10px;
+        }
+        .loader-logo {
+            max-height: 160px;
+            margin-bottom: 10px;
+        }
+        .loader-page-romb {
+            width: 40px;
+            display: inline-block;
+        }
+        .loader-page-text {
+            width: 100%;
+            bottom: 42%;
+            position: absolute;
+            text-align: center;
+            color: #888;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            line-height: 20px;
+        }
+        .loader-page-text-loading {
+            font-size: 14px;
+        }
+        .loader-page-text-customer {
+            font-size: 16px;
+            margin-bottom: 5px;
+        }
+        .romb {
+            width: 40px;
+            height: 40px;
+            -webkit-transform: rotate(135deg) skew(20deg, 20deg);
+            -moz-transform: rotate(135deg) skew(20deg, 20deg);
+            -ms-transform: rotate(135deg) skew(20deg, 20deg);
+            -o-transform: rotate(135deg) skew(20deg, 20deg);
+            position: absolute;
+            background: red;
+            border-radius: 6px;
+            -webkit-animation: movedown 3s infinite ease;
+            -moz-animation: movedown 3s infinite ease;
+            -ms-animation: movedown 3s infinite ease;
+            -o-animation: movedown 3s infinite ease;
+            animation: movedown 3s infinite ease;
+        }
+        #blue {
+            z-index: 3;
+            background: #55bce6;
+            -webkit-animation-name: blue;
+            -moz-animation-name: blue;
+            -ms-animation-name: blue;
+            -o-animation-name: blue;
+            animation-name: blue;
+        }
+        #red {
+            z-index:1;
+            background: #de7a59;
+            -webkit-animation-name: red;
+            -moz-animation-name: red;
+            -ms-animation-name: red;
+            -o-animation-name: red;
+            animation-name: red;
+        }
+        #green {
+            z-index: 2;
+            background: #a1cb5c;
+            -webkit-animation-name: green;
+            -moz-animation-name: green;
+            -ms-animation-name: green;
+            -o-animation-name: green;
+            animation-name: green;
+        }
+        @-webkit-keyframes red {
+            0%    { top:120px; background: #de7a59; }
+            10%    { top:120px; background: #F2CBBF; }
+            14%    { background: #f4f4f4; top:120px; }
+            15%    { background: #f4f4f4; top:0;}
+            20%    { background: #E6E4E4; }
+            30%    { background: #D2D2D2; }
+            40%    { top:120px; }
+            100%    { top:120px; background: #de7a59; }
+        }
+        @keyframes red {
+            0%    { top:120px; background: #de7a59; }
+            10%    { top:120px; background: #F2CBBF; }
+            14%    { background: #f4f4f4; top:120px; }
+            15%    { background: #f4f4f4; top:0; }
+            20%    { background: #E6E4E4; }
+            30%    { background: #D2D2D2; }
+            40%    { top:120px; }
+            100%    { top:120px; background: #de7a59; }
+        }
+        @-webkit-keyframes green {
+            0%    { top:110px; background: #a1cb5c; opacity:1; }
+            10%    { top:110px; background: #CBE0AC; opacity:1; }
+            14%    { background: #f4f4f4; top:110px; opacity:1; }
+            15%    { background: #f4f4f4; top:0; opacity:1; }
+            20%    { background: #f4f4f4; top:0; opacity:0; }
+            25%    { background: #EFEFEF; top:0; opacity:1; }
+            30%    { background:#E6E4E4; }
+            70%    { top:110px; }
+            100%    { top:110px; background: #a1cb5c; }
+        }
+        @keyframes green {
+            0%    { top:110px; background: #a1cb5c; opacity:1; }
+            10%    { top:110px; background: #CBE0AC; opacity:1; }
+            14%    { background: #f4f4f4; top:110px; opacity:1; }
+            15%    { background: #f4f4f4; top:0; opacity:1; }
+            20%    { background: #f4f4f4; top:0; opacity:0; }
+            25%    { background: #EFEFEF; top:0; opacity:1; }
+            30%    { background:#E6E4E4; }
+            70%    { top:110px; }
+            100%    { top:110px; background: #a1cb5c; }
+        }
+        @-webkit-keyframes blue {
+            0%    { top:100px; background: #55bce6; opacity:1; }
+            10%    { top:100px; background: #BFE8F8; opacity:1; }
+            14%    { background: #f4f4f4; top:100px; opacity:1; }
+            15%    { background: #f4f4f4; top:0; opacity:1; }
+            20%    { background: #f4f4f4; top:0; opacity:0; }
+            25%    { background: #f4f4f4; top:0; opacity:0; }
+            45%    { background: #EFEFEF; top:0; opacity:0.2; }
+            100%    { top:100px; background: #55bce6; }
+        }
+        @keyframes blue {
+            0%    { top:100px; background: #55bce6; opacity:1; }
+            10%    { top:100px; background: #BFE8F8; opacity:1; }
+            14%    { background: #f4f4f4; top:100px; opacity:1; }
+            15%    { background: #f4f4f4; top:0; opacity:1; }
+            20%    { background: #f4f4f4; top:0; opacity:0; }
+            25%    { background: #fff; top:0; opacity:0; }
+            45%    { background: #EFEFEF; top:0; opacity:0.2; }
+            100%    { top:100px; background: #55bce6; }
+        }
+    </style>
+
+    <script>
+        var userAgent = navigator.userAgent.toLowerCase(),
+            check = function(regex){ return regex.test(userAgent); },
+            stopLoading = false;
+        if (!check(/opera/) && (check(/msie/) || check(/trident/))) {
+            var m = /msie (\d+\.\d+)/.exec(userAgent);
+            if (m && parseFloat(m[1]) < 10.0) {
+                document.write(
+                    '<div class="app-error-panel">' +
+                    '<div class="message-block">' +
+                    '<div class="message-inner">' +
+                    '<div class="title">Your browser is not supported.</div>' +
+                    '<div class="text">Sorry, Document Editor is currently only supported in the latest versions of the Chrome, Firefox, Safari or Internet Explorer web browsers.</div>' +
+                    '</div>' +
+                    '</div>' +
+                    '</div>');
+                stopLoading = true;
+            }
+        } else
+        if (check(/windows\snt/i)) {
+            var re = /chrome\/(\d+)/i.exec(userAgent);
+            if (!!re && !!re[1] && !(re[1] > 49)) {
+                setTimeout(function () {
+                    document.getElementsByTagName('body')[0].className += "winxp";
+                },0);
+            }
+        }
+        function getUrlParams() {
+            var e,
+                a = /\+/g,  // Regex for replacing addition symbol with a space
+                r = /([^&=]+)=?([^&]*)/g,
+                d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
+                q = window.location.search.substring(1),
+                urlParams = {};
+            while (e = r.exec(q))
+                urlParams[d(e[1])] = d(e[2]);
+            return urlParams;
+        }
+        function encodeUrlParam(str) {
+            return str.replace(/&/g, '&amp;')
+                .replace(/"/g, '&quot;')
+                .replace(/'/g, '&#39;')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;');
+        }
+        var params = getUrlParams(),
+            lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
+            customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+            margin = (customer !== '') ? 50 : 20,
+            loading = 'Loading...',
+            logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
+        window.frameEditorId = params["frameEditorId"];
+        if ( lang == 'de')      loading = 'Ladevorgang...';
+        else if ( lang == 'es') loading = 'Cargando...';
+        else if ( lang == 'fr') loading = 'Chargement en cours...';
+        else if ( lang == 'it') loading = 'Caricamento in corso...';
+        else if ( lang == 'pt') loading = 'Carregando...';
+        else if ( lang == 'ru') loading = 'Загрузка...';
+        else if ( lang == 'sl') loading = 'Nalaganje...';
+        else if ( lang == 'tr') loading = 'Yükleniyor...';
+        else if ( lang == 'bg') loading = 'Зареждане...';
+        else if ( lang == 'cs') loading = 'Nahrávám...';
+        else if ( lang == 'hu') loading = 'Betöltés...';
+        else if ( lang == 'ja') loading = '読み込み中...';
+        else if ( lang == 'ko') loading = '로드 중...';
+        else if ( lang == 'lv') loading = 'Ieladēšana ...';
+        else if ( lang == 'nl') loading = 'Laden...';
+        else if ( lang == 'pl') loading = 'Ładowanie...';
+        else if ( lang == 'sk') loading = 'Nahrávam...';
+        else if ( lang == 'uk') loading = 'Завантаження...';
+        else if ( lang == 'vi') loading = 'Đang tải...';
+        else if ( lang == 'zh') loading = '加载中...';
+        if ( !stopLoading )
+            document.write(
+                '<div id="loading-mask" class="loadmask">' +
+                '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
+                ((logo!==null) ? logo :
+                '<div class="loader-page-romb">' +
+                '<div class="romb" id="blue"></div>' +
+                '<div class="romb" id="green"></div>' +
+                '<div class="romb" id="red"></div>' +
+                '</div>') +
+                '</div>' +
+                '<div class="loader-page-text">' + customer +
+                '<div class="loader-page-text-loading">' + loading + '</div>' +
+                '</div>' +
+                '</div>');
+    </script>
+
+    <!-- debug begin -->
+    <link rel="stylesheet/less" type="text/css" href="resources/less/app.less" />
+    <!-- debug end -->
+</head>
+<body>
+<div id="viewport"></div>
+
+<script src="../../../vendor/svg-injector/svg-injector.min.js"></script>
+<img class="inline-svg" src="../../common/main/resources/img/header/buttons.svg">
+<img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
+<img class="inline-svg" src="../../common/main/resources/img/doc-formats/docx.svg">
+<img class="inline-svg" src="../../common/main/resources/img/doc-formats/dotx.svg">
+<img class="inline-svg" src="../../common/main/resources/img/doc-formats/pdf.svg">
+<img class="inline-svg" src="../../common/main/resources/img/doc-formats/pdfa.svg">
+<img class="inline-svg" src="../../common/main/resources/img/doc-formats/txt.svg">
+<img class="inline-svg" src="../../common/main/resources/img/doc-formats/odt.svg">
+<img class="inline-svg" src="../../common/main/resources/img/doc-formats/ott.svg">
+<img class="inline-svg" src="../../common/main/resources/img/doc-formats/rtf.svg">
+<img class="inline-svg" src="../../common/main/resources/img/doc-formats/html.svg">
+<img class="inline-svg" src="../../common/main/resources/img/doc-formats/blank.svg">
+<script>
+    var svgpoints = document.querySelectorAll('img.inline-svg');
+    SVGInjector(svgpoints);
+</script>
+
+<!-- debug begin -->
+<script type="text/javascript">var less=less||{};less.env='development';</script>
+<script src="../../../vendor/less/dist/less-2.7.1.js" type="text/javascript"></script>
+<!-- debug end -->
+
+<script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
+<script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
+
+<script type="text/javascript" src="../sdk_dev_scripts.js"></script>
+<script>
+    window.sdk_dev_scrpipts.forEach(function(item){
+        document.write('<script type="text/javascript" src="' + item + '"><\/script>');
+    });
+    window.requireTimeourError = function(){
+        var reqerr;
+        if ( lang == 'de')      reqerr = 'Die Verbindung ist zu langsam, einige Komponenten konnten nicht geladen werden. Aktualisieren Sie bitte die Seite.';
+        else if ( lang == 'es') reqerr = 'La conexión es muy lenta, algunos de los componentes no han podido cargar. Por favor recargue la página.';
+        else if ( lang == 'fr') reqerr = 'La connexion est trop lente, certains des composants n\'ons pas pu être chargé. Veuillez recharger la page.';
+        else if ( lang == 'ru') reqerr = 'Слишком медленное соединение, не удается загрузить некоторые компоненты. Пожалуйста, обновите страницу.';
+        else reqerr = 'The connection is too slow, some of the components could not be loaded. Please reload the page.';
+        return reqerr;
+    };
+</script>
+<!-- application -->
+<script data-main="app_dev" src="../../../vendor/requirejs/require.js"></script>
+</body>
+</html>

apps/documenteditor/main/index_loader.html.deploy

@@ -0,0 +1,322 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>ONLYOFFICE Document Editor</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=IE8"/>
+    <meta name="description" content="" />
+    <meta name="keywords" content="" />
+    <link rel="icon" href="resources/img/favicon.ico" type="image/x-icon" />
+
+    <!-- splash -->
+
+    <style type="text/css">
+        .loadmask {
+            left: 0;
+            top: 0;
+            position: absolute;
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+            border: none;
+            background-color: #f4f4f4;
+            z-index: 1001;
+        }
+
+        .loader-page {
+            width: 100%;
+            height: 170px;
+            bottom: 42%;
+            position: absolute;
+            text-align: center;
+            line-height: 10px;
+        }
+
+        .loader-logo {
+            max-height: 160px;
+            margin-bottom: 10px;
+        }
+
+        .loader-page-romb {
+            width: 40px;
+            display: inline-block;
+        }
+
+        .loader-page-text {
+            width: 100%;
+            bottom: 42%;
+            position: absolute;
+            text-align: center;
+            color: #888;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            line-height: 20px;
+        }
+
+        .loader-page-text-loading {
+            font-size: 14px;
+        }
+
+        .loader-page-text-customer {
+            font-size: 16px;
+            margin-bottom: 5px;
+        }
+
+        .romb {
+            width: 40px;
+            height: 40px;
+            -webkit-transform: rotate(135deg) skew(20deg, 20deg);
+            -moz-transform: rotate(135deg) skew(20deg, 20deg);
+            -ms-transform: rotate(135deg) skew(20deg, 20deg);
+            -o-transform: rotate(135deg) skew(20deg, 20deg);
+            position: absolute;
+            background: red;
+            border-radius: 6px;
+            -webkit-animation: movedown 3s infinite ease;
+            -moz-animation: movedown 3s infinite ease;
+            -ms-animation: movedown 3s infinite ease;
+            -o-animation: movedown 3s infinite ease;
+            animation: movedown 3s infinite ease;
+        }
+
+        #blue {
+            z-index: 3;
+            background: #55bce6;
+            -webkit-animation-name: blue;
+            -moz-animation-name: blue;
+            -ms-animation-name: blue;
+            -o-animation-name: blue;
+            animation-name: blue;
+        }
+
+        #red {
+            z-index:1;
+            background: #de7a59;
+            -webkit-animation-name: red;
+            -moz-animation-name: red;
+            -ms-animation-name: red;
+            -o-animation-name: red;
+            animation-name: red;
+        }
+
+        #green {
+            z-index: 2;
+            background: #a1cb5c;
+            -webkit-animation-name: green;
+            -moz-animation-name: green;
+            -ms-animation-name: green;
+            -o-animation-name: green;
+            animation-name: green;
+        }
+
+        @-webkit-keyframes red {
+              0%    { top:120px; background: #de7a59; }
+             10%    { top:120px; background: #F2CBBF; }
+             14%    { background: #f4f4f4; top:120px; }
+             15%    { background: #f4f4f4; top:0;}
+             20%    { background: #E6E4E4; }
+             30%    { background: #D2D2D2; }
+             40%    { top:120px; }
+            100%    { top:120px; background: #de7a59; }
+        }
+
+        @keyframes red {
+              0%    { top:120px; background: #de7a59; }
+             10%    { top:120px; background: #F2CBBF; }
+             14%    { background: #f4f4f4; top:120px; }
+             15%    { background: #f4f4f4; top:0; }
+             20%    { background: #E6E4E4; }
+             30%    { background: #D2D2D2; }
+             40%    { top:120px; }
+            100%    { top:120px; background: #de7a59; }
+        }
+
+        @-webkit-keyframes green {
+              0%    { top:110px; background: #a1cb5c; opacity:1; }
+             10%    { top:110px; background: #CBE0AC; opacity:1; }
+             14%    { background: #f4f4f4; top:110px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #EFEFEF; top:0; opacity:1; }
+             30%    { background:#E6E4E4; }
+             70%    { top:110px; }
+            100%    { top:110px; background: #a1cb5c; }
+        }
+
+        @keyframes green {
+              0%    { top:110px; background: #a1cb5c; opacity:1; }
+             10%    { top:110px; background: #CBE0AC; opacity:1; }
+             14%    { background: #f4f4f4; top:110px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #EFEFEF; top:0; opacity:1; }
+             30%    { background:#E6E4E4; }
+             70%    { top:110px; }
+            100%    { top:110px; background: #a1cb5c; }
+        }
+
+        @-webkit-keyframes blue {
+              0%    { top:100px; background: #55bce6; opacity:1; }
+             10%    { top:100px; background: #BFE8F8; opacity:1; }
+             14%    { background: #f4f4f4; top:100px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #f4f4f4; top:0; opacity:0; }
+             45%    { background: #EFEFEF; top:0; opacity:0.2; }
+            100%    { top:100px; background: #55bce6; }
+        }
+
+        @keyframes blue {
+              0%    { top:100px; background: #55bce6; opacity:1; }
+             10%    { top:100px; background: #BFE8F8; opacity:1; }
+             14%    { background: #f4f4f4; top:100px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #f4f4f4; top:0; opacity:0; }
+             45%    { background: #EFEFEF; top:0; opacity:0.2; }
+            100%    { top:100px; background: #55bce6; }
+        }
+    </style>
+
+    <script>
+        var userAgent = navigator.userAgent.toLowerCase(),
+            check = function(regex){ return regex.test(userAgent); },
+            stopLoading = false;
+        if (!check(/opera/) && (check(/msie/) || check(/trident/))) {
+            var m = /msie (\d+\.\d+)/.exec(userAgent);
+            if (m && parseFloat(m[1]) < 10.0) {
+                document.write('<div class="app-error-panel">' +
+                                '<div class="message-block">' +
+                                    '<div class="message-inner">' +
+                                        '<div class="title">Your browser is not supported.</div>' +
+                                        '<div class="text">Sorry, Document Editor is currently only supported in the latest versions of the Chrome, Firefox, Safari or Internet Explorer web browsers.</div>' +
+                                    '</div>' +
+                                '</div></div>');
+                stopLoading = true;
+            }
+        } else
+        if (check(/windows\snt/i)) {
+            var re = /chrome\/(\d+)/i.exec(userAgent);
+            if (!!re && !!re[1] && !(re[1] > 49)) {
+                setTimeout(function () {
+                    document.getElementsByTagName('body')[0].className += "winxp";
+                },0);
+            }
+        }
+
+        function getUrlParams() {
+            var e,
+                a = /\+/g,  // Regex for replacing addition symbol with a space
+                r = /([^&=]+)=?([^&]*)/g,
+                d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
+                q = window.location.search.substring(1),
+                urlParams = {};
+
+            while (e = r.exec(q))
+                urlParams[d(e[1])] = d(e[2]);
+
+            return urlParams;
+        }
+
+        function encodeUrlParam(str) {
+            return str.replace(/&/g, '&amp;')
+                    .replace(/"/g, '&quot;')
+                    .replace(/'/g, '&#39;')
+                    .replace(/</g, '&lt;')
+                    .replace(/>/g, '&gt;');
+        }
+
+        var params = getUrlParams(),
+            lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
+            customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+            margin = (customer !== '') ? 50 : 20,
+            loading = 'Loading...',
+            logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
+
+        window.frameEditorId = params["frameEditorId"];
+
+        if ( lang == 'de')      loading = 'Ladevorgang...';
+        else if ( lang == 'es') loading = 'Cargando...';
+        else if ( lang == 'fr') loading = 'Chargement en cours...';
+        else if ( lang == 'it') loading = 'Caricamento in corso...';
+        else if ( lang == 'pt') loading = 'Carregando...';
+        else if ( lang == 'ru') loading = 'Загрузка...';
+        else if ( lang == 'sl') loading = 'Nalaganje...';
+        else if ( lang == 'tr') loading = 'Yükleniyor...';
+        else if ( lang == 'bg') loading = 'Зареждане...';
+        else if ( lang == 'cs') loading = 'Nahrávám...';
+        else if ( lang == 'hu') loading = 'Betöltés...';
+        else if ( lang == 'ja') loading = '読み込み中...';
+        else if ( lang == 'ko') loading = '로드 중...';
+        else if ( lang == 'lv') loading = 'Ieladēšana ...';
+        else if ( lang == 'nl') loading = 'Laden...';
+        else if ( lang == 'pl') loading = 'Ładowanie...';
+        else if ( lang == 'sk') loading = 'Nahrávam...';
+        else if ( lang == 'uk') loading = 'Завантаження...';
+        else if ( lang == 'vi') loading = 'Đang tải...';
+        else if ( lang == 'zh') loading = '加载中...';
+
+        if ( !stopLoading )
+            document.write(
+                '<div id="loading-mask" class="loadmask">' +
+                    '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
+                        ((logo!==null) ? logo :
+                        '<div class="loader-page-romb">' +
+                            '<div class="romb" id="blue"></div>' +
+                            '<div class="romb" id="green"></div>' +
+                            '<div class="romb" id="red"></div>' +
+                        '</div>') +
+                    '</div>' +
+                    '<div class="loader-page-text">' +  customer +
+                        '<div class="loader-page-text-loading">' + loading + '</div>' +
+                    '</div>' +
+                '</div>');
+    </script>
+
+    <link rel="stylesheet" type="text/css" href="../../../apps/documenteditor/main/resources/css/app.css">
+</head>
+<body>
+
+    <script>
+        window.requireTimeourError = function(){
+            var reqerr;
+
+            if ( lang == 'de')      reqerr = 'Die Verbindung ist zu langsam, einige Komponenten konnten nicht geladen werden. Aktualisieren Sie bitte die Seite.';
+            else if ( lang == 'es') reqerr = 'La conexión es muy lenta, algunos de los componentes no han podido cargar. Por favor recargue la página.';
+            else if ( lang == 'fr') reqerr = 'La connexion est trop lente, certains des composants n\'ons pas pu être chargé. Veuillez recharger la page.';
+            else if ( lang == 'ru') reqerr = 'Слишком медленное соединение, не удается загрузить некоторые компоненты. Пожалуйста, обновите страницу.';
+            else reqerr = 'The connection is too slow, some of the components could not be loaded. Please reload the page.';
+
+            return reqerr;
+        };
+
+        var requireTimeoutID = setTimeout(function(){
+            window.alert(window.requireTimeourError());
+            window.location.reload();
+        }, 30000);
+
+        var require = {
+            waitSeconds: 30,
+            callback: function(){
+                clearTimeout(requireTimeoutID);
+            }
+        };
+    </script>
+
+    <inline src="resources/img/header/buttons.svg" />
+    <inline src="resources/img/doc-formats/docx.svg" />
+    <inline src="resources/img/doc-formats/dotx.svg" />
+    <inline src="resources/img/doc-formats/pdf.svg" />
+    <inline src="resources/img/doc-formats/pdfa.svg" />
+    <inline src="resources/img/doc-formats/txt.svg" />
+    <inline src="resources/img/doc-formats/odt.svg" />
+    <inline src="resources/img/doc-formats/ott.svg" />
+    <inline src="resources/img/doc-formats/rtf.svg" />
+    <inline src="resources/img/doc-formats/html.svg" />
+    <inline src="resources/img/doc-formats/blank.svg" />
+    <inline src="resources/img/toolbar/shapetypes.svg" />
+
+    <div id="viewport"></div>
+    <script data-main="app" src="../../../vendor/requirejs/require.js"></script>
+
+</body>
+</html>

apps/documenteditor/main/resources/less/app.less

@@ -144,4 +144,29 @@
 }
 
 @huge-icon-size: 37px;
-@x-huge-icon-size: 45px;
+@x-huge-icon-size: 45px;
+
+// Skeleton of document
+
+.doc-placeholder {
+    background: #fbfbfb;
+    width: 100%;
+    max-width: 796px;
+    margin: 40px auto;
+    height: 100%;
+    border: 1px solid #dfdfdf;
+    padding-top: 50px;
+
+    -webkit-animation: flickerAnimation 2s infinite ease-in-out;
+    -moz-animation: flickerAnimation 2s infinite ease-in-out;
+    -o-animation: flickerAnimation 2s infinite ease-in-out;
+    animation: flickerAnimation 2s infinite ease-in-out;
+
+    > .line {
+        height: 15px;
+        margin: 30px 80px;
+        background: #e2e2e2;
+        overflow: hidden;
+        position: relative;
+    }
+}

apps/documenteditor/mobile/app/controller/Main.js

@@ -220,6 +220,9 @@ define([
                 if (me.editorConfig.lang)
                     me.api.asc_setLocale(me.editorConfig.lang);
 
+                if (!me.editorConfig.customization || !(me.editorConfig.customization.loaderName || me.editorConfig.customization.loaderLogo))
+                    $('#editor_sdk').append('<div class="doc-placeholder"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div>');
+
 //                if (this.appOptions.location == 'us' || this.appOptions.location == 'ca')
 //                    Common.Utils.Metric.setDefaultMetric(Common.Utils.Metric.c_MetricUnits.inch);
             },
@@ -619,6 +622,8 @@ define([
                 }
 
                 Common.Gateway.documentReady();
+
+                $('.doc-placeholder').remove();
             },
 
             onLicenseChanged: function(params) {

apps/documenteditor/mobile/index.html

@@ -16,172 +16,107 @@
 
         <style type="text/css">
             .loadmask {
-                position: absolute;
                 left: 0;
                 top: 0;
+                position: absolute;
                 height: 100%;
                 width: 100%;
                 overflow: hidden;
                 border: none;
                 background-color: #f4f4f4;
-                z-index: 100;
+                z-index: 10000;
             }
 
-            .loader-page {
+            .loadmask > .brendpanel {
                 width: 100%;
-                height: 170px;
-                bottom: 42%;
                 position: absolute;
-                text-align: center;
+                height: 44px;
-                line-height: 10px;
+                background-color: #e2e2e2;
+                opacity: 0;
             }
 
-            .loader-logo {
+            .loadmask > .brendpanel.visible {
-                max-height: 160px;
+                opacity: 1;
-                margin-bottom: 10px;
             }
 
-            .loader-page-romb {
+            .loadmask > .brendpanel.android {
-                width: 40px;
+                height: 56px;
+                background: #446995;
+            }
+
+            .loadmask > .brendpanel > div {
+                display: flex;
+                align-items: center;
+                height: 100%;
+            }
+
+            .loadmask > .brendpanel .loading-logo {
+                max-width: 200px;
+                height: 20px;
+                margin: 0 auto;
+            }
+
+            .loadmask > .brendpanel .loading-logo > img {
                 display: inline-block;
+                max-width: 100px;
+                max-height: 20px;
+                opacity: 0;
             }
 
-            .loader-page-text {
+            .loadmask > .brendpanel .circle {
+                vertical-align: middle;
+                width: 28px;
+                height: 28px;
+                border-radius: 14px;
+                margin: 4px 10px;
+                background: rgba(255, 255, 255, 0.2);
+            }
+
+            .loadmask > .placeholder {
+                background: #fbfbfb;
                 width: 100%;
-                bottom: 42%;
+                height: 100%;
-                position: absolute;
+                padding-top: 56px;
-                text-align: center;
-                color: #888;
-                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-                line-height: 20px;
             }
 
-            .loader-page-text-loading {
+            .loadmask > .placeholder > .line {
-                font-size: 14px;
+                height: 15px;
+                margin: 30px;
+                background: #e2e2e2;
+                overflow: hidden;
+                position: relative;
+
+                -webkit-animation: flickerAnimation 2s infinite ease-in-out;
+                -moz-animation: flickerAnimation 2s infinite ease-in-out;
+                -o-animation: flickerAnimation 2s infinite ease-in-out;
+                animation: flickerAnimation 2s infinite ease-in-out;
             }
 
-            .loader-page-text-customer {
+            @keyframes flickerAnimation {
-                font-size: 16px;
+                0%   { opacity:0.1; }
-                margin-bottom: 5px;
+                50%  { opacity:1; }
+                100% { opacity:0.1; }
             }
-
+            @-o-keyframes flickerAnimation{
-            .romb {
+                0%   { opacity:0.1; }
-                width: 40px;
+                50%  { opacity:1; }
-                height: 40px;
+                100% { opacity:0.1; }
-                -webkit-transform: rotate(135deg) skew(20deg, 20deg);
-                -moz-transform: rotate(135deg) skew(20deg, 20deg);
-                -ms-transform: rotate(135deg) skew(20deg, 20deg);
-                -o-transform: rotate(135deg) skew(20deg, 20deg);
-                position: absolute;
-                background: red;
-                border-radius: 6px;
-                -webkit-animation: movedown 3s infinite ease;
-                -moz-animation: movedown 3s infinite ease;
-                -ms-animation: movedown 3s infinite ease;
-                -o-animation: movedown 3s infinite ease;
-                animation: movedown 3s infinite ease;
             }
-
+            @-moz-keyframes flickerAnimation{
-            #blue {
+                0%   { opacity:0.1; }
-                z-index: 3;
+                50%  { opacity:1; }
-                background: #55bce6;
+                100% { opacity:0.1; }
-                -webkit-animation-name: blue;
-                -moz-animation-name: blue;
-                -ms-animation-name: blue;
-                -o-animation-name: blue;
-                animation-name: blue;
             }
-
+            @-webkit-keyframes flickerAnimation{
-            #red {
+                0%   { opacity:0.1; }
-                z-index:1;
+                50%  { opacity:1; }
-                background: #de7a59;
+                100% { opacity:0.1; }
-                -webkit-animation-name: red;
-                -moz-animation-name: red;
-                -ms-animation-name: red;
-                -o-animation-name: red;
-                animation-name: red;
-            }
-
-            #green {
-                z-index: 2;
-                background: #a1cb5c;
-                -webkit-animation-name: green;
-                -moz-animation-name: green;
-                -ms-animation-name: green;
-                -o-animation-name: green;
-                animation-name: green;
-            }
-
-            @-webkit-keyframes red {
-                  0%    { top:120px; background: #de7a59; }
-                 10%    { top:120px; background: #F2CBBF; }
-                 14%    { background: #f4f4f4; top:120px; }
-                 15%    { background: #f4f4f4; top:0;}
-                 20%    { background: #E6E4E4; }
-                 30%    { background: #D2D2D2; }
-                 40%    { top:120px; }
-                100%    { top:120px; background: #de7a59; }
-            }
-
-            @keyframes red {
-                  0%    { top:120px; background: #de7a59; }
-                 10%    { top:120px; background: #F2CBBF; }
-                 14%    { background: #f4f4f4; top:120px; }
-                 15%    { background: #f4f4f4; top:0; }
-                 20%    { background: #E6E4E4; }
-                 30%    { background: #D2D2D2; }
-                 40%    { top:120px; }
-                100%    { top:120px; background: #de7a59; }
-            }
-
-            @-webkit-keyframes green {
-                  0%    { top:110px; background: #a1cb5c; opacity:1; }
-                 10%    { top:110px; background: #CBE0AC; opacity:1; }
-                 14%    { background: #f4f4f4; top:110px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #EFEFEF; top:0; opacity:1; }
-                 30%    { background:#E6E4E4; }
-                 70%    { top:110px; }
-                100%    { top:110px; background: #a1cb5c; }
-            }
-
-            @keyframes green {
-                  0%    { top:110px; background: #a1cb5c; opacity:1; }
-                 10%    { top:110px; background: #CBE0AC; opacity:1; }
-                 14%    { background: #f4f4f4; top:110px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #EFEFEF; top:0; opacity:1; }
-                 30%    { background:#E6E4E4; }
-                 70%    { top:110px; }
-                100%    { top:110px; background: #a1cb5c; }
-            }
-
-            @-webkit-keyframes blue {
-                  0%    { top:100px; background: #55bce6; opacity:1; }
-                 10%    { top:100px; background: #BFE8F8; opacity:1; }
-                 14%    { background: #f4f4f4; top:100px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #f4f4f4; top:0; opacity:0; }
-                 45%    { background: #EFEFEF; top:0; opacity:0.2; }
-                100%    { top:100px; background: #55bce6; }
-            }
-
-            @keyframes blue {
-                  0%    { top:100px; background: #55bce6; opacity:1; }
-                 10%    { top:100px; background: #BFE8F8; opacity:1; }
-                 14%    { background: #f4f4f4; top:100px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #fff; top:0; opacity:0; }
-                 45%    { background: #EFEFEF; top:0; opacity:0.2; }
-                100%    { top:100px; background: #55bce6; }
             }
         </style>
     </head>
     <body>
+        <div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="circle"></div><div class="loading-logo"><img src="../../common/mobile/resources/img/header/header-logo.png"></div><div class="circle"></div></div></div><div class="placeholder"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
+
         <script type="text/javascript">
             function getUrlParams() {
                 var e,
@@ -207,48 +142,23 @@
 
             var params = getUrlParams(),
                 lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
-                customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+                logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null;
-                margin = (customer !== '') ? 50 : 20,
-                loading = 'Loading...',
-                logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
 
                 window.frameEditorId = params["frameEditorId"];
 
-            if ( lang == 'de')      loading = 'Ladevorgang...';
+            var brendpanel = document.getElementsByClassName('brendpanel')[0];
-            else if ( lang == 'es') loading = 'Cargando...';
+            if (brendpanel) {
-            else if ( lang == 'fr') loading = 'Chargement en cours...';
+                if (/Android/.test(navigator.userAgent)) {
-            else if ( lang == 'it') loading = 'Caricamento in corso...';
+                    brendpanel.classList.add('android');
-            else if ( lang == 'pt') loading = 'Carregando...';
+                }
-            else if ( lang == 'ru') loading = 'Загрузка...';
+                brendpanel.classList.add('visible');
-            else if ( lang == 'sl') loading = 'Nalaganje...';
-            else if ( lang == 'tr') loading = 'Yükleniyor...';
-            else if ( lang == 'bg') loading = 'Зареждане...';
-            else if ( lang == 'cs') loading = 'Nahrávám...';
-            else if ( lang == 'hu') loading = 'Betöltés...';
-            else if ( lang == 'ja') loading = '読み込み中...';
-            else if ( lang == 'ko') loading = '로드 중...';
-            else if ( lang == 'lv') loading = 'Ieladēšana ...';
-            else if ( lang == 'nl') loading = 'Laden...';
-            else if ( lang == 'pl') loading = 'Ładowanie...';
-            else if ( lang == 'sk') loading = 'Nahrávam...';
-            else if ( lang == 'uk') loading = 'Завантаження...';
-            else if ( lang == 'vi') loading = 'Đang tải...';
-            else if ( lang == 'zh') loading = '加载中...';
 
-            document.write(
+                var elem = document.querySelector('.loading-logo img');
-                '<div id="loading-mask" class="loadmask">' +
+                if (elem) {
-                    '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
+                    logo && (elem.setAttribute('src', logo));
-                        ((logo!==null) ? logo :
+                    elem.style.opacity = 1;
-                        '<div class="loader-page-romb">' +
+                }
-                            '<div class="romb" id="blue"></div>' +
+            }
-                            '<div class="romb" id="green"></div>' +
-                            '<div class="romb" id="red"></div>' +
-                        '</div>') +
-                    '</div>' +
-                    '<div class="loader-page-text">' +  customer +
-                    '<div class="loader-page-text-loading">' + loading + '</div>' +
-                    '</div>' +
-                '</div>');
         </script>
 
         <div id="viewport"></div>

apps/documenteditor/mobile/index.html.deploy

@@ -15,172 +15,107 @@
 
         <style type="text/css">
             .loadmask {
-                position: absolute;
                 left: 0;
                 top: 0;
+                position: absolute;
                 height: 100%;
                 width: 100%;
                 overflow: hidden;
                 border: none;
                 background-color: #f4f4f4;
-                z-index: 100;
+                z-index: 10000;
             }
 
-            .loader-page {
+            .loadmask > .brendpanel {
                 width: 100%;
-                height: 170px;
-                bottom: 42%;
                 position: absolute;
-                text-align: center;
+                height: 44px;
-                line-height: 10px;
+                background-color: #e2e2e2;
+                opacity: 0;
             }
 
-            .loader-logo {
+            .loadmask > .brendpanel.visible {
-                max-height: 160px;
+                opacity: 1;
-                margin-bottom: 10px;
             }
 
-            .loader-page-romb {
+            .loadmask > .brendpanel.android {
-                width: 40px;
+                height: 56px;
+                background: #446995;
+            }
+
+            .loadmask > .brendpanel > div {
+                display: flex;
+                align-items: center;
+                height: 100%;
+            }
+
+            .loadmask > .brendpanel .loading-logo {
+                max-width: 200px;
+                height: 20px;
+                margin: 0 auto;
+            }
+
+            .loadmask > .brendpanel .loading-logo > img {
                 display: inline-block;
+                max-width: 100px;
+                max-height: 20px;
+                opacity: 0;
             }
 
-            .loader-page-text {
+            .loadmask > .brendpanel .circle {
+                vertical-align: middle;
+                width: 28px;
+                height: 28px;
+                border-radius: 14px;
+                margin: 4px 10px;
+                background: rgba(255, 255, 255, 0.2);
+            }
+
+            .loadmask > .placeholder {
+                background: #fbfbfb;
                 width: 100%;
-                bottom: 42%;
+                height: 100%;
-                position: absolute;
+                padding-top: 56px;
-                text-align: center;
-                color: #888;
-                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-                line-height: 20px;
             }
 
-            .loader-page-text-loading {
+            .loadmask > .placeholder > .line {
-                font-size: 14px;
+                height: 15px;
+                margin: 30px;
+                background: #e2e2e2;
+                overflow: hidden;
+                position: relative;
+
+                -webkit-animation: flickerAnimation 2s infinite ease-in-out;
+                -moz-animation: flickerAnimation 2s infinite ease-in-out;
+                -o-animation: flickerAnimation 2s infinite ease-in-out;
+                animation: flickerAnimation 2s infinite ease-in-out;
             }
 
-            .loader-page-text-customer {
+            @keyframes flickerAnimation {
-                font-size: 16px;
+                0%   { opacity:0.1; }
-                margin-bottom: 5px;
+                50%  { opacity:1; }
+                100% { opacity:0.1; }
             }
-
+            @-o-keyframes flickerAnimation{
-            .romb {
+                0%   { opacity:0.1; }
-                width: 40px;
+                50%  { opacity:1; }
-                height: 40px;
+                100% { opacity:0.1; }
-                -webkit-transform: rotate(135deg) skew(20deg, 20deg);
-                -moz-transform: rotate(135deg) skew(20deg, 20deg);
-                -ms-transform: rotate(135deg) skew(20deg, 20deg);
-                -o-transform: rotate(135deg) skew(20deg, 20deg);
-                position: absolute;
-                background: red;
-                border-radius: 6px;
-                -webkit-animation: movedown 3s infinite ease;
-                -moz-animation: movedown 3s infinite ease;
-                -ms-animation: movedown 3s infinite ease;
-                -o-animation: movedown 3s infinite ease;
-                animation: movedown 3s infinite ease;
             }
-
+            @-moz-keyframes flickerAnimation{
-            #blue {
+                0%   { opacity:0.1; }
-                z-index: 3;
+                50%  { opacity:1; }
-                background: #55bce6;
+                100% { opacity:0.1; }
-                -webkit-animation-name: blue;
-                -moz-animation-name: blue;
-                -ms-animation-name: blue;
-                -o-animation-name: blue;
-                animation-name: blue;
             }
-
+            @-webkit-keyframes flickerAnimation{
-            #red {
+                0%   { opacity:0.1; }
-                z-index:1;
+                50%  { opacity:1; }
-                background: #de7a59;
+                100% { opacity:0.1; }
-                -webkit-animation-name: red;
-                -moz-animation-name: red;
-                -ms-animation-name: red;
-                -o-animation-name: red;
-                animation-name: red;
-            }
-
-            #green {
-                z-index: 2;
-                background: #a1cb5c;
-                -webkit-animation-name: green;
-                -moz-animation-name: green;
-                -ms-animation-name: green;
-                -o-animation-name: green;
-                animation-name: green;
-            }
-
-            @-webkit-keyframes red {
-                  0%    { top:120px; background: #de7a59; }
-                 10%    { top:120px; background: #F2CBBF; }
-                 14%    { background: #f4f4f4; top:120px; }
-                 15%    { background: #f4f4f4; top:0;}
-                 20%    { background: #E6E4E4; }
-                 30%    { background: #D2D2D2; }
-                 40%    { top:120px; }
-                100%    { top:120px; background: #de7a59; }
-            }
-
-            @keyframes red {
-                  0%    { top:120px; background: #de7a59; }
-                 10%    { top:120px; background: #F2CBBF; }
-                 14%    { background: #f4f4f4; top:120px; }
-                 15%    { background: #f4f4f4; top:0; }
-                 20%    { background: #E6E4E4; }
-                 30%    { background: #D2D2D2; }
-                 40%    { top:120px; }
-                100%    { top:120px; background: #de7a59; }
-            }
-
-            @-webkit-keyframes green {
-                  0%    { top:110px; background: #a1cb5c; opacity:1; }
-                 10%    { top:110px; background: #CBE0AC; opacity:1; }
-                 14%    { background: #f4f4f4; top:110px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #EFEFEF; top:0; opacity:1; }
-                 30%    { background:#E6E4E4; }
-                 70%    { top:110px; }
-                100%    { top:110px; background: #a1cb5c; }
-            }
-
-            @keyframes green {
-                  0%    { top:110px; background: #a1cb5c; opacity:1; }
-                 10%    { top:110px; background: #CBE0AC; opacity:1; }
-                 14%    { background: #f4f4f4; top:110px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #EFEFEF; top:0; opacity:1; }
-                 30%    { background:#E6E4E4; }
-                 70%    { top:110px; }
-                100%    { top:110px; background: #a1cb5c; }
-            }
-
-            @-webkit-keyframes blue {
-                  0%    { top:100px; background: #55bce6; opacity:1; }
-                 10%    { top:100px; background: #BFE8F8; opacity:1; }
-                 14%    { background: #f4f4f4; top:100px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #f4f4f4; top:0; opacity:0; }
-                 45%    { background: #EFEFEF; top:0; opacity:0.2; }
-                100%    { top:100px; background: #55bce6; }
-            }
-
-            @keyframes blue {
-                  0%    { top:100px; background: #55bce6; opacity:1; }
-                 10%    { top:100px; background: #BFE8F8; opacity:1; }
-                 14%    { background: #f4f4f4; top:100px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #fff; top:0; opacity:0; }
-                 45%    { background: #EFEFEF; top:0; opacity:0.2; }
-                100%    { top:100px; background: #55bce6; }
             }
         </style>
     </head>
     <body>
+        <div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="circle"></div><div class="loading-logo"><img src="../../common/mobile/resources/img/header/header-logo.png"></div><div class="circle"></div></div></div><div class="placeholder"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
+
         <script type="text/javascript">
             var ua = navigator.userAgent;
 
@@ -219,48 +154,23 @@
 
             var params = getUrlParams(),
                 lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
-                customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+                logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null;
-                margin = (customer !== '') ? 50 : 20,
-                loading = 'Loading...',
-                logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
 
                 window.frameEditorId = params["frameEditorId"];
 
-            if ( lang == 'de')      loading = 'Ladevorgang...';
+            var brendpanel = document.getElementsByClassName('brendpanel')[0];
-            else if ( lang == 'es') loading = 'Cargando...';
+            if (brendpanel) {
-            else if ( lang == 'fr') loading = 'Chargement en cours...';
+                if (/Android/.test(navigator.userAgent)) {
-            else if ( lang == 'it') loading = 'Caricamento in corso...';
+                    brendpanel.classList.add('android');
-            else if ( lang == 'pt') loading = 'Carregando...';
+                }
-            else if ( lang == 'ru') loading = 'Загрузка...';
+                brendpanel.classList.add('visible');
-            else if ( lang == 'sl') loading = 'Nalaganje...';
-            else if ( lang == 'tr') loading = 'Yükleniyor...';
-            else if ( lang == 'bg') loading = 'Зареждане...';
-            else if ( lang == 'cs') loading = 'Nahrávám...';
-            else if ( lang == 'hu') loading = 'Betöltés...';
-            else if ( lang == 'ja') loading = '読み込み中...';
-            else if ( lang == 'ko') loading = '로드 중...';
-            else if ( lang == 'lv') loading = 'Ieladēšana ...';
-            else if ( lang == 'nl') loading = 'Laden...';
-            else if ( lang == 'pl') loading = 'Ładowanie...';
-            else if ( lang == 'sk') loading = 'Nahrávam...';
-            else if ( lang == 'uk') loading = 'Завантаження...';
-            else if ( lang == 'vi') loading = 'Đang tải...';
-            else if ( lang == 'zh') loading = '加载中...';
 
-            document.write(
+                var elem = document.querySelector('.loading-logo img');
-                '<div id="loading-mask" class="loadmask">' +
+                if (elem) {
-                    '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
+                    logo && (elem.setAttribute('src', logo));
-                        ((logo!==null) ? logo :
+                    elem.style.opacity = 1;
-                        '<div class="loader-page-romb">' +
+                }
-                            '<div class="romb" id="blue"></div>' +
+            }
-                            '<div class="romb" id="green"></div>' +
-                            '<div class="romb" id="red"></div>' +
-                        '</div>') +
-                    '</div>' +
-                    '<div class="loader-page-text">' +  customer +
-                    '<div class="loader-page-text-loading">' + loading + '</div>' +
-                    '</div>' +
-                '</div>');
 
             window.requireTimeourError = function(){
                 var reqerr;

apps/documenteditor/mobile/index_loader.html

@@ -0,0 +1,265 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="mobile-web-app-capable" content="yes">
+
+    <title>ONLYOFFICE Documents</title>
+
+    <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,500,700" rel="stylesheet" type="text/css">
+    <!-- App styles -->
+
+    <!-- splash -->
+
+    <style type="text/css">
+        .loadmask {
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+            border: none;
+            background-color: #f4f4f4;
+            z-index: 100;
+        }
+        .loader-page {
+            width: 100%;
+            height: 170px;
+            bottom: 42%;
+            position: absolute;
+            text-align: center;
+            line-height: 10px;
+        }
+        .loader-logo {
+            max-height: 160px;
+            margin-bottom: 10px;
+        }
+        .loader-page-romb {
+            width: 40px;
+            display: inline-block;
+        }
+        .loader-page-text {
+            width: 100%;
+            bottom: 42%;
+            position: absolute;
+            text-align: center;
+            color: #888;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            line-height: 20px;
+        }
+        .loader-page-text-loading {
+            font-size: 14px;
+        }
+        .loader-page-text-customer {
+            font-size: 16px;
+            margin-bottom: 5px;
+        }
+        .romb {
+            width: 40px;
+            height: 40px;
+            -webkit-transform: rotate(135deg) skew(20deg, 20deg);
+            -moz-transform: rotate(135deg) skew(20deg, 20deg);
+            -ms-transform: rotate(135deg) skew(20deg, 20deg);
+            -o-transform: rotate(135deg) skew(20deg, 20deg);
+            position: absolute;
+            background: red;
+            border-radius: 6px;
+            -webkit-animation: movedown 3s infinite ease;
+            -moz-animation: movedown 3s infinite ease;
+            -ms-animation: movedown 3s infinite ease;
+            -o-animation: movedown 3s infinite ease;
+            animation: movedown 3s infinite ease;
+        }
+        #blue {
+            z-index: 3;
+            background: #55bce6;
+            -webkit-animation-name: blue;
+            -moz-animation-name: blue;
+            -ms-animation-name: blue;
+            -o-animation-name: blue;
+            animation-name: blue;
+        }
+        #red {
+            z-index:1;
+            background: #de7a59;
+            -webkit-animation-name: red;
+            -moz-animation-name: red;
+            -ms-animation-name: red;
+            -o-animation-name: red;
+            animation-name: red;
+        }
+        #green {
+            z-index: 2;
+            background: #a1cb5c;
+            -webkit-animation-name: green;
+            -moz-animation-name: green;
+            -ms-animation-name: green;
+            -o-animation-name: green;
+            animation-name: green;
+        }
+        @-webkit-keyframes red {
+            0%    { top:120px; background: #de7a59; }
+            10%    { top:120px; background: #F2CBBF; }
+            14%    { background: #f4f4f4; top:120px; }
+            15%    { background: #f4f4f4; top:0;}
+            20%    { background: #E6E4E4; }
+            30%    { background: #D2D2D2; }
+            40%    { top:120px; }
+            100%    { top:120px; background: #de7a59; }
+        }
+        @keyframes red {
+            0%    { top:120px; background: #de7a59; }
+            10%    { top:120px; background: #F2CBBF; }
+            14%    { background: #f4f4f4; top:120px; }
+            15%    { background: #f4f4f4; top:0; }
+            20%    { background: #E6E4E4; }
+            30%    { background: #D2D2D2; }
+            40%    { top:120px; }
+            100%    { top:120px; background: #de7a59; }
+        }
+        @-webkit-keyframes green {
+            0%    { top:110px; background: #a1cb5c; opacity:1; }
+            10%    { top:110px; background: #CBE0AC; opacity:1; }
+            14%    { background: #f4f4f4; top:110px; opacity:1; }
+            15%    { background: #f4f4f4; top:0; opacity:1; }
+            20%    { background: #f4f4f4; top:0; opacity:0; }
+            25%    { background: #EFEFEF; top:0; opacity:1; }
+            30%    { background:#E6E4E4; }
+            70%    { top:110px; }
+            100%    { top:110px; background: #a1cb5c; }
+        }
+        @keyframes green {
+            0%    { top:110px; background: #a1cb5c; opacity:1; }
+            10%    { top:110px; background: #CBE0AC; opacity:1; }
+            14%    { background: #f4f4f4; top:110px; opacity:1; }
+            15%    { background: #f4f4f4; top:0; opacity:1; }
+            20%    { background: #f4f4f4; top:0; opacity:0; }
+            25%    { background: #EFEFEF; top:0; opacity:1; }
+            30%    { background:#E6E4E4; }
+            70%    { top:110px; }
+            100%    { top:110px; background: #a1cb5c; }
+        }
+        @-webkit-keyframes blue {
+            0%    { top:100px; background: #55bce6; opacity:1; }
+            10%    { top:100px; background: #BFE8F8; opacity:1; }
+            14%    { background: #f4f4f4; top:100px; opacity:1; }
+            15%    { background: #f4f4f4; top:0; opacity:1; }
+            20%    { background: #f4f4f4; top:0; opacity:0; }
+            25%    { background: #f4f4f4; top:0; opacity:0; }
+            45%    { background: #EFEFEF; top:0; opacity:0.2; }
+            100%    { top:100px; background: #55bce6; }
+        }
+        @keyframes blue {
+            0%    { top:100px; background: #55bce6; opacity:1; }
+            10%    { top:100px; background: #BFE8F8; opacity:1; }
+            14%    { background: #f4f4f4; top:100px; opacity:1; }
+            15%    { background: #f4f4f4; top:0; opacity:1; }
+            20%    { background: #f4f4f4; top:0; opacity:0; }
+            25%    { background: #fff; top:0; opacity:0; }
+            45%    { background: #EFEFEF; top:0; opacity:0.2; }
+            100%    { top:100px; background: #55bce6; }
+        }
+    </style>
+</head>
+<body>
+<script type="text/javascript">
+    function getUrlParams() {
+        var e,
+            a = /\+/g,  // Regex for replacing addition symbol with a space
+            r = /([^&=]+)=?([^&]*)/g,
+            d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
+            q = window.location.search.substring(1),
+            urlParams = {};
+        while (e = r.exec(q))
+            urlParams[d(e[1])] = d(e[2]);
+        return urlParams;
+    }
+    function encodeUrlParam(str) {
+        return str.replace(/&/g, '&amp;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#39;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
+    var params = getUrlParams(),
+        lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
+        customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+        margin = (customer !== '') ? 50 : 20,
+        loading = 'Loading...',
+        logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
+    window.frameEditorId = params["frameEditorId"];
+    if ( lang == 'de')      loading = 'Ladevorgang...';
+    else if ( lang == 'es') loading = 'Cargando...';
+    else if ( lang == 'fr') loading = 'Chargement en cours...';
+    else if ( lang == 'it') loading = 'Caricamento in corso...';
+    else if ( lang == 'pt') loading = 'Carregando...';
+    else if ( lang == 'ru') loading = 'Загрузка...';
+    else if ( lang == 'sl') loading = 'Nalaganje...';
+    else if ( lang == 'tr') loading = 'Yükleniyor...';
+    else if ( lang == 'bg') loading = 'Зареждане...';
+    else if ( lang == 'cs') loading = 'Nahrávám...';
+    else if ( lang == 'hu') loading = 'Betöltés...';
+    else if ( lang == 'ja') loading = '読み込み中...';
+    else if ( lang == 'ko') loading = '로드 중...';
+    else if ( lang == 'lv') loading = 'Ieladēšana ...';
+    else if ( lang == 'nl') loading = 'Laden...';
+    else if ( lang == 'pl') loading = 'Ładowanie...';
+    else if ( lang == 'sk') loading = 'Nahrávam...';
+    else if ( lang == 'uk') loading = 'Завантаження...';
+    else if ( lang == 'vi') loading = 'Đang tải...';
+    else if ( lang == 'zh') loading = '加载中...';
+    document.write(
+        '<div id="loading-mask" class="loadmask">' +
+        '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
+        ((logo!==null) ? logo :
+        '<div class="loader-page-romb">' +
+        '<div class="romb" id="blue"></div>' +
+        '<div class="romb" id="green"></div>' +
+        '<div class="romb" id="red"></div>' +
+        '</div>') +
+        '</div>' +
+        '<div class="loader-page-text">' +  customer +
+        '<div class="loader-page-text-loading">' + loading + '</div>' +
+        '</div>' +
+        '</div>');
+</script>
+
+<div id="viewport"></div>
+
+<script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
+<script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
+
+<script type="text/javascript" src="../sdk_dev_scripts.js"></script>
+<script>
+    var ua = navigator.userAgent;
+    if (/Sailfish/.test(ua) || /Jolla/.test(ua)) {
+        document.write('<script type="text/javascript" src="../../../vendor/iscroll/iscroll.min.js"><\/script>');
+        if (!/Android/.test(ua)) {
+            var ua = navigator.userAgent + ';Android 5.0;';
+            Object.defineProperty(navigator, 'userAgent', {
+                get: function () { return ua; }
+            });
+        }
+    }
+    window.sdk_dev_scrpipts.forEach(function(item){
+        document.write('<script type="text/javascript" src="' + item + '"><\/script>');
+    });
+    window.requireTimeourError = function(){
+        var reqerr;
+        if ( lang == 'de')      reqerr = 'Die Verbindung ist zu langsam, einige Komponenten konnten nicht geladen werden. Aktualisieren Sie bitte die Seite.';
+        else if ( lang == 'es') reqerr = 'La conexión es muy lenta, algunos de los componentes no han podido cargar. Por favor recargue la página.';
+        else if ( lang == 'fr') reqerr = 'La connexion est trop lente, certains des composants n\'ons pas pu être chargé. Veuillez recharger la page.';
+        else if ( lang == 'ru') reqerr = 'Слишком медленное соединение, не удается загрузить некоторые компоненты. Пожалуйста, обновите страницу.';
+        else reqerr = 'The connection is too slow, some of the components could not be loaded. Please reload the page.';
+        return reqerr;
+    };
+</script>
+<!-- application -->
+<script data-main="app-dev" src="../../../vendor/requirejs/require.js"></script>
+
+</body>
+</html>

apps/documenteditor/mobile/index_loader.html.deploy

@@ -0,0 +1,293 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+        <meta name="mobile-web-app-capable" content="yes">
+
+        <title>ONLYOFFICE Document Editor</title>
+
+        <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,500,700" rel="stylesheet" type="text/css">
+
+        <!-- splash -->
+
+        <style type="text/css">
+            .loadmask {
+                position: absolute;
+                left: 0;
+                top: 0;
+                height: 100%;
+                width: 100%;
+                overflow: hidden;
+                border: none;
+                background-color: #f4f4f4;
+                z-index: 100;
+            }
+
+            .loader-page {
+                width: 100%;
+                height: 170px;
+                bottom: 42%;
+                position: absolute;
+                text-align: center;
+                line-height: 10px;
+            }
+
+            .loader-logo {
+                max-height: 160px;
+                margin-bottom: 10px;
+            }
+
+            .loader-page-romb {
+                width: 40px;
+                display: inline-block;
+            }
+
+            .loader-page-text {
+                width: 100%;
+                bottom: 42%;
+                position: absolute;
+                text-align: center;
+                color: #888;
+                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+                line-height: 20px;
+            }
+
+            .loader-page-text-loading {
+                font-size: 14px;
+            }
+
+            .loader-page-text-customer {
+                font-size: 16px;
+                margin-bottom: 5px;
+            }
+
+            .romb {
+                width: 40px;
+                height: 40px;
+                -webkit-transform: rotate(135deg) skew(20deg, 20deg);
+                -moz-transform: rotate(135deg) skew(20deg, 20deg);
+                -ms-transform: rotate(135deg) skew(20deg, 20deg);
+                -o-transform: rotate(135deg) skew(20deg, 20deg);
+                position: absolute;
+                background: red;
+                border-radius: 6px;
+                -webkit-animation: movedown 3s infinite ease;
+                -moz-animation: movedown 3s infinite ease;
+                -ms-animation: movedown 3s infinite ease;
+                -o-animation: movedown 3s infinite ease;
+                animation: movedown 3s infinite ease;
+            }
+
+            #blue {
+                z-index: 3;
+                background: #55bce6;
+                -webkit-animation-name: blue;
+                -moz-animation-name: blue;
+                -ms-animation-name: blue;
+                -o-animation-name: blue;
+                animation-name: blue;
+            }
+
+            #red {
+                z-index:1;
+                background: #de7a59;
+                -webkit-animation-name: red;
+                -moz-animation-name: red;
+                -ms-animation-name: red;
+                -o-animation-name: red;
+                animation-name: red;
+            }
+
+            #green {
+                z-index: 2;
+                background: #a1cb5c;
+                -webkit-animation-name: green;
+                -moz-animation-name: green;
+                -ms-animation-name: green;
+                -o-animation-name: green;
+                animation-name: green;
+            }
+
+            @-webkit-keyframes red {
+                  0%    { top:120px; background: #de7a59; }
+                 10%    { top:120px; background: #F2CBBF; }
+                 14%    { background: #f4f4f4; top:120px; }
+                 15%    { background: #f4f4f4; top:0;}
+                 20%    { background: #E6E4E4; }
+                 30%    { background: #D2D2D2; }
+                 40%    { top:120px; }
+                100%    { top:120px; background: #de7a59; }
+            }
+
+            @keyframes red {
+                  0%    { top:120px; background: #de7a59; }
+                 10%    { top:120px; background: #F2CBBF; }
+                 14%    { background: #f4f4f4; top:120px; }
+                 15%    { background: #f4f4f4; top:0; }
+                 20%    { background: #E6E4E4; }
+                 30%    { background: #D2D2D2; }
+                 40%    { top:120px; }
+                100%    { top:120px; background: #de7a59; }
+            }
+
+            @-webkit-keyframes green {
+                  0%    { top:110px; background: #a1cb5c; opacity:1; }
+                 10%    { top:110px; background: #CBE0AC; opacity:1; }
+                 14%    { background: #f4f4f4; top:110px; opacity:1; }
+                 15%    { background: #f4f4f4; top:0; opacity:1; }
+                 20%    { background: #f4f4f4; top:0; opacity:0; }
+                 25%    { background: #EFEFEF; top:0; opacity:1; }
+                 30%    { background:#E6E4E4; }
+                 70%    { top:110px; }
+                100%    { top:110px; background: #a1cb5c; }
+            }
+
+            @keyframes green {
+                  0%    { top:110px; background: #a1cb5c; opacity:1; }
+                 10%    { top:110px; background: #CBE0AC; opacity:1; }
+                 14%    { background: #f4f4f4; top:110px; opacity:1; }
+                 15%    { background: #f4f4f4; top:0; opacity:1; }
+                 20%    { background: #f4f4f4; top:0; opacity:0; }
+                 25%    { background: #EFEFEF; top:0; opacity:1; }
+                 30%    { background:#E6E4E4; }
+                 70%    { top:110px; }
+                100%    { top:110px; background: #a1cb5c; }
+            }
+
+            @-webkit-keyframes blue {
+                  0%    { top:100px; background: #55bce6; opacity:1; }
+                 10%    { top:100px; background: #BFE8F8; opacity:1; }
+                 14%    { background: #f4f4f4; top:100px; opacity:1; }
+                 15%    { background: #f4f4f4; top:0; opacity:1; }
+                 20%    { background: #f4f4f4; top:0; opacity:0; }
+                 25%    { background: #f4f4f4; top:0; opacity:0; }
+                 45%    { background: #EFEFEF; top:0; opacity:0.2; }
+                100%    { top:100px; background: #55bce6; }
+            }
+
+            @keyframes blue {
+                  0%    { top:100px; background: #55bce6; opacity:1; }
+                 10%    { top:100px; background: #BFE8F8; opacity:1; }
+                 14%    { background: #f4f4f4; top:100px; opacity:1; }
+                 15%    { background: #f4f4f4; top:0; opacity:1; }
+                 20%    { background: #f4f4f4; top:0; opacity:0; }
+                 25%    { background: #fff; top:0; opacity:0; }
+                 45%    { background: #EFEFEF; top:0; opacity:0.2; }
+                100%    { top:100px; background: #55bce6; }
+            }
+        </style>
+    </head>
+    <body>
+        <script type="text/javascript">
+            var ua = navigator.userAgent;
+
+            if (/Sailfish/.test(ua) || /Jolla/.test(ua)) {
+                document.write('<script type="text/javascript" src="../../../vendor/iscroll/iscroll.min.js"><\/script>');
+
+                    if (!/Android/.test(ua)) {
+                        var ua = navigator.userAgent + ';Android 5.0';
+                        Object.defineProperty(navigator, 'userAgent', {
+                            get: function () { return ua; }
+                        });
+                    }
+            }
+
+            function getUrlParams() {
+                var e,
+                    a = /\+/g,  // Regex for replacing addition symbol with a space
+                    r = /([^&=]+)=?([^&]*)/g,
+                    d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
+                    q = window.location.search.substring(1),
+                    urlParams = {};
+
+                while (e = r.exec(q))
+                    urlParams[d(e[1])] = d(e[2]);
+
+                return urlParams;
+            }
+
+            function encodeUrlParam(str) {
+                return str.replace(/&/g, '&amp;')
+                        .replace(/"/g, '&quot;')
+                        .replace(/'/g, '&#39;')
+                        .replace(/</g, '&lt;')
+                        .replace(/>/g, '&gt;');
+            }
+
+            var params = getUrlParams(),
+                lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
+                customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+                margin = (customer !== '') ? 50 : 20,
+                loading = 'Loading...',
+                logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
+
+                window.frameEditorId = params["frameEditorId"];
+
+            if ( lang == 'de')      loading = 'Ladevorgang...';
+            else if ( lang == 'es') loading = 'Cargando...';
+            else if ( lang == 'fr') loading = 'Chargement en cours...';
+            else if ( lang == 'it') loading = 'Caricamento in corso...';
+            else if ( lang == 'pt') loading = 'Carregando...';
+            else if ( lang == 'ru') loading = 'Загрузка...';
+            else if ( lang == 'sl') loading = 'Nalaganje...';
+            else if ( lang == 'tr') loading = 'Yükleniyor...';
+            else if ( lang == 'bg') loading = 'Зареждане...';
+            else if ( lang == 'cs') loading = 'Nahrávám...';
+            else if ( lang == 'hu') loading = 'Betöltés...';
+            else if ( lang == 'ja') loading = '読み込み中...';
+            else if ( lang == 'ko') loading = '로드 중...';
+            else if ( lang == 'lv') loading = 'Ieladēšana ...';
+            else if ( lang == 'nl') loading = 'Laden...';
+            else if ( lang == 'pl') loading = 'Ładowanie...';
+            else if ( lang == 'sk') loading = 'Nahrávam...';
+            else if ( lang == 'uk') loading = 'Завантаження...';
+            else if ( lang == 'vi') loading = 'Đang tải...';
+            else if ( lang == 'zh') loading = '加载中...';
+
+            document.write(
+                '<div id="loading-mask" class="loadmask">' +
+                    '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
+                        ((logo!==null) ? logo :
+                        '<div class="loader-page-romb">' +
+                            '<div class="romb" id="blue"></div>' +
+                            '<div class="romb" id="green"></div>' +
+                            '<div class="romb" id="red"></div>' +
+                        '</div>') +
+                    '</div>' +
+                    '<div class="loader-page-text">' +  customer +
+                    '<div class="loader-page-text-loading">' + loading + '</div>' +
+                    '</div>' +
+                '</div>');
+
+            window.requireTimeourError = function(){
+                var reqerr;
+
+                if ( lang == 'de')      reqerr = 'Die Verbindung ist zu langsam, einige Komponenten konnten nicht geladen werden. Aktualisieren Sie bitte die Seite.';
+                else if ( lang == 'es') reqerr = 'La conexión es muy lenta, algunos de los componentes no han podido cargar. Por favor recargue la página.';
+                else if ( lang == 'fr') reqerr = 'La connexion est trop lente, certains des composants n\'ons pas pu être chargé. Veuillez recharger la page.';
+                else if ( lang == 'ru') reqerr = 'Слишком медленное соединение, не удается загрузить некоторые компоненты. Пожалуйста, обновите страницу.';
+                else reqerr = 'The connection is too slow, some of the components could not be loaded. Please reload the page.';
+
+                return reqerr;
+            };
+
+            var requireTimeoutID = setTimeout(function(){
+                window.alert(window.requireTimeourError());
+                window.location.reload();
+            }, 30000);
+
+            var require = {
+                waitSeconds: 30,
+                callback: function(){
+                    clearTimeout(requireTimeoutID);
+                }
+            };
+        </script>
+
+        <div id="viewport"></div>
+        <script data-main="app" src="../../../vendor/requirejs/require.js"></script>
+    </body>
+</html>

apps/documenteditor/mobile/resources/css/app-ios.css

@@ -7081,3 +7081,25 @@ html.pixel-ratio-3 .numbers li {
   max-height: 100%;
   overflow: auto;
 }
+
+.doc-placeholder {
+  background: #fbfbfb;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+}
+.doc-placeholder > .line {
+  height: 15px;
+  margin: 30px;
+  background: #e2e2e2;
+  overflow: hidden;
+  position: relative;
+
+  -webkit-animation: flickerAnimation 2s infinite ease-in-out;
+  -moz-animation: flickerAnimation 2s infinite ease-in-out;
+  -o-animation: flickerAnimation 2s infinite ease-in-out;
+  animation: flickerAnimation 2s infinite ease-in-out;
+}

apps/documenteditor/mobile/resources/css/app-material.css

@@ -6852,3 +6852,24 @@ html.pixel-ratio-3 .numbers li {
   max-height: 100%;
   overflow: auto;
 }
+.doc-placeholder {
+  background: #fbfbfb;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+}
+.doc-placeholder > .line {
+  height: 15px;
+  margin: 30px;
+  background: #e2e2e2;
+  overflow: hidden;
+  position: relative;
+
+  -webkit-animation: flickerAnimation 2s infinite ease-in-out;
+  -moz-animation: flickerAnimation 2s infinite ease-in-out;
+  -o-animation: flickerAnimation 2s infinite ease-in-out;
+  animation: flickerAnimation 2s infinite ease-in-out;
+}

apps/documenteditor/mobile/resources/less/app-ios.less

@@ -240,3 +240,28 @@ input, textarea {
   max-height: 100%;
   overflow: auto;
 }
+
+// Skeleton of document
+
+.doc-placeholder {
+  background: #fbfbfb;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+
+  > .line {
+    height: 15px;
+    margin: 30px;
+    background: #e2e2e2;
+    overflow: hidden;
+    position: relative;
+
+    -webkit-animation: flickerAnimation 2s infinite ease-in-out;
+    -moz-animation: flickerAnimation 2s infinite ease-in-out;
+    -o-animation: flickerAnimation 2s infinite ease-in-out;
+    animation: flickerAnimation 2s infinite ease-in-out;
+  }
+}

apps/documenteditor/mobile/resources/less/app-material.less

@@ -227,3 +227,28 @@ input, textarea {
   max-height: 100%;
   overflow: auto;
 }
+
+// Skeleton of document
+
+.doc-placeholder {
+  background: #fbfbfb;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+
+  > .line {
+    height: 15px;
+    margin: 30px;
+    background: #e2e2e2;
+    overflow: hidden;
+    position: relative;
+
+    -webkit-animation: flickerAnimation 2s infinite ease-in-out;
+    -moz-animation: flickerAnimation 2s infinite ease-in-out;
+    -o-animation: flickerAnimation 2s infinite ease-in-out;
+    animation: flickerAnimation 2s infinite ease-in-out;
+  }
+}

apps/presentationeditor/embed/index.html

@@ -15,168 +15,121 @@
 
     <style type="text/css">
         .loadmask {
-            position: absolute;
             left: 0;
             top: 0;
+            position: absolute;
             height: 100%;
             width: 100%;
             overflow: hidden;
             border: none;
             background-color: #f4f4f4;
-            z-index: 20002;
+            z-index: 10000;
         }
 
-        .loader-page {
+        .loadmask > .brendpanel {
             width: 100%;
-            height: 170px;
-            bottom: 42%;
             position: absolute;
+            height: 32px;
+            background-color: #e2e2e2;
+        }
+
+        .loadmask > .brendpanel > div {
+            display: flex;
+            align-items: center;
+            height: 100%;
+        }
+
+        .loadmask > .brendpanel .loading-logo {
+            max-width: 200px;
+            height: 24px;
+            margin: 0 auto;
             text-align: center;
-            line-height: 10px;
         }
 
-        .loader-logo {
+        .loadmask > .brendpanel .loading-logo > img {
-            max-height: 160px;
-            margin-bottom: 10px;
-        }
-
-        .loader-page-romb {
-            width: 40px;
             display: inline-block;
+            max-width: 100px;
+            max-height: 20px;
+            margin-top: 2px;
+            opacity: 0;
         }
 
-        .loader-page-text {
+        .loadmask > .brendpanel .circle {
+            vertical-align: middle;
+            width: 24px;
+            height: 24px;
+            border-radius: 12px;
+            margin: 4px 10px;
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .loadmask > .placeholder {
+            background: #f5f5f5;
             width: 100%;
-            bottom: 42%;
+            height: 100%;
+            padding-top: 32px;
+        }
+
+        .loadmask > .placeholder .slide-h {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            flex-grow: 1;
+            width: 90%;
+            margin: 0 auto;
+        }
+        .loadmask > .placeholder .slide-v {
+            display: flex;
+            position: relative;
+            flex-direction: column;
+            padding-bottom: 100%;
+        }
+
+        .loadmask > .placeholder .slide-container {
             position: absolute;
-            text-align: center;
+            height: 100%;
-            color: #888;
+            width: 100%;
-            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            background: #fbfbfb;
-            line-height: 20px;
+            border: 1px solid #dfdfdf;
+            display: grid;
+
+            -webkit-animation: flickerAnimation 2s infinite ease-in-out;
+            -moz-animation: flickerAnimation 2s infinite ease-in-out;
+            -o-animation: flickerAnimation 2s infinite ease-in-out;
+            animation: flickerAnimation 2s infinite ease-in-out;
         }
 
-        .loader-page-text-loading {
+        .loadmask > .placeholder .slide-container > .line {
-            font-size: 14px;
+            height: 40%;
-        }
+            margin: auto 60px;
-
-        .loader-page-text-customer {
-            font-size: 16px;
-            margin-bottom: 5px;
-        }
-
-        .romb {
-            width: 40px;
-            height: 40px;
-            -webkit-transform: rotate(135deg) skew(20deg, 20deg);
-            -moz-transform: rotate(135deg) skew(20deg, 20deg);
-            -ms-transform: rotate(135deg) skew(20deg, 20deg);
-            -o-transform: rotate(135deg) skew(20deg, 20deg);
-            position: absolute;
-            background: red;
             border-radius: 6px;
-            -webkit-animation: movedown 3s infinite ease;
+            background: #f5f5f5;
-            -moz-animation: movedown 3s infinite ease;
-            -ms-animation: movedown 3s infinite ease;
-            -o-animation: movedown 3s infinite ease;
-            animation: movedown 3s infinite ease;
         }
 
-        #blue {
+        .loadmask > .placeholder .slide-container > .line:nth-child(1) {
-            z-index: 3;
+            height: 50%;
-            background: #55bce6;
+            margin: auto 35px;
-            -webkit-animation-name: blue;
-            -moz-animation-name: blue;
-            -ms-animation-name: blue;
-            -o-animation-name: blue;
-            animation-name: blue;
         }
 
-        #red {
+        @keyframes flickerAnimation {
-            z-index:1;
+            0%   { opacity:1; }
-            background: #de7a59;
+            50%  { opacity:0.3; }
-            -webkit-animation-name: red;
+            100% { opacity:1; }
-            -moz-animation-name: red;
-            -ms-animation-name: red;
-            -o-animation-name: red;
-            animation-name: red;
         }
-
+        @-o-keyframes flickerAnimation{
-        #green {
+            0%   { opacity:1; }
-            z-index: 2;
+            50%  { opacity:0.3; }
-            background: #a1cb5c;
+            100% { opacity:1; }
-            -webkit-animation-name: green;
-            -moz-animation-name: green;
-            -ms-animation-name: green;
-            -o-animation-name: green;
-            animation-name: green;
         }
-
+        @-moz-keyframes flickerAnimation{
-        @-webkit-keyframes red {
+            0%   { opacity:1; }
-              0%    { top:120px; background: #de7a59; }
+            50%  { opacity:0.3; }
-             10%    { top:120px; background: #F2CBBF; }
+            100% { opacity:1; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0;}
-             20%    { background: #E6E4E4; }
-             30%    { background: #D2D2D2; }
-             40%    { top:120px; }
-            100%    { top:120px; background: #de7a59; }
         }
-
+        @-webkit-keyframes flickerAnimation{
-        @keyframes red {
+            0%   { opacity:1; }
-              0%    { top:120px; background: #de7a59; }
+            50%  { opacity:0.3; }
-             10%    { top:120px; background: #F2CBBF; }
+            100% { opacity:1; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0; }
-             20%    { background: #E6E4E4; }
-             30%    { background: #D2D2D2; }
-             40%    { top:120px; }
-            100%    { top:120px; background: #de7a59; }
-        }
-
-        @-webkit-keyframes green {
-              0%    { top:110px; background: #a1cb5c; opacity:1; }
-             10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #EFEFEF; top:0; opacity:1; }
-             30%    { background:#E6E4E4; }
-             70%    { top:110px; }
-            100%    { top:110px; background: #a1cb5c; }
-        }
-
-        @keyframes green {
-              0%    { top:110px; background: #a1cb5c; opacity:1; }
-             10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #EFEFEF; top:0; opacity:1; }
-             30%    { background:#E6E4E4; }
-             70%    { top:110px; }
-            100%    { top:110px; background: #a1cb5c; }
-        }
-
-        @-webkit-keyframes blue {
-              0%    { top:100px; background: #55bce6; opacity:1; }
-             10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #f4f4f4; top:0; opacity:0; }
-             45%    { background: #EFEFEF; top:0; opacity:0.2; }
-            100%    { top:100px; background: #55bce6; }
-        }
-
-        @keyframes blue {
-              0%    { top:100px; background: #55bce6; opacity:1; }
-             10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #fff; top:0; opacity:0; }
-             45%    { background: #EFEFEF; top:0; opacity:0.2; }
-            100%    { top:100px; background: #55bce6; }
         }
     </style>
 
@@ -186,7 +139,27 @@
   </head>
 
   <body class="embed-body">
-
+      <div id="loading-mask" class="loadmask">
+          <div class="brendpanel">
+              <div>
+                  <div class="circle"></div>
+                  <div class="brand-logo loading-logo">
+                      <img src="">
+                  </div>
+                  <div class="circle"></div>
+              </div>
+          </div>
+          <div class="placeholder">
+              <div class="slide-h">
+                  <div class="slide-v">
+                      <div class="slide-container">
+                          <div class="line"></div>
+                          <div class="line"></div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
       <!-- debug begin -->
       <script type="text/javascript">var less=less||{};less.env='development';</script>
       <script src="../../../vendor/less/dist/less-2.7.1.js" type="text/javascript"></script>
@@ -233,48 +206,17 @@
 
           var params = getUrlParams(),
               lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
-              customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+              logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null;
-              margin = (customer !== '') ? 50 : 20,
-              loading = 'Loading...',
-              logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
 
           window.frameEditorId = params["frameEditorId"];
 
-          if ( lang == 'de')      loading = 'Ladevorgang...';
+          var elem = document.querySelector('.loading-logo');
-          else if ( lang == 'es') loading = 'Cargando...';
+          if (elem && logo) {
-          else if ( lang == 'fr') loading = 'Chargement en cours...';
+              elem.style.backgroundImage= 'none';
-          else if ( lang == 'it') loading = 'Caricamento in corso...';
+              var img = document.querySelector('.loading-logo img');
-          else if ( lang == 'pt') loading = 'Carregando...';
+              img && img.setAttribute('src', logo);
-          else if ( lang == 'ru') loading = 'Загрузка...';
+              img.style.opacity = 1;
-          else if ( lang == 'sl') loading = 'Nalaganje...';
+          }
-          else if ( lang == 'tr') loading = 'Yükleniyor...';
-          else if ( lang == 'bg') loading = 'Зареждане...';
-          else if ( lang == 'cs') loading = 'Nahrávám...';
-          else if ( lang == 'hu') loading = 'Betöltés...';
-          else if ( lang == 'ja') loading = '読み込み中...';
-          else if ( lang == 'ko') loading = '로드 중...';
-          else if ( lang == 'lv') loading = 'Ieladēšana ...';
-          else if ( lang == 'nl') loading = 'Laden...';
-          else if ( lang == 'pl') loading = 'Ładowanie...';
-          else if ( lang == 'sk') loading = 'Nahrávam...';
-          else if ( lang == 'uk') loading = 'Завантаження...';
-          else if ( lang == 'vi') loading = 'Đang tải...';
-          else if ( lang == 'zh') loading = '加载中...';
-
-          document.write(
-              '<div id="loading-mask" class="loadmask">' +
-                      '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
-                          ((logo!==null) ? logo :
-                          '<div class="loader-page-romb">' +
-                              '<div class="romb" id="blue"></div>' +
-                              '<div class="romb" id="green"></div>' +
-                              '<div class="romb" id="red"></div>' +
-                          '</div>') +
-                      '</div>' +
-                      '<div class="loader-page-text">' +  customer +
-                      '<div class="loader-page-text-loading">' + loading + '</div>' +
-                  '</div>' +
-              '</div>');
       </script>
 
       <div id="box-preview">

apps/presentationeditor/embed/index.html.deploy

@@ -13,168 +13,93 @@
 
     <style type="text/css">
         .loadmask {
-            position: absolute;
             left: 0;
             top: 0;
+            position: absolute;
             height: 100%;
             width: 100%;
             overflow: hidden;
             border: none;
             background-color: #f4f4f4;
-            z-index: 20002;
+            z-index: 10000;
         }
 
-        .loader-page {
+        .loadmask > .brendpanel {
             width: 100%;
-            height: 170px;
-            bottom: 42%;
             position: absolute;
+            height: 32px;
+            background-color: #e2e2e2;
+        }
+
+        .loadmask > .brendpanel > div {
+            display: flex;
+            align-items: center;
+            height: 100%;
+        }
+
+        .loadmask > .brendpanel .loading-logo {
+            max-width: 200px;
+            height: 24px;
+            margin: 0 auto;
             text-align: center;
-            line-height: 10px;
         }
 
-        .loader-logo {
+        .loadmask > .brendpanel .loading-logo > img {
-            max-height: 160px;
-            margin-bottom: 10px;
-        }
-
-        .loader-page-romb {
-            width: 40px;
             display: inline-block;
+            max-width: 100px;
+            max-height: 20px;
+            margin-top: 2px;
+            opacity: 0;
         }
 
-        .loader-page-text {
+        .loadmask > .brendpanel .circle {
+            vertical-align: middle;
+            width: 24px;
+            height: 24px;
+            border-radius: 12px;
+            margin: 4px 10px;
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .loadmask > .placeholder {
+            background: #fbfbfb;
             width: 100%;
-            bottom: 42%;
+            height: 100%;
-            position: absolute;
+            padding-top: 56px;
-            text-align: center;
-            color: #888;
-            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-            line-height: 20px;
         }
 
-        .loader-page-text-loading {
+        .loadmask > .placeholder > .line {
-            font-size: 14px;
+            height: 15px;
+            margin: 30px;
+            background: #e2e2e2;
+            overflow: hidden;
+            position: relative;
+
+            -webkit-animation: flickerAnimation 2s infinite ease-in-out;
+            -moz-animation: flickerAnimation 2s infinite ease-in-out;
+            -o-animation: flickerAnimation 2s infinite ease-in-out;
+            animation: flickerAnimation 2s infinite ease-in-out;
         }
 
-        .loader-page-text-customer {
+        @keyframes flickerAnimation {
-            font-size: 16px;
+            0%   { opacity:0.1; }
-            margin-bottom: 5px;
+            50%  { opacity:1; }
+            100% { opacity:0.1; }
         }
-
+        @-o-keyframes flickerAnimation{
-        .romb {
+            0%   { opacity:0.1; }
-            width: 40px;
+            50%  { opacity:1; }
-            height: 40px;
+            100% { opacity:0.1; }
-            -webkit-transform: rotate(135deg) skew(20deg, 20deg);
-            -moz-transform: rotate(135deg) skew(20deg, 20deg);
-            -ms-transform: rotate(135deg) skew(20deg, 20deg);
-            -o-transform: rotate(135deg) skew(20deg, 20deg);
-            position: absolute;
-            background: red;
-            border-radius: 6px;
-            -webkit-animation: movedown 3s infinite ease;
-            -moz-animation: movedown 3s infinite ease;
-            -ms-animation: movedown 3s infinite ease;
-            -o-animation: movedown 3s infinite ease;
-            animation: movedown 3s infinite ease;
         }
-
+        @-moz-keyframes flickerAnimation{
-        #blue {
+            0%   { opacity:0.1; }
-            z-index: 3;
+            50%  { opacity:1; }
-            background: #55bce6;
+            100% { opacity:0.1; }
-            -webkit-animation-name: blue;
-            -moz-animation-name: blue;
-            -ms-animation-name: blue;
-            -o-animation-name: blue;
-            animation-name: blue;
         }
-
+        @-webkit-keyframes flickerAnimation{
-        #red {
+            0%   { opacity:0.1; }
-            z-index:1;
+            50%  { opacity:1; }
-            background: #de7a59;
+            100% { opacity:0.1; }
-            -webkit-animation-name: red;
-            -moz-animation-name: red;
-            -ms-animation-name: red;
-            -o-animation-name: red;
-            animation-name: red;
-        }
-
-        #green {
-            z-index: 2;
-            background: #a1cb5c;
-            -webkit-animation-name: green;
-            -moz-animation-name: green;
-            -ms-animation-name: green;
-            -o-animation-name: green;
-            animation-name: green;
-        }
-
-        @-webkit-keyframes red {
-              0%    { top:120px; background: #de7a59; }
-             10%    { top:120px; background: #F2CBBF; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0;}
-             20%    { background: #E6E4E4; }
-             30%    { background: #D2D2D2; }
-             40%    { top:120px; }
-            100%    { top:120px; background: #de7a59; }
-        }
-
-        @keyframes red {
-              0%    { top:120px; background: #de7a59; }
-             10%    { top:120px; background: #F2CBBF; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0; }
-             20%    { background: #E6E4E4; }
-             30%    { background: #D2D2D2; }
-             40%    { top:120px; }
-            100%    { top:120px; background: #de7a59; }
-        }
-
-        @-webkit-keyframes green {
-              0%    { top:110px; background: #a1cb5c; opacity:1; }
-             10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #EFEFEF; top:0; opacity:1; }
-             30%    { background:#E6E4E4; }
-             70%    { top:110px; }
-            100%    { top:110px; background: #a1cb5c; }
-        }
-
-        @keyframes green {
-              0%    { top:110px; background: #a1cb5c; opacity:1; }
-             10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #EFEFEF; top:0; opacity:1; }
-             30%    { background:#E6E4E4; }
-             70%    { top:110px; }
-            100%    { top:110px; background: #a1cb5c; }
-        }
-
-        @-webkit-keyframes blue {
-              0%    { top:100px; background: #55bce6; opacity:1; }
-             10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #f4f4f4; top:0; opacity:0; }
-             45%    { background: #EFEFEF; top:0; opacity:0.2; }
-            100%    { top:100px; background: #55bce6; }
-        }
-
-        @keyframes blue {
-              0%    { top:100px; background: #55bce6; opacity:1; }
-             10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #fff; top:0; opacity:0; }
-             45%    { background: #EFEFEF; top:0; opacity:0.2; }
-            100%    { top:100px; background: #55bce6; }
         }
     </style>
 
@@ -184,6 +109,7 @@
   </head>
 
   <body class="embed-body">
+      <div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="circle"></div><div class="brand-logo loading-logo"><img src=""></div><div class="circle"></div></div></div><div class="placeholder"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
 
       <script>
          var  userAgent = navigator.userAgent.toLowerCase(),
@@ -224,50 +150,19 @@
                     .replace(/>/g, '&gt;');
         }
 
-        var params = getUrlParams(),
+           var params = getUrlParams(),
-            lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
+               lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
-            customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+               logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null;
-            margin = (customer !== '') ? 50 : 20,
-            loading = 'Loading...',
-            logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
 
-        window.frameEditorId = params["frameEditorId"];
+           window.frameEditorId = params["frameEditorId"];
 
-        if ( lang == 'de')      loading = 'Ladevorgang...';
+           var elem = document.querySelector('.loading-logo');
-        else if ( lang == 'es') loading = 'Cargando...';
+           if (elem && logo) {
-        else if ( lang == 'fr') loading = 'Chargement en cours...';
+               elem.style.backgroundImage= 'none';
-        else if ( lang == 'it') loading = 'Caricamento in corso...';
+               var img = document.querySelector('.loading-logo img');
-        else if ( lang == 'pt') loading = 'Carregando...';
+               img && img.setAttribute('src', logo);
-        else if ( lang == 'ru') loading = 'Загрузка...';
+               img.style.opacity = 1;
-        else if ( lang == 'sl') loading = 'Nalaganje...';
+           }
-        else if ( lang == 'tr') loading = 'Yükleniyor...';
-        else if ( lang == 'bg') loading = 'Зареждане...';
-        else if ( lang == 'cs') loading = 'Nahrávám...';
-        else if ( lang == 'hu') loading = 'Betöltés...';
-        else if ( lang == 'ja') loading = '読み込み中...';
-        else if ( lang == 'ko') loading = '로드 중...';
-        else if ( lang == 'lv') loading = 'Ieladēšana ...';
-        else if ( lang == 'nl') loading = 'Laden...';
-        else if ( lang == 'pl') loading = 'Ładowanie...';
-        else if ( lang == 'sk') loading = 'Nahrávam...';
-        else if ( lang == 'uk') loading = 'Завантаження...';
-        else if ( lang == 'vi') loading = 'Đang tải...';
-        else if ( lang == 'zh') loading = '加载中...';
-
-        document.write(
-            '<div id="loading-mask" class="loadmask">' +
-                    '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
-                        ((logo!==null) ? logo :
-                        '<div class="loader-page-romb">' +
-                            '<div class="romb" id="blue"></div>' +
-                            '<div class="romb" id="green"></div>' +
-                            '<div class="romb" id="red"></div>' +
-                        '</div>') +
-                    '</div>' +
-                    '<div class="loader-page-text">' +  customer +
-                    '<div class="loader-page-text-loading">' + loading + '</div>' +
-                '</div>' +
-            '</div>');
       </script>
 
       <div id="box-preview">

apps/presentationeditor/embed/index_loader.html

@@ -0,0 +1,377 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Documents</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <!-- debug begin -->
+    <link rel="stylesheet/less" type="text/css" href="resources/less/application.less" />
+    <!-- debug end -->
+
+    <!-- splash -->
+
+    <style type="text/css">
+        .loadmask {
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+            border: none;
+            background-color: #f4f4f4;
+            z-index: 20002;
+        }
+
+        .loader-page {
+            width: 100%;
+            height: 170px;
+            bottom: 42%;
+            position: absolute;
+            text-align: center;
+            line-height: 10px;
+        }
+
+        .loader-logo {
+            max-height: 160px;
+            margin-bottom: 10px;
+        }
+
+        .loader-page-romb {
+            width: 40px;
+            display: inline-block;
+        }
+
+        .loader-page-text {
+            width: 100%;
+            bottom: 42%;
+            position: absolute;
+            text-align: center;
+            color: #888;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            line-height: 20px;
+        }
+
+        .loader-page-text-loading {
+            font-size: 14px;
+        }
+
+        .loader-page-text-customer {
+            font-size: 16px;
+            margin-bottom: 5px;
+        }
+
+        .romb {
+            width: 40px;
+            height: 40px;
+            -webkit-transform: rotate(135deg) skew(20deg, 20deg);
+            -moz-transform: rotate(135deg) skew(20deg, 20deg);
+            -ms-transform: rotate(135deg) skew(20deg, 20deg);
+            -o-transform: rotate(135deg) skew(20deg, 20deg);
+            position: absolute;
+            background: red;
+            border-radius: 6px;
+            -webkit-animation: movedown 3s infinite ease;
+            -moz-animation: movedown 3s infinite ease;
+            -ms-animation: movedown 3s infinite ease;
+            -o-animation: movedown 3s infinite ease;
+            animation: movedown 3s infinite ease;
+        }
+
+        #blue {
+            z-index: 3;
+            background: #55bce6;
+            -webkit-animation-name: blue;
+            -moz-animation-name: blue;
+            -ms-animation-name: blue;
+            -o-animation-name: blue;
+            animation-name: blue;
+        }
+
+        #red {
+            z-index:1;
+            background: #de7a59;
+            -webkit-animation-name: red;
+            -moz-animation-name: red;
+            -ms-animation-name: red;
+            -o-animation-name: red;
+            animation-name: red;
+        }
+
+        #green {
+            z-index: 2;
+            background: #a1cb5c;
+            -webkit-animation-name: green;
+            -moz-animation-name: green;
+            -ms-animation-name: green;
+            -o-animation-name: green;
+            animation-name: green;
+        }
+
+        @-webkit-keyframes red {
+              0%    { top:120px; background: #de7a59; }
+             10%    { top:120px; background: #F2CBBF; }
+             14%    { background: #f4f4f4; top:120px; }
+             15%    { background: #f4f4f4; top:0;}
+             20%    { background: #E6E4E4; }
+             30%    { background: #D2D2D2; }
+             40%    { top:120px; }
+            100%    { top:120px; background: #de7a59; }
+        }
+
+        @keyframes red {
+              0%    { top:120px; background: #de7a59; }
+             10%    { top:120px; background: #F2CBBF; }
+             14%    { background: #f4f4f4; top:120px; }
+             15%    { background: #f4f4f4; top:0; }
+             20%    { background: #E6E4E4; }
+             30%    { background: #D2D2D2; }
+             40%    { top:120px; }
+            100%    { top:120px; background: #de7a59; }
+        }
+
+        @-webkit-keyframes green {
+              0%    { top:110px; background: #a1cb5c; opacity:1; }
+             10%    { top:110px; background: #CBE0AC; opacity:1; }
+             14%    { background: #f4f4f4; top:110px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #EFEFEF; top:0; opacity:1; }
+             30%    { background:#E6E4E4; }
+             70%    { top:110px; }
+            100%    { top:110px; background: #a1cb5c; }
+        }
+
+        @keyframes green {
+              0%    { top:110px; background: #a1cb5c; opacity:1; }
+             10%    { top:110px; background: #CBE0AC; opacity:1; }
+             14%    { background: #f4f4f4; top:110px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #EFEFEF; top:0; opacity:1; }
+             30%    { background:#E6E4E4; }
+             70%    { top:110px; }
+            100%    { top:110px; background: #a1cb5c; }
+        }
+
+        @-webkit-keyframes blue {
+              0%    { top:100px; background: #55bce6; opacity:1; }
+             10%    { top:100px; background: #BFE8F8; opacity:1; }
+             14%    { background: #f4f4f4; top:100px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #f4f4f4; top:0; opacity:0; }
+             45%    { background: #EFEFEF; top:0; opacity:0.2; }
+            100%    { top:100px; background: #55bce6; }
+        }
+
+        @keyframes blue {
+              0%    { top:100px; background: #55bce6; opacity:1; }
+             10%    { top:100px; background: #BFE8F8; opacity:1; }
+             14%    { background: #f4f4f4; top:100px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #fff; top:0; opacity:0; }
+             45%    { background: #EFEFEF; top:0; opacity:0.2; }
+            100%    { top:100px; background: #55bce6; }
+        }
+    </style>
+
+    <!--[if lt IE 9]>
+      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"></script>
+    <![endif]-->
+  </head>
+
+  <body class="embed-body">
+
+      <!-- debug begin -->
+      <script type="text/javascript">var less=less||{};less.env='development';</script>
+      <script src="../../../vendor/less/dist/less-1.5.1.js" type="text/javascript"></script>
+      <!-- debug end -->
+
+      <script>
+          var  userAgent = navigator.userAgent.toLowerCase(),
+               check = function(regex){ return regex.test(userAgent); };
+          if (!check(/opera/) && (check(/msie/) || check(/trident/))) {
+               var m = /msie (\d+\.\d+)/.exec(userAgent);
+               if (m && parseFloat(m[1]) < 10.0) {
+                   document.write(
+                       '<div id="id-error-mask" class="errormask">',
+                           '<div class="error-body" align="center">',
+                               '<div id="id-error-mask-title" class="title">Your browser is not supported.</div>',
+                               '<div id="id-error-mask-text">Sorry, ONLYOFFICE Document is currently only supported in the latest versions of the Chrome, Firefox, Safari or Internet Explorer web browsers.</div>',
+                           '</div>',
+                       '</div>'
+                   );
+               }
+          }
+
+          function getUrlParams() {
+              var e,
+                  a = /\+/g,  // Regex for replacing addition symbol with a space
+                  r = /([^&=]+)=?([^&]*)/g,
+                  d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
+                  q = window.location.search.substring(1),
+                  urlParams = {};
+
+              while (e = r.exec(q))
+                  urlParams[d(e[1])] = d(e[2]);
+
+              return urlParams;
+          }
+
+          function encodeUrlParam(str) {
+              return str.replace(/&/g, '&amp;')
+                      .replace(/"/g, '&quot;')
+                      .replace(/'/g, '&#39;')
+                      .replace(/</g, '&lt;')
+                      .replace(/>/g, '&gt;');
+          }
+
+          var params = getUrlParams(),
+              lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
+              customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+              margin = (customer !== '') ? 50 : 20,
+              loading = 'Loading...',
+              logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
+
+          window.frameEditorId = params["frameEditorId"];
+
+          if ( lang == 'de')      loading = 'Ladevorgang...';
+          else if ( lang == 'es') loading = 'Cargando...';
+          else if ( lang == 'fr') loading = 'Chargement en cours...';
+          else if ( lang == 'it') loading = 'Caricamento in corso...';
+          else if ( lang == 'pt') loading = 'Carregando...';
+          else if ( lang == 'ru') loading = 'Загрузка...';
+          else if ( lang == 'sl') loading = 'Nalaganje...';
+          else if ( lang == 'tr') loading = 'Yükleniyor...';
+          else if ( lang == 'bg') loading = 'Зареждане...';
+          else if ( lang == 'cs') loading = 'Nahrávám...';
+          else if ( lang == 'hu') loading = 'Betöltés...';
+          else if ( lang == 'ja') loading = '読み込み中...';
+          else if ( lang == 'ko') loading = '로드 중...';
+          else if ( lang == 'lv') loading = 'Ieladēšana ...';
+          else if ( lang == 'nl') loading = 'Laden...';
+          else if ( lang == 'pl') loading = 'Ładowanie...';
+          else if ( lang == 'sk') loading = 'Nahrávam...';
+          else if ( lang == 'uk') loading = 'Завантаження...';
+          else if ( lang == 'vi') loading = 'Đang tải...';
+          else if ( lang == 'zh') loading = '加载中...';
+
+          document.write(
+              '<div id="loading-mask" class="loadmask">' +
+                      '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
+                          ((logo!==null) ? logo :
+                          '<div class="loader-page-romb">' +
+                              '<div class="romb" id="blue"></div>' +
+                              '<div class="romb" id="green"></div>' +
+                              '<div class="romb" id="red"></div>' +
+                          '</div>') +
+                      '</div>' +
+                      '<div class="loader-page-text">' +  customer +
+                      '<div class="loader-page-text-loading">' + loading + '</div>' +
+                  '</div>' +
+              '</div>');
+      </script>
+
+      <div id="box-preview">
+          <div id="id-preview" tabindex="-1"></div>
+      </div>
+      <div id="editor_sdk" class="viewer" style="overflow: hidden;" tabindex="-1"></div>
+
+      <div class="overlay-controls" style="margin-left: -32px">
+          <ul class="left">
+              <li id="btn-left"><button class="overlay svg-icon slide-prev"></button></li>
+              <li id="btn-play"><button class="overlay svg-icon play"></button></li>
+              <li id="btn-right"><button class="overlay svg-icon slide-next"></button></li>
+          </ul>
+      </div>
+
+      <div class="toolbar" id="toolbar">
+          <div class="group left">
+              <div id="box-tools" class="dropdown">
+                  <button class="control-btn svg-icon tools"></button>
+              </div>
+          </div>
+          <div class="group center">
+              <span><a id="header-logo" class="brand-logo" href="http://www.onlyoffice.com/" target="_blank"></a></span>
+          </div>
+          <div class="group right">
+              <div class="item"><input id="page-number" class="form-control input-xs masked" type="text" value="0"><span class="text" id="pages" tabindex="-1">of 0</span></div>
+              <div class="item separator"></div>
+              <div class="item"><button id="id-btn-close" class="control-btn close"><span aria-hidden="true">&times;</span></button></div>
+          </div>
+      </div>
+
+      <div class="error modal fade" id="id-critical-error-dialog" tabindex="-1" role="dialog">
+          <div class="modal-dialog">
+              <div class="modal-content">
+                  <div class="modal-header">
+                      <h4 id="id-critical-error-title"></h4>
+                  </div>
+                  <div class="modal-body">
+                      <p id="id-critical-error-message"></p>
+                  </div>
+                  <div class="modal-footer">
+                      <button id="id-critical-error-close" class="btn btn-sm btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
+                  </div>
+              </div>
+          </div>
+      </div>
+
+      <div id="id-loadmask" class="hide modal cmd-loader-body">
+          <div class="cmd-loader-image"></div>
+          <div class="cmd-loader-title">Please wait...</div>
+      </div>
+
+      <div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
+
+      <!--vendor-->
+      <script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
+      <script type="text/javascript" src="../../../vendor/jquery.browser/dist/jquery.browser.min.js"></script>
+      <script type="text/javascript" src="../../../vendor/bootstrap/dist/js/bootstrap.js"></script>
+      <script type="text/javascript" src="../../../vendor/sockjs/sockjs.min.js"></script>
+      <script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
+
+      <script type="text/javascript" src="../sdk_dev_scripts.js"></script>
+      <script>
+          window.sdk_dev_scrpipts.forEach(function(item){
+              document.write('<script type="text/javascript" src="' + item + '"><\/script>');
+          });
+      </script>
+
+      <!--application-->
+      <script type="text/javascript" src="../../common/locale.js"></script>
+      <script type="text/javascript" src="../../common/Gateway.js"></script>
+      <script type="text/javascript" src="../../common/Analytics.js"></script>
+      <script type="text/javascript" src="../../common/embed/lib/util/utils.js"></script>
+      <script type="text/javascript" src="../../common/embed/lib/view/modals.js"></script>
+      <script type="text/javascript" src="../../common/embed/lib/controller/modals.js"></script>
+      <script type="text/javascript" src="js/ApplicationView.js"></script>
+      <script type="text/javascript" src="js/ApplicationController.js"></script>
+      <script type="text/javascript" src="js/application.js"></script>
+      <script type="text/javascript">
+          var isBrowserSupported = function() {
+              return  ($.browser.msie     && parseFloat($.browser.version) > 9)     ||
+                      ($.browser.chrome   && parseFloat($.browser.version) > 7)     ||
+                      ($.browser.safari   && parseFloat($.browser.version) > 4)     ||
+                      ($.browser.opera    && parseFloat($.browser.version) > 10.4)  ||
+                      ($.browser.mozilla  && parseFloat($.browser.version) > 3.9);
+          };
+
+          if (!isBrowserSupported()){
+              document.write(
+                  '<div id="id-error-mask" class="errormask">',
+                      '<div class="error-body" align="center">',
+                          '<div id="id-error-mask-title" class="title">Your browser is not supported.</div>',
+                          '<div id="id-error-mask-text">Sorry, ONLYOFFICE Document is currently only supported in the latest versions of the Chrome, Firefox, Safari or Internet Explorer web browsers.</div>',
+                      '</div>',
+                  '</div>'
+              );
+          }
+      </script>
+  </body>
+</html>

apps/presentationeditor/embed/index_loader.html.deploy

@@ -0,0 +1,359 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Documents</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <link href="../../../apps/presentationeditor/embed/resources/css/app-all.css" rel="stylesheet">
+
+    <!-- splash -->
+
+    <style type="text/css">
+        .loadmask {
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+            border: none;
+            background-color: #f4f4f4;
+            z-index: 20002;
+        }
+
+        .loader-page {
+            width: 100%;
+            height: 170px;
+            bottom: 42%;
+            position: absolute;
+            text-align: center;
+            line-height: 10px;
+        }
+
+        .loader-logo {
+            max-height: 160px;
+            margin-bottom: 10px;
+        }
+
+        .loader-page-romb {
+            width: 40px;
+            display: inline-block;
+        }
+
+        .loader-page-text {
+            width: 100%;
+            bottom: 42%;
+            position: absolute;
+            text-align: center;
+            color: #888;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            line-height: 20px;
+        }
+
+        .loader-page-text-loading {
+            font-size: 14px;
+        }
+
+        .loader-page-text-customer {
+            font-size: 16px;
+            margin-bottom: 5px;
+        }
+
+        .romb {
+            width: 40px;
+            height: 40px;
+            -webkit-transform: rotate(135deg) skew(20deg, 20deg);
+            -moz-transform: rotate(135deg) skew(20deg, 20deg);
+            -ms-transform: rotate(135deg) skew(20deg, 20deg);
+            -o-transform: rotate(135deg) skew(20deg, 20deg);
+            position: absolute;
+            background: red;
+            border-radius: 6px;
+            -webkit-animation: movedown 3s infinite ease;
+            -moz-animation: movedown 3s infinite ease;
+            -ms-animation: movedown 3s infinite ease;
+            -o-animation: movedown 3s infinite ease;
+            animation: movedown 3s infinite ease;
+        }
+
+        #blue {
+            z-index: 3;
+            background: #55bce6;
+            -webkit-animation-name: blue;
+            -moz-animation-name: blue;
+            -ms-animation-name: blue;
+            -o-animation-name: blue;
+            animation-name: blue;
+        }
+
+        #red {
+            z-index:1;
+            background: #de7a59;
+            -webkit-animation-name: red;
+            -moz-animation-name: red;
+            -ms-animation-name: red;
+            -o-animation-name: red;
+            animation-name: red;
+        }
+
+        #green {
+            z-index: 2;
+            background: #a1cb5c;
+            -webkit-animation-name: green;
+            -moz-animation-name: green;
+            -ms-animation-name: green;
+            -o-animation-name: green;
+            animation-name: green;
+        }
+
+        @-webkit-keyframes red {
+              0%    { top:120px; background: #de7a59; }
+             10%    { top:120px; background: #F2CBBF; }
+             14%    { background: #f4f4f4; top:120px; }
+             15%    { background: #f4f4f4; top:0;}
+             20%    { background: #E6E4E4; }
+             30%    { background: #D2D2D2; }
+             40%    { top:120px; }
+            100%    { top:120px; background: #de7a59; }
+        }
+
+        @keyframes red {
+              0%    { top:120px; background: #de7a59; }
+             10%    { top:120px; background: #F2CBBF; }
+             14%    { background: #f4f4f4; top:120px; }
+             15%    { background: #f4f4f4; top:0; }
+             20%    { background: #E6E4E4; }
+             30%    { background: #D2D2D2; }
+             40%    { top:120px; }
+            100%    { top:120px; background: #de7a59; }
+        }
+
+        @-webkit-keyframes green {
+              0%    { top:110px; background: #a1cb5c; opacity:1; }
+             10%    { top:110px; background: #CBE0AC; opacity:1; }
+             14%    { background: #f4f4f4; top:110px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #EFEFEF; top:0; opacity:1; }
+             30%    { background:#E6E4E4; }
+             70%    { top:110px; }
+            100%    { top:110px; background: #a1cb5c; }
+        }
+
+        @keyframes green {
+              0%    { top:110px; background: #a1cb5c; opacity:1; }
+             10%    { top:110px; background: #CBE0AC; opacity:1; }
+             14%    { background: #f4f4f4; top:110px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #EFEFEF; top:0; opacity:1; }
+             30%    { background:#E6E4E4; }
+             70%    { top:110px; }
+            100%    { top:110px; background: #a1cb5c; }
+        }
+
+        @-webkit-keyframes blue {
+              0%    { top:100px; background: #55bce6; opacity:1; }
+             10%    { top:100px; background: #BFE8F8; opacity:1; }
+             14%    { background: #f4f4f4; top:100px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #f4f4f4; top:0; opacity:0; }
+             45%    { background: #EFEFEF; top:0; opacity:0.2; }
+            100%    { top:100px; background: #55bce6; }
+        }
+
+        @keyframes blue {
+              0%    { top:100px; background: #55bce6; opacity:1; }
+             10%    { top:100px; background: #BFE8F8; opacity:1; }
+             14%    { background: #f4f4f4; top:100px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #fff; top:0; opacity:0; }
+             45%    { background: #EFEFEF; top:0; opacity:0.2; }
+            100%    { top:100px; background: #55bce6; }
+        }
+    </style>
+
+    <!--[if lt IE 9]>
+      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"></script>
+    <![endif]-->
+  </head>
+
+  <body class="embed-body">
+
+      <script>
+         var  userAgent = navigator.userAgent.toLowerCase(),
+              check = function(regex){ return regex.test(userAgent); };
+         if (!check(/opera/) && (check(/msie/) || check(/trident/))) {
+              var m = /msie (\d+\.\d+)/.exec(userAgent);
+              if (m && parseFloat(m[1]) < 10.0) {
+                  document.write(
+                      '<div id="id-error-mask" class="errormask">',
+                          '<div class="error-body" align="center">',
+                              '<div id="id-error-mask-title" class="title">Your browser is not supported.</div>',
+                              '<div id="id-error-mask-text">Sorry, ONLYOFFICE Document is currently only supported in the latest versions of the Chrome, Firefox, Safari or Internet Explorer web browsers.</div>',
+                          '</div>',
+                      '</div>'
+                  );
+              }
+         }
+
+        function getUrlParams() {
+            var e,
+                a = /\+/g,  // Regex for replacing addition symbol with a space
+                r = /([^&=]+)=?([^&]*)/g,
+                d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
+                q = window.location.search.substring(1),
+                urlParams = {};
+
+            while (e = r.exec(q))
+                urlParams[d(e[1])] = d(e[2]);
+
+            return urlParams;
+        }
+
+        function encodeUrlParam(str) {
+            return str.replace(/&/g, '&amp;')
+                    .replace(/"/g, '&quot;')
+                    .replace(/'/g, '&#39;')
+                    .replace(/</g, '&lt;')
+                    .replace(/>/g, '&gt;');
+        }
+
+        var params = getUrlParams(),
+            lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
+            customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+            margin = (customer !== '') ? 50 : 20,
+            loading = 'Loading...',
+            logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
+
+        window.frameEditorId = params["frameEditorId"];
+
+        if ( lang == 'de')      loading = 'Ladevorgang...';
+        else if ( lang == 'es') loading = 'Cargando...';
+        else if ( lang == 'fr') loading = 'Chargement en cours...';
+        else if ( lang == 'it') loading = 'Caricamento in corso...';
+        else if ( lang == 'pt') loading = 'Carregando...';
+        else if ( lang == 'ru') loading = 'Загрузка...';
+        else if ( lang == 'sl') loading = 'Nalaganje...';
+        else if ( lang == 'tr') loading = 'Yükleniyor...';
+        else if ( lang == 'bg') loading = 'Зареждане...';
+        else if ( lang == 'cs') loading = 'Nahrávám...';
+        else if ( lang == 'hu') loading = 'Betöltés...';
+        else if ( lang == 'ja') loading = '読み込み中...';
+        else if ( lang == 'ko') loading = '로드 중...';
+        else if ( lang == 'lv') loading = 'Ieladēšana ...';
+        else if ( lang == 'nl') loading = 'Laden...';
+        else if ( lang == 'pl') loading = 'Ładowanie...';
+        else if ( lang == 'sk') loading = 'Nahrávam...';
+        else if ( lang == 'uk') loading = 'Завантаження...';
+        else if ( lang == 'vi') loading = 'Đang tải...';
+        else if ( lang == 'zh') loading = '加载中...';
+
+        document.write(
+            '<div id="loading-mask" class="loadmask">' +
+                    '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
+                        ((logo!==null) ? logo :
+                        '<div class="loader-page-romb">' +
+                            '<div class="romb" id="blue"></div>' +
+                            '<div class="romb" id="green"></div>' +
+                            '<div class="romb" id="red"></div>' +
+                        '</div>') +
+                    '</div>' +
+                    '<div class="loader-page-text">' +  customer +
+                    '<div class="loader-page-text-loading">' + loading + '</div>' +
+                '</div>' +
+            '</div>');
+      </script>
+
+      <div id="box-preview">
+          <div id="id-preview" tabindex="-1"></div>
+      </div>
+      <div id="editor_sdk" class="viewer" style="overflow: hidden;" tabindex="-1"></div>
+
+      <div class="overlay-controls" style="margin-left: -32px">
+          <ul class="left">
+              <li id="btn-left"><button class="overlay svg-icon slide-prev"></button></li>
+              <li id="btn-play"><button class="overlay svg-icon play"></button></li>
+              <li id="btn-right"><button class="overlay svg-icon slide-next"></button></li>
+          </ul>
+      </div>
+
+      <div class="toolbar" id="toolbar">
+          <div class="group left">
+              <div id="box-tools" class="dropdown">
+                  <button class="control-btn svg-icon tools"></button>
+              </div>
+          </div>
+          <div class="group center">
+              <span><a id="header-logo" class="brand-logo" href="http://www.onlyoffice.com/" target="_blank"></a></span>
+          </div>
+          <div class="group right">
+              <div class="item"><input id="page-number" class="form-control input-xs masked" type="text" value="0"><span class="text" id="pages" tabindex="-1">of 0</span></div>
+              <div class="item separator"></div>
+              <div class="item"><button id="id-btn-close" class="control-btn close"><span aria-hidden="true">&times;</span></button></div>
+          </div>
+      </div>
+
+      <div class="error modal fade" id="id-critical-error-dialog" tabindex="-1" role="dialog">
+          <div class="modal-dialog">
+              <div class="modal-content">
+                  <div class="modal-header">
+                      <h4 id="id-critical-error-title"></h4>
+                  </div>
+                  <div class="modal-body">
+                      <p id="id-critical-error-message"></p>
+                  </div>
+                  <div class="modal-footer">
+                      <button id="id-critical-error-close" class="btn btn-sm btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
+                  </div>
+              </div>
+          </div>
+      </div>
+
+      <div id="id-loadmask" class="hide modal cmd-loader-body">
+          <div class="cmd-loader-image"></div>
+          <div class="cmd-loader-title">Please wait...</div>
+      </div>
+
+      <div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
+
+      <!--vendor-->
+      <script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
+      <script type="text/javascript" src="../../../vendor/jquery/jquery.browser.min.js"></script>
+      <script type="text/javascript" src="../../../vendor/bootstrap/dist/js/bootstrap.min.js"></script>
+      <script type="text/javascript" src="../../../vendor/sockjs/sockjs.min.js"></script>
+      <script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
+
+      <!--sdk-->
+      <script type="text/javascript" src="../../../../sdkjs/common/AllFonts.js"></script>
+      <script type="text/javascript" src="../../../../sdkjs/slide/sdk-all-min.js"></script>
+
+      <!--application-->
+      <script type="text/javascript" src="../../../apps/presentationeditor/embed/app-all.js"></script>
+      <script type="text/javascript">
+          var isBrowserSupported = function() {
+              return  ($.browser.msie     && parseFloat($.browser.version) > 9)     ||
+                      ($.browser.chrome   && parseFloat($.browser.version) > 7)     ||
+                      ($.browser.safari   && parseFloat($.browser.version) > 4)     ||
+                      ($.browser.opera    && parseFloat($.browser.version) > 10.4)  ||
+                      ($.browser.mozilla  && parseFloat($.browser.version) > 3.9);
+          };
+
+          if (!isBrowserSupported()){
+              document.write(
+                  '<div id="id-error-mask" class="errormask">',
+                      '<div class="error-body" align="center">',
+                          '<div id="id-error-mask-title" class="title">Your browser is not supported.</div>',
+                          '<div id="id-error-mask-text">Sorry, ONLYOFFICE Presentation is currently only supported in the latest versions of the Chrome, Firefox, Safari or Internet Explorer web browsers.</div>',
+                      '</div>',
+                  '</div>'
+              );
+          }
+      </script>
+  </body>
+</html>

apps/presentationeditor/main/app/controller/Main.js

@@ -96,42 +96,10 @@ define([
                         'settings:apply': _.bind(this.applySettings, this)
                     }
                 });
-            },
 
-            onLaunch: function() {
+                var me = this,
-                var me = this;
+                    themeNames = ['blank', 'pixel', 'classic', 'official', 'green', 'lines', 'office', 'safari', 'dotted', 'corner', 'turtle'],
-
+                    translate = {
-                this._state = {isDisconnected: false, usersCount: 1, fastCoauth: true, lostEditingRights: false, licenseType: false};
-                this.languages = null;
-                this.translationTable = [];
-                this.isModalShowed = 0;
-
-                window.storagename = 'presentation';
-
-                this.stackLongActions = new Common.IrregularStack({
-                    strongCompare   : function(obj1, obj2){return obj1.id === obj2.id && obj1.type === obj2.type;},
-                    weakCompare     : function(obj1, obj2){return obj1.type === obj2.type;}
-                });
-
-                // Initialize viewport
-
-                if (!Common.Utils.isBrowserSupported()){
-                    Common.Utils.showBrowserRestriction();
-                    Common.Gateway.reportError(undefined, this.unsupportedBrowserErrorText);
-                    return;
-                }
-
-                var value = Common.localStorage.getItem("pe-settings-fontrender");
-                if (value===null) value = window.devicePixelRatio > 1 ? '1' : '3';
-                Common.Utils.InternalSettings.set("pe-settings-fontrender", value);
-
-                // Initialize api
-
-                window["flat_desine"] = true;
-
-                this.api = new Asc.asc_docs_api({
-                    'id-view'  : 'editor_sdk',
-                    'translate': {
                         'Series': this.txtSeries,
                         'Diagram Title': this.txtDiagramTitle,
                         'X Axis': this.txtXAxis,
@@ -154,13 +122,43 @@ define([
                         'Loading': this.txtLoading,
                         'Click to add notes': this.txtAddNotes,
                         'Click to add first slide': this.txtAddFirstSlide
-                    }
+                    };
+
+                themeNames.forEach(function(item){
+                    translate[item] = me['txtTheme_' + item.replace(/ /g, '_')] || item;
+                });
+                me.translationTable = translate;
+            },
+
+            onLaunch: function() {
+                var me = this;
+
+                this._state = {isDisconnected: false, usersCount: 1, fastCoauth: true, lostEditingRights: false, licenseType: false};
+                this.languages = null;
+                this.isModalShowed = 0;
+
+                window.storagename = 'presentation';
+
+                this.stackLongActions = new Common.IrregularStack({
+                    strongCompare   : function(obj1, obj2){return obj1.id === obj2.id && obj1.type === obj2.type;},
+                    weakCompare     : function(obj1, obj2){return obj1.type === obj2.type;}
                 });
 
-                var themeNames = ['blank', 'pixel', 'classic', 'official', 'green', 'lines', 'office', 'safari', 'dotted', 'corner', 'turtle'];
+                // Initialize viewport
-                themeNames.forEach(function(item){
+
-                    me.translationTable[item] = me['txtTheme_' + item.replace(/ /g, '_')] || item;
+                if (!Common.Utils.isBrowserSupported()){
-                });
+                    Common.Utils.showBrowserRestriction();
+                    Common.Gateway.reportError(undefined, this.unsupportedBrowserErrorText);
+                    return;
+                }
+
+                var value = Common.localStorage.getItem("pe-settings-fontrender");
+                if (value===null) value = window.devicePixelRatio > 1 ? '1' : '3';
+                Common.Utils.InternalSettings.set("pe-settings-fontrender", value);
+
+                // Initialize api
+                window["flat_desine"] = true;
+                this.api = this.getApplication().getController('Viewport').getApi();
 
                 if (this.api){
                     this.api.SetDrawingFreeze(true);
@@ -331,6 +329,9 @@ define([
                 if (this.appOptions.location == 'us' || this.appOptions.location == 'ca')
                     Common.Utils.Metric.setDefaultMetric(Common.Utils.Metric.c_MetricUnits.inch);
 
+                if (!this.editorConfig.customization || !(this.editorConfig.customization.loaderName || this.editorConfig.customization.loaderLogo))
+                    $('#editor_sdk').append('<div class="doc-placeholder"><div class="slide-h"><div class="slide-v"><div class="slide-container"><div class="line"></div><div class="line"></div></div></div></div></div>');
+
                 Common.Controllers.Desktop.init(this.appOptions);
             },
 
@@ -763,7 +764,6 @@ define([
 
                             me.api.asc_registerCallback('asc_onFocusObject',        _.bind(me.onFocusObject, me));
 
-                            me.fillTextArt(me.api.asc_getTextArtPreviews());
                             toolbarController.activateControls();
                             if (me.needToUpdateVersion)
                                 toolbarController.onApiCoAuthoringDisconnect();
@@ -791,6 +791,8 @@ define([
 
                 $(document).on('contextmenu', _.bind(me.onContextMenu, me));
                 Common.Gateway.documentReady();
+
+                $('.doc-placeholder').remove();
             },
 
             onLicenseChanged: function(params) {
@@ -1562,7 +1564,7 @@ define([
                     this.updateThemeColors();
                     var me = this;
                     setTimeout(function(){
-                        me.fillTextArt(me.api.asc_getTextArtPreviews());
+                        me.fillTextArt();
                     }, 1);
                 }
             },
@@ -1592,21 +1594,22 @@ define([
                 _.each(groupNames, function(groupName, index){
                     var store = new Backbone.Collection([], {
                         model: PE.Models.ShapeModel
-                    });
+                    }),
+                        arr = [];
 
                     var cols = (shapes[index].length) > 18 ? 7 : 6,
                         height = Math.ceil(shapes[index].length/cols) * 35 + 3,
                         width = 30 * cols;
 
                     _.each(shapes[index], function(shape, idx){
-                        store.add({
+                        arr.push({
                             data     : {shapeType: shape.Type},
                             tip      : me['txtShape_' + shape.Type] || (me.textShape + ' ' + (idx+1)),
                             allowSelected : true,
                             selected: false
                         });
                     });
-
+                    store.add(arr);
                     shapegrouparray.push({
                         groupName   : me.shapeGroupNames[index],
                         groupStore  : store,
@@ -1645,11 +1648,14 @@ define([
             },
 
             fillTextArt: function(shapes){
-                if (_.isEmpty(shapes)) return;
+                var arr = [],
-
-                var me = this, arr = [],
                     artStore = this.getCollection('Common.Collections.TextArt');
 
+                if (!shapes && artStore.length>0) {// shapes == undefined when update textart collection (from asc_onSendThemeColors)
+                    shapes = this.api.asc_getTextArtPreviews();
+                }
+                if (_.isEmpty(shapes)) return;
+
                 _.each(shapes, function(shape, index){
                     arr.push({
                         imageUrl : shape,
@@ -1659,11 +1665,6 @@ define([
                     });
                 });
                 artStore.reset(arr);
-
-                setTimeout(function(){
-                    me.getApplication().getController('RightMenu').fillTextArt();
-                }, 50);
-
             },
 
             loadLanguages: function(apiLangs) {

apps/presentationeditor/main/app/controller/RightMenu.js

@@ -278,15 +278,11 @@ define([
             this.rightmenu.tableSettings.updateMetricUnit();
         },
 
-        fillTextArt:  function() {
-            this.rightmenu.textartSettings.fillTextArt();
-        },
-
         createDelayedElements: function() {
             if (this.editMode && this.api) {
                 this.api.asc_registerCallback('asc_doubleClickOnObject', _.bind(this.onDoubleClickOnObject, this));
 
-                this.rightmenu.shapeSettings.createDelayedElements();
+                // this.rightmenu.shapeSettings.createDelayedElements();
                 var selectedElements = this.api.getSelectedElements();
                 if (selectedElements.length>0) {
                     this.onFocusObject(selectedElements, !Common.localStorage.getBool("pe-hide-right-settings", this.rightmenu.defaultHideRightMenu));

apps/presentationeditor/main/app/controller/Toolbar.js

@@ -125,7 +125,9 @@ define([
                     'insert:textart'    : this.onInsertTextart.bind(this),
                     'insert:shape'      : this.onInsertShape.bind(this),
                     'add:slide'         : this.onAddSlide.bind(this),
-                    'change:compact'    : this.onClickChangeCompact
+                    'change:slide'      : this.onChangeSlide.bind(this),
+                    'change:compact'    : this.onClickChangeCompact,
+                    'add:chart'         : this.onSelectChart
                 },
                 'FileMenu': {
                     'menu:hide': this.onFileMenu.bind(this, 'hide'),
@@ -232,10 +234,6 @@ define([
             Common.NotificationCenter.on('app:ready', me.onAppReady.bind(me));
             Common.NotificationCenter.on('app:face', me.onAppShowed.bind(me));
 
-            PE.getCollection('Common.Collections.TextArt').bind({
-                reset: me.onResetTextArt.bind(this)
-            });
-
             PE.getCollection('ShapeGroups').bind({
                 reset: me.onResetAutoshapes.bind(this)
             });
@@ -255,8 +253,6 @@ define([
              * UI Events
              */
 
-            if (toolbar.mnuChangeSlidePicker)
-                toolbar.mnuChangeSlidePicker.on('item:click',           _.bind(this.onChangeSlide, this));
             toolbar.btnPreview.on('click',                              _.bind(this.onPreviewBtnClick, this));
             toolbar.btnPreview.menu.on('item:click',                    _.bind(this.onPreviewItemClick, this));
             toolbar.btnPrint.on('click',                                _.bind(this.onPrint, this));
@@ -309,7 +305,6 @@ define([
             toolbar.btnColorSchemas.menu.on('item:click',               _.bind(this.onColorSchemaClick, this));
             toolbar.btnColorSchemas.menu.on('show:after',               _.bind(this.onColorSchemaShow, this));
             toolbar.btnSlideSize.menu.on('item:click',                  _.bind(this.onSlideSize, this));
-            toolbar.mnuInsertChartPicker.on('item:click',               _.bind(this.onSelectChart, this));
             toolbar.listTheme.on('click',                               _.bind(this.onListThemeSelect, this));
             toolbar.btnInsertEquation.on('click',                       _.bind(this.onInsertEquationClick, this));
             toolbar.btnEditHeader.on('click',                           _.bind(this.onEditHeaderClick, this, 'header'));
@@ -362,7 +357,7 @@ define([
             this.api.asc_registerCallback('asc_onInitEditorStyles',     _.bind(this.onApiInitEditorStyles, this));
 
             this.api.asc_registerCallback('asc_onCountPages',           _.bind(this.onApiCountPages, this));
-            this.api.asc_registerCallback('asc_onMathTypes',            _.bind(this.onMathTypes, this));
+            this.api.asc_registerCallback('asc_onMathTypes',            _.bind(this.onApiMathTypes, this));
             this.api.asc_registerCallback('asc_onContextMenu',          _.bind(this.onContextMenu, this));
             this.api.asc_registerCallback('asc_onTextLanguage',         _.bind(this.onTextLanguage, this));
         },
@@ -722,8 +717,12 @@ define([
                 this.toolbar.lockToolbar(PE.enumLock.inEquation, in_equation, {array: [me.toolbar.btnSuperscript, me.toolbar.btnSubscript]});
             }
 
-            if (this.toolbar.mnuChangeSlidePicker)
+            if (this.toolbar.btnChangeSlide) {
-                this.toolbar.mnuChangeSlidePicker.options.layout_index = layout_index;
+                if (this.toolbar.btnChangeSlide.mnuSlidePicker)
+                    this.toolbar.btnChangeSlide.mnuSlidePicker.options.layout_index = layout_index;
+                else
+                    this.toolbar.btnChangeSlide.mnuSlidePicker = {options: {layout_index: layout_index}};
+            }
         },
 
         onApiStyleChange: function(v) {
@@ -816,19 +815,17 @@ define([
         },
 
         onAddSlide: function(type) {
-            var me = this;
             if ( this.api) {
                 this.api.AddSlide(type);
 
-                Common.NotificationCenter.trigger('edit:complete', me.toolbar);
+                Common.NotificationCenter.trigger('edit:complete', this.toolbar);
                 Common.component.Analytics.trackEvent('ToolBar', 'Add Slide');
             }
         },
 
-        onChangeSlide: function(picker, item, record) {
+        onChangeSlide: function(type) {
             if (this.api) {
-                if (record)
+                this.api.ChangeLayout(type);
-                    this.api.ChangeLayout(record.get('data').idx);
 
                 Common.NotificationCenter.trigger('edit:complete', this.toolbar);
                 Common.component.Analytics.trackEvent('ToolBar', 'Change Layout');
@@ -1584,11 +1581,8 @@ define([
             }
         },
 
-        onSelectChart: function(picker, item, record) {
+        onSelectChart: function(type) {
-            if (!record) return;
-
             var me      = this,
-                type    = record.get('type'),
                 chart = false;
 
             var selectedElements = me.api.getSelectedElements();
@@ -1712,17 +1706,14 @@ define([
         },
 
         onResetAutoshapes: function () {
-            setTimeout(function () {
+            var me = this;
-                this.toolbar.updateAutoshapeMenu(PE.getCollection('ShapeGroups'));
+            var onShowBefore = function(menu) {
-            }.bind(this), 0);
+                me.toolbar.updateAutoshapeMenu(menu, PE.getCollection('ShapeGroups'));
-        },
+                menu.off('show:before', onShowBefore);
-
+            };
-        onResetTextArt: function (collection, opts) {
+            me.toolbar.btnsInsertShape.forEach(function (btn, index) {
-            (new Promise(function (resolve, reject) {
+                btn.menu.on('show:before', onShowBefore);
-                resolve();
+            });
-            })).then(function () {
-                this.toolbar.updateTextartMenu(collection);
-            }.bind(this));
         },
 
         onResetSlides: function () {
@@ -1736,12 +1727,44 @@ define([
 
             var me = this, equationsStore = this.getApplication().getCollection('EquationGroups');
 
-            me.equationPickers = [];
             me.toolbar.btnInsertEquation.menu.removeAll();
+            var onShowAfter = function(menu) {
+                for (var i = 0; i < equationsStore.length; ++i) {
+                    var equationPicker = new Common.UI.DataViewSimple({
+                        el: $('#id-toolbar-menu-equationgroup' + i),
+                        parentMenu: menu.items[i].menu,
+                        store: equationsStore.at(i).get('groupStore'),
+                        scrollAlwaysVisible: true,
+                        itemTemplate: _.template('<div class="item-equation" '+
+                            'style="background-position:<%= posX %>px <%= posY %>px;" >' +
+                            '<div style="width:<%= width %>px;height:<%= height %>px;" id="<%= id %>"></div>' +
+                            '</div>')
+                    });
+                    equationPicker.on('item:click', function(picker, item, record, e) {
+                        if (me.api) {
+                            if (record)
+                                me.api.asc_AddMath(record.get('data').equationType);
+
+                            if (me.toolbar.btnsInsertText.pressed()) {
+                                me.toolbar.btnsInsertText.toggle(false, true);
+                            }
+                            if (me.toolbar.btnsInsertShape.pressed()) {
+                                me.toolbar.btnsInsertShape.toggle(false, true);
+                            }
+
+                            if (e.type !== 'click')
+                                me.toolbar.btnInsertEquation.menu.hide();
+                            Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnInsertEquation);
+                            Common.component.Analytics.trackEvent('ToolBar', 'Add Equation');
+                        }
+                    });
+                }
+                menu.off('show:after', onShowAfter);
+            };
+            me.toolbar.btnInsertEquation.menu.on('show:after', onShowAfter);
 
             for (var i = 0; i < equationsStore.length; ++i) {
                 var equationGroup = equationsStore.at(i);
-
                 var menuItem = new Common.UI.MenuItem({
                     caption: equationGroup.get('groupName'),
                     menu: new Common.UI.Menu({
@@ -1753,56 +1776,7 @@ define([
                         ]
                     })
                 });
-
                 me.toolbar.btnInsertEquation.menu.addItem(menuItem);
-
-                var equationPicker = new Common.UI.DataView({
-                    el: $('#id-toolbar-menu-equationgroup' + i),
-                    store: equationGroup.get('groupStore'),
-                    parentMenu: menuItem.menu,
-                    showLast: false,
-                    itemTemplate: _.template('<div class="item-equation" '+
-                        'style="background-position:<%= posX %>px <%= posY %>px;" >' +
-                        '<div style="width:<%= width %>px;height:<%= height %>px;" id="<%= id %>">')
-                });
-                if (equationGroup.get('groupHeight').length) {
-
-                    me.equationPickers.push(equationPicker);
-                    me.toolbar.btnInsertEquation.menu.on('show:after', function () {
-
-                        if (me.equationPickers.length) {
-                            var element = $(this.el).find('.over').find('.menu-shape');
-                            if (element.length) {
-                                for (var i = 0; i < me.equationPickers.length; ++i) {
-                                    if (element[0].id == me.equationPickers[i].el.id) {
-                                        me.equationPickers[i].scroller.update({alwaysVisibleY: true});
-                                        me.equationPickers.splice(i, 1);
-                                        return;
-                                    }
-                                }
-                            }
-                        }
-                    });
-                }
-
-                equationPicker.on('item:click', function(picker, item, record, e) {
-                    if (me.api) {
-                        if (record)
-                            me.api.asc_AddMath(record.get('data').equationType);
-
-                        if (me.toolbar.btnsInsertText.pressed()) {
-                            me.toolbar.btnsInsertText.toggle(false, true);
-                        }
-                        if (me.toolbar.btnsInsertShape.pressed()) {
-                            me.toolbar.btnsInsertShape.toggle(false, true);
-                        }
-
-                         if (e.type !== 'click')
-                             me.toolbar.btnInsertEquation.menu.hide();
-                        Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnInsertEquation);
-                        Common.component.Analytics.trackEvent('ToolBar', 'Add Equation');
-                    }
-                });
             }
         },
 
@@ -1814,6 +1788,16 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this.toolbar, this.toolbar.btnInsertEquation);
         },
 
+        onApiMathTypes: function(equation) {
+            this._equationTemp = equation;
+            var me = this;
+            var onShowBefore = function(menu) {
+                me.onMathTypes(me._equationTemp);
+                me.toolbar.btnInsertEquation.menu.off('show:before', onShowBefore);
+            };
+            me.toolbar.btnInsertEquation.menu.on('show:before', onShowBefore);
+        },
+
         onMathTypes: function(equation) {
             var equationgrouparray = [],
                 equationsStore = this.getCollection('EquationGroups');
@@ -1854,35 +1838,29 @@ define([
                     translationTable[Common.define.c_oAscMathType[name]] = this[translate];
                 }
             }
-
+            var i,id = 0, count = 0, length = 0, width = 0, height = 0, store = null, list = null, eqStore = null, eq = null, data;
-            var i,id = 0, count = 0, length = 0, width = 0, height = 0, store = null, list = null, eqStore = null, eq = null;
 
             if (equation) {
-
+                data = equation.get_Data();
-                count = equation.get_Data().length;
+                count = data.length;
-
                 if (count) {
                     for (var j = 0; j < count; ++j) {
-                        id = equation.get_Data()[j].get_Id();
+                        var group = data[j];
-                        width = equation.get_Data()[j].get_W();
+                        id = group.get_Id();
-                        height = equation.get_Data()[j].get_H();
+                        width = group.get_W();
+                        height = group.get_H();
 
                         store = new Backbone.Collection([], {
                             model: PE.Models.EquationModel
                         });
 
                         if (store) {
-
+                            var allItemsCount = 0, itemsCount = 0, ids = 0, arr = [];
-                            var allItemsCount = 0, itemsCount = 0, ids = 0;
+                            length = group.get_Data().length;
-
-                            length = equation.get_Data()[j].get_Data().length;
-
                             for (i = 0; i < length; ++i) {
-                                eqStore = equation.get_Data()[j].get_Data()[i];
+                                eqStore = group.get_Data()[i];
-
                                 itemsCount = eqStore.get_Data().length;
                                 for (var p = 0; p < itemsCount; ++p) {
-
                                     eq = eqStore.get_Data()[p];
                                     ids = eq.get_Id();
 
@@ -1891,8 +1869,7 @@ define([
                                     if (translationTable.hasOwnProperty(ids)) {
                                         translate = translationTable[ids];
                                     }
-
+                                    arr.push({
-                                    store.add({
                                         data            : {equationType: ids},
                                         tip             : translate,
                                         allowSelected   : true,
@@ -1906,7 +1883,7 @@ define([
 
                                 allItemsCount += itemsCount;
                             }
-
+                            store.add(arr);
                             width = c_oAscMathMainTypeStrings[id][1] * (width + 10);  // 4px margin + 4px margin + 1px border + 1px border
 
                             var normHeight = parseInt(370 / (height + 10)) * (height + 10);
@@ -1918,9 +1895,7 @@ define([
                             });
                         }
                     }
-
                     equationsStore.add(equationgrouparray);
-
                     this.fillEquations();
                 }
             }
@@ -1962,7 +1937,7 @@ define([
             this._state.clrtext_asccolor = undefined;
         },
 
-        _onInitEditorThemes: function(editorThemes, documentThemes) {
+        _onInitEditorThemes: function(editorThemes/*array */, documentThemes) {
             var me = this;
             window.styles_loaded = false;
 

apps/presentationeditor/main/app/controller/Viewport.js

@@ -123,11 +123,20 @@ define([
             Common.NotificationCenter.on('api:disconnect',              this.onApiCoAuthoringDisconnect.bind(this));
         },
 
+        getApi: function() {
+            return this.api;
+        },
 
         // When our application is ready, lets get started
         onLaunch: function() {
             // Create and render main view
             this.viewport = this.createView('Viewport').render();
+
+            this.api = new Asc.asc_docs_api({
+                'id-view'  : 'editor_sdk',
+                'translate': this.getApplication().getController('Main').translationTable
+            });
+
             this.header   = this.createView('Common.Views.Header', {
                 headerCaption: 'Presentation Editor',
                 storeUsers: PE.getCollection('Common.Collections.Users')

apps/presentationeditor/main/app/view/DocumentHolder.js

@@ -692,21 +692,11 @@ define([
             };
 
             this.changeLanguageMenu = function(menu) {
-                var i;
                 if (me._currLang.id===null || me._currLang.id===undefined) {
-                    for (i=0; i<menu.items.length; i++)
+                    menu.clearAll();
-                        menu.items[i].setChecked(false);
-                    menu.currentCheckedItem = undefined;
                 } else {
-                    for (i=0; i<menu.items.length; i++) {
+                    var index = _.findIndex(menu.items, {langid: me._currLang.id});
-                        if (menu.items[i].options.langid === me._currLang.id) {
+                    (index>-1) && !menu.items[index].checked && menu.setChecked(index, true);
-                            menu.currentCheckedItem = menu.items[i];
-                            if (!menu.items[i].checked)
-                                menu.items[i].setChecked(true);
-                            break;
-                        } else if (menu.items[i].checked)
-                            menu.items[i].setChecked(false);
-                    }
                 }
             };
 
@@ -2169,13 +2159,21 @@ define([
                 })
             });
 
+            var langTemplate = _.template([
+                '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= value %>" class="<% if (checked) { %> checked <% } %>">',
+                '<i class="icon <% if (spellcheck) { %> img-toolbarmenu spellcheck-lang <% } %>"></i>',
+                '<%= caption %>',
+                '</a>'
+            ].join(''));
+
             me.langTableMenu = new Common.UI.MenuItem({
                 caption     : me.langText,
-                menu        : new Common.UI.Menu({
+                menu        : new Common.UI.MenuSimple({
                     cls: 'lang-menu',
                     menuAlign: 'tl-tr',
                     restoreHeight: 285,
                     items   : [],
+                    itemTemplate: langTemplate,
                     search: true
                 })
             });
@@ -2246,11 +2244,12 @@ define([
 
             me.langParaMenu = new Common.UI.MenuItem({
                 caption     : me.langText,
-                menu        : new Common.UI.Menu({
+                menu        : new Common.UI.MenuSimple({
                     cls: 'lang-menu',
                     menuAlign: 'tl-tr',
                     restoreHeight: 285,
                     items   : [],
+                    itemTemplate: langTemplate,
                     search: true
                 })
             });
@@ -3360,60 +3359,40 @@ define([
 
         setLanguages: function(langs){
             var me = this;
-
             if (langs && langs.length > 0 && me.langParaMenu && me.langTableMenu) {
-                me.langParaMenu.menu.removeAll();
+                var arrPara = [], arrTable = [];
-                me.langTableMenu.menu.removeAll();
+                _.each(langs, function(lang) {
-                _.each(langs, function(lang, index){
+                    var item = {
-                    me.langParaMenu.menu.addItem(new Common.UI.MenuItem({
                         caption     : lang.displayValue,
                         value       : lang.value,
                         checkable   : true,
-                        toggleGroup : 'popupparalang',
                         langid      : lang.code,
-                        spellcheck   : lang.spellcheck,
+                        spellcheck   : lang.spellcheck
-                        template: _.template([
+                    };
-                            '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= options.value %>">',
+                    arrPara.push(item);
-                                '<i class="icon <% if (options.spellcheck) { %> img-toolbarmenu spellcheck-lang <% } %>"></i>',
+                    arrTable.push(_.clone(item));
-                                '<%= caption %>',
+                });
-                            '</a>'
+                me.langParaMenu.menu.resetItems(arrPara);
-                        ].join(''))
+                me.langTableMenu.menu.resetItems(arrTable);
-                    }).on('click', function(item, e){
-                        if (me.api){
-                            if (!_.isUndefined(item.options.langid))
-                                me.api.put_TextPrLang(item.options.langid);
 
-                            me._currLang.paraid = item.options.langid;
+                me.langParaMenu.menu.on('item:click', function(menu, item){
-                            me.langParaMenu.menu.currentCheckedItem = item;
+                    if (me.api){
+                        if (!_.isUndefined(item.langid))
+                            me.api.put_TextPrLang(item.langid);
 
-                            me.fireEvent('editcomplete', me);
+                        me._currLang.paraid = item.langid;
-                        }
+                        me.fireEvent('editcomplete', me);
-                    }));
+                    }
+                });
 
-                    me.langTableMenu.menu.addItem(new Common.UI.MenuItem({
+                me.langTableMenu.menu.on('item:click', function(menu, item, e){
-                        caption     : lang.displayValue,
+                    if (me.api){
-                        value       : lang.value,
+                        if (!_.isUndefined(item.langid))
-                        checkable   : true,
+                            me.api.put_TextPrLang(item.langid);
-                        toggleGroup : 'popuptablelang',
-                        langid      : lang.code,
-                        spellcheck   : lang.spellcheck,
-                        template: _.template([
-                            '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= options.value %>">',
-                                '<i class="icon <% if (options.spellcheck) { %> img-toolbarmenu spellcheck-lang <% } %>"></i>',
-                                '<%= caption %>',
-                            '</a>'
-                        ].join(''))
-                    }).on('click', function(item, e){
-                        if (me.api){
-                            if (!_.isUndefined(item.options.langid))
-                                me.api.put_TextPrLang(item.options.langid);
 
-                            me._currLang.tableid = item.options.langid;
+                        me._currLang.tableid = item.langid;
-                            me.langTableMenu.menu.currentCheckedItem = item;
+                        me.fireEvent('editcomplete', me);
-
+                    }
-                            me.fireEvent('editcomplete', me);
-                        }
-                    }));
                 });
             }
         },

apps/presentationeditor/main/app/view/FileMenu.js

@@ -49,6 +49,7 @@ define([
 
     PE.Views.FileMenu = Common.UI.BaseView.extend(_.extend({
         el: '#file-menu-panel',
+        rendered: false,
         options: {alias:'FileMenu'},
 
         template: _.template(tpl),
@@ -84,89 +85,92 @@ define([
         },
 
         render: function () {
-            this.$el = $(this.el);
+            var $markup = $(this.template());
-            this.$el.html(this.template());
 
             this.miSave = new Common.UI.MenuItem({
-                el      : $('#fm-btn-save',this.el),
+                el      : $markup.elementById('#fm-btn-save'),
                 action  : 'save',
                 caption : this.btnSaveCaption,
                 canFocused: false,
                 disabled: true
             });
+            if ( !!this.options.miSave ) {
+                this.miSave.setDisabled(this.options.miSave.isDisabled());
+                delete this.options.miSave;
+            }
 
             this.miEdit = new Common.UI.MenuItem({
-                el      : $('#fm-btn-edit',this.el),
+                el      : $markup.elementById('#fm-btn-edit'),
                 action  : 'edit',
                 caption : this.btnToEditCaption,
                 canFocused: false
             });
 
             this.miDownload = new Common.UI.MenuItem({
-                el      : $('#fm-btn-download',this.el),
+                el      : $markup.elementById('#fm-btn-download'),
                 action  : 'saveas',
                 caption : this.btnDownloadCaption,
                 canFocused: false
             });
 
             this.miSaveCopyAs = new Common.UI.MenuItem({
-                el      : $('#fm-btn-save-copy',this.el),
+                el      : $markup.elementById('#fm-btn-save-copy'),
                 action  : 'save-copy',
                 caption : this.btnSaveCopyAsCaption,
                 canFocused: false
             });
 
             this.miSaveAs = new Common.UI.MenuItem({
-                el      : $('#fm-btn-save-desktop',this.el),
+                el      : $markup.elementById('#fm-btn-save-desktop'),
                 action  : 'save-desktop',
                 caption : this.btnSaveAsCaption,
                 canFocused: false
             });
 
             this.miPrint = new Common.UI.MenuItem({
-                el      : $('#fm-btn-print',this.el),
+                el      : $markup.elementById('#fm-btn-print'),
                 action  : 'print',
                 caption : this.btnPrintCaption,
                 canFocused: false
             });
 
             this.miRename = new Common.UI.MenuItem({
-                el      : $('#fm-btn-rename',this.el),
+                el      : $markup.elementById('#fm-btn-rename'),
                 action  : 'rename',
                 caption : this.btnRenameCaption,
                 canFocused: false
             });
 
             this.miProtect = new Common.UI.MenuItem({
-                el      : $('#fm-btn-protect',this.el),
+                el      : $markup.elementById('#fm-btn-protect'),
                 action  : 'protect',
                 caption : this.btnProtectCaption,
                 canFocused: false
             });
 
             this.miRecent = new Common.UI.MenuItem({
-                el      : $('#fm-btn-recent',this.el),
+                el      : $markup.elementById('#fm-btn-recent'),
                 action  : 'recent',
                 caption : this.btnRecentFilesCaption,
                 canFocused: false
             });
 
             this.miNew = new Common.UI.MenuItem({
-                el      : $('#fm-btn-create',this.el),
+                el      : $markup.elementById('#fm-btn-create'),
                 action  : 'new',
                 caption : this.btnCreateNewCaption,
                 canFocused: false
             });
 
             this.miAccess = new Common.UI.MenuItem({
-                el      : $('#fm-btn-rights',this.el),
+                el      : $markup.elementById('#fm-btn-rights'),
                 action  : 'rights',
                 caption : this.btnRightsCaption,
                 canFocused: false
             });
 
             this.miHelp = new Common.UI.MenuItem({
-                el      : $('#fm-btn-help',this.el),
+                el      : $markup.elementById('#fm-btn-help'),
                 action  : 'help',
                 caption : this.btnHelpCaption,
                 canFocused: false
@@ -175,7 +179,7 @@ define([
             this.items = [];
             this.items.push(
                 new Common.UI.MenuItem({
-                    el      : $('#fm-btn-return',this.el),
+                    el      : $markup.elementById('#fm-btn-return'),
                     action  : 'back',
                     caption : this.btnCloseMenuCaption,
                     canFocused: false
@@ -191,35 +195,37 @@ define([
                 this.miRecent,
                 this.miNew,
                 new Common.UI.MenuItem({
-                    el      : $('#fm-btn-info',this.el),
+                    el      : $markup.elementById('#fm-btn-info'),
                     action  : 'info',
                     caption : this.btnInfoCaption,
                     canFocused: false
                 }),
                 this.miAccess,
                 new Common.UI.MenuItem({
-                    el      : $('#fm-btn-settings',this.el),
+                    el      : $markup.elementById('#fm-btn-settings'),
                     action  : 'opts',
                     caption : this.btnSettingsCaption,
                     canFocused: false
                 }),
                 this.miHelp,
                 new Common.UI.MenuItem({
-                    el      : $('#fm-btn-back',this.el),
+                    el      : $markup.elementById('#fm-btn-back'),
                     action  : 'exit',
                     caption : this.btnBackCaption,
                     canFocused: false
                 })
             );
 
-            var me = this;
+            this.rendered = true;
-            me.panels = {
+            this.$el.html($markup);
-                'opts'      : (new PE.Views.FileMenuPanels.Settings({menu:me})).render(),
+            this.$el.find('.content-box').hide();
-                'info'      : (new PE.Views.FileMenuPanels.DocumentInfo({menu:me})).render(),
+            this.applyMode();
-                'rights'    : (new PE.Views.FileMenuPanels.DocumentRights({menu:me})).render()
-            };
 
-            me.$el.find('.content-box').hide();
+            if ( !!this.api ) {
+                this.panels['info'].setApi(this.api);
+                if ( this.panels['protect'] )
+                    this.panels['protect'].setApi(this.api);
+            }
 
             return this;
         },
@@ -227,6 +233,9 @@ define([
         show: function(panel) {
             if (this.isVisible() && panel===undefined || !this.mode) return;
 
+            if ( !this.rendered )
+                this.render();
+
             var defPanel = (this.mode.canDownload && (!this.mode.isDesktopApp || !this.mode.isOffline)) ? 'saveas' : 'info';
             if (!panel)
                 panel = this.active || defPanel;
@@ -245,6 +254,16 @@ define([
         },
 
         applyMode: function() {
+            if (!this.panels) {
+                this.panels = {
+                    'opts'      : (new PE.Views.FileMenuPanels.Settings({menu:this})).render(this.$el.find('#panel-settings')),
+                    'info'      : (new PE.Views.FileMenuPanels.DocumentInfo({menu:this})).render(this.$el.find('#panel-info')),
+                    'rights'    : (new PE.Views.FileMenuPanels.DocumentRights({menu:this})).render(this.$el.find('#panel-rights'))
+                };
+            }
+
+            if (!this.mode) return;
+
             this.miDownload[(this.mode.canDownload && (!this.mode.isDesktopApp || !this.mode.isOffline))?'show':'hide']();
             this.miSaveCopyAs[(this.mode.canDownload && (!this.mode.isDesktopApp || !this.mode.isOffline)) && (this.mode.canRequestSaveAs || this.mode.saveAsUrl) ?'show':'hide']();
             this.miSaveAs[(this.mode.canDownload && this.mode.isDesktopApp && this.mode.isOffline)?'show':'hide']();
@@ -278,30 +297,28 @@ define([
             if ( this.mode.canCreateNew ) {
                 if (this.mode.templates && this.mode.templates.length) {
                     $('a',this.miNew.$el).text(this.btnCreateNewCaption + '...');
-                    this.panels['new'] = ((new PE.Views.FileMenuPanels.CreateNew({menu: this, docs: this.mode.templates})).render());
+                    !this.panels['new'] && (this.panels['new'] = (new PE.Views.FileMenuPanels.CreateNew({menu: this, docs: this.mode.templates})).render());
                 }
             }
 
-            if ( this.mode.canOpenRecent ) {
+            if ( this.mode.canOpenRecent && this.mode.recent ) {
-                if (this.mode.recent){
+                !this.panels['recent'] && (this.panels['recent'] = (new PE.Views.FileMenuPanels.RecentFiles({menu:this, recent: this.mode.recent})).render());
-                    this.panels['recent'] = (new PE.Views.FileMenuPanels.RecentFiles({menu:this, recent: this.mode.recent})).render();
-                }
             }
 
             if (this.mode.canProtect) {
-                this.panels['protect'] = (new PE.Views.FileMenuPanels.ProtectDoc({menu:this})).render();
+                !this.panels['protect'] && (this.panels['protect'] = (new PE.Views.FileMenuPanels.ProtectDoc({menu:this})).render());
                 this.panels['protect'].setMode(this.mode);
             }
 
             if (this.mode.canDownload) {
-                this.panels['saveas'] = ((new PE.Views.FileMenuPanels.ViewSaveAs({menu: this})).render());
+                !this.panels['saveas'] && (this.panels['saveas'] = ((new PE.Views.FileMenuPanels.ViewSaveAs({menu: this})).render()));
             }
 
             if (this.mode.canDownload && (this.mode.canRequestSaveAs || this.mode.saveAsUrl)) {
-                this.panels['save-copy'] = ((new PE.Views.FileMenuPanels.ViewSaveCopy({menu: this})).render());
+                !this.panels['save-copy'] && (this.panels['save-copy'] = ((new PE.Views.FileMenuPanels.ViewSaveCopy({menu: this})).render()));
             }
 
-            if (this.mode.canHelp) {
+            if (this.mode.canHelp && !this.panels['help']) {
                 this.panels['help'] = ((new PE.Views.FileMenuPanels.Help({menu: this})).render());
                 this.panels['help'].setLangConfig(this.mode.lang);
             }
@@ -319,14 +336,21 @@ define([
                 this.mode = mode;
             }
 
-            if (!delay) this.applyMode();
+            if (!delay) {
+                if ( this.rendered )
+                    this.applyMode();
+            }
         },
 
         setApi: function(api) {
             this.api = api;
-            this.panels['info'].setApi(api);
+
-            if (this.panels['protect']) this.panels['protect'].setApi(api);
+            if ( this.rendered ) {
+                this.panels['info'].setApi(api);
+                if (this.panels['protect']) this.panels['protect'].setApi(api);
+            }
             this.api.asc_registerCallback('asc_onDocumentName',  _.bind(this.onDocumentName, this));
+            return this;
         },
 
         loadDocument: function(data) {
@@ -370,7 +394,8 @@ define([
 
         onDocumentName: function(name) {
             this.document.title = name;
-            this.panels['info'].updateInfo(this.document);
+            if (this.rendered)
+                this.panels['info'].updateInfo(this.document);
         },
 
         isVisible: function () {
@@ -378,8 +403,12 @@ define([
         },
 
         getButton: function(type) {
-            if (type == 'save')
+            if (type == 'save') {
-                return this.miSave;
+                if (this.rendered)
+                    return this.miSave;
+                else
+                    return this.options.miSave ? this.options.miSave : (this.options.miSave = new Common.UI.MenuItem({}));
+            }
         },
 
         btnSaveCaption          : 'Save',

apps/presentationeditor/main/app/view/FileMenuPanels.js

@@ -84,12 +84,12 @@ define([
         },
 
         render: function() {
-            $(this.el).html(this.template({rows:this.formats}));
+            this.$el.html(this.template({rows:this.formats}));
             $('.btn-doc-format',this.el).on('click', _.bind(this.onFormatClick,this));
 
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
-                    el: $(this.el),
+                    el: this.$el,
                     suppressScrollX: true
                 });
             }
@@ -140,12 +140,12 @@ define([
         },
 
         render: function() {
-            $(this.el).html(this.template({rows:this.formats}));
+            this.$el.html(this.template({rows:this.formats}));
             $('.btn-doc-format',this.el).on('click', _.bind(this.onFormatClick,this));
 
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
-                    el: $(this.el),
+                    el: this.$el,
                     suppressScrollX: true
                 });
             }
@@ -221,21 +221,22 @@ define([
             this.menu = options.menu;
         },
 
-        render: function() {
+        render: function(node) {
-            $(this.el).html(this.template({scope: this}));
+            var me = this;
+            var $markup = $(this.template({scope: this}));
 
             this.chSpell = new Common.UI.CheckBox({
-                el: $('#fms-chb-spell-check'),
+                el: $markup.findById('#fms-chb-spell-check'),
                 labelText: this.strSpellCheckMode
             });
 
             this.chInputMode = new Common.UI.CheckBox({
-                el: $('#fms-chb-input-mode'),
+                el: $markup.findById('#fms-chb-input-mode'),
                 labelText: this.strInputMode
             });
 
             this.cmbZoom = new Common.UI.ComboBox({
-                el          : $('#fms-cmb-zoom'),
+                el          : $markup.findById('#fms-cmb-zoom'),
                 style       : 'width: 160px;',
                 editable    : false,
                 cls         : 'input-group-nr',
@@ -259,7 +260,7 @@ define([
 
             /** coauthoring begin **/
             this.cmbCoAuthMode = new Common.UI.ComboBox({
-                el          : $('#fms-cmb-coauth-mode'),
+                el          : $markup.findById('#fms-cmb-coauth-mode'),
                 style       : 'width: 160px;',
                 editable    : false,
                 cls         : 'input-group-nr',
@@ -267,38 +268,38 @@ define([
                     { value: 1, displayValue: this.strFast, descValue: this.strCoAuthModeDescFast},
                     { value: 0, displayValue: this.strStrict, descValue: this.strCoAuthModeDescStrict }
                 ]
-            }).on('selected', _.bind(function(combo, record) {
+            }).on('selected', function(combo, record) {
-                if (record.value == 1 && (this.chAutosave.getValue()!=='checked'))
+                if (record.value == 1 && (me.chAutosave.getValue()!=='checked'))
-                    this.chAutosave.setValue(1);
+                    me.chAutosave.setValue(1);
-                this.lblCoAuthMode.text(record.descValue);
+                me.lblCoAuthMode.text(record.descValue);
-            }, this));
+            });
 
-            this.lblCoAuthMode = $('#fms-lbl-coauth-mode');
+            this.lblCoAuthMode = $markup.findById('#fms-lbl-coauth-mode');
             /** coauthoring end **/
 
             this.chAutosave = new Common.UI.CheckBox({
-                el: $('#fms-chb-autosave'),
+                el: $markup.findById('#fms-chb-autosave'),
                 labelText: this.strAutosave
-            }).on('change', _.bind(function(field, newValue, oldValue, eOpts){
+            }).on('change', function(field, newValue, oldValue, eOpts){
-                if (field.getValue()!=='checked' && this.cmbCoAuthMode.getValue()) {
+                if (field.getValue()!=='checked' && me.cmbCoAuthMode.getValue()) {
-                    this.cmbCoAuthMode.setValue(0);
+                    me.cmbCoAuthMode.setValue(0);
-                    this.lblCoAuthMode.text(this.strCoAuthModeDescStrict);
+                    me.lblCoAuthMode.text(me.strCoAuthModeDescStrict);
                 }
-            }, this));
+            });
-            this.lblAutosave = $('#fms-lbl-autosave');
+            this.lblAutosave = $markup.findById('#fms-lbl-autosave');
 
             this.chForcesave = new Common.UI.CheckBox({
-                el: $('#fms-chb-forcesave'),
+                el: $markup.findById('#fms-chb-forcesave'),
                 labelText: this.strForcesave
             });
 
             this.chAlignGuides = new Common.UI.CheckBox({
-                el: $('#fms-chb-align-guides'),
+                el: $markup.findById('#fms-chb-align-guides'),
                 labelText: this.strAlignGuides
             });
 
             this.cmbFontRender = new Common.UI.ComboBox({
-                el          : $('#fms-cmb-font-render'),
+                el          : $markup.findById('#fms-cmb-font-render'),
                 style       : 'width: 160px;',
                 editable    : false,
                 cls         : 'input-group-nr',
@@ -310,7 +311,7 @@ define([
             });
 
             this.cmbUnit = new Common.UI.ComboBox({
-                el          : $('#fms-cmb-unit'),
+                el          : $markup.findById('#fms-cmb-unit'),
                 style       : 'width: 160px;',
                 editable    : false,
                 cls         : 'input-group-nr',
@@ -322,14 +323,16 @@ define([
             });
 
             this.btnApply = new Common.UI.Button({
-                el: '#fms-btn-apply'
+                el: $markup.findById('#fms-btn-apply')
             });
 
             this.btnApply.on('click', _.bind(this.applySettings, this));
 
+            this.$el = $(node).html($markup);
+
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
-                    el: $(this.el),
+                    el: this.$el,
                     suppressScrollX: true
                 });
             }
@@ -472,7 +475,7 @@ define([
         },
 
         render: function() {
-            $(this.el).html(this.template());
+            this.$el.html(this.template());
 
             this.viewRecentPicker = new Common.UI.DataView({
                 el: $('#id-recent-view'),
@@ -490,7 +493,7 @@ define([
 
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
-                    el: $(this.el),
+                    el: this.$el,
                     suppressScrollX: true
                 });
             }
@@ -552,14 +555,14 @@ define([
         },
 
         render: function() {
-            $(this.el).html(this.template({
+            this.$el.html(this.template({
                 scope: this,
                 docs: this.options[0].docs
             }));
 
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
-                    el: $(this.el),
+                    el: this.$el,
                     suppressScrollX: true
                 });
             }
@@ -668,15 +671,14 @@ define([
             this._locked = false;
         },
 
-        render: function() {
+        render: function(node) {
-            $(this.el).html(this.template({scope: this}));
-
             var me = this;
+            var $markup = $(me.template());
 
             // server info
-            this.lblPlacement = $('#id-info-placement');
+            this.lblPlacement = $markup.findById('#id-info-placement');
-            this.lblOwner = $('#id-info-owner');
+            this.lblOwner = $markup.findById('#id-info-owner');
-            this.lblUploaded = $('#id-info-uploaded');
+            this.lblUploaded = $markup.findById('#id-info-uploaded');
 
             // edited info
             var keyDownBefore = function(input, e){
@@ -691,37 +693,37 @@ define([
             };
 
             this.inputTitle = new Common.UI.InputField({
-                el          : $('#id-info-title'),
+                el          : $markup.findById('#id-info-title'),
                 style       : 'width: 200px;',
                 placeHolder : this.txtAddText,
                 validateOnBlur: false
             }).on('keydown:before', keyDownBefore);
             this.inputSubject = new Common.UI.InputField({
-                el          : $('#id-info-subject'),
+                el          : $markup.findById('#id-info-subject'),
                 style       : 'width: 200px;',
                 placeHolder : this.txtAddText,
                 validateOnBlur: false
             }).on('keydown:before', keyDownBefore);
             this.inputComment = new Common.UI.InputField({
-                el          : $('#id-info-comment'),
+                el          : $markup.findById('#id-info-comment'),
                 style       : 'width: 200px;',
                 placeHolder : this.txtAddText,
                 validateOnBlur: false
             }).on('keydown:before', keyDownBefore);
 
             // modify info
-            this.lblModifyDate = $('#id-info-modify-date');
+            this.lblModifyDate = $markup.findById('#id-info-modify-date');
-            this.lblModifyBy = $('#id-info-modify-by');
+            this.lblModifyBy = $markup.findById('#id-info-modify-by');
 
             // creation info
-            this.lblDate = $('#id-info-date');
+            this.lblDate = $markup.findById('#id-info-date');
-            this.lblApplication = $('#id-info-appname');
+            this.lblApplication = $markup.findById('#id-info-appname');
-            this.tblAuthor = $('#id-info-author table');
+            this.tblAuthor = $markup.findById('#id-info-author table');
-            this.trAuthor = $('#id-info-add-author').closest('tr');
+            this.trAuthor = $markup.findById('#id-info-add-author').closest('tr');
             this.authorTpl = '<tr><td><div style="display: inline-block;width: 200px;"><input type="text" spellcheck="false" class="form-control" readonly="true" value="{0}" ></div><div class="close img-commonctrl"></div></td></tr>';
 
             this.tblAuthor.on('click', function(e) {
-                var btn = $(e.target);
+                var btn = $markup.find(e.target);
                 if (btn.hasClass('close') && !btn.hasClass('disabled')) {
                     var el = btn.closest('tr'),
                         idx = me.tblAuthor.find('tr').index(el);
@@ -731,7 +733,7 @@ define([
             });
 
             this.inputAuthor = new Common.UI.InputField({
-                el          : $('#id-info-add-author'),
+                el          : $markup.findById('#id-info-add-author'),
                 style       : 'width: 200px;',
                 validateOnBlur: false,
                 placeHolder: this.txtAddAuthor
@@ -764,9 +766,10 @@ define([
 
             this.updateInfo(this.doc);
 
+            this.$el = $(node).html($markup);
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
-                    el: $(this.el),
+                    el: this.$el,
                     suppressScrollX: true
                 });
             }
@@ -985,12 +988,12 @@ define([
             this.menu = options.menu;
         },
 
-        render: function() {
+        render: function(node) {
-            $(this.el).html(this.template());
+            var $markup = $(this.template());
 
-            this.cntRights = $('#id-info-rights');
+            this.cntRights = $markup.findById('#id-info-rights');
             this.btnEditRights = new Common.UI.Button({
-                el: '#id-info-btn-edit'
+                el: $markup.findById('#id-info-btn-edit')
             });
             this.btnEditRights.on('click', _.bind(this.changeAccessRights, this));
 
@@ -998,15 +1001,17 @@ define([
 
             this.updateInfo(this.doc);
 
+            this.$el = $(node).html($markup);
+
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
-                    el: $(this.el),
+                    el: this.$el,
                     suppressScrollX: true
                 });
             }
 
-            Common.NotificationCenter.on('collaboration:sharing', _.bind(this.changeAccessRights, this));
+            Common.NotificationCenter.on('collaboration:sharing', this.changeAccessRights.bind(this));
-            Common.NotificationCenter.on('collaboration:sharingdeny', _.bind(this.onLostEditRights, this));
+            Common.NotificationCenter.on('collaboration:sharingdeny', this.onLostEditRights.bind(this));
 
             return this;
         },
@@ -1150,7 +1155,7 @@ define([
 
         render: function() {
             var me = this;
-            $(this.el).html(this.template());
+            this.$el.html(this.template());
 
             this.viewHelpPicker = new Common.UI.DataView({
                 el: $('#id-help-contents'),
@@ -1281,7 +1286,7 @@ define([
         },
 
         render: function() {
-            $(this.el).html(this.template({scope: this}));
+            this.$el.html(this.template({scope: this}));
 
             var protection = PE.getController('Common.Controllers.Protection').getView();
 
@@ -1308,7 +1313,7 @@ define([
             this.cntSignatureView = $('#id-fms-signature-view');
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
-                    el: $(this.el),
+                    el: this.$el,
                     suppressScrollX: true
                 });
             }

apps/presentationeditor/main/app/view/LeftMenu.js

@@ -87,13 +87,11 @@ define([
         },
 
         render: function () {
-            var el = $(this.el);
+            var $markup = $(this.template({}));
-            el.html(this.template({
-            }));
 
             this.btnSearch = new Common.UI.Button({
                 action: 'search',
-                el: $('#left-btn-search'),
+                el: $markup.elementById('#left-btn-search'),
                 hint: this.tipSearch + Common.Utils.String.platformKey('Ctrl+F'),
                 disabled: true,
                 enableToggle: true
@@ -101,7 +99,7 @@ define([
 
             this.btnThumbs = new Common.UI.Button({
                 action: 'thumbs',
-                el: $('#left-btn-thumbs'),
+                el: $markup.elementById('#left-btn-thumbs'),
                 hint: this.tipSlides,
                 enableToggle: true,
                 disabled: true,
@@ -110,7 +108,7 @@ define([
 
             this.btnAbout = new Common.UI.Button({
                 action: 'about',
-                el: $('#left-btn-about'),
+                el: $markup.elementById('#left-btn-about'),
                 hint: this.tipAbout,
                 enableToggle: true,
                 disabled: true,
@@ -119,14 +117,14 @@ define([
 
             this.btnSupport = new Common.UI.Button({
                 action: 'support',
-                el: $('#left-btn-support'),
+                el: $markup.elementById('#left-btn-support'),
                 hint: this.tipSupport,
                 disabled: true
             });
 
             /** coauthoring begin **/
             this.btnComments = new Common.UI.Button({
-                el: $('#left-btn-comments'),
+                el: $markup.elementById('#left-btn-comments'),
                 hint: this.tipComments + Common.Utils.String.platformKey('Ctrl+Shift+H'),
                 enableToggle: true,
                 disabled: true,
@@ -134,7 +132,7 @@ define([
             });
 
             this.btnChat = new Common.UI.Button({
-                el: $('#left-btn-chat'),
+                el: $markup.elementById('#left-btn-chat'),
                 hint: this.tipChat + Common.Utils.String.platformKey('Alt+Q'),
                 enableToggle: true,
                 disabled: true,
@@ -144,12 +142,12 @@ define([
             this.btnComments.hide();
             this.btnChat.hide();
 
-            this.btnComments.on('click',        _.bind(this.onBtnMenuClick, this));
+            this.btnComments.on('click',        this.onBtnMenuClick.bind(this));
-            this.btnChat.on('click',            _.bind(this.onBtnMenuClick, this));
+            this.btnChat.on('click',            this.onBtnMenuClick.bind(this));
             /** coauthoring end **/
 
             this.btnPlugins = new Common.UI.Button({
-                el: $('#left-btn-plugins'),
+                el: $markup.elementById('#left-btn-plugins'),
                 hint: this.tipPlugins,
                 enableToggle: true,
                 disabled: true,
@@ -164,8 +162,8 @@ define([
             this.btnAbout.on('click',           _.bind(this.onFullMenuClick, this));
 
             this.menuFile = new PE.Views.FileMenu({});
-            this.menuFile.render();
+            this.btnAbout.panel = (new Common.Views.About({el: '#about-menu-panel', appName: 'Presentation Editor'}));
-            this.btnAbout.panel = (new Common.Views.About({el: $('#about-menu-panel'), appName: 'Presentation Editor'})).render();
+            this.$el.html($markup);
 
             return this;
         },

apps/presentationeditor/main/app/view/ShapeSettings.js

@@ -76,6 +76,7 @@ define([
             this._noApply = true;
             this._sendUndoPoint = true;
             this._sliderChanged = false;
+            this._texturearray = null;
 
             this.txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt);
 
@@ -95,7 +96,8 @@ define([
                 DisabledFillPanels: false,
                 DisabledControls: false,
                 HideShapeOnlySettings: false,
-                HideChangeTypeSettings: false
+                HideChangeTypeSettings: false,
+                isFromImage: false
             };
             this.lockedControls = [];
             this._locked = false;
@@ -717,7 +719,8 @@ define([
                     || shapetype=='curvedConnector3' || shapetype=='curvedConnector4' || shapetype=='curvedConnector5'
                     || shapetype=='straightConnector1';
                 this.hideChangeTypeSettings(hidechangetype);
-                if (!hidechangetype) {
+                this._state.isFromImage = !!props.get_FromImage();
+                if (!hidechangetype && this.btnChangeShape.menu.items.length) {
                     this.btnChangeShape.menu.items[0].setVisible(props.get_FromImage());
                     this.btnChangeShape.menu.items[1].setVisible(!props.get_FromImage());
                 }
@@ -1355,6 +1358,7 @@ define([
         },
 
         createDelayedElements: function() {
+            this._initSettings = false;
             this.createDelayedControls();
 
             var global_hatch_menu_map = [
@@ -1388,36 +1392,17 @@ define([
                 this.PatternFillType = this.patternViewData[0].type;
             }
 
-            this.fillAutoShapes();
+            this.onInitStandartTextures();
+            this.onApiAutoShapes();
             this.UpdateThemeColors();
-            this._initSettings = false;
         },
 
         onInitStandartTextures: function(texture) {
             var me = this;
             if (texture && texture.length>0){
-                if (!this.btnTexture) {
+                me._texturearray = [];
-                    this.btnTexture = new Common.UI.ComboBox({
-                        el: $('#shape-combo-fill-texture'),
-                        template: _.template([
-                            '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">',
-                                '<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>',
-                                '<div style="display: table-cell;"></div>',
-                                '<button type="button" class="btn btn-default"><span class="caret img-commonctrl"></span></button>',
-                            '</div>'
-                        ].join(''))
-                    });
-                    this.textureMenu = new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="id-shape-menu-texture" style="width: 233px; margin: 0 5px;"></div>') }
-                        ]
-                    });
-                    this.textureMenu.render($('#shape-combo-fill-texture'));
-                    this.fillControls.push(this.btnTexture);
-                }
-                var texturearray = [];
                 _.each(texture, function(item){
-                    texturearray.push({
+                    me._texturearray.push({
                         imageUrl: item.get_image(),
                         name   : me.textureNames[item.get_id()],
                         type    : item.get_id(),
@@ -1425,15 +1410,41 @@ define([
                         selected: false
                     });
                 });
-                var mnuTexturePicker = new Common.UI.DataView({
+            }
-                    el: $('#id-shape-menu-texture'),
+
-                    restoreHeight: 174,
+            if (!me._texturearray || me._texturearray.length<1) return;
-                    parentMenu: me.textureMenu,
+            if (!this._initSettings && !this.btnTexture) {
-                    showLast: false,
+                this.btnTexture = new Common.UI.ComboBox({
-                    store: new Common.UI.DataViewStore(texturearray),
+                    el: $('#shape-combo-fill-texture'),
-                    itemTemplate: _.template('<div class="item-texture"><img src="<%= imageUrl %>" id="<%= id %>"></div>')
+                    template: _.template([
+                        '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">',
+                            '<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>',
+                            '<div style="display: table-cell;"></div>',
+                            '<button type="button" class="btn btn-default"><span class="caret img-commonctrl"></span></button>',
+                        '</div>'
+                    ].join(''))
                 });
-                mnuTexturePicker.on('item:click', _.bind(this.onSelectTexture, this));
+                this.textureMenu = new Common.UI.Menu({
+                    items: [
+                        { template: _.template('<div id="id-shape-menu-texture" style="width: 233px; margin: 0 5px;"></div>') }
+                    ]
+                });
+                this.textureMenu.render($('#shape-combo-fill-texture'));
+                this.fillControls.push(this.btnTexture);
+
+                var onShowBefore = function(menu) {
+                    var mnuTexturePicker = new Common.UI.DataView({
+                        el: $('#id-shape-menu-texture'),
+                        restoreHeight: 174,
+                        parentMenu: menu,
+                        showLast: false,
+                        store: new Common.UI.DataViewStore(me._texturearray || []),
+                        itemTemplate: _.template('<div class="item-texture"><img src="<%= imageUrl %>" id="<%= id %>"></div>')
+                    });
+                    mnuTexturePicker.on('item:click', _.bind(me.onSelectTexture, me));
+                    menu.off('show:before', onShowBefore);
+                };
+                this.textureMenu.on('show:before', onShowBefore);
             }
         },
 
@@ -1465,11 +1476,46 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
+        onApiAutoShapes: function() {
+            var me = this;
+            var onShowBefore = function(menu) {
+                me.fillAutoShapes();
+                menu.off('show:before', onShowBefore);
+            };
+            me.btnChangeShape.menu.on('show:before', onShowBefore);
+        },
+
         fillAutoShapes: function() {
             var me = this,
-                shapesStore = this.application.getCollection('ShapeGroups');
+                shapesStore = this.application.getCollection('ShapeGroups'),
+                count = shapesStore.length;
+
+            var onShowAfter = function(menu) {
+                for (var i=-1; i<count-1 && count>0; i++) {
+                    var store = shapesStore.at(i > -1 ? i : 0).get('groupStore');
+                    if (i<0) {
+                        store = store.clone();
+                        store.shift();
+                    }
+                    var shapePicker = new Common.UI.DataViewSimple({
+                        el: $('#id-shape-menu-shapegroup' + (i+1), menu.items[i+1].$el),
+                        store: store,
+                        parentMenu: menu.items[i+1].menu,
+                        itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>')
+                    });
+                    shapePicker.on('item:click', function(picker, item, record, e) {
+                        if (me.api) {
+                            me.api.ChangeShapeType(record.get('data').shapeType);
+                            me.fireEvent('editcomplete', me);
+                        }
+                        if (e.type !== 'click')
+                            me.btnChangeShape.menu.hide();
+                    });
+                }
+                menu.off('show:after', onShowAfter);
+            };
+            me.btnChangeShape.menu.on('show:after', onShowAfter);
 
-            var count = shapesStore.length;
             for (var i=-1; i<count-1 && count>0; i++) {
                 var shapeGroup = shapesStore.at(i>-1 ? i : i+1);
                 var menuItem = new Common.UI.MenuItem({
@@ -1482,32 +1528,13 @@ define([
                     })
                 });
                 me.btnChangeShape.menu.addItem(menuItem);
-
-                var store = shapeGroup.get('groupStore');
-                if (i<0) {
-                    store = store.clone();
-                    store.shift();
-                }
-                var shapePicker = new Common.UI.DataView({
-                    el: $('#id-shape-menu-shapegroup' + (i+1)),
-                    store: store,
-                    parentMenu: menuItem.menu,
-                    showLast: false,
-                    itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>')
-                });
-
-                shapePicker.on('item:click', function(picker, item, record, e) {
-                    if (me.api) {
-                        me.api.ChangeShapeType(record.get('data').shapeType);
-                        me.fireEvent('editcomplete', me);
-                    }
-                    if (e.type !== 'click')
-                        me.btnChangeShape.menu.hide();
-                });
             }
+            me.btnChangeShape.menu.items[0].setVisible(me._state.isFromImage);
+            me.btnChangeShape.menu.items[1].setVisible(!me._state.isFromImage);
         },
 
         UpdateThemeColors: function() {
+            if (this._initSettings) return;
             if (!this.btnBackColor) {
                 this.btnBackColor = new Common.UI.ColorButton({
                     style: "width:45px;",

apps/presentationeditor/main/app/view/SlideSettings.js

@@ -73,6 +73,7 @@ define([
             this._noApply = true;
             this._sendUndoPoint = true;
             this._sliderChanged = false;
+            this._texturearray = null;
 
             this.FillItems = [];
 
@@ -808,6 +809,7 @@ define([
         },
         
         createDelayedElements: function() {
+            this._initSettings = false;
             this.createDelayedControls();
             
             var global_hatch_menu_map = [
@@ -841,35 +843,16 @@ define([
                 this.PatternFillType = this.patternViewData[0].type;
             }
 
+            this.onInitStandartTextures();
             this.UpdateThemeColors();
-            this._initSettings = false;
         },
 
         onInitStandartTextures: function(texture) {
             var me = this;
             if (texture && texture.length>0){
-                if (!this.btnTexture) {
+                me._texturearray = [];
-                    this.btnTexture = new Common.UI.ComboBox({
-                        el: $('#slide-combo-fill-texture'),
-                        template: _.template([
-                            '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">',
-                            '<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>',
-                            '<div style="display: table-cell;"></div>',
-                            '<button type="button" class="btn btn-default"><span class="caret img-commonctrl"></span></button>',
-                            '</div>'
-                        ].join(''))
-                    });
-                    this.textureMenu = new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="id-slide-menu-texture" style="width: 233px; margin: 0 5px;"></div>') }
-                        ]
-                    });
-                    this.textureMenu.render($('#slide-combo-fill-texture'));
-                    this.FillItems.push(this.btnTexture);
-                }
-                var texturearray = [];
                 _.each(texture, function(item){
-                    texturearray.push({
+                    me._texturearray.push({
                         imageUrl: item.get_image(),
                         name   : me.textureNames[item.get_id()],
                         type    : item.get_id(),
@@ -877,15 +860,41 @@ define([
                         selected: false
                     });
                 });
-                var mnuTexturePicker = new Common.UI.DataView({
+            }
-                    el: $('#id-slide-menu-texture'),
+
-                    restoreHeight: 174,
+            if (!me._texturearray || me._texturearray.length<1) return;
-                    parentMenu: me.textureMenu,
+            if (!this._initSettings && !this.btnTexture) {
-                    showLast: false,
+                this.btnTexture = new Common.UI.ComboBox({
-                    store: new Common.UI.DataViewStore(texturearray),
+                    el: $('#slide-combo-fill-texture'),
-                    itemTemplate: _.template('<div class="item-texture"><img src="<%= imageUrl %>" id="<%= id %>"></div>')
+                    template: _.template([
+                        '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">',
+                        '<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>',
+                        '<div style="display: table-cell;"></div>',
+                        '<button type="button" class="btn btn-default"><span class="caret img-commonctrl"></span></button>',
+                        '</div>'
+                    ].join(''))
                 });
-                mnuTexturePicker.on('item:click', _.bind(this.onSelectTexture, this));
+                this.textureMenu = new Common.UI.Menu({
+                    items: [
+                        { template: _.template('<div id="id-slide-menu-texture" style="width: 233px; margin: 0 5px;"></div>') }
+                    ]
+                });
+                this.textureMenu.render($('#slide-combo-fill-texture'));
+                this.FillItems.push(this.btnTexture);
+
+                var onShowBefore = function(menu) {
+                    var mnuTexturePicker = new Common.UI.DataView({
+                        el: $('#id-slide-menu-texture'),
+                        restoreHeight: 174,
+                        parentMenu: menu,
+                        showLast: false,
+                        store: new Common.UI.DataViewStore(me._texturearray || []),
+                        itemTemplate: _.template('<div class="item-texture"><img src="<%= imageUrl %>" id="<%= id %>"></div>')
+                    });
+                    mnuTexturePicker.on('item:click', _.bind(me.onSelectTexture, me));
+                    menu.off('show:before', onShowBefore);
+                };
+                this.textureMenu.on('show:before', onShowBefore);
             }
         },
 
@@ -1036,6 +1045,7 @@ define([
         },
 
         UpdateThemeColors: function() {
+            if (this._initSettings) return;
             if (!this.btnBackColor) {
                 this.btnBackColor = new Common.UI.ColorButton({
                     style: "width:45px;",

apps/presentationeditor/main/app/view/Statusbar.js

@@ -69,7 +69,7 @@ define([
                 Common.Utils.String.format(this.pageIndexText, model.get('current'), model.get('count')) );
         }
 
-        function _clickLanguage(menu, item, state) {
+        function _clickLanguage(menu, item) {
             var $parent = menu.$el.parent();
             $parent.find('#status-label-lang').text(item.caption);
             this.langMenu.prevTip = item.value.value;
@@ -248,14 +248,14 @@ define([
                 this.btnPreview.render($('#slot-status-btn-preview'));
 
                 var panelLang = $('.cnt-lang',this.el);
-                this.langMenu = new Common.UI.Menu({
+                this.langMenu = new Common.UI.MenuSimple({
                     cls: 'lang-menu',
                     style: 'margin-top:-5px;',
                     restoreHeight: 285,
                     itemTemplate: _.template([
-                        '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= options.value.value %>">',
+                        '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= value.value %>" class="<% if (checked) { %> checked <% } %>">',
-                            '<i class="icon <% if (options.spellcheck) { %> img-toolbarmenu spellcheck-lang <% } %>"></i>',
+                        '<i class="icon <% if (spellcheck) { %> img-toolbarmenu spellcheck-lang <% } %>"></i>',
-                            '<%= caption %>',
+                        '<%= caption %>',
                         '</a>'
                     ].join('')),
                     menuAlign: 'bl-tl',
@@ -328,18 +328,18 @@ define([
             },
 
             reloadLanguages: function(array) {
-                this.langMenu.removeAll();
+                var arr = [],
+                    saved = this.langMenu.saved;
                 _.each(array, function(item) {
-                    this.langMenu.addItem({
+                    arr.push({
                         caption     : item['displayValue'],
                         value       : {value: item['value'], code: item['code']},
                         checkable   : true,
-                        checked     : this.langMenu.saved == item['displayValue'],
+                        checked     : saved == item['displayValue'],
-                        spellcheck   : item['spellcheck'],
+                        spellcheck  : item['spellcheck']
-                        toggleGroup : 'language'
                     });
-                }, this);
+                });
-
+                this.langMenu.resetItems(arr);
                 if (this.langMenu.items.length>0) {
                     this.btnLanguage.setDisabled(false || this._state.no_paragraph);
                 }
@@ -352,9 +352,9 @@ define([
 
                     this.langMenu.prevTip = info.value;
                     var lang = _.find(this.langMenu.items, function(item) { return item.caption == info.displayValue; });
-                    if (lang)
+                    if (lang) {
-                        lang.setChecked(true);
+                        this.langMenu.setChecked(this.langMenu.items.indexOf(lang), true);
-                    else {
+                    } else {
                         this.langMenu.saved = info.displayValue;
                         this.langMenu.clearAll();
                     }

apps/presentationeditor/main/app/view/TableSettings.js

@@ -604,13 +604,14 @@ define([
         },
 
         createDelayedElements: function() {
+            this._initSettings = false;
             this.createDelayedControls();
             this.UpdateThemeColors();
             this.updateMetricUnit();
-            this._initSettings = false;
         },
 
         UpdateThemeColors: function() {
+            if (this._initSettings) return;
             if (!this.btnBackColor) {
                 this.btnBorderColor = new Common.UI.ColorButton({
                     style: "width:45px;",
@@ -684,7 +685,6 @@ define([
                     data[index].set('imageUrl', template.asc_getImage());
                 });
             } else {
-                self.cmbTableTemplate.menuPicker.store.reset([]);
                 var arr = [];
                 _.each(Templates, function(template){
                     arr.push({
@@ -694,7 +694,7 @@ define([
                         tip    : template.asc_getDisplayName()
                     });
                 });
-                self.cmbTableTemplate.menuPicker.store.add(arr);
+                self.cmbTableTemplate.menuPicker.store.reset(arr);
             }
         },
 

apps/presentationeditor/main/app/view/TextArtSettings.js

@@ -75,6 +75,7 @@ define([
             this.shapeprops = null;
             this._sendUndoPoint = true;
             this._sliderChanged = false;
+            this._texturearray = null;
 
             this.txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt);
 
@@ -122,6 +123,10 @@ define([
             this.FillPatternContainer = $('#textart-panel-pattern-fill');
             this.FillGradientContainer = $('#textart-panel-gradient-fill');
             this.TransparencyContainer = $('#textart-panel-transparent-fill');
+
+            PE.getCollection('Common.Collections.TextArt').bind({
+                reset: this.fillTextArt.bind(this)
+            });
         },
 
         render: function () {
@@ -1294,6 +1299,7 @@ define([
         },
 
         createDelayedElements: function() {
+            this._initSettings = false;
             this.createDelayedControls();
             
             var global_hatch_menu_map = [
@@ -1327,50 +1333,59 @@ define([
                 this.PatternFillType = this.patternViewData[0].type;
             }
             this.UpdateThemeColors();
+            this.onInitStandartTextures();
+            this.fillTextArt();
             this.fillTransform(this.api.asc_getPropertyEditorTextArts());
-            this._initSettings = false;
         },
 
         onInitStandartTextures: function(texture) {
             var me = this;
             if (texture && texture.length>0){
-                if (!this.btnTexture) {
+                me._texturearray = [];
-                    this.btnTexture = new Common.UI.ComboBox({
-                        el: $('#textart-combo-fill-texture'),
-                        template: _.template([
-                            '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">',
-                                '<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>',
-                                '<div style="display: table-cell;"></div>',
-                                '<button type="button" class="btn btn-default"><span class="caret img-commonctrl"></span></button>',
-                            '</div>'
-                        ].join(''))
-                    });
-                    this.textureMenu = new Common.UI.Menu({
-                        items: [
-                            { template: _.template('<div id="id-textart-menu-texture" style="width: 233px; margin: 0 5px;"></div>') }
-                        ]
-                    });
-                    this.textureMenu.render($('#textart-combo-fill-texture'));
-                    this.lockedControls.push(this.btnTexture);
-                }
-                var texturearray = [];
                 _.each(texture, function(item){
-                    texturearray.push({
+                    me._texturearray.push({
                         imageUrl: item.get_image(),
                         name   : me.textureNames[item.get_id()],
                         type    : item.get_id(),
+//                        allowSelected : false,
                         selected: false
                     });
                 });
-                var mnuTexturePicker = new Common.UI.DataView({
+            }
-                    el: $('#id-textart-menu-texture'),
+
-                    restoreHeight: 174,
+            if (!me._texturearray || me._texturearray.length<1) return;
-                    parentMenu: me.textureMenu,
+            if (!this._initSettings && !this.btnTexture) {
-                    showLast: false,
+                this.btnTexture = new Common.UI.ComboBox({
-                    store: new Common.UI.DataViewStore(texturearray),
+                    el: $('#textart-combo-fill-texture'),
-                    itemTemplate: _.template('<div><img src="<%= imageUrl %>" id="<%= id %>"></div>')
+                    template: _.template([
+                        '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">',
+                            '<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>',
+                            '<div style="display: table-cell;"></div>',
+                            '<button type="button" class="btn btn-default"><span class="caret img-commonctrl"></span></button>',
+                        '</div>'
+                    ].join(''))
                 });
-                mnuTexturePicker.on('item:click', _.bind(this.onSelectTexture, this));
+                this.textureMenu = new Common.UI.Menu({
+                    items: [
+                        { template: _.template('<div id="id-textart-menu-texture" style="width: 233px; margin: 0 5px;"></div>') }
+                    ]
+                });
+                this.textureMenu.render($('#textart-combo-fill-texture'));
+                this.lockedControls.push(this.btnTexture);
+
+                var onShowBefore = function(menu) {
+                    var mnuTexturePicker = new Common.UI.DataView({
+                        el: $('#id-textart-menu-texture'),
+                        restoreHeight: 174,
+                        parentMenu: menu,
+                        showLast: false,
+                        store: new Common.UI.DataViewStore(me._texturearray || []),
+                        itemTemplate: _.template('<div><img src="<%= imageUrl %>" id="<%= id %>"></div>')
+                    });
+                    mnuTexturePicker.on('item:click', _.bind(me.onSelectTexture, me));
+                    menu.off('show:before', onShowBefore);
+                };
+                this.textureMenu.on('show:before', onShowBefore);
             }
         },
 
@@ -1395,6 +1410,7 @@ define([
         },
 
         fillTextArt: function() {
+            if (this._initSettings) return;
             var me = this;
             if (!this.cmbTextArt) {
                 this.cmbTextArt = new Common.UI.ComboDataView({
@@ -1419,6 +1435,10 @@ define([
             
             var models = this.application.getCollection('Common.Collections.TextArt').models,
                 count = this.cmbTextArt.menuPicker.store.length;
+            if (models.length<1) {
+                PE.getController('Main').fillTextArt(this.api.asc_getTextArtPreviews());
+                return;
+            }
             if (count>0 && count==models.length) {
                 var data = this.cmbTextArt.menuPicker.store.models;
                 _.each(models, function(template, index){
@@ -1475,6 +1495,7 @@ define([
         },
 
         UpdateThemeColors: function() {
+            if (this._initSettings) return;
             if (!this.btnBackColor) {
                 this.btnBackColor = new Common.UI.ColorButton({
                     style: "width:45px;",

apps/presentationeditor/main/app/view/Toolbar.js

@@ -113,6 +113,7 @@ define([
                 me._state = {
                     hasCollaborativeChanges: undefined
                 };
+                me.binding = {};
 
                 Common.NotificationCenter.on('app:ready', me.onAppReady.bind(this));
                 return this;
@@ -527,12 +528,7 @@ define([
                         iconCls: 'btn-insertchart',
                         caption: me.capInsertChart,
                         lock: [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
-                        menu: new Common.UI.Menu({
+                        menu: true
-                            style: 'width: 435px;',
-                            items: [
-                                {template: _.template('<div id="id-toolbar-menu-insertchart" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>')}
-                            ]
-                        })
                     });
                     me.slideOnlyControls.push(me.btnInsertChart);
 
@@ -1087,6 +1083,91 @@ define([
                     })
                 );
 
+                this.btnInsertChart.setMenu( new Common.UI.Menu({
+                    style: 'width: 435px;',
+                    items: [
+                        {template: _.template('<div id="id-toolbar-menu-insertchart" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>')}
+                    ]
+                }));
+
+                var onShowBefore = function(menu) {
+                    var picker = new Common.UI.DataView({
+                        el: $('#id-toolbar-menu-insertchart'),
+                        parentMenu: menu,
+                        showLast: false,
+                        restoreHeight: 421,
+                        groups: new Common.UI.DataViewGroupStore([
+                            {id: 'menu-chart-group-bar', caption: me.textColumn, headername: me.textCharts},
+                            {id: 'menu-chart-group-line', caption: me.textLine},
+                            {id: 'menu-chart-group-pie', caption: me.textPie},
+                            {id: 'menu-chart-group-hbar', caption: me.textBar},
+                            {id: 'menu-chart-group-area', caption: me.textArea, inline: true},
+                            {id: 'menu-chart-group-scatter', caption: me.textPoint, inline: true},
+                            {id: 'menu-chart-group-stock', caption: me.textStock, inline: true}
+                            // {id: 'menu-chart-group-surface', caption: me.textSurface}
+                        ]),
+                        store: new Common.UI.DataViewStore([
+                            { group: 'menu-chart-group-bar',     type: Asc.c_oAscChartTypeSettings.barNormal,          iconCls: 'column-normal'},
+                            { group: 'menu-chart-group-bar',     type: Asc.c_oAscChartTypeSettings.barStacked,         iconCls: 'column-stack'},
+                            { group: 'menu-chart-group-bar',     type: Asc.c_oAscChartTypeSettings.barStackedPer,      iconCls: 'column-pstack'},
+                            { group: 'menu-chart-group-bar',     type: Asc.c_oAscChartTypeSettings.barNormal3d,        iconCls: 'column-3d-normal'},
+                            { group: 'menu-chart-group-bar',     type: Asc.c_oAscChartTypeSettings.barStacked3d,       iconCls: 'column-3d-stack'},
+                            { group: 'menu-chart-group-bar',     type: Asc.c_oAscChartTypeSettings.barStackedPer3d,    iconCls: 'column-3d-pstack'},
+                            { group: 'menu-chart-group-bar',     type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective,    iconCls: 'column-3d-normal-per'},
+                            { group: 'menu-chart-group-line',    type: Asc.c_oAscChartTypeSettings.lineNormal,         iconCls: 'line-normal'},
+                            { group: 'menu-chart-group-line',    type: Asc.c_oAscChartTypeSettings.lineStacked,        iconCls: 'line-stack'},
+                            { group: 'menu-chart-group-line',    type: Asc.c_oAscChartTypeSettings.lineStackedPer,     iconCls: 'line-pstack'},
+                            { group: 'menu-chart-group-line',    type: Asc.c_oAscChartTypeSettings.line3d,             iconCls: 'line-3d'},
+                            { group: 'menu-chart-group-pie',     type: Asc.c_oAscChartTypeSettings.pie,                iconCls: 'pie-normal'},
+                            { group: 'menu-chart-group-pie',     type: Asc.c_oAscChartTypeSettings.doughnut,           iconCls: 'pie-doughnut'},
+                            { group: 'menu-chart-group-pie',     type: Asc.c_oAscChartTypeSettings.pie3d,              iconCls: 'pie-3d-normal'},
+                            { group: 'menu-chart-group-hbar',    type: Asc.c_oAscChartTypeSettings.hBarNormal,         iconCls: 'bar-normal'},
+                            { group: 'menu-chart-group-hbar',    type: Asc.c_oAscChartTypeSettings.hBarStacked,        iconCls: 'bar-stack'},
+                            { group: 'menu-chart-group-hbar',    type: Asc.c_oAscChartTypeSettings.hBarStackedPer,     iconCls: 'bar-pstack'},
+                            { group: 'menu-chart-group-hbar',    type: Asc.c_oAscChartTypeSettings.hBarNormal3d,       iconCls: 'bar-3d-normal'},
+                            { group: 'menu-chart-group-hbar',    type: Asc.c_oAscChartTypeSettings.hBarStacked3d,      iconCls: 'bar-3d-stack'},
+                            { group: 'menu-chart-group-hbar',    type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d,   iconCls: 'bar-3d-pstack'},
+                            { group: 'menu-chart-group-area',    type: Asc.c_oAscChartTypeSettings.areaNormal,         iconCls: 'area-normal'},
+                            { group: 'menu-chart-group-area',    type: Asc.c_oAscChartTypeSettings.areaStacked,        iconCls: 'area-stack'},
+                            { group: 'menu-chart-group-area',    type: Asc.c_oAscChartTypeSettings.areaStackedPer,     iconCls: 'area-pstack'},
+                            { group: 'menu-chart-group-scatter', type: Asc.c_oAscChartTypeSettings.scatter,            iconCls: 'point-normal'},
+                            { group: 'menu-chart-group-stock',   type: Asc.c_oAscChartTypeSettings.stock,              iconCls: 'stock-normal'}
+                            // { group: 'menu-chart-group-surface', type: Asc.c_oAscChartTypeSettings.surfaceNormal,      iconCls: 'surface-normal'},
+                            // { group: 'menu-chart-group-surface', type: Asc.c_oAscChartTypeSettings.surfaceWireframe,   iconCls: 'surface-wireframe'},
+                            // { group: 'menu-chart-group-surface', type: Asc.c_oAscChartTypeSettings.contourNormal,      iconCls: 'contour-normal'},
+                            // { group: 'menu-chart-group-surface', type: Asc.c_oAscChartTypeSettings.contourWireframe,   iconCls: 'contour-wireframe'}
+
+                        ]),
+                        itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
+                    });
+                    picker.on('item:click', function (picker, item, record, e) {
+                        if (record)
+                            me.fireEvent('add:chart', [record.get('type')]);
+                    });
+                    menu.off('show:before', onShowBefore);
+                };
+                this.btnInsertChart.menu.on('show:before', onShowBefore);
+
+                var onShowBeforeTextArt = function (menu) {
+                    var collection = PE.getCollection('Common.Collections.TextArt');
+                    if (collection.length<1)
+                        PE.getController('Main').fillTextArt(me.api.asc_getTextArtPreviews());
+                    var picker = new Common.UI.DataView({
+                        el: $('#view-insert-art', menu.$el),
+                        store: collection,
+                        parentMenu: menu,
+                        showLast: false,
+                        itemTemplate: _.template('<div class="item-art"><img src="<%= imageUrl %>" id="<%= id %>" style="width:50px;height:50px;"></div>')
+                    });
+                    picker.on('item:click', function (picker, item, record, e) {
+                        if (record)
+                            me.fireEvent('insert:textart', [record.get('data')]);
+                        if (e.type !== 'click') menu.hide();
+                    });
+                    menu.off('show:before', onShowBeforeTextArt);
+                };
+                this.btnInsertTextArt.menu.on('show:before', onShowBeforeTextArt);
+
                 // set dataviews
 
                 var _conf = this.mnuMarkersPicker.conf;
@@ -1130,55 +1211,6 @@ define([
                 });
                 _conf && this.mnuNumbersPicker.selectByIndex(_conf.index, true);
 
-                this.mnuInsertChartPicker = new Common.UI.DataView({
-                    el: $('#id-toolbar-menu-insertchart'),
-                    parentMenu: this.btnInsertChart.menu,
-                    showLast: false,
-                    restoreHeight: 421,
-                    groups: new Common.UI.DataViewGroupStore([
-                        { id: 'menu-chart-group-bar',     caption: me.textColumn, headername: me.textCharts },
-                        { id: 'menu-chart-group-line',    caption: me.textLine },
-                        { id: 'menu-chart-group-pie',     caption: me.textPie },
-                        { id: 'menu-chart-group-hbar',    caption: me.textBar },
-                        { id: 'menu-chart-group-area',    caption: me.textArea, inline: true },
-                        { id: 'menu-chart-group-scatter', caption: me.textPoint, inline: true },
-                        { id: 'menu-chart-group-stock',   caption: me.textStock, inline: true }
-                        // { id: 'menu-chart-group-surface', caption: me.textSurface}
-                    ]),
-                    store: new Common.UI.DataViewStore([
-                        { group: 'menu-chart-group-bar',     type: Asc.c_oAscChartTypeSettings.barNormal,          allowSelected: true, iconCls: 'column-normal', selected: true},
-                        { group: 'menu-chart-group-bar',     type: Asc.c_oAscChartTypeSettings.barStacked,         allowSelected: true, iconCls: 'column-stack'},
-                        { group: 'menu-chart-group-bar',     type: Asc.c_oAscChartTypeSettings.barStackedPer,      allowSelected: true, iconCls: 'column-pstack'},
-                        { group: 'menu-chart-group-bar',     type: Asc.c_oAscChartTypeSettings.barNormal3d,        allowSelected: true, iconCls: 'column-3d-normal'},
-                        { group: 'menu-chart-group-bar',     type: Asc.c_oAscChartTypeSettings.barStacked3d,       allowSelected: true, iconCls: 'column-3d-stack'},
-                        { group: 'menu-chart-group-bar',     type: Asc.c_oAscChartTypeSettings.barStackedPer3d,    allowSelected: true, iconCls: 'column-3d-pstack'},
-                        { group: 'menu-chart-group-bar',     type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective,    allowSelected: true, iconCls: 'column-3d-normal-per'},
-                        { group: 'menu-chart-group-line',    type: Asc.c_oAscChartTypeSettings.lineNormal,         allowSelected: true, iconCls: 'line-normal'},
-                        { group: 'menu-chart-group-line',    type: Asc.c_oAscChartTypeSettings.lineStacked,        allowSelected: true, iconCls: 'line-stack'},
-                        { group: 'menu-chart-group-line',    type: Asc.c_oAscChartTypeSettings.lineStackedPer,     allowSelected: true, iconCls: 'line-pstack'},
-                        { group: 'menu-chart-group-line',    type: Asc.c_oAscChartTypeSettings.line3d,             allowSelected: true, iconCls: 'line-3d'},
-                        { group: 'menu-chart-group-pie',     type: Asc.c_oAscChartTypeSettings.pie,                allowSelected: true, iconCls: 'pie-normal'},
-                        { group: 'menu-chart-group-pie',     type: Asc.c_oAscChartTypeSettings.doughnut,           allowSelected: true, iconCls: 'pie-doughnut'},
-                        { group: 'menu-chart-group-pie',     type: Asc.c_oAscChartTypeSettings.pie3d,              allowSelected: true, iconCls: 'pie-3d-normal'},
-                        { group: 'menu-chart-group-hbar',    type: Asc.c_oAscChartTypeSettings.hBarNormal,         allowSelected: true, iconCls: 'bar-normal'},
-                        { group: 'menu-chart-group-hbar',    type: Asc.c_oAscChartTypeSettings.hBarStacked,        allowSelected: true, iconCls: 'bar-stack'},
-                        { group: 'menu-chart-group-hbar',    type: Asc.c_oAscChartTypeSettings.hBarStackedPer,     allowSelected: true, iconCls: 'bar-pstack'},
-                        { group: 'menu-chart-group-hbar',    type: Asc.c_oAscChartTypeSettings.hBarNormal3d,       allowSelected: true, iconCls: 'bar-3d-normal'},
-                        { group: 'menu-chart-group-hbar',    type: Asc.c_oAscChartTypeSettings.hBarStacked3d,      allowSelected: true, iconCls: 'bar-3d-stack'},
-                        { group: 'menu-chart-group-hbar',    type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d,   allowSelected: true, iconCls: 'bar-3d-pstack'},
-                        { group: 'menu-chart-group-area',    type: Asc.c_oAscChartTypeSettings.areaNormal,         allowSelected: true, iconCls: 'area-normal'},
-                        { group: 'menu-chart-group-area',    type: Asc.c_oAscChartTypeSettings.areaStacked,        allowSelected: true, iconCls: 'area-stack'},
-                        { group: 'menu-chart-group-area',    type: Asc.c_oAscChartTypeSettings.areaStackedPer,     allowSelected: true, iconCls: 'area-pstack'},
-                        { group: 'menu-chart-group-scatter', type: Asc.c_oAscChartTypeSettings.scatter,            allowSelected: true, iconCls: 'point-normal'},
-                        { group: 'menu-chart-group-stock',   type: Asc.c_oAscChartTypeSettings.stock,              allowSelected: true, iconCls: 'stock-normal'}
-                        // { group: 'menu-chart-group-surface', type: Asc.c_oAscChartTypeSettings.surfaceNormal,      allowSelected: true, iconCls: 'surface-normal'},
-                        // { group: 'menu-chart-group-surface', type: Asc.c_oAscChartTypeSettings.surfaceWireframe,   allowSelected: true, iconCls: 'surface-wireframe'},
-                        // { group: 'menu-chart-group-surface', type: Asc.c_oAscChartTypeSettings.contourNormal,      allowSelected: true, iconCls: 'contour-normal'},
-                        // { group: 'menu-chart-group-surface', type: Asc.c_oAscChartTypeSettings.contourWireframe,   allowSelected: true, iconCls: 'contour-wireframe'}
-                    ]),
-                    itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
-                });
-
                 this.mnuTablePicker = new Common.UI.DimensionPicker({
                     el: $('#id-toolbar-menu-tablepicker'),
                     minRows: 8,
@@ -1187,46 +1219,6 @@ define([
                     maxColumns: 10
                 });
 
-                var createDataPicker = function (btn) {
-                    me.mnuChangeSlidePicker = new Common.UI.DataView({
-                        el: $('#id-toolbar-menu-changeslide'),
-                        parentMenu: me.btnChangeSlide.menu,
-                        restoreHeight: 300,
-                        restoreWidth: 302,
-                        style: 'max-height: 300px;',
-                        store: PE.getCollection('SlideLayouts'),
-                        itemTemplate: _.template([
-                            '<div class="layout" id="<%= id %>" style="width: <%= itemWidth %>px;">',
-                            '<div style="background-image: url(<%= imageUrl %>); width: <%= itemWidth %>px; height: <%= itemHeight %>px;"/>',
-                            '<div class="title"><%= title %></div> ',
-                            '</div>'
-                        ].join(''))
-                    });
-                    if (me.btnChangeSlide.menu) {
-                        me.btnChangeSlide.menu.on('show:after', function () {
-                            me.onSlidePickerShowAfter(me.mnuChangeSlidePicker);
-                            me.mnuChangeSlidePicker.scroller.update({alwaysVisibleY: true});
-
-                            var record = me.mnuChangeSlidePicker.store.findLayoutByIndex(me.mnuChangeSlidePicker.options.layout_index);
-                            if (record) {
-                                me.mnuChangeSlidePicker.selectRecord(record, true);
-                                me.mnuChangeSlidePicker.scrollToRecord(record);
-                            }
-                        });
-                    }
-                    me.mnuChangeSlidePicker._needRecalcSlideLayout = true;
-                };
-                // btnChangeSlide isn't in compact toolbar mode -> may be rendered after createDelayedElements
-                if (this.btnChangeSlide.rendered)
-                    createDataPicker(this.btnChangeSlide);
-                else
-                    this.btnChangeSlide.on('render:after', createDataPicker);
-
-                this.listenTo(PE.getCollection('SlideLayouts'), 'reset', function () {
-                    if (me.mnuChangeSlidePicker)
-                        me.mnuChangeSlidePicker._needRecalcSlideLayout = true;
-                });
-
                 /** coauthoring begin **/
                 this.showSynchTip = !Common.localStorage.getBool('pe-hide-synch');
 
@@ -1420,7 +1412,6 @@ define([
 
             onSlidePickerShowAfter: function (picker) {
                 if (!picker._needRecalcSlideLayout) return;
-
                 if (picker.cmpEl && picker.dataViewItems.length > 0) {
                     var dataViewItems = picker.dataViewItems,
                         el = $(dataViewItems[0].el),
@@ -1449,79 +1440,52 @@ define([
                 }
             },
 
-            updateTextartMenu: function (collection) {
+            updateAutoshapeMenu: function (menuShape, collection) {
                 var me = this;
-
+                var onShowAfter = function(menu) {
-                var btn = me.btnInsertTextArt;
+                    for (var i = 0; i < collection.length; i++) {
-                if ( btn.textartPicker ) {
+                        var shapePicker = new Common.UI.DataViewSimple({
-                    if ( btn.textartPicker.store.size() == collection.size() ) {
+                            el: $('.shapegroup-' + i, menu.items[i].$el),
-                        btn.textartPicker.store.each(function (model, index) {
+                            store: collection.at(i).get('groupStore'),
-                            model.set('imageUrl', collection.at(index).get('imageUrl'));
+                            parentMenu: menu.items[i].menu,
-                        });
-                    } else {
-                        btn.textartPicker.store.reset( collection.models );
-                    }
-                } else {
-                    btn.textartPicker = new Common.UI.DataView({
-                        el: $('#view-insert-art', btn.menu.$el),
-                        store: collection,
-                        parentMenu: btn.menu,
-                        showLast: false,
-                        itemTemplate: _.template('<div class="item-art"><img src="<%= imageUrl %>" id="<%= id %>" style="width:50px;height:50px;"></div>')
-                    });
-
-                    btn.textartPicker.on('item:click', function(picker, item, record, e) {
-                        if (record)
-                            me.fireEvent('insert:textart', [record.get('data')]);
-
-                        if (e.type !== 'click') btn.menu.hide();
-                    });
-                }
-            },
-
-            updateAutoshapeMenu: function (collection) {
-                var me = this;
-                for (var i = 0; i < collection.size(); i++) {
-                    var group = collection.at(i);
-
-                    me.btnsInsertShape.forEach(function (btn, index) {
-                        var menuitem = new Common.UI.MenuItem({
-                            caption: group.get('groupName'),
-                            menu: new Common.UI.Menu({
-                                menuAlign: 'tl-tr',
-                                items: [
-                                    { template: _.template('<div class="shapegroup-' + i + '" class="menu-shape" style="width: ' + (group.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>') }
-                                ]
-                            })
-                        });
-
-                        btn.menu.addItem(menuitem);
-
-                        (new Common.UI.DataView({
-                            el: $('.shapegroup-' + i, menuitem.$el),
-                            store: group.get('groupStore'),
-                            parentMenu: menuitem.menu,
-                            showLast: false,
                             itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>')
-                        })).on('item:click', function (picker, item, record, e) {
+                        });
+                        shapePicker.on('item:click', function(picker, item, record, e) {
                             if (e.type !== 'click') Common.UI.Menu.Manager.hideAll();
                             if (record)
                                 me.fireEvent('insert:shape', [record.get('data').shapeType]);
                         });
+                    }
+                    menu.off('show:after', onShowAfter);
+                };
+                menuShape.on('show:after', onShowAfter);
+
+                for (var i = 0; i < collection.size(); i++) {
+                    var group = collection.at(i);
+
+                    var menuitem = new Common.UI.MenuItem({
+                        caption: group.get('groupName'),
+                        menu: new Common.UI.Menu({
+                            menuAlign: 'tl-tr',
+                            items: [
+                                {template: _.template('<div class="shapegroup-' + i + '" class="menu-shape" style="width: ' + (group.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>')}
+                            ]
+                        })
                     });
+                    menuShape.addItem(menuitem);
                 }
             },
 
             updateAddSlideMenu: function(collection) {
                 if (collection.size()<1) return;
-
                 var me = this;
-                me.btnsAddSlide.forEach(function (btn, index) {
+                if (!me.binding.onShowBeforeAddSlide) {
-                    if ( !btn.mnuAddSlidePicker ) {
+                    me.binding.onShowBeforeAddSlide = function(menu) {
-                        btn.mnuAddSlidePicker = new Common.UI.DataView({
+                        var change = (this.iconCls == 'btn-changeslide');
-                            el: $('#id-toolbar-menu-addslide-' + index),
+                        var picker = new Common.UI.DataView({
-                            parentMenu: btn.menu,
+                            el: $('.menu-layouts', menu.$el),
-                            showLast: false,
+                            parentMenu: menu,
+                            showLast: change,
                             restoreHeight: 300,
                             restoreWidth: 302,
                             style: 'max-height: 300px;',
@@ -1533,21 +1497,38 @@ define([
                                 '</div>'
                             ].join(''))
                         });
-                        btn.mnuAddSlidePicker.on('item:click', function (picker, item, record, e) {
+                        picker.on('item:click', function (picker, item, record, e) {
                             if (e.type !== 'click') Common.UI.Menu.Manager.hideAll();
                             if (record)
-                                me.fireEvent('add:slide', [record.get('data').idx]);
+                                me.fireEvent(change ? 'change:slide' : 'add:slide', [record.get('data').idx]);
                         });
-                        if (btn.menu) {
+                        if (menu) {
-                            btn.menu.on('show:after', function () {
+                            menu.on('show:after', function () {
-                                me.onSlidePickerShowAfter(btn.mnuAddSlidePicker);
+                                me.onSlidePickerShowAfter(picker);
-                                btn.mnuAddSlidePicker.scroller.update({alwaysVisibleY: true});
+                                picker.scroller.update({alwaysVisibleY: true});
-                                btn.mnuAddSlidePicker.scroller.scrollTop(0);
+                                if (change) {
+                                    var record = picker.store.findLayoutByIndex(picker.options.layout_index);
+                                    if (record) {
+                                        picker.selectRecord(record, true);
+                                        picker.scrollToRecord(record);
+                                    }
+                                } else
+                                    picker.scroller.scrollTop(0);
                             });
                         }
-                    }
+                        menu.off('show:before', me.binding.onShowBeforeAddSlide);
-                    btn.mnuAddSlidePicker._needRecalcSlideLayout = true;
+                        if (change && this.mnuSlidePicker)
-                });
+                            picker.options.layout_index = this.mnuSlidePicker.options.layout_index;
+                        this.mnuSlidePicker = picker;
+                    };
+                    me.btnsAddSlide.concat(me.btnChangeSlide).forEach(function (btn, index) {
+                        btn.menu.on('show:before', me.binding.onShowBeforeAddSlide, btn);
+                    });
+                } else {
+                    me.btnsAddSlide.concat(me.btnChangeSlide).forEach(function (btn, index) {
+                        btn.mnuSlidePicker && (btn.mnuSlidePicker._needRecalcSlideLayout = true);
+                    });
+                }
             },
 
             textBold: 'Bold',

apps/presentationeditor/main/index.html

@@ -21,157 +21,120 @@
             z-index: 1001;
         }
 
-        .loader-page {
+        .loadmask > .brendpanel {
             width: 100%;
-            height: 170px;
+            height: 56px;
-            bottom: 42%;
+            background: #aa5252;
-            position: absolute;
-            text-align: center;
-            line-height: 10px;
         }
 
-        .loader-logo {
+        .loadmask > .brendpanel > div {
-            max-height: 160px;
+            display: flex;
-            margin-bottom: 10px;
+            align-items: center;
         }
 
-        .loader-page-romb {
+        .loadmask > .brendpanel .loading-logo {
-            width: 40px;
+            padding: 0 24px 0 12px;
+            max-width: 200px;
+            height: 20px;
+        }
+
+        .loadmask > .brendpanel .loading-logo > img {
             display: inline-block;
+            max-width: 100px;
+            max-height: 20px;
+            opacity: 0;
         }
 
-        .loader-page-text {
+        .loadmask > .brendpanel .spacer {
+            margin-left: auto;
+        }
+
+        .loadmask > .brendpanel .circle {
+            vertical-align: middle;
+            width: 20px;
+            height: 20px;
+            border-radius: 12px;
+            margin: 4px 10px;
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .loadmask > .brendpanel .rect {
+            vertical-align: middle;
+            width: 50px;
+            height: 12px;
+            border-radius: 3px;
+            margin: 0 10px;
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .loadmask > .placeholder {
+            display: flex;
+            flex-direction: column;
+            min-height: 100%;
+            margin: 0 100px;
+        }
+
+        .loadmask > .placeholder .slide-h {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            flex-grow: 1;
+            max-width: 1350px;
             width: 100%;
-            bottom: 42%;
+            margin: 0 auto 56px;
+        }
+        .loadmask > .placeholder .slide-v {
+            display: flex;
+            position: relative;
+            flex-direction: column;
+            padding-bottom: 56.1333%;
+        }
+
+        .loadmask > .placeholder .slide-container {
             position: absolute;
-            text-align: center;
+            height: 100%;
-            color: #888;
+            width: 100%;
-            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            background: #fbfbfb;
-            line-height: 20px;
+            border: 1px solid #dfdfdf;
+            display: grid;
+
+            -webkit-animation: flickerAnimation 2s infinite ease-in-out;
+            -moz-animation: flickerAnimation 2s infinite ease-in-out;
+            -o-animation: flickerAnimation 2s infinite ease-in-out;
+            animation: flickerAnimation 2s infinite ease-in-out;
         }
 
-        .loader-page-text-loading {
+        .loadmask > .placeholder .slide-container > .line {
-            font-size: 14px;
+            height: 30%;
-        }
+            margin: auto 120px;
-
-        .loader-page-text-customer {
-            font-size: 16px;
-            margin-bottom: 5px;
-        }
-
-        .romb {
-            width: 40px;
-            height: 40px;
-            -webkit-transform: rotate(135deg) skew(20deg, 20deg);
-            -moz-transform: rotate(135deg) skew(20deg, 20deg);
-            -ms-transform: rotate(135deg) skew(20deg, 20deg);
-            -o-transform: rotate(135deg) skew(20deg, 20deg);
-            position: absolute;
-            background: red;
             border-radius: 6px;
-            -webkit-animation: movedown 3s infinite ease;
+            background: #f5f5f5;
-            -moz-animation: movedown 3s infinite ease;
-            -ms-animation: movedown 3s infinite ease;
-            -o-animation: movedown 3s infinite ease;
-            animation: movedown 3s infinite ease;
         }
 
-        #blue {
+        .loadmask > .placeholder .slide-container > .line:nth-child(1) {
-            z-index: 3;
+            height: 40%;
-            background: #55bce6;
+            margin: auto 80px;
-            -webkit-animation-name: blue;
-            -moz-animation-name: blue;
-            -ms-animation-name: blue;
-            -o-animation-name: blue;
-            animation-name: blue;
         }
 
-        #red {
+        @keyframes flickerAnimation {
-            z-index:1;
+            0%   { opacity:1; }
-            background: #de7a59;
+            50%  { opacity:0.3; }
-            -webkit-animation-name: red;
+            100% { opacity:1; }
-            -moz-animation-name: red;
-            -ms-animation-name: red;
-            -o-animation-name: red;
-            animation-name: red;
         }
-
+        @-o-keyframes flickerAnimation{
-        #green {
+            0%   { opacity:1; }
-            z-index: 2;
+            50%  { opacity:0.3; }
-            background: #a1cb5c;
+            100% { opacity:1; }
-            -webkit-animation-name: green;
-            -moz-animation-name: green;
-            -ms-animation-name: green;
-            -o-animation-name: green;
-            animation-name: green;
         }
-
+        @-moz-keyframes flickerAnimation{
-        @-webkit-keyframes red {
+            0%   { opacity:1; }
-              0%    { top:120px; background: #de7a59; }
+            50%  { opacity:0.3; }
-             10%    { top:120px; background: #F2CBBF; }
+            100% { opacity:1; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0;}
-             20%    { background: #E6E4E4; }
-             30%    { background: #D2D2D2; }
-             40%    { top:120px; }
-            100%    { top:120px; background: #de7a59; }
         }
-
+        @-webkit-keyframes flickerAnimation{
-        @keyframes red {
+            0%   { opacity:1; }
-              0%    { top:120px; background: #de7a59; }
+            50%  { opacity:0.3; }
-             10%    { top:120px; background: #F2CBBF; }
+            100% { opacity:1; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0; }
-             20%    { background: #E6E4E4; }
-             30%    { background: #D2D2D2; }
-             40%    { top:120px; }
-            100%    { top:120px; background: #de7a59; }
-        }
-
-        @-webkit-keyframes green {
-              0%    { top:110px; background: #a1cb5c; opacity:1; }
-             10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #EFEFEF; top:0; opacity:1; }
-             30%    { background:#E6E4E4; }
-             70%    { top:110px; }
-            100%    { top:110px; background: #a1cb5c; }
-        }
-
-        @keyframes green {
-              0%    { top:110px; background: #a1cb5c; opacity:1; }
-             10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #EFEFEF; top:0; opacity:1; }
-             30%    { background:#E6E4E4; }
-             70%    { top:110px; }
-            100%    { top:110px; background: #a1cb5c; }
-        }
-
-        @-webkit-keyframes blue {
-              0%    { top:100px; background: #55bce6; opacity:1; }
-             10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #f4f4f4; top:0; opacity:0; }
-             45%    { background: #EFEFEF; top:0; opacity:0.2; }
-            100%    { top:100px; background: #55bce6; }
-        }
-
-        @keyframes blue {
-              0%    { top:100px; background: #55bce6; opacity:1; }
-             10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #f4f4f4; top:0; opacity:0; }
-             45%    { background: #EFEFEF; top:0; opacity:0.2; }
-            100%    { top:100px; background: #55bce6; }
         }
     </style>
 
@@ -219,49 +182,9 @@
 
         var params = getUrlParams(),
             lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
-            customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+            logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null;
-            margin = (customer !== '') ? 50 : 20,
-            loading = 'Loading...',
-            logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
 
         window.frameEditorId = params["frameEditorId"];
-
-        if ( lang == 'de')      loading = 'Ladevorgang...';
-        else if ( lang == 'es') loading = 'Cargando...';
-        else if ( lang == 'fr') loading = 'Chargement en cours...';
-        else if ( lang == 'it') loading = 'Caricamento in corso...';
-        else if ( lang == 'pt') loading = 'Carregando...';
-        else if ( lang == 'ru') loading = 'Загрузка...';
-        else if ( lang == 'sl') loading = 'Nalaganje...';
-        else if ( lang == 'tr') loading = 'Yükleniyor...';
-        else if ( lang == 'bg') loading = 'Зареждане...';
-        else if ( lang == 'cs') loading = 'Nahrávám...';
-        else if ( lang == 'hu') loading = 'Betöltés...';
-        else if ( lang == 'ja') loading = '読み込み中...';
-        else if ( lang == 'ko') loading = '로드 중...';
-        else if ( lang == 'lv') loading = 'Ieladēšana ...';
-        else if ( lang == 'nl') loading = 'Laden...';
-        else if ( lang == 'pl') loading = 'Ładowanie...';
-        else if ( lang == 'sk') loading = 'Nahrávam...';
-        else if ( lang == 'uk') loading = 'Завантаження...';
-        else if ( lang == 'vi') loading = 'Đang tải...';
-        else if ( lang == 'zh') loading = '加载中...';
-
-        if ( !stopLoading )
-            document.write(
-                '<div id="loading-mask" class="loadmask">' +
-                    '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
-                        ((logo!==null) ? logo :
-                        '<div class="loader-page-romb">' +
-                            '<div class="romb" id="blue"></div>' +
-                            '<div class="romb" id="green"></div>' +
-                            '<div class="romb" id="red"></div>' +
-                        '</div>') +
-                    '</div>' +
-                    '<div class="loader-page-text">' +  customer +
-                        '<div class="loader-page-text-loading">' + loading + '</div>' +
-                    '</div>' +
-                '</div>');
     </script>
 
     <!-- debug begin -->
@@ -269,8 +192,21 @@
     <!-- debug end -->
 </head>
 <body>
+    <div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo.png"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div></div><div class="placeholder"><div class="slide-h"><div class="slide-v"><div class="slide-container"><div class="line"></div><div class="line"></div></div></div></div></div></div>
     <div id="viewport"></div>
 
+    <script>
+        if (stopLoading) {
+            document.body.removeChild(document.getElementById('loading-mask'));
+        } else {
+            var elem = document.querySelector('.loading-logo img');
+            if (elem) {
+                logo && (elem.setAttribute('src', logo));
+                elem.style.opacity = 1;
+            }
+        }
+    </script>
+
     <script src="../../../vendor/svg-injector/svg-injector.min.js"></script>
     <img class="inline-svg" src="../../common/main/resources/img/header/buttons.svg">
     <img class="inline-svg" src="../../common/main/resources/img/doc-formats/pptx.svg">
@@ -294,7 +230,7 @@
     </script>
 
     <!-- debug begin -->
-    <script type="text/javascript">var less=less||{};less.env='development';</script>
+    <script type="text/javascript">var less=less||{};less.env='development';less.async=true;</script>
     <script src="../../../vendor/less/dist/less-2.7.1.js" type="text/javascript"></script>
     <!-- debug end -->
 

apps/presentationeditor/main/index.html.deploy

@@ -23,157 +23,120 @@
             z-index: 1001;
         }
 
-        .loader-page {
+        .loadmask > .brendpanel {
             width: 100%;
-            height: 170px;
+            height: 56px;
-            bottom: 42%;
+            background: #aa5252;
-            position: absolute;
-            text-align: center;
-            line-height: 10px;
         }
 
-        .loader-logo {
+        .loadmask > .brendpanel > div {
-            max-height: 160px;
+            display: flex;
-            margin-bottom: 10px;
+            align-items: center;
         }
 
-        .loader-page-romb {
+        .loadmask > .brendpanel .loading-logo {
-            width: 40px;
+            padding: 0 24px 0 12px;
+            max-width: 200px;
+            height: 20px;
+        }
+
+        .loadmask > .brendpanel .loading-logo > img {
             display: inline-block;
+            max-width: 100px;
+            max-height: 20px;
+            opacity: 0;
         }
 
-        .loader-page-text {
+        .loadmask > .brendpanel .spacer {
+            margin-left: auto;
+        }
+
+        .loadmask > .brendpanel .circle {
+            vertical-align: middle;
+            width: 20px;
+            height: 20px;
+            border-radius: 12px;
+            margin: 4px 10px;
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .loadmask > .brendpanel .rect {
+            vertical-align: middle;
+            width: 50px;
+            height: 12px;
+            border-radius: 3px;
+            margin: 0 10px;
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .loadmask > .placeholder {
+            display: flex;
+            flex-direction: column;
+            min-height: 100%;
+            margin: 0 100px;
+        }
+
+        .loadmask > .placeholder .slide-h {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            flex-grow: 1;
+            max-width: 1350px;
             width: 100%;
-            bottom: 42%;
+            margin: 0 auto 56px;
+        }
+        .loadmask > .placeholder .slide-v {
+            display: flex;
+            position: relative;
+            flex-direction: column;
+            padding-bottom: 56.1333%;
+        }
+
+        .loadmask > .placeholder .slide-container {
             position: absolute;
-            text-align: center;
+            height: 100%;
-            color: #888;
+            width: 100%;
-            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            background: #fbfbfb;
-            line-height: 20px;
+            border: 1px solid #dfdfdf;
+            display: grid;
+
+            -webkit-animation: flickerAnimation 2s infinite ease-in-out;
+            -moz-animation: flickerAnimation 2s infinite ease-in-out;
+            -o-animation: flickerAnimation 2s infinite ease-in-out;
+            animation: flickerAnimation 2s infinite ease-in-out;
         }
 
-        .loader-page-text-loading {
+        .loadmask > .placeholder .slide-container > .line {
-            font-size: 14px;
+            height: 30%;
-        }
+            margin: auto 120px;
-
-        .loader-page-text-customer {
-            font-size: 16px;
-            margin-bottom: 5px;
-        }
-
-        .romb {
-            width: 40px;
-            height: 40px;
-            -webkit-transform: rotate(135deg) skew(20deg, 20deg);
-            -moz-transform: rotate(135deg) skew(20deg, 20deg);
-            -ms-transform: rotate(135deg) skew(20deg, 20deg);
-            -o-transform: rotate(135deg) skew(20deg, 20deg);
-            position: absolute;
-            background: red;
             border-radius: 6px;
-            -webkit-animation: movedown 3s infinite ease;
+            background: #f5f5f5;
-            -moz-animation: movedown 3s infinite ease;
-            -ms-animation: movedown 3s infinite ease;
-            -o-animation: movedown 3s infinite ease;
-            animation: movedown 3s infinite ease;
         }
 
-        #blue {
+        .loadmask > .placeholder .slide-container > .line:nth-child(1) {
-            z-index: 3;
+            height: 40%;
-            background: #55bce6;
+            margin: auto 80px;
-            -webkit-animation-name: blue;
-            -moz-animation-name: blue;
-            -ms-animation-name: blue;
-            -o-animation-name: blue;
-            animation-name: blue;
         }
 
-        #red {
+        @keyframes flickerAnimation {
-            z-index:1;
+            0%   { opacity:1; }
-            background: #de7a59;
+            50%  { opacity:0.3; }
-            -webkit-animation-name: red;
+            100% { opacity:1; }
-            -moz-animation-name: red;
-            -ms-animation-name: red;
-            -o-animation-name: red;
-            animation-name: red;
         }
-
+        @-o-keyframes flickerAnimation{
-        #green {
+            0%   { opacity:1; }
-            z-index: 2;
+            50%  { opacity:0.3; }
-            background: #a1cb5c;
+            100% { opacity:1; }
-            -webkit-animation-name: green;
-            -moz-animation-name: green;
-            -ms-animation-name: green;
-            -o-animation-name: green;
-            animation-name: green;
         }
-
+        @-moz-keyframes flickerAnimation{
-        @-webkit-keyframes red {
+            0%   { opacity:1; }
-              0%    { top:120px; background: #de7a59; }
+            50%  { opacity:0.3; }
-             10%    { top:120px; background: #F2CBBF; }
+            100% { opacity:1; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0;}
-             20%    { background: #E6E4E4; }
-             30%    { background: #D2D2D2; }
-             40%    { top:120px; }
-            100%    { top:120px; background: #de7a59; }
         }
-
+        @-webkit-keyframes flickerAnimation{
-        @keyframes red {
+            0%   { opacity:1; }
-              0%    { top:120px; background: #de7a59; }
+            50%  { opacity:0.3; }
-             10%    { top:120px; background: #F2CBBF; }
+            100% { opacity:1; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0; }
-             20%    { background: #E6E4E4; }
-             30%    { background: #D2D2D2; }
-             40%    { top:120px; }
-            100%    { top:120px; background: #de7a59; }
-        }
-
-        @-webkit-keyframes green {
-              0%    { top:110px; background: #a1cb5c; opacity:1; }
-             10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #EFEFEF; top:0; opacity:1; }
-             30%    { background:#E6E4E4; }
-             70%    { top:110px; }
-            100%    { top:110px; background: #a1cb5c; }
-        }
-
-        @keyframes green {
-              0%    { top:110px; background: #a1cb5c; opacity:1; }
-             10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #EFEFEF; top:0; opacity:1; }
-             30%    { background:#E6E4E4; }
-             70%    { top:110px; }
-            100%    { top:110px; background: #a1cb5c; }
-        }
-
-        @-webkit-keyframes blue {
-              0%    { top:100px; background: #55bce6; opacity:1; }
-             10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #f4f4f4; top:0; opacity:0; }
-             45%    { background: #EFEFEF; top:0; opacity:0.2; }
-            100%    { top:100px; background: #55bce6; }
-        }
-
-        @keyframes blue {
-              0%    { top:100px; background: #55bce6; opacity:1; }
-             10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #f4f4f4; top:0; opacity:0; }
-             45%    { background: #EFEFEF; top:0; opacity:0.2; }
-            100%    { top:100px; background: #55bce6; }
         }
     </style>
 
@@ -227,54 +190,28 @@
 
         var params = getUrlParams(),
             lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
-            customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+            logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null;
-            margin = (customer !== '') ? 50 : 20,
-            loading = 'Loading...',
-            logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
 
         window.frameEditorId = params["frameEditorId"];
-
-        if ( lang == 'de')      loading = 'Ladevorgang...';
-        else if ( lang == 'es') loading = 'Cargando...';
-        else if ( lang == 'fr') loading = 'Chargement en cours...';
-        else if ( lang == 'it') loading = 'Caricamento in corso...';
-        else if ( lang == 'pt') loading = 'Carregando...';
-        else if ( lang == 'ru') loading = 'Загрузка...';
-        else if ( lang == 'sl') loading = 'Nalaganje...';
-        else if ( lang == 'tr') loading = 'Yükleniyor...';
-        else if ( lang == 'bg') loading = 'Зареждане...';
-        else if ( lang == 'cs') loading = 'Nahrávám...';
-        else if ( lang == 'hu') loading = 'Betöltés...';
-        else if ( lang == 'ja') loading = '読み込み中...';
-        else if ( lang == 'ko') loading = '로드 중...';
-        else if ( lang == 'lv') loading = 'Ieladēšana ...';
-        else if ( lang == 'nl') loading = 'Laden...';
-        else if ( lang == 'pl') loading = 'Ładowanie...';
-        else if ( lang == 'sk') loading = 'Nahrávam...';
-        else if ( lang == 'uk') loading = 'Завантаження...';
-        else if ( lang == 'vi') loading = 'Đang tải...';
-        else if ( lang == 'zh') loading = '加载中...';
-
-        if (!stopLoading)
-            document.write(
-                '<div id="loading-mask" class="loadmask">' +
-                        '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
-                            ((logo!==null) ? logo :
-                            '<div class="loader-page-romb">' +
-                                '<div class="romb" id="blue"></div>' +
-                                '<div class="romb" id="green"></div>' +
-                                '<div class="romb" id="red"></div>' +
-                            '</div>') +
-                        '</div>' +
-                        '<div class="loader-page-text">' +  customer +
-                            '<div class="loader-page-text-loading">' + loading + '</div>' +
-                        '</div>' +
-                '</div>');
     </script>
 
     <link rel="stylesheet" type="text/css" href="../../../apps/presentationeditor/main/resources/css/app.css">
 </head>
 <body>
+    <div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo.png"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div></div><div class="placeholder"><div class="slide-h"><div class="slide-v"><div class="slide-container"><div class="line"></div><div class="line"></div></div></div></div></div></div>
+    <div id="viewport"></div>
+
+    <script>
+        if (stopLoading) {
+            document.body.removeChild(document.getElementById('loading-mask'));
+        } else {
+            var elem = document.querySelector('.loading-logo img');
+            if (elem) {
+                logo && (elem.setAttribute('src', logo));
+                elem.style.opacity = 1;
+            }
+        }
+    </script>
 
     <script>
         window.requireTimeourError = function(){
@@ -312,8 +249,6 @@
     <inline src="resources/img/doc-formats/blank.svg" />
     <inline src="resources/img/toolbar/shapetypes.svg" />
 
-    <div id="viewport"></div>
-
     <script data-main="app" src="../../../vendor/requirejs/require.js"></script>
 
 </body>

apps/presentationeditor/main/index.reporter.html

@@ -20,160 +20,110 @@
             overflow: hidden;
             border: none;
             background-color: #f4f4f4;
-            z-index: 100;
+            z-index: 10000;
         }
 
-        .loader-page {
+        .loadmask > .brendpanel {
             width: 100%;
-            height: 170px;
+            height: 56px;
-            bottom: 42%;
+            background: #aa5252;
-            position: absolute;
-            text-align: center;
-            line-height: 10px;
         }
 
-        .loader-logo {
+        .loadmask > .brendpanel > div {
-            max-height: 160px;
+            display: flex;
-            margin-bottom: 10px;
+            align-items: center;
         }
 
-        .loader-page-romb {
+        .loadmask > .brendpanel .spacer {
-            width: 40px;
+            margin-left: auto;
-            display: inline-block;
         }
 
-        .loader-page-text {
+        .loadmask > .brendpanel .circle {
+            vertical-align: middle;
+            width: 20px;
+            height: 20px;
+            border-radius: 12px;
+            margin: 4px 10px;
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .loadmask > .brendpanel .rect {
+            vertical-align: middle;
+            width: 50px;
+            height: 12px;
+            border-radius: 3px;
+            margin: 0 10px;
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .loadmask > .placeholder {
+            display: flex;
+            flex-direction: column;
+            min-height: 100%;
+            margin: 0 100px;
+        }
+
+        .loadmask > .placeholder .slide-h {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            flex-grow: 1;
+            max-width: 1350px;
             width: 100%;
-            bottom: 42%;
+            margin: 0 auto 56px;
+        }
+        .loadmask > .placeholder .slide-v {
+            display: flex;
+            position: relative;
+            flex-direction: column;
+            padding-bottom: 56.1333%;
+        }
+
+        .loadmask > .placeholder .slide-container {
             position: absolute;
-            text-align: center;
+            height: 100%;
-            color: #888;
+            width: 100%;
-            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            background: #fbfbfb;
-            line-height: 20px;
+            border: 1px solid #dfdfdf;
+            display: grid;
+
+            -webkit-animation: flickerAnimation 2s infinite ease-in-out;
+            -moz-animation: flickerAnimation 2s infinite ease-in-out;
+            -o-animation: flickerAnimation 2s infinite ease-in-out;
+            animation: flickerAnimation 2s infinite ease-in-out;
         }
 
-        .loader-page-text-loading {
+        .loadmask > .placeholder .slide-container > .line {
-            font-size: 14px;
+            height: 30%;
-        }
+            margin: auto 120px;
-
-        .loader-page-text-customer {
-            font-size: 16px;
-            margin-bottom: 5px;
-        }
-
-        .romb {
-            width: 40px;
-            height: 40px;
-            -webkit-transform: rotate(135deg) skew(20deg, 20deg);
-            -moz-transform: rotate(135deg) skew(20deg, 20deg);
-            -ms-transform: rotate(135deg) skew(20deg, 20deg);
-            -o-transform: rotate(135deg) skew(20deg, 20deg);
-            position: absolute;
-            background: red;
             border-radius: 6px;
-            -webkit-animation: movedown 3s infinite ease;
+            background: #f5f5f5;
-            -moz-animation: movedown 3s infinite ease;
-            -ms-animation: movedown 3s infinite ease;
-            -o-animation: movedown 3s infinite ease;
-            animation: movedown 3s infinite ease;
         }
 
-        #blue {
+        .loadmask > .placeholder .slide-container > .line:nth-child(1) {
-            z-index: 3;
+            height: 40%;
-            background: #55bce6;
+            margin: auto 80px;
-            -webkit-animation-name: blue;
-            -moz-animation-name: blue;
-            -ms-animation-name: blue;
-            -o-animation-name: blue;
-            animation-name: blue;
         }
 
-        #red {
+        @keyframes flickerAnimation {
-            z-index:1;
+            0%   { opacity:1; }
-            background: #de7a59;
+            50%  { opacity:0.3; }
-            -webkit-animation-name: red;
+            100% { opacity:1; }
-            -moz-animation-name: red;
-            -ms-animation-name: red;
-            -o-animation-name: red;
-            animation-name: red;
         }
-
+        @-o-keyframes flickerAnimation{
-        #green {
+            0%   { opacity:1; }
-            z-index: 2;
+            50%  { opacity:0.3; }
-            background: #a1cb5c;
+            100% { opacity:1; }
-            -webkit-animation-name: green;
-            -moz-animation-name: green;
-            -ms-animation-name: green;
-            -o-animation-name: green;
-            animation-name: green;
         }
-
+        @-moz-keyframes flickerAnimation{
-        @-webkit-keyframes red {
+            0%   { opacity:1; }
-              0%    { top:120px; background: #de7a59; }
+            50%  { opacity:0.3; }
-             10%    { top:120px; background: #F2CBBF; }
+            100% { opacity:1; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0;}
-             20%    { background: #E6E4E4; }
-             30%    { background: #D2D2D2; }
-             40%    { top:120px; }
-            100%    { top:120px; background: #de7a59; }
         }
-
+        @-webkit-keyframes flickerAnimation{
-        @keyframes red {
+            0%   { opacity:1; }
-              0%    { top:120px; background: #de7a59; }
+            50%  { opacity:0.3; }
-             10%    { top:120px; background: #F2CBBF; }
+            100% { opacity:1; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0; }
-             20%    { background: #E6E4E4; }
-             30%    { background: #D2D2D2; }
-             40%    { top:120px; }
-            100%    { top:120px; background: #de7a59; }
-        }
-
-        @-webkit-keyframes green {
-              0%    { top:110px; background: #a1cb5c; opacity:1; }
-             10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #EFEFEF; top:0; opacity:1; }
-             30%    { background:#E6E4E4; }
-             70%    { top:110px; }
-            100%    { top:110px; background: #a1cb5c; }
-        }
-
-        @keyframes green {
-              0%    { top:110px; background: #a1cb5c; opacity:1; }
-             10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #EFEFEF; top:0; opacity:1; }
-             30%    { background:#E6E4E4; }
-             70%    { top:110px; }
-            100%    { top:110px; background: #a1cb5c; }
-        }
-
-        @-webkit-keyframes blue {
-              0%    { top:100px; background: #55bce6; opacity:1; }
-             10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #f4f4f4; top:0; opacity:0; }
-             45%    { background: #EFEFEF; top:0; opacity:0.2; }
-            100%    { top:100px; background: #55bce6; }
-        }
-
-        @keyframes blue {
-              0%    { top:100px; background: #55bce6; opacity:1; }
-             10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #f4f4f4; top:0; opacity:0; }
-             45%    { background: #EFEFEF; top:0; opacity:0.2; }
-            100%    { top:100px; background: #55bce6; }
         }
     </style>
 
@@ -223,53 +173,22 @@
 
         var params = getUrlParams(),
             lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
-            customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+            presenter = 'Presenter View';
-            margin = (customer !== '') ? 50 : 20,
-            loading = 'Loading...',
-            presenter = 'Presenter View',
-            logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
 
         window.frameEditorId = params["frameEditorId"];
 
-
+        if ( lang == 'bg') { presenter = 'Изглед на презентатора';}
-        if ( lang == 'bg') { presenter = 'Изглед на презентатора'; loading = 'Зареждане...';}
+        else if ( lang == 'cs') { presenter = 'Zobrazení přednášejícího';}
-        else if ( lang == 'cs') { presenter = 'Zobrazení přednášejícího'; loading = 'Nahrávám...';}
+        else if ( lang == 'de') { presenter = 'Referentenansicht';}
-        else if ( lang == 'de') { presenter = 'Referentenansicht'; loading = 'Ladevorgang...';}
+        else if ( lang == 'es') { presenter = 'Vista del presentador';}
-        else if ( lang == 'es') { presenter = 'Vista del presentador'; loading = 'Cargando...';}
+        else if ( lang == 'fr') { presenter = 'Mode présentateur';}
-        else if ( lang == 'fr') { presenter = 'Mode présentateur'; loading = 'Chargement en cours...';}
+        else if ( lang == 'it') { presenter = 'Visualizzazione del presenter';}
-        else if ( lang == 'it') { presenter = 'Visualizzazione del presenter'; loading = 'Caricamento in corso...';}
+        else if ( lang == 'pl') { presenter = 'Widok Prezentera';}
-        else if ( lang == 'pl') { presenter = 'Widok Prezentera'; loading = 'Ładowanie...';}
+        else if ( lang == 'pt') { presenter = 'Vista de apresentador';}
-        else if ( lang == 'pt') { presenter = 'Vista de apresentador'; loading = 'Carregando...';}
+        else if ( lang == 'ru') { presenter = 'Режим докладчика';}
-        else if ( lang == 'ru') { presenter = 'Режим докладчика'; loading = 'Загрузка...';}
+        else if ( lang == 'sk') { presenter = 'Režim prezentácie';}
-        else if ( lang == 'sk') { presenter = 'Režim prezentácie'; loading = 'Nahrávam...';}
-        else if ( lang == 'sl') { loading = 'Nalaganje...';}
         else if ( lang == 'zh') { presenter = '演示者视图';}
-        else if ( lang == 'tr') { loading = 'Yükleniyor...';}
-        else if ( lang == 'hu') loading = 'Betöltés...';
-        else if ( lang == 'ja') loading = '読み込み中...';
-        else if ( lang == 'ko') loading = '로드 중...';
-        else if ( lang == 'lv') loading = 'Ieladēšana ...';
-        else if ( lang == 'nl') loading = 'Laden...';
-        else if ( lang == 'uk') loading = 'Завантаження...';
-        else if ( lang == 'vi') loading = 'Đang tải...';
-        else if ( lang == 'zh') loading = '加载中...';
         window.document.title = presenter;
-
-        if (!stopLoading)
-            document.write(
-                '<div id="loading-mask" class="loadmask">' +
-                        '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
-                            ((logo!==null) ? logo :
-                            '<div class="loader-page-romb">' +
-                                '<div class="romb" id="blue"></div>' +
-                                '<div class="romb" id="green"></div>' +
-                                '<div class="romb" id="red"></div>' +
-                            '</div>') +
-                        '</div>' +
-                        '<div class="loader-page-text">' +  customer +
-                            '<div class="loader-page-text-loading">' + loading + '</div>' +
-                        '</div>' +
-                '</div>');
     </script>
 
     <style>
@@ -279,6 +198,14 @@
     </style>
 </head>
 <body>
+    <div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div></div><div class="placeholder"><div class="slide-h"><div class="slide-v"><div class="slide-container"><div class="line"></div><div class="line"></div></div></div></div></div></div>
+
+    <script>
+        if (stopLoading) {
+            document.body.removeChild(document.getElementById('loading-mask'));
+        }
+    </script>
+
     <script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
     <script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
     

apps/presentationeditor/main/index.reporter.html.deploy

@@ -20,160 +20,110 @@
             overflow: hidden;
             border: none;
             background-color: #f4f4f4;
-            z-index: 100;
+            z-index: 10000;
         }
 
-        .loader-page {
+        .loadmask > .brendpanel {
             width: 100%;
-            height: 170px;
+            height: 56px;
-            bottom: 42%;
+            background: #aa5252;
-            position: absolute;
-            text-align: center;
-            line-height: 10px;
         }
 
-        .loader-logo {
+        .loadmask > .brendpanel > div {
-            max-height: 160px;
+            display: flex;
-            margin-bottom: 10px;
+            align-items: center;
         }
 
-        .loader-page-romb {
+        .loadmask > .brendpanel .spacer {
-            width: 40px;
+            margin-left: auto;
-            display: inline-block;
         }
 
-        .loader-page-text {
+        .loadmask > .brendpanel .circle {
+            vertical-align: middle;
+            width: 20px;
+            height: 20px;
+            border-radius: 12px;
+            margin: 4px 10px;
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .loadmask > .brendpanel .rect {
+            vertical-align: middle;
+            width: 50px;
+            height: 12px;
+            border-radius: 3px;
+            margin: 0 10px;
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .loadmask > .placeholder {
+            display: flex;
+            flex-direction: column;
+            min-height: 100%;
+            margin: 0 100px;
+        }
+
+        .loadmask > .placeholder .slide-h {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            flex-grow: 1;
+            max-width: 1350px;
             width: 100%;
-            bottom: 42%;
+            margin: 0 auto 56px;
+        }
+        .loadmask > .placeholder .slide-v {
+            display: flex;
+            position: relative;
+            flex-direction: column;
+            padding-bottom: 56.1333%;
+        }
+
+        .loadmask > .placeholder .slide-container {
             position: absolute;
-            text-align: center;
+            height: 100%;
-            color: #888;
+            width: 100%;
-            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            background: #fbfbfb;
-            line-height: 20px;
+            border: 1px solid #dfdfdf;
+            display: grid;
+
+            -webkit-animation: flickerAnimation 2s infinite ease-in-out;
+            -moz-animation: flickerAnimation 2s infinite ease-in-out;
+            -o-animation: flickerAnimation 2s infinite ease-in-out;
+            animation: flickerAnimation 2s infinite ease-in-out;
         }
 
-        .loader-page-text-loading {
+        .loadmask > .placeholder .slide-container > .line {
-            font-size: 14px;
+            height: 30%;
-        }
+            margin: auto 120px;
-
-        .loader-page-text-customer {
-            font-size: 16px;
-            margin-bottom: 5px;
-        }
-
-        .romb {
-            width: 40px;
-            height: 40px;
-            -webkit-transform: rotate(135deg) skew(20deg, 20deg);
-            -moz-transform: rotate(135deg) skew(20deg, 20deg);
-            -ms-transform: rotate(135deg) skew(20deg, 20deg);
-            -o-transform: rotate(135deg) skew(20deg, 20deg);
-            position: absolute;
-            background: red;
             border-radius: 6px;
-            -webkit-animation: movedown 3s infinite ease;
+            background: #f5f5f5;
-            -moz-animation: movedown 3s infinite ease;
-            -ms-animation: movedown 3s infinite ease;
-            -o-animation: movedown 3s infinite ease;
-            animation: movedown 3s infinite ease;
         }
 
-        #blue {
+        .loadmask > .placeholder .slide-container > .line:nth-child(1) {
-            z-index: 3;
+            height: 40%;
-            background: #55bce6;
+            margin: auto 80px;
-            -webkit-animation-name: blue;
-            -moz-animation-name: blue;
-            -ms-animation-name: blue;
-            -o-animation-name: blue;
-            animation-name: blue;
         }
 
-        #red {
+        @keyframes flickerAnimation {
-            z-index:1;
+            0%   { opacity:1; }
-            background: #de7a59;
+            50%  { opacity:0.3; }
-            -webkit-animation-name: red;
+            100% { opacity:1; }
-            -moz-animation-name: red;
-            -ms-animation-name: red;
-            -o-animation-name: red;
-            animation-name: red;
         }
-
+        @-o-keyframes flickerAnimation{
-        #green {
+            0%   { opacity:1; }
-            z-index: 2;
+            50%  { opacity:0.3; }
-            background: #a1cb5c;
+            100% { opacity:1; }
-            -webkit-animation-name: green;
-            -moz-animation-name: green;
-            -ms-animation-name: green;
-            -o-animation-name: green;
-            animation-name: green;
         }
-
+        @-moz-keyframes flickerAnimation{
-        @-webkit-keyframes red {
+            0%   { opacity:1; }
-              0%    { top:120px; background: #de7a59; }
+            50%  { opacity:0.3; }
-             10%    { top:120px; background: #F2CBBF; }
+            100% { opacity:1; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0;}
-             20%    { background: #E6E4E4; }
-             30%    { background: #D2D2D2; }
-             40%    { top:120px; }
-            100%    { top:120px; background: #de7a59; }
         }
-
+        @-webkit-keyframes flickerAnimation{
-        @keyframes red {
+            0%   { opacity:1; }
-              0%    { top:120px; background: #de7a59; }
+            50%  { opacity:0.3; }
-             10%    { top:120px; background: #F2CBBF; }
+            100% { opacity:1; }
-             14%    { background: #f4f4f4; top:120px; }
-             15%    { background: #f4f4f4; top:0; }
-             20%    { background: #E6E4E4; }
-             30%    { background: #D2D2D2; }
-             40%    { top:120px; }
-            100%    { top:120px; background: #de7a59; }
-        }
-
-        @-webkit-keyframes green {
-              0%    { top:110px; background: #a1cb5c; opacity:1; }
-             10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #EFEFEF; top:0; opacity:1; }
-             30%    { background:#E6E4E4; }
-             70%    { top:110px; }
-            100%    { top:110px; background: #a1cb5c; }
-        }
-
-        @keyframes green {
-              0%    { top:110px; background: #a1cb5c; opacity:1; }
-             10%    { top:110px; background: #CBE0AC; opacity:1; }
-             14%    { background: #f4f4f4; top:110px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #EFEFEF; top:0; opacity:1; }
-             30%    { background:#E6E4E4; }
-             70%    { top:110px; }
-            100%    { top:110px; background: #a1cb5c; }
-        }
-
-        @-webkit-keyframes blue {
-              0%    { top:100px; background: #55bce6; opacity:1; }
-             10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #f4f4f4; top:0; opacity:0; }
-             45%    { background: #EFEFEF; top:0; opacity:0.2; }
-            100%    { top:100px; background: #55bce6; }
-        }
-
-        @keyframes blue {
-              0%    { top:100px; background: #55bce6; opacity:1; }
-             10%    { top:100px; background: #BFE8F8; opacity:1; }
-             14%    { background: #f4f4f4; top:100px; opacity:1; }
-             15%    { background: #f4f4f4; top:0; opacity:1; }
-             20%    { background: #f4f4f4; top:0; opacity:0; }
-             25%    { background: #f4f4f4; top:0; opacity:0; }
-             45%    { background: #EFEFEF; top:0; opacity:0.2; }
-            100%    { top:100px; background: #55bce6; }
         }
     </style>
 
@@ -219,52 +169,22 @@
 
         var params = getUrlParams(),
             lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
-            customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+            presenter = 'Presenter View';
-            margin = (customer !== '') ? 50 : 20,
-            loading = 'Loading...',
-            presenter = 'Presenter View',
-            logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
 
         window.frameEditorId = params["frameEditorId"];
 
-        if ( lang == 'bg') { presenter = 'Изглед на презентатора'; loading = 'Зареждане...';}
+        if ( lang == 'bg') { presenter = 'Изглед на презентатора';}
-        else if ( lang == 'cs') { presenter = 'Zobrazení přednášejícího'; loading = 'Nahrávám...';}
+        else if ( lang == 'cs') { presenter = 'Zobrazení přednášejícího';}
-        else if ( lang == 'de') { presenter = 'Referentenansicht'; loading = 'Ladevorgang...';}
+        else if ( lang == 'de') { presenter = 'Referentenansicht';}
-        else if ( lang == 'es') { presenter = 'Vista del presentador'; loading = 'Cargando...';}
+        else if ( lang == 'es') { presenter = 'Vista del presentador';}
-        else if ( lang == 'fr') { presenter = 'Mode présentateur'; loading = 'Chargement en cours...';}
+        else if ( lang == 'fr') { presenter = 'Mode présentateur';}
-        else if ( lang == 'it') { presenter = 'Visualizzazione del presenter'; loading = 'Caricamento in corso...';}
+        else if ( lang == 'it') { presenter = 'Visualizzazione del presenter';}
-        else if ( lang == 'pl') { presenter = 'Widok Prezentera'; loading = 'Ładowanie...';}
+        else if ( lang == 'pl') { presenter = 'Widok Prezentera';}
-        else if ( lang == 'pt') { presenter = 'Vista de apresentador'; loading = 'Carregando...';}
+        else if ( lang == 'pt') { presenter = 'Vista de apresentador';}
-        else if ( lang == 'ru') { presenter = 'Режим докладчика'; loading = 'Загрузка...';}
+        else if ( lang == 'ru') { presenter = 'Режим докладчика';}
-        else if ( lang == 'sk') { presenter = 'Režim prezentácie'; loading = 'Nahrávam...';}
+        else if ( lang == 'sk') { presenter = 'Režim prezentácie';}
-        else if ( lang == 'sl') { loading = 'Nalaganje...';}
         else if ( lang == 'zh') { presenter = '演示者视图';}
-        else if ( lang == 'tr') { loading = 'Yükleniyor...';}
-        else if ( lang == 'hu') loading = 'Betöltés...';
-        else if ( lang == 'ja') loading = '読み込み中...';
-        else if ( lang == 'ko') loading = '로드 중...';
-        else if ( lang == 'lv') loading = 'Ieladēšana ...';
-        else if ( lang == 'nl') loading = 'Laden...';
-        else if ( lang == 'uk') loading = 'Завантаження...';
-        else if ( lang == 'vi') loading = 'Đang tải...';
-        else if ( lang == 'zh') loading = '加载中...';
         window.document.title = presenter;
-
-        if (!stopLoading)
-            document.write(
-                '<div id="loading-mask" class="loadmask">' +
-                        '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
-                            ((logo!==null) ? logo :
-                            '<div class="loader-page-romb">' +
-                                '<div class="romb" id="blue"></div>' +
-                                '<div class="romb" id="green"></div>' +
-                                '<div class="romb" id="red"></div>' +
-                            '</div>') +
-                        '</div>' +
-                        '<div class="loader-page-text">' +  customer +
-                            '<div class="loader-page-text-loading">' + loading + '</div>' +
-                        '</div>' +
-                '</div>');
     </script>
 
     <style>
@@ -274,6 +194,14 @@
     </style>
 </head>
 <body>
+    <div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div><span class="circle"></span><span class="circle"></span><span class="circle"></span></div></div><div class="placeholder"><div class="slide-h"><div class="slide-v"><div class="slide-container"><div class="line"></div><div class="line"></div></div></div></div></div></div>
+    <div id="viewport"></div>
+
+    <script>
+        if (stopLoading) {
+            document.body.removeChild(document.getElementById('loading-mask'));
+        }
+    </script>
 
     <script>
         window.requireTimeourError = function(){

apps/presentationeditor/main/index_loader.html

@@ -0,0 +1,296 @@
+<!DOCTYPE html>
+<html style="width:100%; height:100%;">
+<head>
+    <title>ONLYOFFICE Presentation Editor</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=IE8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+    <link rel="icon" href="resources/img/favicon.ico" type="image/x-icon" />
+
+    <!-- splash -->
+    <style type="text/css">
+        .loadmask {
+            left: 0;
+            top: 0;
+            position: absolute;
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+            border: none;
+            background-color: #f4f4f4;
+            z-index: 1001;
+        }
+        .loader-page {
+            width: 100%;
+            height: 170px;
+            bottom: 42%;
+            position: absolute;
+            text-align: center;
+            line-height: 10px;
+        }
+        .loader-logo {
+            max-height: 160px;
+            margin-bottom: 10px;
+        }
+        .loader-page-romb {
+            width: 40px;
+            display: inline-block;
+        }
+        .loader-page-text {
+            width: 100%;
+            bottom: 42%;
+            position: absolute;
+            text-align: center;
+            color: #888;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            line-height: 20px;
+        }
+        .loader-page-text-loading {
+            font-size: 14px;
+        }
+        .loader-page-text-customer {
+            font-size: 16px;
+            margin-bottom: 5px;
+        }
+        .romb {
+            width: 40px;
+            height: 40px;
+            -webkit-transform: rotate(135deg) skew(20deg, 20deg);
+            -moz-transform: rotate(135deg) skew(20deg, 20deg);
+            -ms-transform: rotate(135deg) skew(20deg, 20deg);
+            -o-transform: rotate(135deg) skew(20deg, 20deg);
+            position: absolute;
+            background: red;
+            border-radius: 6px;
+            -webkit-animation: movedown 3s infinite ease;
+            -moz-animation: movedown 3s infinite ease;
+            -ms-animation: movedown 3s infinite ease;
+            -o-animation: movedown 3s infinite ease;
+            animation: movedown 3s infinite ease;
+        }
+        #blue {
+            z-index: 3;
+            background: #55bce6;
+            -webkit-animation-name: blue;
+            -moz-animation-name: blue;
+            -ms-animation-name: blue;
+            -o-animation-name: blue;
+            animation-name: blue;
+        }
+        #red {
+            z-index:1;
+            background: #de7a59;
+            -webkit-animation-name: red;
+            -moz-animation-name: red;
+            -ms-animation-name: red;
+            -o-animation-name: red;
+            animation-name: red;
+        }
+        #green {
+            z-index: 2;
+            background: #a1cb5c;
+            -webkit-animation-name: green;
+            -moz-animation-name: green;
+            -ms-animation-name: green;
+            -o-animation-name: green;
+            animation-name: green;
+        }
+        @-webkit-keyframes red {
+            0%    { top:120px; background: #de7a59; }
+            10%    { top:120px; background: #F2CBBF; }
+            14%    { background: #f4f4f4; top:120px; }
+            15%    { background: #f4f4f4; top:0;}
+            20%    { background: #E6E4E4; }
+            30%    { background: #D2D2D2; }
+            40%    { top:120px; }
+            100%    { top:120px; background: #de7a59; }
+        }
+        @keyframes red {
+            0%    { top:120px; background: #de7a59; }
+            10%    { top:120px; background: #F2CBBF; }
+            14%    { background: #f4f4f4; top:120px; }
+            15%    { background: #f4f4f4; top:0; }
+            20%    { background: #E6E4E4; }
+            30%    { background: #D2D2D2; }
+            40%    { top:120px; }
+            100%    { top:120px; background: #de7a59; }
+        }
+        @-webkit-keyframes green {
+            0%    { top:110px; background: #a1cb5c; opacity:1; }
+            10%    { top:110px; background: #CBE0AC; opacity:1; }
+            14%    { background: #f4f4f4; top:110px; opacity:1; }
+            15%    { background: #f4f4f4; top:0; opacity:1; }
+            20%    { background: #f4f4f4; top:0; opacity:0; }
+            25%    { background: #EFEFEF; top:0; opacity:1; }
+            30%    { background:#E6E4E4; }
+            70%    { top:110px; }
+            100%    { top:110px; background: #a1cb5c; }
+        }
+        @keyframes green {
+            0%    { top:110px; background: #a1cb5c; opacity:1; }
+            10%    { top:110px; background: #CBE0AC; opacity:1; }
+            14%    { background: #f4f4f4; top:110px; opacity:1; }
+            15%    { background: #f4f4f4; top:0; opacity:1; }
+            20%    { background: #f4f4f4; top:0; opacity:0; }
+            25%    { background: #EFEFEF; top:0; opacity:1; }
+            30%    { background:#E6E4E4; }
+            70%    { top:110px; }
+            100%    { top:110px; background: #a1cb5c; }
+        }
+        @-webkit-keyframes blue {
+            0%    { top:100px; background: #55bce6; opacity:1; }
+            10%    { top:100px; background: #BFE8F8; opacity:1; }
+            14%    { background: #f4f4f4; top:100px; opacity:1; }
+            15%    { background: #f4f4f4; top:0; opacity:1; }
+            20%    { background: #f4f4f4; top:0; opacity:0; }
+            25%    { background: #f4f4f4; top:0; opacity:0; }
+            45%    { background: #EFEFEF; top:0; opacity:0.2; }
+            100%    { top:100px; background: #55bce6; }
+        }
+        @keyframes blue {
+            0%    { top:100px; background: #55bce6; opacity:1; }
+            10%    { top:100px; background: #BFE8F8; opacity:1; }
+            14%    { background: #f4f4f4; top:100px; opacity:1; }
+            15%    { background: #f4f4f4; top:0; opacity:1; }
+            20%    { background: #f4f4f4; top:0; opacity:0; }
+            25%    { background: #f4f4f4; top:0; opacity:0; }
+            45%    { background: #EFEFEF; top:0; opacity:0.2; }
+            100%    { top:100px; background: #55bce6; }
+        }
+    </style>
+
+    <script>
+        var userAgent = navigator.userAgent.toLowerCase(),
+            check = function(regex){ return regex.test(userAgent); },
+            stopLoading = false;
+        if (!check(/opera/) && (check(/msie/) || check(/trident/))) {
+            var m = /msie (\d+\.\d+)/.exec(userAgent);
+            if (m && parseFloat(m[1]) < 10.0) {
+                document.write(
+                    '<div class="app-error-panel">' +
+                    '<div class="message-block">' +
+                    '<div class="message-inner">' +
+                    '<div class="title">Your browser is not supported.</div>' +
+                    '<div class="text">Sorry, Presentation Editor is currently only supported in the latest versions of the Chrome, Firefox, Safari or Internet Explorer web browsers.</div>' +
+                    '</div>' +
+                    '</div>' +
+                    '</div>');
+                stopLoading = true;
+            }
+        }
+        function getUrlParams() {
+            var e,
+                a = /\+/g,  // Regex for replacing addition symbol with a space
+                r = /([^&=]+)=?([^&]*)/g,
+                d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
+                q = window.location.search.substring(1),
+                urlParams = {};
+            while (e = r.exec(q))
+                urlParams[d(e[1])] = d(e[2]);
+            return urlParams;
+        }
+        function encodeUrlParam(str) {
+            return str.replace(/&/g, '&amp;')
+                .replace(/"/g, '&quot;')
+                .replace(/'/g, '&#39;')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;');
+        }
+        var params = getUrlParams(),
+            lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
+            customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+            margin = (customer !== '') ? 50 : 20,
+            loading = 'Loading...',
+            logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
+        window.frameEditorId = params["frameEditorId"];
+        if ( lang == 'de')      loading = 'Ladevorgang...';
+        else if ( lang == 'es') loading = 'Cargando...';
+        else if ( lang == 'fr') loading = 'Chargement en cours...';
+        else if ( lang == 'it') loading = 'Caricamento in corso...';
+        else if ( lang == 'pt') loading = 'Carregando...';
+        else if ( lang == 'ru') loading = 'Загрузка...';
+        else if ( lang == 'sl') loading = 'Nalaganje...';
+        else if ( lang == 'tr') loading = 'Yükleniyor...';
+        else if ( lang == 'bg') loading = 'Зареждане...';
+        else if ( lang == 'cs') loading = 'Nahrávám...';
+        else if ( lang == 'hu') loading = 'Betöltés...';
+        else if ( lang == 'ja') loading = '読み込み中...';
+        else if ( lang == 'ko') loading = '로드 중...';
+        else if ( lang == 'lv') loading = 'Ieladēšana ...';
+        else if ( lang == 'nl') loading = 'Laden...';
+        else if ( lang == 'pl') loading = 'Ładowanie...';
+        else if ( lang == 'sk') loading = 'Nahrávam...';
+        else if ( lang == 'uk') loading = 'Завантаження...';
+        else if ( lang == 'vi') loading = 'Đang tải...';
+        else if ( lang == 'zh') loading = '加载中...';
+        if ( !stopLoading )
+            document.write(
+                '<div id="loading-mask" class="loadmask">' +
+                '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
+                ((logo!==null) ? logo :
+                '<div class="loader-page-romb">' +
+                '<div class="romb" id="blue"></div>' +
+                '<div class="romb" id="green"></div>' +
+                '<div class="romb" id="red"></div>' +
+                '</div>') +
+                '</div>' +
+                '<div class="loader-page-text">' +  customer +
+                '<div class="loader-page-text-loading">' + loading + '</div>' +
+                '</div>' +
+                '</div>');
+    </script>
+
+    <!-- debug begin -->
+    <link rel="stylesheet/less" type="text/css" href="resources/less/app.less" />
+    <!-- debug end -->
+</head>
+<body>
+<div id="viewport"></div>
+
+<script src="../../../vendor/svg-injector/svg-injector.min.js"></script>
+<img class="inline-svg" src="../../common/main/resources/img/header/buttons.svg">
+<img class="inline-svg" src="../../common/main/resources/img/doc-formats/pptx.svg">
+<img class="inline-svg" src="../../common/main/resources/img/doc-formats/potx.svg">
+<img class="inline-svg" src="../../common/main/resources/img/doc-formats/pdf.svg">
+<img class="inline-svg" src="../../common/main/resources/img/doc-formats/pdfa.svg">
+<img class="inline-svg" src="../../common/main/resources/img/doc-formats/odp.svg">
+<img class="inline-svg" src="../../common/main/resources/img/doc-formats/otp.svg">
+<img class="inline-svg" src="../../common/main/resources/img/doc-formats/blank.svg">
+<img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
+<script>
+    var svgpoints = document.querySelectorAll('img.inline-svg');
+    SVGInjector(svgpoints);
+</script>
+
+<script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
+<script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
+
+<script type="text/javascript">
+    window.g_debug_mode = true;
+</script>
+
+<!-- debug begin -->
+<script type="text/javascript">var less=less||{};less.env='development';</script>
+<script src="../../../vendor/less/dist/less-2.7.1.js" type="text/javascript"></script>
+<!-- debug end -->
+
+<script type="text/javascript" src="../sdk_dev_scripts.js"></script>
+<script>
+    window.sdk_dev_scrpipts.forEach(function(item){
+        document.write('<script type="text/javascript" src="' + item + '"><\/script>');
+    });
+    window.requireTimeourError = function(){
+        var reqerr;
+        if ( lang == 'de')      reqerr = 'Die Verbindung ist zu langsam, einige Komponenten konnten nicht geladen werden. Aktualisieren Sie bitte die Seite.';
+        else if ( lang == 'es') reqerr = 'La conexión es muy lenta, algunos de los componentes no han podido cargar. Por favor recargue la página.';
+        else if ( lang == 'fr') reqerr = 'La connexion est trop lente, certains des composants n\'ons pas pu être chargé. Veuillez recharger la page.';
+        else if ( lang == 'ru') reqerr = 'Слишком медленное соединение, не удается загрузить некоторые компоненты. Пожалуйста, обновите страницу.';
+        else reqerr = 'The connection is too slow, some of the components could not be loaded. Please reload the page.';
+        return reqerr;
+    };
+</script>
+
+<!-- application -->
+<script data-main="app_dev" src="../../../vendor/requirejs/require.js"></script>
+</body>
+</html>

apps/presentationeditor/main/index_loader.html.deploy

@@ -0,0 +1,320 @@
+<!DOCTYPE html>
+<html style="width:100%; height:100%;">
+<head>
+    <title>ONLYOFFICE Presentation Editor</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=IE8"/>
+    <meta name="description" content="" />
+    <meta name="keywords" content="" />
+    <link rel="icon" href="resources/img/favicon.ico" type="image/x-icon" />
+
+    <!-- splash -->        
+
+    <style type="text/css">
+        .loadmask {
+            left: 0;
+            top: 0;
+            position: absolute;
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+            border: none;
+            background-color: #f4f4f4;
+            z-index: 1001;
+        }
+
+        .loader-page {
+            width: 100%;
+            height: 170px;
+            bottom: 42%;
+            position: absolute;
+            text-align: center;
+            line-height: 10px;
+        }
+
+        .loader-logo {
+            max-height: 160px;
+            margin-bottom: 10px;
+        }
+
+        .loader-page-romb {
+            width: 40px;
+            display: inline-block;
+        }
+
+        .loader-page-text {
+            width: 100%;
+            bottom: 42%;
+            position: absolute;
+            text-align: center;
+            color: #888;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            line-height: 20px;
+        }
+
+        .loader-page-text-loading {
+            font-size: 14px;
+        }
+
+        .loader-page-text-customer {
+            font-size: 16px;
+            margin-bottom: 5px;
+        }
+
+        .romb {
+            width: 40px;
+            height: 40px;
+            -webkit-transform: rotate(135deg) skew(20deg, 20deg);
+            -moz-transform: rotate(135deg) skew(20deg, 20deg);
+            -ms-transform: rotate(135deg) skew(20deg, 20deg);
+            -o-transform: rotate(135deg) skew(20deg, 20deg);
+            position: absolute;
+            background: red;
+            border-radius: 6px;
+            -webkit-animation: movedown 3s infinite ease;
+            -moz-animation: movedown 3s infinite ease;
+            -ms-animation: movedown 3s infinite ease;
+            -o-animation: movedown 3s infinite ease;
+            animation: movedown 3s infinite ease;
+        }
+
+        #blue {
+            z-index: 3;
+            background: #55bce6;
+            -webkit-animation-name: blue;
+            -moz-animation-name: blue;
+            -ms-animation-name: blue;
+            -o-animation-name: blue;
+            animation-name: blue;
+        }
+
+        #red {
+            z-index:1;
+            background: #de7a59;
+            -webkit-animation-name: red;
+            -moz-animation-name: red;
+            -ms-animation-name: red;
+            -o-animation-name: red;
+            animation-name: red;
+        }
+
+        #green {
+            z-index: 2;
+            background: #a1cb5c;
+            -webkit-animation-name: green;
+            -moz-animation-name: green;
+            -ms-animation-name: green;
+            -o-animation-name: green;
+            animation-name: green;
+        }
+
+        @-webkit-keyframes red {
+              0%    { top:120px; background: #de7a59; }
+             10%    { top:120px; background: #F2CBBF; }
+             14%    { background: #f4f4f4; top:120px; }
+             15%    { background: #f4f4f4; top:0;}
+             20%    { background: #E6E4E4; }
+             30%    { background: #D2D2D2; }
+             40%    { top:120px; }
+            100%    { top:120px; background: #de7a59; }
+        }
+
+        @keyframes red {
+              0%    { top:120px; background: #de7a59; }
+             10%    { top:120px; background: #F2CBBF; }
+             14%    { background: #f4f4f4; top:120px; }
+             15%    { background: #f4f4f4; top:0; }
+             20%    { background: #E6E4E4; }
+             30%    { background: #D2D2D2; }
+             40%    { top:120px; }
+            100%    { top:120px; background: #de7a59; }
+        }
+
+        @-webkit-keyframes green {
+              0%    { top:110px; background: #a1cb5c; opacity:1; }
+             10%    { top:110px; background: #CBE0AC; opacity:1; }
+             14%    { background: #f4f4f4; top:110px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #EFEFEF; top:0; opacity:1; }
+             30%    { background:#E6E4E4; }
+             70%    { top:110px; }
+            100%    { top:110px; background: #a1cb5c; }
+        }
+
+        @keyframes green {
+              0%    { top:110px; background: #a1cb5c; opacity:1; }
+             10%    { top:110px; background: #CBE0AC; opacity:1; }
+             14%    { background: #f4f4f4; top:110px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #EFEFEF; top:0; opacity:1; }
+             30%    { background:#E6E4E4; }
+             70%    { top:110px; }
+            100%    { top:110px; background: #a1cb5c; }
+        }
+
+        @-webkit-keyframes blue {
+              0%    { top:100px; background: #55bce6; opacity:1; }
+             10%    { top:100px; background: #BFE8F8; opacity:1; }
+             14%    { background: #f4f4f4; top:100px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #f4f4f4; top:0; opacity:0; }
+             45%    { background: #EFEFEF; top:0; opacity:0.2; }
+            100%    { top:100px; background: #55bce6; }
+        }
+
+        @keyframes blue {
+              0%    { top:100px; background: #55bce6; opacity:1; }
+             10%    { top:100px; background: #BFE8F8; opacity:1; }
+             14%    { background: #f4f4f4; top:100px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #f4f4f4; top:0; opacity:0; }
+             45%    { background: #EFEFEF; top:0; opacity:0.2; }
+            100%    { top:100px; background: #55bce6; }
+        }
+    </style>
+
+    <script>
+        var userAgent = navigator.userAgent.toLowerCase(),
+            check = function(regex){ return regex.test(userAgent); },
+            stopLoading = false;
+        if (!check(/opera/) && (check(/msie/) || check(/trident/))) {
+            var m = /msie (\d+\.\d+)/.exec(userAgent);
+            if (m && parseFloat(m[1]) < 10.0) {
+                document.write('<div class="app-error-panel">' +
+                                '<div class="message-block">' +
+                                    '<div class="message-inner">' +
+                                        '<div class="title">Your browser is not supported.</div>' +
+                                        '<div class="text">Sorry, Presentation Editor is currently only supported in the latest versions of the Chrome, Firefox, Safari or Internet Explorer web browsers.</div>' +
+                                    '</div>' +
+                                '</div></div>');
+                stopLoading = true;
+            }
+        } else
+        if (check(/windows\snt/i)) {
+            var re = /chrome\/(\d+)/i.exec(userAgent);
+            if (!!re && !!re[1] && !(re[1] > 49)) {
+                setTimeout(function () {
+                    document.getElementsByTagName('body')[0].className += "winxp";
+                },0);
+            }
+        }
+
+        function getUrlParams() {
+            var e,
+                a = /\+/g,  // Regex for replacing addition symbol with a space
+                r = /([^&=]+)=?([^&]*)/g,
+                d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
+                q = window.location.search.substring(1),
+                urlParams = {};
+
+            while (e = r.exec(q))
+                urlParams[d(e[1])] = d(e[2]);
+
+            return urlParams;
+        }
+
+        function encodeUrlParam(str) {
+            return str.replace(/&/g, '&amp;')
+                    .replace(/"/g, '&quot;')
+                    .replace(/'/g, '&#39;')
+                    .replace(/</g, '&lt;')
+                    .replace(/>/g, '&gt;');
+        }
+
+        var params = getUrlParams(),
+            lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
+            customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+            margin = (customer !== '') ? 50 : 20,
+            loading = 'Loading...',
+            logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
+
+        window.frameEditorId = params["frameEditorId"];
+
+        if ( lang == 'de')      loading = 'Ladevorgang...';
+        else if ( lang == 'es') loading = 'Cargando...';
+        else if ( lang == 'fr') loading = 'Chargement en cours...';
+        else if ( lang == 'it') loading = 'Caricamento in corso...';
+        else if ( lang == 'pt') loading = 'Carregando...';
+        else if ( lang == 'ru') loading = 'Загрузка...';
+        else if ( lang == 'sl') loading = 'Nalaganje...';
+        else if ( lang == 'tr') loading = 'Yükleniyor...';
+        else if ( lang == 'bg') loading = 'Зареждане...';
+        else if ( lang == 'cs') loading = 'Nahrávám...';
+        else if ( lang == 'hu') loading = 'Betöltés...';
+        else if ( lang == 'ja') loading = '読み込み中...';
+        else if ( lang == 'ko') loading = '로드 중...';
+        else if ( lang == 'lv') loading = 'Ieladēšana ...';
+        else if ( lang == 'nl') loading = 'Laden...';
+        else if ( lang == 'pl') loading = 'Ładowanie...';
+        else if ( lang == 'sk') loading = 'Nahrávam...';
+        else if ( lang == 'uk') loading = 'Завантаження...';
+        else if ( lang == 'vi') loading = 'Đang tải...';
+        else if ( lang == 'zh') loading = '加载中...';
+
+        if (!stopLoading)
+            document.write(
+                '<div id="loading-mask" class="loadmask">' +
+                        '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
+                            ((logo!==null) ? logo :
+                            '<div class="loader-page-romb">' +
+                                '<div class="romb" id="blue"></div>' +
+                                '<div class="romb" id="green"></div>' +
+                                '<div class="romb" id="red"></div>' +
+                            '</div>') +
+                        '</div>' +
+                        '<div class="loader-page-text">' +  customer +
+                            '<div class="loader-page-text-loading">' + loading + '</div>' +
+                        '</div>' +
+                '</div>');
+    </script>
+
+    <link rel="stylesheet" type="text/css" href="../../../apps/presentationeditor/main/resources/css/app.css">
+</head>
+<body>
+
+    <script>
+        window.requireTimeourError = function(){
+            var reqerr;
+
+            if ( lang == 'de')      reqerr = 'Die Verbindung ist zu langsam, einige Komponenten konnten nicht geladen werden. Aktualisieren Sie bitte die Seite.';
+            else if ( lang == 'es') reqerr = 'La conexión es muy lenta, algunos de los componentes no han podido cargar. Por favor recargue la página.';
+            else if ( lang == 'fr') reqerr = 'La connexion est trop lente, certains des composants n\'ons pas pu être chargé. Veuillez recharger la page.';
+            else if ( lang == 'ru') reqerr = 'Слишком медленное соединение, не удается загрузить некоторые компоненты. Пожалуйста, обновите страницу.';
+            else reqerr = 'The connection is too slow, some of the components could not be loaded. Please reload the page.';
+
+            return reqerr;
+        };
+
+        var requireTimeoutID = setTimeout(function(){
+            window.alert(window.requireTimeourError());
+            window.location.reload();
+        }, 30000);
+
+        var require = {
+            waitSeconds: 30,
+            callback: function(){
+                clearTimeout(requireTimeoutID);
+            }
+        };
+    </script>
+
+    <inline src="resources/img/header/buttons.svg" />
+    <inline src="resources/img/doc-formats/pptx.svg" />
+    <inline src="resources/img/doc-formats/potx.svg" />
+    <inline src="resources/img/doc-formats/pdf.svg" />
+    <inline src="resources/img/doc-formats/pdfa.svg" />
+    <inline src="resources/img/doc-formats/odp.svg" />
+    <inline src="resources/img/doc-formats/otp.svg" />
+    <inline src="resources/img/doc-formats/blank.svg" />
+    <inline src="resources/img/toolbar/shapetypes.svg" />
+
+    <div id="viewport"></div>
+
+    <script data-main="app" src="../../../vendor/requirejs/require.js"></script>
+
+</body>
+</html>

apps/presentationeditor/main/resources/less/app.less

@@ -168,4 +168,62 @@
             background-position: -20px @top-position;
         }
     }
+}
+
+// Skeleton of document
+
+.doc-placeholder {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    padding: 0 100px;
+    background: rgb(226, 226, 226);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    .slide-h {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        flex-grow: 1;
+        max-width: 1350px;
+        width: 100%;
+        margin: 0 auto 56px;
+    }
+
+    .slide-v {
+        display: flex;
+        position: relative;
+        flex-direction: column;
+        padding-bottom: 56.1333%;
+    }
+
+    .slide-container {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        background: #fbfbfb;
+        border: 1px solid #dfdfdf;
+        display: grid;
+
+        > .line {
+            height: 30%;
+            margin: auto 120px;
+            border-radius: 6px;
+            background: #f5f5f5;
+
+            -webkit-animation: flickerAnimation 2s infinite ease-in-out;
+            -moz-animation: flickerAnimation 2s infinite ease-in-out;
+            -o-animation: flickerAnimation 2s infinite ease-in-out;
+            animation: flickerAnimation 2s infinite ease-in-out;
+
+            &:nth-child(1) {
+                height: 40%;
+                margin: auto 80px;
+            }
+        }
+    }
 }

apps/presentationeditor/mobile/app/controller/Main.js

@@ -219,6 +219,9 @@ define([
                 if (me.editorConfig.lang)
                     me.api.asc_setLocale(me.editorConfig.lang);
 
+                if (!me.editorConfig.customization || !(me.editorConfig.customization.loaderName || me.editorConfig.customization.loaderLogo))
+                    $('#editor_sdk').append('<div class="doc-placeholder"><div class="slide-h"><div class="slide-v"><div class="slide-container"><div class="line"></div><div class="line"></div></div></div></div></div>');
+
 //                if (this.appOptions.location == 'us' || this.appOptions.location == 'ca')
 //                    Common.Utils.Metric.setDefaultMetric(Common.Utils.Metric.c_MetricUnits.inch);
             },
@@ -551,6 +554,8 @@ define([
 
                 $(document).on('contextmenu', _.bind(me.onContextMenu, me));
                 Common.Gateway.documentReady();
+
+                $('.doc-placeholder').remove();
             },
 
             onLicenseChanged: function(params) {

apps/presentationeditor/mobile/index.html

@@ -16,172 +16,158 @@
 
         <style type="text/css">
             .loadmask {
-                position: absolute;
                 left: 0;
                 top: 0;
+                position: absolute;
                 height: 100%;
                 width: 100%;
                 overflow: hidden;
                 border: none;
                 background-color: #f4f4f4;
-                z-index: 100;
+                z-index: 10000;
             }
 
-            .loader-page {
+            .loadmask > .brendpanel {
                 width: 100%;
-                height: 170px;
-                bottom: 42%;
                 position: absolute;
-                text-align: center;
+                height: 44px;
-                line-height: 10px;
+                background-color: #e2e2e2;
+                opacity: 0;
             }
 
-            .loader-logo {
+            .loadmask > .brendpanel.visible {
-                max-height: 160px;
+                opacity: 1;
-                margin-bottom: 10px;
             }
 
-            .loader-page-romb {
+            .loadmask > .brendpanel.android {
-                width: 40px;
+                height: 56px;
+                background: #aa5252;
+            }
+
+            .loadmask > .brendpanel > div {
+                display: flex;
+                align-items: center;
+                height: 100%;
+            }
+
+            .loadmask > .brendpanel .loading-logo {
+                max-width: 200px;
+                height: 20px;
+                margin: 0 auto;
+            }
+
+            .loadmask > .brendpanel .loading-logo > img {
                 display: inline-block;
+                max-width: 100px;
+                max-height: 20px;
+                opacity: 0;
             }
 
-            .loader-page-text {
+            .loadmask > .brendpanel .circle {
+                vertical-align: middle;
+                width: 28px;
+                height: 28px;
+                border-radius: 14px;
+                margin: 4px 10px;
+                background: rgba(255, 255, 255, 0.2);
+            }
+
+            .loadmask > .placeholder {
+                background: #f5f5f5;
                 width: 100%;
-                bottom: 42%;
+                height: 100%;
+                padding-top: 56px;
+            }
+
+            .loadmask > .placeholder.android {
+                padding-top: 70px;
+            }
+
+            .loadmask > .placeholder .slide-h {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                flex-grow: 1;
+                width: 90%;
+                margin: 15px auto;
+            }
+            .loadmask > .placeholder .slide-v {
+                display: flex;
+                position: relative;
+                flex-direction: column;
+                padding-bottom: 56.1333%;
+            }
+
+            .loadmask > .placeholder .slide-container {
                 position: absolute;
-                text-align: center;
+                height: 100%;
-                color: #888;
+                width: 100%;
-                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+                background: #fbfbfb;
-                line-height: 20px;
+                border: 1px solid #dfdfdf;
+                display: grid;
+
+                -webkit-animation: flickerAnimation 2s infinite ease-in-out;
+                -moz-animation: flickerAnimation 2s infinite ease-in-out;
+                -o-animation: flickerAnimation 2s infinite ease-in-out;
+                animation: flickerAnimation 2s infinite ease-in-out;
             }
 
-            .loader-page-text-loading {
+            .loadmask > .placeholder .slide-container > .line {
-                font-size: 14px;
+                height: 40%;
-            }
+                margin: auto 60px;
-
-            .loader-page-text-customer {
-                font-size: 16px;
-                margin-bottom: 5px;
-            }
-
-            .romb {
-                width: 40px;
-                height: 40px;
-                -webkit-transform: rotate(135deg) skew(20deg, 20deg);
-                -moz-transform: rotate(135deg) skew(20deg, 20deg);
-                -ms-transform: rotate(135deg) skew(20deg, 20deg);
-                -o-transform: rotate(135deg) skew(20deg, 20deg);
-                position: absolute;
-                background: red;
                 border-radius: 6px;
-                -webkit-animation: movedown 3s infinite ease;
+                background: #f5f5f5;
-                -moz-animation: movedown 3s infinite ease;
-                -ms-animation: movedown 3s infinite ease;
-                -o-animation: movedown 3s infinite ease;
-                animation: movedown 3s infinite ease;
             }
 
-            #blue {
+            .loadmask > .placeholder .slide-container > .line:nth-child(1) {
-                z-index: 3;
+                height: 50%;
-                background: #55bce6;
+                margin: auto 35px;
-                -webkit-animation-name: blue;
-                -moz-animation-name: blue;
-                -ms-animation-name: blue;
-                -o-animation-name: blue;
-                animation-name: blue;
             }
 
-            #red {
+            @keyframes flickerAnimation {
-                z-index:1;
+                0%   { opacity:1; }
-                background: #de7a59;
+                50%  { opacity:0.3; }
-                -webkit-animation-name: red;
+                100% { opacity:1; }
-                -moz-animation-name: red;
-                -ms-animation-name: red;
-                -o-animation-name: red;
-                animation-name: red;
             }
-
+            @-o-keyframes flickerAnimation{
-            #green {
+                0%   { opacity:1; }
-                z-index: 2;
+                50%  { opacity:0.3; }
-                background: #a1cb5c;
+                100% { opacity:1; }
-                -webkit-animation-name: green;
-                -moz-animation-name: green;
-                -ms-animation-name: green;
-                -o-animation-name: green;
-                animation-name: green;
             }
-
+            @-moz-keyframes flickerAnimation{
-            @-webkit-keyframes red {
+                0%   { opacity:1; }
-                  0%    { top:120px; background: #de7a59; }
+                50%  { opacity:0.3; }
-                 10%    { top:120px; background: #F2CBBF; }
+                100% { opacity:1; }
-                 14%    { background: #f4f4f4; top:120px; }
-                 15%    { background: #f4f4f4; top:0;}
-                 20%    { background: #E6E4E4; }
-                 30%    { background: #D2D2D2; }
-                 40%    { top:120px; }
-                100%    { top:120px; background: #de7a59; }
             }
-
+            @-webkit-keyframes flickerAnimation{
-            @keyframes red {
+                0%   { opacity:1; }
-                  0%    { top:120px; background: #de7a59; }
+                50%  { opacity:0.3; }
-                 10%    { top:120px; background: #F2CBBF; }
+                100% { opacity:1; }
-                 14%    { background: #f4f4f4; top:120px; }
-                 15%    { background: #f4f4f4; top:0; }
-                 20%    { background: #E6E4E4; }
-                 30%    { background: #D2D2D2; }
-                 40%    { top:120px; }
-                100%    { top:120px; background: #de7a59; }
-            }
-
-            @-webkit-keyframes green {
-                  0%    { top:110px; background: #a1cb5c; opacity:1; }
-                 10%    { top:110px; background: #CBE0AC; opacity:1; }
-                 14%    { background: #f4f4f4; top:110px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #EFEFEF; top:0; opacity:1; }
-                 30%    { background:#E6E4E4; }
-                 70%    { top:110px; }
-                100%    { top:110px; background: #a1cb5c; }
-            }
-
-            @keyframes green {
-                  0%    { top:110px; background: #a1cb5c; opacity:1; }
-                 10%    { top:110px; background: #CBE0AC; opacity:1; }
-                 14%    { background: #f4f4f4; top:110px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #EFEFEF; top:0; opacity:1; }
-                 30%    { background:#E6E4E4; }
-                 70%    { top:110px; }
-                100%    { top:110px; background: #a1cb5c; }
-            }
-
-            @-webkit-keyframes blue {
-                  0%    { top:100px; background: #55bce6; opacity:1; }
-                 10%    { top:100px; background: #BFE8F8; opacity:1; }
-                 14%    { background: #f4f4f4; top:100px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #f4f4f4; top:0; opacity:0; }
-                 45%    { background: #EFEFEF; top:0; opacity:0.2; }
-                100%    { top:100px; background: #55bce6; }
-            }
-
-            @keyframes blue {
-                  0%    { top:100px; background: #55bce6; opacity:1; }
-                 10%    { top:100px; background: #BFE8F8; opacity:1; }
-                 14%    { background: #f4f4f4; top:100px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #fff; top:0; opacity:0; }
-                 45%    { background: #EFEFEF; top:0; opacity:0.2; }
-                100%    { top:100px; background: #55bce6; }
             }
         </style>
     </head>
     <body>
+    <div id="loading-mask" class="loadmask">
+        <div class="brendpanel">
+            <div>
+                <div class="circle"></div>
+                <div class="loading-logo">
+                    <img src="../../common/mobile/resources/img/header/header-logo.png">
+                </div>
+                <div class="circle"></div>
+            </div>
+        </div>
+        <div class="placeholder">
+            <div class="slide-h">
+                <div class="slide-v">
+                    <div class="slide-container">
+                        <div class="line"></div>
+                        <div class="line"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
         <script type="text/javascript">
             function getUrlParams() {
                 var e,
@@ -207,48 +193,26 @@
 
             var params = getUrlParams(),
                 lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
-                customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+                logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null;
-                margin = (customer !== '') ? 50 : 20,
-                loading = 'Loading...',
-                logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
 
                 window.frameEditorId = params["frameEditorId"];
 
-            if ( lang == 'de')      loading = 'Ladevorgang...';
+            var brendpanel = document.getElementsByClassName('brendpanel')[0];
-            else if ( lang == 'es') loading = 'Cargando...';
+            if (brendpanel) {
-            else if ( lang == 'fr') loading = 'Chargement en cours...';
+                if (/Android/.test(navigator.userAgent)) {
-            else if ( lang == 'it') loading = 'Caricamento in corso...';
+                    brendpanel.classList.add('android');
-            else if ( lang == 'pt') loading = 'Carregando...';
+                }
-            else if ( lang == 'ru') loading = 'Загрузка...';
+                brendpanel.classList.add('visible');
-            else if ( lang == 'sl') loading = 'Nalaganje...';
+                var elem = document.querySelector('.loading-logo img');
-            else if ( lang == 'tr') loading = 'Yükleniyor...';
+                if (elem) {
-            else if ( lang == 'bg') loading = 'Зареждане...';
+                    logo && (elem.setAttribute('src', logo));
-            else if ( lang == 'cs') loading = 'Nahrávám...';
+                    elem.style.opacity = 1;
-            else if ( lang == 'hu') loading = 'Betöltés...';
+                }
-            else if ( lang == 'ja') loading = '読み込み中...';
+            }
-            else if ( lang == 'ko') loading = '로드 중...';
+            var placeholder = document.getElementsByClassName('placeholder')[0];
-            else if ( lang == 'lv') loading = 'Ieladēšana ...';
+            if (placeholder && /Android/.test(navigator.userAgent)) {
-            else if ( lang == 'nl') loading = 'Laden...';
+                placeholder.classList.add('android');
-            else if ( lang == 'pl') loading = 'Ładowanie...';
+            }
-            else if ( lang == 'sk') loading = 'Nahrávam...';
-            else if ( lang == 'uk') loading = 'Завантаження...';
-            else if ( lang == 'vi') loading = 'Đang tải...';
-            else if ( lang == 'zh') loading = '加载中...';
-
-            document.write(
-                '<div id="loading-mask" class="loadmask">' +
-                    '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
-                        ((logo!==null) ? logo :
-                        '<div class="loader-page-romb">' +
-                            '<div class="romb" id="blue"></div>' +
-                            '<div class="romb" id="green"></div>' +
-                            '<div class="romb" id="red"></div>' +
-                        '</div>') +
-                    '</div>' +
-                    '<div class="loader-page-text">' +  customer +
-                    '<div class="loader-page-text-loading">' + loading + '</div>' +
-                    '</div>' +
-                '</div>');
         </script>
 
         <div id="viewport"></div>

apps/presentationeditor/mobile/index.html.deploy

@@ -15,172 +15,158 @@
 
         <style type="text/css">
             .loadmask {
-                position: absolute;
                 left: 0;
                 top: 0;
+                position: absolute;
                 height: 100%;
                 width: 100%;
                 overflow: hidden;
                 border: none;
                 background-color: #f4f4f4;
-                z-index: 100;
+                z-index: 10000;
             }
 
-            .loader-page {
+            .loadmask > .brendpanel {
                 width: 100%;
-                height: 170px;
-                bottom: 42%;
                 position: absolute;
-                text-align: center;
+                height: 44px;
-                line-height: 10px;
+                background-color: #e2e2e2;
+                opacity: 0;
             }
 
-            .loader-logo {
+            .loadmask > .brendpanel.visible {
-                max-height: 160px;
+                opacity: 1;
-                margin-bottom: 10px;
             }
 
-            .loader-page-romb {
+            .loadmask > .brendpanel.android {
-                width: 40px;
+                height: 56px;
+                background: #aa5252;
+            }
+
+            .loadmask > .brendpanel > div {
+                display: flex;
+                align-items: center;
+                height: 100%;
+            }
+
+            .loadmask > .brendpanel .loading-logo {
+                max-width: 200px;
+                height: 20px;
+                margin: 0 auto;
+            }
+
+            .loadmask > .brendpanel .loading-logo > img {
                 display: inline-block;
+                max-width: 100px;
+                max-height: 20px;
+                opacity: 0;
             }
 
-            .loader-page-text {
+            .loadmask > .brendpanel .circle {
+                vertical-align: middle;
+                width: 28px;
+                height: 28px;
+                border-radius: 14px;
+                margin: 4px 10px;
+                background: rgba(255, 255, 255, 0.2);
+            }
+
+            .loadmask > .placeholder {
+                background: #f5f5f5;
                 width: 100%;
-                bottom: 42%;
+                height: 100%;
+                padding-top: 56px;
+            }
+
+            .loadmask > .placeholder.android {
+                padding-top: 70px;
+            }
+
+            .loadmask > .placeholder .slide-h {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                flex-grow: 1;
+                width: 90%;
+                margin: 15px auto;
+            }
+            .loadmask > .placeholder .slide-v {
+                display: flex;
+                position: relative;
+                flex-direction: column;
+                padding-bottom: 56.1333%;
+            }
+
+            .loadmask > .placeholder .slide-container {
                 position: absolute;
-                text-align: center;
+                height: 100%;
-                color: #888;
+                width: 100%;
-                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+                background: #fbfbfb;
-                line-height: 20px;
+                border: 1px solid #dfdfdf;
+                display: grid;
+
+                -webkit-animation: flickerAnimation 2s infinite ease-in-out;
+                -moz-animation: flickerAnimation 2s infinite ease-in-out;
+                -o-animation: flickerAnimation 2s infinite ease-in-out;
+                animation: flickerAnimation 2s infinite ease-in-out;
             }
 
-            .loader-page-text-loading {
+            .loadmask > .placeholder .slide-container > .line {
-                font-size: 14px;
+                height: 40%;
-            }
+                margin: auto 60px;
-
-            .loader-page-text-customer {
-                font-size: 16px;
-                margin-bottom: 5px;
-            }
-
-            .romb {
-                width: 40px;
-                height: 40px;
-                -webkit-transform: rotate(135deg) skew(20deg, 20deg);
-                -moz-transform: rotate(135deg) skew(20deg, 20deg);
-                -ms-transform: rotate(135deg) skew(20deg, 20deg);
-                -o-transform: rotate(135deg) skew(20deg, 20deg);
-                position: absolute;
-                background: red;
                 border-radius: 6px;
-                -webkit-animation: movedown 3s infinite ease;
+                background: #f5f5f5;
-                -moz-animation: movedown 3s infinite ease;
-                -ms-animation: movedown 3s infinite ease;
-                -o-animation: movedown 3s infinite ease;
-                animation: movedown 3s infinite ease;
             }
 
-            #blue {
+            .loadmask > .placeholder .slide-container > .line:nth-child(1) {
-                z-index: 3;
+                height: 50%;
-                background: #55bce6;
+                margin: auto 35px;
-                -webkit-animation-name: blue;
-                -moz-animation-name: blue;
-                -ms-animation-name: blue;
-                -o-animation-name: blue;
-                animation-name: blue;
             }
 
-            #red {
+            @keyframes flickerAnimation {
-                z-index:1;
+                0%   { opacity:1; }
-                background: #de7a59;
+                50%  { opacity:0.3; }
-                -webkit-animation-name: red;
+                100% { opacity:1; }
-                -moz-animation-name: red;
-                -ms-animation-name: red;
-                -o-animation-name: red;
-                animation-name: red;
             }
-
+            @-o-keyframes flickerAnimation{
-            #green {
+                0%   { opacity:1; }
-                z-index: 2;
+                50%  { opacity:0.3; }
-                background: #a1cb5c;
+                100% { opacity:1; }
-                -webkit-animation-name: green;
-                -moz-animation-name: green;
-                -ms-animation-name: green;
-                -o-animation-name: green;
-                animation-name: green;
             }
-
+            @-moz-keyframes flickerAnimation{
-            @-webkit-keyframes red {
+                0%   { opacity:1; }
-                  0%    { top:120px; background: #de7a59; }
+                50%  { opacity:0.3; }
-                 10%    { top:120px; background: #F2CBBF; }
+                100% { opacity:1; }
-                 14%    { background: #f4f4f4; top:120px; }
-                 15%    { background: #f4f4f4; top:0;}
-                 20%    { background: #E6E4E4; }
-                 30%    { background: #D2D2D2; }
-                 40%    { top:120px; }
-                100%    { top:120px; background: #de7a59; }
             }
-
+            @-webkit-keyframes flickerAnimation{
-            @keyframes red {
+                0%   { opacity:1; }
-                  0%    { top:120px; background: #de7a59; }
+                50%  { opacity:0.3; }
-                 10%    { top:120px; background: #F2CBBF; }
+                100% { opacity:1; }
-                 14%    { background: #f4f4f4; top:120px; }
-                 15%    { background: #f4f4f4; top:0; }
-                 20%    { background: #E6E4E4; }
-                 30%    { background: #D2D2D2; }
-                 40%    { top:120px; }
-                100%    { top:120px; background: #de7a59; }
-            }
-
-            @-webkit-keyframes green {
-                  0%    { top:110px; background: #a1cb5c; opacity:1; }
-                 10%    { top:110px; background: #CBE0AC; opacity:1; }
-                 14%    { background: #f4f4f4; top:110px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #EFEFEF; top:0; opacity:1; }
-                 30%    { background:#E6E4E4; }
-                 70%    { top:110px; }
-                100%    { top:110px; background: #a1cb5c; }
-            }
-
-            @keyframes green {
-                  0%    { top:110px; background: #a1cb5c; opacity:1; }
-                 10%    { top:110px; background: #CBE0AC; opacity:1; }
-                 14%    { background: #f4f4f4; top:110px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #EFEFEF; top:0; opacity:1; }
-                 30%    { background:#E6E4E4; }
-                 70%    { top:110px; }
-                100%    { top:110px; background: #a1cb5c; }
-            }
-
-            @-webkit-keyframes blue {
-                  0%    { top:100px; background: #55bce6; opacity:1; }
-                 10%    { top:100px; background: #BFE8F8; opacity:1; }
-                 14%    { background: #f4f4f4; top:100px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #f4f4f4; top:0; opacity:0; }
-                 45%    { background: #EFEFEF; top:0; opacity:0.2; }
-                100%    { top:100px; background: #55bce6; }
-            }
-
-            @keyframes blue {
-                  0%    { top:100px; background: #55bce6; opacity:1; }
-                 10%    { top:100px; background: #BFE8F8; opacity:1; }
-                 14%    { background: #f4f4f4; top:100px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #fff; top:0; opacity:0; }
-                 45%    { background: #EFEFEF; top:0; opacity:0.2; }
-                100%    { top:100px; background: #55bce6; }
             }
         </style>
     </head>
     <body>
+    <div id="loading-mask" class="loadmask">
+            <div class="brendpanel">
+                <div>
+                    <div class="circle"></div>
+                    <div class="loading-logo">
+                        <img src="../../common/mobile/resources/img/header/header-logo.png">
+                    </div>
+                    <div class="circle"></div>
+                </div>
+            </div>
+            <div class="placeholder">
+                <div class="slide-h">
+                    <div class="slide-v">
+                        <div class="slide-container">
+                            <div class="line"></div>
+                            <div class="line"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
         <script type="text/javascript">
             var ua = navigator.userAgent;
 
@@ -219,48 +205,26 @@
 
             var params = getUrlParams(),
                 lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
-                customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+                logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null;
-                margin = (customer !== '') ? 50 : 20,
-                loading = 'Loading...',
-                logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
 
                 window.frameEditorId = params["frameEditorId"];
 
-            if ( lang == 'de')      loading = 'Ladevorgang...';
+            var brendpanel = document.getElementsByClassName('brendpanel')[0];
-            else if ( lang == 'es') loading = 'Cargando...';
+            if (brendpanel) {
-            else if ( lang == 'fr') loading = 'Chargement en cours...';
+                if (/Android/.test(navigator.userAgent)) {
-            else if ( lang == 'it') loading = 'Caricamento in corso...';
+                    brendpanel.classList.add('android');
-            else if ( lang == 'pt') loading = 'Carregando...';
+                }
-            else if ( lang == 'ru') loading = 'Загрузка...';
+                brendpanel.classList.add('visible');
-            else if ( lang == 'sl') loading = 'Nalaganje...';
+                var elem = document.querySelector('.loading-logo img');
-            else if ( lang == 'tr') loading = 'Yükleniyor...';
+                if (elem) {
-            else if ( lang == 'bg') loading = 'Зареждане...';
+                    logo && (elem.setAttribute('src', logo));
-            else if ( lang == 'cs') loading = 'Nahrávám...';
+                    elem.style.opacity = 1;
-            else if ( lang == 'hu') loading = 'Betöltés...';
+                }
-            else if ( lang == 'ja') loading = '読み込み中...';
+            }
-            else if ( lang == 'ko') loading = '로드 중...';
+            var placeholder = document.getElementsByClassName('placeholder')[0];
-            else if ( lang == 'lv') loading = 'Ieladēšana ...';
+            if (placeholder && /Android/.test(navigator.userAgent)) {
-            else if ( lang == 'nl') loading = 'Laden...';
+                placeholder.classList.add('android');
-            else if ( lang == 'pl') loading = 'Ładowanie...';
+            }
-            else if ( lang == 'sk') loading = 'Nahrávam...';
-            else if ( lang == 'uk') loading = 'Завантаження...';
-            else if ( lang == 'vi') loading = 'Đang tải...';
-            else if ( lang == 'zh') loading = '加载中...';
-
-            document.write(
-                '<div id="loading-mask" class="loadmask">' +
-                    '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
-                        ((logo!==null) ? logo :
-                        '<div class="loader-page-romb">' +
-                            '<div class="romb" id="blue"></div>' +
-                            '<div class="romb" id="green"></div>' +
-                            '<div class="romb" id="red"></div>' +
-                        '</div>') +
-                    '</div>' +
-                    '<div class="loader-page-text">' +  customer +
-                    '<div class="loader-page-text-loading">' + loading + '</div>' +
-                    '</div>' +
-                '</div>');
 
             window.requireTimeourError = function(){
                 var reqerr;

apps/presentationeditor/mobile/index_loader.html

@@ -0,0 +1,265 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="mobile-web-app-capable" content="yes">
+
+    <title>ONLYOFFICE Presentations</title>
+
+    <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,500,700" rel="stylesheet" type="text/css">
+    <!-- App styles -->
+
+    <!-- splash -->
+
+    <style type="text/css">
+        .loadmask {
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+            border: none;
+            background-color: #f4f4f4;
+            z-index: 100;
+        }
+        .loader-page {
+            width: 100%;
+            height: 170px;
+            bottom: 42%;
+            position: absolute;
+            text-align: center;
+            line-height: 10px;
+        }
+        .loader-logo {
+            max-height: 160px;
+            margin-bottom: 10px;
+        }
+        .loader-page-romb {
+            width: 40px;
+            display: inline-block;
+        }
+        .loader-page-text {
+            width: 100%;
+            bottom: 42%;
+            position: absolute;
+            text-align: center;
+            color: #888;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            line-height: 20px;
+        }
+        .loader-page-text-loading {
+            font-size: 14px;
+        }
+        .loader-page-text-customer {
+            font-size: 16px;
+            margin-bottom: 5px;
+        }
+        .romb {
+            width: 40px;
+            height: 40px;
+            -webkit-transform: rotate(135deg) skew(20deg, 20deg);
+            -moz-transform: rotate(135deg) skew(20deg, 20deg);
+            -ms-transform: rotate(135deg) skew(20deg, 20deg);
+            -o-transform: rotate(135deg) skew(20deg, 20deg);
+            position: absolute;
+            background: red;
+            border-radius: 6px;
+            -webkit-animation: movedown 3s infinite ease;
+            -moz-animation: movedown 3s infinite ease;
+            -ms-animation: movedown 3s infinite ease;
+            -o-animation: movedown 3s infinite ease;
+            animation: movedown 3s infinite ease;
+        }
+        #blue {
+            z-index: 3;
+            background: #55bce6;
+            -webkit-animation-name: blue;
+            -moz-animation-name: blue;
+            -ms-animation-name: blue;
+            -o-animation-name: blue;
+            animation-name: blue;
+        }
+        #red {
+            z-index:1;
+            background: #de7a59;
+            -webkit-animation-name: red;
+            -moz-animation-name: red;
+            -ms-animation-name: red;
+            -o-animation-name: red;
+            animation-name: red;
+        }
+        #green {
+            z-index: 2;
+            background: #a1cb5c;
+            -webkit-animation-name: green;
+            -moz-animation-name: green;
+            -ms-animation-name: green;
+            -o-animation-name: green;
+            animation-name: green;
+        }
+        @-webkit-keyframes red {
+            0%    { top:120px; background: #de7a59; }
+            10%    { top:120px; background: #F2CBBF; }
+            14%    { background: #f4f4f4; top:120px; }
+            15%    { background: #f4f4f4; top:0;}
+            20%    { background: #E6E4E4; }
+            30%    { background: #D2D2D2; }
+            40%    { top:120px; }
+            100%    { top:120px; background: #de7a59; }
+        }
+        @keyframes red {
+            0%    { top:120px; background: #de7a59; }
+            10%    { top:120px; background: #F2CBBF; }
+            14%    { background: #f4f4f4; top:120px; }
+            15%    { background: #f4f4f4; top:0; }
+            20%    { background: #E6E4E4; }
+            30%    { background: #D2D2D2; }
+            40%    { top:120px; }
+            100%    { top:120px; background: #de7a59; }
+        }
+        @-webkit-keyframes green {
+            0%    { top:110px; background: #a1cb5c; opacity:1; }
+            10%    { top:110px; background: #CBE0AC; opacity:1; }
+            14%    { background: #f4f4f4; top:110px; opacity:1; }
+            15%    { background: #f4f4f4; top:0; opacity:1; }
+            20%    { background: #f4f4f4; top:0; opacity:0; }
+            25%    { background: #EFEFEF; top:0; opacity:1; }
+            30%    { background:#E6E4E4; }
+            70%    { top:110px; }
+            100%    { top:110px; background: #a1cb5c; }
+        }
+        @keyframes green {
+            0%    { top:110px; background: #a1cb5c; opacity:1; }
+            10%    { top:110px; background: #CBE0AC; opacity:1; }
+            14%    { background: #f4f4f4; top:110px; opacity:1; }
+            15%    { background: #f4f4f4; top:0; opacity:1; }
+            20%    { background: #f4f4f4; top:0; opacity:0; }
+            25%    { background: #EFEFEF; top:0; opacity:1; }
+            30%    { background:#E6E4E4; }
+            70%    { top:110px; }
+            100%    { top:110px; background: #a1cb5c; }
+        }
+        @-webkit-keyframes blue {
+            0%    { top:100px; background: #55bce6; opacity:1; }
+            10%    { top:100px; background: #BFE8F8; opacity:1; }
+            14%    { background: #f4f4f4; top:100px; opacity:1; }
+            15%    { background: #f4f4f4; top:0; opacity:1; }
+            20%    { background: #f4f4f4; top:0; opacity:0; }
+            25%    { background: #f4f4f4; top:0; opacity:0; }
+            45%    { background: #EFEFEF; top:0; opacity:0.2; }
+            100%    { top:100px; background: #55bce6; }
+        }
+        @keyframes blue {
+            0%    { top:100px; background: #55bce6; opacity:1; }
+            10%    { top:100px; background: #BFE8F8; opacity:1; }
+            14%    { background: #f4f4f4; top:100px; opacity:1; }
+            15%    { background: #f4f4f4; top:0; opacity:1; }
+            20%    { background: #f4f4f4; top:0; opacity:0; }
+            25%    { background: #fff; top:0; opacity:0; }
+            45%    { background: #EFEFEF; top:0; opacity:0.2; }
+            100%    { top:100px; background: #55bce6; }
+        }
+    </style>
+</head>
+<body>
+<script type="text/javascript">
+    function getUrlParams() {
+        var e,
+            a = /\+/g,  // Regex for replacing addition symbol with a space
+            r = /([^&=]+)=?([^&]*)/g,
+            d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
+            q = window.location.search.substring(1),
+            urlParams = {};
+        while (e = r.exec(q))
+            urlParams[d(e[1])] = d(e[2]);
+        return urlParams;
+    }
+    function encodeUrlParam(str) {
+        return str.replace(/&/g, '&amp;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#39;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
+    var params = getUrlParams(),
+        lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
+        customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+        margin = (customer !== '') ? 50 : 20,
+        loading = 'Loading...',
+        logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
+    window.frameEditorId = params["frameEditorId"];
+    if ( lang == 'de')      loading = 'Ladevorgang...';
+    else if ( lang == 'es') loading = 'Cargando...';
+    else if ( lang == 'fr') loading = 'Chargement en cours...';
+    else if ( lang == 'it') loading = 'Caricamento in corso...';
+    else if ( lang == 'pt') loading = 'Carregando...';
+    else if ( lang == 'ru') loading = 'Загрузка...';
+    else if ( lang == 'sl') loading = 'Nalaganje...';
+    else if ( lang == 'tr') loading = 'Yükleniyor...';
+    else if ( lang == 'bg') loading = 'Зареждане...';
+    else if ( lang == 'cs') loading = 'Nahrávám...';
+    else if ( lang == 'hu') loading = 'Betöltés...';
+    else if ( lang == 'ja') loading = '読み込み中...';
+    else if ( lang == 'ko') loading = '로드 중...';
+    else if ( lang == 'lv') loading = 'Ieladēšana ...';
+    else if ( lang == 'nl') loading = 'Laden...';
+    else if ( lang == 'pl') loading = 'Ładowanie...';
+    else if ( lang == 'sk') loading = 'Nahrávam...';
+    else if ( lang == 'uk') loading = 'Завантаження...';
+    else if ( lang == 'vi') loading = 'Đang tải...';
+    else if ( lang == 'zh') loading = '加载中...';
+    document.write(
+        '<div id="loading-mask" class="loadmask">' +
+        '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
+        ((logo!==null) ? logo :
+        '<div class="loader-page-romb">' +
+        '<div class="romb" id="blue"></div>' +
+        '<div class="romb" id="green"></div>' +
+        '<div class="romb" id="red"></div>' +
+        '</div>') +
+        '</div>' +
+        '<div class="loader-page-text">' +  customer +
+        '<div class="loader-page-text-loading">' + loading + '</div>' +
+        '</div>' +
+        '</div>');
+</script>
+
+<div id="viewport"></div>
+
+<script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
+<script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
+
+<script type="text/javascript" src="../sdk_dev_scripts.js"></script>
+<script>
+    var ua = navigator.userAgent;
+    if (/Sailfish/.test(ua) || /Jolla/.test(ua)) {
+        document.write('<script type="text/javascript" src="../../../vendor/iscroll/iscroll.min.js"><\/script>');
+        if (!/Android/.test(ua)) {
+            var ua = navigator.userAgent + ';Android 5.0;';
+            Object.defineProperty(navigator, 'userAgent', {
+                get: function () { return ua; }
+            });
+        }
+    }
+    window.sdk_dev_scrpipts.forEach(function(item){
+        document.write('<script type="text/javascript" src="' + item + '"><\/script>');
+    });
+    window.requireTimeourError = function(){
+        var reqerr;
+        if ( lang == 'de')      reqerr = 'Die Verbindung ist zu langsam, einige Komponenten konnten nicht geladen werden. Aktualisieren Sie bitte die Seite.';
+        else if ( lang == 'es') reqerr = 'La conexión es muy lenta, algunos de los componentes no han podido cargar. Por favor recargue la página.';
+        else if ( lang == 'fr') reqerr = 'La connexion est trop lente, certains des composants n\'ons pas pu être chargé. Veuillez recharger la page.';
+        else if ( lang == 'ru') reqerr = 'Слишком медленное соединение, не удается загрузить некоторые компоненты. Пожалуйста, обновите страницу.';
+        else reqerr = 'The connection is too slow, some of the components could not be loaded. Please reload the page.';
+        return reqerr;
+    };
+</script>
+<!-- application -->
+<script data-main="app-dev" src="../../../vendor/requirejs/require.js"></script>
+
+</body>
+</html>

apps/presentationeditor/mobile/index_loader.html.deploy

@@ -0,0 +1,293 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+        <meta name="mobile-web-app-capable" content="yes">
+
+        <title>ONLYOFFICE Document Editor</title>
+
+        <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,500,700" rel="stylesheet" type="text/css">
+
+        <!-- splash -->
+
+        <style type="text/css">
+            .loadmask {
+                position: absolute;
+                left: 0;
+                top: 0;
+                height: 100%;
+                width: 100%;
+                overflow: hidden;
+                border: none;
+                background-color: #f4f4f4;
+                z-index: 100;
+            }
+
+            .loader-page {
+                width: 100%;
+                height: 170px;
+                bottom: 42%;
+                position: absolute;
+                text-align: center;
+                line-height: 10px;
+            }
+
+            .loader-logo {
+                max-height: 160px;
+                margin-bottom: 10px;
+            }
+
+            .loader-page-romb {
+                width: 40px;
+                display: inline-block;
+            }
+
+            .loader-page-text {
+                width: 100%;
+                bottom: 42%;
+                position: absolute;
+                text-align: center;
+                color: #888;
+                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+                line-height: 20px;
+            }
+
+            .loader-page-text-loading {
+                font-size: 14px;
+            }
+
+            .loader-page-text-customer {
+                font-size: 16px;
+                margin-bottom: 5px;
+            }
+
+            .romb {
+                width: 40px;
+                height: 40px;
+                -webkit-transform: rotate(135deg) skew(20deg, 20deg);
+                -moz-transform: rotate(135deg) skew(20deg, 20deg);
+                -ms-transform: rotate(135deg) skew(20deg, 20deg);
+                -o-transform: rotate(135deg) skew(20deg, 20deg);
+                position: absolute;
+                background: red;
+                border-radius: 6px;
+                -webkit-animation: movedown 3s infinite ease;
+                -moz-animation: movedown 3s infinite ease;
+                -ms-animation: movedown 3s infinite ease;
+                -o-animation: movedown 3s infinite ease;
+                animation: movedown 3s infinite ease;
+            }
+
+            #blue {
+                z-index: 3;
+                background: #55bce6;
+                -webkit-animation-name: blue;
+                -moz-animation-name: blue;
+                -ms-animation-name: blue;
+                -o-animation-name: blue;
+                animation-name: blue;
+            }
+
+            #red {
+                z-index:1;
+                background: #de7a59;
+                -webkit-animation-name: red;
+                -moz-animation-name: red;
+                -ms-animation-name: red;
+                -o-animation-name: red;
+                animation-name: red;
+            }
+
+            #green {
+                z-index: 2;
+                background: #a1cb5c;
+                -webkit-animation-name: green;
+                -moz-animation-name: green;
+                -ms-animation-name: green;
+                -o-animation-name: green;
+                animation-name: green;
+            }
+
+            @-webkit-keyframes red {
+                  0%    { top:120px; background: #de7a59; }
+                 10%    { top:120px; background: #F2CBBF; }
+                 14%    { background: #f4f4f4; top:120px; }
+                 15%    { background: #f4f4f4; top:0;}
+                 20%    { background: #E6E4E4; }
+                 30%    { background: #D2D2D2; }
+                 40%    { top:120px; }
+                100%    { top:120px; background: #de7a59; }
+            }
+
+            @keyframes red {
+                  0%    { top:120px; background: #de7a59; }
+                 10%    { top:120px; background: #F2CBBF; }
+                 14%    { background: #f4f4f4; top:120px; }
+                 15%    { background: #f4f4f4; top:0; }
+                 20%    { background: #E6E4E4; }
+                 30%    { background: #D2D2D2; }
+                 40%    { top:120px; }
+                100%    { top:120px; background: #de7a59; }
+            }
+
+            @-webkit-keyframes green {
+                  0%    { top:110px; background: #a1cb5c; opacity:1; }
+                 10%    { top:110px; background: #CBE0AC; opacity:1; }
+                 14%    { background: #f4f4f4; top:110px; opacity:1; }
+                 15%    { background: #f4f4f4; top:0; opacity:1; }
+                 20%    { background: #f4f4f4; top:0; opacity:0; }
+                 25%    { background: #EFEFEF; top:0; opacity:1; }
+                 30%    { background:#E6E4E4; }
+                 70%    { top:110px; }
+                100%    { top:110px; background: #a1cb5c; }
+            }
+
+            @keyframes green {
+                  0%    { top:110px; background: #a1cb5c; opacity:1; }
+                 10%    { top:110px; background: #CBE0AC; opacity:1; }
+                 14%    { background: #f4f4f4; top:110px; opacity:1; }
+                 15%    { background: #f4f4f4; top:0; opacity:1; }
+                 20%    { background: #f4f4f4; top:0; opacity:0; }
+                 25%    { background: #EFEFEF; top:0; opacity:1; }
+                 30%    { background:#E6E4E4; }
+                 70%    { top:110px; }
+                100%    { top:110px; background: #a1cb5c; }
+            }
+
+            @-webkit-keyframes blue {
+                  0%    { top:100px; background: #55bce6; opacity:1; }
+                 10%    { top:100px; background: #BFE8F8; opacity:1; }
+                 14%    { background: #f4f4f4; top:100px; opacity:1; }
+                 15%    { background: #f4f4f4; top:0; opacity:1; }
+                 20%    { background: #f4f4f4; top:0; opacity:0; }
+                 25%    { background: #f4f4f4; top:0; opacity:0; }
+                 45%    { background: #EFEFEF; top:0; opacity:0.2; }
+                100%    { top:100px; background: #55bce6; }
+            }
+
+            @keyframes blue {
+                  0%    { top:100px; background: #55bce6; opacity:1; }
+                 10%    { top:100px; background: #BFE8F8; opacity:1; }
+                 14%    { background: #f4f4f4; top:100px; opacity:1; }
+                 15%    { background: #f4f4f4; top:0; opacity:1; }
+                 20%    { background: #f4f4f4; top:0; opacity:0; }
+                 25%    { background: #fff; top:0; opacity:0; }
+                 45%    { background: #EFEFEF; top:0; opacity:0.2; }
+                100%    { top:100px; background: #55bce6; }
+            }
+        </style>
+    </head>
+    <body>
+        <script type="text/javascript">
+            var ua = navigator.userAgent;
+
+            if (/Sailfish/.test(ua) || /Jolla/.test(ua)) {
+                document.write('<script type="text/javascript" src="../../../vendor/iscroll/iscroll.min.js"><\/script>');
+
+                    if (!/Android/.test(ua)) {
+                        var ua = navigator.userAgent + ';Android 5.0;';
+                        Object.defineProperty(navigator, 'userAgent', {
+                            get: function () { return ua; }
+                        });
+                    }
+            }
+
+            function getUrlParams() {
+                var e,
+                    a = /\+/g,  // Regex for replacing addition symbol with a space
+                    r = /([^&=]+)=?([^&]*)/g,
+                    d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
+                    q = window.location.search.substring(1),
+                    urlParams = {};
+
+                while (e = r.exec(q))
+                    urlParams[d(e[1])] = d(e[2]);
+
+                return urlParams;
+            }
+
+            function encodeUrlParam(str) {
+                return str.replace(/&/g, '&amp;')
+                        .replace(/"/g, '&quot;')
+                        .replace(/'/g, '&#39;')
+                        .replace(/</g, '&lt;')
+                        .replace(/>/g, '&gt;');
+            }
+
+            var params = getUrlParams(),
+                lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
+                customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+                margin = (customer !== '') ? 50 : 20,
+                loading = 'Loading...',
+                logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
+
+                window.frameEditorId = params["frameEditorId"];
+
+            if ( lang == 'de')      loading = 'Ladevorgang...';
+            else if ( lang == 'es') loading = 'Cargando...';
+            else if ( lang == 'fr') loading = 'Chargement en cours...';
+            else if ( lang == 'it') loading = 'Caricamento in corso...';
+            else if ( lang == 'pt') loading = 'Carregando...';
+            else if ( lang == 'ru') loading = 'Загрузка...';
+            else if ( lang == 'sl') loading = 'Nalaganje...';
+            else if ( lang == 'tr') loading = 'Yükleniyor...';
+            else if ( lang == 'bg') loading = 'Зареждане...';
+            else if ( lang == 'cs') loading = 'Nahrávám...';
+            else if ( lang == 'hu') loading = 'Betöltés...';
+            else if ( lang == 'ja') loading = '読み込み中...';
+            else if ( lang == 'ko') loading = '로드 중...';
+            else if ( lang == 'lv') loading = 'Ieladēšana ...';
+            else if ( lang == 'nl') loading = 'Laden...';
+            else if ( lang == 'pl') loading = 'Ładowanie...';
+            else if ( lang == 'sk') loading = 'Nahrávam...';
+            else if ( lang == 'uk') loading = 'Завантаження...';
+            else if ( lang == 'vi') loading = 'Đang tải...';
+            else if ( lang == 'zh') loading = '加载中...';
+
+            document.write(
+                '<div id="loading-mask" class="loadmask">' +
+                    '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
+                        ((logo!==null) ? logo :
+                        '<div class="loader-page-romb">' +
+                            '<div class="romb" id="blue"></div>' +
+                            '<div class="romb" id="green"></div>' +
+                            '<div class="romb" id="red"></div>' +
+                        '</div>') +
+                    '</div>' +
+                    '<div class="loader-page-text">' +  customer +
+                    '<div class="loader-page-text-loading">' + loading + '</div>' +
+                    '</div>' +
+                '</div>');
+
+            window.requireTimeourError = function(){
+                var reqerr;
+
+                if ( lang == 'de')      reqerr = 'Die Verbindung ist zu langsam, einige Komponenten konnten nicht geladen werden. Aktualisieren Sie bitte die Seite.';
+                else if ( lang == 'es') reqerr = 'La conexión es muy lenta, algunos de los componentes no han podido cargar. Por favor recargue la página.';
+                else if ( lang == 'fr') reqerr = 'La connexion est trop lente, certains des composants n\'ons pas pu être chargé. Veuillez recharger la page.';
+                else if ( lang == 'ru') reqerr = 'Слишком медленное соединение, не удается загрузить некоторые компоненты. Пожалуйста, обновите страницу.';
+                else reqerr = 'The connection is too slow, some of the components could not be loaded. Please reload the page.';
+
+                return reqerr;
+            };
+
+            var requireTimeoutID = setTimeout(function(){
+                window.alert(window.requireTimeourError());
+                window.location.reload();
+            }, 30000);
+
+            var require = {
+                waitSeconds: 30,
+                callback: function(){
+                    clearTimeout(requireTimeoutID);
+                }
+            };
+        </script>
+
+        <div id="viewport"></div>
+        <script data-main="app" src="../../../vendor/requirejs/require.js"></script>
+    </body>
+</html>

apps/presentationeditor/mobile/resources/css/app-ios.css

@@ -7024,3 +7024,50 @@ html.pixel-ratio-3 .numbers li {
   max-height: 100%;
   overflow: auto;
 }
+.doc-placeholder {
+  background: #f5f5f5;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  position: absolute;
+  padding-top: 12px;
+}
+.doc-placeholder .slide-h {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-grow: 1;
+  width: 90%;
+  margin: 15px auto;
+}
+.doc-placeholder .slide-v {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  padding-bottom: 56.1333%;
+}
+.doc-placeholder .slide-container {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background: #fbfbfb;
+  border: 1px solid #dfdfdf;
+  display: grid;
+  -webkit-animation: flickerAnimation 2s infinite ease-in-out;
+  -moz-animation: flickerAnimation 2s infinite ease-in-out;
+  -o-animation: flickerAnimation 2s infinite ease-in-out;
+  animation: flickerAnimation 2s infinite ease-in-out;
+}
+.doc-placeholder .slide-container > .line {
+  height: 40%;
+  margin: auto 60px;
+  border-radius: 6px;
+  background: #f5f5f5;
+}
+.doc-placeholder .slide-container > .line:nth-child(1) {
+  height: 50%;
+  margin: auto 35px;
+}

apps/presentationeditor/mobile/resources/css/app-material.css

@@ -6844,3 +6844,50 @@ html.pixel-ratio-3 .numbers li {
   max-height: 100%;
   overflow: auto;
 }
+.doc-placeholder {
+  background: #f5f5f5;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  position: absolute;
+  padding-top: 22px;
+}
+.doc-placeholder .slide-h {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-grow: 1;
+  width: 90%;
+  margin: 15px auto;
+}
+.doc-placeholder .slide-v {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  padding-bottom: 56.1333%;
+}
+.doc-placeholder .slide-container {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background: #fbfbfb;
+  border: 1px solid #dfdfdf;
+  display: grid;
+  -webkit-animation: flickerAnimation 2s infinite ease-in-out;
+  -moz-animation: flickerAnimation 2s infinite ease-in-out;
+  -o-animation: flickerAnimation 2s infinite ease-in-out;
+  animation: flickerAnimation 2s infinite ease-in-out;
+}
+.doc-placeholder .slide-container > .line {
+  height: 40%;
+  margin: auto 60px;
+  border-radius: 6px;
+  background: #f5f5f5;
+}
+.doc-placeholder .slide-container > .line:nth-child(1) {
+  height: 50%;
+  margin: auto 35px;
+}