100 changes: 79 additions & 21 deletions extension.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand All @@ -18,15 +18,14 @@
padding-bottom: 0px!important;
}

setting
fullpage
{
display: none;
flex-direction: column;
align-items: center;
justify-content: center;

position: fixed;
z-index: 10000;

width: 100%;
height: 100%;
Expand All @@ -38,34 +37,46 @@ setting
transition: all .4s;
}

fullpage
{ z-index: 10000; }


backfon
{
width: 100vw;
height: 100vh;
width: 100%;
height: 100%;

position: fixed;
z-index: 10001;

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;

Expand All @@ -79,37 +90,84 @@ 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;

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;

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
Expand All @@ -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;
Expand All @@ -135,7 +193,7 @@ setting input, setting textarea
color: #989899!important;
}

setting textarea
fullpage textarea
{ height: 450px!important; }

fing
Expand Down
147 changes: 95 additions & 52 deletions extension.js
Original file line number Diff line number Diff line change
Expand Up @@ -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]} ) });
}

/**
* Шаг нулевой - определение страницы настроек
*/
Expand All @@ -19,71 +25,106 @@ fetch(getURL('/assets/sett.tmp'))

document.body.insertBefore(html, document.body.firstChild);

watching('div.userbar', function (el)
{
el.insertBefore( createDOM(`
<a class='icon' onclick="openASetting()">
<i class="fa fa-wrench"></i>
</a>
`), 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(`
<a class='icon' onclick="adoor('smiles')">
<i class="fa fa-wrench"></i>
</a>
`), 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(`
<li class='tab-title'>
<a href="#smile-cat-`+ index +`" data-cat="`+ index +`">`+ name +`</a>
</li>
`), el.firstChild);

// Приступаем к созданию контента
var content = document.querySelector('div.smiles-panel div.tabs-content'),
div = createDOM(`<div id='smile-cat-`+ index + `' class='content'></div>`);
watching
({
elem: 'div.smiles-panel ul.tabs',

// Перебираем все смайлы
for (var i = 0; i < list.length; i++)
callback: function ()
{
div.appendChild( createDOM(`
<div class='smile-content'>
<a href="#" data-shortcut=":`+ list[i].name +`:" data-mce-url="`+ list[i].src +`" tabindex="`
+ index +`" title=":`+ list[i].name +`:">
<img src="`+ list[i].src +`" role="presentation">
</a>
</div>
`));
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(`
<li class='tab-title'>
<a href="#smile-cat-`+ index +`" data-cat="`+ index +`">`+ name +`</a>
</li>
`), el.firstChild);

// Приступаем к созданию контента
var content = document.querySelector('div.smiles-panel div.tabs-content'),
div = createDOM(`<div id='smile-cat-`+ index + `' class='content'></div>`);

// Перебираем все смайлы
for (var i = 0; i < list.length; i++)
{
div.appendChild( createDOM(`
<div class='smile-content'>
<a href="#" data-shortcut=":`+ list[i].name +`:" data-mce-url="`+ list[i].src +`" tabindex="`
+ index +`" title=":`+ list[i].name +`:">
<img src="`+ list[i].src +`" role="presentation">
</a>
</div>
`));
}

content.appendChild(div);
}

content.appendChild(div);
});
}

Expand All @@ -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');
Expand Down
2 changes: 1 addition & 1 deletion manifest.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"manifest_version": 2,
"version": "0.0.2",
"version": "0.0.3",

"name": "Dota2Ru",
"description": "Использование сторонних смайлов для форума",
Expand Down