Sha256: b1ab1035a5c0b299b75a2d3a030a2c15b8fc8b798e9289a591d3dbefee783eb1

Contents?: true

Size: 978 Bytes

Versions: 6

Compression:

Stored size: 978 Bytes

Contents

import { Controller } from "@hotwired/stimulus"
import { debounce } from "helpers/timing_helpers"

export default class extends Controller {
  static targets = [ "list" ]
  static classes = [ "active", "selected" ]

  initialize() {
    this.filter = debounce(this.filter.bind(this), 300)
  }

  filter({ target }) {
    this.#reset()

    if (target.value != "") {
      this.#selectMatches(target.value)
      this.#activate()
    } else {
      this.#deactivate()
    }
  }

  #reset() {
    this.listTarget.querySelectorAll(`.${this.selectedClass}`).forEach((element) => {
      element.classList.remove(this.selectedClass)
    })
  }

  #selectMatches(value) {
    this.listTarget.querySelectorAll(`[data-value*=${value.toLowerCase()}]`).forEach((element) => {
      element.classList.add(this.selectedClass)
    })
  }

  #activate() {
    this.listTarget.classList.add(this.activeClass)
  }

  #deactivate() {
    this.listTarget.classList.remove(this.activeClass)
  }
}

Version data entries

6 entries across 6 versions & 1 rubygems

Version Path
css-zero-0.0.49 lib/generators/css_zero/add/templates/app/javascript/controllers/filter_controller.js
css-zero-0.0.48 lib/generators/css_zero/add/templates/app/javascript/controllers/filter_controller.js
css-zero-0.0.47 lib/generators/css_zero/add/templates/app/javascript/controllers/filter_controller.js
css-zero-0.0.46 lib/generators/css_zero/add/templates/app/javascript/controllers/filter_controller.js
css-zero-0.0.45 lib/generators/css_zero/add/templates/app/javascript/controllers/filter_controller.js
css-zero-0.0.44 lib/generators/css_zero/add/templates/app/javascript/controllers/filter_controller.js