<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Reproduce Coloris inline problem</title>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/mdbassit/Coloris@0.24.0/dist/coloris.min.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
<style>
    body {
  background: #e0beff;
  background: rgb(224 190 255 / 50%);
}

.clr-field button {
  width: 22px;
  height: 22px;
  left: 0;
  right: 0;
  border-radius: 5px;
  border: 1px solid #ddd;
  box-shadow: none !important;
}

.clr-field > button:after {
  border: 0 !important;
  box-shadow: none !important;
}

.color-picker,
.form-color-picker,
.clr-field > input {
  width: 22px !important;
  height: 22px !important;
  text-indent: -9999px !important;
  color: transparent !important;
  cursor: pointer !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 100% !important;
}

#clr-picker {
  display: flex !important;
  border-radius: 4px;
  position: relative !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  gap: 1rem !important;
  min-height: 180px;
  padding-left: 0 !important;
  padding-bottom: 180px !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: var(--bs-popover-zindex) !important;
}

#clr-color-area {
  top: auto;
  bottom: 0;
  width: 100%;
  height: 180px;
  border-radius: 4px;
}

#clr-swatches,
#clr-color-value,
#clr-color-preview {
  display: none;
}

#clr-picker .clr-hue {
  height: 16px;
  margin: 0 0 20px 0;
  width: calc(100% - 8px);
}

#clr-hue-slider {
  width: calc(100% + 20px);
  height: 100%;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  margin: 0;
  transform: translateX(-50%);
}

#clr-hue-marker {
  height: 28px;
  border-radius: 4px;
}

.form-color-picker-wrap {
  position: relative;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container pt-4">
  <div class="row row-cols-lg-1 row-cols-1 gap-3 justify-content-md-center">
    <div class="col-lg-6 col-md-6 collapse collapse-esp-settings">
      <nav class="navbar navbar-expand bg-body-tertiary shadow rounded">
        <div class="container-fluid">
          <div class="hstack gap-2 text-nowrap" role="tablist">
            <button class="btn btn-sm btn-outline-primary active" type="button" data-bs-toggle="tab" data-bs-target="#espSettings1" role="tab" aria-controls="espSettings1" aria-selected="true">WiFi</button>
            <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="tab" data-bs-target="#espSettings2" role="tab" aria-controls="espSettings2" aria-selected="false">Connected Devices</button>
          </div>
          <div class="hstack gap-1 justify-content-center align-items-center">
            <!-- Reboot -->
            <button id="reboot" title="Reboot" class="btn btn-sm btn-success border-0 rounded-pill p-0 m-0" type="button">
              <div class="hstack gap-1 justify-content-center align-items-center border-0 w-auto h-auto">
                <img src="static/svg/sync.svg" alt="reboot" width="26">
              </div>
            </button>
          </div>
        </div>
      </nav>
    </div>
    <!-- Toasts -->

    <!-- General Settings Tabs Content -->
    <div class="col-lg-6 col-md-6">
      <div class="card shadow border-0">
        <div class="card-header">
          <div class="d-flex gap-1 w-100 align-items-center">
            <label for="rgbSwitch">
              <strong class="text-danger">R</strong>
              <strong class="text-success">G</strong>
              <strong class="text-primary">B</strong>
            </label>
          </div>
        </div>
        <div class="card-body">
          <div class="d-flex gap-3 flex-column">
            <div class="form-color-picker-wrap  clr-open d-flex gap-3 align-items-start">
              <input id="rgbColor" type="text" class="form-color-picker" value="rgb(84, 139, 127)" inputmode='none'>
            </div>
            <!-- Red -->
            <div class="d-flex gap-3 align-items-center justify-content-between">
              <input disabled type="text" class="form-color-picker" value="rgb(84, 0, 0)">
              <input id="redColor" type="range" min="0" max="255" class="form-range form-update-event" value="84">
              <output class="form-range-output text-muted">84</output>
              <div class="form-range-buttons input-group input-group-sm w-auto flex-nowrap">
                <button class="btn btn-outline-secondary form-range-down" type="button">-</button>
                <button class="btn btn-outline-secondary form-range-up" type="button">+</button>
              </div>
            </div>
            <!-- Green -->
            <div class="d-flex gap-3 align-items-center justify-content-between">
              <input disabled type="text" class="form-color-picker" value="rgb(0, 139, 0)">
              <input id="greenColor" type="range" min="0" max="255" class="form-range form-update-event" value="139">
              <output class="form-range-output text-muted">139</output>
              <div class="form-range-buttons input-group input-group-sm w-auto flex-nowrap">
                <button class="btn btn-outline-secondary form-range-down" type="button">-</button>
                <button class="btn btn-outline-secondary form-range-up" type="button">+</button>
              </div>
            </div>
            <!-- Blue -->
            <div class="d-flex gap-3 align-items-center justify-content-between">
              <input disabled type="text" class="form-color-picker" value="rgb(0, 0, 127)">
              <input id="blueColor" type="range" min="0" max="255" class="form-range form-update-event" value="127">
              <output class="form-range-output text-muted">127</output>
              <div class="form-range-buttons input-group input-group-sm w-auto flex-nowrap">
                <button class="btn btn-outline-secondary form-range-down" type="button">-</button>
                <button class="btn btn-outline-secondary form-range-up" type="button">+</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- partial -->
  <script src='https://cdn.jsdelivr.net/gh/mdbassit/Coloris@0.24.0/dist/coloris.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js'></script>
<script>(function (app, ws) {
    "use strict";
  
    /**
     *
     */
    this.init = () => {
      this.$ = {};
  
      this.$.colorPickerValue = document.getElementById("clr-color-value");
      this.$.rgbColor = document.getElementById("rgbColor");
      this.$.redColor = document.getElementById("redColor");
      this.$.greenColor = document.getElementById("greenColor");
      this.$.blueColor = document.getElementById("blueColor");
  
      this.$.redColorThumbnail = this.$.redColor.previousElementSibling;
      this.$.greenColorThumbnail = this.$.greenColor.previousElementSibling;
      this.$.blueColorThumbnail = this.$.blueColor.previousElementSibling;
  
      this.initInputTypeRange();
      this.initInputTypeColorPicker();
    };
  
    /**
     *
     */
    this.initInputTypeRange = () => {
      // print range value
      document
        .querySelectorAll("input.form-range~.form-range-output")
        .forEach((output) => {
          let input,
            max = 3;
  
          for (let item of output.parentNode.children) {
            if (item.classList.contains("form-range")) {
              input = item;
              break;
            }
          }
  
          if (input.hasAttribute("max")) {
            max = input.getAttribute("max").length;
          }
  
          input.addEventListener("input", (e) => {
            let value = e.target.value.toString();
  
            // number pad
            while (value.length < max) value = "0" + value;
  
            if (typeof output.value !== "undefined") {
              output.value = value;
            } else {
              output.innerHTML = value;
            }
          });
        });
  
      // handle up/down buttons
      document
        .querySelectorAll("input.form-range~.form-range-buttons")
        .forEach((btnGroup) => {
          let input;
  
          for (let item of btnGroup.parentNode.children) {
            if (item.classList.contains("form-range")) {
              input = item;
              break;
            }
          }
  
          btnGroup.addEventListener("click", (e) => {
            let btn = e.target,
              step = btn.classList.contains("form-range-up") ? 1 : -1,
              value = parseInt(input.value) + step;
  
            this.setValue(input, value);
          });
        });
    };
  
    /**
     *
     */
    this.initInputTypeColorPicker = () => {
      if (typeof Coloris == "undefined") {
        return;
      }
  
      let lock,
        scrollHeight = document.documentElement.scrollHeight;
  
      const colorPicket = Coloris({
        el: ".form-color-picker",
        parent: ".form-color-picker-wrap",
        format: "rgb",
        theme: "pill",
        themeMode: "dark",
        margin: 0,
        wrap: true,
        rtl: false,
        alpha: false,
        focusInput: false,
        inline: true,
        formatToggle: false,
        closeButton: false,
        clearButton: false,
        swatches: [],
        onChange: (color) => {
          if (!color) {
            return;
          }
  
          const rgb = color.match(/rgb\((\d+), (\d+), (\d+)\)/);
  
          lock = true;
  
          // update input
          this.setValue(this.$.redColor, rgb[1]);
          this.setValue(this.$.greenColor, rgb[2]);
          this.setValue(this.$.blueColor, rgb[3]);
  
          lock = false;
        }
      });
  
      const updateColorPickerMarker = () => {
        // avoid loop
        if (lock) {
          return;
        }
  
        this.setValue(
          this.$.colorPickerValue,
          `rgb(${this.$.redColor.value}, ${this.$.greenColor.value}, ${this.$.blueColor.value})`,
          "change"
        );
      };
  
      const updateColorPickerPosition = () => {
        Coloris.updatePosition();
      };
  
      const updateColorPickerThumbnail = (e) => {
        this.setValue(
          this.$.rgbColor,
          `rgb(${this.$.redColor.value}, ${this.$.greenColor.value}, ${this.$.blueColor.value})`
        );
  
        this.setValue(
          this.$.redColorThumbnail,
          `rgb(${this.$.redColor.value}, 0, 0)`
        );
        this.setValue(
          this.$.greenColorThumbnail,
          `rgb(0, ${this.$.greenColor.value}, 0)`
        );
        this.setValue(
          this.$.blueColorThumbnail,
          `rgb(0, 0, ${this.$.blueColor.value})`
        );
  
        updateColorPickerMarker();
      };
  
      this.$.redColor.addEventListener("input", updateColorPickerThumbnail);
      this.$.greenColor.addEventListener("input", updateColorPickerThumbnail);
      this.$.blueColor.addEventListener("input", updateColorPickerThumbnail);
  
      setInterval(() => {
        let currentScrollHeight = document.documentElement.scrollHeight;
  
        if (scrollHeight !== currentScrollHeight) {
          scrollHeight = currentScrollHeight;
          updateColorPickerPosition();
          updateColorPickerMarker();
        }
      }, 50);
  
      window.addEventListener("resize", () => {
        updateColorPickerPosition();
        updateColorPickerMarker();
      });
    };
  
    /**
     *
     */
    this.setValue = (input, value, events = ["input"]) => {
      if (
        !input ||
        typeof input.value === "undefined" ||
        typeof input.type === "undefined"
      ) {
        return;
      }
  
      let oldValue;
  
      if (input.type === "checkbox") {
        oldValue = !!input.checked;
        input.checked = !!value;
      } else {
        value = value.toString();
        oldValue = input.value.toString();
        input.value = value;
      }
  
      if (events && value !== oldValue) {
        if (typeof events === "string") {
          input.dispatchEvent(new Event(events, { bubbles: true }));
        } else if (Array.isArray(events)) {
          events.forEach(function (event) {
            input.dispatchEvent(new Event(event, { bubbles: true }));
          });
        }
      }
    };
  
    if (document.readyState === "loading") {
      window.addEventListener("load", this.init);
    } else {
      this.init();
    }
  }.bind((window.settings = {}))());</script>

</body>
</html>
