@@ -10,5 +10,7 @@ x /пуск|run.js | |||
/пуск|run.череда | |||
x /раскладки|layouts.js | |||
/раскладки|layouts.череда | |||
x /темы|themes.js | |||
/темы|themes.череда | |||
x /управление|controls.js | |||
/управление|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 таблица = мир.окна.раскладки.таблица; | |||
console.debug("ОтобразитьВыбраннуюРаскладкуВТаблице", таблица); | |||
// Очистить выбор. | |||
for (var номер in таблица.строки) | |||
{ | |||
var элемент = таблица.элемент(номер); | |||
элемент.removeClass("выбранная-раскладка"); | |||
элемент.removeClass("выбранный-элемент-таблицы"); | |||
} | |||
// Задать выбор. | |||
var элемент = таблица.элемент(мир.номерВыбраннойРаскладки); | |||
элемент.addClass("выбранная-раскладка"); | |||
элемент.addClass("выбранный-элемент-таблицы"); | |||
}; | |||
@@ -42,6 +40,7 @@ | |||
} | |||
} | |||
// // // // | |||
@@ -62,7 +61,6 @@ | |||
ЗадатьСписокРаскладок = мир => | |||
{ | |||
console.debug("ЗадатьСписокРаскладок"); | |||
var раскладки = Object.keys(мир.реестрРаскладок).sort(); | |||
var список = []; | |||
for (var номер in раскладки) | |||
@@ -104,15 +102,6 @@ | |||
document.head.appendChild(вид); | |||
вид.innerHTML = ` | |||
#${мир.окна.раскладки.указатель} | |||
{ | |||
position: fixed; | |||
left: 1em; | |||
top: 1em; | |||
bottom: 1em; | |||
right: 1em; | |||
} | |||
#скрыть-раскладки | |||
{ | |||
position: fixed; | |||
@@ -120,22 +109,6 @@ | |||
bottom: 0.5em; | |||
} | |||
.прокрутка | |||
{ | |||
overflow: auto; | |||
height: 100%; | |||
} | |||
.ширина-по-содержимому | |||
{ | |||
display: inline-block; | |||
} | |||
.выбранная-раскладка | |||
{ | |||
background: #eeeeee; | |||
} | |||
`; | |||
}; | |||
@@ -148,6 +121,7 @@ | |||
var окно = document.createElement("div"); | |||
окно.id = "окно-раскладки"; | |||
окно.style.display = "none"; | |||
окно.classList.add("окно-с-отступами"); | |||
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 @@ | |||
плавно скрыть окно управления | |||
отключить отслеживание нажатий | |||
кнопка скрыть раскладки | |||
плавно показать окно управления | |||
включить отслеживание нажатий | |||
кнопка показать темы | |||
плавно скрыть окно управления | |||
отключить отслеживание нажатий | |||
кнопка скрыть темы | |||
плавно показать окно управления | |||
включить отслеживание нажатий |