[DE forms] Refactoring embed/share dialog

apps/common/forms/lib/view/modals.js

@@ -8,7 +8,7 @@ define([
     'common/main/lib/component/TextareaField'
 ], function () { 'use strict';
 
-    Common.Views.ShareDialog = Common.UI.Window.extend(_.extend({
+    Common.Views.EmbedDialog = Common.UI.Window.extend(_.extend({
         options: {
             width: 300,
             header: true,
@@ -28,16 +28,16 @@ define([
                     '<tr>',
                         '<td style="padding-right: 10px;">',
                             '<label class="input-label">' + this.textWidth + ':</label>',
-                            '<div id="share-size-spin-width" style="display: inline-block;margin-left: 5px;"></div>',
+                            '<div id="embed-size-spin-width" style="display: inline-block;margin-left: 5px;"></div>',
                         '</td>',
                         '<td style="float:right;">',
                             '<label class="input-label">' + this.textHeight + ':</label>',
-                            '<div id="share-size-spin-height" style="display: inline-block;margin-left: 5px;"></div>',
+                            '<div id="embed-size-spin-height" style="display: inline-block;margin-left: 5px;"></div>',
                         '</td>',
                     '</tr>',
                     '<tr>',
                         '<td colspan="2">',
-                            '<div id="share-embed" style="margin-top: 15px;"></div>',
+                            '<div id="embed-textarea" style="margin-top: 15px;"></div>',
                         '</td>',
                     '</tr>',
                 '</table>',
@@ -59,7 +59,7 @@ define([
             Common.UI.Window.prototype.render.call(this);
 
             this.spnWidth = new Common.UI.MetricSpinner({
-                el: $('#share-size-spin-width'),
+                el: $('#embed-size-spin-width'),
                 step: 1,
                 width: 70,
                 defaultUnit : "px",
@@ -72,7 +72,7 @@ define([
             }, this));
 
             this.spnHeight = new Common.UI.MetricSpinner({
-                el: $('#share-size-spin-height'),
+                el: $('#embed-size-spin-height'),
                 step: 1,
                 width: 70,
                 defaultUnit : "px",
@@ -85,10 +85,11 @@ define([
             }, this));
 
             this.textareaInput = new Common.UI.TextareaField({
-                el          : $('#share-embed'),
+                el          : $('#embed-textarea'),
                 style       : 'width: 100%; height: 65px;',
                 value       : ''
             });
+            this.textareaInput._input.attr('readonly', true);
             this.updateEmbedCode();
 
             this.getChild().find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
@@ -121,5 +122,99 @@ define([
         textHeight: 'Height',
         txtCopy: 'Copy to clipboard',
         warnCopy: 'Browser\'s error! Use keyboard shortcut [Ctrl] + [C]'
+    }, Common.Views.EmbedDialog || {}));
+
+    Common.Views.ShareDialog = Common.UI.Window.extend(_.extend({
+        options: {
+            width: 300,
+            header: true,
+            style: 'min-width: 300px;',
+            cls: 'modal-dlg',
+            buttons: null
+        },
+
+        initialize : function(options) {
+            _.extend(this.options, {
+                title: this.textTitle
+            }, options || {});
+
+            this.template = [
+                '<div class="box" style="height: 110px;">',
+                '<table cols="1" style="width: 100%;">',
+                    '<tr>',
+                        '<td>',
+                            '<div id="share-link-txt"></div>',
+                        '</td>',
+                    '</tr>',
+                    '<tr>',
+                    '<td colspan="2">',
+                        '<div id="share-buttons" style="margin-top: 15px;"></div>',
+                    '</td>',
+                    '</tr>',
+                '</table>',
+                '</div>',
+                '<div class="separator horizontal"></div>',
+                '<div class="footer center">',
+                '<button class="btn normal primary dlg-btn" style="min-width: 86px;width: auto;">' + this.txtCopy + '</button>',
+                '</div>'
+            ].join('');
+
+            this.options.tpl = _.template(this.template)(this.options);
+            this.embedConfig = this.options.embedConfig;
+
+            Common.UI.Window.prototype.initialize.call(this, this.options);
+        },
+
+        render: function() {
+            Common.UI.Window.prototype.render.call(this);
+
+            this.textUrl = new Common.UI.InputField({
+                el          : $('#share-link-txt'),
+                editable    : false,
+                value: this.embedConfig.shareUrl || ''
+            });
+            this.updateShareCode();
+
+            this.getChild().find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
+        },
+
+        onBtnClick: function(event) {
+            this.textUrl._input.select();
+            if ( !document.execCommand('copy') ) {
+                Common.UI.warning({
+                    msg: this.warnCopy,
+                    buttons: ['ok']
+                });
+            }
+        },
+
+        updateShareCode: function() {
+            var me = this,
+                _encoded = encodeURIComponent(this.embedConfig.shareUrl),
+                docTitle = this.embedConfig.docTitle || '',
+                _mailto = 'mailto:?subject=I have shared a document with you: ' + docTitle + '&body=I have shared a document with you: ' + _encoded;
+
+            this.getChild().find('.share-buttons > span').on('click', function(e){
+                var _url;
+                switch ($(e.target).attr('data-name')) {
+                    case 'facebook':
+                        _url = 'https://www.facebook.com/sharer/sharer.php?u=' + me.embedConfig.shareUrl + '&t=' + encodeURI(docTitle);
+                        window.open(_url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
+                        break;
+                    case 'twitter':
+                        _url = 'https://twitter.com/share?url='+ _encoded;
+                        !!docTitle && (_url += encodeURIComponent('&text=' + docTitle));
+                        window.open(_url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
+                        break;
+                    case 'email':
+                        window.open(_mailto, '_self');
+                        break;
+                }
+            });
+        },
+
+        textTitle: 'Share Link',
+        txtCopy: 'Copy to clipboard',
+        warnCopy: 'Browser\'s error! Use keyboard shortcut [Ctrl] + [C]'
     }, Common.Views.ShareDialog || {}))
 });

apps/common/forms/resources/less/common.less

@@ -553,6 +553,10 @@
             opacity: @component-disabled-opacity;
             cursor: default !important;
         }
+
+        &[readonly] {
+            cursor: auto;
+        }
     }
 
     label {

apps/documenteditor/forms/app/controller/ApplicationController.js

@@ -403,7 +403,8 @@ define([
 
             labelDocName = $('#title-doc-name');
             if (data.doc) {
-                labelDocName.text(data.doc.title || '')
+                labelDocName.text(data.doc.title || '');
+                this.embedConfig.docTitle = data.doc.title;
             }
         },
 
@@ -1006,9 +1007,12 @@ define([
                     Common.Analytics.trackEvent('Save');
                     break;
                 case 'share':
+                    (new Common.Views.ShareDialog({
+                        embedConfig: this.embedConfig
+                    })).show();
                     break;
                 case 'embed':
-                    (new Common.Views.ShareDialog({
+                    (new Common.Views.EmbedDialog({
                         embedConfig: this.embedConfig
                     })).show();
                     break;