Make merge editor resizable

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

@@ -97,12 +97,14 @@ define([
                         'drag': _.bind(function(o, state){
                             externalEditor && externalEditor.serviceCommand('window:drag', state == 'start');
                         },this),
+                        'resize': _.bind(function(o, state){
+                            externalEditor && externalEditor.serviceCommand('window:resize', state == 'start');
+                        },this),
                         'show': _.bind(function(cmp){
                             var h = this.mergeEditorView.getHeight(),
                                 innerHeight = Common.Utils.innerHeight();
-                            if (innerHeight>h && h<700 || innerHeight<h) {
+                            if (innerHeight<h) {
-                                h = Math.min(innerHeight, 700);
+                                this.mergeEditorView.setHeight(innerHeight);
-                                this.mergeEditorView.setHeight(h);
                             }
 
                             if (externalEditor) {
@@ -226,12 +228,20 @@ define([
                     if (eventData.type == "processMouse") {
                         if (eventData.data.event == 'mouse:up') {
                             this.mergeEditorView.binding.dragStop();
+                            if (this.mergeEditorView.binding.resizeStop)  this.mergeEditorView.binding.resizeStop();
                         } else
                         if (eventData.data.event == 'mouse:move') {
                             var x = parseInt(this.mergeEditorView.$window.css('left')) + eventData.data.pagex,
                                 y = parseInt(this.mergeEditorView.$window.css('top')) + eventData.data.pagey + 34;
                             this.mergeEditorView.binding.drag({pageX:x, pageY:y});
+                            if (this.mergeEditorView.binding.resize)  this.mergeEditorView.binding.resize({pageX:x, pageY:y});
                         }
+                    } else
+                    if (eventData.type == "resize") {
+                        var w = eventData.data.width,
+                            h = eventData.data.height;
+                        if (w>0 && h>0)
+                            this.mergeEditorView.setInnerSize(w, h);
                     } else
                         this.mergeEditorView.fireEvent('internalmessage', this.mergeEditorView, eventData);
                 }

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

@@ -39,53 +39,24 @@
  */
 
 define([
-    'common/main/lib/component/Window'
+    'common/main/lib/view/ExternalEditor'
 ], function () { 'use strict';
 
-    Common.Views.ExternalMergeEditor = Common.UI.Window.extend(_.extend({
+    Common.Views.ExternalMergeEditor = Common.Views.ExternalEditor.extend(_.extend({
         initialize : function(options) {
             var _options = {};
             _.extend(_options,  {
                 title: this.textTitle,
-                width: 910,
+                storageName: 'merge-editor',
-                height: (Common.Utils.innerHeight()-700)<0 ? Common.Utils.innerHeight(): 700,
+                sdkplaceholder: 'id-merge-editor-placeholder',
-                cls: 'advanced-settings-dlg',
+                initwidth: 900,
-                header: true,
+                initheight: 700,
-                toolclose: 'hide',
+                minwidth: 370,
-                toolcallback: _.bind(this.onToolClose, this)
+                minheight: 275
             }, options);
 
-            this.template = [
-                '<div id="id-merge-editor-container" class="box" style="height:' + (_options.height-85) + 'px;">',
-                    '<div id="id-merge-editor-placeholder" style="width: 100%;height: 100%;"></div>',
-                '</div>',
-                '<div class="separator horizontal"></div>',
-                '<div class="footer" style="text-align: center;">',
-                    '<button id="id-btn-merge-editor-apply" class="btn normal dlg-btn primary custom" result="ok" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textSave + '</button>',
-                    '<button id="id-btn-merge-editor-cancel" class="btn normal dlg-btn" result="cancel" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textClose + '</button>',
-                '</div>'
-            ].join('');
-
-            _options.tpl = _.template(this.template)(_options);
-
-            this.handler = _options.handler;
             this._mergeData = null;
-            this._isNewMerge = true;
+            Common.Views.ExternalEditor.prototype.initialize.call(this, _options);
-            Common.UI.Window.prototype.initialize.call(this, _options);
-        },
-
-        render: function() {
-            Common.UI.Window.prototype.render.call(this);
-
-            this.btnSave = new Common.UI.Button({
-                el: $('#id-btn-merge-editor-apply'),
-                disabled: true
-            });
-            this.btnCancel = new Common.UI.Button({
-                el: $('#id-btn-merge-editor-cancel')
-            });
-
-            this.$window.find('.dlg-btn').on('click', _.bind(this.onDlgBtnClick, this));
         },
 
         setMergeData: function(data) {
@@ -94,54 +65,6 @@ define([
                 this.fireEvent('setmergedata', this);
         },
 
-        setEditMode: function(mode) {
-            this._isNewMerge = !mode;
-        },
-
-        isEditMode: function() {
-            return !this._isNewMerge;
-        },
-
-        setControlsDisabled: function(disable) {
-            this.btnSave.setDisabled(disable);
-            this.btnCancel.setDisabled(disable);
-            (disable) ? this.$window.find('.tool.close').addClass('disabled') : this.$window.find('.tool.close').removeClass('disabled');
-        },
-
-        onDlgBtnClick: function(event) {
-            var state = event.currentTarget.attributes['result'].value;
-            if ( this.handler && this.handler.call(this, state) )
-                return;
-            this.hide();
-        },
-
-        onToolClose: function() {
-            if ( this.handler && this.handler.call(this, 'cancel') )
-                return;
-            this.hide();
-        },
-
-        setHeight: function(height) {
-            if (height >= 0) {
-                var min = parseInt(this.$window.css('min-height'));
-                height < min && (height = min);
-                this.$window.height(height);
-
-                var header_height = (this.initConfig.header) ? parseInt(this.$window.find('> .header').css('height')) : 0;
-
-                this.$window.find('> .body').css('height', height-header_height);
-                this.$window.find('> .body > .box').css('height', height-85);
-
-                var top  = (Common.Utils.innerHeight() - parseInt(height)) / 2;
-                var left = (Common.Utils.innerWidth() - parseInt(this.initConfig.width)) / 2;
-
-                this.$window.css('left',left);
-                this.$window.css('top',top);
-            }
-        },
-
-        textSave: 'Save & Exit',
-        textClose: 'Close',
         textTitle: 'Mail Merge Recipients'
     }, Common.Views.ExternalMergeEditor || {}));
 });