[WT] [Архив]  [Поиск] Главная Управление
[Совместно с Ычаном]
[Назад]
Ответ в нить
Имя
Animapcha image [@] [?]
Тема   ( ответ в 17371)
Сообщение flower
Файл 
Пароль  (для удаления файлов и сообщений)
Параметры   
  • Прежде чем постить, ознакомьтесь с правилами.
  • Поддерживаются файлы типов 7Z, BZ, BZ2, GIF, GZ, JPG, MO, MP3, OGG, PDF, PNG, PSD, RAR, SVG, SWF, TXT, XCF, ZIP размером до 10000 кБ.
  • Ныне 2547 unique user posts. Посмотреть каталог
  • Максимальное количество бампов нити: 500
Файл: 150682259759.jpg-(84.21KB, 960×720, 1258163340905.jpg)
17371
No. 17371 watch    
Давайте попробуем, что ли.

JS у нас по-прежнему ковырять некому, но хотелось бы доработать местную функцию разворота картинок. Сейчас она просто разворачивает изображение целиком без учёта размера окна браузера. Соответственно, требуется доработать её так, чтобы ширина окна учитывалась.
Скрипт лежит в http://410chan.org/lib/javascript/kusaba.js

Да, я в курсе, что все привыкли к тому, что для разворота надо нажимать на картинку, а не ссылку над ней (как у нас сейчас). Если скрипт научится учитывать ширину окна, это можно будет переделать.
Развернуть все изображения
No. 17373    
Если что, то искомая функция называется function expandimg(I, H, F, C, G, E, A)

>>17371
Одним из самых простых вариантов будет просто добавить аттрибут maxWidth, используя один из существующих элементов для референса. Например, в своём предложении для ычана, я брал текущую ширину первого поста, и работал от неё:


function iithumbresolvemaxwidth() {
  //Это будет первый пост, и на бордах он обычно по полной доступной ширине
  var referenceelement = document.getElementsByTagName('blockquote')[0];
  //Если мы первый пост нашли, то забираем его ширину
  //Ноль возвращается, чтобы можно было определить, удачно мы разрезолвили ширину, или нет.
  var resolvedmaxwidth = referenceelement ? referenceelement.clientWidth : 0;
  return resolvedmaxwidth;
}

Если подобное решение подходит, могу встроить его в наши текущие скрипты.

Хотя, конечно, у нас сейчас движок все параметры большой картинки забивает железно на этапе генерации страницы (именно поэтому у функции такая сигнатура) и поверх этого maxWidth еще делать это кайнда война скриптов.
No. 17374    
>>17371
Впрочем, если мы хотим открывать картинку по нажатию на тумбнейл, то мы вообще можем просто применить к себе скрипт-победитель для ычана, т.к. там они почти полностю автономные, а на нажатие на картинку у нас сейчас ничего не висит.
No. 17375    
Файл: 15068881657.zip-(666.57KB, 410chan_expand_images.zip)
17375
>>17371
Адаптировал вам скрипт с ычана хоть мне и не очень нравится как он сделан, и добавил пример на базе текущего /dev/. Разворот делается по нажатию на картинку, события онклик со ссылок убрал. Скрипт соответствует всем тем же требованиям, что и для ычана, внутри полная и минифицированная версии см. папку extras

Оригинал скрипта для ычана был тут: https://github.com/WagonOfDoubt/iichan-extensions/blob/master/dist/iichan-expand-images.js
No. 17376    
Файл: 150688942849.jpg-(276.46KB, 500×752, 7200283.jpg)
17376
>>17375
А вы учли, что есть ещё кнопка «Развернуть все изображения», которая появляется в нитях, где много картинок?
No. 17377    
>>17376
Честно говоря, я как-то не замечал её. Сейчас посмотрю как там всё устроено.
No. 17379    
Файл: 150696121437.zip-(1.36MB, 410chan_expand_images_expand_all_min.zip)
17379
>>17371
>>17376

Вот версия с поддержкой кнопки «Развернуть все изображения», которая разворачивает / сворачивает их. Чтобы кнопка работала, ей нужно дать аттрибут id, соответствующий указанному в константе в скрипте. И убрать у неё её стандартный аттрибут onclick

В примере нить Caturday в /b/
В архиве обычная и минифицированная версии
Предыдушие проблемы с минификацией были связаны с тем, что я дурак и не заметил, что изначальный скрипт - часть проекта в котором уже все таски уже настроены, включая минификацию и эскейпинг
No. 17381    
Что-то по-моему местная разворачивалка идеальная.
А вот в ычанской разворачивалке баг, иногда картинка налезает на текст.
No. 17382    
>>17381
>Сейчас она просто разворачивает изображение целиком без учёта размера окна браузера. Соответственно, требуется доработать её так, чтобы ширина окна учитывалась.

Там основная проблема в том что ширина и высота будущей картинки проставляются с сервера.

Впрочем, можно действительно просто сделать то что просит Соус - добавить в старую функцию выставление максимальных размеров картинке. Наверное, добавлю сюда еще и такой вариант.

Алсо, если можешь воспроизвести баг разворачивалки с ычана, то напиши как это делать, т.е. на какой картинке в какой ситуации оно налезет на текст
No. 17383    
Файл: 15070629558.png-(1.08MB, 1726×782, Screenshot_2017-10-03_23-31-47.png)
17383
>>17382
Похоже, только в хроме лисоюзеры, молчать.

1. Открываем хром(оперу|иум).
2. Задаем размер окна 868 x 531 (W x H)
3. Заходим в /a/ и нажимаем превьюху.
4. Налезает.

Заметил на мобильнике первый раз.
Может быть там float: left надо?
No. 17384    
>>17383
Возможно, что это еще и только в линуксе. Вижу, что тема уходит под изображение, а не наплывает сверху на него

Если просто раскрыть картинку и уменьшать окно, проблема себя проявит?
No. 17389    
Файл: 150715120333.zip-(2.04MB, 410chan_expand_images_old.zip)
17389
>>17371
>>17382
Как и обещал, сделал дополнительно версию на базе текущей функции, с использованием трюка из >>17373 Это Ctrl+C Ctrl+V решение. Мне не хотелось устраивать войну скриптов, когда один скрипт проставляет ширину-высоту, а второй удаляет, поэтому я дополнительно раcчитываю макс высоту с учетом аспекта, и вроде все живы

В архиве пример на базе темы Persona 5 в /b/
No. 17393    
Может, такой вопрос лучше в /д, но здесь могут мимодевы объяснить или подтвердить проблему. У меня стабильно какая-то лабуда с посещением автобуса на ведре. Хожу по сайту, захожу в треды, всё ок. Через пару переходов загрузка страниц останавливается, и автобус намертво перестаёт грузиться без сообщений об ошибке. Надо ждать какое-то время. Примерно не скажу сколько, но долго, не несколько минут. Это опера на ведре. Такая проблема только с автобусом замечена. По той же сети на пеке всё хорошо.
No. 17398    
>>17393
Сжатие трафика (прокся) включена? С зарубежных ип замечал тоже такое, отваливается.
No. 17399    
>>17398
Интересная версия, но экономия трафика выключена. Посмотрю ещё из другого браузера и с другой сети.
No. 17405    
>>17398
На лисе на ведре попробовал, когда снова возникли проблемы на опере. То же самое. С временем мог преувеличить, за несколько минут все же проходит.
Проверяю на другой сети, вроде нет проблем.
No. 17407    
Сделал не копипасту с Ычана, но принцип тот же. Технологически и визуально отличий нет.
https://gist.github.com/WagonOfDoubt/84b3bb2182525e083359359170dfb0b6/revisions
См. дифф второй ревизии. В img_global.css добавлен класс .image-fullsize, в kusaba.js переписана только expandimg.
Никаких let, const, и прочей esNext-лабуды нет, оно конечно хорошо, но уж если перепиливать, так вообще все, сейчас хоть смотрится аутентично. Эх, запилить бы свою котобу с маджонгом и булочками.
Должно нормально работать начиная с Chrome 26, Firefox 16, Internet Explorer 10, Opera ?, Safari 7.
Фича не раскрывать на маленьких экранах убрана, так как работает по прежнему через onclick, и return false там перманентный. Какой бы ни было дикостью вешать onclick, этот способ требует наименьших изменений.
Для владельцев черно-белых нокий и прочих утюгов, можно обернуть тело функции expandimg в try...catch, впрочем все равно непонятно как у них остальные функции тогда не падают.
Вариант >>17373 меня не устраивает подходом. Масштабировать картинку по размеру страницы это прямая задача браузера, и проблема эта должна решаться и нормально сейчас решается средствами css, в то время как javascript отвечает за пользовательское взаимодействие, а не рассчитывает по формулам положение каждого элемента на странице. Раньше иного выхода не было, и приходилось делать именно так, но даже поддержка более старых браузеров для меня не перевешивает. К тому же, при таком варианте уже развернутые картинки не масштабируются при изменении размеров окна, в отличие от варианта как на Ычане.
No. 17408    
Кстати,
> <meta name="twitter:card" content="summary">
I see what you did there.
Мета должна быть в <head>, Твиттер все равно это парсит?
И да, разворот картинок нужно обязательно перенести на картинку, на ссылку пальцем попасть невозможно.
Еще есть один фичереквест, требующий мааленького изменения шаблона.
Если в ссылку на картинку
<a href="{$file_path}/src/{$post.file}.{$post.file_type}" onclick="javascript:expandimg('{$post.id}', '{$file_path}/src/{$post.file}.{$post.file_type}', '{$file_path}/thumb/{$post.file}s.{$post.file_type}', '{$post.image_w}', '{$post.image_h}', '{$post.thumb_w}', '{$post.thumb_h}');return false;">

Добавить
{if $post.file_original neq '' && $post.file_original neq $post.file}download="{$post.file_original}.{$post.file_type}"{/if}

Чтобы получилось
<a href="{$file_path}/src/{$post.file}.{$post.file_type}" onclick="javascript:expandimg('{$post.id}', '{$file_path}/src/{$post.file}.{$post.file_type}', '{$file_path}/thumb/{$post.file}s.{$post.file_type}', '{$post.image_w}', '{$post.image_h}', '{$post.thumb_w}', '{$post.thumb_h}');return false;" {if $post.file_original neq '' && $post.file_original neq $post.file}download="{$post.file_original}.{$post.file_type}"{/if}>

То картинки будут скачиваться на компьютер под тем же именем, под которым они заливались, и можно иметь buločka.jpg вместо 123456789.jpg
Более того, я бы отказался от отображения нумерованных имен файлов за ненадобностью, и заменил бы чуть дальше строку
{$post.file}.{$post.file_type}</a>

на
{if $post.file_original neq '' && $post.file_original neq $post.file}{$post.file_original}.{$post.file_type}{else}{$post.file}.{$post.file_type}{/if}</a>

Только эти ссылки скопипасщенны в нескольких местах, как винимум в img_thread.tpl и в img_board_page.tpl
No. 17409    
И в css не помешало бы добавить
.inline-pp, .prettyprint {

    white-space: pre-wrap;
}

No. 17410    
Понапридумывають хѣрню и головы ломають.
.thumb{max-width:100%;height:auto;box-sizing:border-box;margin:0;padding:2px 20px}

No. 17411    
Еще реквест: на странице треда есть группа ссылок
[Назад] [Вся нить] [Первые 100 сообщений] [Последние 50 сообщений]
, их не помешало бы обернуть в div, иначе стилями с ними ничего не сделаешь.
No. 17412    
Файл: 150746210020.png-(599.22KB, 1158×645, 12345681.png)
17412
>>17408
>Мета должна быть в <head>, Твиттер все равно это парсит?
Я просто сунул туда, куда можно сунуть штатными средствами. «Твиттеру» всё равно. В принципе, надо будет это вообще убрать, оно в таком виде бесполезно.
>То картинки будут скачиваться на компьютер под тем же именем, под которым они заливались
Не нужно.
>как винимум в img_thread.tpl и в img_board_page.tpl
Которых у нас вообще в движке нет.

>>17409
Да, добавлю, когда буду ковырять CSS в следующий раз.
No. 17413    
Файл: 150747249385.png-(189.01KB, 1349×631, nazad.png)
17413
>>17412
> Не нужно.
А жаль. Это хоть >>17411 можно сделать, а то некрасиво в body текст держать.
No. 17414    
Файл: 150748862150.png-(8.22KB, 362×180, Untitled.png)
17414
Заодно поделайте что-нибудь со ссылкой «Назад» на форме треда, чтобы та на границу не наезжала.

Можно, например, в шаблоне вместо span с float сделать div с правым text-align.
No. 17415    
А ещё сделайте так, чтобы при наведении курсора на ссылку на пост был какой-то таймаут закрытия разворачивающегося по ссылке поста вместо моментального закрытия при выходе курсора за область ссылки на пост. Чтобы можно было просмотреть цепочку постов.
No. 17416    
Вот, кстати, более насущный фичреквест по поводу шаблонов страницы, болезнь всех ванильных бордодвижков: перенеси прикреплённые кортинки в ОП-постах под лейбл с именем, темой и прочей лабудой, как в обычных постах. Тогда и раскрытие оных будет более правильно выглядеть.
No. 17426    
Файл: 150784341346.png-(586.80KB, 898×641, 12345697.png)
17426
По скриптам сроков у меня, разумеется, нет.

>>17409 добавил.
>>17414 ждёт своего часа в репозитории.
>>17411 про это я давно знаю, да. Когда-нибудь.
No. 17428    
>>17426
Видели эти версии скриптов?

Ычан-стайл >>17379
410-стайл >>17389
No. 17429    
>>17428
Вот это >>17410 решение самое простое. Никаких скриптов и работает отлично, нечего тут голову ломать.
No. 17434    
Файл: 150792261956.jpg-(87.55KB, 422×600, c4d7c0338fa92352c6f9eef098fc8867e69df5fc.jpg)
17434
>>17428
Никто пока ничего не смотрел.

>>17429
И в чём его суть, если оно только вёрстку портит и больше ничего не даёт? По крайней мере, при вписывании в CSS всё именно так, возможно, я что-то не так делаю вдруг.
No. 17436    
>>17434
Не знаю, что оно портит, но у меня работает как и требовалось: картинки больше не вылезают за края постов. Результат тот же, что и в >>17407, но не требует правки скриптов. Остается только в шаблонах
onclick
перевесить со ссылки на картинку.
No. 17437    
>>17434
Отвечу ак автор: добавь в конце глобальной цссины или замени маргин на паддинг и добавь остальное. И ещё оно работает только там, где есть цсс3 (кроме Осла, вроде как, потому что они слоупоки и не принимают до конца стандарт). Суть в том, что бокс-сайзинг приказыает параметру ширины учитывать паддинг как часть самого элемента при подсчёте максимальной ширины, из-за чего 100% считается как максимальная ширина кортинки с отступом до полного ухода края поста к краю экрана, опять же с учётом отступов, а параметр высоты уже подстраивает высоту под оригинальные пропорции, чтоб искажений не было. “Сломать” оно могло только на браузерах без поддержки бокс-сайзинга “вываливанием” кортинки за границу поста на сорок пиксолей, которые берутся от отступов (по двадцать с каждой стороны), т.е. если в нормальных браузерах, допустим, 1000 пикселей — ширина кортинки+отступов, то в Осле и древних браузерах — только кортинки.
No. 17477    
Мнѣніе >>17437 вѣрно передаётъ смыслъ правила
box-sizing: border-box
и необходимость его.
[Назад]
Удалить сообщение []
Пароль  
[Mod]