[DE] Support for form tips
This commit is contained in:
parent
9b6f9afe22
commit
d93a3740e5
|
@ -687,6 +687,7 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
box-shadow: 0 6px 12px rgba(0,0,0,0.175);
|
box-shadow: 0 6px 12px rgba(0,0,0,0.175);
|
||||||
|
max-width: 350px;
|
||||||
|
|
||||||
padding: 5px 12px;
|
padding: 5px 12px;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
|
|
|
@ -16,7 +16,10 @@ define([
|
||||||
labelDocName,
|
labelDocName,
|
||||||
btnSubmit,
|
btnSubmit,
|
||||||
_submitFail, $submitedTooltip, $requiredTooltip,
|
_submitFail, $submitedTooltip, $requiredTooltip,
|
||||||
$ttEl, $tooltip;
|
$ttEl, $tooltip,
|
||||||
|
$listControlMenu, listControlItems = [], listObj,
|
||||||
|
bodyWidth = 0,
|
||||||
|
ttOffset = [0, -10];
|
||||||
|
|
||||||
DE.Controllers.ApplicationController = Backbone.Controller.extend(_.assign({
|
DE.Controllers.ApplicationController = Backbone.Controller.extend(_.assign({
|
||||||
views: [
|
views: [
|
||||||
|
@ -173,6 +176,7 @@ define([
|
||||||
|
|
||||||
onDocumentResize: function() {
|
onDocumentResize: function() {
|
||||||
this.api && this.api.Resize();
|
this.api && this.api.Resize();
|
||||||
|
bodyWidth = $('body').width();
|
||||||
},
|
},
|
||||||
|
|
||||||
onBeforeUnload: function() {
|
onBeforeUnload: function() {
|
||||||
|
@ -324,10 +328,11 @@ define([
|
||||||
$('#toolbar').addClass('bottom');
|
$('#toolbar').addClass('bottom');
|
||||||
this.boxSdk.addClass('bottom');
|
this.boxSdk.addClass('bottom');
|
||||||
$('#box-tools').removeClass('dropdown').addClass('dropup');
|
$('#box-tools').removeClass('dropdown').addClass('dropup');
|
||||||
// ttOffset[1] = -40;
|
ttOffset[1] = -40;
|
||||||
} else {
|
} else {
|
||||||
$('#toolbar').addClass('top');
|
$('#toolbar').addClass('top');
|
||||||
this.boxSdk.addClass('top');
|
this.boxSdk.addClass('top');
|
||||||
|
ttOffset[1] = 40;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.appOptions.customization = this.editorConfig.customization;
|
this.appOptions.customization = this.editorConfig.customization;
|
||||||
|
@ -665,34 +670,50 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
onDocMouseMove: function(data) {
|
onDocMouseMove: function(data) {
|
||||||
|
var me = this;
|
||||||
if (data) {
|
if (data) {
|
||||||
if (data.get_Type() == 1) { // hyperlink
|
var type = data.get_Type();
|
||||||
|
if (type == Asc.c_oAscMouseMoveDataTypes.Hyperlink || type==Asc.c_oAscMouseMoveDataTypes.Form) { // hyperlink
|
||||||
this.isHideBodyTip = false;
|
this.isHideBodyTip = false;
|
||||||
|
|
||||||
|
var str = (type == Asc.c_oAscMouseMoveDataTypes.Hyperlink) ? me.txtPressLink : data.get_FormHelpText();
|
||||||
|
if (str.length>500)
|
||||||
|
str = str.substr(0, 500) + '...';
|
||||||
|
str = Common.Utils.String.htmlEncode(str);
|
||||||
|
|
||||||
if ( !$ttEl ) {
|
if ( !$ttEl ) {
|
||||||
$ttEl = $('.hyperlink-tooltip');
|
$ttEl = $('.hyperlink-tooltip');
|
||||||
$ttEl.tooltip({'container':'body', 'trigger':'manual'});
|
$ttEl.tooltip({'container':'body', 'trigger':'manual'});
|
||||||
$ttEl.on('shown.bs.tooltip', function(e) {
|
|
||||||
$tooltip = $ttEl.data('bs.tooltip').tip();
|
|
||||||
|
|
||||||
$tooltip.css({
|
|
||||||
left: $ttEl.ttpos[0] + ttOffset[0],
|
|
||||||
top: $ttEl.ttpos[1] + ttOffset[1]
|
|
||||||
});
|
|
||||||
|
|
||||||
$tooltip.find('.tooltip-arrow').css({left: 10});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if ( !$tooltip ) {
|
$ttEl.ttpos = [data.get_X(), data.get_Y()];
|
||||||
$ttEl.ttpos = [data.get_X(), data.get_Y()];
|
if ( !$tooltip)
|
||||||
$ttEl.tooltip('show');
|
$tooltip = $ttEl.data('bs.tooltip').tip();
|
||||||
} else {
|
|
||||||
$tooltip.css({
|
if (!$tooltip.is(':visible')) {
|
||||||
left:data.get_X() + ttOffset[0],
|
var tip = $ttEl.data('bs.tooltip');
|
||||||
top:data.get_Y() + ttOffset[1]
|
tip.options.title = str;
|
||||||
});
|
tip.show([-1000, -1000]);
|
||||||
|
} else
|
||||||
|
$tooltip.find('.tooltip-inner')['text'](str);
|
||||||
|
|
||||||
|
var ttHeight = $tooltip.height(),
|
||||||
|
ttWidth = $tooltip.width();
|
||||||
|
!bodyWidth && (bodyWidth = $('body').width());
|
||||||
|
|
||||||
|
$ttEl.ttpos[1] -= (ttHeight - ttOffset[1] + 20);
|
||||||
|
if ($ttEl.ttpos[0] + ttWidth + 10 >bodyWidth) {
|
||||||
|
$ttEl.ttpos[0] = bodyWidth - ttWidth - 5;
|
||||||
|
if ($ttEl.ttpos[1] < 0)
|
||||||
|
$ttEl.ttpos[1] += ttHeight + ttOffset[1] + 20;
|
||||||
|
} else if ($ttEl.ttpos[1] < 0) {
|
||||||
|
$ttEl.ttpos[1] = 0;
|
||||||
|
$ttEl.ttpos[0] += 20;
|
||||||
}
|
}
|
||||||
|
$tooltip.css({
|
||||||
|
left: $ttEl.ttpos[0],
|
||||||
|
top: $ttEl.ttpos[1]
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -784,6 +805,99 @@ define([
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
onShowContentControlsActions: function(obj, x, y) {
|
||||||
|
var me = this;
|
||||||
|
switch (obj.type) {
|
||||||
|
case Asc.c_oAscContentControlSpecificType.Picture:
|
||||||
|
if (obj.pr && obj.pr.get_Lock) {
|
||||||
|
var lock = obj.pr.get_Lock();
|
||||||
|
if (lock == Asc.c_oAscSdtLockType.SdtContentLocked || lock==Asc.c_oAscSdtLockType.ContentLocked)
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.api.asc_addImage(obj);
|
||||||
|
setTimeout(function(){
|
||||||
|
me.api.asc_UncheckContentControlButtons();
|
||||||
|
}, 500);
|
||||||
|
break;
|
||||||
|
case Asc.c_oAscContentControlSpecificType.DropDownList:
|
||||||
|
case Asc.c_oAscContentControlSpecificType.ComboBox:
|
||||||
|
this.onShowListActions(obj, x, y);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onHideContentControlsActions: function() {
|
||||||
|
$listControlMenu && $listControlMenu.hide();
|
||||||
|
this.api.asc_UncheckContentControlButtons();
|
||||||
|
},
|
||||||
|
|
||||||
|
onShowListActions: function(obj, x, y) {
|
||||||
|
var type = obj.type,
|
||||||
|
props = obj.pr,
|
||||||
|
specProps = (type == Asc.c_oAscContentControlSpecificType.ComboBox) ? props.get_ComboBoxPr() : props.get_DropDownListPr(),
|
||||||
|
isForm = !!props.get_FormPr(),
|
||||||
|
me = this;
|
||||||
|
|
||||||
|
var menuContainer = this.view.getMenuForm();
|
||||||
|
|
||||||
|
if (!$listControlMenu) {
|
||||||
|
$listControlMenu = menuContainer.find('ul');
|
||||||
|
$listControlMenu.on('click', 'li', function(e) {
|
||||||
|
var value = $(e.target).attr('value');
|
||||||
|
if (value) {
|
||||||
|
value = parseInt(value);
|
||||||
|
setTimeout(function(){
|
||||||
|
(value!==-1) && me.api.asc_SelectContentControlListItem(listControlItems[value], listObj.get_InternalId());
|
||||||
|
}, 1);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
$('#editor_sdk').on('click', function(e){
|
||||||
|
if (e.target.localName == 'canvas') {
|
||||||
|
if (me._preventClick)
|
||||||
|
me._preventClick = false;
|
||||||
|
else {
|
||||||
|
$listControlMenu && $listControlMenu.hide();
|
||||||
|
me.api.asc_UncheckContentControlButtons();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
$listControlMenu.find('li').remove();
|
||||||
|
listControlItems = [];
|
||||||
|
listObj = props;
|
||||||
|
|
||||||
|
if (specProps) {
|
||||||
|
var k = 0;
|
||||||
|
if (isForm){ // for dropdown and combobox form control always add placeholder item
|
||||||
|
var text = props.get_PlaceholderText();
|
||||||
|
$listControlMenu.append('<li><a tabindex="-1" type="menuitem" style="opacity: 0.6" value="0">' +
|
||||||
|
((text.trim()!=='') ? text : me.txtEmpty) +
|
||||||
|
'</a></li>');
|
||||||
|
listControlItems.push('');
|
||||||
|
}
|
||||||
|
var count = specProps.get_ItemsCount();
|
||||||
|
k = listControlItems.length;
|
||||||
|
for (var i=0; i<count; i++) {
|
||||||
|
if (specProps.get_ItemValue(i)!=='' || !isForm) {
|
||||||
|
$listControlMenu.append('<li><a tabindex="-1" type="menuitem" value="' + (i+k) + '">' +
|
||||||
|
Common.Utils.String.htmlEncode(specProps.get_ItemDisplayText(i)) +
|
||||||
|
'</a></li>');
|
||||||
|
listControlItems.push(specProps.get_ItemValue(i));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!isForm && listControlItems.length<1) {
|
||||||
|
$listControlMenu.append('<li><a tabindex="-1" type="menuitem" value="0">' +
|
||||||
|
me.txtEmpty +
|
||||||
|
'</a></li>');
|
||||||
|
listControlItems.push(-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
menuContainer.css({left: x, top : y});
|
||||||
|
me._preventClick = true;
|
||||||
|
$listControlMenu.show();
|
||||||
|
},
|
||||||
|
|
||||||
onDocumentContentReady: function() {
|
onDocumentContentReady: function() {
|
||||||
var me = this;
|
var me = this;
|
||||||
|
|
||||||
|
@ -859,6 +973,11 @@ define([
|
||||||
this.api.asc_registerCallback('asc_onPrint', _.bind(this.onPrint, this));
|
this.api.asc_registerCallback('asc_onPrint', _.bind(this.onPrint, this));
|
||||||
this.api.asc_registerCallback('asc_onPrintUrl', _.bind(this.onPrintUrl, this));
|
this.api.asc_registerCallback('asc_onPrintUrl', _.bind(this.onPrintUrl, this));
|
||||||
this.api.asc_registerCallback('sync_onAllRequiredFormsFilled', _.bind(this.onFillRequiredFields, this));
|
this.api.asc_registerCallback('sync_onAllRequiredFormsFilled', _.bind(this.onFillRequiredFields, this));
|
||||||
|
if (this.appOptions.canFillForms) {
|
||||||
|
this.api.asc_registerCallback('asc_onShowContentControlsActions', _.bind(this.onShowContentControlsActions, this));
|
||||||
|
this.api.asc_registerCallback('asc_onHideContentControlsActions', _.bind(this.onHideContentControlsActions, this));
|
||||||
|
// this.api.asc_SetHighlightRequiredFields(true);
|
||||||
|
}
|
||||||
|
|
||||||
Common.Gateway.on('processmouse', _.bind(this.onProcessMouse, this));
|
Common.Gateway.on('processmouse', _.bind(this.onProcessMouse, this));
|
||||||
Common.Gateway.on('downloadas', _.bind(this.onDownloadAs, this));
|
Common.Gateway.on('downloadas', _.bind(this.onDownloadAs, this));
|
||||||
|
@ -1024,6 +1143,8 @@ define([
|
||||||
textRequired: 'Fill all required fields to send form.',
|
textRequired: 'Fill all required fields to send form.',
|
||||||
textGotIt: 'Got it',
|
textGotIt: 'Got it',
|
||||||
errorForceSave: "An error occurred while saving the file. Please use the 'Download as' option to save the file to your computer hard drive or try again later.",
|
errorForceSave: "An error occurred while saving the file. Please use the 'Download as' option to save the file to your computer hard drive or try again later.",
|
||||||
textCloseTip: "Click to close the tip."
|
textCloseTip: "Click to close the tip.",
|
||||||
|
txtPressLink: 'Press Ctrl and click link',
|
||||||
|
txtEmpty: '(Empty)'
|
||||||
}, DE.Controllers.ApplicationController));
|
}, DE.Controllers.ApplicationController));
|
||||||
});
|
});
|
||||||
|
|
|
@ -10,7 +10,8 @@ define([
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var $btnTools;
|
var $btnTools;
|
||||||
|
var $menuForm;
|
||||||
|
|
||||||
DE.Views.ApplicationView = Backbone.View.extend({
|
DE.Views.ApplicationView = Backbone.View.extend({
|
||||||
// Render layout
|
// Render layout
|
||||||
render: function() {
|
render: function() {
|
||||||
|
@ -38,6 +39,17 @@ define([
|
||||||
return $btnTools.parent().find(name);
|
return $btnTools.parent().find(name);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
getMenuForm: function() {
|
||||||
|
if (!$menuForm) {
|
||||||
|
$menuForm = $('<div id="menu-container-form" style="position: absolute; z-index: 10000;" data-value="prevent-canvas-click">' +
|
||||||
|
'<div class="dropdown-toggle" data-toggle="dropdown"></div>' +
|
||||||
|
'<ul class="dropdown-menu" oo_editor_input="true" role="menu" style="right: 0; left: auto;max-height: 200px; overflow-y: auto;"></ul>' +
|
||||||
|
'</div>');
|
||||||
|
$('#editor_sdk').append($menuForm);
|
||||||
|
}
|
||||||
|
return $menuForm;
|
||||||
|
},
|
||||||
|
|
||||||
txtDownload: 'Download',
|
txtDownload: 'Download',
|
||||||
txtPrint: 'Print',
|
txtPrint: 'Print',
|
||||||
txtShare: 'Share',
|
txtShare: 'Share',
|
||||||
|
|
|
@ -222,7 +222,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
|
<div class="hyperlink-tooltip" data-toggle="tooltip" title="" style="display:none;"></div>
|
||||||
|
|
||||||
<!--vendor-->
|
<!--vendor-->
|
||||||
<script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
|
<script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
|
||||||
|
|
|
@ -34,6 +34,8 @@
|
||||||
"DE.ApplicationController.unknownErrorText": "Unknown error.",
|
"DE.ApplicationController.unknownErrorText": "Unknown error.",
|
||||||
"DE.ApplicationController.unsupportedBrowserErrorText": "Your browser is not supported.",
|
"DE.ApplicationController.unsupportedBrowserErrorText": "Your browser is not supported.",
|
||||||
"DE.ApplicationController.waitText": "Please, wait...",
|
"DE.ApplicationController.waitText": "Please, wait...",
|
||||||
|
"DE.ApplicationController.txtEmpty": "(Empty)",
|
||||||
|
"DE.ApplicationController.txtPressLink": "Press Ctrl and click link",
|
||||||
"DE.ApplicationView.txtDownload": "Download",
|
"DE.ApplicationView.txtDownload": "Download",
|
||||||
"DE.ApplicationView.txtDownloadDocx": "Download as docx",
|
"DE.ApplicationView.txtDownloadDocx": "Download as docx",
|
||||||
"DE.ApplicationView.txtDownloadPdf": "Download as pdf",
|
"DE.ApplicationView.txtDownloadPdf": "Download as pdf",
|
||||||
|
|
Loading…
Reference in a new issue