Стилизация JoyReactor по своему вкусу (больше текс и темная тема)
Мне часто с телефона неудобно читать лонгриды. А режим читалки в моем браузере обычно считает комментарии постом 0_о. В общем мучался некоторое время, а потом вспомнил про букмарклеты – отличная альтернатива для телефонов расширениям на десктопе. А теперь вот решил, мало ли, вдруг кому-то тоже что-то сильно хочется поменять на джое (или любом другом сайте), а возможности никак не видится.
Вообще букмарклет – это такой небольшой обман, это добавленная в закладки ссылка, которая на самом деле является командой браузеру выполнить код на открытой странице. Сами ссылки-команды используют сайты довольно часто (например, в стиме кнопка "купить" – как раз такая псевдо-ссылка), хотя сейчас все реже. А букмарклеты когда-то давно были альтернативой расширениям. Вы и сейчас можете найти огромные библиотеки полезных и не очень букмарклетов (что-то вроде музеев интернета 00-х =)).
И так, первый мой букмарклет был таким:
javascript:void(document.head.insertAdjacentHTML('beforeend', '<style>.post_content p { font-size: 35px; line-height: normal;} .post_content h3 { font-size: 45px; line-height: normal;}</style>'))
Нажмите по этой ссылке и увидите, что он делает. А может и не увидите, если здесь ссылки работают через редирект, как пост появится – узнаем. В таком случае нужно скопировать его текст и создать закладку с этой ссылкой. А затем, находясь на странице джоя, в адресной строке начать набирать название созданной закладки и нажать по ней в предложке. Размер текста должен измениться. Но только на этой странице и до ее перезагрузки.
Он очень простой, просто изменяет немного стили увеличивая абзацы и заголовки постов.
Но, как я уже писал выше, его недостаток в том, что он "нестабилен". Хотелось бы, чтобы изменения сохранялись даже после перехода на следующую страницу. Это уже посложнее, но если особо не заботиться о работе ВСЕХ функций. Тоже довольно небольшой код.
А еще, думаю многим может хотеться добавить темную тему, это не сложно с букмарклетами. Весь фокус в создании достаточно умного фильтра "переворачивающего" цвета. Вообще, этот фильтр достаточно интересен и часто удобен, хотя о нем почему-то многие веберы не знают (работает изначально переводя rgb в hsb). Единственная проблема, фильтры – довольно ресурсоемкие и не все телефоны нормально переваривают обилие фильтров. Так что осторожнее, скролл страницы может стать менее плавным или еще чего-то.
javascript:void((() => {
let svg = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="position: absolute;top: 0;z-index: -100;"><defs><filter id="invertColors" x="0%" y="0%" width="100%" height="100%" style="color-interpolation-filters: sRGB"><feColorMatrix result="red" in="SourceGraphic" type="matrix" values=" 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1"/> <feColorMatrix result="green" in="SourceGraphic" type="matrix" values=" 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1"/> <feColorMatrix result="blue" in="SourceGraphic" type="matrix" values=" 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 1"/> <feBlend result="minredgreen" in="red" in2="green" mode="darken"/> <feBlend result="min" in="minredgreen" in2="blue" mode="darken"/> <feBlend result="maxredgreen" in="red" in2="green" mode="lighten"/> <feBlend result="max" in="maxredgreen" in2="blue" mode="lighten"/> <feComponentTransfer result="oneminusmin" in="min"> <feFuncR type="linear" intercept="1" slope="-1"/> <feFuncG type="linear" intercept="1" slope="-1"/> <feFuncB type="linear" intercept="1" slope="-1"/> </feComponentTransfer> <feComposite result="aminusmin" operator="arithmetic" in="SourceGraphic" in2="oneminusmin" k1="0" k2="1" k3="1" k4="-1"/> <feComposite result="colorresult" operator="arithmetic" in="aminusmin" in2="max" k1="0" k2="1" k3="-1" k4="1"/> <feComposite operator="in" in="colorresult" in2="SourceAlpha"/> </filter> </defs> </svg>`; let style = "<style>.post_content p { font-size: 35px; line-height: normal;} .post_content h3 { font-size: 45px; line-height: normal;} body, img, video, iframe {filter: url(#invertColors);} </style>";
document.head.insertAdjacentHTML('beforeend', style); document.body.insertAdjacentHTML('beforeend', svg);
async function loadPage(href, isNotToScroll){ if (!href) href = location.href; let url = new URL(href);
try { const response = await fetch(url, { credentials: 'same-origin' }); if (!response.ok) throw new Error('Ответ сети был не ok.');
const text = await response.text(); let body = text.match(/<body>(.*)<\/body>/is)[1]; if (!body) { location.href = href; throw new Error('No HTML to display!'); }
document.body.innerHTML = body + svg; if (!isNotToScroll) window.scroll(0, 0); }
catch (error) { console.error('Ошибка:', error); } }
document.addEventListener('click', (e)=>{ for (let el of e.path) { if (el instanceof HTMLAnchorElement && el.href.startsWith(location.origin)) { if (el.getAttribute("href").startsWith('#')) break; e.preventDefault(); console.log(history); history.pushState({}, el.href, el.href); loadPage(el.href); return; } } });
window.onpopstate = () => {loadPage(null, true)}; })())
Да, вот это все выше это может быть ссылкой, но создать ее в статье я не могу (похоже в редакторе есть ограничение длины ссылки) `; let style = ""; document.head.insertAdjacentHTML('beforeend', style); document.body.insertAdjacentHTML('beforeend', svg); async function loadPage(href, isNotToScroll){ if (!href) href = location.href; let url = new URL(href); try { const response = await fetch(url, { credentials: 'same-origin' }); if (!response.ok) throw new Error('Ответ сети был не ok.'); const text = await response.text(); let body = text.match(/(.*)<\/body>/is)[1]; if (!body) { location.href = href; throw new Error('No HTML to display!'); } document.body.innerHTML = body + svg; if (!isNotToScroll) window.scroll(0, 0); } catch (error) { console.error('Ошибка:', error); } } document.addEventListener('click', (e)=>{ for (let el of e.path) { if (el instanceof HTMLAnchorElement && el.href.startsWith(location.origin)) { if (el.getAttribute("href").startsWith('#')) break; e.preventDefault(); console.log(history); history.pushState({}, el.href, el.href); loadPage(el.href); return; } } }); window.onpopstate = () => {loadPage(null, true)}; })())">ссылкой Но `; let style = ""; document.head.insertAdjacentHTML('beforeend', style); document.body.insertAdjacentHTML('beforeend', svg); async function loadPage(href, isNotToScroll){ if (!href) href = location.href; let url = new URL(href); try { const response = await fetch(url, { credentials: 'same-origin' }); if (!response.ok) throw new Error('Ответ сети был не ok.'); const text = await response.text(); let body = text.match(/(.*)<\/body>/is)[1]; if (!body) { location.href = href; throw new Error('No HTML to display!'); } document.body.innerHTML = body + svg; if (!isNotToScroll) window.scroll(0, 0); } catch (error) { console.error('Ошибка:', error); } } document.addEventListener('click', (e)=>{ for (let el of e.path) { if (el instanceof HTMLAnchorElement && el.href.startsWith(location.origin)) { if (el.getAttribute("href").startsWith('#')) break; e.preventDefault(); console.log(history); history.pushState({}, el.href, el.href); loadPage(el.href); return; } } }); window.onpopstate = () => {loadPage(null, true)}; })())">ссылка. Но в браузере это работает (создать такую закладку).
В общем, надеюсь кому-то это будет полезным =)
`; let style = ""; document.head.insertAdjacentHTML('beforeend', style); document.body.insertAdjacentHTML('beforeend', svg); async function loadPage(href, isNotToScroll){ if (!href) href = location.href; let url = new URL(href); try { const response = await fetch(url, { credentials: 'same-origin' }); if (!response.ok) throw new Error('Ответ сети был не ok.'); const text = await response.text(); let body = text.match(/(.*)<\/body>/is)[1]; if (!body) { location.href = href; throw new Error('No HTML to display!'); } document.body.innerHTML = body + svg; if (!isNotToScroll) window.scroll(0, 0); } catch (error) { console.error('Ошибка:', error); } } document.addEventListener('click', (e)=>{ for (let el of e.path) { if (el instanceof HTMLAnchorElement && el.href.startsWith(location.origin)) { if (el.getAttribute("href").startsWith('#')) break; e.preventDefault(); console.log(history); history.pushState({}, el.href, el.href); loadPage(el.href); return; } } }); window.onpopstate = () => {loadPage(null, true)}; })())">ссылкаывавыавыавыаваы. И она делает темную тему и увеличивает шрифты, даже после перехода на другую страницу внутри ДжойРеактора и даже при возвращении обратно в истории. Здесь с читаемостью правда немного проблемы, но не знаю как лучше оформить лучше(
Подробнее
Ijjijgj^ Cat Cat Вторая мировая война США страны армия story длиннопост Cat Cat vk интернет Иногда реальные люди становятся прототипами для персонажей художественных произведений. А часто - наоборот, вымышленные герои вдохновляют на совершение подвигов. А бывают такие запутанные истории, где уже и не разобрать, кто и как на кого повлиял. Именно такая история и произошла с простым американским пареньком Оди Мёрфи, которого нередко называют прототипом Стива Роджерса, того, который Капитан Америка. Тут есть момент, что комиксы начали выходить ещё до начала войны, так что, может, это юный Оди успел ими вдохновиться перед походом на фронт, но общего у них действительно хватает. Родился, правда, Мёрфи не в Бруклине, а гораздо южнее,
песочница,пост из чистилища,хз какие теги
javascript:void(scrollTo(0, 0));
в старом дизайне гугл-почты отметить все письма (там нет кнопки All, как в новом):
javascript:void(document.querySelectorAll('[type="checkbox"]').forEach(e=>e.checked=true));