From 562095e3db29cc8c2295986f7ed2d93102e9d710 Mon Sep 17 00:00:00 2001 From: aleqsunder Date: Sun, 28 Apr 2019 01:32:34 +0400 Subject: [PATCH] 0.0.3 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Изменена html структура некоторых элементов Изменена структура некоторых js функций Добавлено множество one-deal функций Добавлены оповещения о совершённых действиях Добавлено оповещение в случае, если ваше расширение всё-таки обновилось (рофлы гугла по предоставлению расширения через 12 часов, когда у остальных скачалось через пол часа - вкусно) Добавлены настройки: - Добавлена возможность редактировать отображение нужных вам вкладок со смайлами (эта возможность никак не будет конфликтовать с появлением новых и удалением старых вкладок разработчиками dota2ru. По крайней мере я так думаю) Исправлена ошибка с неправильным отображением настроек на мобильных устройствах Исправлена ошибка с неправильными размерами смайлов: теперь все смайлы имеют размер 28х28 Со второй попытки исправлена ошибка с обновлением списка смайлов после сохранения в настройках, но если окно со смайлами в сообщении было открыто, его стоит закрыть и снова открыть, чтобы изменения вступили в силу Изменены некоторые текстовые строки Немного увеличил производительность, уменьшив интервал некоторых обработчиков И прочие малозначимые изменения, с которыми вы можете ознакомиться сами! --- assets/integr.js | 126 ++++++++++++++++++++++++++++++++++------ assets/sett.tmp | 52 ++++++++++++++--- extension.css | 100 +++++++++++++++++++++++++------- extension.js | 147 ++++++++++++++++++++++++++++++----------------- manifest.json | 2 +- 5 files changed, 327 insertions(+), 100 deletions(-) diff --git a/assets/integr.js b/assets/integr.js index 18275ff..bc9ef2b 100644 --- a/assets/integr.js +++ b/assets/integr.js @@ -1,6 +1,10 @@ -var asetting = document.querySelector('setting'), - smileList = document.querySelector('setting smile-list'), - chess = 'a-dota2smiles', storageCache = _getStorage(); +var afullpage = document.querySelector('fullpage'), + smileList = document.querySelector('fullpage smile-list'), + asspages = document.querySelectorAll('asett pages input'), + chess = 'a-dota2smiles', storageCache = _getStorage(), + storagePages = JSON.parse(localStorage.getItem('pages')), + alert = document.querySelector('fullpage alert'), + version = '0.0.3'; // Обновление списка до текущей версии function reload () @@ -10,17 +14,60 @@ function reload () Object.keys(storageCache).forEach ( function (name) { add(name, storageCache[name]) }); + + asspages.forEach + ( function (a) { + a.checked = storagePages[a.value]; + }); } reload(); +if (localStorage.getItem('version') != version) +{ + localStorage.setItem('version', version); + openAlert({ + wait: true, + + text: `Добро пожаловать в новую версию `+ version +`!
+
+ Для ознакомления нажмите здесь
+ Уведомление высвечивается лишь раз после каждого обновления, чтобы уведомить вас о том, что ваше расширение успешно обновлено
+
+ Приятного использования!` + }); +} + +// Переносить ради такого фунцкцию из extension не вижу смысла, плюс нужно её переделать +setInterval +( function () { + var content = tinymce.get('forumPost').contentDocument; + + if (content) + { + content.querySelector('head style').innerHTML += 'img[data-smile] { width: 30px; height: 30px; }'; + + var allCont = content.querySelectorAll('img[data-smile]:not(.resized)'); + + if (allCont.length > 0) + { + allCont.forEach(function (a) { + a.width = '30'; + a.height = '30'; + + a.classList.add('resized'); + }) + } + } +}, 500); + function add (name, value) { - name = (name)? name : document.querySelector('setting finder input[name="name"]').value; - value = (value)? value : document.querySelector('setting finder input[name="src"]').value; + name = (name)? name : document.querySelector('fullpage finder input[name="name"]').value; + value = (value)? value : document.querySelector('fullpage finder input[name="src"]').value; - document.querySelector('setting finder input[name="name"]').value = ''; - document.querySelector('setting finder input[name="src"]').value = ''; + document.querySelector('fullpage finder input[name="name"]').value = ''; + document.querySelector('fullpage finder input[name="src"]').value = ''; smileList.appendChild( createDOM(` @@ -51,12 +98,17 @@ function save () }); storageCache = _getStorage(); + reload(); + + openAlert({text: 'Ваши смайлы сохранены!'}); } function saveTo () { save(); - document.querySelector('setting saveTo textarea').value = JSON.stringify( _getStorage() ); + document.querySelector('fullpage saveTo textarea').value = JSON.stringify( _getStorage() ); + + openAlert({text: 'Скопируйте Ваши смайлы, чтобы поделиться!'}); } function loadFrom () @@ -64,7 +116,7 @@ function loadFrom () // Будет обидно, если изменения не сохранятся, верно?) save(); - var area = document.querySelector('setting loadfrom textarea'), + var area = document.querySelector('fullpage loadfrom textarea'), your = (typeof storageCache == 'string')? JSON.parse(storageCache) : storageCache, load = (typeof area.value == 'string')? JSON.parse(area.value) : area.value, oth = Object.assign(load, your); @@ -75,21 +127,59 @@ function loadFrom () // Ну и сразу получаем готовенькое storageCache = _getStorage(); reload(); + + openAlert({text: 'Смайлы загружены!'}); } -function openASetting () -{ asetting.classList.add('open') } - -function closeASetting () -{ asetting.classList.remove('open') } +function savePages () +{ + var pages = document.querySelectorAll('asett pages input'), + array = {}; + + pages.forEach + ( function (a, i) { + array[a.value] = a.checked; + }); + + console.log(array); + + localStorage.setItem('pages', JSON.stringify(array)); + + openAlert({text: 'Отображение изменено по вашему усмотрению!'}); +} -function adoor(elem) -{ - asetting.querySelector('backfon.'+ elem).classList.toggle('open'); - var flag = asetting.querySelector(elem).classList.toggle('open'); +function adoor (elem) +{ + if (!afullpage.querySelector('.open')) + afullpage.classList.toggle('open'); + + afullpage.querySelector('backfon.'+ elem).classList.toggle('open'); + var flag = afullpage.querySelector(elem).classList.toggle('open'); if (elem == 'saveto' && flag) saveTo(); + + if (!afullpage.querySelector('.open')) + afullpage.classList.toggle('open'); +} + +function openAlert ({text, wait}) +{ + alert.querySelector('middle').innerHTML = text; + + adoor('alert'); + + if (wait) + { + document.querySelector('fullpage backfon.alert').setAttribute('onclick', `adoor('alert'); this.onclick = 'return false;'`); + } + else + { + setTimeout + (function () { + adoor('alert'); + }, 2000); + } } function createDOM (html) diff --git a/assets/sett.tmp b/assets/sett.tmp index ad91d86..ea1c36e 100644 --- a/assets/sett.tmp +++ b/assets/sett.tmp @@ -1,7 +1,7 @@ - - + + - Настройки + Редактор смайлов @@ -15,15 +15,20 @@ - Загрузить от - Сохранить для + Настройки + +
+ Загрузить + Поделиться +
+ Сохранить - Загрузка сторонних смайлов + Загрузка сторонних смайлов Вставьте то, чем с вами поделились, и нажмите Загрузить @@ -36,10 +41,41 @@ - Сохранение смайлов + Сохранение смайлов Скопируйте и поделитесь с пользователем! - \ No newline at end of file + + + + Настройки + + Видимые разделы + + Популярное + Стандартные + Твич + Разное + Dota 2 анимированные + Dota 2 герои + Аниме + Пепа + Dota 2 предметы + LoL + Твич-герои + + + + + Сохранить + + + + + + Уведомление + + + \ No newline at end of file diff --git a/extension.css b/extension.css index d4cc0a8..efa2074 100644 --- a/extension.css +++ b/extension.css @@ -8,8 +8,8 @@ .smile-content img[role="presentation"] { - max-height: 50px; - max-width: 50px; + max-height: 28px; + max-width: 28px; white-space: unset!important; } @@ -18,7 +18,7 @@ padding-bottom: 0px!important; } -setting +fullpage { display: none; flex-direction: column; @@ -26,7 +26,6 @@ setting justify-content: center; position: fixed; - z-index: 10000; width: 100%; height: 100%; @@ -38,10 +37,14 @@ setting transition: all .4s; } +fullpage +{ z-index: 10000; } + + backfon { - width: 100vw; - height: 100vh; + width: 100%; + height: 100%; position: fixed; z-index: 10001; @@ -49,23 +52,31 @@ backfon background: rgba(0, 0, 0, .7); } -backfon.loadfrom, backfon.saveto +backfon.loadfrom, backfon.saveto, backfon.asett { display: none; z-index: 10003; } -setting * +backfon.alert +{ + display: none; + z-index: 10005; +} + +fullpage * { display: flex; } -setting.open, loadfrom.open, saveto.open, backfon.open +fullpage.open, smiles.open, +loadfrom.open, saveto.open, +alert.open, asett.open, backfon.open { display: flex; } -smiles, loadfrom, saveto +smiles, loadfrom, saveto, asett, alert { position: absolute; @@ -79,10 +90,11 @@ smiles, loadfrom, saveto flex-direction: column; } -smiles { z-index: 10002; } -loadfrom, saveto { display: none; z-index: 10004; } +smiles { display: none; z-index: 10002; } +loadfrom, saveto, asett { display: none; z-index: 10004; } +alert { display: none; z-index: 10006; } -setting top +fullpage top { background: #2b2c32; border-radius: 3px; @@ -90,9 +102,18 @@ setting top margin: 6px; padding: 10px; font-size: 16px; + + justify-content: space-between; + align-items: center; +} + +fullpage close +{ + border-radius: 3px; + background: #121215; } -setting middle +fullpage middle { height: 100%; flex-direction: column; @@ -100,16 +121,53 @@ setting middle padding: 10px 16px; } -setting bottom +@media (max-width: 600px) +{ + smiles, loadfrom, saveto, asett + { + width: 100%; + height: 100%; + } + + alert + { + width: 100%; + } + + fullpage middle + { + overflow: auto; + } +} + +fullpage pages +{ + height: 100%; + padding: 10px 16px; + justify-content: flex-start; + flex-flow: row wrap; +} + +pages page +{ + padding: 0px 9px; + margin: 3px; + border-radius: 3px; + background: #2b2c32; + justify-content: center; + align-items: center; +} + +fullpage bottom { flex-direction: row; padding: 0px 16px 10px; - justify-content: flex-end; + justify-content: space-between; } -setting bottom > * +fullpage bottom left > * { - margin-left: 6px; + margin-right: 6px; } finder @@ -118,13 +176,13 @@ finder margin-bottom: 6px; } -setting input[name='name'] +fullpage input[name='name'] { width: 100px!important; } /* Перекрываем стили как можем ей богу */ -setting input, setting textarea +fullpage input, fullpage textarea { margin: 0 5px 0 0!important; /* Особенно это */ height: 29px!important; @@ -135,7 +193,7 @@ setting input, setting textarea color: #989899!important; } -setting textarea +fullpage textarea { height: 450px!important; } fing diff --git a/extension.js b/extension.js index 13f0f8b..4e539c4 100644 --- a/extension.js +++ b/extension.js @@ -2,11 +2,17 @@ * Переменные */ let index = -2, button, tabs, name = 'Собственные', chess = 'a-dota2smiles', storageCache = _getStorage() - list = []; + list = [], reloadInterval = setInterval(reload, 3000); Object.keys(storageCache).forEach ( function (name) { list.push( {'name': name, 'src': storageCache[name]} ) }); +function reload () +{ + Object.keys(storageCache).forEach + ( function (name) { list.push( {'name': name, 'src': storageCache[name]} ) }); +} + /** * Шаг нулевой - определение страницы настроек */ @@ -19,71 +25,106 @@ fetch(getURL('/assets/sett.tmp')) document.body.insertBefore(html, document.body.firstChild); - watching('div.userbar', function (el) - { - el.insertBefore( createDOM(` - - - - `), el.querySelector('a[title="Настройки"]')); - - /** - * Да-да, только теперь можно подгружать динамический JS на страницу, и только отдельным файлом - * Тегом script браузер просто проигнорирует)0 - */ - - fetch(getURL('/assets/integr.js')) - .then(function(response){ - return response.text(); - }) - .then(function(body){ - var script = document.createElement('script'); - script.innerHTML = body; + watching + ({ + elem: 'div.userbar', + callback: function (el) + { + el.insertBefore( createDOM(` + + + + `), el.querySelector('a[title="Настройки"]')); - document.head.appendChild(script); - }); + /** + * Да-да, только теперь можно подгружать динамический JS на страницу, и только отдельным файлом + * Тегом script браузер просто проигнорирует)0 + */ + + fetch(getURL('/assets/integr.js')) + .then(function(response){ + return response.text(); + }) + .then(function(body){ + var script = document.createElement('script'); + script.innerHTML = body; + + document.head.appendChild(script); + }); + } }); }); /** * Шаг первый - отслеживание timyMCE и присваивание кнопке второго шага */ -watching('div[aria-label="Смайлы"]', function (el) -{ - el.addEventListener('click', createPanel, false); -}, true); +watching +({ + elem: 'div[aria-label="Смайлы"]', + bool: true, + + callback: function (el) + { + el.addEventListener('click', createPanel, false); + } +}); /** * Шаг второй - отслеживание появления блока смайлов */ function createPanel () { - watching('div.smiles-panel ul.tabs', function () - { - el.insertBefore( createDOM(` -
  • - `+ name +` -
    • - `), el.firstChild); - - // Приступаем к созданию контента - var content = document.querySelector('div.smiles-panel div.tabs-content'), - div = createDOM(`
    `); + watching + ({ + elem: 'div.smiles-panel ul.tabs', - // Перебираем все смайлы - for (var i = 0; i < list.length; i++) + callback: function () { - div.appendChild( createDOM(` -
    - - - -
    - `)); + el.querySelectorAll('a').forEach + ( function (a){ + var pages = JSON.parse(localStorage.getItem('pages')), + a = a; + // получаемая переменная может работать только в пределах своей ф-ии + + if (pages) // Проверяем, есть ли вообще такой объект в локалке + { + Object.keys(pages).forEach + ( function (b, index) { + var index = a.dataset.cat.toString(); + + if (pages[index] == false) + { + a.style = 'display: none'; + } + }); + } + }); + + el.insertBefore( createDOM(` +
  • + `+ name +` +
    • + `), el.firstChild); + + // Приступаем к созданию контента + var content = document.querySelector('div.smiles-panel div.tabs-content'), + div = createDOM(`
    `); + + // Перебираем все смайлы + for (var i = 0; i < list.length; i++) + { + div.appendChild( createDOM(` +
    + + + +
    + `)); + } + + content.appendChild(div); } - - content.appendChild(div); }); } @@ -105,11 +146,13 @@ function createDOM (html) * @param function callback * @param boolean bool */ -function watching (elem, callback, bool) +function watching ({doc, elem, callback, bool}) { var interval = setInterval ( function () { - if (el = document.querySelector(elem +':not(.watched)')) + doc = (doc)? doc : document; + + if (el = doc.querySelector(elem +':not(.watched)')) { callback(el); el.classList.add('watched'); diff --git a/manifest.json b/manifest.json index b6b5fac..7d5def3 100644 --- a/manifest.json +++ b/manifest.json @@ -1,6 +1,6 @@ { "manifest_version": 2, - "version": "0.0.2", + "version": "0.0.3", "name": "Dota2Ru", "description": "Использование сторонних смайлов для форума",