utils.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. (function (x) {
  2. var o = x.prototype;
  3. o.after || (o.after = function () { var e, m = arguments, l = m.length, i = 0, t = this, p = t.parentNode, n = Node, s = String, d = document; if (p !== null) { while (i < l) { ((e = m[i]) instanceof n) ? (((t = t.nextSibling) !== null) ? p.insertBefore(e, t) : p.appendChild(e)) : p.appendChild(d.createTextNode(s(e))); ++i; } } });
  4. }(Element));
  5. // from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/before()/before().md
  6. (function (arr) {
  7. arr.forEach(function (item) {
  8. if (item.hasOwnProperty('before')) {
  9. return;
  10. }
  11. Object.defineProperty(item, 'before', {
  12. configurable: true,
  13. enumerable: true,
  14. writable: true,
  15. value: function before() {
  16. var argArr = Array.prototype.slice.call(arguments),
  17. docFrag = document.createDocumentFragment();
  18. argArr.forEach(function (argItem) {
  19. var isNode = argItem instanceof Node;
  20. docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
  21. });
  22. this.parentNode.insertBefore(docFrag, this);
  23. }
  24. });
  25. });
  26. })([Element.prototype, CharacterData.prototype, DocumentType.prototype])
  27. window.shuffleArray = function (array) {
  28. for (let i = array.length - 1; i > 0; i--) {
  29. const j = Math.floor(Math.random() * (i + 1));
  30. [array[i], array[j]] = [array[j], array[i]];
  31. }
  32. return array;
  33. };
  34. function isInViewport (el) {
  35. var rect = el.getBoundingClientRect();
  36. return (
  37. rect.top >= 0 &&
  38. rect.left >= 0 &&
  39. rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
  40. rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  41. );
  42. }
  43. function isVisible(el){
  44. return !!el.offsetParent;
  45. }
  46. function lazyLoad(parent) {
  47. parent.querySelectorAll('[lazy]').forEach(el => {
  48. if (isVisible(el)) {
  49. console.log("Lazy load", el,isVisible(el));
  50. const attributeKeys = el.getAttributeNames();
  51. attributeKeys.forEach(akey => {
  52. if (akey.startsWith("lazy-")) {
  53. console.log("Load attribute " + akey);
  54. const realkey = akey.substring(5);
  55. const value = el.getAttribute(akey);
  56. el.setAttribute(realkey, value);
  57. console.log("Set", realkey, "=", value);
  58. } else {
  59. console.log("Skip attribute", akey, "not lazy");
  60. }
  61. });
  62. }
  63. });
  64. }
  65. window.addEventListener("DOMContentLoaded", function () {
  66. const scrollTo=(contentAnchor)=>{
  67. contentAnchor.scrollIntoView({
  68. behavior:"smooth",
  69. block:"start",
  70. inline:"nearest"
  71. });
  72. console.log("Scroll content into view");
  73. }
  74. if (!location.hash) {
  75. const contentAnchor=document.querySelector("#content");
  76. if(contentAnchor)scrollTo(contentAnchor);
  77. }else{
  78. setTimeout(()=> {
  79. window.scrollTo(0, 0);
  80. const contentAnchor=document.querySelector(location.hash);
  81. scrollTo(contentAnchor);
  82. }, 1);
  83. }
  84. document.querySelectorAll("[toggle]").forEach(el => {
  85. const toggleId = el.getAttribute("toggle");
  86. if (!toggleId) return;
  87. const parent = document.querySelector("#" + toggleId);
  88. if (!parent) return;
  89. el.addEventListener("click", () => {
  90. parent.querySelectorAll(".expandable").forEach(el2 => {
  91. if (el2.classList.contains("expandedOnPortrait"))
  92. el2.classList.remove("expandedOnPortrait");
  93. else el2.classList.add("expandedOnPortrait");
  94. });
  95. parent.querySelectorAll(".toggleable").forEach(el2 => {
  96. let toggled = el2.classList.contains("toggledOn");
  97. let toggledPortrait = el2.classList.contains("toggledOnPortrait");
  98. let notToggledPortrait = el2.classList.contains("toggledOffPortrait");
  99. toggled = toggled || toggledPortrait;
  100. const portrait = notToggledPortrait || toggledPortrait;
  101. console.log("Toggle ", toggled ? "on" : "off'")
  102. if (toggled) {
  103. // el.removeAttribute("toggled",false);
  104. el2.classList.add(portrait ? "toggledOffPortrait" : "toggledOff");
  105. el2.classList.remove("toggledOn");
  106. el2.classList.remove("toggledOnPortrait");
  107. } else {
  108. // el.setAttribute("toggled",true);
  109. el2.classList.remove("toggledOff");
  110. el2.classList.remove("toggledOffPortrait");
  111. el2.classList.add(portrait ? "toggledOnPortrait" : "toggledOn");
  112. }
  113. });
  114. });
  115. })
  116. });