MemberScripts

<!-- 💙 MEMBERSCRIPT #8 v0.1 💙 SIMPLE COPY ELEMENT TO CLIPBOARD -->
<script>
// Step 1: Click the element with the attribute ms-code-copy="trigger"
const triggerElement = document.querySelector('[ms-code-copy="trigger"]');
triggerElement.addEventListener('click', () => {
  // Step 2: Copy text from the element with the attribute ms-code-copy="subject" to the clipboard
  const subjectElement = document.querySelector('[ms-code-copy="subject"]');
  const subjectText = subjectElement.innerText;

  // Create a temporary textarea element to facilitate the copying process
  const tempTextArea = document.createElement('textarea');
  tempTextArea.value = subjectText;
  document.body.appendChild(tempTextArea);

  // Select the text within the textarea and copy it to the clipboard
  tempTextArea.select();
  document.execCommand('copy');

  // Remove the temporary textarea
  document.body.removeChild(tempTextArea);
});
</script>

<!-- 💙 MEMBERSCRIPT #7 v0.1 💙 DELAY LOADING ELEMENTS -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const elementsToDelay = document.querySelectorAll('[ms-code-delay]');

    elementsToDelay.forEach(element => {
      element.style.visibility = "hidden"; // Hide the element initially
    });

    setTimeout(function() {
      elementsToDelay.forEach(element => {
        element.style.visibility = "visible"; // Make the element visible after the delay
        element.style.opacity = "0"; // Set the initial opacity to 0
        element.style.animation = "fadeIn 0.5s"; // Apply the fadeIn animation
        element.addEventListener("animationend", function() {
          element.style.opacity = "1"; // Set opacity to 1 at the end of the animation
        });
      });
    }, 1000);
  });
</script>
<style>
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
</style>

<!-- 💙 MEMBERSCRIPT #6 v0.1 💙 CREATE ITEM GROUPS FROM JSON -->
<script>
document.addEventListener("DOMContentLoaded", async function() {
  const memberstack = window.$memberstackDom;

  // Function to display nested/sub items
  const displayNestedItems = async function(printList) {
    const jsonGroup = printList.getAttribute('ms-code-print-list');
    const placeholder = printList.querySelector(`[ms-code-print-item="${jsonGroup}"]`);
    if (!placeholder) return;

    const itemTemplate = placeholder.outerHTML;
    const itemContainer = document.createElement('div'); // Create a new container for the items

    const member = await memberstack.getMemberJSON();
    const items = member.data && member.data[jsonGroup] ? Object.values(member.data[jsonGroup]) : [];
    if (items.length === 0) return; // If no items, exit the function

    items.forEach(item => {
      if (Object.keys(item).length === 0) return;

      const newItem = document.createElement('div');
      newItem.innerHTML = itemTemplate;
      const itemElements = newItem.querySelectorAll('[ms-code-item-text]');
      itemElements.forEach(itemElement => {
        const jsonKey = itemElement.getAttribute('ms-code-item-text');
        const value = item && item[jsonKey] ? item[jsonKey] : '';
        itemElement.textContent = value;
      });

      // Add item key attribute
      const itemKey = Object.keys(member.data[jsonGroup]).find(k => member.data[jsonGroup][k] === item);
      newItem.firstChild.setAttribute('ms-code-item-key', itemKey);

      itemContainer.appendChild(newItem.firstChild);
    });

    // Replace the existing list with the new items
    printList.innerHTML = itemContainer.innerHTML;
  };

  // Call displayNestedItems function on initial page load for each instance
  const printLists = document.querySelectorAll('[ms-code-print-list]');
  printLists.forEach(printList => {
    displayNestedItems(printList);
  });

  // Add click event listener to elements with ms-code-update="json"
  const updateButtons = document.querySelectorAll('[ms-code-update="json"]');
  updateButtons.forEach(button => {
    button.addEventListener("click", async function() {
      // Add a delay of 500ms
      await new Promise(resolve => setTimeout(resolve, 500));
      printLists.forEach(printList => {
        displayNestedItems(printList);
      });
    });
  });
});
</script>

<!-- 💙 MEMBERSCRIPT #5 v0.1 💙 FILL TEXT BASED ON SIMPLE ITEM IN JSON -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const memberstack = window.$memberstackDom;

  // Function to fill text elements with attribute ms-code-fill-text
  const fillTextElements = async function() {
    // Retrieve the current member JSON data
    const member = await memberstack.getMemberJSON();

    // Fill text elements with attribute ms-code-fill-text
    const textElements = document.querySelectorAll('[ms-code-fill-text]');
    textElements.forEach(element => {
      const jsonKey = element.getAttribute('ms-code-fill-text');
      const value = member.data && member.data[jsonKey] ? member.data[jsonKey] : '';
      element.textContent = value;
    });
  };

  // Function to handle script #4 event
  const handleScript4Event = async function() {
    // Add a delay of 500ms
    await new Promise(resolve => setTimeout(resolve, 500));
    await fillTextElements();
  };

  // Add click event listener to elements with ms-code-update="json"
  const updateButtons = document.querySelectorAll('[ms-code-update="json"]');
  updateButtons.forEach(button => {
    button.addEventListener("click", handleScript4Event);
  });

  // Call fillTextElements function on initial page load
  fillTextElements();
});
</script>

<!-- 💙 MEMBERSCRIPT #4 v0.1 💙 UPDATE MEMBER JSON IN LOCAL STORAGE ON BUTTON CLICK -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const updateButtons = document.querySelectorAll('[ms-code-update="json"]');

  updateButtons.forEach(button => {
    button.addEventListener("click", async function() {
      const memberstack = window.$memberstackDom;

      // Add a delay
      await new Promise(resolve => setTimeout(resolve, 500));

      // Retrieve the current member JSON data
      const member = await memberstack.getMemberJSON();

      // Save the member JSON as a local storage item
      localStorage.setItem("memberJSON", JSON.stringify(member));
    });
  });
});
</script>

<!-- 💙 MEMBERSCRIPT #3 v0.1 💙 SAVE JSON TO LOCALSTORAGE ON PAGE LOAD -->
<script>
document.addEventListener("DOMContentLoaded", async function() {
  const memberstack = window.$memberstackDom;
  
  // Retrieve the current member JSON data
  const member = await memberstack.getMemberJSON();

  // Save the member JSON as a local storage item
  localStorage.setItem("memberJSON", JSON.stringify(member));
});
</script>

<!-- 💙 MEMBERSCRIPT #2 v0.1 💙 ADD ITEM GROUPS TO MEMBER JSON -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const msCodeForm2 = document.querySelector('[ms-code="form2"]');
  const jsonList = msCodeForm2.getAttribute("ms-code-json-list");

  msCodeForm2.addEventListener('submit', async function(event) {
    event.preventDefault(); // Prevent the default form submission

    // Retrieve the current member JSON data
    const memberstack = window.$memberstackDom;
    const member = await memberstack.getMemberJSON();

    // Create a new member.data object if it doesn't already exist
    if (!member.data) {
      member.data = {};
    }

    // Check if the friends group already exists
    if (!member.data[jsonList]) {
      // Create a new friends group object
      member.data[jsonList] = {};
    }

    // Retrieve the input values for creating the subgroup
    const inputs = msCodeForm2.querySelectorAll('[ms-code-json-name]');
    const subgroup = {};
    inputs.forEach(input => {
      const jsonName = input.getAttribute('ms-code-json-name');
      const newItem = input.value;
      subgroup[jsonName] = newItem;
    });

    // Generate a unique key for the new subgroup prefixed with the main group name
    const timestamp = Date.now();
    const subgroupKey = `${jsonList}-${timestamp}`;

    // Create the new subgroup within the friends group
    member.data[jsonList][subgroupKey] = subgroup;

    // Update the member JSON with the new data
    await memberstack.updateMemberJSON({
      json: member.data
    });

    // Log a message to the console
    console.log(`New subgroup with key ${subgroupKey} has been created within ${jsonList} group.`);

    // Reset the input values
    inputs.forEach(input => {
      input.value = "";
    });
  });
});
</script>

<!-- 💙 MEMBERSCRIPT #1 v0.1 💙 ADD INDIVIDUAL ITEMS TO MEMBER JSON -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const forms = document.querySelectorAll('[ms-code="form1"]');
  
  forms.forEach(form => {
    const jsonType = form.getAttribute("ms-code-json-type");
    const jsonList = form.getAttribute("ms-code-json-list");

    form.addEventListener('submit', async function(event) {
      event.preventDefault(); // Prevent the default form submission

      // Retrieve the current member JSON data
      const memberstack = window.$memberstackDom;
      const member = await memberstack.getMemberJSON();

      // Create a new member.data object if it doesn't already exist
      if (!member.data) {
        member.data = {};
      }

      if (jsonType === "group") {
        // Check if the group already exists
        if (!member.data[jsonList]) {
          // Create a new group object
          member.data[jsonList] = {};
        }

        // Iterate over the inputs with ms-code-json-name attribute
        const inputs = form.querySelectorAll('[ms-code-json-name]');
        inputs.forEach(input => {
          const jsonName = input.getAttribute('ms-code-json-name');
          const newItem = input.value;
          member.data[jsonList][jsonName] = newItem;
        });

        // Log a message to the console for group type
        console.log(`Item(s) have been added to member JSON with group key ${jsonList}.`);
      } else if (jsonType === "array") {
        // Check if the array already exists
        if (!member.data[jsonList]) {
          // Create a new array
          member.data[jsonList] = [];
        }

        // Retrieve the input values for the array type
        const inputs = form.querySelectorAll('[ms-code-json-name]');
        inputs.forEach(input => {
          const jsonName = input.getAttribute('ms-code-json-name');
          const newItem = input.value;
          member.data[jsonList].push(newItem);
        });

        // Log a message to the console for array type
        console.log(`Item(s) have been added to member JSON with array key ${jsonList}.`);
      } else {
        // Retrieve the input value and key for the basic item type
        const input = form.querySelector('[ms-code-json-name]');
        const jsonName = input.getAttribute('ms-code-json-name');
        const newItem = input.value;
        member.data[jsonName] = newItem;

        // Log a message to the console for basic item type
        console.log(`Item ${newItem} has been added to member JSON with key ${jsonName}.`);
      }

      // Update the member JSON with the new data
      await memberstack.updateMemberJSON({
        json: member.data
      });

      // Reset the input values
      const inputs = form.querySelectorAll('[ms-code-json-name]');
      inputs.forEach(input => {
        input.value = "";
      });
    });
  });
});
</script>