JAVASCRIPT   8

dom.js

Guest on 20th July 2021 03:28:40 PM

  1. 'use strict';
  2.  
  3. /**
  4.  * Most of the methods have been borrowed/adapted from https://plainjs.com/javascript,
  5.  * except fadeIn/fadeOut (from https://github.com/DimitriMikadze/vanilla-helpers/blob/master/js/vanillaHelpers.js)
  6.  */
  7.  
  8. import window from 'global/window';
  9. import document from 'global/document';
  10. import mejs from '../core/mejs';
  11.  
  12. export function loadScript (url) {
  13.         return new Promise((resolve, reject) => {
  14.                 const script = document.createElement('script');
  15.                 script.src = url;
  16.                 script.async = true;
  17.                 script.onload = () => {
  18.                         script.remove();
  19.                         resolve();
  20.                 };
  21.                 script.onerror = () => {
  22.                         script.remove();
  23.                         reject();
  24.                 };
  25.                 document.head.appendChild(script);
  26.         });
  27. }
  28.  
  29. export function offset (el) {
  30.         var rect = el.getBoundingClientRect(),
  31.                 scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
  32.                 scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  33.         return {top: rect.top + scrollTop, left: rect.left + scrollLeft}
  34. }
  35.  
  36. let hasClassMethod, addClassMethod, removeClassMethod;
  37.  
  38. if ('classList' in document.documentElement) {
  39.         hasClassMethod = (el, className) => el.classList !== undefined && el.classList.contains(className);
  40.         addClassMethod = (el, className) => el.classList.add(className);
  41.         removeClassMethod = (el, className) => el.classList.remove(className);
  42. } else {
  43.         hasClassMethod = (el, className) => new RegExp('\\b' + className + '\\b').test(el.className);
  44.         addClassMethod = (el, className) => {
  45.                 if (!hasClass(el, className)) {
  46.                         el.className += ' ' + className;
  47.                 }
  48.         };
  49.         removeClassMethod = (el, className) => {
  50.                 el.className = el.className.replace(new RegExp('\\b' + className + '\\b', 'g'), '');
  51.         };
  52. }
  53.  
  54. export const hasClass = hasClassMethod;
  55. export const addClass = addClassMethod;
  56. export const removeClass = removeClassMethod;
  57.  
  58. export function toggleClass (el, className) {
  59.         hasClass(el, className) ? removeClass(el, className) : addClass(el, className);
  60. }
  61.  
  62. // fade an element from the current state to full opacity in "duration" ms
  63. export function fadeOut (el, duration = 400, callback) {
  64.         if (!el.style.opacity) {
  65.                 el.style.opacity = 1;
  66.         }
  67.  
  68.         let start = null;
  69.         window.requestAnimationFrame(function animate (timestamp) {
  70.                 start = start || timestamp;
  71.                 const progress = timestamp - start;
  72.                 const opacity = parseFloat(1 - progress / duration, 2);
  73.                 el.style.opacity = opacity < 0 ? 0 : opacity;
  74.                 if (progress > duration) {
  75.                         if (callback && typeof(callback) === 'function') {
  76.                                 callback();
  77.                         }
  78.                 } else {
  79.                         window.requestAnimationFrame(animate);
  80.                 }
  81.         });
  82. }
  83.  
  84. // fade out an element from the current state to full transparency in "duration" ms
  85. // display is the display style the element is assigned after the animation is done
  86. export function fadeIn (el, duration = 400, callback) {
  87.         if (!el.style.opacity) {
  88.                 el.style.opacity = 0;
  89.         }
  90.  
  91.         let start = null;
  92.         window.requestAnimationFrame(function animate (timestamp) {
  93.                 start = start || timestamp;
  94.                 const progress = timestamp - start;
  95.                 const opacity = parseFloat(progress / duration, 2);
  96.                 el.style.opacity = opacity > 1 ? 1 : opacity;
  97.                 if (progress > duration) {
  98.                         if (callback && typeof(callback) === 'function') {
  99.                                 callback();
  100.                         }
  101.                 } else {
  102.                         window.requestAnimationFrame(animate);
  103.                 }
  104.         });
  105. }
  106.  
  107. export function siblings (el, filter) {
  108.         const siblings = [];
  109.         el = el.parentNode.firstChild;
  110.         do {
  111.                 if (!filter || filter(el)) {
  112.                         siblings.push(el)
  113.                 }
  114.         } while ((el = el.nextSibling));
  115.         return siblings;
  116. }
  117.  
  118. export function visible (elem) {
  119.         if (elem.getClientRects !== undefined && elem.getClientRects === 'function') {
  120.                 return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
  121.         }
  122.         return !!( elem.offsetWidth || elem.offsetHeight);
  123. }
  124.  
  125. export function ajax (url, dataType, success, error) {
  126.         const xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
  127.  
  128.         let
  129.                 type = 'application/x-www-form-urlencoded; charset=UTF-8',
  130.                 completed = false,
  131.                 accept = '*/'.concat('*')
  132.         ;
  133.  
  134.         switch (dataType) {
  135.                 case 'text':
  136.                         type = 'text/plain';
  137.                         break;
  138.                 case 'json':
  139.                         type = 'application/json, text/javascript';
  140.                         break;
  141.                 case 'html':
  142.                         type = 'text/html';
  143.                         break;
  144.                 case 'xml':
  145.                         type = 'application/xml, text/xml';
  146.                         break;
  147.         }
  148.  
  149.         if (type !== 'application/x-www-form-urlencoded') {
  150.                 accept = `${type}, */*; q=0.01`;
  151.         }
  152.  
  153.         if (xhr) {
  154.                 xhr.open('GET', url, true);
  155.                 xhr.setRequestHeader('Accept', accept);
  156.                 xhr.onreadystatechange = function () {
  157.  
  158.                         // Ignore repeat invocations
  159.                         if (completed) {
  160.                                 return;
  161.                         }
  162.  
  163.                         if (xhr.readyState === 4) {
  164.                                 if (xhr.status === 200) {
  165.                                         completed = true;
  166.                                         let data;
  167.                                         switch (dataType) {
  168.                                                 case 'json':
  169.                                                         data = JSON.parse(xhr.responseText);
  170.                                                         break;
  171.                                                 case 'xml':
  172.                                                         data = xhr.responseXML;
  173.                                                         break;
  174.                                                 default:
  175.                                                         data = xhr.responseText;
  176.                                                         break;
  177.                                         }
  178.                                         success(data);
  179.                                 } else if (typeof error === 'function') {
  180.                                         error(xhr.status);
  181.                                 }
  182.                         }
  183.                 };
  184.  
  185.                 xhr.send();
  186.         }
  187. }
  188.  
  189. mejs.Utils = mejs.Utils || {};
  190. mejs.Utils.offset = offset;
  191. mejs.Utils.hasClass = hasClass;
  192. mejs.Utils.addClass = addClass;
  193. mejs.Utils.removeClass = removeClass;
  194. mejs.Utils.toggleClass = toggleClass;
  195. mejs.Utils.fadeIn = fadeIn;
  196. mejs.Utils.fadeOut = fadeOut;
  197. mejs.Utils.siblings = siblings;
  198. mejs.Utils.visible = visible;
  199. mejs.Utils.ajax = ajax;
  200. mejs.Utils.loadScript = loadScript;

Raw Paste


Login or Register to edit or fork this paste. It's free.