Raw Source Toggle Dropdown

• Minified Source

Oliviate / Gitti Nailpolish Collection

// ==UserScript==
// @name         Gitti Nailpolish Collection
// @namespace    https://www.gitticonsciousbeauty.com/
// @version      1.0
// @description  mark every owned nailpolish on the gitti website
// @license      GPL-3.0-or-later; http://www.gnu.org/licenses/gpl-3.0.txt
// @author       Oliviate
// @match        https://www.gitticonsciousbeauty.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=gitticonsciousbeauty.com
// @grant        none
// ==/UserScript==

window.collection = [];
window.wishlist = [];

// water
window.collection.push(
    30 // Blue Cashmere
);

// plant
window.collection.push(
    102, // Klassisch Rot
    103, // Aubergine
    105, // Minze
    111, // Pfirsichrosa
    133, // Orange
    134, // Weiss
    135, // Schwarz
    137, // Leuchtendes Gelb
    141, // Digital Dance
    142, // Afterglow
    146, // Wild Orchid
    151, // Grass Green
    154, // Aurora Pink
    156, // Pool Position
    162, //
    167, // Digital Lavender
    168, // Royal Purple
    169, // Cream Tan
    170, // Viva Magenta
    175, // Berlin Sun
    177 // Jade Green
);

// glitter / metallic
window.collection.push(
    202, // Lilac Spark
    204, // Liquid Gold
    211, // Green Spark
    212, // Cranberry Glitter
    301, // Rise Above Red
    302, // Better Me Bronze
    303, // A Muse Me Black
    304, // Boundless Blue
    305, // Vanity Vert
    306 // Mother Me Mauve
);

// coats
window.collection.push(
    'nail-highlighter',
    'top-base-coat'
);

// wishlist
window.wishlist.push(
    10, // Dunkles Beerenrot
    19, // Sanftes Korall
    26, // Puderrosa
    32, // Aperitivo
    34, // Golden Hour
    126, // Pastellrot
    127, // Pflaumenrot
    132, // Lavendel
    140, // Sweet Heat
    143, // That's Hot
    150, // Forest Green
    160, // Caramel Fudge
    180, // Pumpkin Spice
    'smoothing-nail-primer',
    'high-gloss-top-coat'
);

window.respondToVisibility = function (element, callback) {
  var options = {
    root: document.documentElement,
  };

  var observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        console.log(entry,entry.intersectionRatio > 0);
      callback(element);
    });
  }, options);

  observer.observe(element);
};

window.waitForElement = function (selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                observer.disconnect();
                resolve(document.querySelector(selector));
            }
        });

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

window.markCollected = function (element) {
    const parent = element || document;

    Array.from(parent.querySelectorAll('.swatch-grid-item > [class*="swatch-"], .swatch_wrapper > [class*="swatch-"]'))
        .forEach(i => {

        if(!i.className) return;

        let itemName = i.className.match(/swatch-(\S+)/);
        if(itemName) {
            itemName = itemName[1];
            itemName = parseInt(itemName) || itemName;
        }

        if(!itemName) return;

        if(window.collection.indexOf(itemName) > -1) {
            i.classList.add('swatch-owned');

        } else if(window.wishlist.indexOf(itemName) > -1) {
            i.classList.add('swatch-wanted');
        }
    });
};

(function(win) {
    'use strict';

    const style = document.createElement('style');
    style.innerText = ".swatch-owned { \
outline: 2px solid limegreen; \
} \
.swatch-wanted { \
outline: 2px solid blue; \
}";

    console.log(style);
    document.head.appendChild(style);

    try {
        console.log('script start');

        win.markCollected();

        /*const overlay = document.querySelector('.bundle_overlay');
        console.log('overlay', overlay);
        win.respondToVisibility(overlay, win.markCollected);*/
        win.waitForElement('.bundle_overlay').then((el) => {
            win.markCollected(el);
        });

        console.log('script end');
    } catch(ex) {
        console.log('script error: ',ex);
    }
    
})(window);