utils.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. const isMobile = /mobile/i.test(window.navigator.userAgent);
  2. const utils = {
  3. /**
  4. * Parse second to time string
  5. *
  6. * @param {Number} second
  7. * @return {String} 00:00 or 00:00:00
  8. */
  9. secondToTime: (second) => {
  10. const add0 = (num) => num < 10 ? '0' + num : '' + num;
  11. const hour = Math.floor(second / 3600);
  12. const min = Math.floor((second - hour * 3600) / 60);
  13. const sec = Math.floor(second - hour * 3600 - min * 60);
  14. return (hour > 0 ? [hour, min, sec] : [min, sec]).map(add0).join(':');
  15. },
  16. /**
  17. * control play progress
  18. */
  19. // get element's view position
  20. getElementViewLeft: (element) => {
  21. let actualLeft = element.offsetLeft;
  22. let current = element.offsetParent;
  23. const elementScrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft;
  24. if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {
  25. while (current !== null) {
  26. actualLeft += current.offsetLeft;
  27. current = current.offsetParent;
  28. }
  29. }
  30. else {
  31. while (current !== null && current !== element) {
  32. actualLeft += current.offsetLeft;
  33. current = current.offsetParent;
  34. }
  35. }
  36. return actualLeft - elementScrollLeft;
  37. },
  38. /**
  39. * optimize control play progress
  40. * optimize get element's view position,for float dialog video player
  41. * getBoundingClientRect 在 IE8 及以下返回的值缺失 width、height 值
  42. * getBoundingClientRect 在 Firefox 11 及以下返回的值会把 transform 的值也包含进去
  43. * getBoundingClientRect 在 Opera 10.5 及以下返回的值缺失 width、height 值
  44. */
  45. getBoundingClientRectViewLeft (element) {
  46. const scrollTop = window.scrollY || window.pageYOffset || document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0);
  47. if (element.getBoundingClientRect) {
  48. if (typeof this.getBoundingClientRectViewLeft.offset !== 'number') {
  49. let temp = document.createElement('div');
  50. temp.style.cssText = 'position:absolute;top:0;left:0;';
  51. document.body.appendChild(temp);
  52. this.getBoundingClientRectViewLeft.offset = -temp.getBoundingClientRect().top - scrollTop;
  53. document.body.removeChild(temp);
  54. temp = null;
  55. }
  56. const rect = element.getBoundingClientRect();
  57. const offset = this.getBoundingClientRectViewLeft.offset;
  58. return rect.left + offset;
  59. } else {
  60. // not support getBoundingClientRect
  61. return this.getElementViewLeft(element);
  62. }
  63. },
  64. getScrollPosition () {
  65. return {
  66. left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
  67. top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
  68. };
  69. },
  70. setScrollPosition ({left = 0, top = 0}) {
  71. if (this.isFirefox) {
  72. document.documentElement.scrollLeft = left;
  73. document.documentElement.scrollTop = top;
  74. }
  75. else {
  76. window.scrollTo(left, top);
  77. }
  78. },
  79. isMobile: isMobile,
  80. isFirefox: /firefox/i.test(window.navigator.userAgent),
  81. isChrome: /chrome/i.test(window.navigator.userAgent),
  82. storage: {
  83. set: (key, value) => {
  84. localStorage.setItem(key, value);
  85. },
  86. get: (key) => localStorage.getItem(key)
  87. },
  88. cumulativeOffset: (element) => {
  89. let top = 0, left = 0;
  90. do {
  91. top += element.offsetTop || 0;
  92. left += element.offsetLeft || 0;
  93. element = element.offsetParent;
  94. } while (element);
  95. return {
  96. top: top,
  97. left: left
  98. };
  99. },
  100. nameMap: {
  101. dragStart: isMobile ? 'touchstart' : 'mousedown',
  102. dragMove: isMobile ? 'touchmove' : 'mousemove',
  103. dragEnd: isMobile ? 'touchend' : 'mouseup'
  104. },
  105. color2Number: (color) => {
  106. if (color[0] === '#') {
  107. color = color.substr(1);
  108. }
  109. if (color.length === 3) {
  110. color = `${color[0]}${color[0]}${color[1]}${color[1]}${color[2]}${color[2]}`;
  111. }
  112. return parseInt(color, 16) + 0x000000 & 0xffffff;
  113. },
  114. number2Color: (number) => '#' + ('00000' + number.toString(16)).slice(-6),
  115. number2Type: (number) => {
  116. switch (number) {
  117. case 0:
  118. return 'right';
  119. case 1:
  120. return 'top';
  121. case 2:
  122. return 'bottom';
  123. default:
  124. return 'right';
  125. }
  126. },
  127. };
  128. export default utils;