jeudi 21 mai 2020

Custom created toggle switch in Polymer1.0 doesn't work for more than one instance

Imported Polymer (1.0.0) and created a custom control which toggles and display text based on toggle value whether it is enabled or disabled. When I use this element more than once the text is not changing properly. Only for the first instance, it works, the remaining instance text is not changing it remains as Disabled in both states of the toggle switch.

<link rel="import" href="../bower_components/polymer/polymer.html" />

<dom-module id="toggle-element">

  <style>
    #labelDisplay {
      height: 14px;
      width: 43px;
      color: #4d4d4d;
      font-family: Roboto;
      font-size: 12px;
      line-height: 14px;
      margin-left: 6px;
    }
    .switch {
      position: relative;
      display: inline-block;
      width: 41px;
      height: 16px;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #cacaca;
      -webkit-transition: 0.4s;
      transition: 0.4s;
    }

    .slider:before {
      /* Slider Round */
      position: absolute;
      content: "";
      height: 12.5px;
      width: 12.5px;
      top: 1px;
      background-color: white;
      -webkit-transition: 0.2s;
      transition: 0.2s;
    }

    input:checked + .slider {
      background-color: #329b46;
    }

    input:focus + .slider {
      box-shadow: 0 0 1px #329b46;
    }

    input:checked + .slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
      border-radius: 40px;
    }

    .slider.round:before {
      border-radius: 50%;
    }
  </style>
  <template>
    <label class="switch">
      <input type="checkbox" id="checkInput" on-change="setValue" />
      <span class="slider round"></span>
    </label>
    <span id="labelDisplay">Disabled</span>
  </template>

Below is the custom element scripting file which handles text display (Enabled/Disabled) based on toggle switch value.

  <script>
    Polymer({
      is: "toggle-element",
      properties: {
        status: String,
      },
      setValue: function () {
        //Changes checkbox label based on checkbox value

        // Get status of toggle switch (Id : status) &
        // Set label text value respectively (Id : value)
        [
          document.getElementById("labelDisplay").innerHTML,
          this.status,
        ] = document.getElementById("checkInput").checked
          ? ["Enabled", "true"]
          : ["Disabled", "false"];
      },
    });
  </script>
</dom-module>



Aucun commentaire:

Enregistrer un commentaire