Skip to content

Instantly share code, notes, and snippets.

@brianorwhatever

brianorwhatever/insertCollectibleImages.js

Last active March 23, 2023 05:34
Show Gist options
  • Save brianorwhatever/20d1de96e4fbbbd0178cc5f79cd6f55f to your computer and use it in GitHub Desktop.
Save brianorwhatever/20d1de96e4fbbbd0178cc5f79cd6f55f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. brianorwhatever revised this gist Mar 23, 2023. 1 changed file with 20 additions and 1 deletion.
    21 changes: 20 additions & 1 deletion insertCollectibleImages.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    function insertCollectibleImages() {
    function insertCollectibleImageBeforePreTags() {
    // Find all <pre> tags in the document
    const preTags = document.querySelectorAll('pre');

    @@ -8,6 +8,12 @@ function insertCollectibleImages() {
    }

    preTags.forEach((preTag) => {
    // Check if the image has already been inserted
    const prevSibling = preTag.previousElementSibling;
    if (prevSibling && prevSibling.tagName.toLowerCase() === 'img') {
    return;
    }

    let jsonData;
    try {
    jsonData = JSON.parse(preTag.textContent);
    @@ -35,4 +41,17 @@ function insertCollectibleImages() {
    console.error('The JSON data does not meet the required conditions.');
    }
    });
    }

    // Run the function once immediately
    insertCollectibleImageBeforePreTags();

    // Find the scrolling container with the attribute 'data-test-id' and value 'virtuoso-scroller'
    const scrollingContainer = document.querySelector('[data-test-id="virtuoso-scroller"]');

    if (scrollingContainer) {
    // Run the function whenever the scrolling container is scrolled
    scrollingContainer.addEventListener('scroll', insertCollectibleImageBeforePreTags);
    } else {
    console.error('No scrolling container found with the class "scrolling-container".');
    }
  2. brianorwhatever revised this gist Mar 23, 2023. 2 changed files with 38 additions and 37 deletions.
    37 changes: 0 additions & 37 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,37 +0,0 @@
    function insertCollectibleImageBeforePreTag() {
    // Find the <pre> tag in the document
    const preTag = document.querySelector('pre');

    if (!preTag) {
    console.error('No <pre> tag found in the document.');
    return;
    }

    // Parse the JSON content of the <pre> tag
    let jsonData;
    try {
    jsonData = JSON.parse(preTag.textContent);
    } catch (error) {
    console.error('Invalid JSON content in the <pre> tag.');
    return;
    }

    // Check if the "type" value is an array containing "VerifiableCollectible"
    const typeArray = jsonData.type;
    if (Array.isArray(typeArray) && typeArray.includes('VerifiableCollectible')) {
    const imageSrc = jsonData.credentialSubject?.image;

    if (imageSrc) {
    // Create an <img> tag and set its "src" attribute
    const imgTag = document.createElement('img');
    imgTag.src = imageSrc;

    // Insert the <img> tag before the <pre> tag
    preTag.parentNode.insertBefore(imgTag, preTag);
    } else {
    console.error('No "credentialSubject.image" property found in the JSON data.');
    }
    } else {
    console.error('The JSON data does not meet the required conditions.');
    }
    }
    38 changes: 38 additions & 0 deletions insertCollectibleImages.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@
    function insertCollectibleImages() {
    // Find all <pre> tags in the document
    const preTags = document.querySelectorAll('pre');

    if (preTags.length === 0) {
    console.error('No <pre> tags found in the document.');
    return;
    }

    preTags.forEach((preTag) => {
    let jsonData;
    try {
    jsonData = JSON.parse(preTag.textContent);
    } catch (error) {
    console.error('Invalid JSON content in a <pre> tag.');
    return;
    }

    // Check if the "type" value is an array containing "VerifiableCollectible"
    const typeArray = jsonData.type;
    if (Array.isArray(typeArray) && typeArray.includes('VerifiableCollectible')) {
    const imageSrc = jsonData.credentialSubject?.image;

    if (imageSrc) {
    // Create an <img> tag and set its "src" attribute
    const imgTag = document.createElement('img');
    imgTag.src = imageSrc;

    // Insert the <img> tag before the <pre> tag
    preTag.parentNode.insertBefore(imgTag, preTag);
    } else {
    console.error('No "credentialSubject.image" property found in the JSON data.');
    }
    } else {
    console.error('The JSON data does not meet the required conditions.');
    }
    });
    }
  3. brianorwhatever revised this gist Mar 23, 2023. No changes.
  4. brianorwhatever renamed this gist Mar 23, 2023. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → gistfile1.js
    View file
    File renamed without changes.
  5. brianorwhatever created this gist Mar 23, 2023.
    37 changes: 37 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    function insertCollectibleImageBeforePreTag() {
    // Find the <pre> tag in the document
    const preTag = document.querySelector('pre');

    if (!preTag) {
    console.error('No <pre> tag found in the document.');
    return;
    }

    // Parse the JSON content of the <pre> tag
    let jsonData;
    try {
    jsonData = JSON.parse(preTag.textContent);
    } catch (error) {
    console.error('Invalid JSON content in the <pre> tag.');
    return;
    }

    // Check if the "type" value is an array containing "VerifiableCollectible"
    const typeArray = jsonData.type;
    if (Array.isArray(typeArray) && typeArray.includes('VerifiableCollectible')) {
    const imageSrc = jsonData.credentialSubject?.image;

    if (imageSrc) {
    // Create an <img> tag and set its "src" attribute
    const imgTag = document.createElement('img');
    imgTag.src = imageSrc;

    // Insert the <img> tag before the <pre> tag
    preTag.parentNode.insertBefore(imgTag, preTag);
    } else {
    console.error('No "credentialSubject.image" property found in the JSON data.');
    }
    } else {
    console.error('The JSON data does not meet the required conditions.');
    }
    }