jupyterlab-emrys/lib/apiwidget/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 map widget.
 */
var API_CLASS = 'jp-apiWidget';
/**
 * A widget for maps.
 */
var ApiShipperWidget = (function (_super) {
    __extends(ApiShipperWidget, _super);
    /**
     * Construct a new map widget.
     */
    function ApiShipperWidget(context) {
        var _this = this;
        _super.call(this);
        this._fitted = false;
        this._sized = false;
        this._width = -1;
        this._height = -1;
        this._context = context;
        this.node.tabIndex = -1;
        this.addClass(API_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();
        });
    }
    /**
     * Dispose of the resources used by the widget.
     */
    ApiShipperWidget.prototype.dispose = function () {
        if (this.isDisposed) {
            return;
        }
        this._context = null;
        _super.prototype.dispose.call(this);
    };
    /**
     * Handle `update-request` messages for the widget.
     */
    ApiShipperWidget.prototype.onUpdateRequest = function (msg) {
        this.title.text = this._context.path.split('/').pop();
        if (!this.isAttached) {
            return;
        }
        var content = this._context.model.toString();
        this.renderShipper(content);
    };
    ApiShipperWidget.prototype.renderShipper = function (content) {
        var maindiv = document.createElement('div');
        var content_div = document.createElement('div');
        var ship_form = document.createElement('form');
        var ship_button = document.createElement('input');
        var notebookcontent = document.createElement('input');
        var tags = document.createElement('div');
        var taginput = document.createElement('input');
        var submittedTags = document.createElement('input');
        var nametag = document.createElement('input');
        tags.id = "tags";
        taginput.type = "text";
        taginput.value = "";
        taginput.placeholder = "Add a tag";
        submittedTags.type = "hidden";
        submittedTags.value = "";
        submittedTags.name = "tags";
        submittedTags.id = "emrys-nb-tags";
        nametag.type = "hidden";
        nametag.value = this.title.text;
        nametag.name = "name";
        notebookcontent.type = "hidden";
        notebookcontent.name = "content";
        notebookcontent.value = this._context.model.toString();
        maindiv.className = "container";
        ship_form.action = "http://10.25.52.200:3000/notebooks";
        ship_form.method = "post";
        ship_form.target = "_blank";
        ship_form.id = "emrys-nb-publish-form";
        ship_button.className = "button";
        ship_button.type = "submit";
        ship_button.value = "Ship";
        tags.appendChild(taginput);
        ship_form.appendChild(submittedTags);
        ship_form.appendChild(tags);
        ship_form.appendChild(nametag);
        ship_form.appendChild(notebookcontent);
        ship_form.appendChild(ship_button);
        content_div.appendChild(ship_form);
        maindiv.appendChild(content_div);
        /*
         * This is kind of a hack to avoid having to manually convert the
         * html DOM nodes that were created into a string that can be passed
         * to `innerhtml`
         */
        var tmp = document.createElement("div");
        tmp.appendChild(maindiv);
        this.node.innerHTML = tmp.innerHTML;
        $("#tags input").on({
            focusout: function () {
                var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters
                if (txt) {
                    $("<span/>", { text: txt.toLowerCase(), insertBefore: this });
                    $('#emrys-nb-tags')[0].value = $("#emrys-nb-tags")[0].value + "," + txt;
                }
                this.value = "";
            },
            keyup: function (ev) {
                // if: comma|enter (delimit more keyCodes with | pipe)
                if (/(188|13)/.test(ev.which))
                    $(this).focusout();
            }
        });
        $('#tags').on('click', 'span', function () {
            if (confirm("Remove " + $(this).text() + "?")) {
                $(this).remove();
                var submittedArray = $('#emrys-nb-tags')[0].value.split(',');
                var i = submittedArray.indexOf($(this).text());
                if (i > -1) {
                    submittedArray.splice(i, 1);
                }
                $('#emrys-nb-tags')[0].value = submittedArray.join(',');
            }
        });
    };
    /**
     * A message handler after the widget is attached to the DOM.
     */
    ApiShipperWidget.prototype.onAfterAttach = function () {
        this.update();
    };
    return ApiShipperWidget;
}(phosphor_widget_1.Widget));
exports.ApiShipperWidget = ApiShipperWidget;
/**
 * A widget factory for maps.
 */
var ApiShipperWidgetFactory = (function (_super) {
    __extends(ApiShipperWidgetFactory, _super);
    function ApiShipperWidgetFactory() {
        _super.apply(this, arguments);
    }
    /**
     * Create a new widget given a context.
     */
    ApiShipperWidgetFactory.prototype.createNew = function (context, kernel) {
        var widget = new ApiShipperWidget(context);
        this.widgetCreated.emit(widget);
        return widget;
    };
    return ApiShipperWidgetFactory;
}(docregistry_1.ABCWidgetFactory));
exports.ApiShipperWidgetFactory = ApiShipperWidgetFactory;