// ==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);
});
})();