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

Add embed dialog

Browse source
This commit is contained in:
Julia Radzhabova 2021-08-20 11:22:17 +03:00
parent 8cea823d64
commit 4d68bb6008
5 changed files with 212 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

125
apps/common/forms/lib/view/modals.js Normal file
View file

@ -0,0 +1,125 @@
!window.Common && (window.Common = {});
!Common.Views && (Common.Views = {});
define([
'common/main/lib/component/Window',
'common/main/lib/component/MetricSpinner',
'common/main/lib/component/TextareaField'
], function () { 'use strict';
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="2" style="width: 100%;">',
'<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>',
'</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>',
'</td>',
'</tr>',
'<tr>',
'<td colspan="2">',
'<div id="share-embed" 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;
this.embedCode = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="{0}" width="{1}" height="{2}"></iframe>';
Common.UI.Window.prototype.initialize.call(this, this.options);
},
render: function() {
Common.UI.Window.prototype.render.call(this);
this.spnWidth = new Common.UI.MetricSpinner({
el: $('#share-size-spin-width'),
step: 1,
width: 70,
defaultUnit : "px",
value: '400 px',
minValue: 400,
maxValue: 10000
});
this.spnWidth.on('change', _.bind(function(field, newValue, oldValue, eOpts){
this.updateEmbedCode();
}, this));
this.spnHeight = new Common.UI.MetricSpinner({
el: $('#share-size-spin-height'),
step: 1,
width: 70,
defaultUnit : "px",
value: '600 px',
minValue: 600,
maxValue: 10000
});
this.spnHeight.on('change', _.bind(function(field, newValue, oldValue, eOpts){
this.updateEmbedCode();
}, this));
this.textareaInput = new Common.UI.TextareaField({
el : $('#share-embed'),
style : 'width: 100%; height: 65px;',
value : ''
});
this.updateEmbedCode();
this.getChild().find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
},
getFocusedComponents: function() {
return [this.spnWidth, this.spnHeight, this.textareaInput];
},
getDefaultFocusableComponent: function () {
return this.textareaInput;
},
onBtnClick: function(event) {
this.textareaInput._input.select();
if ( !document.execCommand('copy') ) {
Common.UI.warning({
msg: this.warnCopy,
buttons: ['ok']
});
}
},
updateEmbedCode: function() {
this.textareaInput.setValue(Common.Utils.String.format(this.embedCode, this.embedConfig.embedUrl, this.spnWidth.getNumberValue(), this.spnHeight.getNumberValue()));
},
textTitle: 'Embed',
textWidth: 'Width',
textHeight: 'Height',
txtCopy: 'Copy to clipboard',
warnCopy: 'Browser\'s error! Use keyboard shortcut [Ctrl] + [C]'
}, Common.Views.ShareDialog || {}))
});

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

@ -76,6 +76,7 @@
@import "../../../../common/main/resources/less/common.less";
@import "../../../../common/main/resources/less/winxp_fix.less";
@import "../../../../common/main/resources/less/calendar.less";
@import "../../../../common/main/resources/less/spinner.less";
//@import "loadmask.less";
@ -538,60 +539,91 @@
margin: -3px 4px 0 -24px;
}
.modal-dialog {
margin-top: 100px;
.share-buttons {
height: 40px;
text-align: center;
span {
display: inline-block;
margin: 0 7px;
cursor: pointer;
}
}
.share-link {
margin: 0 0 15px 0;
}
}
.modal-header {
padding-bottom: 10px;
text-align: center;
.close {
margin-top: 0;
opacity: 0.5;
&:hover {
opacity: 0.7;
}
}
}
.modal-body {
padding: 20px;
}
.modal-footer {
text-align: center;
}
#dlg-share, #dlg-embed {
.modal-dialog {
width: 330px;
}
.modal-dlg {
textarea {
width: 288px;
.user-select(text);
width: 100%;
resize: none;
cursor: auto;
font-size: 1em;
border-radius: 0;
margin-bottom: 5px;
border: @scaled-one-px-value-ie solid @border-regular-control-ie;
border: @scaled-one-px-value solid @border-regular-control;
height: 100%;
&.disabled {
opacity: @component-disabled-opacity;
cursor: default !important;
}
}
label {
.font-size-normal();
font-weight: normal;
&.input-label{
margin-bottom: 0;
vertical-align: middle;
}
&.header {
font-weight: bold;
}
}
}
//.modal-dialog {
// margin-top: 100px;
// .share-buttons {
// height: 40px;
// text-align: center;
//
// span {
// display: inline-block;
// margin: 0 7px;
// cursor: pointer;
// }
// }
//
// .share-link {
// margin: 0 0 15px 0;
// }
//}
//.modal-header {
// padding-bottom: 10px;
// text-align: center;
//
// .close {
// margin-top: 0;
// opacity: 0.5;
//
// &:hover {
// opacity: 0.7;
// }
// }
//}
//
//.modal-body {
// padding: 20px;
//}
//.modal-footer {
// text-align: center;
//}
//
//#dlg-share, #dlg-embed {
// .modal-dialog {
// width: 330px;
// }
//
// textarea {
// width: 288px;
// resize: none;
// cursor: auto;
// font-size: 1em;
// border-radius: 0;
// }
//}
.masked {
background-color: transparent;
border-color: transparent;

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

@ -10,6 +10,7 @@ define([
'common/main/lib/component/Calendar',
'common/main/lib/util/LocalStorage',
'common/main/lib/util/Shortcuts',
'common/forms/lib/view/modals',
'documenteditor/forms/app/view/ApplicationView'
], function (Viewport) {
'use strict';
@ -1007,6 +1008,9 @@ define([
case 'share':
break;
case 'embed':
(new Common.Views.ShareDialog({
embedConfig: this.embedConfig
})).show();
break;
}
},

3
apps/documenteditor/forms/app/view/ApplicationView.js
View file

@ -5,8 +5,7 @@ define([
'common/main/lib/util/utils',
'common/main/lib/component/InputField',
'common/main/lib/component/Button',
'common/main/lib/component/Menu',
'common/main/lib/component/Calendar'
'common/main/lib/component/Menu'
], function ($, _, Backbone) {
'use strict';

1
apps/documenteditor/forms/app_dev.js
View file

@ -140,6 +140,7 @@ require([
'documenteditor/forms/app/view/ApplicationView',
'common/main/lib/util/utils',
'common/main/lib/util/LocalStorage',
'common/forms/lib/view/modals'
], function() {
window.compareVersions = true;
app.start();