ImageReadr/Source/ImageReadr.js

/// <reference path="ImageReadr.d.ts" />
var ImageReadr;
(function (_ImageReadr) {
    "use strict";
    var ImageReadr = (function () {
        /**
         *
         */
        function ImageReadr(settings) {
            this.allowedFiles = settings.allowedFiles;
            this.sectionSelector = settings.sectionSelector;
            this.inputSelector = settings.inputSelector;
            this.outputSelector = settings.outputSelector;
            this.paletteDefault = settings.paletteDefault;
            this.palettes = settings.palettes;
            this.palette = settings.paletteDefault;
            this.initializePalettes();
            this.initializeInput(this.inputSelector);
        }
        /* Internal resets
        */
        /**
         *
         */
        ImageReadr.prototype.initializePalettes = function () {
            var section = document.querySelector(this.sectionSelector), name, element, chosen;
            section.appendChild(this.initializePaletteUploader());
            for (name in this.palettes) {
                if (!this.palettes.hasOwnProperty(name)) {
                    continue;
                }
                element = this.initializePalette(name, this.palettes[name]);
                section.appendChild(element);
                if (name === this.paletteDefault) {
                    chosen = element;
                }
            }
            chosen.click();
        };
        /**
         *
         */
        ImageReadr.prototype.initializePalette = function (name, palette) {
            var surround = document.createElement("div"), label = document.createElement("h4"), container = document.createElement("div"), color, boxOut, boxIn, i;
            surround.className = "palette";
            label.className = "palette-label";
            container.className = "palette-container";
            surround.onclick = this.choosePalette.bind(this, surround, name, palette);
            label.textContent = "Palette: " + name;
            for (i = 0; i < palette.length; i += 1) {
                color = palette[i];
                boxOut = document.createElement("div");
                boxOut.className = "palette-box";
                boxIn = document.createElement("div");
                boxIn.className = "palette-box-in";
                boxIn.style.background = "rgba(" + color.join(",") + ")";
                boxOut.appendChild(boxIn);
                container.appendChild(boxOut);
            }
            surround.appendChild(label);
            surround.appendChild(container);
            return surround;
        };
        /**
         *
         */
        ImageReadr.prototype.initializePaletteUploader = function () {
            var surround = document.createElement("div"), label = document.createElement("h4");
            surround.className = "palette palette-uploader";
            label.className = "palette-label";
            label.textContent = "Drag or upload an image here to generate a palette.";
            this.initializeClickInput(surround);
            this.initializeDragInput(surround);
            surround.children[0].workerCallback = this.workerPaletteUploaderStart.bind(this);
            surround.appendChild(label);
            return surround;
        };
        /**
         *
         */
        ImageReadr.prototype.choosePalette = function (element, name, palette, event) {
            var elements = element.parentElement.children, i;
            for (i = 0; i < elements.length; i += 1) {
                elements[i].className = "palette";
            }
            element.className = "palette palette-selected";
            this.PixelRender = new PixelRendr.PixelRendr({
                "paletteDefault": palette
            });
            this.palette = name;
        };
        /* Input
        */
        /**
         *
         */
        ImageReadr.prototype.initializeInput = function (selector) {
            var input = document.querySelector(selector);
            this.initializeClickInput(input);
            this.initializeDragInput(input);
        };
        /**
         *
         */
        ImageReadr.prototype.initializeClickInput = function (input) {
            var dummy = document.createElement("input");
            dummy.type = "file";
            dummy.multiple = true;
            dummy.onchange = this.handleFileDrop.bind(this, dummy);
            input.addEventListener("click", function () {
                dummy.click();
            });
            input.appendChild(dummy);
        };
        /**
         *
         */
        ImageReadr.prototype.initializeDragInput = function (input) {
            input.ondragenter = this.handleFileDragEnter.bind(this, input);
            input.ondragover = this.handleFileDragOver.bind(this, input);
            input.ondragleave = input.ondragend = this.handleFileDragLeave.bind(this, input);
            input.ondrop = this.handleFileDrop.bind(this, input);
        };
        /**
         *
         */
        ImageReadr.prototype.handleFileDragEnter = function (input, event) {
            if (event.dataTransfer) {
                event.dataTransfer.dropEffect = "copy";
            }
            input.className += " hovering";
        };
        /**
         *
         */
        ImageReadr.prototype.handleFileDragOver = function (input, event) {
            event.preventDefault();
            return false;
        };
        /**
         *
         */
        ImageReadr.prototype.handleFileDragLeave = function (input, event) {
            if (event.dataTransfer) {
                event.dataTransfer.dropEffect = "none";
            }
            input.className = input.className.replace(" hovering", "");
        };
        /**
         *
         *
         * @remarks input.files is when the input[type=file] is the source, while
         *          event.dataTransfer.files is for drag-and-drop.
         */
        ImageReadr.prototype.handleFileDrop = function (input, event) {
            var files = input.files || event.dataTransfer.files, output = document.querySelector(this.outputSelector), elements = [], file, tag, element, i;
            this.handleFileDragLeave(input, event);
            event.preventDefault();
            event.stopPropagation();
            for (i = 0; i < files.length; i += 1) {
                file = files[i];
                tag = file.type.split("/")[1];
                if (!this.allowedFiles[tag]) {
                    element = document.createElement("div");
                    element.className = "output output-failed";
                    element.textContent = "'" + file.name + "' is either a folder or has a non-image type...";
                    elements.push(element);
                    continue;
                }
                elements.push(this.createWorkerElement(files[i], event.target));
            }
            for (i = 0; i < elements.length; i += 1) {
                output.insertBefore(elements[i], output.firstElementChild);
            }
        };
        /**
         *
         */
        ImageReadr.prototype.createWorkerElement = function (file, target) {
            var element = document.createElement("div"), reader = new FileReader();
            element.workerCallback = target.workerCallback;
            element.className = "output output-uploading";
            element.setAttribute("palette", this.palette);
            element.innerText = "Uploading '" + file.name + "'...";
            reader.onprogress = this.workerUpdateProgress.bind(this, file, element);
            reader.onloadend = this.workerTryStartWorking.bind(this, file, element);
            reader.readAsDataURL(file);
            return element;
        };
        /**
         *
         */
        ImageReadr.prototype.workerUpdateProgress = function (file, element, event) {
            if (!event.lengthComputable) {
                return;
            }
            var percent = Math.min(Math.round((event.loaded / event.total) * 100), 100);
            element.innerText = "Uploading '" + file.name + "' (" + percent + "%)...";
        };
        /**
         *
         *
         *
         */
        ImageReadr.prototype.workerTryStartWorking = function (file, element, event) {
            var result = event.currentTarget.result;
            if (element.workerCallback) {
                element.workerCallback(result, file, element, event);
            }
            else {
                this.workerTryStartWorkingDefault(result, file, element, event);
            }
        };
        /**
         *
         */
        ImageReadr.prototype.workerTryStartWorkingDefault = function (result, file, element, event) {
            if (result.length > 100000) {
                this.workerCannotStartWorking(result, file, element, event);
            }
            else {
                this.workerStartWorking(result, file, element, event);
            }
        };
        /**
         *
         */
        ImageReadr.prototype.workerCannotStartWorking = function (result, file, element, event) {
            element.innerText = "'" + file.name + "' is too big! Use a smaller file.";
            element.className = "output output-failed";
        };
        /**
         *
         */
        ImageReadr.prototype.workerStartWorking = function (result, file, element, event) {
            var displayBase64 = document.createElement("input");
            element.className = "output output-working";
            element.innerText = "Working on " + file.name + "...";
            displayBase64.spellcheck = false;
            displayBase64.className = "selectable";
            displayBase64.type = "text";
            displayBase64.setAttribute("value", result);
            element.appendChild(document.createElement("br"));
            element.appendChild(displayBase64);
            this.parseBase64Image(file, result, this.workerFinishRender.bind(this, file, element));
        };
        /**
         *
         */
        ImageReadr.prototype.parseBase64Image = function (file, src, callback) {
            var image = document.createElement("img");
            image.onload = this.PixelRender.encode.bind(this.PixelRender, image, callback);
            image.src = src;
        };
        /**
         *
         */
        ImageReadr.prototype.workerFinishRender = function (file, element, result, image) {
            var displayResult = document.createElement("input");
            displayResult.spellcheck = false;
            displayResult.className = "selectable";
            displayResult.type = "text";
            displayResult.setAttribute("value", result);
            element.firstChild.textContent = "Finished '" + file.name + "' ('" + element.getAttribute("palette") + "' palette).";
            element.className = "output output-complete";
            element.style.backgroundImage = "url('" + image.src + "')";
            element.appendChild(displayResult);
        };
        /**
         *
         */
        ImageReadr.prototype.workerPaletteUploaderStart = function (result, file, element, event) {
            var image = document.createElement("img");
            image.onload = this.workerPaletteCollect.bind(this, image, file, element, result);
            image.src = result;
            element.className = "output output-working";
            element.innerText = "Working on " + file.name + "...";
        };
        /**
         *
         */
        ImageReadr.prototype.workerPaletteCollect = function (image, file, element, src, event) {
            var canvas = document.createElement("canvas"), context = canvas.getContext("2d"), data;
            canvas.width = image.width;
            canvas.height = image.height;
            context.drawImage(image, 0, 0);
            data = context.getImageData(0, 0, canvas.width, canvas.height).data;
            this.workerPaletteFinish(this.PixelRender.generatePaletteFromRawData(data, true, true), file, element, src);
        };
        /**
         *
         */
        ImageReadr.prototype.workerPaletteFinish = function (colors, file, element, src) {
            var chooser = this.initializePalette(file.name, colors), displayResult = document.createElement("input");
            chooser.style.backgroundImage = "url('" + src + "')";
            displayResult.spellcheck = false;
            displayResult.className = "selectable";
            displayResult.type = "text";
            displayResult.setAttribute("value", "[ [" + colors.join("], [") + "] ]");
            if (colors.length > 999) {
                element.className = "output output-failed";
                element.innerText = "Too many colors (>999) in " + file.name + " palette.";
            }
            element.className = "output output-complete";
            element.innerText = "Created " + file.name + " palette (" + colors.length + " colors).";
            document.querySelector("#palettes").appendChild(chooser);
            element.appendChild(displayResult);
            chooser.click();
        };
        return ImageReadr;
    })();
    _ImageReadr.ImageReadr = ImageReadr;
})(ImageReadr || (ImageReadr = {}));