Image-with-replacement for SugarCube

animg_macro.js

/**
 * Usage:
 *  <<animg source.jpg class imageclass class anotherclass id image42 replacement.jpg>>
 */
Macro.add("animg", {
	handler() {
		if(this.args.length === 0) {
			return this.error("No image source given.");
		}
		var src = this.args[0]
		var classes = [];
		var id = null;
		var replacement = null;
		/* parse arguments - for now just "class" and "id" */
		for(var i = 1; i < this.args.length; ++ i) {
			switch(this.args[i]) {
				case "class":
					if(this.args.length === i + 1) {
						return this.error("No class given after 'class' argument.");
					}
					classes.push(this.args[++ i]);
					break;
				case "id":
					if(id) {
						return this.error("Multiple IDs found.");
					}
					if(this.args.length === i + 1) {
						return this.error("No ID given after 'id' argument.");
					}
					id = this.args[++ i];
					break;
				default:
					if(replacement) {
						return this.error("Multiple replacement URLs found.");
					}
					replacement = this.args[i];
					break;
			}
		}
		var img = document.createElement("img");
		if(id) {
			img.id = id;
		}
		if(classes.length > 0) {
			classes.forEach(function(cls) {
				img.classList.add(cls);
			});
		}
		if(replacement) {
			img.addEventListener("error", function listener() {
				img.src = replacement;
				/* avoid endless loops in case replacement doesn't exist either */
				img.removeEventListener("error", listener);
			});
		}
		img.src = src;
		this.output.appendChild(img);
	}
});