blueimp-gallery-indicator.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. /*
  2. * blueimp Gallery Indicator JS
  3. * https://github.com/blueimp/Gallery
  4. *
  5. * Copyright 2013, Sebastian Tschan
  6. * https://blueimp.net
  7. *
  8. * Licensed under the MIT license:
  9. * https://opensource.org/licenses/MIT
  10. */
  11. /* global define */
  12. ;(function (factory) {
  13. 'use strict'
  14. if (typeof define === 'function' && define.amd) {
  15. // Register as an anonymous AMD module:
  16. define(['./blueimp-helper', './blueimp-gallery'], factory)
  17. } else {
  18. // Browser globals:
  19. factory(window.blueimp.helper || window.jQuery, window.blueimp.Gallery)
  20. }
  21. })(function ($, Gallery) {
  22. 'use strict'
  23. $.extend(Gallery.prototype.options, {
  24. // The tag name, Id, element or querySelector of the indicator container:
  25. indicatorContainer: 'ol',
  26. // The class for the active indicator:
  27. activeIndicatorClass: 'active',
  28. // The list object property (or data attribute) with the thumbnail URL,
  29. // used as alternative to a thumbnail child element:
  30. thumbnailProperty: 'thumbnail',
  31. // Defines if the gallery indicators should display a thumbnail:
  32. thumbnailIndicators: true
  33. })
  34. var initSlides = Gallery.prototype.initSlides
  35. var addSlide = Gallery.prototype.addSlide
  36. var resetSlides = Gallery.prototype.resetSlides
  37. var handleClick = Gallery.prototype.handleClick
  38. var handleSlide = Gallery.prototype.handleSlide
  39. var handleClose = Gallery.prototype.handleClose
  40. $.extend(Gallery.prototype, {
  41. createIndicator: function (obj) {
  42. var indicator = this.indicatorPrototype.cloneNode(false)
  43. var title = this.getItemProperty(obj, this.options.titleProperty)
  44. var thumbnailProperty = this.options.thumbnailProperty
  45. var thumbnailUrl
  46. var thumbnail
  47. if (this.options.thumbnailIndicators) {
  48. if (thumbnailProperty) {
  49. thumbnailUrl = this.getItemProperty(obj, thumbnailProperty)
  50. }
  51. if (thumbnailUrl === undefined) {
  52. thumbnail = obj.getElementsByTagName && $(obj).find('img')[0]
  53. if (thumbnail) {
  54. thumbnailUrl = thumbnail.src
  55. }
  56. }
  57. if (thumbnailUrl) {
  58. indicator.style.backgroundImage = 'url("' + thumbnailUrl + '")'
  59. }
  60. }
  61. if (title) {
  62. indicator.title = title
  63. }
  64. return indicator
  65. },
  66. addIndicator: function (index) {
  67. if (this.indicatorContainer.length) {
  68. var indicator = this.createIndicator(this.list[index])
  69. indicator.setAttribute('data-index', index)
  70. this.indicatorContainer[0].appendChild(indicator)
  71. this.indicators.push(indicator)
  72. }
  73. },
  74. setActiveIndicator: function (index) {
  75. if (this.indicators) {
  76. if (this.activeIndicator) {
  77. this.activeIndicator.removeClass(this.options.activeIndicatorClass)
  78. }
  79. this.activeIndicator = $(this.indicators[index])
  80. this.activeIndicator.addClass(this.options.activeIndicatorClass)
  81. }
  82. },
  83. initSlides: function (reload) {
  84. if (!reload) {
  85. this.indicatorContainer = this.container.find(
  86. this.options.indicatorContainer
  87. )
  88. if (this.indicatorContainer.length) {
  89. this.indicatorPrototype = document.createElement('li')
  90. this.indicators = this.indicatorContainer[0].children
  91. }
  92. }
  93. initSlides.call(this, reload)
  94. },
  95. addSlide: function (index) {
  96. addSlide.call(this, index)
  97. this.addIndicator(index)
  98. },
  99. resetSlides: function () {
  100. resetSlides.call(this)
  101. this.indicatorContainer.empty()
  102. this.indicators = []
  103. },
  104. handleClick: function (event) {
  105. var target = event.target || event.srcElement
  106. var parent = target.parentNode
  107. if (parent === this.indicatorContainer[0]) {
  108. // Click on indicator element
  109. this.preventDefault(event)
  110. this.slide(this.getNodeIndex(target))
  111. } else if (parent.parentNode === this.indicatorContainer[0]) {
  112. // Click on indicator child element
  113. this.preventDefault(event)
  114. this.slide(this.getNodeIndex(parent))
  115. } else {
  116. return handleClick.call(this, event)
  117. }
  118. },
  119. handleSlide: function (index) {
  120. handleSlide.call(this, index)
  121. this.setActiveIndicator(index)
  122. },
  123. handleClose: function () {
  124. if (this.activeIndicator) {
  125. this.activeIndicator.removeClass(this.options.activeIndicatorClass)
  126. }
  127. handleClose.call(this)
  128. }
  129. })
  130. return Gallery
  131. })