@driftory/viewer - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

dist/Comic.types.ts

@@ -27,2 +27,3 @@ export interface Comic {
   fileName: string;
+  hideUntilFrame: number;
 }
@@ -29,0 +30,0 @@

dist/driftory.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="openseadragon" />
 import { Comic } from './Comic.types';
@@ -10,2 +11,6 @@ export * from './Comic.types';
 }
+interface ImageItem {
+    hideUntilFrame?: number;
+    tiledImage?: OpenSeadragon.TiledImage;
+}
 declare type Frame = any;
@@ -28,2 +33,3 @@ declare type Container = HTMLElement;
     onComicLoad: OnComicLoad;
+    imageItems: Array<ImageItem>;
     frames: Array<Frame>;
@@ -35,7 +41,9 @@ frameIndex: number;
     constructor(args: DriftoryArguments);
-    initialize({ container, prefixUrl }: DriftoryArguments): void;
+    _initialize({ container, prefixUrl }: DriftoryArguments): void;
     openComic(unsafeComic: Comic | string): void;
+    _startComic(): void;
+    _updateImageVisibility(): void;
     goToFrame(index: number): void;
     getFrameIndex(): number;
-    figureFrameIndex(current: boolean): number;
+    _figureFrameIndex(current: boolean): number;
     getFrameCount(): number;
@@ -42,0 +50,0 @@ goToNextFrame(): void;

dist/driftory.js

@@ -22,4 +22,6 @@ "use strict";
 var Driftory = /** @class */ (function () {
+    // ----------
     function Driftory(args) {
         var _this = this;
+        this.imageItems = [];
         this.frames = [];
@@ -36,7 +38,8 @@ this.frameIndex = -1;
             OpenSeadragon = window.OpenSeadragon;
-            _this.initialize(args);
+            _this._initialize(args);
             osdRequest === null || osdRequest === void 0 ? void 0 : osdRequest.resolve();
         });
     }
-    Driftory.prototype.initialize = function (_a) {
+    // ----------
+    Driftory.prototype._initialize = function (_a) {
         var _this = this;
@@ -56,16 +59,2 @@ var container = _a.container, prefixUrl = _a.prefixUrl;
         if (this.viewer) {
-            var frameHandler = function () {
-                var frameIndex = _this.figureFrameIndex(false);
-                if (frameIndex !== -1 && frameIndex !== _this.frameIndex) {
-                    _this.frameIndex = frameIndex;
-                    if (_this.onFrameChange) {
-                        _this.onFrameChange({
-                            frameIndex: frameIndex,
-                            isLastFrame: frameIndex === _this.getFrameCount() - 1
-                        });
-                    }
-                }
-            };
-            this.viewer.addHandler('zoom', frameHandler);
-            this.viewer.addHandler('pan', frameHandler);
             this.viewer.addHandler('canvas-click', function (event) {
@@ -85,3 +74,3 @@ if (!event || !event.quick || !event.position || !_this.viewer) {
                 if (foundIndex === -1) {
-                    var realFrameIndex = _this.figureFrameIndex(true);
+                    var realFrameIndex = _this._figureFrameIndex(true);
                     if (realFrameIndex === -1 && _this.frameIndex !== undefined) {
@@ -145,2 +134,6 @@ _this.goToFrame(_this.frameIndex);
         var _this = this;
+        if (this.frames.length || this.imageItems.length) {
+            console.error('Currently the Driftory viewer is not set up to load a second comic after the first.');
+            return;
+        }
         var comic = (typeof unsafeComic === 'string' ? JSON.parse(unsafeComic) : unsafeComic).comic;
@@ -164,11 +157,18 @@ osdPromise.then(function () {
                     var _a;
-                    var success;
-                    if (i === 0) {
-                        success = function () { return _this.goToFrame(0); };
-                    }
+                    var imageItem = {
+                        hideUntilFrame: item.hideUntilFrame
+                    };
+                    _this.imageItems.push(imageItem);
                     (_a = _this.viewer) === null || _a === void 0 ? void 0 : _a.addTiledImage({
+                        preload: true,
                         x: item.x - item.width / 2,
                         y: item.y - item.height / 2,
                         width: item.width,
-                        success: success,
+                        success: function (event) {
+                            imageItem.tiledImage = event.item;
+                            _this._updateImageVisibility();
+                            if (i === 0) {
+                                _this._startComic();
+                            }
+                        },
                         tileSource: {
@@ -186,8 +186,41 @@ type: 'legacy-image-pyramid',
                 });
-                if (_this.onComicLoad) {
-                    _this.onComicLoad({});
+            }
+        });
+    };
+    // ----------
+    Driftory.prototype._startComic = function () {
+        var _this = this;
+        var frameHandler = function () {
+            var frameIndex = _this._figureFrameIndex(false);
+            if (frameIndex !== -1 && frameIndex !== _this.frameIndex) {
+                _this.frameIndex = frameIndex;
+                _this._updateImageVisibility();
+                if (_this.onFrameChange) {
+                    _this.onFrameChange({
+                        frameIndex: frameIndex,
+                        isLastFrame: frameIndex === _this.getFrameCount() - 1
+                    });
                 }
             }
+        };
+        if (this.viewer) {
+            this.viewer.addHandler('zoom', frameHandler);
+            this.viewer.addHandler('pan', frameHandler);
+        }
+        this.goToFrame(0);
+        if (this.onComicLoad) {
+            this.onComicLoad({});
+        }
+    };
+    // ----------
+    Driftory.prototype._updateImageVisibility = function () {
+        var _this = this;
+        this.imageItems.forEach(function (imageItem) {
+            var _a;
+            if (imageItem.hideUntilFrame !== undefined) {
+                (_a = imageItem.tiledImage) === null || _a === void 0 ? void 0 : _a.setOpacity(_this.frameIndex < imageItem.hideUntilFrame ? 0 : 1);
+            }
         });
     };
+    // ----------
     Driftory.prototype.goToFrame = function (index) {
@@ -208,6 +241,8 @@ var _a;
     };
+    // ----------
     Driftory.prototype.getFrameIndex = function () {
         return this.frameIndex;
     };
-    Driftory.prototype.figureFrameIndex = function (current) {
+    // ----------
+    Driftory.prototype._figureFrameIndex = function (current) {
         var bestIndex = -1;
@@ -231,5 +266,7 @@ var bestDistance = Infinity;
     };
+    // ----------
     Driftory.prototype.getFrameCount = function () {
         return this.frames.length;
     };
+    // ----------
     Driftory.prototype.goToNextFrame = function () {
@@ -241,2 +278,3 @@ var index = this.getFrameIndex();
     };
+    // ----------
     Driftory.prototype.goToPreviousFrame = function () {
@@ -243,0 +281,0 @@ var index = this.getFrameIndex();

package.json

 {
   "name": "@driftory/viewer",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "A viewer for comics created with https://www.driftory.com/",
@@ -48,2 +48,3 @@ "main": "./dist/driftory.js",
     "del": "^5.1.0",
+    "eslint": "^7.11.0",
     "gulp": "^4.0.2",
@@ -50,0 +51,0 @@ "gulp-sourcemaps": "^2.6.5",

No alert changes

Improved metrics

Total package byte prevSize

59744

increased by2.68%

Lines of code

1687

increased by2.87%

Worsened metrics

Dev dependency count

28

increased by3.7%

No dependency changes