.NET Fest: полная программа конференции на сайте. Присоединяйся к самому большому .NET ивенту
×Закрыть

Расширение для 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

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

Начиналось всё так — я много сижу на доу и мне стало нехватать простого редактора (цитатку обвести тегами там или жирненьким выделить). И не так давно появилась навязчивая мысль что это можно легко сделать расширением. На практике получилось конечно не так уж легко и быстро, в виду особенностей как tinymce, так и самого dou. Плюс приключений добавило то, что расширения имеют доступ только к DOM, а для реализации понадобился доступ и к тому что кладут в память скрипты dou. Но зато я узнал что оказывается есть один способ подобраться к веб-страничке, в которую внедряешься, намного ближе чем это предполагается строгим хромом.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Firefox планується? Тепер у ньому webextention, має бути майже ідентично.

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

А сирці є десь на github?

оо, земляки ;)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

очередное ненужно для ненужного
написание чего-то должно начинаться с поиска альтернатив
существует imagus, который выглядит предпочтительнее(показ при hover)

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

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

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

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

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