Updated colorpicker

Kiuryy · Nov 11, 2017 · f5e1562 · f5e1562
1 parent 019dd21
commit f5e1562
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 8 deletions.
diff --git a/dist/css/settings.css b/dist/css/settings.css
diff --git a/dist/img/settings/icon-light.svg b/dist/img/settings/icon-light.svg
diff --git a/dist/js/settings.js b/dist/js/settings.js
diff --git a/src/css/settings.css b/src/css/settings.css
diff --git a/src/css/settings.css.map b/src/css/settings.css.map
diff --git a/src/img/settings/icon-light.svg b/src/img/settings/icon-light.svg
diff --git a/src/js/lib/colorpicker.js b/src/js/lib/colorpicker.js
@@ -24,7 +24,7 @@ window.Colorpicker = (() => {
  /**
  * Returns whether the given value is an numeric value or not
  *
- * @param {int} value
+ * @param value
  * @returns {boolean}
  */
  let isNumeric = (value) => {
@@ -365,6 +365,10 @@ window.Colorpicker = (() => {
  preview.className = "color-preview";
  field.parentNode.insertBefore(preview, field.nextSibling);
 
+ field.ownerDocument.defaultView.addEventListener("resize", () => {
+ this.reposition();
+ });
+
  preview.addEventListener("click", (e) => {
  e.preventDefault();
  e.stopPropagation();
@@ -692,9 +696,24 @@ window.Colorpicker = (() => {
  */
  this.reposition = () => {
  if (wrapper.classList.contains("visible")) {
+ let pos = ["bottom", "left"];
  let rect = preview.getBoundingClientRect();
- wrapper.style.top = (rect.top + preview.offsetHeight) + "px";
- wrapper.style.left = rect.left + "px";
+ let top = rect.top + preview.offsetHeight;
+ let left = rect.left;
+
+ if (wrapper.offsetHeight + top > window.innerHeight) {
+ top = rect.top - wrapper.offsetHeight;
+ pos[0] = "top";
+ }
+
+ if (wrapper.offsetWidth + left > window.innerWidth) {
+ left = rect.left - wrapper.offsetWidth + preview.offsetWidth;
+ pos[1] = "right";
+ }
+
+ wrapper.setAttribute("data-pos", pos.join("-"));
+ wrapper.style.top = top + "px";
+ wrapper.style.left = left + "px";
  }
  };
 

diff --git a/src/scss/include/settings/_colorpicker.scss b/src/scss/include/settings/_colorpicker.scss
@@ -14,6 +14,10 @@ div.color-picker {
 
  $leftColWidth: 160px;
 
+ &[data-pos='bottom-right'], &[data-pos='top-right'] {
+ margin-left: 10px;
+ }
+
  &.visible {
  display: block;
  }