nehan/dist/image-loader.js

Html layout engine for paged-media written in Typescript

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import { Config, } from "./public-api";
export class ImageLoaderContext {
    constructor(totalCount) {
        this.totalItemCount = totalCount;
        this.successCount = 0;
        this.errorCount = 0;
    }
    get progress() {
        return (this.successCount + this.errorCount) / this.totalItemCount;
    }
    get percent() {
        return Math.floor(100 * this.progress);
    }
}
export class ImageLoader {
    constructor(imageElements, context) {
        this.imageElements = imageElements;
        this.context = context;
    }
    load(callbacks) {
        return __awaiter(this, void 0, void 0, function* () {
            try {
                const images = yield Promise.all(this.imageElements.map(element => {
                    const $node = element.$node;
                    if ($node.width && $node.height) {
                        this.context.successCount++;
                        if (callbacks.onProgressImage) {
                            callbacks.onProgressImage(this.context);
                        }
                        return Promise.resolve(element);
                    }
                    const imageAttr = this.getImageAttr(element.tagName);
                    return this.loadImage(element, imageAttr, callbacks);
                }));
                if (callbacks.onCompleteImage) {
                    callbacks.onCompleteImage(this.context);
                }
                return true;
            }
            catch (reason) {
                if (Config.debugImageLoader) {
                    console.error(reason);
                }
                return false;
            }
        });
    }
    getImageAttr(tagName) {
        switch (tagName) {
            case "video": return "poster";
            default: return "src";
        }
    }
    loadImage(element, srcAttr, callbacks) {
        return new Promise((resolve, reject) => {
            const $node = element.$node;
            const image = document.createElement("img");
            const src = $node.getAttribute(srcAttr);
            if (src) {
                image.setAttribute("src", src);
            }
            const dataSrc = $node.getAttribute("data-src");
            if (dataSrc) {
                image.setAttribute("data-src", dataSrc);
            }
            if (!src && !dataSrc) {
                if (Config.debugImageLoader) {
                    console.error("Invalid resource. Both src and data-src are not defined:", element);
                }
                this.context.errorCount++;
                if (callbacks.onProgressImage) {
                    callbacks.onProgressImage(this.context);
                }
                resolve(element);
                return;
            }
            image.onload = (evt) => {
                $node.setAttribute("width", String(image.width));
                $node.setAttribute("height", String(image.height));
                if (Config.debugImageLoader) {
                    console.info("%s is successfully loaded(%dx%d)", image.src, image.width, image.height);
                }
                this.context.successCount++;
                if (callbacks.onProgressImage) {
                    callbacks.onProgressImage(this.context);
                }
                resolve(element);
            };
            image.onerror = (reason) => {
                if (Config.debugImageLoader) {
                    console.error(reason);
                }
                this.context.errorCount++;
                if (callbacks.onProgressImage) {
                    callbacks.onProgressImage(this.context);
                }
                if (!element.getAttribute("alt")) {
                    $node.setAttribute("style", "display:none");
                }
                resolve(element);
            };
        });
    }
}
//# sourceMappingURL=image-loader.js.map