function Изображения(события, виды, анимации, корень) { this.создать = function() { this.умолчание = { пр: [0, 0, 100, 100], угол: 0, }; this.задано = {}; this.элементы = {}; события.подписать(this); }; // Ключи и события. this.обработатьКлюч = function(ключ, путь, значение) { if (путь[0] == "изображения") { var имя = путь[1]; var свойство = путь.slice(2).join("."); this.обновитьЭлемент(имя, свойство, значение); } }; this.обработатьСобытие = function(событие) { let в = "виды/"; let а = "анимации/"; if (событие.startsWith(в)) { let вид = событие.substring(в.length); this.обновитьЭлементыВида(вид); } else if (событие.startsWith(а)) { let анимация = событие.substring(а.length); this.обновитьЭлементыАнимации(анимация); } }; this.обновитьЭлементыАнимации = function(анимация) { for (let имя in this.задано) { let за = this.задано[имя]; let зан = за["анимация"]; if (зан && зан == анимация) { this.обновитьВидАнимацию(имя, за["вид"], за["анимация"]); } } }; this.обновитьЭлементыВида = function(вид) { for (let имя in this.задано) { let за = this.задано[имя]; let заданныйВид = за["вид"]; if (заданныйВид && заданныйВид == вид) { this.обновитьВидАнимацию(имя, за["вид"], за["анимация"]); } } }; // Без вида и анимации. this.обновитьПозициюРазмерЭлемента = function(имя, эл) { let пр = this.пр(имя); эл.style.left = `${пр[0]}px`; эл.style.top = `${пр[1]}px`; эл.style.width = `${пр[2]}px`; эл.style.height = `${пр[3]}px`; }; this.пр = function(имя) { let за = this.задано[имя]; let пр = this.умолчание.пр; return [ за["пр.0"] ? за["пр.0"] : пр[0], за["пр.1"] ? за["пр.1"] : пр[1], за["пр.2"] ? за["пр.2"] : пр[2], за["пр.3"] ? за["пр.3"] : пр[3], ]; }; this.создатьИлиПолучитьЭлемент = function(имя) { var эл = this.элементы[имя]; if (эл) { return эл; } var ум = this.умолчание; эл = document.createElement("div"); эл.id = `изображения-${имя}`; эл.style.position = "absolute"; эл.style.display = "block"; // Свойства по умолчанию. this.обновитьПозициюРазмерЭлемента(имя, эл); эл.style.transform = `rotate(${ум.угол}rad)`; this.элементы[имя] = эл; корень.appendChild(эл); return эл; }; // Вид и анимация. this.обновитьУгол = function(имя) { var за = this.задано[имя]; var ум = this.умолчание; var эл = this.элементы[имя]; var угол = за.угол ? за.угол : ум.угол; var transform = `rotate(${угол}deg) `; let вид = за["вид"]; if (вид) { let виза = виды.задано[вид]; if (виза && виза["transform"]) { transform += виза["transform"]; } } эл.style.transform = transform; }; this.обновитьВидАнимацию = function(имя, вид, анимация) { var эл = this.создатьИлиПолучитьЭлемент(имя); if (вид) { let за = виды.задано[вид]; for (let параметр in за) { эл.style.setProperty(параметр, за[параметр]); } } if (анимация) { анимации.запустить(анимация, эл); } this.обновитьУгол(имя); }; this.обновитьЭлемент = function(имя, свойство, значение) { if (!this.задано[имя]) { this.задано[имя] = {}; } this.задано[имя][свойство] = значение; var за = this.задано[имя]; var эл = this.создатьИлиПолучитьЭлемент(имя); if (свойство.startsWith("пр")) { this.обновитьПозициюРазмерЭлемента(имя, эл); } else if ( (свойство == "угол") || (свойство == "вид") || (свойство == "анимация") ) { this.обновитьВидАнимацию(имя, за["вид"], за["анимация"]); } }; // Конструктор. this.создать(); }