nehan/dist/display.js

Html layout engine for paged-media written in Typescript

import { Utils, BasicStyle, CssCascade, LogicalFloat, Position, } from "./public-api";
export var DisplayOutside;
(function (DisplayOutside) {
    DisplayOutside["BLOCK"] = "block";
    DisplayOutside["INLINE"] = "inline";
    DisplayOutside["RUN_IN"] = "run-in";
})(DisplayOutside || (DisplayOutside = {}));
export var DisplayInside;
(function (DisplayInside) {
    DisplayInside["FLOW"] = "flow";
    DisplayInside["FLOW_ROOT"] = "flow-root";
    DisplayInside["TABLE"] = "table";
    DisplayInside["FLEX"] = "flex";
    DisplayInside["GRID"] = "grid";
    DisplayInside["RUBY"] = "ruby";
})(DisplayInside || (DisplayInside = {}));
export var DisplayListItem;
(function (DisplayListItem) {
    DisplayListItem["LIST_ITEM"] = "list-item";
})(DisplayListItem || (DisplayListItem = {}));
export var DisplayInternal;
(function (DisplayInternal) {
    DisplayInternal["TABLE_ROW_GROUP"] = "table-row-group";
    DisplayInternal["TABLE_HEADER_GROUP"] = "table-header-group";
    DisplayInternal["TABLE_FOOTER_GROUP"] = "table-footer-group";
    DisplayInternal["TABLE_ROW"] = "table-row";
    DisplayInternal["TABLE_CELL"] = "table-cell";
    DisplayInternal["TABLE_COLUMN_GROUP"] = "table-column-group";
    DisplayInternal["TABLE_COLUMN"] = "table-column";
    DisplayInternal["TABLE_CAPTION"] = "table-caption";
    DisplayInternal["RUBY_BASE"] = "ruby-base";
    DisplayInternal["RUBY_TEXT"] = "ruby-text";
    DisplayInternal["RUBY_BASE_CONTAINER"] = "ruby-base-container";
    DisplayInternal["RUBY_TEXT_CONTAINER"] = "ruby-text-container";
})(DisplayInternal || (DisplayInternal = {}));
export var DisplayBox;
(function (DisplayBox) {
    DisplayBox["NONE"] = "none";
    DisplayBox["CONTENTS"] = "contents";
})(DisplayBox || (DisplayBox = {}));
export var DisplayValue;
(function (DisplayValue) {
    DisplayValue["NONE"] = "none";
    DisplayValue["CONTENTS"] = "contents";
    DisplayValue["BLOCK"] = "block";
    DisplayValue["INLINE"] = "inline";
    DisplayValue["INLINE_BLOCK"] = "inline-block";
    DisplayValue["FLOW_ROOT"] = "flow-root";
    DisplayValue["RUN_IN"] = "run-in";
    DisplayValue["LIST_ITEM"] = "list-item";
    DisplayValue["INLINE_LIST_ITEM"] = "inline-list-item";
    DisplayValue["FLEX"] = "flex";
    DisplayValue["INLINE_FLEX"] = "inline-flex";
    DisplayValue["GRID"] = "grid";
    DisplayValue["INLINE_GRID"] = "inline-grid";
    DisplayValue["RUBY"] = "ruby";
    DisplayValue["BLOCK_RUBY"] = "block-ruby";
    DisplayValue["TABLE"] = "table";
    DisplayValue["INLINE_TABLE"] = "inline-table";
})(DisplayValue || (DisplayValue = {}));
export class Display {
    constructor(value) {
        if (Display.internalValues.includes(value)) {
            this.internal = value;
        }
        if (Display.listItemValues.includes(value)) {
            this.listItem = value;
        }
        if (Display.boxValues.includes(value)) {
            this.box = value;
        }
        this.value = BasicStyle.selectOrDefault("display", value, Display.allValues);
        switch (this.value) {
            case DisplayValue.NONE:
                this.box = DisplayBox.NONE;
                break;
            case DisplayValue.CONTENTS:
                this.box = DisplayBox.CONTENTS;
                break;
            case DisplayValue.BLOCK:
                this.outside = DisplayOutside.BLOCK;
                this.inside = DisplayInside.FLOW;
                break;
            case DisplayValue.INLINE_BLOCK:
                this.outside = DisplayOutside.INLINE;
                this.inside = DisplayInside.FLOW_ROOT;
                break;
            case DisplayValue.FLOW_ROOT:
                this.outside = DisplayOutside.BLOCK;
                this.inside = DisplayInside.FLOW_ROOT;
                break;
            case DisplayValue.LIST_ITEM:
                this.outside = DisplayOutside.BLOCK;
                this.inside = DisplayInside.FLOW;
                this.listItem = DisplayListItem.LIST_ITEM;
                break;
            case DisplayValue.INLINE_LIST_ITEM:
                this.outside = DisplayOutside.INLINE;
                this.inside = DisplayInside.FLOW;
                this.listItem = DisplayListItem.LIST_ITEM;
                break;
            case DisplayValue.RUN_IN:
                this.outside = DisplayOutside.RUN_IN;
                this.inside = DisplayInside.FLOW;
                break;
            case DisplayValue.FLEX:
                this.outside = DisplayOutside.BLOCK;
                this.inside = DisplayInside.FLEX;
                break;
            case DisplayValue.INLINE_FLEX:
                this.outside = DisplayOutside.INLINE;
                this.inside = DisplayInside.FLEX;
                break;
            case DisplayValue.GRID:
                this.outside = DisplayOutside.BLOCK;
                this.inside = DisplayInside.GRID;
                break;
            case DisplayValue.INLINE_GRID:
                this.outside = DisplayOutside.INLINE;
                this.inside = DisplayInside.GRID;
                break;
            case DisplayValue.BLOCK_RUBY:
                this.outside = DisplayOutside.BLOCK;
                this.inside = DisplayInside.RUBY;
                break;
            case DisplayValue.RUBY:
                this.outside = DisplayOutside.INLINE;
                this.inside = DisplayInside.RUBY;
                break;
            case DisplayValue.TABLE:
                this.outside = DisplayOutside.BLOCK;
                this.inside = DisplayInside.TABLE;
                break;
            case DisplayValue.INLINE_TABLE:
                this.outside = DisplayOutside.INLINE;
                this.inside = DisplayInside.TABLE;
                break;
            case DisplayInternal.TABLE_ROW_GROUP:
            case DisplayInternal.TABLE_HEADER_GROUP:
            case DisplayInternal.TABLE_FOOTER_GROUP:
            case DisplayInternal.TABLE_ROW:
                this.outside = DisplayOutside.BLOCK;
                this.inside = DisplayInside.FLOW;
                break;
            case DisplayInternal.TABLE_CELL:
                this.outside = DisplayOutside.INLINE;
                this.inside = DisplayInside.FLOW_ROOT;
                break;
            case DisplayInternal.TABLE_CAPTION:
                this.outside = DisplayOutside.BLOCK;
                this.inside = DisplayInside.FLOW_ROOT;
                break;
            case DisplayValue.INLINE:
            default:
                this.outside = DisplayOutside.INLINE;
                this.inside = DisplayInside.FLOW;
                break;
        }
    }
    static load(element) {
        const value = CssCascade.getValue(element, "display");
        const display = new Display(value);
        const float = LogicalFloat.load(element);
        const position = Position.load(element);
        if (!float.isNone() || position.isAbsolute() || position.isFixed()) {
            display.setFlowRoot();
        }
        if (display.isInlineLevel() && !float.isNone()) {
            display.setBlockLevel();
        }
        return display;
    }
    setBlockLevel() {
        this.outside = DisplayOutside.BLOCK;
    }
    setFlowRoot() {
        this.inside = DisplayInside.FLOW_ROOT;
    }
    toString() {
        return this.value;
    }
    isNone() {
        return this.box ? this.box === DisplayBox.NONE : false;
    }
    isContents() {
        return this.box ? this.box === DisplayBox.CONTENTS : false;
    }
    isListItem() {
        return this.listItem ? true : false;
    }
    isTable() {
        return this.inside ? this.inside === DisplayInside.TABLE : false;
    }
    isTableRowGroup() {
        if (!this.internal) {
            return false;
        }
        switch (this.internal) {
            case DisplayInternal.TABLE_ROW_GROUP:
            case DisplayInternal.TABLE_HEADER_GROUP:
            case DisplayInternal.TABLE_FOOTER_GROUP:
                return true;
        }
        return false;
    }
    isTableRow() {
        return this.internal ? this.internal === DisplayInternal.TABLE_ROW : false;
    }
    isTableCell() {
        return this.internal ? this.internal === DisplayInternal.TABLE_CELL : false;
    }
    isBorderCollapsable() {
        return this.isTableRowGroup() || this.isTableRow() || this.isTableCell();
    }
    isRubyChild() {
        return this.isRubyBase() || this.isRubyText();
    }
    isRubyBase() {
        return this.internal ? this.internal === DisplayInternal.RUBY_BASE : false;
    }
    isRubyText() {
        return this.internal ? this.internal === DisplayInternal.RUBY_TEXT : false;
    }
    isFlow() {
        return this.isFlowInside() || this.isFlowRoot();
    }
    isInlineFlow() {
        return this.isInlineLevel() && this.isFlowInside();
    }
    isBlockFlow() {
        return this.isBlockLevel() && this.isFlowInside();
    }
    isInlineBlockFlow() {
        return this.isInlineLevel() && this.isFlowRoot();
    }
    isFlowInside() {
        return this.inside ? this.inside === DisplayInside.FLOW : false;
    }
    isFlowRoot() {
        return this.inside ? this.inside === DisplayInside.FLOW_ROOT : false;
    }
    isFlowTable() {
        return this.inside ? this.inside === DisplayInside.TABLE : false;
    }
    isFlowRuby() {
        return this.inside ? this.inside === DisplayInside.RUBY : false;
    }
    isBlockLevel() {
        return this.outside ? this.outside === DisplayOutside.BLOCK : false;
    }
    isInlineLevel() {
        return this.outside ? this.outside === DisplayOutside.INLINE : false;
    }
}
Display.values = Utils.Enum.toValueArray(DisplayValue);
Display.listItemValues = Utils.Enum.toValueArray(DisplayListItem);
Display.internalValues = Utils.Enum.toValueArray(DisplayInternal);
Display.boxValues = Utils.Enum.toValueArray(DisplayBox);
Display.allValues = Display.values
    .concat(Display.listItemValues)
    .concat(Display.internalValues)
    .concat(Display.boxValues);
//# sourceMappingURL=display.js.map