jupyterlab-emrys/lib/imagewidget/widget.js

A computational environment for Jupyter. Powered by Emrys

// Copyright (c) Jupyter Development Team.
// Distributed under the terms of the Modified BSD License.
"use strict";
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var phosphor_widget_1 = require('phosphor-widget');
var docregistry_1 = require('../docregistry');
/**
 * The class name added to a imagewidget.
 */
var IMAGE_CLASS = 'jp-ImageWidget';
/**
 * A widget for images.
 */
var ImageWidget = (function (_super) {
    __extends(ImageWidget, _super);
    /**
     * Construct a new image widget.
     */
    function ImageWidget(context) {
        var _this = this;
        _super.call(this);
        this._scale = 1;
        this._context = context;
        this.node.tabIndex = -1;
        this.addClass(IMAGE_CLASS);
        if (context.model.toString()) {
            this.update();
        }
        context.pathChanged.connect(function () {
            _this.update();
        });
        context.model.contentChanged.connect(function () {
            _this.update();
        });
        context.contentsModelChanged.connect(function () {
            _this.update();
        });
    }
    /**
     * Create the node for the image widget.
     */
    ImageWidget.createNode = function () {
        var node = document.createElement('div');
        var innerNode = document.createElement('div');
        var image = document.createElement('img');
        node.appendChild(innerNode);
        innerNode.appendChild(image);
        return node;
    };
    Object.defineProperty(ImageWidget.prototype, "scale", {
        /**
         * The scale factor for the image.
         */
        get: function () {
            return this._scale;
        },
        set: function (value) {
            if (value === this._scale) {
                return;
            }
            this._scale = value;
            var scaleNode = this.node.querySelector('div');
            var transform;
            var percentage = ((value - 1) / 2) * 100 / value;
            if (value > 1) {
                transform = "scale(" + value + ") translate(" + percentage + "%, " + percentage + "%)";
            }
            else {
                transform = "scale(" + value + ") translateY(" + percentage + "%)";
            }
            scaleNode.style.transform = transform;
            this.update();
        },
        enumerable: true,
        configurable: true
    });
    /**
     * Dispose of the resources used by the widget.
     */
    ImageWidget.prototype.dispose = function () {
        if (this.isDisposed) {
            return;
        }
        this._context = null;
        _super.prototype.dispose.call(this);
    };
    /**
     * Handle `update-request` messages for the widget.
     */
    ImageWidget.prototype.onUpdateRequest = function (msg) {
        this.title.text = this._context.path.split('/').pop();
        var cm = this._context.contentsModel;
        if (cm === null) {
            return;
        }
        var content = this._context.model.toString();
        var src = "data:" + cm.mimetype + ";" + cm.format + "," + content;
        this.node.querySelector('img').setAttribute('src', src);
    };
    return ImageWidget;
}(phosphor_widget_1.Widget));
exports.ImageWidget = ImageWidget;
/**
 * A widget factory for images.
 */
var ImageWidgetFactory = (function (_super) {
    __extends(ImageWidgetFactory, _super);
    function ImageWidgetFactory() {
        _super.apply(this, arguments);
    }
    /**
     * Create a new widget given a context.
     */
    ImageWidgetFactory.prototype.createNew = function (context, kernel) {
        var widget = new ImageWidget(context);
        this.widgetCreated.emit(widget);
        return widget;
    };
    return ImageWidgetFactory;
}(docregistry_1.ABCWidgetFactory));
exports.ImageWidgetFactory = ImageWidgetFactory;