Вхід і реєстрація
×
Адміністрація сайту · 1 січня 2018, 14:42 3714
Gennady Dogaev, full-stack web developer (freelance)

Расширение для Chrome DOU enhancer

Фичи:
— Добавляет визуальный (WYSIWYG) редактор для комментариев. В качестве редактора используется TinyMCE.
— Подсвечивает код в комментариях (но только если код вставлялся с помощью редактора, так как там требуется «правильная» разметка). Может подсветить и в тексте топика, если код обёрнут в <pre class="language-javascript"><code> Пользователи без расширения код увидят, просто без подсветки, в стандартном сереньком pre. Тему (цвета) можно выбрать в настройках.
— Если комментарий содержит ссылки на изображения или YT-видео — в конец добавятся превьюшки и по клику на превьюшке картинку/видео можно посмотреть в лайтбоксе (штука такая на всю вкладку открывается черная с большой картинкой посредине). Ограничение — ссылка должна содержать одно из расширений png|jpg|gif|jpeg|bmp|tiff, иначе плагин просто не догадается что это картинка.
— Размер превьюшек настраивается, можно их вообще отключить, если не нравится. Настройка размера не влияет на трафик, увы (если кто надеялся). Но сейчас инет вроде дешевый у всех 🙂
— Раскрывает все ветки (те которые ещё ХХ комментариев). Можно отключить эту фичу, если не нравится.
— Заменяет стандартные UTF-8 emoji на картинки (с помощью github.com/twitter/twemoji). По дефолту у хрома они мелкие и черно-белые. Заменяет не только в комментариях, но и в топиках и статьях. Эта фича тоже отключается при желании.
— Редактор позволяет вставлять UTF-8 emoji (диалог показывает дефолтные хромовские эмодзи с превью по наведению, но там есть технические ограничения, не позволяющие показать twemoji прямо в диалоге).

Скачать: chrome.google.com/...​nfeelpcppmpbgldeamflkijdn

Продуктивных срачейдискуссий! 💩

Код можно посмотреть тут. Расширение может ругаться в консоль, но по идее должно работать у всех на форуме и в ленте (статьях).

Теми: Chrome, DOU
👍ПодобаєтьсяСподобалось0
До обраногоВ обраному0
LinkedIn

Схожі топіки

Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Gennady Dogaev full-stack web developer (freelance) 12.05.2020 12:45

Обновлено до версии 0.0.0.23

Добавлена поддержка sub и sup, обновлена версия TinyMCE (в прошлой гитхаб репортил об уязвимости), добавлен выбор тем для подсветки синтаксиса.

Відповісти
Підтримати
Gennady Dogaev full-stack web developer (freelance) 05.11.2019 16:03

Я встановлюю тільке те що потрібно

Типу, а що зміниться для мене якісно якщо я заюзаю цей плагін?

Зручніше писати коментарі з розміткоюоформленням і смайлами (🙈 🙉 🙊 ). Якщо активно сратисякоментувати, це стає потрібним. Бо хтмл англійськими літерками треба писати, а текст українськими/російськими, і це трохи важко

Відповісти
Підтримати
anonymous
Gennady Dogaev full-stack web developer (freelance) 05.11.2019 16:06

Ні. Коли я в останній раз перевіряв, у мобільного хрома не було апі для додатків

Відповісти
Підтримати
anonymous
Victor Musienkо Senior Engineer в Noibu.com 05.11.2019 05:01

Запіліть підтримку маркдауна pls

Відповісти
Підтримати
Gennady Dogaev full-stack web developer (freelance) 05.11.2019 15:40

У якому вигляді?

  1. Замість WYSIWYG-редактору і парсити перед відправкою на сервер
  2. Парсити коментарі як markdown на клієнті

Результат у підходів буде дуже різним. У першому випадку можливості відображення обмежені (доу підтримує лише деякі теги, наприклад не підтримуються зображення), але усі користувачі бачитимуть один результат. У другому я бачу значно ширші можливості, але користувачі без плагіну бачимуть голий маркдаун, що на мій погляд не дуже добре (такий собі елітизм, чи як).

Відповісти
Підтримати
Victor Musienkо
Gennady Dogaev full-stack web developer (freelance) 08.02.2018 03:42

Найден и исправлен мелкий баг с лайтбоксом

Відповісти
Підтримати
Gennady Dogaev full-stack web developer (freelance) 18.01.2018 19:46

В редакторе есть кнопка «шаблоны» (не знаю, замечал ли кто) — screenshots.gennady.pp.ua/20180118_69965df51.png. А версия 0.0.0.19 (публикуется) позволяет их добавлять/удалять в настройках.

Відповісти
Підтримати
Gennady Dogaev full-stack web developer (freelance) 15.01.2018 03:29

Публикуется 0.0.0.16 😉

Відповісти
Підтримати
Gennady Dogaev full-stack web developer (freelance) 15.01.2018 03:07

Для подогрева интереса screenshots.gennady.pp.ua/20180115_e96d03f78.png

Відповісти
Підтримати
anonymous 08.01.2018 22:25

Добавьте автоматическое скрытие постов от Кожаева и Пение.

Відповісти
Підтримати
Gennady Dogaev full-stack web developer (freelance) 08.01.2018 22:27

Для этого кто-то уже писал расширение, его можно найти по запросу dou в магазине расширений

Відповісти
Підтримати
anonymous
Gennady Dogaev full-stack web developer (freelance) 08.01.2018 21:26

Публикуется 0.0.0.1314. Видео и картинки по клику открываются в лайтбоксе, все картинки из комментария в нём же листаются screenshots.gennady.pp.ua/20180108_625470040.png screenshots.gennady.pp.ua/20180108_23db4b93f.png

Відповісти
Підтримати
Alex Fogol Software Developer, C/C++ Expert 08.01.2018 14:34

Показ картинок — они в «основную версию без плагина» попадают и отображаются там тоже? или не вполне понятно как оно будет.

Відповісти
Підтримати
Gennady Dogaev full-stack web developer (freelance) 08.01.2018 16:08

Не, доу картинки режет. С картинками работает если в комментарии есть ссылка на картинку. Плагин такие ссылки обрабатывает и вставляет картинку.

Пока что это выглядит так https://screenshots.gennady.pp.ua/20180108_0b0cd42d1.png
В планах вот так + лайтбокс screenshots.gennady.pp.ua/20180108_c6ef5b795.png

Відповісти
Підтримати
Alex Fogol
Gennady Dogaev full-stack web developer (freelance) 06.01.2018 15:06

Публикуется 0.0.12: автоматическое увеличение редактора по мере набора. Пока поставил 700 пикселей ограничение, но не знаю, нужно ли оно. Как лучше — когда редактор занимает высоту примерно одного экрана и потом в нём появляется прокрутка, или когда редактор сколь угодно длинный и прокручивается при необходимости вместе со всей страницей? Во втором случае мне кажется неудобным что панелька инструментов может оказаться не в зоне видимости и придется в случае очень длинного комментария крутить туда-сюда.

Відповісти
Підтримати
Gennady Dogaev full-stack web developer (freelance) 05.01.2018 18:02

Публикуется новая версия (0.0.0.11), которая автоматически разворачивает все ветки комментариев, чтобы не кликать каждый мышкой. Фичу можно отключить, если нравится как есть.

Відповісти
Підтримати
Gennady Dogaev full-stack web developer (freelance) 03.01.2018 05:01

Сегодняшнее обновление содержит исправление бага, из-за которого могли не работать кнопки лайка в комментариях к статьям.

Відповісти
Підтримати
Artyom Krivokrisenko 02.01.2018 08:55

Коментар порушує правила спільноти і видалений модераторами.

Artyom Krivokrisenko 02.01.2018 09:10

Коментар порушує правила спільноти і видалений модераторами.

Gennady Dogaev full-stack web developer (freelance) 02.01.2018 15:02

Пока не планирую

Відповісти
Підтримати
anonymous
Gennady Dogaev full-stack web developer (freelance) 02.01.2018 18:54

Первые 4 — это кусок манифеста и код, используемый для активации/деактивации расширения в зависимости от текущего url. Не знаю как это правильно делать в webextension, но это официальный метод из доков гугла. Последняя — ложное срабатывание, так как это из кода tinymce.

Відповісти
Підтримати
anonymous
Grez 02.01.2018 03:37

Автоцитирывание по копи-пейсту терь не работает.

Відповісти
Підтримати
Grez
Gennady Dogaev full-stack web developer (freelance) 02.01.2018 03:44

Да, есть такой недостаток — пока не знаю как это можно реализовать. Оборачивать любую вставку в цитату вроде бы не совсем правильно. А как отследить что это именно скопировано из сообщения/комментария — не знаю.

Дело в том что и автоцитирование, и например отправка по Ctrl+Enter привязаны на разные события оригинального поля ввода. Но когда ставится визуальный редактор — все события получает уже он, а оригинальное поле ввода спрятано и синхронизируется при вводе. Соответственно нужно разбираться как оно работало в оригинале (на каких событиях, какой код выполнялся). С отправкой по Ctrl+Enter разобрался не без труда, с автоцитированием ещё даже не пробовал.

Відповісти
Підтримати
Grez
Євген Козлов Front-end developer в SoftServe 02.01.2018 09:47

код просто смотрел, на какие элементы распространен Selection. если на элементы с комментариями, то вставляемое оборачивается в теги цитаты.
можно убедиться в этом, если вставлять абсолютно левый текст, но выделить что-то в случайном комментарии

Відповісти
Підтримати
Gennady Dogaev
Gennady Dogaev full-stack web developer (freelance) 04.01.2018 02:58
код просто смотрел, на какие элементы распространен Selection. если на элементы с комментариями, то вставляемое оборачивается в теги цитаты.

Не, там таки было сравнение того что скопировано и того что вставляется. Тоже так сделал.

Відповісти
Підтримати
Євген Козлов
schwarzlichtbezirk 15.01.2018 15:21

Там идёт поиск на вхождение вставляемого текста в тексте вышестоящих комментариев по ветке. То есть проходишься вверх по дереву, и проверяешь на предмет вхождения.

Відповісти
Підтримати
Gennady Dogaev
Gennady Dogaev full-stack web developer (freelance) 15.01.2018 15:25

Я код доу изучал в процессе, никто там по дереву не ходил. В момент копирования запоминается скопированный фрагмент, а в момент вставки с ним сверяется вставляемый. Если совпали — цитата, иначе просто текст. Довольно простой и удобный метод, и расход ресурсов не зависит от размера темы. Вот оригинальный код:

var QuoteManager = function() {
    var b = false;
    var h = "";
    $(".l-content-wrap").on("copy", ".b-typo", function(i) {
        b = true;
        d()
    });
    function d() {
        h = window.getSelection ? window.getSelection().toString() : document.selection.createRange().text
    }
    var a = $("textarea");
    var f = $.map(a, function(j) {
        var i = $(j);
        return {
            el: i,
            val: i.val(),
            changed: function() {
                return this.val != i.val()
            },
            update: function() {
                this.val = i.val()
            }
        }
    });
    f = $(f);
    setInterval(function() {
        g()
    }, 150);
    var e = null;
    a.on("paste", function(i) {
        e = true
    });
    function g() {
        f.each(function() {
            if (e && this.changed()) {
                c(this);
                e = false
            }
            this.changed() ? this.update() : ""
        })
    }
    function c(k) {
        if (!b || h == "") {
            return
        }
        var j = k.el.getSelection().end
          , i = h.length
          , n = j - i
          , m = k.el.val();
        if (m.substring(n, j).replace(/\s/g, "") != h.replace(/\s/g, "")) {
            return
        }
        var l = "<blockquote>" + h + "</blockquote>";
        m = m.substring(0, n) + l + m.substring(j, m.length);
        k.el.val(m);
        k.el.caret(n + l.length, n + l.length)
    }
};
Відповісти
Підтримати
schwarzlichtbezirk
Sergii Voloshyn Product Manager в DOU.ua 15.01.2018 15:28

Об этом даже была статья на ДОУ почти 7 лет назад:
dou.ua/...​rticles/vstavka-tsitatyi

Відповісти
Підтримати
Gennady Dogaev
Gennady Dogaev full-stack web developer (freelance) 04.01.2018 02:50
Автоцитирывание по копи-пейсту терь не работает.

Пофиксено, деплоится

Відповісти
Підтримати
Grez
Gennady Dogaev full-stack web developer (freelance) 02.01.2018 03:25

Версия 0.0.0.3, которая должна опубликоваться в течении часа, принесёт подстветку синтаксиса

screenshots.gennady.pp.ua/20180102_0709b35bd.png

Відповісти
Підтримати
Oleksandr Multimedia Content Maker в Marketing agency 02.01.2018 09:38

Как то не обычно у вас комент выглядит. синяя полоса, красная подпись...

Відповісти
Підтримати
Gennady Dogaev
Oleksandr Multimedia Content Maker в Marketing agency 02.01.2018 09:39 
<h1>Hello<h1>
Відповісти
Підтримати
Oleksandr
Gennady Dogaev full-stack web developer (freelance) 02.01.2018 15:01

Это кастомный стиль, для работы нужно расширение stylish userstyles.org/...​omment-tree-for-dou-ua-v3

Відповісти
Підтримати
Oleksandr
Oleksandr Multimedia Content Maker в Marketing agency 02.01.2018 15:20

спасибо

Відповісти
Підтримати
Gennady Dogaev
Oleksandr Multimedia Content Maker в Marketing agency 01.01.2018 23:14

В общем очень неплохо.

Есть еще идеи для развития? Типа сворачивать ветки обсуждений?

Відповісти
Підтримати
Gennady Dogaev full-stack web developer (freelance) 01.01.2018 23:21

На настоящий момент это всё, в планах только сделать настраиваемые шаблоны (больше шутки ради, вряд ли это найдет широкое применение). Что касается сворачивания/разворачивания обсуждений — структура комментариев не самая простая, может если будет свободное время/желание. Я бы не против развернуть «ещё 5 комментариев», которые попадаются в очень активных темах.

Відповісти
Підтримати
Oleksandr
Gennady Dogaev full-stack web developer (freelance) 01.01.2018 22:20

Выложил новую версию — исправлены ошибки и теперь должно работать и в статьях (ленте)

Відповісти
Підтримати
Oleksandr Multimedia Content Maker в Marketing agency 01.01.2018 20:40

Побольше и покурпнее скринов

Відповісти
Підтримати
Александр Шевченко Java developer 01.01.2018 15:05

Перестала работать комбинация Ctrl + enter

Відповісти
Підтримати
Gennady Dogaev full-stack web developer (freelance) 01.01.2018 16:46

На каких страницах?

Відповісти
Підтримати
Александр Шевченко
Александр Шевченко Java developer 01.01.2018 21:27

при отправке сообщения на форуме, без аддона можно комбинацией, теперь переходит на следующую строку.

Відповісти
Підтримати
Gennady Dogaev
Gennady Dogaev full-stack web developer (freelance) 01.01.2018 21:50

Ну вообще обработчик есть и отправлять должно. Скоро выложу обновленную версию и переходить на новую строку не будет

Відповісти
Підтримати
Александр Шевченко

Підписатись на коментарі

Не підписуватись
Скористайтесь акаунтом
×
з умовами використання сайту і політикою конфіденційності.