tym-table-editor
Version:
'tym-table-editor' is a simple table editor component.
114 lines • 13 kB
JavaScript
/*!
* tym-table-editor.js
* Copyright (c) 2022 shinichi tayama
* Released under the MIT license.
* see https://opensource.org/licenses/MIT
*/
import { Inject, InjectionToken } from '@angular/core';
import { Component } from '@angular/core';
import * as i0 from "@angular/core";
export class TymTableInputComponent {
_elmRef;
/**
* ダイアログ用トークン
*/
static _TYM_TABLE_INPUT_TOKEN = new InjectionToken('TymTableInput');
/**
* 画面用値
*/
vals;
/**
* this native element
*/
_thisElm;
/**
* コンストラクター
* @param vals_ StaticProviderのuseValue値
*/
constructor(vals_, _elmRef) {
this._elmRef = _elmRef;
this.vals = vals_;
this._thisElm = this._elmRef.nativeElement;
}
/**
* ビューを初期化した後の処理
*/
ngAfterViewInit() {
const [thisElm, vals] = [this._thisElm, this.vals];
const inputElm = thisElm.firstElementChild;
const divElm = thisElm.parentElement; // 全画面
Object.assign(thisElm.style, {
top: `${vals.top}px`,
left: `${vals.left}px`,
position: 'absolute',
});
Object.assign(inputElm.style, {
fontSize: '150%',
});
inputElm.addEventListener('keydown', event => {
if (event.key == 'Escape') {
vals.isEscape = true;
}
if (event.key == 'Enter') {
divElm.dispatchEvent(new Event('click'));
event.preventDefault();
}
if (event.key == 'Tab') {
event.preventDefault();
}
});
const resize = () => {
const { height: div_h, width: div_w } = divElm.getBoundingClientRect();
const { height, width, top, left } = thisElm.getBoundingClientRect();
const thisStyle = thisElm.style;
if ((top + height) > div_h) {
thisStyle.top = `${div_h - height}px`;
}
if ((left + width) > div_w) {
thisStyle.left = `${left - width}px`;
}
inputElm.focus();
};
// コンテキストメニューが画面外に見切れた場合に移動させる
setTimeout(resize);
new MutationObserver(resize)
.observe(thisElm, { subtree: true, attributes: true, attributeFilter: ['class'] });
}
ngOnDestroy() {
const thisElm = this._thisElm;
const inputElm = thisElm.firstElementChild;
this.vals.ret = inputElm.value;
}
/**
* StaticProviderのuseValue値の生成
* @param type input type
* @param val 値
* @param elm ターゲットエレメント
* @returns ダイアログ画面用StaticProvider
*/
static provider(type, val, elm) {
const { top, left } = elm.getBoundingClientRect();
return {
provide: TymTableInputComponent._TYM_TABLE_INPUT_TOKEN,
useValue: {
type: type,
val: val,
top: top,
left: left,
}
};
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TymTableInputComponent, deps: [{ token: TymTableInputComponent._TYM_TABLE_INPUT_TOKEN }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TymTableInputComponent, selector: "ngx-tym-table-input", ngImport: i0, template: '<input [type]="vals.type" [value]="vals.val">', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TymTableInputComponent, decorators: [{
type: Component,
args: [{
selector: 'ngx-tym-table-input',
template: '<input [type]="vals.type" [value]="vals.val">'
}]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [TymTableInputComponent._TYM_TABLE_INPUT_TOKEN]
}] }, { type: i0.ElementRef }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHltLXRhYmxlLWlucHV0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3R5bS10YWJsZS1lZGl0b3Ivc3JjL2xpYi90eW0tdGFibGUtaW5wdXQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7OztHQUtHO0FBRUgsT0FBTyxFQUFFLE1BQU0sRUFBRSxjQUFjLEVBQWtCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxTQUFTLEVBQXdDLE1BQU0sZUFBZSxDQUFDOztBQU1oRixNQUFNLE9BQU8sc0JBQXNCO0lBc0J2QjtJQXBCVjs7T0FFRztJQUNLLE1BQU0sQ0FBQyxzQkFBc0IsR0FBRyxJQUFJLGNBQWMsQ0FBTSxlQUFlLENBQUMsQ0FBQztJQUVqRjs7T0FFRztJQUNJLElBQUksQ0FBTTtJQUNqQjs7T0FFRztJQUNLLFFBQVEsQ0FBYztJQUU5Qjs7O09BR0c7SUFDSCxZQUN5RCxLQUFVLEVBQ3pELE9BQW1CO1FBQW5CLFlBQU8sR0FBUCxPQUFPLENBQVk7UUFFM0IsSUFBSSxDQUFDLElBQUksR0FBRyxLQUFLLENBQUM7UUFDbEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQTRCLENBQUM7SUFDNUQsQ0FBQztJQUVEOztPQUVHO0lBQ0gsZUFBZTtRQUNiLE1BQU0sQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNuRCxNQUFNLFFBQVEsR0FBRyxPQUFPLENBQUMsaUJBQXFDLENBQUM7UUFDL0QsTUFBTSxNQUFNLEdBQUcsT0FBTyxDQUFDLGFBQStCLENBQUMsQ0FBQyxNQUFNO1FBRTlELE1BQU0sQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLEtBQUssRUFBRTtZQUMzQixHQUFHLEVBQUUsR0FBRyxJQUFJLENBQUMsR0FBRyxJ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Q0FBQyxzQkFBc0I7NEZBckI1QyxzQkFBc0IsMkRBRnZCLCtDQUErQzs7NEZBRTlDLHNCQUFzQjtrQkFKbEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUscUJBQXFCO29CQUMvQixRQUFRLEVBQUUsK0NBQStDO2lCQUMxRDs7MEJBc0JJLE1BQU07MkJBQUMsc0JBQXNCLENBQUMsc0JBQXNCIiwic291cmNlc0NvbnRlbnQiOlsiLyohXHJcbiAqIHR5bS10YWJsZS1lZGl0b3IuanNcclxuICogQ29weXJpZ2h0IChjKSAyMDIyIHNoaW5pY2hpIHRheWFtYVxyXG4gKiBSZWxlYXNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UuXHJcbiAqIHNlZSBodHRwczovL29wZW5zb3VyY2Uub3JnL2xpY2Vuc2VzL01JVFxyXG4gKi9cclxuXHJcbmltcG9ydCB7IEluamVjdCwgSW5qZWN0aW9uVG9rZW4sIFN0YXRpY1Byb3ZpZGVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IENvbXBvbmVudCwgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95LCBFbGVtZW50UmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ25neC10eW0tdGFibGUtaW5wdXQnLFxyXG4gIHRlbXBsYXRlOiAnPGlucHV0IFt0eXBlXT1cInZhbHMudHlwZVwiIFt2YWx1ZV09XCJ2YWxzLnZhbFwiPidcclxufSlcclxuZXhwb3J0IGNsYXNzIFR5bVRhYmxlSW5wdXRDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0LCBPbkRlc3Ryb3kge1xyXG5cclxuICAvKipcclxuICAgKiDjg4DjgqTjgqLjg63jgrDnlKjjg4jjg7zjgq/jg7NcclxuICAgKi9cclxuICBwcml2YXRlIHN0YXRpYyBfVFlNX1RBQkxFX0lOUFVUX1RPS0VOID0gbmV3IEluamVjdGlvblRva2VuPGFueT4oJ1R5bVRhYmxlSW5wdXQnKTtcclxuXHJcbiAgLyoqXHJcbiAgICog55S76Z2i55So5YCkXHJcbiAgICovXHJcbiAgcHVibGljIHZhbHM6IGFueTtcclxuICAvKipcclxuICAgKiB0aGlzIG5hdGl2ZSBlbGVtZW50XHJcbiAgICovXHJcbiAgcHJpdmF0ZSBfdGhpc0VsbTogSFRNTEVsZW1lbnQ7XHJcblxyXG4gIC8qKlxyXG4gICAqIOOCs+ODs+OCueODiOODqeOCr+OCv+ODvFxyXG4gICAqIEBwYXJhbSB2YWxzXyBTdGF0aWNQcm92aWRlcuOBrnVzZVZhbHVl5YCkXHJcbiAgICovXHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBASW5qZWN0KFR5bVRhYmxlSW5wdXRDb21wb25lbnQuX1RZTV9UQUJMRV9JTlBVVF9UT0tFTikgdmFsc186IGFueSxcclxuICAgIHByaXZhdGUgX2VsbVJlZjogRWxlbWVudFJlZlxyXG4gICkge1xyXG4gICAgdGhpcy52YWxzID0gdmFsc187XHJcbiAgICB0aGlzLl90aGlzRWxtID0gdGhpcy5fZWxtUmVmLm5hdGl2ZUVsZW1lbnQgYXMgSFRNTEVsZW1lbnQ7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiDjg5Pjg6Xjg7zjgpLliJ3mnJ/ljJbjgZfjgZ/lvozjga7lh6bnkIZcclxuICAgKi9cclxuICBuZ0FmdGVyVmlld0luaXQoKSB7XHJcbiAgICBjb25zdCBbdGhpc0VsbSwgdmFsc10gPSBbdGhpcy5fdGhpc0VsbSwgdGhpcy52YWxzXTtcclxuICAgIGNvbnN0IGlucHV0RWxtID0gdGhpc0VsbS5maXJzdEVsZW1lbnRDaGlsZCBhcyBIVE1MSW5wdXRFbGVtZW50O1xyXG4gICAgY29uc3QgZGl2RWxtID0gdGhpc0VsbS5wYXJlbnRFbGVtZW50IGFzIEhUTUxEaXZFbGVtZW50OyAvLyDlhajnlLvpnaJcclxuXHJcbiAgICBPYmplY3QuYXNzaWduKHRoaXNFbG0uc3R5bGUsIHtcclxuICAgICAgdG9wOiBgJHt2YWxzLnRvcH1weGAsXHJcbiAgICAgIGxlZnQ6IGAke3ZhbHMubGVmdH1weGAsXHJcbiAgICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxyXG4gICAgfSBhcyBDU1NTdHlsZURlY2xhcmF0aW9uKTtcclxuXHJcbiAgICBPYmplY3QuYXNzaWduKGlucHV0RWxtLnN0eWxlLCB7XHJcbiAgICAgIGZvbnRTaXplOiAnMTUwJScsXHJcbiAgICB9IGFzIENTU1N0eWxlRGVjbGFyYXRpb24pO1xyXG5cclxuICAgIGlucHV0RWxtLmFkZEV2ZW50TGlzdGVuZXIoJ2tleWRvd24nLCBldmVudCA9PiB7XHJcbiAgICAgIGlmIChldmVudC5rZXkgPT0gJ0VzY2FwZScpIHtcclxuICAgICAgICB2YWxzLmlzRXNjYXBlID0gdHJ1ZTtcclxuICAgICAgfVxyXG4gICAgICBpZiAoZXZlbnQua2V5ID09ICdFbnRlcicpIHtcclxuICAgICAgICBkaXZFbG0uZGlzcGF0Y2hFdmVudChuZXcgRXZlbnQoJ2NsaWNrJykpO1xyXG4gICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XHJcbiAgICAgIH1cclxuICAgICAgaWYgKGV2ZW50LmtleSA9PSAnVGFiJykge1xyXG4gICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XHJcbiAgICAgIH1cclxuICAgIH0pO1xyXG5cclxuICAgIGNvbnN0IHJlc2l6ZSA9ICgpID0+IHtcclxuICAgICAgY29uc3QgeyBoZWlnaHQ6IGRpdl9oLCB3aWR0aDogZGl2X3cgfSA9IGRpdkVsbS5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTtcclxuICAgICAgY29uc3QgeyBoZWlnaHQsIHdpZHRoLCB0b3AsIGxlZnQgfSA9IHRoaXNFbG0uZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XHJcbiAgICAgIGNvbnN0IHRoaXNTdHlsZSA9IHRoaXNFbG0uc3R5bGU7XHJcbiAgICAgIGlmICgodG9wICsgaGVpZ2h0KSA+IGRpdl9oKSB7XHJcbiAgICAgICAgdGhpc1N0eWxlLnRvcCA9IGAke2Rpdl9oIC0gaGVpZ2h0fXB4YDtcclxuICAgICAgfVxyXG4gICAgICBpZiAoKGxlZnQgKyB3aWR0aCkgPiBkaXZfdykge1xyXG4gICAgICAgIHRoaXNTdHlsZS5sZWZ0ID0gYCR7bGVmdCAtIHdpZHRofXB4YDtcclxuICAgICAgfVxyXG4gICAgICBpbnB1dEVsbS5mb2N1cygpO1xyXG4gICAgfVxyXG5cclxuICAgIC8vIOOCs+ODs+ODhuOCreOCueODiOODoeODi+ODpeODvOOBjOeUu+mdouWkluOBq+imi+WIh+OCjOOBn+WgtOWQiOOBq+enu+WLleOBleOBm+OCi1xyXG4gICAgc2V0VGltZW91dChyZXNpemUpO1xyXG4gICAgbmV3IE11dGF0aW9uT2JzZXJ2ZXIocmVzaXplKVxyXG4gICAgICAub2JzZXJ2ZSh0aGlzRWxtLCB7IHN1YnRyZWU6IHRydWUsIGF0dHJpYnV0ZXM6IHRydWUsIGF0dHJpYnV0ZUZpbHRlcjogWydjbGFzcyddIH0pO1xyXG4gIH1cclxuXHJcbiAgbmdPbkRlc3Ryb3koKSB7XHJcbiAgICBjb25zdCB0aGlzRWxtID0gdGhpcy5fdGhpc0VsbTtcclxuICAgIGNvbnN0IGlucHV0RWxtID0gdGhpc0VsbS5maXJzdEVsZW1lbnRDaGlsZCBhcyBIVE1MSW5wdXRFbGVtZW50O1xyXG4gICAgdGhpcy52YWxzLnJldCA9IGlucHV0RWxtLnZhbHVlO1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogU3RhdGljUHJvdmlkZXLjga51c2VWYWx1ZeWApOOBrueUn+aIkFxyXG4gICAqIEBwYXJhbSB0eXBlIGlucHV0IHR5cGVcclxuICAgKiBAcGFyYW0gdmFsIOWApFxyXG4gICAqIEBwYXJhbSBlbG0g44K/44O844Ky44OD44OI44Ko44Os44Oh44Oz44OIXHJcbiAgICogQHJldHVybnMg44OA44Kk44Ki44Ot44Kw55S76Z2i55SoU3RhdGljUHJvdmlkZXJcclxuICAgKi9cclxuICBwdWJsaWMgc3RhdGljIHByb3ZpZGVyKFxyXG4gICAgdHlwZTogc3RyaW5nLFxyXG4gICAgdmFsOiBzdHJpbmcsXHJcbiAgICBlbG06IEhUTUxFbGVtZW50XHJcbiAgKTogU3RhdGljUHJvdmlkZXIge1xyXG4gICAgY29uc3QgeyB0b3AsIGxlZnQgfSA9IGVsbS5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTtcclxuICAgIHJldHVybiB7XHJcbiAgICAgIHByb3ZpZGU6IFR5bVRhYmxlSW5wdXRDb21wb25lbnQuX1RZTV9UQUJMRV9JTlBVVF9UT0tFTixcclxuICAgICAgdXNlVmFsdWU6IHtcclxuICAgICAgICB0eXBlOiB0eXBlLFxyXG4gICAgICAgIHZhbDogdmFsLFxyXG4gICAgICAgIHRvcDogdG9wLFxyXG4gICAgICAgIGxlZnQ6IGxlZnQsXHJcbiAgICAgIH1cclxuICAgIH1cclxuICB9XHJcbn0iXX0=