Уважаемые веб-разработчики, пожалуйста, используйте якоря вместо Divs для кнопок


Я понимаю, вы используете React или Angular, и вам не нужно использовать <a> для кнопок вашего веб-приложения. Но сделайте это для нас, клавиатурных пуристов.

Так как я хотел бы в конечном итоге на некоторое время стать «цифровым кочевником», я решил приучить себя работать на ноутбуке. Другими словами, я стал «клавиатурным пуристом».

Что касается инструментов разработки, то, естественно, там есть поддержка клавиатуры. Но настольные приложения? Не повезло. А веб-приложениям еще хуже.

Введите Vimium, удивительное расширение Chrome, которое позволяет перемещаться по сети, используя только клавиатуру! Предположим, что сайт, на котором вы находитесь, использует якоря для кнопок…

Мой первый юзерскрипт

Standard Notes — это удивительное кроссплатформенное приложение с открытым исходным кодом для ведения заметок. Мне нравится его простота. И я постоянно переключаюсь на него для редактирования и поиска заметок во время разработки. Однако недавно они изменили некоторые кнопки, сделав их div’ами вместо якорей, и поэтому у меня быстро развивается кистевой туннель из-за необходимости постоянно переключаться на коврик для мыши, чтобы нажимать на кнопки. Это ужасно расстраивает. Я потратил некоторое время на поиски и написал об этом на subreddit, но похоже, что разработчики не собираются реализовывать поддержку клавиатуры в ближайшее время.

Обычно я просто избегаю приложений, в которых нет хорошей поддержки сочетаний клавиш (или Vimium), но в данном случае я уже был слишком увлечен Standard Notes. Поэтому я решил написать юзерскрипт, чтобы изменить элементы, о которых идет речь, и снова сделать их якорями:

Vimium Standard

// ==UserScript==
// @name         Vimium Standard
// @namespace    https://shaneduffy.io
// @version      0.1
// @description  Standard Notes changed their UI, and now it doesn't work with Vimium. This makes things work with Vimium again.
// @author       Shane Duffy
// @match        https://app.standardnotes.com
// @icon         https://shaneduffy.io/assets/img/logo-circle-64.png
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const observer = new MutationObserver(mutationList => {
        var applyChanges = true;

        for (const mutation of mutationList) {
            switch (mutation.type) {
                case 'childList':
                    for (const node of mutation.addedNodes) {
                        var classString;
                        if (node instanceof Element) {
                            classString = node.getAttribute("class");
                            if (classString?.includes("name") || classString?.includes("tag-icon")) {
                                if (node.tagName == "DIV") {
                                    node.remove();
                                }
                            }

                            if (classString.includes("standard-vimium")) {
                                applyChanges = false;
                            }
                        }
                    }
                    for (const node of mutation.removedNodes) {
                        if (node instanceof Element) {
                            classString = node.getAttribute("class");
                            if (classString?.includes("standard-vimium")) {
                                applyChanges = false;
                            }
                        }
                    }
                    break;
                case 'attributes':
                    break;
            }
        }

        if (applyChanges) {
            var notes = document.getElementsByClassName("name");
            for (const note of notes) {
                if (note != undefined && note.tagName != "a") {
                    var newNote = document.createElement("a");
                    newNote.setAttribute("class", "name standard-vimium");
                    newNote.innerHTML = note.innerHTML;

                    if (note.parentNode != undefined) {
                        note.parentNode.replaceChild(newNote, note);
                    }
                }
            }

            var tags = document.getElementsByClassName("tag-icon");
            for (const tag of tags) {
                if (tag != undefined && tag.tagName != "a") {
                    var newTag = document.createElement("a");
                    newTag.setAttribute("class", "tag-icon standard-vimium");
                    newTag.innerHTML = tag.innerHTML;

                    if (tag.parentNode != undefined) {
                        tag.parentNode.replaceChild(newTag, tag);
                    }
                }
            }
        }
    });

    observer.observe(document.body, {
        childList: true,
        attributes: true,
        subtree: true,
        characterData: true
    });
})();
Войти в полноэкранный режим Выйти из полноэкранного режима

Оглядываясь назад, могу сказать, что Standard Notes с открытым исходным кодом, так что я, вероятно, мог бы просто сделать PR. Упс.

Оцените статью
Procodings.ru
Добавить комментарий