Add context menu for signatures in the right panel.

This commit is contained in:
Julia Radzhabova 2018-05-08 15:02:48 +03:00
parent 8128ba990d
commit ecd0785415
3 changed files with 193 additions and 114 deletions

View file

@ -122,6 +122,9 @@ define([
this.viewRequestedList.on('item:click', _.bind(this.onSelectSignature, this)); this.viewRequestedList.on('item:click', _.bind(this.onSelectSignature, this));
this.viewValidList.on('item:click', _.bind(this.onSelectSignature, this)); this.viewValidList.on('item:click', _.bind(this.onSelectSignature, this));
this.viewInvalidList.on('item:click', _.bind(this.onSelectSignature, this)); this.viewInvalidList.on('item:click', _.bind(this.onSelectSignature, this));
this.viewRequestedList.on('item:contextmenu', _.bind(this.onItemContextMenu, this));
this.viewValidList.on('item:contextmenu', _.bind(this.onItemContextMenu, this));
this.viewInvalidList.on('item:contextmenu', _.bind(this.onItemContextMenu, this));
this.signatureMenu = new Common.UI.Menu({ this.signatureMenu = new Common.UI.Menu({
menuAlign : 'tr-br', menuAlign : 'tr-br',
@ -200,6 +203,26 @@ define([
me.disableEditing(me._state.hasValid || me._state.hasInvalid); me.disableEditing(me._state.hasValid || me._state.hasInvalid);
}, },
onItemContextMenu: function(picker, item, record, e){
var menu = this.signatureMenu;
if (menu.isVisible()) {
menu.hide();
}
var offsetParent = $(this.el).offset(),
showPoint = [e.clientX*Common.Utils.zoom() - offsetParent.left + 5, e.clientY*Common.Utils.zoom() - offsetParent.top + 5];
this.showSignatureMenu(record, showPoint);
menu.menuAlign = 'tl-bl';
menu.menuAlignEl = null;
menu.setOffset(15, 5);
menu.show();
_.delay(function() {
menu.cmpEl.focus();
}, 10);
},
onSelectSignature: function(picker, item, record, e){ onSelectSignature: function(picker, item, record, e){
if (!record) return; if (!record) return;
@ -211,15 +234,31 @@ define([
return; return;
} }
var showPoint, me = this, var currentTarget = $(e.currentTarget),
currentTarget = $(e.currentTarget),
parent = $(this.el),
offset = currentTarget.offset(), offset = currentTarget.offset(),
offsetParent = parent.offset(); offsetParent = $(this.el).offset(),
showPoint = [offset.left - offsetParent.left + currentTarget.width(), offset.top - offsetParent.top + currentTarget.height()/2]; showPoint = [offset.left - offsetParent.left + currentTarget.width(), offset.top - offsetParent.top + currentTarget.height()/2];
var menuContainer = parent.find('#menu-signature-container'); this.showSignatureMenu(record, showPoint);
menu.menuAlign = 'tr-br';
menu.menuAlignEl = currentTarget;
menu.setOffset(-20, -currentTarget.height()/2 + 3);
menu.show();
_.delay(function() {
menu.cmpEl.focus();
}, 10);
e.stopPropagation();
e.preventDefault();
} else {
this.api.asc_gotoSignature(record.get('guid'));
}
},
showSignatureMenu: function(record, showPoint) {
var menu = this.signatureMenu,
parent = $(this.el),
menuContainer = parent.find('#menu-signature-container');
if (!menu.rendered) { if (!menu.rendered) {
if (menuContainer.length < 1) { if (menuContainer.length < 1) {
menuContainer = $('<div id="menu-signature-container" style="position: absolute; z-index: 10000;"><div class="dropdown-toggle" data-toggle="dropdown"></div></div>', menu.id); menuContainer = $('<div id="menu-signature-container" style="position: absolute; z-index: 10000;"><div class="dropdown-toggle" data-toggle="dropdown"></div></div>', menu.id);
@ -254,18 +293,6 @@ define([
menu.cmpEl.attr('data-value', record.get('guid')); menu.cmpEl.attr('data-value', record.get('guid'));
menuContainer.css({left: showPoint[0], top: showPoint[1]}); menuContainer.css({left: showPoint[0], top: showPoint[1]});
menu.menuAlignEl = currentTarget;
menu.setOffset(-20, -currentTarget.height()/2 + 3);
menu.show();
_.delay(function() {
menu.cmpEl.focus();
}, 10);
e.stopPropagation();
e.preventDefault();
} else {
this.api.asc_gotoSignature(record.get('guid'));
}
}, },
onMenuSignatureClick: function(menu, item) { onMenuSignatureClick: function(menu, item) {

View file

@ -109,6 +109,8 @@ define([
this.viewValidList.on('item:click', _.bind(this.onSelectSignature, this)); this.viewValidList.on('item:click', _.bind(this.onSelectSignature, this));
this.viewInvalidList.on('item:click', _.bind(this.onSelectSignature, this)); this.viewInvalidList.on('item:click', _.bind(this.onSelectSignature, this));
this.viewValidList.on('item:contextmenu', _.bind(this.onItemContextMenu, this));
this.viewInvalidList.on('item:contextmenu', _.bind(this.onItemContextMenu, this));
this.signatureMenu = new Common.UI.Menu({ this.signatureMenu = new Common.UI.Menu({
menuAlign : 'tr-br', menuAlign : 'tr-br',
@ -175,6 +177,26 @@ define([
me.disableEditing(me._state.hasValid || me._state.hasInvalid); me.disableEditing(me._state.hasValid || me._state.hasInvalid);
}, },
onItemContextMenu: function(picker, item, record, e){
var menu = this.signatureMenu;
if (menu.isVisible()) {
menu.hide();
}
var offsetParent = $(this.el).offset(),
showPoint = [e.clientX*Common.Utils.zoom() - offsetParent.left + 5, e.clientY*Common.Utils.zoom() - offsetParent.top + 5];
this.showSignatureMenu(record, showPoint);
menu.menuAlign = 'tl-bl';
menu.menuAlignEl = null;
menu.setOffset(15, 5);
menu.show();
_.delay(function() {
menu.cmpEl.focus();
}, 10);
},
onSelectSignature: function(picker, item, record, e){ onSelectSignature: function(picker, item, record, e){
if (!record) return; if (!record) return;
@ -186,15 +208,29 @@ define([
return; return;
} }
var showPoint, me = this, var currentTarget = $(e.currentTarget),
currentTarget = $(e.currentTarget),
parent = $(this.el),
offset = currentTarget.offset(), offset = currentTarget.offset(),
offsetParent = parent.offset(); offsetParent = $(this.el).offset(),
showPoint = [offset.left - offsetParent.left + currentTarget.width(), offset.top - offsetParent.top + currentTarget.height()/2]; showPoint = [offset.left - offsetParent.left + currentTarget.width(), offset.top - offsetParent.top + currentTarget.height()/2];
var menuContainer = parent.find('#menu-signature-container'); this.showSignatureMenu(record, showPoint);
menu.menuAlign = 'tr-br';
menu.menuAlignEl = currentTarget;
menu.setOffset(-20, -currentTarget.height()/2 + 3);
menu.show();
_.delay(function() {
menu.cmpEl.focus();
}, 10);
e.stopPropagation();
e.preventDefault();
}
},
showSignatureMenu: function(record, showPoint) {
var menu = this.signatureMenu,
parent = $(this.el),
menuContainer = parent.find('#menu-signature-container');
if (!menu.rendered) { if (!menu.rendered) {
if (menuContainer.length < 1) { if (menuContainer.length < 1) {
menuContainer = $('<div id="menu-signature-container" style="position: absolute; z-index: 10000;"><div class="dropdown-toggle" data-toggle="dropdown"></div></div>', menu.id); menuContainer = $('<div id="menu-signature-container" style="position: absolute; z-index: 10000;"><div class="dropdown-toggle" data-toggle="dropdown"></div></div>', menu.id);
@ -215,21 +251,10 @@ define([
}); });
} }
menu.items[1].setDisabled(this._locked); menu.items[1].setDisabled(this._locked);
menu.items[0].cmpEl.attr('data-value', record.get('certificateId')); // view certificate menu.items[0].cmpEl.attr('data-value', record.get('certificateId')); // view certificate
menu.cmpEl.attr('data-value', record.get('guid')); menu.cmpEl.attr('data-value', record.get('guid'));
menuContainer.css({left: showPoint[0], top: showPoint[1]}); menuContainer.css({left: showPoint[0], top: showPoint[1]});
menu.menuAlignEl = currentTarget;
menu.setOffset(-20, -currentTarget.height()/2 + 3);
menu.show();
_.delay(function() {
menu.cmpEl.focus();
}, 10);
e.stopPropagation();
e.preventDefault();
}
}, },
onMenuSignatureClick: function(menu, item) { onMenuSignatureClick: function(menu, item) {

View file

@ -122,6 +122,9 @@ define([
this.viewRequestedList.on('item:click', _.bind(this.onSelectSignature, this)); this.viewRequestedList.on('item:click', _.bind(this.onSelectSignature, this));
this.viewValidList.on('item:click', _.bind(this.onSelectSignature, this)); this.viewValidList.on('item:click', _.bind(this.onSelectSignature, this));
this.viewInvalidList.on('item:click', _.bind(this.onSelectSignature, this)); this.viewInvalidList.on('item:click', _.bind(this.onSelectSignature, this));
this.viewRequestedList.on('item:contextmenu', _.bind(this.onItemContextMenu, this));
this.viewValidList.on('item:contextmenu', _.bind(this.onItemContextMenu, this));
this.viewInvalidList.on('item:contextmenu', _.bind(this.onItemContextMenu, this));
this.signatureMenu = new Common.UI.Menu({ this.signatureMenu = new Common.UI.Menu({
menuAlign : 'tr-br', menuAlign : 'tr-br',
@ -200,6 +203,26 @@ define([
me.disableEditing(me._state.hasValid || me._state.hasInvalid); me.disableEditing(me._state.hasValid || me._state.hasInvalid);
}, },
onItemContextMenu: function(picker, item, record, e){
var menu = this.signatureMenu;
if (menu.isVisible()) {
menu.hide();
}
var offsetParent = $(this.el).offset(),
showPoint = [e.clientX*Common.Utils.zoom() - offsetParent.left + 5, e.clientY*Common.Utils.zoom() - offsetParent.top + 5];
this.showSignatureMenu(record, showPoint);
menu.menuAlign = 'tl-bl';
menu.menuAlignEl = null;
menu.setOffset(15, 5);
menu.show();
_.delay(function() {
menu.cmpEl.focus();
}, 10);
},
onSelectSignature: function(picker, item, record, e){ onSelectSignature: function(picker, item, record, e){
if (!record) return; if (!record) return;
@ -211,15 +234,31 @@ define([
return; return;
} }
var showPoint, me = this, var currentTarget = $(e.currentTarget),
currentTarget = $(e.currentTarget),
parent = $(this.el),
offset = currentTarget.offset(), offset = currentTarget.offset(),
offsetParent = parent.offset(); offsetParent = $(this.el).offset(),
showPoint = [offset.left - offsetParent.left + currentTarget.width(), offset.top - offsetParent.top + currentTarget.height()/2]; showPoint = [offset.left - offsetParent.left + currentTarget.width(), offset.top - offsetParent.top + currentTarget.height()/2];
var menuContainer = parent.find('#menu-signature-container'); this.showSignatureMenu(record, showPoint);
menu.menuAlign = 'tr-br';
menu.menuAlignEl = currentTarget;
menu.setOffset(-20, -currentTarget.height()/2 + 3);
menu.show();
_.delay(function() {
menu.cmpEl.focus();
}, 10);
e.stopPropagation();
e.preventDefault();
} else {
this.api.asc_gotoSignature(record.get('guid'));
}
},
showSignatureMenu: function(record, showPoint) {
var menu = this.signatureMenu,
parent = $(this.el),
menuContainer = parent.find('#menu-signature-container');
if (!menu.rendered) { if (!menu.rendered) {
if (menuContainer.length < 1) { if (menuContainer.length < 1) {
menuContainer = $('<div id="menu-signature-container" style="position: absolute; z-index: 10000;"><div class="dropdown-toggle" data-toggle="dropdown"></div></div>', menu.id); menuContainer = $('<div id="menu-signature-container" style="position: absolute; z-index: 10000;"><div class="dropdown-toggle" data-toggle="dropdown"></div></div>', menu.id);
@ -254,18 +293,6 @@ define([
menu.cmpEl.attr('data-value', record.get('guid')); menu.cmpEl.attr('data-value', record.get('guid'));
menuContainer.css({left: showPoint[0], top: showPoint[1]}); menuContainer.css({left: showPoint[0], top: showPoint[1]});
menu.menuAlignEl = currentTarget;
menu.setOffset(-20, -currentTarget.height()/2 + 3);
menu.show();
_.delay(function() {
menu.cmpEl.focus();
}, 10);
e.stopPropagation();
e.preventDefault();
} else {
this.api.asc_gotoSignature(record.get('guid'));
}
}, },
onMenuSignatureClick: function(menu, item) { onMenuSignatureClick: function(menu, item) {