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": "Использование сторонних смайлов для форума",