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

[PE][SSE] Change interface for creating hyperlinks.

Browse source
This commit is contained in:
Julia Radzhabova 2018-04-03 13:22:24 +03:00
parent 4998d4b774
commit 23a49167f1
5 changed files with 78 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
apps/documenteditor/main/app/view/HyperlinkSettingsDialog.js
View file

@ -98,7 +98,6 @@ define([
this.options.tpl = _.template(this.template)(this.options); this.options.tpl = _.template(this.template)(this.options);
this.api = this.options.api; this.api = this.options.api;
this._originalProps = null; this._originalProps = null;
this.linkType = c_oHyperlinkType.WebLink;
Common.UI.Window.prototype.initialize.call(this, this.options); Common.UI.Window.prototype.initialize.call(this, this.options);
}, },
@ -257,8 +256,6 @@ define([
} else } else
this.btnOk.setDisabled(false); this.btnOk.setDisabled(false);
this.linkType = value;
}, },
onLinkTypeClick: function(type, btn, event) { onLinkTypeClick: function(type, btn, event) {
@ -329,7 +326,7 @@ define([
props = new Asc.CHyperlinkProperty(), props = new Asc.CHyperlinkProperty(),
display = ''; display = '';
if (this.linkType == c_oHyperlinkType.WebLink) { if (this.btnExternal.isActive()) {//WebLink
var url = $.trim(me.inputUrl.getValue()); var url = $.trim(me.inputUrl.getValue());
if (! /(((^https?)|(^ftp)):\/\/)|(^mailto:)/i.test(url) ) if (! /(((^https?)|(^ftp)):\/\/)|(^mailto:)/i.test(url) )
@ -380,7 +377,7 @@ define([
_handleInput: function(state) { _handleInput: function(state) {
if (this.options.handler) { if (this.options.handler) {
if (state == 'ok') { if (state == 'ok') {
if (this.linkType == c_oHyperlinkType.WebLink) { if (this.btnExternal.isActive()) {//WebLink
if (this.inputUrl.checkValidate() !== true) { if (this.inputUrl.checkValidate() !== true) {
this.inputUrl.cmpEl.find('input').focus(); this.inputUrl.cmpEl.find('input').focus();
return; return;

60
apps/presentationeditor/main/app/view/HyperlinkSettingsDialog.js
View file

@ -69,14 +69,14 @@ define([
}, options || {}); }, options || {});
this.template = [ this.template = [
'<div class="box" style="height: 270px;">', '<div class="box" style="height: 250px;">',
'<div class="input-row">', '<div class="input-row" style="margin-bottom: 10px;">',
'<label style="font-weight: bold;">' + this.textLinkType + '</label>', '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-external" style="border-top-right-radius: 0;border-bottom-right-radius: 0;">', this.textExternalLink,'</button>',
'<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-internal" style="border-top-left-radius: 0;border-bottom-left-radius: 0;">', this.textInternalLink,'</button>',
'</div>', '</div>',
'<div id="id-dlg-hyperlink-type" class="input-row" style="margin-bottom: 5px;"></div>',
'<div id="id-external-link">', '<div id="id-external-link">',
'<div class="input-row">', '<div class="input-row">',
'<label style="font-weight: bold;">' + this.strLinkTo + ' *</label>', '<label>' + this.strLinkTo + ' *</label>',
'</div>', '</div>',
'<div id="id-dlg-hyperlink-url" class="input-row" style="margin-bottom: 5px;"></div>', '<div id="id-dlg-hyperlink-url" class="input-row" style="margin-bottom: 5px;"></div>',
'</div>', '</div>',
@ -89,11 +89,11 @@ define([
'<div id="id-dlg-hyperlink-slide" style="display: inline-block;margin-bottom: 10px;"></div>', '<div id="id-dlg-hyperlink-slide" style="display: inline-block;margin-bottom: 10px;"></div>',
'</div>', '</div>',
'<div class="input-row">', '<div class="input-row">',
'<label style="font-weight: bold;">' + this.strDisplay + '</label>', '<label>' + this.strDisplay + '</label>',
'</div>', '</div>',
'<div id="id-dlg-hyperlink-display" class="input-row" style="margin-bottom: 5px;"></div>', '<div id="id-dlg-hyperlink-display" class="input-row" style="margin-bottom: 5px;"></div>',
'<div class="input-row">', '<div class="input-row">',
'<label style="font-weight: bold;">' + this.textTipText + '</label>', '<label>' + this.textTipText + '</label>',
'</div>', '</div>',
'<div id="id-dlg-hyperlink-tip" class="input-row" style="margin-bottom: 5px;"></div>', '<div id="id-dlg-hyperlink-tip" class="input-row" style="margin-bottom: 5px;"></div>',
'</div>', '</div>',
@ -116,23 +116,22 @@ define([
var me = this, var me = this,
$window = this.getChild(); $window = this.getChild();
me._arrTypeSrc = [ me.btnExternal = new Common.UI.Button({
{displayValue: me.textInternalLink, value: c_oHyperlinkType.InternalLink}, el: $('#id-dlg-hyperlink-external'),
{displayValue: me.textExternalLink, value: c_oHyperlinkType.WebLink} enableToggle: true,
]; toggleGroup: 'hyperlink-type',
allowDepress: false,
me.cmbLinkType = new Common.UI.ComboBox({ pressed: true
el: $('#id-dlg-hyperlink-type'),
cls: 'input-group-nr',
style: 'width: 100%;',
menuStyle: 'min-width: 318px;',
editable: false,
data: this._arrTypeSrc
}); });
me.cmbLinkType.setValue(me._arrTypeSrc[1].value); me.btnExternal.on('click', _.bind(me.onLinkTypeClick, me, c_oHyperlinkType.WebLink));
me.cmbLinkType.on('selected', _.bind(function(combo, record) {
this.ShowHideElem(record.value); me.btnInternal = new Common.UI.Button({
}, me)); el: $('#id-dlg-hyperlink-internal'),
enableToggle: true,
toggleGroup: 'hyperlink-type',
allowDepress: false
});
me.btnInternal.on('click', _.bind(me.onLinkTypeClick, me, c_oHyperlinkType.InternalLink));
me.inputUrl = new Common.UI.InputField({ me.inputUrl = new Common.UI.InputField({
el : $('#id-dlg-hyperlink-url'), el : $('#id-dlg-hyperlink-url'),
@ -217,7 +216,7 @@ define([
var me = this; var me = this;
var type = me.parseUrl(props.get_Value()); var type = me.parseUrl(props.get_Value());
me.cmbLinkType.setValue(type); (type == c_oHyperlinkType.WebLink) ? me.btnExternal.toggle(true) : me.btnInternal.toggle(true);
me.ShowHideElem(type); me.ShowHideElem(type);
if (props.get_Text()!==null) { if (props.get_Text()!==null) {
@ -239,7 +238,7 @@ define([
var me = this, var me = this,
props = new Asc.CHyperlinkProperty(); props = new Asc.CHyperlinkProperty();
var def_display = ''; var def_display = '';
if (me.cmbLinkType.getValue() == c_oHyperlinkType.InternalLink) { if (this.btnInternal.isActive()) {//InternalLink
var url = "ppaction://hlink"; var url = "ppaction://hlink";
var tip = ''; var tip = '';
var txttip = me.inputTip.getValue(); var txttip = me.inputTip.getValue();
@ -298,7 +297,7 @@ define([
_handleInput: function(state) { _handleInput: function(state) {
if (this.options.handler) { if (this.options.handler) {
if (state == 'ok') { if (state == 'ok') {
var checkurl = (this.cmbLinkType.getValue() == c_oHyperlinkType.WebLink) ? this.inputUrl.checkValidate() : true, var checkurl = (this.btnExternal.isActive()) ? this.inputUrl.checkValidate() : true,
checkdisp = this.inputDisplay.checkValidate(); checkdisp = this.inputDisplay.checkValidate();
if (checkurl !== true) { if (checkurl !== true) {
this.inputUrl.cmpEl.find('input').focus(); this.inputUrl.cmpEl.find('input').focus();
@ -321,6 +320,10 @@ define([
this.internalPanel.toggleClass('hidden', value !== c_oHyperlinkType.InternalLink); this.internalPanel.toggleClass('hidden', value !== c_oHyperlinkType.InternalLink);
}, },
onLinkTypeClick: function(type, btn, event) {
this.ShowHideElem(type);
},
parseUrl: function(url) { parseUrl: function(url) {
if (url===null || url===undefined || url=='' ) if (url===null || url===undefined || url=='' )
return c_oHyperlinkType.WebLink; return c_oHyperlinkType.WebLink;
@ -364,13 +367,12 @@ define([
}, },
textTitle: 'Hyperlink Settings', textTitle: 'Hyperlink Settings',
textInternalLink: 'Place In This Document', textInternalLink: 'Slide In This Presentation',
textExternalLink: 'File or Web Page', textExternalLink: 'External Link',
textEmptyLink: 'Enter link here', textEmptyLink: 'Enter link here',
textEmptyDesc: 'Enter caption here', textEmptyDesc: 'Enter caption here',
textEmptyTooltip: 'Enter tooltip here', textEmptyTooltip: 'Enter tooltip here',
txtSlide: 'Slide', txtSlide: 'Slide',
textLinkType: 'Link Type',
strDisplay: 'Display', strDisplay: 'Display',
textTipText: 'Screen Tip Text', textTipText: 'Screen Tip Text',
strLinkTo: 'Link To', strLinkTo: 'Link To',

2
apps/presentationeditor/main/locale/en.json
View file

@ -980,7 +980,7 @@
"PE.Views.HyperlinkSettingsDialog.textEmptyTooltip": "Enter tooltip here", "PE.Views.HyperlinkSettingsDialog.textEmptyTooltip": "Enter tooltip here",
"PE.Views.HyperlinkSettingsDialog.textExternalLink": "External Link", "PE.Views.HyperlinkSettingsDialog.textExternalLink": "External Link",
"PE.Views.HyperlinkSettingsDialog.textInternalLink": "Slide In This Presentation", "PE.Views.HyperlinkSettingsDialog.textInternalLink": "Slide In This Presentation",
"PE.Views.HyperlinkSettingsDialog.textLinkType": "Link Type", "del_PE.Views.HyperlinkSettingsDialog.textLinkType": "Link Type",
"PE.Views.HyperlinkSettingsDialog.textTipText": "ScreenTip Text", "PE.Views.HyperlinkSettingsDialog.textTipText": "ScreenTip Text",
"PE.Views.HyperlinkSettingsDialog.textTitle": "Hyperlink Settings", "PE.Views.HyperlinkSettingsDialog.textTitle": "Hyperlink Settings",
"PE.Views.HyperlinkSettingsDialog.txtEmpty": "This field is required", "PE.Views.HyperlinkSettingsDialog.txtEmpty": "This field is required",

76
apps/spreadsheeteditor/main/app/view/HyperlinkSettingsDialog.js
View file

@ -63,18 +63,17 @@ define([
this.template = [ this.template = [
'<div class="box">', '<div class="box">',
'<div class="input-row">', '<div class="input-row" style="margin-bottom: 10px;">',
'<label>' + this.textLinkType + '</label>', '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-external" style="border-top-right-radius: 0;border-bottom-right-radius: 0;">', this.textExternalLink,'</button>',
'<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-internal" style="border-top-left-radius: 0;border-bottom-left-radius: 0;">', this.textInternalLink,'</button>',
'</div>', '</div>',
'<div class="input-row" id="id-dlg-hyperlink-type" style="margin-bottom: 5px;">', '<div id="id-external-link">',
'</div>',
'<div id="id-dlg-hyperlink-external">',
'<div class="input-row">', '<div class="input-row">',
'<label>' + this.strLinkTo + ' *</label>', '<label>' + this.strLinkTo + ' *</label>',
'</div>', '</div>',
'<div id="id-dlg-hyperlink-url" class="input-row" style="margin-bottom: 5px;"></div>', '<div id="id-dlg-hyperlink-url" class="input-row" style="margin-bottom: 5px;"></div>',
'</div>', '</div>',
'<div id="id-dlg-hyperlink-internal" style="display: none;">', '<div id="id-internal-link" class="hidden">',
'<div class="input-row">', '<div class="input-row">',
'<label style="width: 50%;">' + this.strSheet + '</label>', '<label style="width: 50%;">' + this.strSheet + '</label>',
'<label style="width: 50%;">' + this.strRange + ' *</label>', '<label style="width: 50%;">' + this.strRange + ' *</label>',
@ -111,20 +110,22 @@ define([
var $window = this.getChild(), var $window = this.getChild(),
me = this; me = this;
me.cmbLinkType = new Common.UI.ComboBox({ me.btnExternal = new Common.UI.Button({
el : $('#id-dlg-hyperlink-type'), el: $('#id-dlg-hyperlink-external'),
cls : 'input-group-nr', enableToggle: true,
editable: false, toggleGroup: 'hyperlink-type',
menuStyle: 'min-width: 100%;', allowDepress: false,
data : [ pressed: true
{displayValue: this.textInternalLink, value: Asc.c_oAscHyperlinkType.RangeLink},
{displayValue: this.textExternalLink, value: Asc.c_oAscHyperlinkType.WebLink}
]
}).on('selected', function(combo, record) {
$('#id-dlg-hyperlink-external')[record.value == Asc.c_oAscHyperlinkType.WebLink ? 'show' : 'hide']();
$('#id-dlg-hyperlink-internal')[record.value != Asc.c_oAscHyperlinkType.WebLink ? 'show' : 'hide']();
}); });
me.cmbLinkType.setValue(Asc.c_oAscHyperlinkType.WebLink); me.btnExternal.on('click', _.bind(me.onLinkTypeClick, me, Asc.c_oAscHyperlinkType.WebLink));
me.btnInternal = new Common.UI.Button({
el: $('#id-dlg-hyperlink-internal'),
enableToggle: true,
toggleGroup: 'hyperlink-type',
allowDepress: false
});
me.btnInternal.on('click', _.bind(me.onLinkTypeClick, me, Asc.c_oAscHyperlinkType.RangeLink));
me.cmbSheets = new Common.UI.ComboBox({ me.cmbSheets = new Common.UI.ComboBox({
el : $('#id-dlg-hyperlink-sheet'), el : $('#id-dlg-hyperlink-sheet'),
@ -182,6 +183,9 @@ define([
$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this)); $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
$window.find('input').on('keypress', _.bind(this.onKeyPress, this)); $window.find('input').on('keypress', _.bind(this.onKeyPress, this));
me.externalPanel = $window.find('#id-external-link');
me.internalPanel = $window.find('#id-internal-link');
}, },
show: function() { show: function() {
@ -198,20 +202,18 @@ define([
var me = this; var me = this;
this.cmbSheets.setData(settings.sheets); this.cmbSheets.setData(settings.sheets);
var type = (settings.props) ? settings.props.asc_getType() : Asc.c_oAscHyperlinkType.WebLink;
(type == Asc.c_oAscHyperlinkType.WebLink) ? me.btnExternal.toggle(true) : me.btnInternal.toggle(true);
me.ShowHideElem(type);
me.btnInternal.setDisabled(!settings.allowInternal && (type == Asc.c_oAscHyperlinkType.WebLink));
me.btnExternal.setDisabled(!settings.allowInternal && (type == Asc.c_oAscHyperlinkType.RangeLink));
if (!settings.props) { if (!settings.props) {
this.cmbLinkType.setValue(Asc.c_oAscHyperlinkType.WebLink);
this.cmbLinkType.setDisabled(!settings.allowInternal);
this.inputDisplay.setValue(settings.isLock ? this.textDefault : settings.text); this.inputDisplay.setValue(settings.isLock ? this.textDefault : settings.text);
this.focusedInput = this.inputUrl.cmpEl.find('input'); this.focusedInput = this.inputUrl.cmpEl.find('input');
this.cmbSheets.setValue(settings.currentSheet); this.cmbSheets.setValue(settings.currentSheet);
} else { } else {
this.cmbLinkType.setValue(settings.props.asc_getType()); if (type == Asc.c_oAscHyperlinkType.RangeLink) {
this.cmbLinkType.setDisabled(!settings.allowInternal);
if (settings.props.asc_getType() == Asc.c_oAscHyperlinkType.RangeLink) {
$('#id-dlg-hyperlink-external').hide();
$('#id-dlg-hyperlink-internal').show();
this.cmbSheets.setValue(settings.props.asc_getSheet()); this.cmbSheets.setValue(settings.props.asc_getSheet());
this.inputRange.setValue(settings.props.asc_getRange()); this.inputRange.setValue(settings.props.asc_getRange());
this.focusedInput = this.inputRange.cmpEl.find('input'); this.focusedInput = this.inputRange.cmpEl.find('input');
@ -231,9 +233,9 @@ define([
getSettings: function() { getSettings: function() {
var props = new Asc.asc_CHyperlink(), var props = new Asc.asc_CHyperlink(),
def_display = ""; def_display = "";
props.asc_setType(this.cmbLinkType.getValue()); props.asc_setType(this.btnInternal.isActive() ? Asc.c_oAscHyperlinkType.RangeLink : Asc.c_oAscHyperlinkType.WebLink);
if (this.cmbLinkType.getValue() == Asc.c_oAscHyperlinkType.RangeLink) { if (this.btnInternal.isActive()) {
props.asc_setSheet(this.cmbSheets.getValue()); props.asc_setSheet(this.cmbSheets.getValue());
props.asc_setRange(this.inputRange.getValue()); props.asc_setRange(this.inputRange.getValue());
def_display = this.cmbSheets.getValue() + '!' + this.inputRange.getValue(); def_display = this.cmbSheets.getValue() + '!' + this.inputRange.getValue();
@ -273,8 +275,8 @@ define([
_handleInput: function(state) { _handleInput: function(state) {
if (this.options.handler) { if (this.options.handler) {
if (state == 'ok') { if (state == 'ok') {
var checkurl = (this.cmbLinkType.getValue() === Asc.c_oAscHyperlinkType.WebLink) ? this.inputUrl.checkValidate() : true, var checkurl = (this.btnExternal.isActive()) ? this.inputUrl.checkValidate() : true,
checkrange = (this.cmbLinkType.getValue() === Asc.c_oAscHyperlinkType.RangeLink) ? this.inputRange.checkValidate() : true, checkrange = (this.btnInternal.isActive()) ? this.inputRange.checkValidate() : true,
checkdisp = this.inputDisplay.checkValidate(); checkdisp = this.inputDisplay.checkValidate();
if (checkurl !== true) { if (checkurl !== true) {
this.inputUrl.cmpEl.find('input').focus(); this.inputUrl.cmpEl.find('input').focus();
@ -296,6 +298,15 @@ define([
this.close(); this.close();
}, },
ShowHideElem: function(value) {
this.externalPanel.toggleClass('hidden', value !== Asc.c_oAscHyperlinkType.WebLink);
this.internalPanel.toggleClass('hidden', value !== Asc.c_oAscHyperlinkType.RangeLink);
},
onLinkTypeClick: function(type, btn, event) {
this.ShowHideElem(type);
},
textTitle: 'Hyperlink Settings', textTitle: 'Hyperlink Settings',
textInternalLink: 'Internal Data Range', textInternalLink: 'Internal Data Range',
textExternalLink: 'Web Link', textExternalLink: 'Web Link',
@ -304,7 +315,6 @@ define([
textEmptyTooltip: 'Enter tooltip here', textEmptyTooltip: 'Enter tooltip here',
strSheet: 'Sheet', strSheet: 'Sheet',
strRange: 'Range', strRange: 'Range',
textLinkType: 'Link Type',
strDisplay: 'Display', strDisplay: 'Display',
textTipText: 'Screen Tip Text', textTipText: 'Screen Tip Text',
strLinkTo: 'Link To', strLinkTo: 'Link To',

2
apps/spreadsheeteditor/main/locale/en.json
View file

@ -1322,7 +1322,7 @@
"SSE.Views.HyperlinkSettingsDialog.textExternalLink": "External Link", "SSE.Views.HyperlinkSettingsDialog.textExternalLink": "External Link",
"SSE.Views.HyperlinkSettingsDialog.textInternalLink": "Internal Data Range", "SSE.Views.HyperlinkSettingsDialog.textInternalLink": "Internal Data Range",
"SSE.Views.HyperlinkSettingsDialog.textInvalidRange": "ERROR! Invalid cells range", "SSE.Views.HyperlinkSettingsDialog.textInvalidRange": "ERROR! Invalid cells range",
"SSE.Views.HyperlinkSettingsDialog.textLinkType": "Link Type", "del_SSE.Views.HyperlinkSettingsDialog.textLinkType": "Link Type",
"SSE.Views.HyperlinkSettingsDialog.textTipText": "ScreenTip Text", "SSE.Views.HyperlinkSettingsDialog.textTipText": "ScreenTip Text",
"SSE.Views.HyperlinkSettingsDialog.textTitle": "Hyperlink Settings", "SSE.Views.HyperlinkSettingsDialog.textTitle": "Hyperlink Settings",
"SSE.Views.HyperlinkSettingsDialog.txtEmpty": "This field is required", "SSE.Views.HyperlinkSettingsDialog.txtEmpty": "This field is required",