[DE] Added modal for input password in embed mode

This commit is contained in:
Alexei Koshelev
2023-07-11 18:37:18 +03:00
parent 6b87a53598
commit b59d6e89aa
4 changed files with 92 additions and 6 deletions

View File

@ -35,7 +35,7 @@
!common.controller && (common.controller = {});
common.controller.modals = new(function() {
var $dlgShare, $dlgEmbed;
var $dlgShare, $dlgEmbed, $dlgPassword;
var appConfig;
var embedCode = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="{embed-url}" width="{width}" height="{height}"></iframe>',
minEmbedWidth = 400,
@ -104,6 +104,39 @@
});
};
var createDlgPassword = function (submitCallback) {
var delayFocus = 500;
if(!$dlgPassword) {
var submit = function() {
var inputVal = $dlgPassword.find('#password-input').val();
if (submitCallback && inputVal.length > 0) {
submitCallback($dlgPassword.find('#password-input').val());
$dlgPassword.modal('hide');
}
};
$dlgPassword = common.view.modals.create('password');
$dlgPassword.modal({backdrop: 'static', keyboard: false})
$dlgPassword.modal('show');
$dlgPassword.find('#password-btn').on('click', function() {
submit();
});
$dlgPassword.find('#password-input').keyup(function(e){
if(e.key == "Enter") {
submit();
}
});
} else {
$dlgPassword.find('#password-input').val('');
setTimeout(function() {
$dlgPassword.modal('show');
}, 200);
delayFocus = 700;
}
setTimeout(function() {
$dlgPassword.find('#password-input').focus();
}, delayFocus);
};
function updateEmbedCode(){
var $txtwidth = $dlgEmbed.find('#txt-embed-width');
var $txtheight = $dlgEmbed.find('#txt-embed-height');
@ -145,8 +178,9 @@
};
return {
init: function(config) { appConfig = config; }
, attach: attachToView
init: function(config) { appConfig = config; },
attach: attachToView,
createDlgPassword: createDlgPassword
};
});
}();

View File

@ -65,6 +65,12 @@ common.view.modals = new(function() {
'<span class="right caption">{height}:</span>' +
'</div>' +
'<textarea id="txt-embed-url" rows="4" class="form-control" readonly></textarea>';
var _tplbody_password = '<div class="password-body">' +
'<label>{label}</label>' +
'<input id="password-input" class="form-control" type="password"/>' +
'{button}' +
'</div>';
return {
create: function(name, parent) {
@ -92,8 +98,7 @@ common.view.modals = new(function() {
.replace(/\{footer}/, '<button id="btn-copyshort" type="button" class="btn">' + this.txtCopy + '</button>'))
.appendTo(parent)
.attr('id', 'dlg-share');
} else
if (name == 'embed') {
} else if (name == 'embed') {
_$dlg = $(tplDialog
.replace(/\{title}/, this.txtEmbed)
.replace(/\{body}/, _tplbody_embed)
@ -102,6 +107,17 @@ common.view.modals = new(function() {
.replace(/\{footer}/, '<button id="btn-copyembed" type="button" class="btn">' + this.txtCopy + '</button>'))
.appendTo(parent)
.attr('id', 'dlg-embed');
} else if(name == 'password') {
_$dlg = $(tplDialog
.replace(/\{title}/, this.txtPasswordTitle)
.replace(/\{body}/, _tplbody_password)
.replace(/\{label}/, this.txtPassword)
.replace(/\{button}/, '<button id="password-btn" type="button" class="btn">' + this.txtOk + '</button>'))
.appendTo(parent)
.attr('id', 'dlg-password');
_$dlg.find('button.close').remove();
_$dlg.find('.modal-footer').remove();
}
return _$dlg;
@ -110,6 +126,9 @@ common.view.modals = new(function() {
txtHeight: 'Height',
txtShare: 'Share Link',
txtCopy: 'Copy to clipboard',
txtEmbed: 'Embed'
txtEmbed: 'Embed',
txtPasswordTitle: 'Protected file',
txtPassword: 'Enter a password to open the file',
txtOk: 'OK',
};
})();

View File

@ -646,6 +646,27 @@
}
}
#dlg-password {
.password-body {
display: flex;
flex-direction: column;
}
.modal-dialog {
width: 300px;
}
label {
font-weight: 500;
}
#password-btn {
padding: 6px 40px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
}
.dropdown-menu {
> li > a {
padding: 8px 20px 8px 28px;

View File

@ -674,6 +674,17 @@ DE.ApplicationController = new(function(){
me.loadMask && me.loadMask.setTitle(me.textLoadingDocument + ': ' + common.utils.fixedDigits(Math.min(Math.round(proc*100), 100), 3, " ") + '%');
}
function onAdvancedOptions(type, advOptions, mode, formatOptions) {
if (type == Asc.c_oAscAdvancedOptionsID.DRM) {
var submitPassword = function(val) {
api && api.asc_setAdvancedOptions(Asc.c_oAscAdvancedOptionsID.DRM, new Asc.asc_CDRMAdvancedOptions(val));
};
common.controller.modals.createDlgPassword(submitPassword);
hidePreloader();
onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
}
}
function onError(id, level, errData) {
if (id == Asc.c_oAscError.ID.LoadingScriptError) {
$('#id-critical-error-title').text(me.criticalErrorTitle);
@ -926,6 +937,7 @@ DE.ApplicationController = new(function(){
api.asc_registerCallback('asc_onError', onError);
api.asc_registerCallback('asc_onDocumentContentReady', onDocumentContentReady);
api.asc_registerCallback('asc_onOpenDocumentProgress', onOpenDocument);
api.asc_registerCallback('asc_onAdvancedOptions', onAdvancedOptions);
api.asc_registerCallback('asc_onCountPages', onCountPages);
// api.asc_registerCallback('OnCurrentVisiblePage', onCurrentPage);