@unabridged/midwest 0.16.1 → 0.17.0

package/app/assets/javascript/midwest/index.ts

@@ -18,6 +18,7 @@ import Chart from '../../../components/midwest/chart_component/chart_component_c
 import Range from '../../../components/midwest/form/range_component/range_component_controller'
 import Rating from '../../../components/midwest/rating_component/rating_component_controller'
 import Autocomplete from '../../../components/midwest/form/autocomplete_component/autocomplete_component_controller'
+import Image from '../../../components/midwest/image_component/image_component_controller'
 /* IMPORTS */
 
 export { Card, Banner, CountdownTimer, Chart }
@@ -43,5 +44,6 @@ export function registerMidwestControllers (application: any) {
   application.register('midwest-range', Range)
   application.register('midwest-rating', Rating)
   application.register('midwest-autocomplete', Autocomplete)
+  application.register('midwest-image', Image)
   /* EXPORTS */
 }

package/app/assets/javascript/midwest.js

@@ -3111,16 +3111,23 @@ class Dialog extends Controller {
 }
 
 class Tabs extends Controller {
-  static targets = ["tab", "panel"];
+  static targets = ["tab", "panel", "list"];
   connect() {
     const activeIndex = this.tabTargets.findIndex(
       (tab) => tab.getAttribute("aria-selected") === "true"
     );
     this.activateTab(activeIndex >= 0 ? activeIndex : 0);
     this.element.addEventListener("keydown", this.handleKeydown);
+    if (this.hasListTarget) {
+      this.updateOverflow();
+      this.listTarget.addEventListener("scroll", this.updateOverflow);
+    }
   }
   disconnect() {
     this.element.removeEventListener("keydown", this.handleKeydown);
+    if (this.hasListTarget) {
+      this.listTarget.removeEventListener("scroll", this.updateOverflow);
+    }
   }
   select(event) {
     const tab = event.currentTarget;
@@ -3128,6 +3135,13 @@ class Tabs extends Controller {
     if (index >= 0)
       this.activateTab(index);
   }
+  updateOverflow = () => {
+    if (!this.hasListTarget)
+      return;
+    const list = this.listTarget;
+    list.classList.toggle("can-scroll-left", list.scrollLeft > 0);
+    list.classList.toggle("can-scroll-right", list.scrollLeft < list.scrollWidth - list.clientWidth - 1);
+  };
   handleKeydown = (event) => {
     const tabs = this.tabTargets;
     if (tabs.length === 0)
@@ -3230,7 +3244,8 @@ class Carousel extends Controller {
   static targets = ["track", "prev", "next", "dot"];
   static values = {
     wizard: { type: Boolean, default: false },
-    autoplay: { type: Number, default: 0 }
+    autoplay: { type: Number, default: 0 },
+    loop: { type: Boolean, default: false }
   };
   observer = null;
   _currentIndex = 0;
@@ -3266,10 +3281,21 @@ class Carousel extends Controller {
     this.stopAutoplay();
   }
   next() {
-    this.trackTarget.scrollBy({ left: this.trackTarget.clientWidth, behavior: "smooth" });
+    const atEnd = this._currentIndex >= this.slides.length - 1;
+    if (this.loopValue && atEnd) {
+      this.slides[0]?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+    } else {
+      this.trackTarget.scrollBy({ left: this.trackTarget.clientWidth, behavior: "smooth" });
+    }
   }
   previous() {
-    this.trackTarget.scrollBy({ left: -this.trackTarget.clientWidth, behavior: "smooth" });
+    const atStart = this._currentIndex <= 0;
+    if (this.loopValue && atStart) {
+      const last = this.slides[this.slides.length - 1];
+      last?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+    } else {
+      this.trackTarget.scrollBy({ left: -this.trackTarget.clientWidth, behavior: "smooth" });
+    }
   }
   goto(event) {
     const button = event.currentTarget;
@@ -3436,11 +3462,11 @@ class Carousel extends Controller {
     const atStart = track.scrollLeft <= 0;
     const atEnd = track.scrollLeft >= track.scrollWidth - track.clientWidth - 1;
     if (this.hasPrevTarget)
-      this.prevTarget.classList.toggle("hide", atStart);
+      this.prevTarget.classList.toggle("hide", atStart && !this.loopValue);
     if (this.hasNextTarget) {
       const atLastSlide = this._currentIndex >= this.slides.length - 1;
       const frontierReached = this.wizardValue && this._currentIndex >= this._maxUnlocked;
-      this.nextTarget.classList.toggle("hide", atEnd || atLastSlide || frontierReached);
+      this.nextTarget.classList.toggle("hide", (atEnd || atLastSlide || frontierReached) && !this.loopValue);
     }
     if (this.wizardValue && this.hasDotTarget) {
       this.dotTargets.forEach((dot, i) => {
@@ -4177,6 +4203,536 @@ class Autocomplete extends Controller {
   }
 }
 
+/*
+ * Color Thief v2.0
+ * by Lokesh Dhakar - http://www.lokeshdhakar.com
+ *
+ * Thanks
+ * ------
+ * Nick Rabinowitz - For creating quantize.js.
+ * John Schulz - For clean up and optimization. @JFSIII
+ * Nathan Spady - For adding drag and drop support to the demo page.
+ *
+ * License
+ * -------
+ * Copyright 2011, 2015 Lokesh Dhakar
+ * Released under the MIT license
+ * https://raw.githubusercontent.com/lokesh/color-thief/master/LICENSE
+ *
+ * @license
+ */
+const CanvasImage = function(image) {
+  this.canvas = document.createElement("canvas");
+  this.context = this.canvas.getContext("2d");
+  document.body.appendChild(this.canvas);
+  this.width = this.canvas.width = image.width;
+  this.height = this.canvas.height = image.height;
+  this.context.drawImage(image, 0, 0, this.width, this.height);
+};
+CanvasImage.prototype.clear = function() {
+  this.context.clearRect(0, 0, this.width, this.height);
+};
+CanvasImage.prototype.update = function(imageData) {
+  this.context.putImageData(imageData, 0, 0);
+};
+CanvasImage.prototype.getPixelCount = function() {
+  return this.width * this.height;
+};
+CanvasImage.prototype.getImageData = function() {
+  return this.context.getImageData(0, 0, this.width, this.height);
+};
+CanvasImage.prototype.removeCanvas = function() {
+  this.canvas.parentNode.removeChild(this.canvas);
+};
+const ColorThief = function() {
+};
+ColorThief.prototype.getColor = function(sourceImage2, quality) {
+  const palette = this.getPalette(sourceImage2, 5, quality);
+  const dominantColor = palette[0];
+  return dominantColor;
+};
+ColorThief.prototype.getPalette = function(sourceImage2, colorCount, quality) {
+  if (typeof colorCount === "undefined" || colorCount < 2 || colorCount > 256) {
+    colorCount = 10;
+  }
+  if (typeof quality === "undefined" || quality < 1) {
+    quality = 10;
+  }
+  const image = new CanvasImage(sourceImage2);
+  const imageData = image.getImageData();
+  const pixels = imageData.data;
+  const pixelCount = image.getPixelCount();
+  const pixelArray = [];
+  for (var i = 0, offset, r, g, b, a; i < pixelCount; i = i + quality) {
+    offset = i * 4;
+    r = pixels[offset + 0];
+    g = pixels[offset + 1];
+    b = pixels[offset + 2];
+    a = pixels[offset + 3];
+    if (a >= 125) {
+      if (!(r > 250 && g > 250 && b > 250)) {
+        pixelArray.push([r, g, b]);
+      }
+    }
+  }
+  const cmap = MMCQ.quantize(pixelArray, colorCount);
+  const palette = cmap ? cmap.palette() : null;
+  image.removeCanvas();
+  return palette;
+};
+ColorThief.prototype.getColorFromUrl = function(imageUrl, callback, quality) {
+  sourceImage = document.createElement("img");
+  const thief = this;
+  sourceImage.addEventListener("load", function() {
+    const palette = thief.getPalette(sourceImage, 5, quality);
+    const dominantColor = palette[0];
+    callback(dominantColor, imageUrl);
+  });
+  sourceImage.src = imageUrl;
+};
+ColorThief.prototype.getImageData = function(imageUrl, callback) {
+  xhr = new XMLHttpRequest();
+  xhr.open("GET", imageUrl, true);
+  xhr.responseType = "arraybuffer";
+  xhr.onload = function(e) {
+    if (this.status == 200) {
+      uInt8Array = new Uint8Array(this.response);
+      i = uInt8Array.length;
+      binaryString = new Array(i);
+      for (var i = 0; i < uInt8Array.length; i++) {
+        binaryString[i] = String.fromCharCode(uInt8Array[i]);
+      }
+      data = binaryString.join("");
+      base64 = window.btoa(data);
+      callback("data:image/png;base64," + base64);
+    }
+  };
+  xhr.send();
+};
+ColorThief.prototype.getColorAsync = function(imageUrl, callback, quality) {
+  const thief = this;
+  this.getImageData(imageUrl, function(imageData) {
+    sourceImage = document.createElement("img");
+    sourceImage.addEventListener("load", function() {
+      const palette = thief.getPalette(sourceImage, 5, quality);
+      const dominantColor = palette[0];
+      callback(dominantColor, this);
+    });
+    sourceImage.src = imageData;
+  });
+};
+/*!
+ * quantize.js Copyright 2008 Nick Rabinowitz.
+ * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
+ * @license
+ */
+/*!
+ * Block below copied from Protovis: http://mbostock.github.com/protovis/
+ * Copyright 2010 Stanford Visualization Group
+ * Licensed under the BSD License: http://www.opensource.org/licenses/bsd-license.php
+ * @license
+ */
+if (!pv) {
+  var pv = {
+    map: function(array, f) {
+      const o = {};
+      return f ? array.map(function(d, i) {
+        o.index = i;
+        return f.call(o, d);
+      }) : array.slice();
+    },
+    naturalOrder: function(a, b) {
+      return a < b ? -1 : a > b ? 1 : 0;
+    },
+    sum: function(array, f) {
+      const o = {};
+      return array.reduce(f ? function(p, d, i) {
+        o.index = i;
+        return p + f.call(o, d);
+      } : function(p, d) {
+        return p + d;
+      }, 0);
+    },
+    max: function(array, f) {
+      return Math.max.apply(null, f ? pv.map(array, f) : array);
+    }
+  };
+}
+var MMCQ = function() {
+  const sigbits = 5, rshift = 8 - sigbits, maxIterations = 1e3, fractByPopulations = 0.75;
+  function getColorIndex(r, g, b) {
+    return (r << 2 * sigbits) + (g << sigbits) + b;
+  }
+  function PQueue(comparator) {
+    let contents = [], sorted = false;
+    function sort() {
+      contents.sort(comparator);
+      sorted = true;
+    }
+    return {
+      push: function(o) {
+        contents.push(o);
+        sorted = false;
+      },
+      peek: function(index) {
+        if (!sorted)
+          sort();
+        if (index === void 0)
+          index = contents.length - 1;
+        return contents[index];
+      },
+      pop: function() {
+        if (!sorted)
+          sort();
+        return contents.pop();
+      },
+      size: function() {
+        return contents.length;
+      },
+      map: function(f) {
+        return contents.map(f);
+      },
+      debug: function() {
+        if (!sorted)
+          sort();
+        return contents;
+      }
+    };
+  }
+  function VBox(r1, r2, g1, g2, b1, b2, histo) {
+    const vbox = this;
+    vbox.r1 = r1;
+    vbox.r2 = r2;
+    vbox.g1 = g1;
+    vbox.g2 = g2;
+    vbox.b1 = b1;
+    vbox.b2 = b2;
+    vbox.histo = histo;
+  }
+  VBox.prototype = {
+    volume: function(force) {
+      const vbox = this;
+      if (!vbox._volume || force) {
+        vbox._volume = (vbox.r2 - vbox.r1 + 1) * (vbox.g2 - vbox.g1 + 1) * (vbox.b2 - vbox.b1 + 1);
+      }
+      return vbox._volume;
+    },
+    count: function(force) {
+      const vbox = this, histo = vbox.histo;
+      if (!vbox._count_set || force) {
+        let npix = 0, index, i, j, k;
+        for (i = vbox.r1; i <= vbox.r2; i++) {
+          for (j = vbox.g1; j <= vbox.g2; j++) {
+            for (k = vbox.b1; k <= vbox.b2; k++) {
+              index = getColorIndex(i, j, k);
+              npix += histo[index] || 0;
+            }
+          }
+        }
+        vbox._count = npix;
+        vbox._count_set = true;
+      }
+      return vbox._count;
+    },
+    copy: function() {
+      const vbox = this;
+      return new VBox(vbox.r1, vbox.r2, vbox.g1, vbox.g2, vbox.b1, vbox.b2, vbox.histo);
+    },
+    avg: function(force) {
+      const vbox = this, histo = vbox.histo;
+      if (!vbox._avg || force) {
+        let ntot = 0, mult = 1 << 8 - sigbits, rsum = 0, gsum = 0, bsum = 0, hval, i, j, k, histoindex;
+        for (i = vbox.r1; i <= vbox.r2; i++) {
+          for (j = vbox.g1; j <= vbox.g2; j++) {
+            for (k = vbox.b1; k <= vbox.b2; k++) {
+              histoindex = getColorIndex(i, j, k);
+              hval = histo[histoindex] || 0;
+              ntot += hval;
+              rsum += hval * (i + 0.5) * mult;
+              gsum += hval * (j + 0.5) * mult;
+              bsum += hval * (k + 0.5) * mult;
+            }
+          }
+        }
+        if (ntot) {
+          vbox._avg = [~~(rsum / ntot), ~~(gsum / ntot), ~~(bsum / ntot)];
+        } else {
+          vbox._avg = [
+            ~~(mult * (vbox.r1 + vbox.r2 + 1) / 2),
+            ~~(mult * (vbox.g1 + vbox.g2 + 1) / 2),
+            ~~(mult * (vbox.b1 + vbox.b2 + 1) / 2)
+          ];
+        }
+      }
+      return vbox._avg;
+    },
+    contains: function(pixel) {
+      const vbox = this, rval = pixel[0] >> rshift;
+      gval = pixel[1] >> rshift;
+      bval = pixel[2] >> rshift;
+      return rval >= vbox.r1 && rval <= vbox.r2 && gval >= vbox.g1 && gval <= vbox.g2 && bval >= vbox.b1 && bval <= vbox.b2;
+    }
+  };
+  function CMap() {
+    this.vboxes = new PQueue(function(a, b) {
+      return pv.naturalOrder(
+        a.vbox.count() * a.vbox.volume(),
+        b.vbox.count() * b.vbox.volume()
+      );
+    });
+  }
+  CMap.prototype = {
+    push: function(vbox) {
+      this.vboxes.push({
+        vbox,
+        color: vbox.avg()
+      });
+    },
+    palette: function() {
+      return this.vboxes.map(function(vb) {
+        return vb.color;
+      });
+    },
+    size: function() {
+      return this.vboxes.size();
+    },
+    map: function(color) {
+      const vboxes = this.vboxes;
+      for (let i = 0; i < vboxes.size(); i++) {
+        if (vboxes.peek(i).vbox.contains(color)) {
+          return vboxes.peek(i).color;
+        }
+      }
+      return this.nearest(color);
+    },
+    nearest: function(color) {
+      let vboxes = this.vboxes, d1, d2, pColor;
+      for (let i = 0; i < vboxes.size(); i++) {
+        d2 = Math.sqrt(
+          Math.pow(color[0] - vboxes.peek(i).color[0], 2) + Math.pow(color[1] - vboxes.peek(i).color[1], 2) + Math.pow(color[2] - vboxes.peek(i).color[2], 2)
+        );
+        if (d2 < d1 || d1 === void 0) {
+          d1 = d2;
+          pColor = vboxes.peek(i).color;
+        }
+      }
+      return pColor;
+    },
+    forcebw: function() {
+      const vboxes = this.vboxes;
+      vboxes.sort(function(a, b) {
+        return pv.naturalOrder(pv.sum(a.color), pv.sum(b.color));
+      });
+      const lowest = vboxes[0].color;
+      if (lowest[0] < 5 && lowest[1] < 5 && lowest[2] < 5)
+        vboxes[0].color = [0, 0, 0];
+      const idx = vboxes.length - 1, highest = vboxes[idx].color;
+      if (highest[0] > 251 && highest[1] > 251 && highest[2] > 251)
+        vboxes[idx].color = [255, 255, 255];
+    }
+  };
+  function getHisto(pixels) {
+    let histosize = 1 << 3 * sigbits, histo = new Array(histosize), index, rval, gval2, bval2;
+    pixels.forEach(function(pixel) {
+      rval = pixel[0] >> rshift;
+      gval2 = pixel[1] >> rshift;
+      bval2 = pixel[2] >> rshift;
+      index = getColorIndex(rval, gval2, bval2);
+      histo[index] = (histo[index] || 0) + 1;
+    });
+    return histo;
+  }
+  function vboxFromPixels(pixels, histo) {
+    let rmin = 1e6, rmax = 0, gmin = 1e6, gmax = 0, bmin = 1e6, bmax = 0, rval, gval2, bval2;
+    pixels.forEach(function(pixel) {
+      rval = pixel[0] >> rshift;
+      gval2 = pixel[1] >> rshift;
+      bval2 = pixel[2] >> rshift;
+      if (rval < rmin)
+        rmin = rval;
+      else if (rval > rmax)
+        rmax = rval;
+      if (gval2 < gmin)
+        gmin = gval2;
+      else if (gval2 > gmax)
+        gmax = gval2;
+      if (bval2 < bmin)
+        bmin = bval2;
+      else if (bval2 > bmax)
+        bmax = bval2;
+    });
+    return new VBox(rmin, rmax, gmin, gmax, bmin, bmax, histo);
+  }
+  function medianCutApply(histo, vbox) {
+    if (!vbox.count())
+      return;
+    const rw = vbox.r2 - vbox.r1 + 1, gw = vbox.g2 - vbox.g1 + 1, bw = vbox.b2 - vbox.b1 + 1, maxw = pv.max([rw, gw, bw]);
+    if (vbox.count() == 1) {
+      return [vbox.copy()];
+    }
+    let total = 0, partialsum = [], lookaheadsum = [], i, j, k, sum, index;
+    if (maxw == rw) {
+      for (i = vbox.r1; i <= vbox.r2; i++) {
+        sum = 0;
+        for (j = vbox.g1; j <= vbox.g2; j++) {
+          for (k = vbox.b1; k <= vbox.b2; k++) {
+            index = getColorIndex(i, j, k);
+            sum += histo[index] || 0;
+          }
+        }
+        total += sum;
+        partialsum[i] = total;
+      }
+    } else if (maxw == gw) {
+      for (i = vbox.g1; i <= vbox.g2; i++) {
+        sum = 0;
+        for (j = vbox.r1; j <= vbox.r2; j++) {
+          for (k = vbox.b1; k <= vbox.b2; k++) {
+            index = getColorIndex(j, i, k);
+            sum += histo[index] || 0;
+          }
+        }
+        total += sum;
+        partialsum[i] = total;
+      }
+    } else {
+      for (i = vbox.b1; i <= vbox.b2; i++) {
+        sum = 0;
+        for (j = vbox.r1; j <= vbox.r2; j++) {
+          for (k = vbox.g1; k <= vbox.g2; k++) {
+            index = getColorIndex(j, k, i);
+            sum += histo[index] || 0;
+          }
+        }
+        total += sum;
+        partialsum[i] = total;
+      }
+    }
+    partialsum.forEach(function(d, i2) {
+      lookaheadsum[i2] = total - d;
+    });
+    function doCut(color) {
+      let dim1 = color + "1", dim2 = color + "2", left, right, vbox1, vbox2, d2, count2 = 0;
+      for (i = vbox[dim1]; i <= vbox[dim2]; i++) {
+        if (partialsum[i] > total / 2) {
+          vbox1 = vbox.copy();
+          vbox2 = vbox.copy();
+          left = i - vbox[dim1];
+          right = vbox[dim2] - i;
+          if (left <= right)
+            d2 = Math.min(vbox[dim2] - 1, ~~(i + right / 2));
+          else
+            d2 = Math.max(vbox[dim1], ~~(i - 1 - left / 2));
+          while (!partialsum[d2])
+            d2++;
+          count2 = lookaheadsum[d2];
+          while (!count2 && partialsum[d2 - 1])
+            count2 = lookaheadsum[--d2];
+          vbox1[dim2] = d2;
+          vbox2[dim1] = vbox1[dim2] + 1;
+          return [vbox1, vbox2];
+        }
+      }
+    }
+    return maxw == rw ? doCut("r") : maxw == gw ? doCut("g") : doCut("b");
+  }
+  function quantize(pixels, maxcolors) {
+    if (!pixels.length || maxcolors < 2 || maxcolors > 256) {
+      return false;
+    }
+    const histo = getHisto(pixels);
+    histo.forEach(function() {
+    });
+    const vbox = vboxFromPixels(pixels, histo), pq = new PQueue(function(a, b) {
+      return pv.naturalOrder(a.count(), b.count());
+    });
+    pq.push(vbox);
+    function iter(lh, target) {
+      let ncolors = 1, niters = 0, vbox2;
+      while (niters < maxIterations) {
+        vbox2 = lh.pop();
+        if (!vbox2.count()) {
+          lh.push(vbox2);
+          niters++;
+          continue;
+        }
+        const vboxes = medianCutApply(histo, vbox2), vbox1 = vboxes[0], vbox22 = vboxes[1];
+        if (!vbox1) {
+          return;
+        }
+        lh.push(vbox1);
+        if (vbox22) {
+          lh.push(vbox22);
+          ncolors++;
+        }
+        if (ncolors >= target)
+          return;
+        if (niters++ > maxIterations) {
+          return;
+        }
+      }
+    }
+    iter(pq, fractByPopulations * maxcolors);
+    const pq2 = new PQueue(function(a, b) {
+      return pv.naturalOrder(a.count() * a.volume(), b.count() * b.volume());
+    });
+    while (pq.size()) {
+      pq2.push(pq.pop());
+    }
+    iter(pq2, maxcolors - pq2.size());
+    const cmap = new CMap();
+    while (pq2.size()) {
+      cmap.push(pq2.pop());
+    }
+    return cmap;
+  }
+  return {
+    quantize
+  };
+}();
+
+class Image extends Controller {
+  static targets = ["dialog"];
+  static values = { poster: String };
+  connect() {
+    this.extractColor();
+  }
+  extractColor() {
+    if (!this.hasDialogTarget)
+      return;
+    const mainImg = this.element.querySelector("img.midwest-image-main");
+    const colorSource = this.posterValue || mainImg?.src;
+    if (!colorSource)
+      return;
+    const sample = new window.Image(80, 80);
+    sample.crossOrigin = "Anonymous";
+    sample.addEventListener("load", () => {
+      try {
+        const [r, g, b] = new ColorThief().getColor(sample);
+        this.dialogTarget.style.setProperty("--image-dominant-color", `${r} ${g} ${b}`);
+      } catch {
+      }
+    });
+    sample.src = colorSource;
+  }
+  zoom() {
+    if (this.hasDialogTarget) {
+      this.dialogTarget.showModal();
+    }
+  }
+  close() {
+    if (this.hasDialogTarget) {
+      this.dialogTarget.close();
+    }
+  }
+  // Close when clicking the backdrop (outside the dialog content).
+  backdropClose(event) {
+    if (event.target === this.dialogTarget) {
+      this.dialogTarget.close();
+    }
+  }
+}
+
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
   application.register("midwest-banner", Banner);
@@ -4198,6 +4754,7 @@ function registerMidwestControllers(application) {
   application.register("midwest-range", Range);
   application.register("midwest-rating", Rating);
   application.register("midwest-autocomplete", Autocomplete);
+  application.register("midwest-image", Image);
 }
 
 export { Banner, Card, Chart, CountdownTimer, registerMidwestControllers };