mirror of
https://github.com/ONLYOFFICE/web-apps.git
synced 2026-07-25 16:59:13 +08:00
[PDFE] Add highlight, strikeout, underline buttons
This commit is contained in:
Julia Radzhabova
@ -62,7 +62,7 @@ Common.UI.FocusManager = new(function() {
|
||||
item = field;
|
||||
else {
|
||||
item.cmp = field;
|
||||
if (field instanceof Common.UI.ListView)
|
||||
if (Common.UI.ListView && field instanceof Common.UI.ListView)
|
||||
item.selector = '.listview';
|
||||
else if (field instanceof Common.UI.CheckBox)
|
||||
item.selector = '.checkbox-indeterminate';
|
||||
|
||||
@ -587,7 +587,6 @@ define([
|
||||
app.getController('Toolbar').DisableToolbar(disable, options.viewMode, options.reviewMode, options.fillFormMode);
|
||||
}
|
||||
if (options.documentHolder) {
|
||||
options.documentHolder.clear && app.getController('DocumentHolder').clearSelection();
|
||||
options.documentHolder.disable && app.getController('DocumentHolder').SetDisabled(disable, options.allowProtect, options.fillFormMode);
|
||||
}
|
||||
if (options.leftMenu) {
|
||||
@ -689,6 +688,21 @@ define([
|
||||
}
|
||||
application.getController('DocumentHolder').getView().focus();
|
||||
|
||||
if (this.appOptions.isEdit && toolbarView) {
|
||||
if (toolbarView.btnStrikeout.pressed && ( !_.isObject(arguments[1]) || arguments[1].id !== 'id-toolbar-btn-strikeout')) {
|
||||
// this.api.SetMarkerFormat(false);
|
||||
toolbarView.btnStrikeout.toggle(false, false);
|
||||
}
|
||||
if (toolbarView.btnUnderline.pressed && ( !_.isObject(arguments[1]) || arguments[1].id !== 'id-toolbar-btn-underline')) {
|
||||
// this.api.SetMarkerFormat(false);
|
||||
toolbarView.btnUnderline.toggle(false, false);
|
||||
}
|
||||
if (toolbarView.btnHighlight.pressed && ( !_.isObject(arguments[1]) || arguments[1].id !== 'id-toolbar-btn-highlight')) {
|
||||
// this.api.SetMarkerFormat(false);
|
||||
toolbarView.btnHighlight.toggle(false, false);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.api && this.appOptions.isEdit && !toolbarView._state.previewmode) {
|
||||
var cansave = this.api.asc_isDocumentCanSave(),
|
||||
forcesave = this.appOptions.forcesave,
|
||||
|
||||
@ -63,7 +63,10 @@ define([
|
||||
can_undo: undefined,
|
||||
can_redo: undefined,
|
||||
lock_doc: undefined,
|
||||
can_copycut: undefined
|
||||
can_copycut: undefined,
|
||||
clrstrike: undefined,
|
||||
clrunderline: undefined,
|
||||
clrhighlight: undefined
|
||||
};
|
||||
this.editMode = true;
|
||||
this.binding = {};
|
||||
@ -174,6 +177,15 @@ define([
|
||||
toolbar.btnAddComment.on('click', function (btn, e) {
|
||||
Common.NotificationCenter.trigger('app:comment:add', 'toolbar');
|
||||
});
|
||||
toolbar.btnStrikeout.on('click', _.bind(this.onBtnStrikeout, this));
|
||||
toolbar.mnuStrikeoutColorPicker.on('select', _.bind(this.onSelectStrikeoutColor, this));
|
||||
toolbar.mnuStrikeoutTransparent.on('click', _.bind(this.onStrikeoutTransparentClick, this));
|
||||
toolbar.btnUnderline.on('click', _.bind(this.onBtnUnderline, this));
|
||||
toolbar.mnuUnderlineColorPicker.on('select', _.bind(this.onSelectUnderlineColor, this));
|
||||
toolbar.mnuUnderlineTransparent.on('click', _.bind(this.onUnderlineTransparentClick, this));
|
||||
toolbar.btnHighlight.on('click', _.bind(this.onBtnHighlight, this));
|
||||
toolbar.mnuHighlightColorPicker.on('select', _.bind(this.onSelectHighlightColor, this));
|
||||
toolbar.mnuHighlightTransparent.on('click', _.bind(this.onHighlightTransparentClick, this));
|
||||
|
||||
this.onBtnChangeState('undo:disabled', toolbar.btnUndo, toolbar.btnUndo.isDisabled());
|
||||
this.onBtnChangeState('redo:disabled', toolbar.btnRedo, toolbar.btnRedo.isDisabled());
|
||||
@ -393,6 +405,133 @@ define([
|
||||
Common.NotificationCenter.trigger('edit:complete', this.toolbar);
|
||||
},
|
||||
|
||||
onBtnStrikeout: function(btn) {
|
||||
if (btn.pressed) {
|
||||
this._setStrikeoutColor(btn.currentColor);
|
||||
}
|
||||
else {
|
||||
// this.api.SetMarkerFormat(false);
|
||||
}
|
||||
},
|
||||
|
||||
onStrikeoutTransparentClick: function(item, e) {
|
||||
this._setStrikeoutColor('transparent', 'menu');
|
||||
},
|
||||
|
||||
onSelectStrikeoutColor: function(picker, color) {
|
||||
this._setStrikeoutColor(color, 'menu');
|
||||
},
|
||||
|
||||
_setStrikeoutColor: function(strcolor, h) {
|
||||
var me = this;
|
||||
|
||||
if (h === 'menu') {
|
||||
me._state.clrstrike = undefined;
|
||||
// me.onApiHighlightColor();
|
||||
|
||||
me.toolbar.btnStrikeout.currentColor = strcolor;
|
||||
me.toolbar.btnStrikeout.setColor(me.toolbar.btnStrikeout.currentColor);
|
||||
me.toolbar.btnStrikeout.toggle(true, true);
|
||||
}
|
||||
|
||||
strcolor = strcolor || 'transparent';
|
||||
|
||||
if (strcolor == 'transparent') {
|
||||
// me.api.SetMarkerFormat(true, false);
|
||||
} else {
|
||||
var r = strcolor[0] + strcolor[1],
|
||||
g = strcolor[2] + strcolor[3],
|
||||
b = strcolor[4] + strcolor[5];
|
||||
// me.api.SetMarkerFormat(true, true, parseInt(r, 16), parseInt(g, 16), parseInt(b, 16));
|
||||
}
|
||||
Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnStrikeout);
|
||||
},
|
||||
|
||||
onBtnUnderline: function(btn) {
|
||||
if (btn.pressed) {
|
||||
this._setUnderlineColor(btn.currentColor);
|
||||
}
|
||||
else {
|
||||
// this.api.SetMarkerFormat(false);
|
||||
}
|
||||
},
|
||||
|
||||
onUnderlineTransparentClick: function(item, e) {
|
||||
this._setUnderlineColor('transparent', 'menu');
|
||||
},
|
||||
|
||||
onSelectUnderlineColor: function(picker, color) {
|
||||
this._setUnderlineColor(color, 'menu');
|
||||
},
|
||||
|
||||
_setUnderlineColor: function(strcolor, h) {
|
||||
var me = this;
|
||||
|
||||
if (h === 'menu') {
|
||||
me._state.clrunderline = undefined;
|
||||
// me.onApiHighlightColor();
|
||||
|
||||
me.toolbar.btnUnderline.currentColor = strcolor;
|
||||
me.toolbar.btnUnderline.setColor(me.toolbar.btnUnderline.currentColor);
|
||||
me.toolbar.btnUnderline.toggle(true, true);
|
||||
}
|
||||
|
||||
strcolor = strcolor || 'transparent';
|
||||
|
||||
if (strcolor == 'transparent') {
|
||||
// me.api.SetMarkerFormat(true, false);
|
||||
} else {
|
||||
var r = strcolor[0] + strcolor[1],
|
||||
g = strcolor[2] + strcolor[3],
|
||||
b = strcolor[4] + strcolor[5];
|
||||
// me.api.SetMarkerFormat(true, true, parseInt(r, 16), parseInt(g, 16), parseInt(b, 16));
|
||||
}
|
||||
Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnUnderline);
|
||||
},
|
||||
|
||||
|
||||
onBtnHighlight: function(btn) {
|
||||
if (btn.pressed) {
|
||||
this._setHighlightColor(btn.currentColor);
|
||||
}
|
||||
else {
|
||||
// this.api.SetMarkerFormat(false);
|
||||
}
|
||||
},
|
||||
|
||||
onHighlightTransparentClick: function(item, e) {
|
||||
this._setHighlightColor('transparent', 'menu');
|
||||
},
|
||||
|
||||
onSelectHighlightColor: function(picker, color) {
|
||||
this._setHighlightColor(color, 'menu');
|
||||
},
|
||||
|
||||
_setHighlightColor: function(strcolor, h) {
|
||||
var me = this;
|
||||
|
||||
if (h === 'menu') {
|
||||
me._state.clrhighlight = undefined;
|
||||
// me.onApiHighlightColor();
|
||||
|
||||
me.toolbar.btnHighlight.currentColor = strcolor;
|
||||
me.toolbar.btnHighlight.setColor(me.toolbar.btnHighlight.currentColor);
|
||||
me.toolbar.btnHighlight.toggle(true, true);
|
||||
}
|
||||
|
||||
strcolor = strcolor || 'transparent';
|
||||
|
||||
if (strcolor == 'transparent') {
|
||||
// me.api.SetMarkerFormat(true, false);
|
||||
} else {
|
||||
var r = strcolor[0] + strcolor[1],
|
||||
g = strcolor[2] + strcolor[3],
|
||||
b = strcolor[4] + strcolor[5];
|
||||
// me.api.SetMarkerFormat(true, true, parseInt(r, 16), parseInt(g, 16), parseInt(b, 16));
|
||||
}
|
||||
Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnHighlight);
|
||||
},
|
||||
|
||||
activateControls: function() {
|
||||
this.toolbar.lockToolbar(Common.enumLock.disableOnStart, false);
|
||||
this.toolbar.lockToolbar(Common.enumLock.undoLock, this._state.can_undo!==true, {array: [this.toolbar.btnUndo]});
|
||||
|
||||
@ -69,14 +69,14 @@
|
||||
</div>
|
||||
<div class="separator long"></div>
|
||||
<div class="group">
|
||||
<span class="btn-slot text x-huge" id="slot-btn-highlight"></span>
|
||||
<span class="btn-slot text x-huge emptycaption" id="slot-btn-highlight"></span>
|
||||
</div>
|
||||
<div class="group small">
|
||||
<div class="elset">
|
||||
<span class="btn-slot" id="slot-btn-strikeout"></span>
|
||||
<span class="btn-slot split" id="slot-btn-strikeout"></span>
|
||||
</div>
|
||||
<div class="elset">
|
||||
<span class="btn-slot" id="slot-btn-underline"></span>
|
||||
<span class="btn-slot split" id="slot-btn-underline"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="separator long draw-groups"></div>
|
||||
|
||||
@ -274,6 +274,58 @@ define([
|
||||
});
|
||||
this.toolbarControls.push(this.btnAddComment);
|
||||
|
||||
this.btnStrikeout = new Common.UI.ButtonColored({
|
||||
id: 'id-toolbar-btn-strikeout',
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: 'toolbar__icon btn-strikeout',
|
||||
lock: [_set.paragraphLock, _set.headerLock, _set.richEditLock, _set.plainEditLock, _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.disableOnStart, _set.docLockView, _set.docLockComments],
|
||||
enableToggle: true,
|
||||
allowDepress: true,
|
||||
split: true,
|
||||
menu: true,
|
||||
dataHint: '1',
|
||||
dataHintDirection: 'bottom',
|
||||
dataHintOffset: '0, -16',
|
||||
penOptions: {color: '000000'}
|
||||
});
|
||||
this.paragraphControls.push(this.btnStrikeout);
|
||||
|
||||
this.btnUnderline = new Common.UI.ButtonColored({
|
||||
id: 'id-toolbar-btn-underline',
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: 'toolbar__icon btn-underline',
|
||||
lock: [_set.paragraphLock, _set.headerLock, _set.richEditLock, _set.plainEditLock, _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.disableOnStart, _set.docLockView, _set.docLockComments],
|
||||
enableToggle: true,
|
||||
allowDepress: true,
|
||||
split: true,
|
||||
menu: true,
|
||||
dataHint: '1',
|
||||
dataHintDirection: 'bottom',
|
||||
dataHintOffset: '0, -16',
|
||||
penOptions: {color: '000000'}
|
||||
});
|
||||
this.paragraphControls.push(this.btnUnderline);
|
||||
|
||||
this.btnHighlight = new Common.UI.ButtonColored({
|
||||
id: 'id-toolbar-btn-highlight',
|
||||
cls: 'btn-toolbar x-huge icon-top',
|
||||
iconCls: 'toolbar__icon btn-highlighter-tool',
|
||||
caption: ' ',
|
||||
lock: [_set.paragraphLock, _set.headerLock, _set.richEditLock, _set.plainEditLock, _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.disableOnStart, _set.docLockView, _set.docLockComments],
|
||||
enableToggle: true,
|
||||
allowDepress: true,
|
||||
split: true,
|
||||
menu: true,
|
||||
dataHint: '1',
|
||||
dataHintDirection: 'bottom',
|
||||
ataHintOffset: 'small',
|
||||
penOptions: {color: 'FFFC54', colors: [
|
||||
'FFFC54', '72F54A', '74F9FD', 'EB51F7', 'A900F9', 'EF8B3A', '7272FF', 'FF63A4', '1DFF92', '03DA18',
|
||||
'249B01', 'C504D2', '0633D1', 'FFF7A0', 'FF0303', 'FFFFFF', 'D3D3D4', '969696', '606060', '000000'
|
||||
]}
|
||||
});
|
||||
this.paragraphControls.push(this.btnHighlight);
|
||||
|
||||
//
|
||||
// Menus
|
||||
//
|
||||
@ -361,11 +413,58 @@ define([
|
||||
_injectComponent('#slot-btn-select-tool', this.btnSelectTool);
|
||||
_injectComponent('#slot-btn-hand-tool', this.btnHandTool);
|
||||
_injectComponent('#slot-btn-comment', this.btnAddComment);
|
||||
_injectComponent('#slot-btn-strikeout', this.btnStrikeout);
|
||||
_injectComponent('#slot-btn-underline', this.btnUnderline);
|
||||
_injectComponent('#slot-btn-highlight', this.btnHighlight);
|
||||
|
||||
this.btnPrint.menu && this.btnPrint.$el.addClass('split');
|
||||
return $host;
|
||||
},
|
||||
|
||||
createPen: function(button, id) {
|
||||
var mnu;
|
||||
button.setMenu(new Common.UI.Menu({
|
||||
cls: 'shifted-left',
|
||||
style: 'min-width: 100px;',
|
||||
items: [
|
||||
{template: _.template('<div id="id-toolbar-menu-' + id + '" style="width: 174px; display: inline-block;" class="palette-large"></div>')},
|
||||
{
|
||||
id: 'id-toolbar-menu-' + id + '-color-new',
|
||||
template: _.template('<a tabindex="-1" type="menuitem" style="">' + button.textNewColor + '</a>')
|
||||
},
|
||||
{caption: '--'},
|
||||
mnu = new Common.UI.MenuItem({
|
||||
caption: this.strMenuNoFill,
|
||||
checkable: true,
|
||||
style: 'padding-left:20px;padding-right:20px;'
|
||||
})
|
||||
]
|
||||
}), true);
|
||||
button.currentColor = button.options.penOptions.color;
|
||||
button.setColor(button.currentColor);
|
||||
var picker = new Common.UI.ThemeColorPalette({
|
||||
el: $('#id-toolbar-menu-' + id),
|
||||
colors: button.options.penOptions.colors || [
|
||||
'1755A0', 'D43230', 'F5C346', 'EA3368', '12A489', '552F8B', '9D1F87', 'BB2765', '479ED2', '67C9FA',
|
||||
'3D8A44', '80CA3D', '1C19B4', '7F4B0F', 'FF7E07', 'FFFFFF', 'D3D3D4', '879397', '575757', '000000'
|
||||
],
|
||||
value: button.currentColor,
|
||||
dynamiccolors: 5,
|
||||
themecolors: 0,
|
||||
effects: 0,
|
||||
columns: 5,
|
||||
outerMenu: {menu: button.menu, index: 0, focusOnShow: true},
|
||||
storageSuffix: '-draw'
|
||||
});
|
||||
button.setPicker(picker);
|
||||
picker.on('select', _.bind(button.onColorSelect, button));
|
||||
button.menu.setInnerMenu([{menu: picker, index: 0}]);
|
||||
button.menu.cmpEl.find('#id-toolbar-menu-' + id + '-color-new').on('click', function() {
|
||||
picker.addNewColor(button.currentColor);
|
||||
});
|
||||
return [picker, mnu];
|
||||
},
|
||||
|
||||
onAppReady: function (config) {
|
||||
var me = this;
|
||||
(new Promise( function(resolve, reject) {
|
||||
@ -396,6 +495,21 @@ define([
|
||||
]
|
||||
}));
|
||||
}
|
||||
if (me.btnStrikeout.menu) {
|
||||
var arr = me.createPen(me.btnStrikeout, 'strikeout');
|
||||
me.mnuStrikeoutColorPicker = arr[0];
|
||||
me.mnuStrikeoutTransparent = arr[1];
|
||||
}
|
||||
if (me.btnUnderline.menu) {
|
||||
var arr = me.createPen(me.btnUnderline, 'underline');
|
||||
me.mnuUnderlineColorPicker = arr[0];
|
||||
me.mnuUnderlineTransparent = arr[1];
|
||||
}
|
||||
if (me.btnHighlight.menu) {
|
||||
var arr = me.createPen(me.btnHighlight, 'highlight');
|
||||
me.mnuHighlightColorPicker = arr[0];
|
||||
me.mnuHighlightTransparent = arr[1];
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
@ -416,6 +530,9 @@ define([
|
||||
this.btnSelectTool.updateHint(this.tipSelectTool);
|
||||
this.btnHandTool.updateHint(this.tipHandTool);
|
||||
this.btnAddComment.updateHint(this.tipAddComment);
|
||||
this.btnStrikeout.updateHint(this.textStrikeout);
|
||||
this.btnUnderline.updateHint(this.textUnderline);
|
||||
this.btnHighlight.updateHint(this.textHighlight);
|
||||
},
|
||||
|
||||
onToolbarAfterRender: function(toolbar) {
|
||||
@ -577,7 +694,11 @@ define([
|
||||
tipCut: 'Cut',
|
||||
textTabComment: 'Comment',
|
||||
capBtnComment: 'Comment',
|
||||
tipAddComment: 'Add comment'
|
||||
tipAddComment: 'Add comment',
|
||||
strMenuNoFill: 'No Fill',
|
||||
textStrikeout: 'Strikeout',
|
||||
textUnderline: 'Underline',
|
||||
textHighlight: 'Highlight',
|
||||
}
|
||||
})(), PDFE.Views.Toolbar || {}));
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user