A TamperMonkey script to add ignore/hide list functionality to Yad2

yad2IgnoreList.js

// ==UserScript==
// @name         Yad2 Ignore List
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Adding Yad2 an option to ignote posts
// @author       Yahav Shasha (Yahav  _DOT_  Shasha@gmail.com)
// @include      https://yad2.co.il/*
// @include      https://*.yad2.co.il/*
// @require      https://cdnjs.cloudflare.com/ajax/libs/firebase/9.22.2/firebase-compat.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/firebase/9.22.2/firebase-app-compat.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/firebase/9.22.2/firebase-database-compat.min.js
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const style = `<style>
        .image_container .ignore-btn {
            top: 0;
            right: 0;
            z-index: 2;
            position: absolute;
        }
        .image_container .ignore-btn .ignore_icon_wrapper {
            position: absolute;
            top: 5px;
            right: 30px;

        }
        .ignored_toggle_button {
            display: inline-block;
            position: relative;
            margin-right: 5px;
            vertical-align: middle;
            border: 1px solid #dbdbdb;
            background-color: #fff;
            border-radius: 2px;
            padding: 0 10px 0 15px;
            cursor: pointer;
            font-size: .875rem;
            line-height: 1.0625rem;
            line-height: 35px;
        }
        .ignored_toggle_button:hover {
            background-color: #dbdbdb;
        }
        .ignore_icon_wrapper .ignore_icon
        {
            cursor: pointer;
            padding: 0;
            background-color: #fff;
            border-radius: 15px;
            box-shadow: 0 2px 5px 0 rgba(0,0,0,.3);
            width: 25px;
            height: 25px;
            margin-right: 5px;
            color: #363636;
            font-size: 1.2em;
            padding-left: 1px;
            padding-top: 2px;
        }
        .ignore_icon_wrapper .ignore_icon:hover {
            color: red;
        }
        div.feed_item[ignored_post=true] .ignore_icon_wrapper .ignore_icon:hover {
            color: #19d528!important;
        }
        div.feed_item[ignored_post=true] .color_container {
            background-color:#b5a7a7!important;
        }
        body.hide_ignored div.feed_item[ignored_post=true] {
            display:none;
        }
    </style>`;

    const ignoreButtonHtml = (postId) => {
        return `<div class="ignore-btn"><div class="ignore_icon_wrapper"><button onclick="event.preventDefault();yad2IgnoreList.handleIgnoreButtonClick('${postId}');" class="ignore_icon"><i class="y2i_profile_expired"></i></button></div></div>`;
    }

    const toggleIgnoredDisplayButtonHtml = `<button onclick="event.preventDefault();yad2IgnoreList.toggleDisplay();" class="ignored_toggle_button"><i class="y2i_profile_expired"></i> <span>תצוגת מוסתרים</span></button>`;


    class yad2IgnoreList {

        constructor() {

            this.initFirebase().then((ignoredList) => {
                console.debug('Firebase IgnoredList', ignoredList)

                this.ignoreList = (ignoredList !== null) ? ignoredList : [];
                console.debug('this.ignoreList', this.ignoreList)

                this.injectStyles();
                this.injectUI();
                this.initListeners();
                this.processDisplayedPosts();
            });

        }

        initFirebase() {
            this.firebaseApp = firebase.initializeApp({
                apiKey: "",
                authDomain: ".firebaseapp.com",
                databaseURL: "https://-default-rtdb.firebaseio.com",
                projectId: "",
                storageBucket: ".appspot.com",
                messagingSenderId: "",
                appId: "1::web:"
            });

            const db = this.db = firebase.database().ref();

            return new Promise((resolve, reject) => {
                let ignoredList = null
                db.get().then((snapshot) => {
                    if (snapshot.exists()) {
                        ignoredList = snapshot.val();
                    }
                }).catch((error) => {
                    console.error(error);
                }).then(() => {
                    resolve(ignoredList);
                });
            });
        }

        injectStyles() {
            document.head.insertAdjacentHTML('beforeEnd', style);
            document.body.classList.add('hide_ignored');
        }

        injectUI() {
            this.toggleButtonInjectionInterval = setInterval(this.injectToggleButton.bind(this), 1000);
        }

        injectToggleButton() {
            console.debug('Waiting for buttons container to appear')
            if (document.getElementsByClassName('feed_options_v2').length > 0) {
                console.debug('buttons container appeared');
                const buttonsContainer = document.getElementsByClassName('feed_options_v2').item(0);
                buttonsContainer.insertAdjacentHTML('beforeEnd', toggleIgnoredDisplayButtonHtml);
                clearInterval(this.toggleButtonInjectionInterval);

            }
        }

        initListeners() {
            const postsPlaceholder = document.querySelector('.feed_items.feed-list-ghost');

            const observerConfig = { attributes: true, childList: false, subtree: false };
            const observerCallback = (mutationList, observer) => {
                console.debug('Mutations List', mutationList);
                for (const mutation of mutationList) {
                    if (mutation.type === "attributes" && mutation.attributeName === 'class' && mutation.target.classList.contains('ghost_toggle')) {
                        console.debug('Mutations Mutated', mutation, 'Old Value', mutation.oldValue);
                        this.processDisplayedPosts()
                    }
                }
            };

            const observer = new MutationObserver(observerCallback);
            observer.observe(postsPlaceholder, observerConfig);
        }

        isPostIgnored(postId) {
            console.debug('isPostIgnored: ', postId, (this.ignoreList.findIndex(element => element.includes(postId)) !== -1))
            return this.ignoreList.findIndex(element => element.includes(postId)) !== -1;
        }

        handleIgnoreButtonClick(postId) {
            if (this.isPostIgnored(postId)) {
                console.debug('Post Is ignored, Removing...', postId);
                this.removeFromIgnoredPosts(postId);
            }
            else {
                console.debug('Post Is NOT ignored, adding...', postId);
                this.addToIgnoredPosts(postId);
            }
        }

        addToIgnoredPosts(postId) {
            this.ignoreList.push(postId);
            this.db.set(this.ignoreList).then(() => {
                console.debug('Updated yad2IgnoreList', this.ignoreList)
                document.querySelector(`.feed_item[item-id="${postId}"]`).setAttribute('ignored_post', 'true');
            }).catch((error) => {
                console.error(error);
            }).then(() => {
                this.processDisplayedPosts();
            });
        }

        removeFromIgnoredPosts(postId) {
            let i = 0;
            while (i < this.ignoreList.length) {
                if (this.ignoreList[i] === postId) {
                    this.ignoreList.splice(i, 1);
                } else {
                    ++i;
                }
            }
            this.db.set(this.ignoreList).then(() => {
                console.debug('Updated yad2IgnoreList', this.ignoreList)
                document.querySelector(`.feed_item[item-id="${postId}"]`).setAttribute('ignored_post', 'false');
            }).catch((error) => {
                console.error(error);
            }).then(() => {
                this.processDisplayedPosts();
            });
        }

        processDisplayedPosts() {
            const posts = document.querySelectorAll("div.feed_item");
            posts.forEach((post) => {

                const postId = post.getAttribute('item-id');
                const imageContainer = post.getElementsByClassName('image_container').item(0);

                console.debug(postId, post);
                if (this.isPostIgnored(postId)) {
                    post.setAttribute('ignored_post', 'true');
                }


                if (imageContainer.querySelector('.ignore-btn') === null) {
                    console.debug('Adding Button to ' + postId)
                    imageContainer.insertAdjacentHTML('afterBegin', ignoreButtonHtml(postId));
                }

                console.debug('Image', post.getElementsByClassName('image_container'));
            });
        }

        toggleDisplay() {
            if (document.body.classList.contains('hide_ignored')) {
                document.body.classList.remove('hide_ignored')
            }
            else {
                document.body.classList.add('hide_ignored')
            }
        }
    }

    window.yad2IgnoreList = new yad2IgnoreList();

})();