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

[רפי סאם]

@יום-חדש-מתחיל תעשה קונטרול יו ותעתיק לי הכל - לקובץ טקסט ותשלח לי - אני אנסה

[cannon]

@יום-חדש-מתחיל הכנתי לך שניה אני מעלה

[cannon]

@יום-חדש-מתחיל כרגע זה עובד רק על הסרגל שיש עכשיו ברגע שיהיה את הסרגל השני תעדכן
תוסף משנת יוסף.zip

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

@cannon חבר'ה, אם אתם כבר כאן אולי מישהו יכול לפתוח להם אתר חדש ודי...
האתר הזה עבר הרבה שינויים ושכלולים בשביל להפוך אותו לאתר-הכי-לא-נח-ברשת...

[עדלאידע]

@יום-חדש-מתחיל לשים בטמפרמונקי, נשאר במצב שבחרת גם אחרי רענון.

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

(function() {
'use strict';

GM_addStyle(`
  .sidebar nav > a,
  .sidebar nav > div,
  .sidebar div.px-2 > a.h-10 {
    margin-bottom: 4px !important;
  }
  .sidebar nav > .text-slate-400 {
    margin: 32px 0 8px !important;
  }
`);

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

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);
};

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 setTimeout(() => waitFor(selectors.sidebar, sidebar), 1000);

  [container, main].forEach(el => el.style.transition = 'width .3s, padding-right .3s');

  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>`;
  collapseBtn.onclick = e => {
    e.preventDefault();
    const isCollapsed = container.classList.contains(classes.collapsed);
    toggleSidebar(!isCollapsed);
    localStorage.setItem(storageKey, !isCollapsed);
  };

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

  function toggleSidebar(collapsed) {
    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' : '';
  }

  toggleSidebar(localStorage.getItem(storageKey) === 'true');
});
})();

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

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

האתר של משנת יוסף

Spoiler

@cannon במה שאתה עשית, אחרי סגירת הסרגל הימני, נוצר סוג של פס אפור בתחתית המסך, ראה בצילום המצורף.

[a.y.f.]

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

[י. פל.]

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

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

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

[י. פל.]

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

[cannon]

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