mirror of
https://github.com/HeyPuter/puter.git
synced 2026-08-12 09:11:54 +00:00
KernelDeimos
e050506a05
ExportService gets removed and instead a global class registry is added. The `init.js` file is split into `init_sync.js` and `init_async.js` so that synchronous code that isn't dependent on imports is guarenteed to run before initgui.js. The globalThis scope and service-script API now expose `def`, a function for registering class definitions, and `use`, a function for obtaining registered classes.
115 lines
3.4 KiB
JavaScript
115 lines
3.4 KiB
JavaScript
/**
|
|
* Copyright (C) 2024 Puter Technologies Inc.
|
|
*
|
|
* This file is part of Puter.
|
|
*
|
|
* Puter is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as published
|
|
* by the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
const Component = use('util.Component');
|
|
|
|
/**
|
|
* Slider: A labeled slider input.
|
|
*/
|
|
export default def(class Slider extends Component {
|
|
static ID = 'ui.component.Slider';
|
|
|
|
static PROPERTIES = {
|
|
name: { value: null },
|
|
label: { value: null },
|
|
min: { value: 0 },
|
|
max: { value: 100 },
|
|
value: { value: null },
|
|
step: { value: 1 },
|
|
on_change: { value: null },
|
|
};
|
|
|
|
static RENDER_MODE = Component.NO_SHADOW;
|
|
|
|
static CSS = /*css*/`
|
|
.slider-label {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.slider-input {
|
|
--webkit-appearance: none;
|
|
width: 100%;
|
|
height: 25px;
|
|
background: #d3d3d3;
|
|
outline: none;
|
|
opacity: 0.7;
|
|
--webkit-transition: .2s;
|
|
transition: opacity .2s;
|
|
}
|
|
|
|
.slider-input:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.slider-input::-webkit-slider-thumb {
|
|
--webkit-appearance: none;
|
|
appearance: none;
|
|
width: 25px;
|
|
height: 25px;
|
|
background: #04AA6D;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.slider-input::-moz-range-thumb {
|
|
width: 25px;
|
|
height: 25px;
|
|
background: #04AA6D;
|
|
cursor: pointer;
|
|
}
|
|
`;
|
|
|
|
create_template ({ template }) {
|
|
const min = this.get('min');
|
|
const max = this.get('max');
|
|
const value = this.get('value') ?? min;
|
|
const step = this.get('step') ?? 1;
|
|
const label = this.get('label') ?? this.get('name');
|
|
|
|
$(template).html(/*html*/`
|
|
<div class="slider">
|
|
<label class="slider-label">${html_encode(label)}</label>
|
|
<input class="slider-input" type="range">
|
|
</div>
|
|
`);
|
|
|
|
// Set attributes here to prevent XSS injection
|
|
$(template).find('.slider-input').attr('min', min);
|
|
$(template).find('.slider-input').attr('max', max);
|
|
$(template).find('.slider-input').attr('value', value);
|
|
$(template).find('.slider-input').attr('step', step);
|
|
}
|
|
|
|
on_ready ({ listen }) {
|
|
const input = this.dom_.querySelector('.slider-input');
|
|
|
|
input.addEventListener('input', e => {
|
|
const on_change = this.get('on_change');
|
|
if (on_change) {
|
|
const name = this.get('name');
|
|
const label = this.get('label') ?? name;
|
|
e.meta = { name, label };
|
|
on_change(e);
|
|
}
|
|
});
|
|
|
|
listen('value', value => {
|
|
input.value = value;
|
|
});
|
|
}
|
|
});
|