popover.js 4.1 KB

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