97 lines
3.5 KiB
TypeScript
97 lines
3.5 KiB
TypeScript
import {ElementContainer} from '../element-container';
|
|
import {BORDER_STYLE} from '../../css/property-descriptors/border-style';
|
|
import {BACKGROUND_CLIP} from '../../css/property-descriptors/background-clip';
|
|
import {BACKGROUND_ORIGIN} from '../../css/property-descriptors/background-origin';
|
|
import {TokenType} from '../../css/syntax/tokenizer';
|
|
import {LengthPercentageTuple} from '../../css/types/length-percentage';
|
|
import {Bounds} from '../../css/layout/bounds';
|
|
|
|
const CHECKBOX_BORDER_RADIUS: LengthPercentageTuple = [
|
|
{
|
|
type: TokenType.DIMENSION_TOKEN,
|
|
flags: 0,
|
|
unit: 'px',
|
|
number: 3
|
|
}
|
|
];
|
|
|
|
const RADIO_BORDER_RADIUS: LengthPercentageTuple = [
|
|
{
|
|
type: TokenType.PERCENTAGE_TOKEN,
|
|
flags: 0,
|
|
number: 50
|
|
}
|
|
];
|
|
|
|
const reformatInputBounds = (bounds: Bounds): Bounds => {
|
|
if (bounds.width > bounds.height) {
|
|
return new Bounds(bounds.left + (bounds.width - bounds.height) / 2, bounds.top, bounds.height, bounds.height);
|
|
} else if (bounds.width < bounds.height) {
|
|
return new Bounds(bounds.left, bounds.top + (bounds.height - bounds.width) / 2, bounds.width, bounds.width);
|
|
}
|
|
return bounds;
|
|
};
|
|
|
|
const getInputValue = (node: HTMLInputElement): string => {
|
|
const value = node.type === PASSWORD ? new Array(node.value.length + 1).join('\u2022') : node.value;
|
|
|
|
return value.length === 0 ? node.placeholder || '' : value;
|
|
};
|
|
|
|
export const CHECKBOX = 'checkbox';
|
|
export const RADIO = 'radio';
|
|
export const PASSWORD = 'password';
|
|
export const INPUT_COLOR = 0x2a2a2aff;
|
|
|
|
export class InputElementContainer extends ElementContainer {
|
|
readonly type: string;
|
|
readonly checked: boolean;
|
|
readonly value: string;
|
|
|
|
constructor(input: HTMLInputElement) {
|
|
super(input);
|
|
this.type = input.type.toLowerCase();
|
|
this.checked = input.checked;
|
|
this.value = getInputValue(input);
|
|
|
|
if (this.type === CHECKBOX || this.type === RADIO) {
|
|
this.styles.backgroundColor = 0xdededeff;
|
|
this.styles.borderTopColor =
|
|
this.styles.borderRightColor =
|
|
this.styles.borderBottomColor =
|
|
this.styles.borderLeftColor =
|
|
0xa5a5a5ff;
|
|
this.styles.borderTopWidth =
|
|
this.styles.borderRightWidth =
|
|
this.styles.borderBottomWidth =
|
|
this.styles.borderLeftWidth =
|
|
1;
|
|
this.styles.borderTopStyle =
|
|
this.styles.borderRightStyle =
|
|
this.styles.borderBottomStyle =
|
|
this.styles.borderLeftStyle =
|
|
BORDER_STYLE.SOLID;
|
|
this.styles.backgroundClip = [BACKGROUND_CLIP.BORDER_BOX];
|
|
this.styles.backgroundOrigin = [BACKGROUND_ORIGIN.BORDER_BOX];
|
|
this.bounds = reformatInputBounds(this.bounds);
|
|
}
|
|
|
|
switch (this.type) {
|
|
case CHECKBOX:
|
|
this.styles.borderTopRightRadius =
|
|
this.styles.borderTopLeftRadius =
|
|
this.styles.borderBottomRightRadius =
|
|
this.styles.borderBottomLeftRadius =
|
|
CHECKBOX_BORDER_RADIUS;
|
|
break;
|
|
case RADIO:
|
|
this.styles.borderTopRightRadius =
|
|
this.styles.borderTopLeftRadius =
|
|
this.styles.borderBottomRightRadius =
|
|
this.styles.borderBottomLeftRadius =
|
|
RADIO_BORDER_RADIUS;
|
|
break;
|
|
}
|
|
}
|
|
}
|