popover.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. import $ from 'jquery'
  2. import Tooltip from './tooltip'
  3. /**
  4. * --------------------------------------------------------------------------
  5. * Bootstrap (v4.1.3): popover.js
  6. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  7. * --------------------------------------------------------------------------
  8. */
  9. const Popover = (($) => {
  10. /**
  11. * ------------------------------------------------------------------------
  12. * Constants
  13. * ------------------------------------------------------------------------
  14. */
  15. const NAME = 'popover'
  16. const VERSION = '4.1.3'
  17. const DATA_KEY = 'bs.popover'
  18. const EVENT_KEY = `.${DATA_KEY}`
  19. const JQUERY_NO_CONFLICT = $.fn[NAME]
  20. const CLASS_PREFIX = 'bs-popover'
  21. const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g')
  22. const Default = {
  23. ...Tooltip.Default,
  24. placement : 'right',
  25. trigger : 'click',
  26. content : '',
  27. template : '<div class="popover" role="tooltip">' +
  28. '<div class="arrow"></div>' +
  29. '<h3 class="popover-header"></h3>' +
  30. '<div class="popover-body"></div></div>'
  31. }
  32. const DefaultType = {
  33. ...Tooltip.DefaultType,
  34. content : '(string|element|function)'
  35. }
  36. const ClassName = {
  37. FADE : 'fade',
  38. SHOW : 'show'
  39. }
  40. const Selector = {
  41. TITLE : '.popover-header',
  42. CONTENT : '.popover-body'
  43. }
  44. const Event = {
  45. HIDE : `hide${EVENT_KEY}`,
  46. HIDDEN : `hidden${EVENT_KEY}`,
  47. SHOW : `show${EVENT_KEY}`,
  48. SHOWN : `shown${EVENT_KEY}`,
  49. INSERTED : `inserted${EVENT_KEY}`,
  50. CLICK : `click${EVENT_KEY}`,
  51. FOCUSIN : `focusin${EVENT_KEY}`,
  52. FOCUSOUT : `focusout${EVENT_KEY}`,
  53. MOUSEENTER : `mouseenter${EVENT_KEY}`,
  54. MOUSELEAVE : `mouseleave${EVENT_KEY}`
  55. }
  56. /**
  57. * ------------------------------------------------------------------------
  58. * Class Definition
  59. * ------------------------------------------------------------------------
  60. */
  61. class Popover extends Tooltip {
  62. // Getters
  63. static get VERSION() {
  64. return VERSION
  65. }
  66. static get Default() {
  67. return Default
  68. }
  69. static get NAME() {
  70. return NAME
  71. }
  72. static get DATA_KEY() {
  73. return DATA_KEY
  74. }
  75. static get Event() {
  76. return Event
  77. }
  78. static get EVENT_KEY() {
  79. return EVENT_KEY
  80. }
  81. static get DefaultType() {
  82. return DefaultType
  83. }
  84. // Overrides
  85. isWithContent() {
  86. return this.getTitle() || this._getContent()
  87. }
  88. addAttachmentClass(attachment) {
  89. $(this.getTipElement()).addClass(`${CLASS_PREFIX}-${attachment}`)
  90. }
  91. getTipElement() {
  92. this.tip = this.tip || $(this.config.template)[0]
  93. return this.tip
  94. }
  95. setContent() {
  96. const $tip = $(this.getTipElement())
  97. // We use append for html objects to maintain js events
  98. this.setElementContent($tip.find(Selector.TITLE), this.getTitle())
  99. let content = this._getContent()
  100. if (typeof content === 'function') {
  101. content = content.call(this.element)
  102. }
  103. this.setElementContent($tip.find(Selector.CONTENT), content)
  104. $tip.removeClass(`${ClassName.FADE} ${ClassName.SHOW}`)
  105. }
  106. // Private
  107. _getContent() {
  108. return this.element.getAttribute('data-content') ||
  109. this.config.content
  110. }
  111. _cleanTipClass() {
  112. const $tip = $(this.getTipElement())
  113. const tabClass = $tip.attr('class').match(BSCLS_PREFIX_REGEX)
  114. if (tabClass !== null && tabClass.length > 0) {
  115. $tip.removeClass(tabClass.join(''))
  116. }
  117. }
  118. // Static
  119. static _jQueryInterface(config) {
  120. return this.each(function () {
  121. let data = $(this).data(DATA_KEY)
  122. const _config = typeof config === 'object' ? config : null
  123. if (!data && /destroy|hide/.test(config)) {
  124. return
  125. }
  126. if (!data) {
  127. data = new Popover(this, _config)
  128. $(this).data(DATA_KEY, data)
  129. }
  130. if (typeof config === 'string') {
  131. if (typeof data[config] === 'undefined') {
  132. throw new TypeError(`No method named "${config}"`)
  133. }
  134. data[config]()
  135. }
  136. })
  137. }
  138. }
  139. /**
  140. * ------------------------------------------------------------------------
  141. * jQuery
  142. * ------------------------------------------------------------------------
  143. */
  144. $.fn[NAME] = Popover._jQueryInterface
  145. $.fn[NAME].Constructor = Popover
  146. $.fn[NAME].noConflict = function () {
  147. $.fn[NAME] = JQUERY_NO_CONFLICT
  148. return Popover._jQueryInterface
  149. }
  150. return Popover
  151. })($)
  152. export default Popover