/*************************************************************
*
* Copyright (c) 2017-2022 The MathJax Consortium
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* @fileoverview Implements the CHTMLWrapper class
*
* @author dpvc@mathjax.org (Davide Cervone)
*/
import {OptionList} from '../../util/Options.js';
import * as LENGTHS from '../../util/lengths.js';
import {CommonWrapper, AnyWrapperClass, Constructor, StringMap} from '../common/Wrapper.js';
import {CHTML} from '../chtml.js';
import {CHTMLWrapperFactory} from './WrapperFactory.js';
import {BBox} from '../../util/BBox.js';
import {CHTMLFontData, CHTMLCharOptions, CHTMLDelimiterData} from './FontData.js';
export {Constructor, StringMap} from '../common/Wrapper.js';
/*****************************************************************/
/**
* Some standard sizes to use in predefind CSS properties
*/
export const FONTSIZE: StringMap = {
'70.7%': 's',
'70%': 's',
'50%': 'ss',
'60%': 'Tn',
'85%': 'sm',
'120%': 'lg',
'144%': 'Lg',
'173%': 'LG',
'207%': 'hg',
'249%': 'HG'
};
export const SPACE: StringMap = {
/* tslint:disable:whitespace */
[LENGTHS.em(2/18)]: '1',
[LENGTHS.em(3/18)]: '2',
[LENGTHS.em(4/18)]: '3',
[LENGTHS.em(5/18)]: '4',
[LENGTHS.em(6/18)]: '5'
/* tslint:enable */
};
/**
* Shorthand for making a CHTMLWrapper constructor
*/
export type CHTMLConstructor<N, T, D> = Constructor<CHTMLWrapper<N, T, D>>;
/*****************************************************************/
/**
* The type of the CHTMLWrapper class (used when creating the wrapper factory for this class)
*/
export interface CHTMLWrapperClass extends AnyWrapperClass {
kind: string;
/**
* If true, this causes a style for the node type to be generated automatically
* that sets display:inline-block (as needed for the output for MmlNodes).
*/
autoStyle: boolean;
}
/*****************************************************************/
/**
* The base CHTMLWrapper class
*
* @template N The HTMLElement node class
* @template T The Text node class
* @template D The Document class
*/
export class CHTMLWrapper<N, T, D> extends
CommonWrapper<
CHTML<N, T, D>,
CHTMLWrapper<N, T, D>,
CHTMLWrapperClass,
CHTMLCharOptions,
CHTMLDelimiterData,
CHTMLFontData
> {
/**
* The wrapper type
*/
public static kind: string = 'unknown';
/**
* If true, this causes a style for the node type to be generated automatically
* that sets display:inline-block (as needed for the output for MmlNodes).
*/
public static autoStyle = true;
/**
* @override
*/
protected factory: CHTMLWrapperFactory<N, T, D>;
/**
* @override
*/
public parent: CHTMLWrapper<N, T, D>;
/**
* @override
*/
public childNodes: CHTMLWrapper<N, T, D>[];
/**
* The HTML element generated for this wrapped node
*/
public chtml: N = null;
/*******************************************************************/
/**
* Create the HTML for the wrapped node.
*
* @param {N} parent The HTML node where the output is added
*/
public toCHTML(parent: N) {
const chtml = this.standardCHTMLnode(parent);
for (const child of this.childNodes) {
child.toCHTML(chtml);
}
}
/*******************************************************************/
/**
* Create the standard CHTML element for the given wrapped node.
*
* @param {N} parent The HTML element in which the node is to be created
* @returns {N} The root of the HTML tree for the wrapped node's output
*/
protected standardCHTMLnode(parent: N): N {
this.markUsed();
const chtml = this.createCHTMLnode(parent);
this.handleStyles();
this.handleVariant();
this.handleScale();
this.handleColor();
this.handleSpace();
this.handleAttributes();
this.handlePWidth();
return chtml;
}
/**
* Mark this class as having been typeset (so its styles will be output)
*/
public markUsed() {
this.jax.wrapperUsage.add(this.kind);
}
/**
* @param {N} parent The HTML element in which the node is to be created
* @returns {N} The root of the HTML tree for the wrapped node's output
*/
protected createCHTMLnode(parent: N): N {
const href = this.node.attributes.get('href');
if (href) {
parent = this.adaptor.append(parent, this.html('a', {href: href})) as N;
}
this.chtml = this.adaptor.append(parent, this.html('mjx-' + this.node.kind)) as N;
return this.chtml;
}
/**
* Set the CSS styles for the chtml element
*/
protected handleStyles() {
if (!this.styles) return;
const styles = this.styles.cssText;
if (styles) {
this.adaptor.setAttribute(this.chtml, 'style', styles);
const family = this.styles.get('font-family');
if (family) {
this.adaptor.setStyle(this.chtml, 'font-family', 'MJXZERO, ' + family);
}
}
}
/**
* Set the CSS for the math variant
*/
protected handleVariant() {
if (this.node.isToken && this.variant !== '-explicitFont') {
this.adaptor.setAttribute(this.chtml, 'class',
(this.font.getVariant(this.variant) || this.font.getVariant('normal')).classes);
}
}
/**
* Set the (relative) scaling factor for the node
*/
protected handleScale() {
this.setScale(this.chtml, this.bbox.rscale);
}
/**
* @param {N} chtml The HTML node to scale
* @param {number} rscale The relatie scale to apply
* @return {N} The HTML node (for chaining)
*/
protected setScale(chtml: N, rscale: number): N {
const scale = (Math.abs(rscale - 1) < .001 ? 1 : rscale);
if (chtml && scale !== 1) {
const size = this.percent(scale);
if (FONTSIZE[size]) {
this.adaptor.setAttribute(chtml, 'size', FONTSIZE[size]);
} else {
this.adaptor.setStyle(chtml, 'fontSize', size);
}
}
return chtml;
}
/**
* Add the proper spacing
*/
protected handleSpace() {
for (const data of [[this.bbox.L, 'space', 'marginLeft'],
[this.bbox.R, 'rspace', 'marginRight']]) {
const [dimen, name, margin] = data as [number, string, string];
if (dimen) {
const space = this.em(dimen);
if (SPACE[space]) {
this.adaptor.setAttribute(this.chtml, name, SPACE[space]);
} else {
this.adaptor.setStyle(this.chtml, margin, space);
}
}
}
}
/**
* Add the foreground and background colors
* (Only look at explicit attributes, since inherited ones will
* be applied to a parent element, and we will inherit from that)
*/
protected handleColor() {
const attributes = this.node.attributes;
const mathcolor = attributes.getExplicit('mathcolor') as string;
const color = attributes.getExplicit('color') as string;
const mathbackground = attributes.getExplicit('mathbackground') as string;
const background = attributes.getExplicit('background') as string;
if (mathcolor || color) {
this.adaptor.setStyle(this.chtml, 'color', mathcolor || color);
}
if (mathbackground || background) {
this.adaptor.setStyle(this.chtml, 'backgroundColor', mathbackground || background);
}
}
/**
* Copy RDFa, aria, and other tags from the MathML to the CHTML output nodes.
* Don't copy those in the skipAttributes list, or anything that already exists
* as a property of the node (e.g., no "onlick", etc.). If a name in the
* skipAttributes object is set to false, then the attribute WILL be copied.
* Add the class to any other classes already in use.
*/
protected handleAttributes() {
const attributes = this.node.attributes;
const defaults = attributes.getAllDefaults();
const skip = CHTMLWrapper.skipAttributes;
for (const name of attributes.getExplicitNames()) {
if (skip[name] === false || (!(name in defaults) && !skip[name] &&
!this.adaptor.hasAttribute(this.chtml, name))) {
this.adaptor.setAttribute(this.chtml, name, attributes.getExplicit(name) as string);
}
}
if (attributes.get('class')) {
const names = (attributes.get('class') as string).trim().split(/ +/);
for (const name of names) {
this.adaptor.addClass(this.chtml, name);
}
}
}
/**
* Handle the attributes needed for percentage widths
*/
protected handlePWidth() {
if (this.bbox.pwidth) {
if (this.bbox.pwidth === BBox.fullWidth) {
this.adaptor.setAttribute(this.chtml, 'width', 'full');
} else {
this.adaptor.setStyle(this.chtml, 'width', this.bbox.pwidth);
}
}
}
/*******************************************************************/
/**
* @param {N} chtml The HTML node whose indentation is to be adjusted
* @param {string} align The alignment for the node
* @param {number} shift The indent (positive or negative) for the node
*/
protected setIndent(chtml: N, align: string, shift: number) {
const adaptor = this.adaptor;
if (align === 'center' || align === 'left') {
const L = this.getBBox().L;
adaptor.setStyle(chtml, 'margin-left', this.em(shift + L));
}
if (align === 'center' || align === 'right') {
const R = this.getBBox().R;
adaptor.setStyle(chtml, 'margin-right', this.em(-shift + R));
}
}
/*******************************************************************/
/**
* For debugging
*/
public drawBBox() {
let {w, h, d, R} = this.getBBox();
const box = this.html('mjx-box', {style: {
opacity: .25, 'margin-left': this.em(-w - R)
}}, [
this.html('mjx-box', {style: {
height: this.em(h),
width: this.em(w),
'background-color': 'red'
}}),
this.html('mjx-box', {style: {
height: this.em(d),
width: this.em(w),
'margin-left': this.em(-w),
'vertical-align': this.em(-d),
'background-color': 'green'
}})
] as N[]);
const node = this.chtml || this.parent.chtml;
const size = this.adaptor.getAttribute(node, 'size');
if (size) {
this.adaptor.setAttribute(box, 'size', size);
}
const fontsize = this.adaptor.getStyle(node, 'fontSize');
if (fontsize) {
this.adaptor.setStyle(box, 'fontSize', fontsize);
}
this.adaptor.append(this.adaptor.parent(node), box);
this.adaptor.setStyle(node, 'backgroundColor', '#FFEE00');
}
/*******************************************************************/
/*
* Easy access to some utility routines
*/
/**
* @param {string} type The tag name of the HTML node to be created
* @param {OptionList} def The properties to set for the created node
* @param {(N|T)[]} content The child nodes for the created HTML node
* @return {N} The generated HTML tree
*/
public html(type: string, def: OptionList = {}, content: (N | T)[] = []): N {
return this.jax.html(type, def, content);
}
/**
* @param {string} text The text from which to create an HTML text node
* @return {T} The generated text node with the given text
*/
public text(text: string): T {
return this.jax.text(text);
}
/**
* @param {number} n A unicode code point to be converted to a character className reference.
* @return {string} The className for the character
*/
protected char(n: number): string {
return this.font.charSelector(n).substr(1);
}
}