Layout von Websiten mit Bootstrap und Foundation
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

popover.js 4.3KB

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