בקשה | רעיון לביצוע - קוד לתיקון משמעותי לאתר משנת יוסף החדש

[י. פל.]

@a.y.f. כתב בבקשה | רעיון לביצוע - קוד לתיקון משמעותי לאתר משנת יוסף החדש:

@יום-חדש-מתחיל למה שלא תבקש ממשנת יוסף

כתבתי להם את זה עוד כשזה היה זמין רק למספר משתמשים מצומצם, ועלה בגורלי ליפול ברשת...
מאז הם הפכו את האתר לעוד יותר גרוע, עדיף כבר לשתוק...

[י. פל.]

@עדלאידע
אדיר!!!
רק תטפל כעת בסל הקניות... תודה עצומה!!!

[cannon]

@יום-חדש-מתחיל הפתרון של @עדלאידע מוצלח יותר פשוט תחכה שהוא ישדרג את הקוד שלו
(אלא א"כ יש לך העדפה לתוסף)

[עדלאידע]

@יום-חדש-מתחיל @י.-פל.

// ==UserScript==
// @name         כיווץ הסרגל כלים והסל קניות של משנת יוסף
// @namespace    http://tampermonkey.net/
// @version      v2
// @author       ShlomoH
// @description  הוספת כפתור כיווץ לסרגל כלים וסל הקניות באתר משנת יוסף
// @match        https://mishnatyosef.org/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
  section, .flex.flex-row.gap-\\[36px\\] {
     transition: width .3s ease-in-out, gap .3s ease-in-out, flex-basis .3s ease-in-out !important;
  }
  #cart.cart-collapsed {
    width: 100px !important;
  }

  #cart.cart-collapsed #cart-title,
  #cart.cart-collapsed div.bg-gray_semantic,
  #cart.cart-collapsed .item p:not(.font-bold.text-primary-900),
  #cart.cart-collapsed .item input,
  #cart.cart-collapsed > button,


  #cart.cart-collapsed .item button[data-v-f81940d1] {
    display: none !important;
  }

  #cart.cart-collapsed .item > div[data-v-986e9b24] {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0px 0 5px !important;
    position: relative;
  }
  #cart.cart-collapsed .item img {
    width: 80px !important;
    height: 80px !important;
    margin: 0 !important;
  }
  #cart.cart-collapsed .item p.font-bold.text-primary-900 {
    display: block !important;
    font-size: 12px;
    text-align: center;
    margin-top: 4px;
  }

  #cart.cart-collapsed .item button.absolute {
    display: flex !important;
    position: absolute !important;
    top: auto !important;
    left: 50% !important;
    bottom: -45px;
    transform: translateX(-50%) scale(0.9);
  }

  #cart.cart-collapsed .custom-scroll-bar {
    padding-bottom: 100px;
  }
  #cart.cart-collapsed .text-grays-900,
  #cart.cart-collapsed .text-primary-700 {
    font-size: 12px !important;
    display: block !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
`);
    const observer = new MutationObserver(() => {
        const el = document.querySelector(
            '#cart.cart-collapsed .hidden.xl\\:flex.flex-none.flex-row.items-center.justify-start.py-\\[16px\\].border-t.border-grays-400.px-\\[14px\\]'
        );
        if (el) {
            observer.disconnect();

            Object.assign(el.style, {
                position: 'absolute',
                bottom: '50px',
                left: '0',
                width: '100%',
                background: 'white',
                zIndex: '9999',
                borderTop: '1px solid #ccc',
                padding: '0px 0px',
                boxSizing: 'border-box'
            });
            const cartContainer = document.querySelector('#cart.cart-collapsed .relative.w-full.h-screen.flex.flex-col.justify-between.bg-white');
            if (cartContainer) {
                Object.assign(cartContainer.style, {
                    background: 'white',
                    paddingBottom: '100px'
                });
            }

            const totalSpan = el.querySelector('.text-primary-700');
            if (totalSpan) {
                totalSpan.innerHTML = totalSpan.innerHTML.replace('סך הכל', 'סה״כ');
            }

        }
    });

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

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

    const selectors = {
        sidebar: 'div.sidebar',
        container: 'div.md\\:flex.md\\:w-\\[196px\\]',
        main: '.md\\:pr-\\[196px\\]',
        topbar: 'div.fixed.z-30.bg-primary-900',
        cart: '#cart'
    };

    const classes = {
        expanded: 'md:w-[196px]',
        collapsed: 'md:w-20'
    };

    const widths = {
        expanded: '196px',
        collapsed: '69px'
    };

    const storageKey = 'sidebarIsCollapsed';

    const waitFor = (selector, callback) => {
        const interval = setInterval(() => {
            const el = document.querySelector(selector);
            if (el) {
                clearInterval(interval);
                callback(el);
            }
        }, 200);
    };


    function toggleRightSidebar(collapsed, elements) {
        const {
            main,
            container,
            topbar,
            nav,
            logo,
            logoContainer,
            badges,
            headers,
            navItems,
            collapseBtn
        } = elements;

        main.style.paddingRight = collapsed ? widths.collapsed : widths.expanded;
        container.classList.toggle(classes.expanded, !collapsed);
        container.classList.toggle(classes.collapsed, collapsed);
        topbar.style.right = `calc(${collapsed ? widths.collapsed : widths.expanded} - 1px)`;
        topbar.classList.remove('xl:w-[calc(100%-196px)]');
        nav?.querySelector('[style*="flex-grow: 1"]')?.style.setProperty('display', collapsed ? 'block' : 'none');
        if (logo) logo.style.width = collapsed ? '50px' : '';
        if (logoContainer) Object.assign(logoContainer.style, {
            marginTop: collapsed ? '8px' : '',
            marginBottom: collapsed ? '20px' : ''
        });
        badges.forEach(b => b.style.display = collapsed ? 'none' : '');
        headers.forEach(h => h.style.justifyContent = collapsed ? 'center' : '');
        navItems.forEach(el => {
            el.querySelector('.sidebar-text')?.style.setProperty('display', collapsed ? 'none' : 'inline');
            const icon = el.querySelector('.material-symbols-rounded');
            if (icon) icon.classList.toggle('ml-2', !collapsed);
            el.style.justifyContent = collapsed ? 'center' : '';
        });
        const icon = collapseBtn.querySelector('.material-symbols-rounded');
        const text = collapseBtn.querySelector('.sidebar-text');
        icon.textContent = collapsed ? 'chevron_left' : 'chevron_right';
        text.style.display = collapsed ? 'none' : 'inline';
        collapseBtn.style.justifyContent = collapsed ? 'center' : '';
    }

    function toggleLeftCart(collapsed, mainElement) {
        const cart = document.querySelector(selectors.cart);
        const cartContainer = cart ? cart.closest('section') : null;

        if (cart && cartContainer && mainElement) {
            cart.classList.toggle('cart-collapsed', collapsed);
            cartContainer.style.flex = collapsed ? '0 0 40px' : '0 0 300px';
        }
    }

    waitFor(selectors.sidebar, sidebar => {
        const container = document.querySelector(selectors.container);
        const main = document.querySelector(selectors.main);
        const topbar = document.querySelector(selectors.topbar);

        if (!container || !main || !topbar) return;

        container.style.transition = 'width .3s ease-in-out';
        main.style.transition = 'padding-right .3s ease-in-out, padding-left .3s ease-in-out';

        const logo = container.querySelector('img.logo');
        const logoContainer = logo?.closest('div.items-center');
        const badges = container.querySelectorAll('.bg-secondary-200');
        const headers = [...container.querySelectorAll('.text-slate-400')];
        const bottomSection = container.querySelector('.mb-\\[30px\\]');
        const nav = sidebar.querySelector('nav');
        if (nav) Object.assign(nav.style, {
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between'
        });
        const navItems = [...container.querySelectorAll('nav a, .pointer-events-none, button.h-10')];
        navItems.forEach(el => {
            if (!el.querySelector('.sidebar-text')) {
                const text = el.innerText.trim();
                const icon = el.querySelector('.material-symbols-rounded');
                el.innerHTML = icon ? icon.outerHTML + `<span class="sidebar-text">${text.replace(icon.innerText, '').trim()}</span>` : `<span class="sidebar-text">${text}</span>`;
            }
        });

        const collapseBtn = document.createElement('a');
        collapseBtn.style.cursor = 'pointer';
        collapseBtn.className = 'group flex items-center px-2 py-2 text-base font-medium rounded-[4px] text-primary-200 hover:text-primary-500 hover:bg-purple_semantic h-10';
        collapseBtn.innerHTML = `<span class="material-symbols-rounded">chevron_right</span><span class="sidebar-text"> כווץ סרגל</span>`;

        const rightSidebarElements = {
            main,
            container,
            topbar,
            nav,
            logo,
            logoContainer,
            badges,
            headers,
            navItems,
            collapseBtn
        };

        collapseBtn.onclick = e => {
            e.preventDefault();
            const isCollapsed = container.classList.contains(classes.collapsed);
            const shouldBeCollapsed = !isCollapsed;
            localStorage.setItem(storageKey, shouldBeCollapsed);
            toggleRightSidebar(shouldBeCollapsed, rightSidebarElements);
            toggleLeftCart(shouldBeCollapsed, main);
        };

        const wrap = document.createElement('div');
        wrap.className = 'flex flex-col px-2';
        wrap.append(collapseBtn);
        bottomSection?.before(wrap);

        toggleRightSidebar(localStorage.getItem(storageKey) === 'true', rightSidebarElements);
    });

    waitFor(selectors.cart, () => {
        const main = document.querySelector(selectors.main);
        toggleLeftCart(localStorage.getItem(storageKey) === 'true', main);
    });

})();

[יום חדש מתחיל]

@עדלאידע

ייש"כ גדול, זה נראה ממש מדהים!!

א. תוסיף את זה לתחילת הקוד [סתם ליופי]:

// @icon         https://www.google.com/s2/favicons?sz=64&domain=mishnatyosef.org

ב. יש בעורך של tampermonkey אזהרות של eslint על הקוד. תיקנתי את זה, מצורף הקוד המתוקן בספוילר.

Spoiler

// ==UserScript==
// @name         כיווץ הסרגל כלים והסל קניות של משנת יוסף
// @namespace    http://tampermonkey.net/
// @version      v2
// @author       ShlomoH
// @description  הוספת כפתור כיווץ לסרגל כלים וסל הקניות באתר משנת יוסף
// @match        https://mishnatyosef.org/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=mishnatyosef.org
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
  section, .flex.flex-row.gap-\\[36px\\] {
     transition: width .3s ease-in-out, gap .3s ease-in-out, flex-basis .3s ease-in-out !important;
  }
  #cart.cart-collapsed {
    width: 100px !important;
  }

  #cart.cart-collapsed #cart-title,
  #cart.cart-collapsed div.bg-gray_semantic,
  #cart.cart-collapsed .item p:not(.font-bold.text-primary-900),
  #cart.cart-collapsed .item input,
  #cart.cart-collapsed > button,


  #cart.cart-collapsed .item button[data-v-f81940d1] {
    display: none !important;
  }

  #cart.cart-collapsed .item > div[data-v-986e9b24] {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0px 0 5px !important;
    position: relative;
  }
  #cart.cart-collapsed .item img {
    width: 80px !important;
    height: 80px !important;
    margin: 0 !important;
  }
  #cart.cart-collapsed .item p.font-bold.text-primary-900 {
    display: block !important;
    font-size: 12px;
    text-align: center;
    margin-top: 4px;
  }

  #cart.cart-collapsed .item button.absolute {
    display: flex !important;
    position: absolute !important;
    top: auto !important;
    left: 50% !important;
    bottom: -45px;
    transform: translateX(-50%) scale(0.9);
  }

  #cart.cart-collapsed .custom-scroll-bar {
    padding-bottom: 100px;
  }
  #cart.cart-collapsed .text-grays-900,
  #cart.cart-collapsed .text-primary-700 {
    font-size: 12px !important;
    display: block !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
`);
    const observer = new MutationObserver(() => {
        const el = document.querySelector(
            '#cart.cart-collapsed .hidden.xl\\:flex.flex-none.flex-row.items-center.justify-start.py-\\[16px\\].border-t.border-grays-400.px-\\[14px\\]'
        );
        if (el) {
            observer.disconnect();

            Object.assign(el.style, {
                position: 'absolute',
                bottom: '50px',
                left: '0',
                width: '100%',
                background: 'white',
                zIndex: '9999',
                borderTop: '1px solid #ccc',
                padding: '0px 0px',
                boxSizing: 'border-box'
            });
            const cartContainer = document.querySelector('#cart.cart-collapsed .relative.w-full.h-screen.flex.flex-col.justify-between.bg-white');
            if (cartContainer) {
                Object.assign(cartContainer.style, {
                    background: 'white',
                    paddingBottom: '100px'
                });
            }

            const totalSpan = el.querySelector('.text-primary-700');
            if (totalSpan) {
                totalSpan.innerHTML = totalSpan.innerHTML.replace('סך הכל', 'סה״כ');
            }

        }
    });

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

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

    const selectors = {
        sidebar: 'div.sidebar',
        container: 'div.md\\:flex.md\\:w-\\[196px\\]',
        main: '.md\\:pr-\\[196px\\]',
        topbar: 'div.fixed.z-30.bg-primary-900',
        cart: '#cart'
    };

    const classes = {
        expanded: 'md:w-[196px]',
        collapsed: 'md:w-20'
    };

    const widths = {
        expanded: '196px',
        collapsed: '69px'
    };

    const storageKey = 'sidebarIsCollapsed';

    const waitFor = (selector, callback) => {
        const interval = setInterval(() => {
            const el = document.querySelector(selector);
            if (el) {
                clearInterval(interval);
                callback(el);
            }
        }, 200);
    };


    function toggleRightSidebar(collapsed, elements) {
        const {
            main,
            container,
            topbar,
            nav,
            logo,
            logoContainer,
            badges,
            headers,
            navItems,
            collapseBtn
        } = elements;

        main.style.paddingRight = collapsed ? widths.collapsed : widths.expanded;
        container.classList.toggle(classes.expanded, !collapsed);
        container.classList.toggle(classes.collapsed, collapsed);
        topbar.style.right = `calc(${collapsed ? widths.collapsed : widths.expanded} - 1px)`;
        topbar.classList.remove('xl:w-[calc(100%-196px)]');
        nav?.querySelector('[style*="flex-grow: 1"]')?.style.setProperty('display', collapsed ? 'block' : 'none');
        if (logo) {
            logo.style.width = collapsed ? '50px' : '';
        }
        if (logoContainer) {
            Object.assign(logoContainer.style, {
                marginTop: collapsed ? '8px' : '',
                marginBottom: collapsed ? '20px' : ''
            });
        }
        badges.forEach(b => {
            b.style.display = collapsed ? 'none' : '';
        });
        headers.forEach(h => {
            h.style.justifyContent = collapsed ? 'center' : '';
        });
        navItems.forEach(el => {
            el.querySelector('.sidebar-text')?.style.setProperty('display', collapsed ? 'none' : 'inline');
            const icon = el.querySelector('.material-symbols-rounded');
            if (icon) {
                icon.classList.toggle('ml-2', !collapsed);
            }
            el.style.justifyContent = collapsed ? 'center' : '';
        });
        const icon = collapseBtn.querySelector('.material-symbols-rounded');
        const text = collapseBtn.querySelector('.sidebar-text');
        icon.textContent = collapsed ? 'chevron_left' : 'chevron_right';
        text.style.display = collapsed ? 'none' : 'inline';
        collapseBtn.style.justifyContent = collapsed ? 'center' : '';
    }

    function toggleLeftCart(collapsed, mainElement) {
        const cart = document.querySelector(selectors.cart);
        const cartContainer = cart ? cart.closest('section') : null;

        if (cart && cartContainer && mainElement) {
            cart.classList.toggle('cart-collapsed', collapsed);
            cartContainer.style.flex = collapsed ? '0 0 40px' : '0 0 300px';
        }
    }

    waitFor(selectors.sidebar, sidebar => {
        const container = document.querySelector(selectors.container);
        const main = document.querySelector(selectors.main);
        const topbar = document.querySelector(selectors.topbar);

        if (!container || !main || !topbar) return;

        container.style.transition = 'width .3s ease-in-out';
        main.style.transition = 'padding-right .3s ease-in-out, padding-left .3s ease-in-out';

        const logo = container.querySelector('img.logo');
        const logoContainer = logo?.closest('div.items-center');
        const badges = container.querySelectorAll('.bg-secondary-200');
        const headers = [...container.querySelectorAll('.text-slate-400')];
        const bottomSection = container.querySelector('.mb-\\[30px\\]');
        const nav = sidebar.querySelector('nav');
        if (nav) {
            Object.assign(nav.style, {
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-between'
            });
        }
        const navItems = [...container.querySelectorAll('nav a, .pointer-events-none, button.h-10')];
        navItems.forEach(el => {
            if (!el.querySelector('.sidebar-text')) {
                const text = el.innerText.trim();
                const icon = el.querySelector('.material-symbols-rounded');
                el.innerHTML = icon ? icon.outerHTML + `<span class="sidebar-text">${text.replace(icon.innerText, '').trim()}</span>` : `<span class="sidebar-text">${text}</span>`;
            }
        });

        const collapseBtn = document.createElement('a');
        collapseBtn.style.cursor = 'pointer';
        collapseBtn.className = 'group flex items-center px-2 py-2 text-base font-medium rounded-[4px] text-primary-200 hover:text-primary-500 hover:bg-purple_semantic h-10';
        collapseBtn.innerHTML = `<span class="material-symbols-rounded">chevron_right</span><span class="sidebar-text"> כווץ סרגל</span>`;

        const rightSidebarElements = {
            main,
            container,
            topbar,
            nav,
            logo,
            logoContainer,
            badges,
            headers,
            navItems,
            collapseBtn
        };

        collapseBtn.onclick = e => {
            e.preventDefault();
            const isCollapsed = container.classList.contains(classes.collapsed);
            const shouldBeCollapsed = !isCollapsed;
            localStorage.setItem(storageKey, shouldBeCollapsed);
            toggleRightSidebar(shouldBeCollapsed, rightSidebarElements);
            toggleLeftCart(shouldBeCollapsed, main);
        };

        const wrap = document.createElement('div');
        wrap.className = 'flex flex-col px-2';
        wrap.append(collapseBtn);
        bottomSection?.before(wrap);

        toggleRightSidebar(localStorage.getItem(storageKey) === 'true', rightSidebarElements);
    });

    waitFor(selectors.cart, () => {
        const main = document.querySelector(selectors.main);
        toggleLeftCart(localStorage.getItem(storageKey) === 'true', main);
    });

})();

ג. מה זה החיצים הכחולים הקטנים, וכן הפסים לרוחב הכחולים הקטנים שיש בצד [סתם, לא באמת חשוב...]

Spoiler

[עדלאידע]

@יום-חדש-מתחיל כתב בבקשה | רעיון לביצוע - קוד לתיקון משמעותי לאתר משנת יוסף החדש:

ג. מה זה החיצים הכחולים הקטנים, וכן הפסים לרוחב הכחולים הקטנים שיש בצד [סתם לא באמת חשוב...]

זה חלק של הטולטיפ שמוצג כשמרפים על מוצר, אני עובד על זה.

[אוריי]

לא הצלחתי להבין איפה אני שם את הקוד הזה?
בטמפרמונקי מה זה?? או יותר נכון איפה זה??

@עדלאידע אתה מתכוננן להוציא סידור לחיצים לי זה מאד יעזור.. יש לי מחשב עם מסך 12 אינצ'.

[עדלאידע]

@אוריי כתב בבקשה | רעיון לביצוע - קוד לתיקון משמעותי לאתר משנת יוסף החדש:

לא הצלחתי להבין איפה אני שם את הקוד הזה?
בטמפרמונקי מה זה?? או יותר נכון איפה זה??

https://mitmachim.top/post/898325

[עדלאידע]

@יום-חדש-מתחיל כתב בבקשה | רעיון לביצוע - קוד לתיקון משמעותי לאתר משנת יוסף החדש:

מה זה החיצים הכחולים הקטנים, וכן הפסים לרוחב הכחולים הקטנים שיש בצד [סתם, לא באמת חשוב...]

תוקן:

// ==UserScript==
// @name         כיווץ הסרגל כלים והסל קניות של משנת יוסף
// @namespace    http://tampermonkey.net/
// @version      v2
// @author       ShlomoH
// @description  הוספת כפתור כיווץ לסרגל כלים וסל הקניות באתר משנת יוסף
// @match        https://mishnatyosef.org/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=mishnatyosef.org
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
        section, .flex.flex-row.gap-\\[36px\\] {
            transition: width .3s ease-in-out, gap .3s ease-in-out, flex-basis .3s ease-in-out !important;
        }

        #cart.cart-collapsed {
            width: 100px !important;
        }

        #cart.cart-collapsed #cart-title,
        #cart.cart-collapsed div.bg-gray_semantic,
        #cart.cart-collapsed .item p:not(.font-bold.text-primary-900),
        #cart.cart-collapsed .item input,
        #cart.cart-collapsed > button,


        #cart.cart-collapsed .item button[data-v-f81940d1] {
            display: none !important;
        }

        #cart.cart-collapsed .item > div[data-v-986e9b24] {
            flex-direction: column;
            align-items: center;
            gap: 2px;
            padding: 0px 0 5px !important;
            position: relative;
        }

        #cart.cart-collapsed .item img {
            width: 80px !important;
            height: 80px !important;
            margin: 0 !important;
        }

        #cart.cart-collapsed .item p.font-bold.text-primary-900 {
            display: block !important;
            font-size: 12px;
            text-align: center;
            margin-top: 4px;
        }

        #cart.cart-collapsed .item button.absolute {
            display: flex !important;
            position: absolute !important;
            top: auto !important;
            left: 50% !important;
            bottom: -45px;
            transform: translateX(-50%) scale(0.9);
        }

        #cart.cart-collapsed .custom-scroll-bar {
            padding-bottom: 100px;
        }

        #cart.cart-collapsed .tooltip {
            display: none !important;
        }

        #cart.cart-collapsed .text-grays-900,
        #cart.cart-collapsed .text-primary-700 {
            font-size: 12px !important;
            display: block !important;
            text-align: center !important;
            white-space: nowrap !important;
            overflow: hidden !important;
        }


        .min-h-\\[400px\\] {
            min-height: 100px !important;
        }

        .h-\\[100px\\] {
            height: 50px !important;
        }

        .min-h-\\[400px\\] .text-lg {
            font-size: 16px !important;
            line-height: 1.2 !important;
        }

        .min-h-\\[400px\\] .text-base {
            font-size: 14px !important;
        }

        .min-h-\\[400px\\] button.py-1\\.5.px-4 {
            padding: 4px 10px !important;
            font-size: 14px !important;
        }

        .min-h-\\[400px\\] .h-\\[40px\\] {
            height: 34px !important;
        }

        .min-h-\\[400px\\] input.w-\\[73px\\] {
            width: 45px !important;
        }

        .min-h-\\[400px\\] .my-\\[4px\\] {
            margin-top: 2px !important;
            margin-bottom: 2px !important;
        }

        .min-h-\\[400px\\] .my-\\[8px\\] {
            margin-top: 6px !important;
            margin-bottom: 6px !important;
        }

        `);

    const observer = new MutationObserver(() => {
        const el = document.querySelector(
            '#cart.cart-collapsed .hidden.xl\\:flex.flex-none.flex-row.items-center.justify-start.py-\\[16px\\].border-t.border-grays-400.px-\\[14px\\]'
        );
        if (el) {
            observer.disconnect();

            Object.assign(el.style, {
                position: 'absolute',
                bottom: '50px',
                left: '0',
                width: '100%',
                background: 'white',
                zIndex: '9999',
                borderTop: '1px solid #ccc',
                padding: '0px 0px',
                boxSizing: 'border-box'
            });
            const cartContainer = document.querySelector('#cart.cart-collapsed .relative.w-full.h-screen.flex.flex-col.justify-between.bg-white');
            if (cartContainer) {
                Object.assign(cartContainer.style, {
                    background: 'white',
                    paddingBottom: '100px'
                });
            }

            const totalSpan = el.querySelector('.text-primary-700');
            if (totalSpan) {
                totalSpan.innerHTML = totalSpan.innerHTML.replace('סך הכל', 'סה״כ');
            }

        }
    });

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

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

    const selectors = {
        sidebar: 'div.sidebar',
        container: 'div.md\\:flex.md\\:w-\\[196px\\]',
        main: '.md\\:pr-\\[196px\\]',
        topbar: 'div.fixed.z-30.bg-primary-900',
        cart: '#cart'
    };

    const classes = {
        expanded: 'md:w-[196px]',
        collapsed: 'md:w-20'
    };

    const widths = {
        expanded: '196px',
        collapsed: '69px'
    };

    const storageKey = 'sidebarIsCollapsed';

    const waitFor = (selector, callback) => {
        const interval = setInterval(() => {
            const el = document.querySelector(selector);
            if (el) {
                clearInterval(interval);
                callback(el);
            }
        }, 200);
    };


    function toggleRightSidebar(collapsed, elements) {
        const {
            main,
            container,
            topbar,
            nav,
            logo,
            logoContainer,
            badges,
            headers,
            navItems,
            collapseBtn
        } = elements;

        main.style.paddingRight = collapsed ? widths.collapsed : widths.expanded;
        container.classList.toggle(classes.expanded, !collapsed);
        container.classList.toggle(classes.collapsed, collapsed);
        topbar.style.right = `calc(${collapsed ? widths.collapsed : widths.expanded} - 1px)`;
        topbar.classList.remove('xl:w-[calc(100%-196px)]');
        nav?.querySelector('[style*="flex-grow: 1"]')?.style.setProperty('display', collapsed ? 'block' : 'none');
        if (logo) {
            logo.style.width = collapsed ? '50px' : '';
        }
        if (logoContainer) {
            Object.assign(logoContainer.style, {
                marginTop: collapsed ? '8px' : '',
                marginBottom: collapsed ? '20px' : ''
            });
        }
        badges.forEach(b => {
            b.style.display = collapsed ? 'none' : '';
        });
        headers.forEach(h => {
            h.style.justifyContent = collapsed ? 'center' : '';
        });
        navItems.forEach(el => {
            el.querySelector('.sidebar-text')?.style.setProperty('display', collapsed ? 'none' : 'inline');
            const icon = el.querySelector('.material-symbols-rounded');
            if (icon) {
                icon.classList.toggle('ml-2', !collapsed);
            }
            el.style.justifyContent = collapsed ? 'center' : '';
        });
        const icon = collapseBtn.querySelector('.material-symbols-rounded');
        const text = collapseBtn.querySelector('.sidebar-text');
        icon.textContent = collapsed ? 'chevron_left' : 'chevron_right';
        text.style.display = collapsed ? 'none' : 'inline';
        collapseBtn.style.justifyContent = collapsed ? 'center' : '';
    }

    function toggleLeftCart(collapsed, mainElement) {
        const cart = document.querySelector(selectors.cart);
        const cartContainer = cart ? cart.closest('section') : null;

        if (cart && cartContainer && mainElement) {
            cart.classList.toggle('cart-collapsed', collapsed);
            cartContainer.style.flex = collapsed ? '0 0 40px' : '0 0 300px';
        }
    }

    waitFor(selectors.sidebar, sidebar => {
        const container = document.querySelector(selectors.container);
        const main = document.querySelector(selectors.main);
        const topbar = document.querySelector(selectors.topbar);

        if (!container || !main || !topbar) return;

        container.style.transition = 'width .3s ease-in-out';
        main.style.transition = 'padding-right .3s ease-in-out, padding-left .3s ease-in-out';

        const logo = container.querySelector('img.logo');
        const logoContainer = logo?.closest('div.items-center');
        const badges = container.querySelectorAll('.bg-secondary-200');
        const headers = [...container.querySelectorAll('.text-slate-400')];
        const bottomSection = container.querySelector('.mb-\\[30px\\]');
        const nav = sidebar.querySelector('nav');
        if (nav) {
            Object.assign(nav.style, {
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-between'
            });
        }
        const navItems = [...container.querySelectorAll('nav a, .pointer-events-none, button.h-10')];
        navItems.forEach(el => {
            if (!el.querySelector('.sidebar-text')) {
                const text = el.innerText.trim();
                const icon = el.querySelector('.material-symbols-rounded');
                el.innerHTML = icon ? icon.outerHTML + `<span class="sidebar-text">${text.replace(icon.innerText, '').trim()}</span>` : `<span class="sidebar-text">${text}</span>`;
            }
        });

        const collapseBtn = document.createElement('a');
        collapseBtn.style.cursor = 'pointer';
        collapseBtn.className = 'group flex items-center px-2 py-2 text-base font-medium rounded-[4px] text-primary-200 hover:text-primary-500 hover:bg-purple_semantic h-10';
        collapseBtn.innerHTML = `<span class="material-symbols-rounded">chevron_right</span><span class="sidebar-text"> כווץ סרגל</span>`;

        const rightSidebarElements = {
            main,
            container,
            topbar,
            nav,
            logo,
            logoContainer,
            badges,
            headers,
            navItems,
            collapseBtn
        };

        collapseBtn.onclick = e => {
            e.preventDefault();
            const isCollapsed = container.classList.contains(classes.collapsed);
            const shouldBeCollapsed = !isCollapsed;
            localStorage.setItem(storageKey, shouldBeCollapsed);
            toggleRightSidebar(shouldBeCollapsed, rightSidebarElements);
            toggleLeftCart(shouldBeCollapsed, main);
        };

        const wrap = document.createElement('div');
        wrap.className = 'flex flex-col px-2';
        wrap.append(collapseBtn);
        bottomSection?.before(wrap);

        toggleRightSidebar(localStorage.getItem(storageKey) === 'true', rightSidebarElements);
    });

    waitFor(selectors.cart, () => {
        const main = document.querySelector(selectors.main);
        toggleLeftCart(localStorage.getItem(storageKey) === 'true', main);
    });

})();

[יום חדש מתחיל]

אני רוצה להעלות את זה בתור תוסף לחנות גוגל, אשמח אם מישהו יוכל להכין לי אייקון מתאים.

Spoiler

@עדלאידע אם אתה רוצה להעלות את זה, תכתוב לי

[בנימין מחשבים]

@יום-חדש-מתחיל אולי אפשר לשלב את זה יחד עם התוסף הזה

Spoiler

ואז לא תצטרך לחפש אייקון...

[יאיר דניאל]

למה זה לא עובד לי?

[עדלאידע]

@יאיר-דניאל ריעננת?
אם זה לא עוזר אז תיכנס לכאן:

chrome://extensions/?id=dhdgffkkebhmkfjojejmpbldmpobfkfo

ותפעיל את 'אישור לסקריפטים של משתמשים'

[יאיר דניאל]

@עדלאידע לא עזר גם לאשר

[מאקרו]

זה יכול לעבוד גם אם התקנתי את האתר של משנת יוסף כאפליקציה?
כשאני נכנס דרך הדפדפן זה עובד אבל דרך האפליקציה לא.
תודה.

[בנימין מחשבים]

@יום-חדש-מתחיל כתב בבקשה | רעיון לביצוע - קוד לתיקון משמעותי לאתר משנת יוסף החדש:

אני רוצה להעלות את זה בתור תוסף לחנות גוגל

נשמח לעדכונים מה מתקדם

[יום חדש מתחיל]

@בנימין-מחשבים כתב בבקשה | רעיון לביצוע - קוד לתיקון משמעותי לאתר משנת יוסף החדש:

נשמח לעדכונים מה מתקדם

כלום. כי לא הבאת אייקון...

[א סאדיגערער]

@יום-חדש-מתחיל כתב בבקשה | רעיון לביצוע - קוד לתיקון משמעותי לאתר משנת יוסף החדש:

@בנימין-מחשבים כתב בבקשה | רעיון לביצוע - קוד לתיקון משמעותי לאתר משנת יוסף החדש:

נשמח לעדכונים מה מתקדם

כלום. כי לא הבאת אייקון...

הוא אמר שאפשר לצרף לתוסף קיים.
פותח פה ע"י א' המשתמשים.
אולי תשת"פו?

[ע"ה דכו"ע]

@א-סאדיגערער כתב בבקשה | רעיון לביצוע - קוד לתיקון משמעותי לאתר משנת יוסף החדש:

א' המשתמשים.

@יום_שמח

[יום_שמח]

@ע-ה-דכו-ע כתב בבקשה | רעיון לביצוע - קוד לתיקון משמעותי לאתר משנת יוסף החדש:

@א-סאדיגערער כתב בבקשה | רעיון לביצוע - קוד לתיקון משמעותי לאתר משנת יוסף החדש:

א' המשתמשים.

@יום_שמח

מישהו חיפש אותי?