extensions/workflowy-helper/archive.js

function g(){return((1+Math.random())*65536|0).toString(16).substring(1)}

function generateUUID(){return g()+g()+"-"+g()+"-"+g()+"-"+g()+"-"+g()+g()+g()}

function createTweetIframe(node, url) { // {{{
  var existing = node.querySelectorAll("iframe");
  if (existing.length === 0) {
    var iframe = document.createElement('iframe');
    iframe.setAttribute('border', '0');
    iframe.setAttribute('frameborder', '0');
    iframe.setAttribute('height', '250');
    iframe.setAttribute('width', '300');
    iframe.setAttribute('id', "tweet_" + generateUUID());
    iframe.setAttribute('src', 'https://twitframe.com/show?url=' + encodeURIComponent(url) + '&theme=dark')
    iframe.addEventListener('load', function() {
      this.contentWindow.postMessage({ element: this.id, query: "height" }, "https://twitframe.com");
    });
    node.appendChild(iframe);
  }
}

// }}}


function describeTimeElementDate(element) { // {{{
  if (!(element instanceof HTMLTimeElement)) {
    return "unknown";
  }

  const startYear = element.getAttribute('startyear');
  const startMonth = element.getAttribute('startmonth');
  const startDay = element.getAttribute('startday');

  if (!startYear || !startMonth || !startDay || isNaN(startYear) || isNaN(startMonth) || isNaN(startDay)) {
    return 'Invalid date attributes on the <time> element';
  }

  const timeElementDate = new Date(startYear, startMonth - 1, startDay);
  timeElementDate.setHours(0, 0, 0, 0);

  const today = new Date();
  today.setHours(0, 0, 0, 0);

  // const startOfWeek = new Date(today);
  // startOfWeek.setDate(today.getDate() - today.getDay()); // set to the nearest past Sunday

  // const endOfWeek = new Date(startOfWeek);
  // endOfWeek.setDate(startOfWeek.getDate() + 6); // set to the next Saturday

  // const startOfLastWeek = new Date(startOfWeek);
  // startOfLastWeek.setDate(startOfWeek.getDate() - 7);

  // const endOfNextWeek = new Date(startOfWeek);
  // endOfNextWeek.setDate(endOfWeek.getDate() + 7);

  const dayDifference = Math.round((timeElementDate - today) / (1000 * 60 * 60 * 24));

  const daysOfWeek = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
  const dayOfWeek = daysOfWeek[timeElementDate.getDay()];

  const monthsOfYear = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
  const month = monthsOfYear[timeElementDate.getMonth()];

  var ret = [dayOfWeek, month];

  if (dayDifference === 0) {
    ret.push('today');
  } else if (dayDifference === 1) {
    ret.push('tomorrow');
  } else if (dayDifference === -1) {
    ret.push('yesterday');
  } else {
    if (dayDifference < 0) {
      if (dayDifference > -8) {
        ret.push('last');
      } else {
        ret.push('older');
      }
    } else {
      if (dayDifference < 8) {
        ret.push('next');
      } else {
        ret.push('later');
      }
    }
  }

  // if (timeElementDate >= startOfWeek && timeElementDate <= endOfWeek) {
  //   ret.push('this');
  // } else if (timeElementDate > endOfWeek && timeElementDate <= endOfNextWeek) {
  //   ret.push('next');
  // } else if (timeElementDate >= startOfLastWeek && timeElementDate < startOfWeek ) {
  //   ret.push('last');
  // } else if (timeElementDate < startOfLastWeek) {
  //   ret.push('older');
  // } else if (timeElementDate > endOfNextWeek) {
  //   ret.push('later');
  // }

  return ret;
}

// }}}

function getTime(element) { // {{{
  if (!(element instanceof HTMLTimeElement)) {
    return "unknown";
  }

  var startHour = element.getAttribute('starthour');
  var startMinute = element.getAttribute('startminute');
  const startDay = element.getAttribute('startday'); // If you don't need the day, you can remove this line

  if (!startDay || isNaN(startDay)) {
    return 'Invalid date attributes on the <time> element';
  }

  if (!startHour || isNaN(startHour)) {
    startHour = 0;
  } else {
    startHour = parseInt(startHour);
  }

  if (!startMinute || isNaN(startMinute)) {
    startMinute = 0;
  } else {
    startMinute = parseInt(startMinute);
  }

  if (startMinute === 0 && startHour === 0) {
      return "";
  }

  // Formatting the hour and minute to ensure two digits
  startHour = startHour.toString().padStart(2, '0');
  startMinute = startMinute.toString().padStart(2, '0');

  return " " + `${startHour}:${startMinute}`;
}

// }}}

function createYoutubeIframe(node, id) { // {{{
  var existing = node.querySelectorAll("iframe");
  if (existing.length === 0) {
    var iframe = document.createElement('iframe');
    iframe.setAttribute('width', '300');
    iframe.setAttribute('height', '168');
    iframe.setAttribute('src', 'https://www.youtube.com/embed/' + id);
    iframe.setAttribute('title', 'YouTube video player');
    iframe.setAttribute('frameborder', '0');
    iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;');
    iframe.setAttribute('allowfullscreen', '');
    // iframe.addEventListener('load', function() {
    //   this.contentWindow.postMessage({ element: this.id, query: "height" }, "https://twitframe.com");
    // });
    node.appendChild(iframe);
  }
}

// }}}

function updateProject(projectNode) { // {{{
    projectNode.spellcheck = false;
    removeClassesStartingWith(projectNode, "linked");
    removeClassesStartingWith(projectNode, "tagged");
    removeClassesStartingWith(projectNode, "backlinked");
    removeClassesStartingWith(projectNode, "timed");
    removeClassesStartingWith(projectNode, "empt");
    removeClassesStartingWith(projectNode, "workflow");
    const breadcrumbNodes = [];
    const names = [];
    const notes = [];
    for (let i = 0; i < projectNode.children.length; i++) {
        const child = projectNode.children[i];
        if (child.classList.contains('name')) {
            names.push(child);
        }
        if (child.classList.contains('notes')) {
            notes.push(child);
        }
        if (child.classList.contains('_1zok2')) {
            breadcrumbNodes.push(child.querySelector('.breadcrumbs'));
        }
    }
    var markdownImageRegex = /\!\[.*\]\((.+)\)/;
    var twitterUrlRegex = /https?:\/\/twitter\.com\/([A-Za-z0-9_]+)\/status\/(\d+)/g;
    var youtubeUrlRegex = /(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?v=([a-zA-Z0-9_-]+)/;
    var spotifyUrlRegex = /(?:https?:\/\/)?open\.spotify\.com\/album\/([a-zA-Z0-9_-]+)/;
    [notes, names].forEach(function(n) {
      if (n.length > 0) {
        const text = safeGetContent(n[0], ".content > .innerContentContainer");
        var matcher = text.match(markdownImageRegex);
        if (matcher !== null) {
          var imgSrc = matcher[1];
          createImageNodeAfterNode(projectNode, imgSrc);
        }
        // var matcher = text.match(twitterUrlRegex);
        // if (matcher !== null) {
        //   var url = matcher[0];
        //   createTweetIframe(projectNode, url);
        // }
        var matcher = text.match(youtubeUrlRegex);
        if (matcher !== null) {
          var id = matcher[1];
          createYoutubeIframe(projectNode, id);
        }
     }
    });

    if (names.length > 0) {
        const name = names[0];
        const tags = name.querySelectorAll('.contentTag');
        const times = name.querySelectorAll('time');

        var content = name.querySelector('.content');


        if (content.childNodes[0].nodeType === Node.TEXT_NODE) {
          projectNode.classList.add('empty');
        }

        tags.forEach(tag => {
            var tagText = safeGetContent(tag, ".contentTagText").trim();
            if (tagText !== "") {
                var className = "tagged-" + tagText;
                projectNode.classList.add("tagged");
                projectNode.classList.add(className);
            }
        });
        times.forEach(time => {
            var relatives = describeTimeElementDate(time);
            // var existing = time.querySelectorAll("span.timetime");
            // if (existing.length === 0) {
            //   var timetime = getTime(time);
            //   var timespan = document.createElement('span');
            //   timespan.classList.add("timetime");
            //   timespan.innerHTML = timetime;
            //   time.appendChild(timespan);
            // }
            projectNode.classList.add("timed");
            relatives.forEach(relative => {
                projectNode.classList.add("timed-" + relative);
            });
        });
        const links = name.querySelectorAll('.contentLink');
        links.forEach(link => {
            link.spellcheck = false;
            const nonLetterRegex = /[^a-zA-Z]/g;
            var linkFull = link.innerText.trim().replace(nonLetterRegex, '');
            if (linkFull.startsWith("x")) {
                var className = "linked-" + linkFull;
                var linkClassName = "link-" + linkFull;
                projectNode.classList.add("linked");
                projectNode.classList.add(className);
                link.classList.add("link");
                link.classList.add(linkClassName);
            }
            if ( linkFull.startsWith("z")) {
              link.classList.add("people");
            }
            if ( linkFull.startsWith("q")) {
              var className = "linked-" + linkFull;
              projectNode.classList.add("contexted");
              projectNode.classList.add(className);
              link.classList.add("context");
            }
        });
    }
    if (breadcrumbNodes.length > 0) {
        const links = breadcrumbNodes[0].querySelectorAll('a');
        for (let i = 0; i < links.length; i++) {
            var link = links[i];
            if (link.innerHTML == "🌎 Life") {
				if (link !== undefined) {
					var hotspot = links[i + 1].innerText.split(' ')[1];
					var className = "backlinked-" + hotspot;
					projectNode.classList.add("backlinked");
					projectNode.classList.add(className);
					break;
				}
            }
        }
    }
}

// }}}

function update() { // {{{
      const projectNodes = document.querySelectorAll('.project');
      projectNodes.forEach(projectNode => {
          updateProject(projectNode);
      });
      const mainContent = document.querySelector("#app");
      const observer = new MutationObserver(function(mutations) {
        for (const mutation of mutations) {
          var nodes = null;
          if (mutation.addedNodes.length > 0) {
              nodes = mutation.addedNodes;
          } else if (mutation.removedNodes.length > 0) {
              nodes = mutation.addedNodes;
          }
          if ( nodes !== null ) {
              //var node = nodes.item(0);
              var node = mutation.target;
              if ( node !== null ) {
                  var projectNode = node.closest('.project');
                  if ( projectNode !== null && projectNode !== node ) {
                      updateProject(projectNode);
                  }
              }
          }
          if (mutation.type === "childList") {
             //pass
          }
        }
      });

      observer.observe(mainContent, { childList: true, subtree: true });
}

// }}}

window.addEventListener('message', function(e) {
    if (e.origin !== "https://twitframe.com") return;
    var data = e.data;
    if (data.height && data.element.startsWith('tweet_')) {
        var iframe = document.getElementById(data.element);
        if (iframe) {
            iframe.style.height = parseInt(data.height) + "px";
        }
    }
});

function createTag(innerContentContainer, tagType, defaultText) { // {{{

  var timeElement = innerContentContainer.querySelector('time');
  if (timeElement !== null) {
    const previousSibling = timeElement.previousSibling;
    if (previousSibling && previousSibling.nodeType === 3) { // If it's a text node
      previousSibling.textContent = previousSibling.textContent.replace(/\s+$/, '');
    }
    timeElement.remove();
    innerContentContainer.appendChild(document.createTextNode(' '));
  }

  const tagContainer = document.createElement('span');
  tagContainer.className = 'contentTag explosive';
  tagContainer.setAttribute('title', 'Filter #' + tagType);
  tagContainer.setAttribute('data-val', '#' + tagType);

  const tagText = document.createElement('span');
  tagText.className = 'contentTagText';
  tagText.innerText = defaultText || tagType;

  const tagNub = document.createElement('span');
  tagNub.className = 'contentTagNub';

  tagContainer.appendChild(document.createTextNode('#'));
  tagContainer.appendChild(tagText);
  tagContainer.appendChild(tagNub);

  addSpaceIfNeeded(innerContentContainer);
  innerContentContainer.appendChild(tagContainer);

  if (timeElement !== null) {
    addSpaceIfNeeded(innerContentContainer);
    innerContentContainer.appendChild(timeElement);
  }

}

// }}}

function removeTag(tagContainer) { // {{{
  if (tagContainer) {
    const previousSibling = tagContainer.previousSibling;
    if (previousSibling && previousSibling.nodeType === 3) { // If it's a text node
      // Remove the space before the tag if it exists
      previousSibling.textContent = previousSibling.textContent.replace(/\s+$/, '');
    }
    tagContainer.remove();
  }
}

// }}}

function addSpaceIfNeeded(container) { // {{{
  if (!/\s$/.test(container.textContent)) {
    container.appendChild(document.createTextNode(' '));
  }
}

// }}}

function updateTimes(parentElements, step) { // {{{
  for (let i = 0; i < parentElements.length; i++) {
    var parentElement = parentElements[i];
    var innerContentContainer = parentElement.querySelector('.innerContentContainer')
    var timeElement = innerContentContainer.querySelector('time');
    var projectNode = parentElement.closest('.project');

    if (step === -2) {
      if (timeElement !== null) {
        const previousSibling = timeElement.previousSibling;
        if (previousSibling && previousSibling.nodeType === 3) { // If it's a text node
          previousSibling.textContent = previousSibling.textContent.replace(/\s+$/, '');
        }
        timeElement.remove();
        updateProject(projectNode);
      }
      continue;
    }

    if ( timeElement === null ) {
      // Create a new time element with today's date
      const today = new Date();
      timeElement = document.createElement('time');
      timeElement.setAttribute('startyear', today.getFullYear());
      timeElement.setAttribute('startmonth', today.getMonth() + 1); // Convert to 1-indexed
      timeElement.setAttribute('startday', today.getDate());
      timeElement.style.textDecoration = "underline rgb(220, 224, 226)";

      const options = { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' };
      const formattedDate = today.toLocaleDateString('en-US', options);
      timeElement.textContent = formattedDate;

      addSpaceIfNeeded(innerContentContainer);
      innerContentContainer.appendChild(timeElement);
      updateProject(projectNode);
      continue;
    }

    if ( step === 0 ) {
      var date = new Date();
    } else {
      var date = new Date(
            parseInt(timeElement.getAttribute('startyear'), 10),
            parseInt(timeElement.getAttribute('startmonth'), 10) - 1, // Months are 0-indexed in JavaScript
            parseInt(timeElement.getAttribute('startday'), 10)
          );
      date.setDate(date.getDate() + step);
    }
    const options = { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' };
    const formattedDate = date.toLocaleDateString('en-US', options);
    timeElement.textContent = formattedDate;
    timeElement.setAttribute('startyear', date.getFullYear());
    timeElement.setAttribute('startmonth', date.getMonth() + 1); // Convert back to 1-indexed
    timeElement.setAttribute('startday', date.getDate());
    updateProject(projectNode);

  }
}

// }}}

function toggleTag(parentElements, tag) { // {{{
  for (let i = 0; i < parentElements.length; i++) {
    var parentElement = parentElements[i];
    var innerContentContainer = parentElement.querySelector('.innerContentContainer');
    if (!innerContentContainer) return;
    var projectNode = parentElement.closest('.project');
    var tagContainer = innerContentContainer.querySelector('.contentTag[data-val="#' + tag + '"]');
    if (tagContainer) {
      removeTag(tagContainer);
    } else {
      createTag(innerContentContainer, tag);
    }
  }
}

// }}}

function updateDoneTags(parentElements, command) { // {{{
  for (let i = 0; i < parentElements.length; i++) {
    var parentElement = parentElements[i];
    var innerContentContainer = parentElement.querySelector('.innerContentContainer');
    if (!innerContentContainer) return;

    var projectNode = parentElement.closest('.project');

    var doneTagContainer = innerContentContainer.querySelector('.contentTag[data-val="#done"]');
    var missedTagContainer = innerContentContainer.querySelector('.contentTag[data-val="#missed"]');
    var underwayTagContainer = innerContentContainer.querySelector('.contentTag[data-val="#underway"]');
    var naTagContainer = innerContentContainer.querySelector('.contentTag[data-val="#na"]');

    if (command === 'done') {
      removeTag(missedTagContainer);
      removeTag(underwayTagContainer);
      removeTag(naTagContainer);
      if (doneTagContainer) {
        removeTag(doneTagContainer);
      } else {
        createTag(innerContentContainer, 'done');
      }
    } else if (command === 'missed') {
      removeTag(doneTagContainer);
      removeTag(underwayTagContainer);
      removeTag(naTagContainer);
      if (missedTagContainer) {
        removeTag(missedTagContainer);
      } else {
        createTag(innerContentContainer, 'missed');
      }
    } else if (command === 'underway') {
      removeTag(doneTagContainer);
      removeTag(missedTagContainer);
      removeTag(naTagContainer);
      if (underwayTagContainer) {
        removeTag(underwayTagContainer);
      } else {
        createTag(innerContentContainer, 'underway');
      }
    } else if (command === 'na') {
      removeTag(doneTagContainer);
      removeTag(missedTagContainer);
      removeTag(underwayTagContainer);
      if (naTagContainer) {
        removeTag(naTagContainer);
      } else {
        createTag(innerContentContainer, 'na');
      }
    } else if (command === '0') {
      removeTag(doneTagContainer);
      removeTag(missedTagContainer);
      removeTag(naTagContainer);
      removeTag(underwayTagContainer);
    }
    updateProject(projectNode);
  }
}

// }}}

function updatePriorityTags(parentElements, command) { // {{{
  for (let i = 0; i < parentElements.length; i++) {
    var parentElement = parentElements[i];
    var innerContentContainer = parentElement.querySelector('.innerContentContainer');
    if (!innerContentContainer) return;

    var projectNode = parentElement.closest('.project');

    var aTagContainer = innerContentContainer.querySelector('.contentTag[data-val="#a"]');
    var bTagContainer = innerContentContainer.querySelector('.contentTag[data-val="#b"]');
    var cTagContainer = innerContentContainer.querySelector('.contentTag[data-val="#c"]');
    var dTagContainer = innerContentContainer.querySelector('.contentTag[data-val="#d"]');

    if (command === 'a') {
      removeTag(bTagContainer);
      removeTag(cTagContainer);
      removeTag(dTagContainer);
      if (aTagContainer) {
        removeTag(aTagContainer);
      } else {
        createTag(innerContentContainer, 'a');
      }
    } else if (command === 'b') {
      removeTag(aTagContainer);
      removeTag(cTagContainer);
      removeTag(dTagContainer);
      if (bTagContainer) {
        removeTag(bTagContainer);
      } else {
        createTag(innerContentContainer, 'b');
      }
    } else if (command === 'c') {
      removeTag(aTagContainer);
      removeTag(bTagContainer);
      removeTag(dTagContainer);
      if (cTagContainer) {
        removeTag(cTagContainer);
      } else {
        createTag(innerContentContainer, 'c');
      }
    } else if (command === 'd') {
      removeTag(aTagContainer);
      removeTag(bTagContainer);
      removeTag(cTagContainer);
      if (dTagContainer) {
        removeTag(dTagContainer);
      } else {
        createTag(innerContentContainer, 'd');
      }
    } else if (command === '0') {
      removeTag(aTagContainer);
      removeTag(bTagContainer);
      removeTag(cTagContainer);
      removeTag(dTagContainer);
    }
    updateProject(projectNode);
  }
}

// }}}


const keyCommands = {
  'ArrowRight': focused => updateTimes(focused, 1),
  'ArrowLeft': focused => updateTimes(focused, -1),
  'Backspace': focused => updateTimes(focused, -2),
  'ArrowDown': focused => updateTimes(focused, 0),
  '≈': focused => updateDoneTags(focused, 'done'),
  '√': focused => updateDoneTags(focused, 'underway'),
  '¬': focused => updateDoneTags(focused, 'missed'),
  'œ': focused => updateDoneTags(focused, 'na'),
  'å': focused => updatePriorityTags(focused, 'a'),
  '∫': focused => updatePriorityTags(focused, 'b'),
  'ç': focused => updatePriorityTags(focused, 'c'),
  '∂': focused => updatePriorityTags(focused, 'd'),
  '®': focused => toggleTag(focused, 'review'),
  '†': focused => toggleTag(focused, 'todo')
};

document.addEventListener('keydown', function(event) {
	console.log(mutations);
  if (event.altKey && keyCommands[event.key]) {
    const focused = document.querySelectorAll('.name--focused');
    if (focused.length > 0) {
      event.preventDefault();
      keyCommands[event.key](focused);
    }
  }
});

	
	const observer = new MutationObserver((mutations) => {
				console.log(mutations);
				updateTaskListItems();
		});


window.onload = function() {
	const checkLoaded = setInterval(function() {
		if (document.querySelector("#app > div")) {
			clearInterval(checkLoaded);
			update();
		}
	}, 100);
}