contextmenu.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. /**
  2. * @fileOverview
  3. *
  4. *
  5. *
  6. * @author: techird
  7. * @copyright: Baidu FEX, 2014
  8. */
  9. KityMinder.registerUI('contextmenu', function(minder) {
  10. var mac = kity.Browser.mac;
  11. function camel(word) {
  12. return word.charAt(0).toUpperCase() + word.substr(1).toLowerCase();
  13. }
  14. var $menu = $('<ul>')
  15. .addClass('km-context-menu fui-popup-menu')
  16. .appendTo('#content-wrapper');
  17. var downPosition;
  18. function distance(p1, p2) {
  19. var dx = p1[0] - p2[0];
  20. var dy = p1[1] - p2[1];
  21. var ds = Math.sqrt(dx * dx + dy * dy);
  22. return ds;
  23. }
  24. $menu.delegate('li', 'mousedown', function(e, info) {
  25. var item = $(e.target).closest('li').data('menu');
  26. if (item.fn) {
  27. return item.fn.call(minder, minder);
  28. }
  29. if (item.command) {
  30. return minder.execCommand(item.command);
  31. }
  32. });
  33. $('#content-wrapper').on('contextmenu', function(e) {
  34. e.preventDefault();
  35. });
  36. $('#content-wrapper').on('mousedown', function(e) {
  37. $menu.hide();
  38. if (e.button == 2) {
  39. downPosition = [e.pageX, e.pageY];
  40. } else {
  41. downPosition = null;
  42. }
  43. });
  44. minder.on('mouseup', function(e) {
  45. //e.preventDefault();
  46. if (!e.isRightMB()) return;
  47. e = e.originEvent;
  48. var d = distance(downPosition, [e.pageX, e.pageY]);
  49. if (isNaN(d) || d > 5) return;
  50. $menu.empty();
  51. var ctxmenu = minder.getContextMenu();
  52. var lastDivider = true;
  53. ctxmenu.forEach(function(item) {
  54. var query = item.query || function() {
  55. return item.command && minder.queryCommandState(item.command) === 0;
  56. };
  57. if (query()) {
  58. var label = minder.getLang('ui.command.' + item.command);
  59. var $li = $('<li>')
  60. .addClass('fui-item')
  61. .data('menu', item)
  62. .appendTo($menu);
  63. var shortcuts = minder.getCommandShortcutKey(item.command);
  64. if (shortcuts) {
  65. shortcuts.split('|').forEach(function(shortcut) {
  66. var $shortcut = $('<span>').addClass('shortcut').appendTo($li);
  67. shortcut.split('+').forEach(function(key) {
  68. var parts = key.split('::');
  69. key = parts.length > 1 ? parts[1] : parts[0];
  70. $('<span>').addClass('shortcut-key ' + key.toLowerCase())
  71. .text(camel(key))
  72. .appendTo($shortcut);
  73. });
  74. if (mac) $shortcut.addClass('mac');
  75. });
  76. }
  77. $li.append($('<div>').text(label).addClass('menu-label'));
  78. lastDivider = false;
  79. }
  80. if (item.divider && !lastDivider) {
  81. $('<li>').addClass('divider').appendTo($menu);
  82. lastDivider = true;
  83. }
  84. });
  85. if (ctxmenu.length) {
  86. $menu.show();
  87. var x = e.pageX,
  88. y = e.pageY,
  89. width = $menu.outerWidth(),
  90. height = $menu.outerHeight(),
  91. clientWidth = document.body.clientWidth,
  92. clientHeight = document.body.clientHeight;
  93. if (x + width > clientWidth) x -= width;
  94. if (y + height > clientHeight) y -= height;
  95. $menu.offset({
  96. left: x,
  97. top: y
  98. });
  99. }
  100. });
  101. });