@jupyter-widgets/base/lib/widget_layout.js

Jupyter interactive widgets

// Copyright (c) Jupyter Development Team.
// Distributed under the terms of the Modified BSD License.
import { assign } from './utils';
import { WidgetModel, WidgetView } from './widget';
/**
 * css properties exposed by the layout widget with their default values.
 */
const css_properties = {
    align_content: null,
    align_items: null,
    align_self: null,
    border_top: null,
    border_right: null,
    border_bottom: null,
    border_left: null,
    bottom: null,
    display: null,
    flex: null,
    flex_flow: null,
    height: null,
    justify_content: null,
    justify_items: null,
    left: null,
    margin: null,
    max_height: null,
    max_width: null,
    min_height: null,
    min_width: null,
    overflow: null,
    order: null,
    padding: null,
    right: null,
    top: null,
    visibility: null,
    width: null,
    // image-specific
    object_fit: null,
    object_position: null,
    // container
    grid_auto_columns: null,
    grid_auto_flow: null,
    grid_auto_rows: null,
    grid_gap: null,
    grid_template_rows: null,
    grid_template_columns: null,
    grid_template_areas: null,
    // items
    grid_row: null,
    grid_column: null,
    grid_area: null,
};
export class LayoutModel extends WidgetModel {
    defaults() {
        return assign(super.defaults(), {
            _model_name: 'LayoutModel',
            _view_name: 'LayoutView',
        }, css_properties);
    }
}
export class LayoutView extends WidgetView {
    /**
     * Public constructor
     */
    initialize(parameters) {
        this._traitNames = [];
        super.initialize(parameters);
        // Register the traits that live on the Python side
        for (const key of Object.keys(css_properties)) {
            this.registerTrait(key);
        }
    }
    /**
     * Register a CSS trait that is known by the model
     * @param trait
     */
    registerTrait(trait) {
        this._traitNames.push(trait);
        // Listen to changes, and set the value on change.
        this.listenTo(this.model, 'change:' + trait, (model, value) => {
            this.handleChange(trait, value);
        });
        // Set the initial value on display.
        this.handleChange(trait, this.model.get(trait));
    }
    /**
     * Get the the name of the css property from the trait name
     * @param  model attribute name
     * @return css property name
     */
    css_name(trait) {
        return trait.replace(/_/g, '-');
    }
    /**
     * Handles when a trait value changes
     */
    handleChange(trait, value) {
        // should be synchronous so that we can measure later.
        const parent = this.options.parent;
        if (parent) {
            if (value === null) {
                parent.el.style.removeProperty(this.css_name(trait));
            }
            else {
                parent.el.style.setProperty(this.css_name(trait), value);
            }
        }
        else {
            console.warn('Style not applied because a parent view does not exist');
        }
    }
    /**
     * Remove the styling from the parent view.
     */
    unlayout() {
        const parent = this.options.parent;
        this._traitNames.forEach((trait) => {
            if (parent) {
                parent.el.style.removeProperty(this.css_name(trait));
            }
            else {
                console.warn('Style not removed because a parent view does not exist');
            }
        }, this);
    }
}
//# sourceMappingURL=widget_layout.js.map