<commit_before>import { Slider } from './slider.js';
import { controllers } from './Controller.js';
import { setURL } from '../util.js';

export class OpacitySlider extends Slider {
    constructor() {
        super(284, 20);
    }

    connectedCallback() {
        super.connectedCallback();

        const opacityDisplay = document.createElement('div');
        opacityDisplay.id = 'opacity-display';

        const slider = this.shadowRoot.querySelector('#slider');
        slider.insertBefore(opacityDisplay, slider.firstChild);

        var opacity = controllers.opacity.getValue();
        opacityDisplay.innerHTML = opacity;

        const sliderHead = this.shadowRoot.querySelector('#slider-head');
        sliderHead.onpointerdown = (e) => {
            const updateCallback = (newFrame) => this.updateHeadPosition(newFrame)
            this.dragSliderHead(e, this.frame, updateCallback, setURL)
        }
        controllers.opacity.subscribe(() => {
            this.updateOpacity();
        });

        this.updateOpacity();
    }

    updateHeadPosition(newFrame) {<commit_msg>updates URL when clicking the bar of the opacity slider<commit_after>import { Slider } from './slider.js';
import { controllers } from './Controller.js';
import { setURL } from '../util.js';

export class OpacitySlider extends Slider {
    constructor() {
        super(284, 20);
    }

    connectedCallback() {
        super.connectedCallback();

        const opacityDisplay = document.createElement('div');
        opacityDisplay.id = 'opacity-display';

        const slider = this.shadowRoot.querySelector('#slider');
        slider.insertBefore(opacityDisplay, slider.firstChild);

        var opacity = controllers.opacity.getValue();
        opacityDisplay.innerHTML = opacity;

        const sliderHead = this.shadowRoot.querySelector('#slider-head');
        sliderHead.onpointerdown = (e) => {
            const updateCallback = (newFrame) => this.updateHeadPosition(newFrame)
            this.dragSliderHead(e, this.frame, updateCallback, setURL)
        }
        const sliderBar = this.shadowRoot.querySelector('#slider-bar');
        sliderBar.onclick = (e) => {
            const updateCallback = (newFrame) => {
                this.updateHeadPosition(newFrame);
                setURL();
            }
            this.clickBar(e, updateCallback);
        }

        controllers.opacity.subscribe(() => {
            this.updateOpacity();
        });

        this.updateOpacity();
    }

    updateHeadPosition(newFrame) {
{'fraction_non_alphanumeric': 0.12273086029992107, 'fraction_numerical': 0.003946329913180742, 'mean_word_length': 2.590651558073654, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1539639', 'n_tokens_mistral': 673, 'n_tokens_neox': 639, 'n_words': 129}