ht-elements-catalog/ht-elements-catalog-filter-item-checkbox.js at master · 01HT/ht-elements-catalog · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
"use strict";
import { LitElement, html, css } from "lit-element";
import { getPathFromParameters } from "./ht-elements-catalog-path-parser.js";
import "@polymer/paper-checkbox";

import { stylesBasicWebcomponents } from "@01ht/ht-theme/styles";

class HTElementsCatalogFilterItemCheckbox extends LitElement {
  static get styles() {
    return [
      stylesBasicWebcomponents,
      css`
        a {
          display: block;
          color: inherit;
          text-decoration: none;
        }

        paper-checkbox {
          font-size: 14px;
        }

        #container {
          display: flex;
          justify-content: space-between;
          margin-left: 8px;
          align-items: center;
          min-height: 35px;
        }

        #checkbox-inner {
          display: flex;
          align-items: center;
        }

        img {
          margin-right: 8px;
          display: block;
          width: 24px;
          height: 24px;
        }

        #number {
          margin-left: 16px;
          color: var(--secondary-text-color);
        }
      `
    ];
  }

  render() {
    const { data, href } = this;
    return html`
      <div id="container">
      <a href="${href}">
          <paper-checkbox noink ?checked="${this.getChecked()}">
          <div id="checkbox-inner">${
            data.imageURL
              ? html`<img src="${data.imageURL}" alt="${data.name}">`
              : ""
          }${data.name}</div>
          </paper-checkbox>
      </a>
      <div id="number">${data.number}</div>
      </div>
`;
  }

  static get properties() {
    return {
      data: { type: Object },
      type: { type: String },
      parameters: { type: Object },
      href: { type: String }
    };
  }

  constructor() {
    super();
    this.data = {};
    this.type = "";
  }

  getChecked() {
    if (this.data.name === undefined || !this.parameters[this.type])
      return false;
    if (this.parameters[this.type].indexOf(this.data.name) !== -1) return true;
    return false;
  }

  updated() {
    this._updateHref();
  }

  async _updateHref() {
    if (this.data.name === undefined) return;
    let parameters = JSON.parse(JSON.stringify(this.parameters));
    let name = this.data.name;
    let param = parameters[this.type];
    let isChecked = this.getChecked();
    if (isChecked) {
      let index = param.indexOf(name);
      param.splice(index, 1);
    }
    if (!isChecked) {
      if (!param) param = [name];
      if (param && param.indexOf(name) === -1) param.push(name);
    }
    parameters[this.type] = param;
    this.href = await getPathFromParameters(parameters);
  }
}
customElements.define(
  "ht-elements-catalog-filter-item-checkbox",
  HTElementsCatalogFilterItemCheckbox
);