☰

CNBS Configurator Library

Configurator library

Verzia zo dňa 10.03.2021. Pozri najnovšiu verziu.

Tento skript by nemal byť nainštalovaný priamo. Je to knižnica pre ďalšie skripty, ktorú by mali používať cez meta príkaz // @require https://update.greasyfork.org/scripts/423022/909390/CNBS%20Configurator%20Library.js 

// ==UserScript==
// @name         CNBS Configurator Library
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  Configurator library
// @author       Justin Shultz
// @grant        none
// ==/UserScript==

class Configurator{
	constructor(){
		this.cache = {};
	}
	
	async _updateImages(e){
		let newImg = await this._combineImages(this._getCurrentSelectionURLs());
		document.getElementById(this.imageID).src = newImg;
	}
	
	init(imageID, selectionClass, baseConfig, imageUrlRoot, imageExtension){
		this.imageID = imageID;
		this.selectionClass = selectionClass;
		this.baseConfig = baseConfig;
		this.imageUrlRoot = imageUrlRoot.endsWith("/") ? imageUrlRoot.substring(0, imageUrlRoot.length - 1) : imageUrlRoot;
		this.imageExtension = imageExtension;

		this.setEventListeners();
	}
	
	setEventListeners(){
		const selects = document.getElementsByClassName(this.selectionClass);
		Array.from(selects).forEach((s) => {
			s.addEventListener('change', this._updateImages.bind(this));
		});
	}

	async _combineImages(images){
		let c = document.createElement("canvas");
		let ctx = c.getContext("2d");
		let baseImg = await this._loadImage(`${this.imageUrlRoot}/${images[0]}`);
		c.width = baseImg.width;
		c.height = baseImg.height;
		
		ctx.drawImage(baseImg,0,0);

		for(let i=1; i < images.length; i++){
			let url = `${this.imageUrlRoot}/${images[i]}`;
			if(await this._urlExistsPromise(url))
				ctx.drawImage(await this._loadImage(url),0,0);
		}
		return c.toDataURL("image/png");
	}
	
	_loadImage(url){
		return new Promise((resolve, reject) => {
			const img = new Image();
			img.crossOrigin="anonymous";
			img.onload = () => resolve(img);
			img.onerror = () => reject(new Error(`loading ${url} failed`));
			img.src = url;
		});
	}

	_getCurrentSelectionURLs(){
		var urls = [];
		let subFolder = this.baseConfig[document.getElementsByName(this.baseConfig.baseImage)[0].value];
		if(subFolder.length > 0 && !subFolder.endsWith('/'))
			subFolder += '/';
		
		urls.push(`${subFolder}${document.getElementsByName(this.baseConfig.baseImage)[0].value}.${this.imageExtension}`);
		
		Array.from(document.getElementsByClassName(this.selectionClass)).forEach(async (e) => {
			var s = this.baseConfig.baseImage == e.name;
			if(!s && e.value){
					urls.push(`${subFolder}${e.value}.${this.imageExtension}`);
			}
		});
		
		return urls;
	}
	
	_urlExistsPromise(url){
		return new Promise((resolve, reject) => this._checkURL(url, (status) => status == null ? reject(status) : resolve(status)));
	}
	
	_checkURL(url, status){
		const xhr = new XMLHttpRequest();

		xhr.onload = () => {
			if (xhr.status == 200) {
				status(true);
			} else {
				status(false);
			}
		};

		xhr.open('HEAD', url);
		xhr.send();
	}
	
}