dom.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. /* istanbul ignore next */
  2. import Vue from 'vue'
  3. const isServer = Vue.prototype.$isServer
  4. const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g
  5. const MOZ_HACK_REGEXP = /^moz([A-Z])/
  6. const ieVersion = isServer ? 0 : Number(document.documentMode)
  7. /* istanbul ignore next */
  8. const trim = function(string) {
  9. return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '')
  10. }
  11. /* istanbul ignore next */
  12. const camelCase = function(name) {
  13. return name
  14. .replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
  15. return offset ? letter.toUpperCase() : letter
  16. })
  17. .replace(MOZ_HACK_REGEXP, 'Moz$1')
  18. }
  19. /* istanbul ignore next */
  20. export const on = (function() {
  21. if (!isServer && document.addEventListener) {
  22. return function(element, event, handler) {
  23. if (element && event && handler) {
  24. element.addEventListener(event, handler, false)
  25. }
  26. }
  27. } else {
  28. return function(element, event, handler) {
  29. if (element && event && handler) {
  30. element.attachEvent('on' + event, handler)
  31. }
  32. }
  33. }
  34. })()
  35. /* istanbul ignore next */
  36. export const off = (function() {
  37. if (!isServer && document.removeEventListener) {
  38. return function(element, event, handler) {
  39. if (element && event) {
  40. element.removeEventListener(event, handler, false)
  41. }
  42. }
  43. } else {
  44. return function(element, event, handler) {
  45. if (element && event) {
  46. element.detachEvent('on' + event, handler)
  47. }
  48. }
  49. }
  50. })()
  51. /* istanbul ignore next */
  52. export const once = function(el, event, fn) {
  53. var listener = function() {
  54. if (fn) {
  55. fn.apply(this, arguments)
  56. }
  57. off(el, event, listener)
  58. }
  59. on(el, event, listener)
  60. }
  61. /* istanbul ignore next */
  62. export function hasClass(el, cls) {
  63. if (!el || !cls) return false
  64. if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.')
  65. if (el.classList) {
  66. return el.classList.contains(cls)
  67. } else {
  68. return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1
  69. }
  70. }
  71. /* istanbul ignore next */
  72. export function addClass(el, cls) {
  73. if (!el) return
  74. var curClass = el.className
  75. var classes = (cls || '').split(' ')
  76. for (var i = 0, j = classes.length; i < j; i++) {
  77. var clsName = classes[i]
  78. if (!clsName) continue
  79. if (el.classList) {
  80. el.classList.add(clsName)
  81. } else if (!hasClass(el, clsName)) {
  82. curClass += ' ' + clsName
  83. }
  84. }
  85. if (!el.classList) {
  86. el.className = curClass
  87. }
  88. }
  89. /* istanbul ignore next */
  90. export function removeClass(el, cls) {
  91. if (!el || !cls) return
  92. var classes = cls.split(' ')
  93. var curClass = ' ' + el.className + ' '
  94. for (var i = 0, j = classes.length; i < j; i++) {
  95. var clsName = classes[i]
  96. if (!clsName) continue
  97. if (el.classList) {
  98. el.classList.remove(clsName)
  99. } else if (hasClass(el, clsName)) {
  100. curClass = curClass.replace(' ' + clsName + ' ', ' ')
  101. }
  102. }
  103. if (!el.classList) {
  104. el.className = trim(curClass)
  105. }
  106. }
  107. /* istanbul ignore next */
  108. export const getStyle =
  109. ieVersion < 9
  110. ? function(element, styleName) {
  111. if (isServer) return
  112. if (!element || !styleName) return null
  113. styleName = camelCase(styleName)
  114. if (styleName === 'float') {
  115. styleName = 'styleFloat'
  116. }
  117. try {
  118. switch (styleName) {
  119. case 'opacity':
  120. try {
  121. return element.filters.item('alpha').opacity / 100
  122. } catch (e) {
  123. return 1.0
  124. }
  125. default:
  126. return element.style[styleName] || element.currentStyle ? element.currentStyle[styleName] : null
  127. }
  128. } catch (e) {
  129. return element.style[styleName]
  130. }
  131. }
  132. : function(element, styleName) {
  133. if (isServer) return
  134. if (!element || !styleName) return null
  135. styleName = camelCase(styleName)
  136. if (styleName === 'float') {
  137. styleName = 'cssFloat'
  138. }
  139. try {
  140. var computed = document.defaultView.getComputedStyle(element, '')
  141. return element.style[styleName] || computed ? computed[styleName] : null
  142. } catch (e) {
  143. return element.style[styleName]
  144. }
  145. }
  146. /* istanbul ignore next */
  147. export function setStyle(element, styleName, value) {
  148. if (!element || !styleName) return
  149. if (typeof styleName === 'object') {
  150. for (var prop in styleName) {
  151. if (styleName.hasOwnProperty(prop)) {
  152. setStyle(element, prop, styleName[prop])
  153. }
  154. }
  155. } else {
  156. styleName = camelCase(styleName)
  157. if (styleName === 'opacity' && ieVersion < 9) {
  158. element.style.filter = isNaN(value) ? '' : 'alpha(opacity=' + value * 100 + ')'
  159. } else {
  160. element.style[styleName] = value
  161. }
  162. }
  163. }
  164. export const isScroll = (el, vertical) => {
  165. if (isServer) return
  166. const determinedDirection = vertical !== null || vertical !== undefined
  167. const overflow = determinedDirection ? (vertical ? getStyle(el, 'overflow-y') : getStyle(el, 'overflow-x')) : getStyle(el, 'overflow')
  168. return overflow.match(/(scroll|auto)/)
  169. }
  170. export const getScrollContainer = (el, vertical) => {
  171. if (isServer) return
  172. let parent = el
  173. while (parent) {
  174. if ([window, document, document.documentElement].includes(parent)) {
  175. return window
  176. }
  177. if (isScroll(parent, vertical)) {
  178. return parent
  179. }
  180. parent = parent.parentNode
  181. }
  182. return parent
  183. }
  184. export const isInContainer = (el, container) => {
  185. if (isServer || !el || !container) return false
  186. const elRect = el.getBoundingClientRect()
  187. let containerRect
  188. if ([window, document, document.documentElement, null, undefined].includes(container)) {
  189. containerRect = {
  190. top: 0,
  191. right: window.innerWidth,
  192. bottom: window.innerHeight,
  193. left: 0,
  194. }
  195. } else {
  196. containerRect = container.getBoundingClientRect()
  197. }
  198. return (
  199. elRect.top < containerRect.bottom &&
  200. elRect.bottom > containerRect.top &&
  201. elRect.right > containerRect.left &&
  202. elRect.left < containerRect.right
  203. )
  204. }