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

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

@עדלאידע

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

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

// @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

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

[יאיר דניאל]

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

[מאקרו]

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