@@ -10,5 +10,7 @@ x /пуск|run.js | |||||
/пуск|run.череда | /пуск|run.череда | ||||
x /раскладки|layouts.js | x /раскладки|layouts.js | ||||
/раскладки|layouts.череда | /раскладки|layouts.череда | ||||
x /темы|themes.js | |||||
/темы|themes.череда | |||||
x /управление|controls.js | x /управление|controls.js | ||||
/управление|controls.череда | /управление|controls.череда |
@@ -7,5 +7,44 @@ | |||||
{ | { | ||||
мир.уведомить("надо создать окно управления"); | мир.уведомить("надо создать окно управления"); | ||||
мир.уведомить("надо создать окно раскладок"); | мир.уведомить("надо создать окно раскладок"); | ||||
мир.уведомить("надо создать окно тем"); | |||||
мир.уведомить("надо создать окно окончания"); | мир.уведомить("надо создать окно окончания"); | ||||
}; | |||||
// // // // | |||||
ЗадатьОбщиеСтили = мир => | |||||
{ | |||||
var вид = document.createElement("style"); | |||||
document.head.appendChild(вид); | |||||
вид.innerHTML = ` | |||||
.окно-с-отступами | |||||
{ | |||||
position: fixed; | |||||
left: 1em; | |||||
top: 1em; | |||||
bottom: 1em; | |||||
right: 1em; | |||||
} | |||||
.прокрутка | |||||
{ | |||||
overflow: auto; | |||||
height: 100%; | |||||
} | |||||
.ширина-по-содержимому | |||||
{ | |||||
display: inline-block; | |||||
} | |||||
.выбранный-элемент-таблицы | |||||
{ | |||||
background: #eeeeee; | |||||
} | |||||
`; | |||||
}; | }; |
@@ -1,2 +1,3 @@ | |||||
загрузили ресурсы сцены | загрузили ресурсы сцены | ||||
задать общие стили | |||||
создать окна маджонга | создать окна маджонга |
@@ -5,18 +5,16 @@ | |||||
ОтобразитьВыбраннуюРаскладкуВТаблице = мир => | ОтобразитьВыбраннуюРаскладкуВТаблице = мир => | ||||
{ | { | ||||
console.debug("ОтобразитьВыбраннуюРаскладкуВТаблице"); | |||||
var таблица = мир.окна.раскладки.таблица; | var таблица = мир.окна.раскладки.таблица; | ||||
console.debug("ОтобразитьВыбраннуюРаскладкуВТаблице", таблица); | |||||
// Очистить выбор. | // Очистить выбор. | ||||
for (var номер in таблица.строки) | for (var номер in таблица.строки) | ||||
{ | { | ||||
var элемент = таблица.элемент(номер); | var элемент = таблица.элемент(номер); | ||||
элемент.removeClass("выбранная-раскладка"); | |||||
элемент.removeClass("выбранный-элемент-таблицы"); | |||||
} | } | ||||
// Задать выбор. | // Задать выбор. | ||||
var элемент = таблица.элемент(мир.номерВыбраннойРаскладки); | var элемент = таблица.элемент(мир.номерВыбраннойРаскладки); | ||||
элемент.addClass("выбранная-раскладка"); | |||||
элемент.addClass("выбранный-элемент-таблицы"); | |||||
}; | }; | ||||
@@ -42,6 +40,7 @@ | |||||
} | } | ||||
} | } | ||||
// // // // | // // // // | ||||
@@ -62,7 +61,6 @@ | |||||
ЗадатьСписокРаскладок = мир => | ЗадатьСписокРаскладок = мир => | ||||
{ | { | ||||
console.debug("ЗадатьСписокРаскладок"); | |||||
var раскладки = Object.keys(мир.реестрРаскладок).sort(); | var раскладки = Object.keys(мир.реестрРаскладок).sort(); | ||||
var список = []; | var список = []; | ||||
for (var номер in раскладки) | for (var номер in раскладки) | ||||
@@ -104,15 +102,6 @@ | |||||
document.head.appendChild(вид); | document.head.appendChild(вид); | ||||
вид.innerHTML = ` | вид.innerHTML = ` | ||||
#${мир.окна.раскладки.указатель} | |||||
{ | |||||
position: fixed; | |||||
left: 1em; | |||||
top: 1em; | |||||
bottom: 1em; | |||||
right: 1em; | |||||
} | |||||
#скрыть-раскладки | #скрыть-раскладки | ||||
{ | { | ||||
position: fixed; | position: fixed; | ||||
@@ -120,22 +109,6 @@ | |||||
bottom: 0.5em; | bottom: 0.5em; | ||||
} | } | ||||
.прокрутка | |||||
{ | |||||
overflow: auto; | |||||
height: 100%; | |||||
} | |||||
.ширина-по-содержимому | |||||
{ | |||||
display: inline-block; | |||||
} | |||||
.выбранная-раскладка | |||||
{ | |||||
background: #eeeeee; | |||||
} | |||||
`; | `; | ||||
}; | }; | ||||
@@ -148,6 +121,7 @@ | |||||
var окно = document.createElement("div"); | var окно = document.createElement("div"); | ||||
окно.id = "окно-раскладки"; | окно.id = "окно-раскладки"; | ||||
окно.style.display = "none"; | окно.style.display = "none"; | ||||
окно.classList.add("окно-с-отступами"); | |||||
document.body.appendChild(окно); | document.body.appendChild(окно); | ||||
мир.окна.раскладки = { | мир.окна.раскладки = { | ||||
@@ -0,0 +1,152 @@ | |||||
// // // // | |||||
ОтобразитьВыбраннуюТемуВТаблице = мир => | |||||
{ | |||||
var таблица = мир.окна.темы.таблица; | |||||
// Очистить выбор. | |||||
for (var номер in таблица.строки) | |||||
{ | |||||
var элемент = таблица.элемент(номер); | |||||
элемент.removeClass("выбранный-элемент-таблицы"); | |||||
} | |||||
// Задать выбор. | |||||
var элемент = таблица.элемент(мир.номерВыбраннойТемы); | |||||
элемент.addClass("выбранный-элемент-таблицы"); | |||||
}; | |||||
// // // // | |||||
ЗадатьНомерВыбраннойТемыЕслиНеЗадан = мир => | |||||
{ | |||||
if (мир.номерВыбраннойТемы) | |||||
{ | |||||
return; | |||||
} | |||||
// Нужно для случая отображения выбранной темы сразу после пуска. | |||||
const строки = мир.окна.темы.таблица.строки; | |||||
for (var номер in строки) | |||||
{ | |||||
var название = строки[номер][1]; | |||||
if (название == мир.выбраннаяТема) | |||||
{ | |||||
мир.номерВыбраннойТемы = номер; | |||||
return; | |||||
} | |||||
} | |||||
} | |||||
// // // // | |||||
ОтслеживатьВыборТемы = мир => | |||||
{ | |||||
const строки = мир.окна.темы.таблица.строки; | |||||
мир.окна.темы.таблица.выбор = (номер) => | |||||
{ | |||||
мир.выбраннаяТема = строки[номер][1]; | |||||
мир.номерВыбраннойТемы = номер; | |||||
мир.уведомить("выбрали тему"); | |||||
}; | |||||
}; | |||||
// // // // | |||||
ЗадатьСписокТемФишек = мир => | |||||
{ | |||||
var темы = Object.keys(мир.реестрТемФишек).sort(); | |||||
var список = []; | |||||
for (var номер in темы) | |||||
{ | |||||
var число = Number(номер) + 1; | |||||
var название = темы[номер]; | |||||
список.push([число, название]); | |||||
} | |||||
мир.окна.темы.таблица.задатьЗаголовки(["№", "Название ⚬ 标题 ⚬ Name"]); | |||||
мир.окна.темы.таблица.задатьСтроки(список); | |||||
}; | |||||
// // // // | |||||
ПлавноСкрытьОкноТем = мир => | |||||
{ | |||||
мир.окна.темы.плавно.скрыть(); | |||||
}; | |||||
// // // // | |||||
ПлавноПоказатьОкноТем = мир => | |||||
{ | |||||
мир.окна.темы.плавно.отобразить(); | |||||
}; | |||||
// // // // | |||||
ЗадатьВидОкнаТем = мир => | |||||
{ | |||||
var вид = document.createElement("style"); | |||||
document.head.appendChild(вид); | |||||
вид.innerHTML = ` | |||||
#скрыть-темы | |||||
{ | |||||
position: fixed; | |||||
right: 0.5em; | |||||
top: 0.5em; | |||||
} | |||||
`; | |||||
}; | |||||
// // // // | |||||
СоздатьОкноТем = мир => | |||||
{ | |||||
var окно = document.createElement("div"); | |||||
окно.id = "окно-темы"; | |||||
окно.style.display = "none"; | |||||
окно.classList.add("окно-с-отступами"); | |||||
document.body.appendChild(окно); | |||||
мир.окна.темы = { | |||||
"указатель": окно.id, | |||||
"элемент": окно, | |||||
"плавно": new ПлавноОтобразитьСкрыть(окно), | |||||
"список": `${окно.id}-список`, | |||||
}; | |||||
окно.innerHTML = ` | |||||
<center> | |||||
<span class="uk-text-large">Темы</span> | |||||
⚬ <span class="uk-text-large uk-text-bold">主题</span> ⚬ | |||||
<span class="uk-text-large">Themes</span> | |||||
</center> | |||||
<div class="прокрутка ширина-по-содержимому"> | |||||
<table id="${мир.окна.темы.список}" class="uk-table uk-table-divider"></table> | |||||
</div> | |||||
<a id="скрыть-темы" uk-icon="icon: close; ratio: 2"></a> | |||||
`; | |||||
мир.окна.темы.таблица = new Таблица(мир.окна.темы.список); | |||||
$("#скрыть-темы").click(function() { | |||||
мир.уведомить("кнопка скрыть темы"); | |||||
}); | |||||
}; |
@@ -0,0 +1,14 @@ | |||||
надо создать окно тем | |||||
создать окно тем | |||||
задать вид окна тем | |||||
задать список тем фишек | |||||
отслеживать выбор темы | |||||
кнопка показать темы | |||||
плавно показать подложку | |||||
плавно показать окно тем | |||||
кнопка скрыть темы | |||||
плавно скрыть подложку | |||||
плавно скрыть окно тем | |||||
выбрали тему | |||||
задать номер выбранной темы если не задан | |||||
отобразить выбранную тему в таблице |
@@ -46,6 +46,30 @@ pointer-events: none; | |||||
}; | }; | ||||
}; | }; | ||||
// // // // | |||||
СоздатьКнопкуТем = мир => | |||||
{ | |||||
var кнопка = document.createElement("div"); | |||||
кнопка.innerHTML = ` | |||||
<a id="показать-темы" uk-icon="icon: image; ratio: 2"></a> | |||||
`; | |||||
кнопка.style = ` | |||||
position: fixed; | |||||
right: 0; | |||||
top: 0; | |||||
margin: 0.5em; | |||||
`; | |||||
мир.окна.управление.элемент.appendChild(кнопка); | |||||
$(`#показать-темы`).click(function() { | |||||
мир.уведомить("кнопка показать темы"); | |||||
}); | |||||
}; | |||||
// // // // | // // // // | ||||
@@ -2,6 +2,7 @@ | |||||
создать окно управления | создать окно управления | ||||
создать элементы управления масштабом | создать элементы управления масштабом | ||||
создать кнопку раскладки | создать кнопку раскладки | ||||
создать кнопку тем | |||||
создать подложку | создать подложку | ||||
кнопка увеличения масштаба | кнопка увеличения масштаба | ||||
@@ -15,5 +16,12 @@ | |||||
плавно скрыть окно управления | плавно скрыть окно управления | ||||
отключить отслеживание нажатий | отключить отслеживание нажатий | ||||
кнопка скрыть раскладки | кнопка скрыть раскладки | ||||
плавно показать окно управления | |||||
включить отслеживание нажатий | |||||
кнопка показать темы | |||||
плавно скрыть окно управления | |||||
отключить отслеживание нажатий | |||||
кнопка скрыть темы | |||||
плавно показать окно управления | плавно показать окно управления | ||||
включить отслеживание нажатий | включить отслеживание нажатий |