mirror of
https://github.com/ONLYOFFICE/web-apps.git
synced 2026-07-24 08:55:16 +08:00
[PDF] Show equation bar
This commit is contained in:
Julia Radzhabova
@ -333,8 +333,11 @@ define([
|
||||
},
|
||||
|
||||
applyEditorMode: function() {
|
||||
if (this.mode && this.mode.isPDFEdit && !this.documentHolder.editPDFModeMenu)
|
||||
if (this.mode && this.mode.isPDFEdit && !this.documentHolder.editPDFModeMenu) {
|
||||
this.documentHolder.createDelayedElementsPDFEditor();
|
||||
this.api.asc_registerCallback('asc_onShowMathTrack', _.bind(this.onShowMathTrack, this));
|
||||
this.api.asc_registerCallback('asc_onHideMathTrack', _.bind(this.onHideMathTrack, this));
|
||||
}
|
||||
},
|
||||
|
||||
fillFormsMenuProps: function(selectedElements) {
|
||||
@ -1451,6 +1454,187 @@ define([
|
||||
this._preventClick = true;
|
||||
},
|
||||
|
||||
onShowMathTrack: function(bounds) {
|
||||
if (this.mode && !this.mode.isPDFEdit) return;
|
||||
|
||||
this.lastMathTrackBounds = bounds;
|
||||
if (bounds[3] < 0 || Common.Utils.InternalSettings.get('pdfe-equation-toolbar-hide')) {
|
||||
this.onHideMathTrack();
|
||||
return;
|
||||
}
|
||||
var me = this,
|
||||
documentHolder = me.documentHolder,
|
||||
eqContainer = documentHolder.cmpEl.find('#equation-container');
|
||||
|
||||
// Prepare menu container
|
||||
if (eqContainer.length < 1) {
|
||||
var equationsStore = me.getApplication().getCollection('EquationGroups'),
|
||||
eqStr = '<div id="equation-container" style="position: absolute;">';
|
||||
|
||||
me.getApplication().getController('InsTab').onMathTypes(me.getApplication().getController('Toolbar')._equationTemp);
|
||||
|
||||
me.equationBtns = [];
|
||||
for (var i = 0; i < equationsStore.length; ++i) {
|
||||
eqStr += '<span id="id-document-holder-btn-equation-' + i + '"></span>';
|
||||
}
|
||||
eqStr += '<div class="separator"></div>';
|
||||
eqStr += '<span id="id-document-holder-btn-equation-settings"></span>';
|
||||
eqStr += '</div>';
|
||||
eqContainer = $(eqStr);
|
||||
documentHolder.cmpEl.append(eqContainer);
|
||||
var onShowBefore = function (menu) {
|
||||
var index = menu.options.value,
|
||||
group = equationsStore.at(index);
|
||||
var equationPicker = new Common.UI.DataViewSimple({
|
||||
el: $('#id-document-holder-btn-equation-menu-' + index, menu.cmpEl),
|
||||
parentMenu: menu,
|
||||
store: group.get('groupStore'),
|
||||
scrollAlwaysVisible: true,
|
||||
showLast: false,
|
||||
restoreHeight: 450,
|
||||
itemTemplate: _.template(
|
||||
'<div class="item-equation" style="" >' +
|
||||
'<div class="equation-icon" style="background-position:<%= posX %>px <%= posY %>px;width:<%= width %>px;height:<%= height %>px;" id="<%= id %>"></div>' +
|
||||
'</div>')
|
||||
});
|
||||
equationPicker.on('item:click', function(picker, item, record, e) {
|
||||
if (me.api) {
|
||||
if (record)
|
||||
me.api.asc_AddMath(record.get('data').equationType);
|
||||
}
|
||||
});
|
||||
menu.off('show:before', onShowBefore);
|
||||
};
|
||||
var bringForward = function (menu) {
|
||||
eqContainer.addClass('has-open-menu');
|
||||
};
|
||||
var sendBackward = function (menu) {
|
||||
eqContainer.removeClass('has-open-menu');
|
||||
};
|
||||
for (var i = 0; i < equationsStore.length; ++i) {
|
||||
var equationGroup = equationsStore.at(i);
|
||||
var btn = new Common.UI.Button({
|
||||
parentEl: $('#id-document-holder-btn-equation-' + i, documentHolder.cmpEl),
|
||||
cls : 'btn-toolbar no-caret',
|
||||
iconCls : 'svgicon ' + equationGroup.get('groupIcon'),
|
||||
hint : equationGroup.get('groupName'),
|
||||
menu : new Common.UI.Menu({
|
||||
cls: 'menu-shapes',
|
||||
value: i,
|
||||
items: [
|
||||
{ template: _.template('<div id="id-document-holder-btn-equation-menu-' + i +
|
||||
'" class="menu-shape margin-left-5" style="width:' + (equationGroup.get('groupWidth') + 8) + 'px; ' +
|
||||
equationGroup.get('groupHeightStr') + '"></div>') }
|
||||
]
|
||||
})
|
||||
});
|
||||
btn.menu.on('show:before', onShowBefore);
|
||||
btn.menu.on('show:before', bringForward);
|
||||
btn.menu.on('hide:after', sendBackward);
|
||||
me.equationBtns.push(btn);
|
||||
}
|
||||
|
||||
me.equationSettingsBtn = new Common.UI.Button({
|
||||
parentEl: $('#id-document-holder-btn-equation-settings', documentHolder.cmpEl),
|
||||
cls : 'btn-toolbar no-caret',
|
||||
iconCls : 'toolbar__icon btn-more-vertical',
|
||||
hint : me.documentHolder.advancedEquationText,
|
||||
menu : me.documentHolder.createEquationMenu('popuptbeqinput', 'tl-bl')
|
||||
});
|
||||
me.equationSettingsBtn.menu.options.initMenu = function() {
|
||||
var eq = me.api.asc_GetMathInputType(),
|
||||
menu = me.equationSettingsBtn.menu,
|
||||
isEqToolbarHide = Common.Utils.InternalSettings.get('pdfe-equation-toolbar-hide');
|
||||
|
||||
menu.items[5].setChecked(eq===Asc.c_oAscMathInputType.Unicode);
|
||||
menu.items[6].setChecked(eq===Asc.c_oAscMathInputType.LaTeX);
|
||||
menu.items[8].options.isToolbarHide = isEqToolbarHide;
|
||||
menu.items[8].setCaption(isEqToolbarHide ? me.documentHolder.showEqToolbar : me.documentHolder.hideEqToolbar, true);
|
||||
};
|
||||
me.equationSettingsBtn.menu.on('item:click', _.bind(me.convertEquation, me));
|
||||
me.equationSettingsBtn.menu.on('show:before', function(menu) {
|
||||
bringForward();
|
||||
menu.options.initMenu();
|
||||
});
|
||||
me.equationSettingsBtn.menu.on('hide:after', sendBackward);
|
||||
}
|
||||
|
||||
var showPoint = [(bounds[0] + bounds[2])/2 - eqContainer.outerWidth()/2, bounds[1] - eqContainer.outerHeight() - 10];
|
||||
(showPoint[0]<0) && (showPoint[0] = 0);
|
||||
if (showPoint[1]<0) {
|
||||
showPoint[1] = bounds[3] + 10;
|
||||
}
|
||||
showPoint[1] = Math.min(me._Height - eqContainer.outerHeight(), Math.max(0, showPoint[1]));
|
||||
eqContainer.css({left: showPoint[0], top : showPoint[1]});
|
||||
|
||||
if (_.isUndefined(me._XY)) {
|
||||
me._XY = [
|
||||
documentHolder.cmpEl.offset().left - $(window).scrollLeft(),
|
||||
documentHolder.cmpEl.offset().top - $(window).scrollTop()
|
||||
];
|
||||
me._Width = documentHolder.cmpEl.width();
|
||||
me._Height = documentHolder.cmpEl.height();
|
||||
me._BodyWidth = $('body').width();
|
||||
}
|
||||
|
||||
var diffDown = me._Height - showPoint[1] - eqContainer.outerHeight(),
|
||||
diffUp = me._XY[1] + showPoint[1],
|
||||
menuAlign = (diffDown < 220 && diffDown < diffUp*0.9) ? 'bl-tl' : 'tl-bl';
|
||||
if (Common.UI.isRTL()) {
|
||||
menuAlign = menuAlign === 'bl-tl' ? 'br-tr' : 'tr-br';
|
||||
}
|
||||
me.equationBtns.forEach(function(item){
|
||||
item && (item.menu.menuAlign = menuAlign);
|
||||
});
|
||||
me.equationSettingsBtn.menu.menuAlign = menuAlign;
|
||||
if (eqContainer.is(':visible')) {
|
||||
if (me.equationSettingsBtn.menu.isVisible()) {
|
||||
me.equationSettingsBtn.menu.options.initMenu();
|
||||
me.equationSettingsBtn.menu.alignPosition();
|
||||
}
|
||||
} else {
|
||||
eqContainer.show();
|
||||
}
|
||||
me.disableEquationBar();
|
||||
},
|
||||
|
||||
onHideMathTrack: function() {
|
||||
if (!this.documentHolder || !this.documentHolder.cmpEl) return;
|
||||
var eqContainer = this.documentHolder.cmpEl.find('#equation-container');
|
||||
if (eqContainer.is(':visible')) {
|
||||
eqContainer.hide();
|
||||
}
|
||||
},
|
||||
|
||||
disableEquationBar: function() {
|
||||
var eqContainer = this.documentHolder.cmpEl.find('#equation-container'),
|
||||
disabled = this._isDisabled || this._state.equationLocked;
|
||||
|
||||
if (eqContainer.length>0 && eqContainer.is(':visible')) {
|
||||
this.equationBtns.forEach(function(item){
|
||||
item && item.setDisabled(!!disabled);
|
||||
});
|
||||
this.equationSettingsBtn.setDisabled(!!disabled);
|
||||
}
|
||||
},
|
||||
|
||||
convertEquation: function(menu, item, e) {
|
||||
if (this.api) {
|
||||
if (item.options.type=='input') {
|
||||
this.api.asc_SetMathInputType(item.value);
|
||||
Common.localStorage.setBool("pdfe-equation-input-latex", item.value === Asc.c_oAscMathInputType.LaTeX)
|
||||
} else if (item.options.type=='view')
|
||||
this.api.asc_ConvertMathView(item.value.linear, item.value.all);
|
||||
else if(item.options.type=='hide') {
|
||||
item.options.isToolbarHide = !item.options.isToolbarHide;
|
||||
Common.Utils.InternalSettings.set('pdfe-equation-toolbar-hide', item.options.isToolbarHide);
|
||||
Common.localStorage.setBool('pdfe-equation-toolbar-hide', item.options.isToolbarHide);
|
||||
if(item.options.isToolbarHide) this.onHideMathTrack();
|
||||
else this.onShowMathTrack(this.lastMathTrackBounds);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
editComplete: function() {
|
||||
this.documentHolder && this.documentHolder.fireEvent('editcomplete', this.documentHolder);
|
||||
}
|
||||
|
||||
@ -236,6 +236,62 @@ define([
|
||||
this.fireEvent('createdelayedelements', [this, 'forms']);
|
||||
},
|
||||
|
||||
createEquationMenu: function(toggleGroup, menuAlign) {
|
||||
return new Common.UI.Menu({
|
||||
cls: 'ppm-toolbar shifted-right',
|
||||
menuAlign: menuAlign,
|
||||
items : [
|
||||
new Common.UI.MenuItem({
|
||||
caption : this.currProfText,
|
||||
iconCls : 'menu__icon btn-professional-equation',
|
||||
type : 'view',
|
||||
value : {all: false, linear: false}
|
||||
}),
|
||||
new Common.UI.MenuItem({
|
||||
caption : this.currLinearText,
|
||||
iconCls : 'menu__icon btn-linear-equation',
|
||||
type : 'view',
|
||||
value : {all: false, linear: true}
|
||||
}),
|
||||
new Common.UI.MenuItem({
|
||||
caption : this.allProfText,
|
||||
iconCls : 'menu__icon btn-professional-equation',
|
||||
type : 'view',
|
||||
value : {all: true, linear: false}
|
||||
}),
|
||||
new Common.UI.MenuItem({
|
||||
caption : this.allLinearText,
|
||||
iconCls : 'menu__icon btn-linear-equation',
|
||||
type : 'view',
|
||||
value : {all: true, linear: true}
|
||||
}),
|
||||
{ caption : '--' },
|
||||
new Common.UI.MenuItem({
|
||||
caption : this.unicodeText,
|
||||
checkable : true,
|
||||
checked : false,
|
||||
toggleGroup : toggleGroup,
|
||||
type : 'input',
|
||||
value : Asc.c_oAscMathInputType.Unicode
|
||||
}),
|
||||
new Common.UI.MenuItem({
|
||||
caption : this.latexText,
|
||||
checkable : true,
|
||||
checked : false,
|
||||
toggleGroup : toggleGroup,
|
||||
type : 'input',
|
||||
value : Asc.c_oAscMathInputType.LaTeX
|
||||
}),
|
||||
{ caption : '--' },
|
||||
new Common.UI.MenuItem({
|
||||
caption : this.hideEqToolbar,
|
||||
isToolbarHide: false,
|
||||
type : 'hide',
|
||||
})
|
||||
]
|
||||
});
|
||||
},
|
||||
|
||||
updateCustomItems: function(menu, data) {
|
||||
if (!menu || !data || data.length<1) return;
|
||||
|
||||
@ -386,7 +442,17 @@ define([
|
||||
textRedo: 'Redo',
|
||||
textCut: 'Cut',
|
||||
textPaste: 'Paste',
|
||||
textClearField: 'Clear field'
|
||||
textClearField: 'Clear field',
|
||||
advancedEquationText: 'Equation Settings',
|
||||
unicodeText: 'Unicode',
|
||||
latexText: 'LaTeX',
|
||||
currProfText: 'Current - Professional',
|
||||
currLinearText: 'Current - Linear',
|
||||
allProfText: 'All - Professional',
|
||||
allLinearText: 'All - Linear',
|
||||
hideEqToolbar: 'Hide Equation Toolbar',
|
||||
showEqToolbar: 'Show Equation Toolbar',
|
||||
|
||||
|
||||
}, PDFE.Views.DocumentHolder || {}));
|
||||
});
|
||||
@ -117,4 +117,38 @@
|
||||
vertical-align: middle;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#equation-container {
|
||||
position: absolute;
|
||||
z-index: @zindex-dropdown - 20;
|
||||
background-color: @background-toolbar-ie;
|
||||
background-color: @background-toolbar;
|
||||
border: @scaled-one-px-value-ie solid @border-regular-control-ie;
|
||||
border: @scaled-one-px-value solid @border-regular-control;
|
||||
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.2);
|
||||
.ie &,
|
||||
.winxp & {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
#equation-container {
|
||||
.separator {
|
||||
height: 30px;
|
||||
}
|
||||
&.has-open-menu {
|
||||
z-index: @zindex-navbar + 1;
|
||||
}
|
||||
.btn-toolbar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user