76 lines
2.5 KiB
HTML
76 lines
2.5 KiB
HTML
<cat-template>
|
|
<input>
|
|
</cat-template>
|
|
<script>
|
|
const electron = require('electron')
|
|
customElements.define('cat-input', class CatInputElement extends HTMLElement {
|
|
static get observedAttributes() {
|
|
return [
|
|
'class',
|
|
'id',
|
|
'min',
|
|
'max',
|
|
'value',
|
|
'type',
|
|
'style',
|
|
'label',
|
|
'step',
|
|
'placeholder'
|
|
];
|
|
}
|
|
attributeChangedCallback(attr, oldValue, newValue) {
|
|
this.querySelector('input').setAttribute(attr, newValue);
|
|
}
|
|
constructor() {
|
|
super();
|
|
this.lastMouse = {x: 0, y: 0};
|
|
this.deltaMouse = {x: 0, y: 0};
|
|
this.boundMouseDown = evt => this.mouseDown(evt);
|
|
this.boundMouseUp = evt => this.mouseUp(evt);
|
|
this.boundMouseMove = evt => this.mouseMove(evt);
|
|
document.currentScript.ownerDocument.querySelector('cat-template').cloneTo(this);
|
|
}
|
|
connectedCallback() {
|
|
if (this.getAttribute('type') === 'number') {
|
|
this.addEventListener('mousedown', this.boundMouseDown);
|
|
}
|
|
this.querySelector('input').addEventListener('change', function(e) {
|
|
e.target.value = (parseFloat(e.target.value)).toFixed(3);
|
|
});
|
|
}
|
|
mouseDown(e) {
|
|
this.lastMouse = electron.screen.getCursorScreenPoint();
|
|
if ((e.buttons & 2) == 2) {
|
|
window.addEventListener('mouseup', this.boundMouseUp);
|
|
this.mouseMoveInterval = setInterval(this.boundMouseMove, 1);
|
|
window.addEventListener('mouseout', this.boundMouseOut);
|
|
document.querySelector('html').className = 'cursor-col-resize';
|
|
}
|
|
}
|
|
mouseUp(e) {
|
|
var currentMouse = electron.screen.getCursorScreenPoint();
|
|
this.deltaMouse.x = currentMouse.x - this.lastMouse.x;
|
|
this.lastMouse = currentMouse;
|
|
if (e.button == 2) {
|
|
document.querySelector('html').className = '';
|
|
clearInterval(this.mouseMoveInterval);
|
|
}
|
|
}
|
|
mouseMove(e) {
|
|
var currentMouse = electron.screen.getCursorScreenPoint();
|
|
this.deltaMouse.x = currentMouse.x - this.lastMouse.x;
|
|
this.lastMouse = currentMouse;
|
|
if (this.deltaMouse.x != 0) this.setValue();
|
|
}
|
|
setValue() {
|
|
let inp = this.querySelector('input');
|
|
var delta = this.deltaMouse.x;
|
|
inp.value = parseFloat(inp.value) + (delta * (inp.hasAttribute('step') ? parseFloat(inp.getAttribute('step')) : 1));
|
|
inp.dispatchEvent(new Event('change', {
|
|
bubbles: true,
|
|
cancelable: true
|
|
}));
|
|
}
|
|
});
|
|
</script>
|