material-motion-views-dom/dist/SliderProperties.js

DOM support for Material Motion

"use strict";
/** @license
 *  Copyright 2016 - present The Material Motion Authors. All Rights Reserved.
 *
 *  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.
 */
Object.defineProperty(exports, "__esModule", { value: true });
const material_motion_1 = require("material-motion");
const getEventStreamFromElement_1 = require("./getEventStreamFromElement");
/**
 * Exposes reactive `min$`, `max$`, and `value$` properties for the given input
 * element.
 */
class SliderProperties {
    get min() {
        return this.min$.read();
    }
    set min(value) {
        this.min$.write(value);
    }
    get max() {
        return this.max$.read();
    }
    set max(value) {
        this.max$.write(value);
    }
    get value() {
        return this.value$.read();
    }
    set value(value) {
        this.value$.write(value);
    }
    constructor({ element, value$ }) {
        this.element = element;
        this.min$ = new material_motion_1.MotionProperty({
            read: () => {
                return parseFloat(this.element.getAttribute('min'));
            },
            write: (value) => {
                this.element.setAttribute('min', value.toFixed(4));
            }
        });
        this.max$ = new material_motion_1.MotionProperty({
            read: () => {
                return parseFloat(this.element.getAttribute('max'));
            },
            write: (value) => {
                this.element.setAttribute('max', value.toFixed(4));
            }
        });
        this.min$.subscribe(min => this.element.setAttribute('min', min));
        this.max$.subscribe(max => this.element.setAttribute('max', max));
        this.value$ = value$ || material_motion_1.createProperty({
            initialValue: parseFloat(this.element.value) || 0
        });
        this.element.value = this.value.toFixed(4);
        getEventStreamFromElement_1.getEventStreamFromElement('input', this.element)._map({
            transform: (event) => parseFloat(this.element.value)
        }).subscribe(this.value$);
    }
}
exports.SliderProperties = SliderProperties;
exports.default = SliderProperties;
//# sourceMappingURL=SliderProperties.js.map