Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE forms] Refactoring embed/share dialog

Browse source
This commit is contained in:
Julia Radzhabova 2021-08-20 12:49:11 +03:00
parent 4d68bb6008
commit fd10ef5ce9
3 changed files with 112 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

109
apps/common/forms/lib/view/modals.js
View file

@ -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 || {}))
});

4
apps/common/forms/resources/less/common.less
View file

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

8
apps/documenteditor/forms/app/controller/ApplicationController.js
View file

@ -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;