From fd10ef5ce96e902b5d5501385a4c22f572e25d78 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Fri, 20 Aug 2021 12:49:11 +0300 Subject: [PATCH] [DE forms] Refactoring embed/share dialog --- apps/common/forms/lib/view/modals.js | 109 ++++++++++++++++-- apps/common/forms/resources/less/common.less | 4 + .../app/controller/ApplicationController.js | 8 +- 3 files changed, 112 insertions(+), 9 deletions(-) diff --git a/apps/common/forms/lib/view/modals.js b/apps/common/forms/lib/view/modals.js index e535b8fdc..6cdaac565 100644 --- a/apps/common/forms/lib/view/modals.js +++ b/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([ '', '', '', - '
', + '
', '', '', '', - '
', + '
', '', '', '', '', - '
', + '
', '', '', '', @@ -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 = [ + '
', + '', + '', + '', + '', + '', + '', + '', + '
', + '', + '
', + '
', + '
', + '
', + '
', + '
', + '', + '
' + ].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 || {})) }); \ No newline at end of file diff --git a/apps/common/forms/resources/less/common.less b/apps/common/forms/resources/less/common.less index 95e5893d5..3e9946037 100644 --- a/apps/common/forms/resources/less/common.less +++ b/apps/common/forms/resources/less/common.less @@ -553,6 +553,10 @@ opacity: @component-disabled-opacity; cursor: default !important; } + + &[readonly] { + cursor: auto; + } } label { diff --git a/apps/documenteditor/forms/app/controller/ApplicationController.js b/apps/documenteditor/forms/app/controller/ApplicationController.js index 9a6259b02..b74067606 100644 --- a/apps/documenteditor/forms/app/controller/ApplicationController.js +++ b/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;