Вот в чем проблема: доски Gitlab не предлагают предварительный просмотр проблемы без необходимости выходить за пределы доски. Я привык к доске в стиле JIRA, где вы можете щелкнуть карточку, и вы получите модальное окно с заголовком и описанием, затем вы просто закроете его, и доска все еще будет там.
Итак, после нескольких недель использования досок Gitlab и решения проблемы с навигацией (проблемы первого мира, верно?) просто для того, чтобы увидеть описание билета, я решил написать расширение для Chrome, которое извлекает описание карты, на которую вы нажали, а затем показывает это внутри модального окна, в то же время не выходя за пределы доски.
Я опубликую ссылку на репозиторий с исходным кодом в конце статьи, но прежде позвольте мне объяснить процесс создания этого расширения.
Не изобретайте велосипед
С самого начала я знал, что не собираюсь создавать свой собственный модальный jquery, идея заключалась в том, чтобы попытаться создать этот плагин как можно быстрее, и есть множество простых и полезных модальных jquery, которые я мог бы использовать.
Итак, сначала я скачал jquery-3.4.1.min.js с официальной страницы загрузки jquery.
Затем я немного погуглил в поисках модального окна jquery и нашел вот это http://github.com/kylefox/jquery-modal. Я скачал файлы jquery.modal.min.css (который я переименовал в style.css) и jquery.modal.min.js и сохранил их вместе с файлом jquery-3.4.1.min.js в папке assets. ” внутри моего проекта.
Затем я скачал прозрачную иконку png Gitlab и также сохранил ее в папке «assets».
Конфигурация и зависимости
Каждое расширение Chrome должно иметь файл manifest.json, в котором будут метаданные вашего расширения, такие как заголовок, описание, автор, значки.
Кроме того, в файле manifest.json вы указываете браузеру, какие сценарии js и css загружать. Мы укажем манифесту импортировать две зависимости js (jquery, jquery-modal) и одну зависимость css (style.css), которые у нас есть в папке с ресурсами.
На этом этапе вы также можете создать пустой файл content.js, чтобы мы указали файлу manifest.json загрузить его. Вот куда пойдет наша логика.
Мы должны указать наш URL-адрес, чтобы браузер загружал наши скрипты только в тех URL-адресах, которые соответствуют шаблону. Вот шаблон: https://gitlab.com/*-/boards. Этот шаблон работает сегодня, но кто знает, когда Gitlab изменит формат URL, а? Итак, дважды проверьте, что это все еще действительно.
И вот окончательный manifest.json:
{
"manifest_version": 2,
"name": "Gitlab Previewer",
"description": "Adds modal issue preview functionality on Gitlab boards",
"version": "0.1",
"author": "Alex Yalo",
"content_scripts": [
{
"matches": [
"https://gitlab.com/*-/boards"
],
"js": ["assets/jquery-3.4.1.min.js", "assets/jquery.modal.min.js", "content.js"],
"css": ["assets/style.css"]
}
],
"icons": {
"16": "assets/icon.png",
"48": "assets/icon.png",
"128": "assets/icon.png"
},
"browser_action": {
"default_icon": "assets/icon.png"
},
"web_accessible_resources": [
"assets/style.css"
]
}
Логика
Самое простое, что я мог придумать, это написать скрипт, который слушает щелчки карточек выдачи. Когда обнаружен щелчок, он должен найти URL-адрес сведений о проблеме (например: /issue/32) и сделать запрос ajax с помощью метода get.
Это даст мне всю страницу подробностей DOM, чтобы я мог найти внутри нее описание проблемы. С описанием, изолированным в переменной, я наконец-то смог использовать jquery-modal, чтобы показать описание в модальном режиме.
Итак, вот результат. Это идет в content.js
// content.js let theHost = 'https://gitlab.com'; const init = function(){ $('body').on('click', 'li.board-card', function(event){ if (!isALinkElement(event.target)) { var url = theHost + $(this).find('a').attr('href'); showIssueDescription(url); } }); } const isALinkElement = function(element) { return $(element).is("a"); } const showIssueDescription = function(url) { $.get(url, function(data) { let issueDescription = parseIssueDescription(data); let content = buildDescriptionHtml(issueDescription); showModal(content); }); } const parseIssueDescription = function(content) { let dom = $('<div/>').html(content).contents(); return dom.find('.detail-page-description').html(); } const buildDescriptionHtml = function(description) { let modalContent = `<div class="detail-page-description content-block">${description}</div>`; let html = `<div class="gitlab-issue-preview">${modalContent}</div>`; return html; } const showModal = function(content) { $(content).appendTo('body').modal(); // the jquery-modal plugin adds a .modal class to our container, // we should remove that class because it conflicts with Gitlab's own stylesheet $('.gitlab-issue-preview').removeClass('modal'); } $(function() { init(); });
С jquery мы выполняем функцию init() сразу после загрузки DOM. Внутри метода init() мы настраиваем слушателя на событие щелчка любого элемента в теле, который соответствует селектору li.board-card.
Когда обнаруживается событие щелчка, мы проверяем, не был ли нажат элемент ссылки, потому что мы хотим избежать отображения модального окна при нажатии на заголовок задачи. Мы хотим поймать клик только по карточке, исключая заголовок.
Итак, затем мы получаем значение атрибута href (url) заголовка, которое укажет нам на страницу сведений о проблеме. После этого вызывается функция showIssueDescription(url), и здесь происходит ajax. Мы $.get всю страницу, затем анализируем описание, добавляем HTML-код вокруг описания и показываем описание внутри модального окна.
Стоит объяснить эту строку $(‘.gitlab-issue-preview’).removeClass(‘modal’);.
Модальный плагин jquery добавляет «модальный» класс css к нашему модальному модальному окну. Но я обнаружил, что он конфликтует со стилем css на gitlab.com, поэтому я перешел к файлу style.css и переименовал ссылки .modal в .gitlab-issue-preview. Но плагин по-прежнему добавляет класс .modal, поэтому проще всего просто удалить этот класс после вызова модального окна. Должен ли я, возможно, разминировать плагин и настроить его? Да, возможно, но помните, что идея всего этого проекта заключалась в том, чтобы сделать это как можно быстрее, менее чем за час, чтобы я мог продолжить свою работу.
И это результат
Вывод
Сначала я сделал это для себя, но теперь выкладываю это на всеобщее обозрение, потому что знаю, что в мире должен быть хотя бы еще один разработчик, который ненавидит невозможность предварительно просмотреть проблему, не покидая доски Gitlab.
Итак, вот репо https://gitlab.com/alexyalo/gitlab-previewer-chrome-extension
Проверьте README для шагов установки, это очень просто.
