Popover.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. define([
  2. 'summernote/core/func',
  3. 'summernote/core/list',
  4. 'summernote/module/Button'
  5. ], function (func, list, Button) {
  6. /**
  7. * @class module.Popover
  8. *
  9. * Popover (http://getbootstrap.com/javascript/#popovers)
  10. *
  11. */
  12. var Popover = function () {
  13. var button = new Button();
  14. /**
  15. * returns position from placeholder
  16. *
  17. * @private
  18. * @param {Node} placeholder
  19. * @param {Object} options
  20. * @param {Boolean} options.isAirMode
  21. * @return {Position}
  22. */
  23. var posFromPlaceholder = function (placeholder, options) {
  24. var isAirMode = options && options.isAirMode;
  25. var isLeftTop = options && options.isLeftTop;
  26. var $placeholder = $(placeholder);
  27. var pos = isAirMode ? $placeholder.offset() : $placeholder.position();
  28. var height = isLeftTop ? 0 : $placeholder.outerHeight(true); // include margin
  29. // popover below placeholder.
  30. return {
  31. left: pos.left,
  32. top: pos.top + height
  33. };
  34. };
  35. /**
  36. * show popover
  37. *
  38. * @private
  39. * @param {jQuery} popover
  40. * @param {Position} pos
  41. */
  42. var showPopover = function ($popover, pos) {
  43. $popover.css({
  44. display: 'block',
  45. left: pos.left,
  46. top: pos.top
  47. });
  48. };
  49. var PX_POPOVER_ARROW_OFFSET_X = 20;
  50. /**
  51. * update current state
  52. * @param {jQuery} $popover - popover container
  53. * @param {Object} styleInfo - style object
  54. * @param {Boolean} isAirMode
  55. */
  56. this.update = function ($popover, styleInfo, isAirMode) {
  57. button.update($popover, styleInfo);
  58. var $linkPopover = $popover.find('.note-link-popover');
  59. if (styleInfo.anchor) {
  60. var $anchor = $linkPopover.find('a');
  61. var href = $(styleInfo.anchor).attr('href');
  62. var target = $(styleInfo.anchor).attr('target');
  63. $anchor.attr('href', href).html(href);
  64. if (!target) {
  65. $anchor.removeAttr('target');
  66. } else {
  67. $anchor.attr('target', '_blank');
  68. }
  69. showPopover($linkPopover, posFromPlaceholder(styleInfo.anchor, {
  70. isAirMode: isAirMode
  71. }));
  72. } else {
  73. $linkPopover.hide();
  74. }
  75. var $imagePopover = $popover.find('.note-image-popover');
  76. if (styleInfo.image) {
  77. showPopover($imagePopover, posFromPlaceholder(styleInfo.image, {
  78. isAirMode: isAirMode,
  79. isLeftTop: true
  80. }));
  81. } else {
  82. $imagePopover.hide();
  83. }
  84. var $airPopover = $popover.find('.note-air-popover');
  85. if (isAirMode && styleInfo.range && !styleInfo.range.isCollapsed()) {
  86. var rect = list.last(styleInfo.range.getClientRects());
  87. if (rect) {
  88. var bnd = func.rect2bnd(rect);
  89. showPopover($airPopover, {
  90. left: Math.max(bnd.left + bnd.width / 2 - PX_POPOVER_ARROW_OFFSET_X, 0),
  91. top: bnd.top + bnd.height
  92. });
  93. }
  94. } else {
  95. $airPopover.hide();
  96. }
  97. };
  98. /**
  99. * @param {Node} button
  100. * @param {String} eventName
  101. * @param {String} value
  102. */
  103. this.updateRecentColor = function (button, eventName, value) {
  104. button.updateRecentColor(button, eventName, value);
  105. };
  106. /**
  107. * hide all popovers
  108. * @param {jQuery} $popover - popover container
  109. */
  110. this.hide = function ($popover) {
  111. $popover.children().hide();
  112. };
  113. };
  114. return Popover;
  115. });