@innovastudio/contentbuilder 1.5.62 → 1.5.63

package/public/contentbuilder/contentbuilder.esm.js

@@ -4645,13 +4645,9 @@ class Util {
     // Hide other pops
     let elms = document.querySelectorAll('.is-pop.active');
     elms.forEach(otherPop => {
+      // do not close parent/caller pop
       let close = true;
-      let callerPop;
-      if (overlay) {
-        // do not close parent/caller pop
-        callerPop = btn.closest('.is-pop');
-        if (callerPop === otherPop) close = false;
-      }
+      if (otherPop.contains(btn)) close = false;
       if (otherPop !== pop && close) {
         otherPop.style.display = '';
         dom.removeClass(otherPop, 'active');
@@ -4677,9 +4673,9 @@ class Util {
       if (!pop.contains(e.target) && !btn.contains(e.target)) {
         // click outside
 
-        if (e.target.closest('.is-pop-overlay')) return;
-        let overlayExist = document.querySelector('.is-pop-overlay');
-        if (overlayExist) return;
+        // if(e.target.closest('.is-pop-overlay')) return;
+        // let overlayExist = document.querySelector('.is-pop-overlay');
+        // if(overlayExist) return;
 
         // hide
         this.hidePop(pop);
@@ -27731,7 +27727,7 @@ function () {
   return EventEmitter;
 }();
 
-var EventEmitter$1$1 = EventEmitter$2;
+var EventEmitter$1$2 = EventEmitter$2;
 
 /*
 Copyright (c) 2019 Daybrush
@@ -40242,7 +40238,7 @@ var MoveableManager$1 = /*#__PURE__*/function (_super) {
       "mouseEnter": null,
       "mouseLeave": null
     };
-    _this._emitter = new EventEmitter$1$1();
+    _this._emitter = new EventEmitter$1$2();
     _this._prevTarget = null;
     _this._prevDragArea = false;
     _this._observer = null;
@@ -42171,7 +42167,7 @@ function __spreadArrays() {
  * Implement EventEmitter on object or component.
  */
 
-var EventEmitter =
+var EventEmitter$1 =
 /*#__PURE__*/
 function () {
   function EventEmitter() {
@@ -42404,7 +42400,7 @@ function () {
   return EventEmitter;
 }();
 
-var EventEmitter$1 = EventEmitter;
+var EventEmitter$1$1 = EventEmitter$1;
 
 /**
  * Moveable is Draggable! Resizable! Scalable! Rotatable!
@@ -42518,7 +42514,7 @@ function (_super) {
     });
   })], MoveableManager);
   return MoveableManager;
-}(EventEmitter$1);
+}(EventEmitter$1$1);
 
 var Moveable$1 =
 /*#__PURE__*/
@@ -63807,6 +63803,418 @@ class RoundedSlider {
   }
 }
 
+class EventEmitter {
+  constructor() {
+    this.listeners = {};
+  }
+  on(event, listener) {
+    if (!this.listeners[event]) {
+      this.listeners[event] = [];
+    }
+    this.listeners[event].push(listener);
+  }
+  emit(event, ...args) {
+    if (this.listeners[event]) {
+      this.listeners[event].forEach(listener => {
+        listener(...args);
+      });
+    }
+  }
+}
+
+/*
+// Usage example
+
+const myGradientSlider = document.querySelector('.myslider');
+const slider = new GradientSlider(myGradientSlider);
+slider.draw([
+        { color: 'rgba(4, 98, 183, 1)', position: 0 },
+        { color: 'rgba(97, 110, 204, 1)', position: 25 },
+        { color: 'rgba(246, 108, 168, 1)', position: 50 },
+        { color: 'rgba(255, 211, 111, 1)', position: 75 },
+        { color: 'rgba(255, 253, 193, 1)', position: 100 }
+    ]
+);
+
+slider.on('slideStart', (sliderPoint) => {
+    console.log('Sliding started', sliderPoint);
+});
+slider.on('slideEnd', () => {
+    console.log('Sliding ended');
+});
+slider.on('change', (pointsArray) => {
+    console.log('Slider changed', pointsArray);
+});
+slider.on('slideChange', (pointsArray) => {
+    console.log('Slider changed', pointsArray);
+});
+*/
+
+class GradientSlider extends EventEmitter {
+  constructor(element, settings = {}) {
+    super(); // Call the constructor of EventEmitter first
+
+    const defaults = {
+      label: 'Gradient Slider'
+    };
+    this.opts = Object.assign(this, defaults, settings);
+    this.element = element;
+
+    // Generate a unique ID for this slider instance
+    this.uniqueId = GradientSlider.getUniqueId();
+    this.drag = this.drag.bind(this);
+    this.dragStop = this.dragStop.bind(this);
+    this.addColorOnClick = this.addColorOnClick.bind(this);
+  }
+
+  // Static method to generate a unique ID
+  static getUniqueId() {
+    if (!this.uniqueCounter) {
+      this.uniqueCounter = 0; // Initialize if it doesn't exist
+    }
+
+    this.uniqueCounter++; // Increment the counter for each new instance
+    return `gradientSliderLabel${this.uniqueCounter}`; // Return a unique ID
+  }
+
+  constructGradientString(pointsArray) {
+    const gradientParts = pointsArray.map(color => `${color.color} ${color.position}%`);
+    return `linear-gradient(90deg, ${gradientParts.join(', ')})`;
+  }
+
+  /*
+  pointsArray = [
+      { color: 'rgba(4, 98, 183, 1)', position: 0 },
+      { color: 'rgba(246, 108, 168, 1)', position: 50 },
+      { color: 'rgba(255, 253, 193, 1)', position: 100 }
+  ]
+  */
+  draw(pointsArray) {
+    this.sliderPoints = [];
+    let label = this.element.querySelector('.visually-hidden');
+    if (!label) {
+      label = document.createElement('div');
+      label.className = 'visually-hidden';
+      label.id = this.uniqueId;
+      label.textContent = this.opts.label;
+      this.element.prepend(label); // Add label to the slider element
+    }
+
+    if (!this.sliderContainer) {
+      this.sliderContainer = document.createElement('div');
+      this.sliderContainer.className = 'gradient-slider-container';
+      this.element.insertAdjacentElement('afterend', this.sliderContainer);
+      this.shadowContainer = document.createElement('div');
+      this.shadowContainer.classList.add('gradient-slider-container-shadow');
+      this.sliderContainer.insertAdjacentElement('afterbegin', this.shadowContainer);
+      this.setupAddColorOnClick();
+    } else {
+      this.clearPoints();
+    }
+    pointsArray.forEach(point => {
+      const knob = document.createElement('div');
+      knob.className = 'slider-point';
+      knob.style.left = `${point.position}%`;
+      knob.style.backgroundColor = point.color;
+      this.sliderContainer.insertAdjacentElement('beforeend', knob);
+      this.sliderPoints.push(knob); // this.sliderPoints contains list of knobs
+
+      // Accessibility Enhancements
+      knob.setAttribute('tabindex', '0'); // Make it focusable
+      knob.setAttribute('role', 'slider');
+      knob.setAttribute('aria-valuemin', '0');
+      knob.setAttribute('aria-valuemax', '100');
+      knob.setAttribute('aria-valuenow', point.position);
+      knob.setAttribute('aria-valuetext', `Color: ${point.color}, Position: ${point.position}%`);
+      knob.setAttribute('aria-labelledby', this.uniqueId);
+
+      // Initialize drag functionality
+      knob.addEventListener('mousedown', this.dragStart.bind(this, knob), {
+        passive: false
+      });
+      knob.addEventListener('touchstart', this.dragStart.bind(this, knob), {
+        passive: false
+      });
+
+      // Keyboard interaction
+      knob.addEventListener('keydown', e => this.handleKeydown(e, knob));
+    });
+
+    // Update the slider's gradient background
+    const cssGradient = this.constructGradientString(pointsArray);
+    this.setContainerGradient(cssGradient);
+
+    // show hide container 
+    this.showHideContainer();
+  }
+  showHideContainer() {
+    let hide = false;
+    if (this.sliderPoints.length === 2) {
+      let color1 = this.sliderPoints[0].style.backgroundColor;
+      let color2 = this.sliderPoints[1].style.backgroundColor;
+      if (color1 === 'rgba(255, 255, 255, 1)' && color2 === 'rgba(255, 255, 255, 1)') {
+        hide = true;
+      }
+      if (color1 === 'rgb(255, 255, 255)' && color2 === 'rgb(255, 255, 255)') {
+        hide = true;
+      }
+    }
+    if (hide) {
+      this.sliderContainer.style.display = 'none';
+    } else {
+      this.sliderContainer.style.display = '';
+    }
+  }
+  updateColor(color, index) {
+    // update array (this also applies to the knob, because this.sliderPoints contains list of knobs)
+    this.sliderPoints[index].style.backgroundColor = color;
+
+    // show hide container 
+    this.showHideContainer();
+    this.update();
+  }
+  removeColor(index) {
+    // remove knob
+    let sliderKnobs = this.sliderContainer.querySelectorAll('.slider-point');
+    let knob = sliderKnobs[index];
+    knob.removeEventListener('mousedown', this.dragStart);
+    knob.removeEventListener('touchstart', this.dragStart);
+    knob.remove();
+
+    // update array
+    this.sliderPoints.splice(index, 1);
+    this.update();
+  }
+  setupAddColorOnClick() {
+    this.sliderContainer.addEventListener('click', this.addColorOnClick);
+    // this.sliderContainer.addEventListener('touchstart', this.addColorOnClick, {passive: true});
+
+    // Indicate that the user can add a knob by changing the cursor
+    this.sliderContainer.style.cursor = 'copy'; // Or use a custom cursor icon that indicates addition
+  }
+
+  interpolateColor(color1) {
+    //, color2, fraction
+    // Iimplement color interpolation logic.
+    // fraction is a value between 0 and 1 indicating the relative position of the new stop.
+    return color1; // for simplicity, just return color1
+  }
+
+  addColorOnClick(e) {
+    /*
+    // Prevent the event if it's a touch event to stop it from triggering click events afterwards
+    e.preventDefault();
+     // Determine whether this is a touch event and extract the appropriate X position
+    let clientX;
+    if (e.touches) {
+        clientX = e.touches[0].clientX; // Use the first touch point
+    } else {
+        clientX = e.clientX; // Use the mouse click position
+    }
+    */
+    let clientX = e.clientX;
+
+    // Ensure the action is triggered only when the container itself is touched, not its children
+    if (!e.target.classList.contains('gradient-slider-container-shadow')) return;
+    const rect = this.sliderContainer.getBoundingClientRect();
+    const clickX = clientX - rect.left; // Click position within the sliderContainer, in pixels
+    const width = rect.width;
+    const positionPercentage = clickX / width * 100;
+
+    // Find the two closest stops surrounding the click position
+    const sortedPoints = this.sliderPoints.map(knob => {
+      return {
+        position: parseFloat(knob.style.left),
+        color: knob.style.backgroundColor
+      };
+    }).sort((a, b) => a.position - b.position);
+
+    // Find the surrounding stops
+    let lowerStop = sortedPoints[0]; // Initialize with the first stop
+    let upperStop = sortedPoints[sortedPoints.length - 1]; // Initialize with the last stop
+    for (let i = 0; i < sortedPoints.length - 1; i++) {
+      if (positionPercentage >= sortedPoints[i].position && positionPercentage <= sortedPoints[i + 1].position) {
+        lowerStop = sortedPoints[i];
+        upperStop = sortedPoints[i + 1];
+        break;
+      }
+    }
+
+    // Calculate the fraction of the position between the lower and upper stops
+    const fraction = (positionPercentage - lowerStop.position) / (upperStop.position - lowerStop.position);
+
+    // Interpolate the color
+    const interpolatedColor = this.interpolateColor(lowerStop.color, upperStop.color, fraction);
+
+    // Now, add the color knob at the calculated position with the interpolated color
+    this.addColor(interpolatedColor, positionPercentage);
+  }
+  addColor(color, position) {
+    position = position - 4; // adjustment
+
+    // First, find the correct position to insert the new knob
+    let insertAt = this.sliderPoints.findIndex(knob => {
+      const knobPosition = parseFloat(knob.style.left);
+      return position < knobPosition;
+    });
+
+    // If no suitable position is found (i.e., we're inserting at the end or the array is empty), adjust insertAt accordingly
+    if (insertAt === -1) insertAt = this.sliderPoints.length;
+
+    // Create and configure the new knob
+    const knob = document.createElement('div');
+    knob.className = 'slider-point';
+    knob.style.left = `${position}%`;
+    knob.style.backgroundColor = color;
+
+    // Accessibility Enhancements
+    knob.setAttribute('tabindex', '0');
+    knob.setAttribute('role', 'slider');
+    knob.setAttribute('aria-valuemin', '0');
+    knob.setAttribute('aria-valuemax', '100');
+    knob.setAttribute('aria-valuenow', position);
+    knob.setAttribute('aria-valuetext', `Color: ${color}, Position: ${position}%`);
+    knob.setAttribute('aria-labelledby', this.uniqueId);
+
+    // Initialize drag functionality
+    knob.addEventListener('mousedown', this.dragStart.bind(this, knob), {
+      passive: false
+    });
+    knob.addEventListener('touchstart', this.dragStart.bind(this, knob), {
+      passive: false
+    });
+    if (insertAt === this.sliderPoints.length) {
+      // If inserting at the end, simply add the knob to the container
+      this.sliderContainer.appendChild(knob);
+    } else {
+      // Otherwise, insert the knob before the knob currently at the insertAt position
+      this.sliderContainer.insertBefore(knob, this.sliderPoints[insertAt]);
+    }
+
+    // Update the internal representation and the displayed gradient
+    this.sliderPoints.splice(insertAt, 0, knob); // Insert the knob into the internal array at the correct position
+
+    this.update(true); // Update the gradient and emit the change event
+  }
+
+  update(triggerAddpoint) {
+    // Generate pointsArray based on the points color & position
+    const pointsArray = this.sliderPoints.map(point => {
+      const position = parseFloat(point.style.left); // Assuming style.left is always in '%'
+      return {
+        color: point.style.backgroundColor,
+        position: position
+      };
+    });
+
+    // Update the slider's gradient background
+    const cssGradient = this.constructGradientString(pointsArray);
+    this.setContainerGradient(cssGradient);
+
+    // Emit a "change" event with the pointsArray as the detail
+    this.emit('change', pointsArray, cssGradient);
+    if (triggerAddpoint) {
+      this.emit('addpoint', pointsArray, cssGradient);
+    }
+  }
+  dragStart(knob, e) {
+    this.knob = knob;
+    e.preventDefault();
+    this.isDragging = true;
+
+    // Get the initial offset by subtracting the slider point's left position from the cursor's X position
+    const startX = e.touches ? e.touches[0].clientX : e.clientX;
+    const pointRect = knob.getBoundingClientRect();
+    this.initialOffsetX = startX - pointRect.left;
+    document.addEventListener('mousemove', this.drag);
+    document.addEventListener('touchmove', this.drag);
+    document.addEventListener('mouseup', this.dragStop);
+    document.addEventListener('touchend', this.dragStop);
+    this.emit('slideStart', knob);
+  }
+  drag(e) {
+    if (!this.isDragging) return;
+    const knob = this.knob;
+
+    // Update knob (left) position
+    let touch = e.touches ? e.touches[0] : e;
+    let rect = this.sliderContainer.getBoundingClientRect();
+    let x = touch.clientX - rect.left - this.initialOffsetX; // Adjust position based on initial offset
+    let percentage = Math.max(0, Math.min(100, x / rect.width * 100));
+    knob.style.left = `${percentage}%`;
+
+    // Updating knob (left) position will also update the this.sliderPoints
+    // console.log(this.sliderPoints[1].style.left); // to test
+
+    // this.update() //The code below is similar to update(), only that it triggers sliderChange
+
+    // Generate pointsArray based on the points color & position
+    const pointsArray = this.sliderPoints.map(point => {
+      const position = parseFloat(point.style.left); // Assuming style.left is always in '%'
+      return {
+        color: point.style.backgroundColor,
+        position: position
+      };
+    });
+
+    // Update the slider's gradient background
+    const cssGradient = this.constructGradientString(pointsArray);
+    this.setContainerGradient(cssGradient);
+
+    // Emit a "slideChange" event with the pointsArray as the detail
+    this.emit('slideChange', pointsArray, cssGradient);
+  }
+  dragStop() {
+    this.isDragging = false;
+    document.removeEventListener('mousemove', this.drag);
+    document.removeEventListener('touchmove', this.drag);
+    document.removeEventListener('mouseup', this.dragStop);
+    document.removeEventListener('touchend', this.dragStop);
+    this.emit('slideEnd');
+  }
+  clearPoints() {
+    // Remove all child slider points from the container
+    const sliderKnobs = this.sliderContainer.querySelectorAll('.slider-point');
+    sliderKnobs.forEach(knob => {
+      knob.removeEventListener('mousedown', this.dragStart);
+      knob.removeEventListener('touchstart', this.dragStart);
+      knob.remove();
+    });
+
+    // update array
+    this.sliderPoints = []; // Clear
+  }
+
+  handleKeydown(e, sliderPoint) {
+    const key = e.key;
+    let newPosition = parseFloat(sliderPoint.style.left);
+    if (key === 'ArrowRight' || key === 'ArrowUp') {
+      newPosition = Math.min(100, newPosition + 1); // Increase position
+    } else if (key === 'ArrowLeft' || key === 'ArrowDown') {
+      newPosition = Math.max(0, newPosition - 1); // Decrease position
+    } else {
+      return; // Ignore other keys
+    }
+
+    sliderPoint.style.left = `${newPosition}%`;
+    sliderPoint.setAttribute('aria-valuenow', newPosition);
+    sliderPoint.setAttribute('aria-valuetext', `Color: ${sliderPoint.style.backgroundColor}, Position: ${newPosition}%`);
+
+    // Update gradient and invoke onChange callback with the new positions
+    this.dragStop(); // Simulate dragStop to update positions and gradient
+  }
+
+  setContainerGradient(cssGradient) {
+    this.shadowContainer.style.backgroundImage = cssGradient;
+  }
+  destroy() {
+    if (this.element.nextElementSibling && this.element.nextElementSibling.classList.contains('gradient-slider-container')) {
+      this.clearPoints();
+      this.element.nextElementSibling.remove();
+    }
+  }
+}
+
 class GradientPicker {
   constructor(builder) {
     this.builder = builder;
@@ -63829,9 +64237,10 @@ class GradientPicker {
             <div class="label-saved">${this.out('Saved')}:</div>
             <div class="div-saved"></div> 
 
-            <div class="gradient-preview"></div>
-
             <div class="label-saved">${this.out('Gradient Colors')}:</div>
+
+            <div class="gradient-slider" role="application"></div>
+
             <div class="div-sort"></div> 
 
             <div class="div-add">
@@ -63864,20 +64273,30 @@ class GradientPicker {
   }
   init() {
     this.renderSavedGradients();
-    const btnAddStop = this.pickGradient.querySelector('.btn-addstop');
-    if (btnAddStop) btnAddStop.addEventListener('click', () => {
-      this.builder.uo.saveForUndo();
-      let lastColor = this.colorsArray[this.colorsArray.length - 1];
-      this.colorsArray.push(lastColor);
-      this.renderColorStops();
+    const divGradSlider = this.pickGradient.querySelector('.gradient-slider');
+    const gradSlider = new GradientSlider(divGradSlider, {
+      label: this.out('Gradient Slider')
+    });
+    this.gradSlider = gradSlider;
+    gradSlider.on('slideStart', () => {
+      this.builder.uo.saveForUndo(true);
+    });
+    gradSlider.on('slideEnd', () => {
+      if (this.onChange) this.onChange();
+      this.builder.onChange();
+    });
+    gradSlider.on('slideChange', pointsArray => {
+      this.colorsPosArray = pointsArray;
+      this.applyGradient();
+    });
+    gradSlider.on('change', pointsArray => {
+      this.colorsPosArray = pointsArray;
       this.applyGradient();
       if (this.onChange) this.onChange();
       this.builder.onChange();
     });
-    const btnSave = this.pickGradient.querySelector('.btn-save');
-    if (btnSave) btnSave.addEventListener('click', () => {
-      this.saveGradient();
-      this.renderSavedGradients();
+    gradSlider.on('addpoint', () => {
+      this.renderColorStops();
     });
     const inpAngle = this.pickGradient.querySelector('.inp-angle');
     this.slider = new RoundedSlider(inpAngle, {
@@ -63892,14 +64311,44 @@ class GradientPicker {
       if (this.onChange) this.onChange();
       this.builder.onChange();
     };
+    const btnAddStop = this.pickGradient.querySelector('.btn-addstop');
+    if (btnAddStop) btnAddStop.addEventListener('click', () => {
+      this.builder.uo.saveForUndo();
+      const lastItem = this.colorsPosArray[this.colorsPosArray.length - 1];
+      lastItem.position = lastItem.position - 15;
+      this.colorsPosArray.push({
+        color: lastItem.color,
+        position: 100
+      });
+      this.renderColorPositions();
+      this.renderColorStops();
+      this.applyGradient();
+      if (this.onChange) this.onChange();
+      this.builder.onChange();
+    });
+    const btnSave = this.pickGradient.querySelector('.btn-save');
+    if (btnSave) btnSave.addEventListener('click', () => {
+      this.saveGradient();
+      this.renderSavedGradients();
+    });
     const btnClear = this.pickGradient.querySelector('.btn-clear');
     if (btnClear) btnClear.addEventListener('click', () => {
       this.builder.uo.saveForUndo();
-      this.colorsArray = [];
-      this.renderColorStops();
       this.angle = 0;
       this.renderAngle();
-      this.applyGradient();
+      this.colorsPosArray = [{
+        color: 'rgba(255, 255, 255, 1)',
+        position: 0
+      }, {
+        color: 'rgba(255, 255, 255, 1)',
+        position: 100
+      }];
+      this.renderColorPositions();
+      this.renderColorStops();
+
+      // this.applyGradient();
+      this.element.style.backgroundImage = '';
+      this.btn.style.backgroundImage = '';
       if (this.onChange) this.onChange();
       this.builder.onChange();
     });
@@ -63911,14 +64360,14 @@ class GradientPicker {
       btn.addEventListener('click', () => {
         this.builder.uo.saveForUndo();
         let cssGradient = btn.getAttribute('data-value');
-        this.element.style.backgroundImage = cssGradient;
-        this.btn.style.backgroundImage = cssGradient;
-        const colorsArray = this.extractColors(cssGradient);
-        this.colorsArray = colorsArray;
         const angle = this.extractAngle(cssGradient);
         this.angle = angle;
         this.renderAngle();
+        const colorsPosArray = this.extractColorsPos(cssGradient);
+        this.colorsPosArray = colorsPosArray;
+        this.renderColorPositions();
         this.renderColorStops();
+        this.applyGradient();
         if (this.onChange) this.onChange();
         this.builder.onChange();
       });
@@ -63927,7 +64376,7 @@ class GradientPicker {
   saveGradient() {
     let gradient = {
       angle: this.angle,
-      colors: this.colorsArray
+      colors: this.colorsPosArray
     };
     this.savedGrads.push(gradient);
     localStorage.setItem('_savedgrads', JSON.stringify(this.savedGrads));
@@ -63945,11 +64394,11 @@ class GradientPicker {
     if (localStorage.getItem('_customgradcolors') !== null) {
       customgradcolors = JSON.parse(localStorage.getItem('_customgradcolors'));
       customgradcolors.forEach(cssGradient => {
-        const colorsArray = this.extractColors(cssGradient);
+        const colorsPosArray = this.extractColorsPos(cssGradient);
         const angle = this.extractAngle(cssGradient);
         let gradient = {
           angle: angle,
-          colors: colorsArray
+          colors: colorsPosArray
         };
         oldGrads.push(gradient);
       });
@@ -63963,16 +64412,16 @@ class GradientPicker {
     const labelSaved = this.pickGradient.querySelector('.label-saved');
     let html = '';
     savedGrads.forEach((gradient, index) => {
-      let deg = gradient.angle;
-      let colorsArray = gradient.colors;
-      let s = this.convertColorsToGradient(colorsArray, deg);
+      let angle = gradient.angle;
+      let colorsPosArray = gradient.colors;
+      let cssGradient = this.constructGradientString(colorsPosArray, angle); // set the angle
       html += `
                 <div>
                     <button 
                         data-index="${index}"
                         title="${this.out('Select')}" 
-                        class="btn-graditem" data-value="${s}" 
-                        style="background-image:${s}"></button>
+                        class="btn-graditem" data-value="${cssGradient}" 
+                        style="background-image:${cssGradient}"></button>
 
                     <button title="${this.out('Remove')}" class="btn-remove">
                         <svg class="is-icon-flex"><use xlink:href="#icon-minus"></use></svg>
@@ -63993,14 +64442,14 @@ class GradientPicker {
       btn.addEventListener('click', () => {
         this.builder.uo.saveForUndo();
         let cssGradient = btn.getAttribute('data-value');
-        this.element.style.backgroundImage = cssGradient;
-        this.btn.style.backgroundImage = cssGradient;
-        const colorsArray = this.extractColors(cssGradient);
-        this.colorsArray = colorsArray;
         const angle = this.extractAngle(cssGradient);
         this.angle = angle;
         this.renderAngle();
+        const colorsPosArray = this.extractColorsPos(cssGradient);
+        this.colorsPosArray = colorsPosArray;
+        this.renderColorPositions();
         this.renderColorStops();
+        this.applyGradient();
         if (this.onChange) this.onChange();
         this.builder.onChange();
       });
@@ -64024,104 +64473,42 @@ class GradientPicker {
       });
     });
   }
-  removeItemByIndex(arr, index) {
-    if (index > -1 && index < arr.length) {
-      arr.splice(index, 1);
-    }
-    return arr;
-  }
-  extractColors(gradientString) {
-    // Regular expression to match rgb(a) colors and hex colors (with optional alpha)
-    const colorRegex = /rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(,\s*\d*\.?\d+\s*)?\)|#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?/g;
-    // Extract all color occurrences
-    const colors = gradientString.match(colorRegex);
-    return colors || [];
-  }
-  extractAngle(gradientString) {
-    const anglePattern = /linear-gradient\((\d+)deg,/;
-    const match = anglePattern.exec(gradientString);
-    if (match && match[1]) {
-      return parseInt(match[1], 10);
-    } else {
-      return 0;
-    }
-  }
-  updateColorsArray() {
-    let arr = [];
-    const divSort = this.pickGradient.querySelector('.div-sort');
-    divSort.querySelectorAll('button[data-color]').forEach(btn => {
-      let s = btn.getAttribute('data-color');
-      arr.push(s);
-    });
-    this.colorsArray = arr;
-  }
-  allowRemoveStop() {
-    const divSort = this.pickGradient.querySelector('.div-sort');
-    const btns = divSort.querySelectorAll('button[data-color]');
-    if (btns.length === 2) {
-      return false;
-    } else {
-      return true;
-    }
-  }
-  convertColorsToGradient(colorsArray, deg = 0) {
-    let gradientString = `linear-gradient(${deg}deg, `;
-    colorsArray.forEach((color, index) => {
-      gradientString += color;
-      if (index < colorsArray.length - 1) {
-        gradientString += ', ';
-      }
-    });
-    gradientString += ')';
-    return gradientString;
-  }
   applyGradient() {
     let cssGradient;
-    if (this.colorsArray.length === 0) {
+    if (this.colorsPosArray === 0) {
       cssGradient = '';
     } else {
-      cssGradient = this.convertColorsToGradient(this.colorsArray, this.angle);
+      cssGradient = this.constructGradientString(this.colorsPosArray);
     }
+
+    // apply to element
     this.element.style.backgroundImage = cssGradient;
     this.btn.style.backgroundImage = cssGradient;
-    const divPreview = this.pickGradient.querySelector('.gradient-preview');
-    divPreview.style.backgroundImage = cssGradient;
   }
-  areArraysIdentical(arr1, arr2) {
-    if (arr1.length !== arr2.length) {
-      return false; // Arrays of different lengths cannot be identical
-    }
-
-    for (let i = 0; i < arr1.length; i++) {
-      if (arr1[i] !== arr2[i]) {
-        return false; // Found elements that are not the same
-      }
-    }
-
-    return true; // All elements are the same and in the same order
-  }
-
   renderColorStops() {
-    let colorsArray = this.colorsArray;
-    if (colorsArray.length === 0) {
-      colorsArray = ['rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 1)'];
+    if (this.colorsPosArray.length === 0) {
+      this.colorsPosArray = [{
+        color: 'rgba(255, 255, 255, 1)',
+        position: 0
+      }, {
+        color: 'rgba(255, 255, 255, 1)',
+        position: 100
+      }];
     }
     let htmlStop = '';
-    let n = 0;
-    colorsArray.forEach(color => {
+    this.colorsPosArray.forEach((item, index) => {
       htmlStop += `<div>
-                <button data-color="${color}" 
-                    data-index="${n}"
+                <button data-color="${item.color}" 
+                    data-index="${index}"
                     title="${this.out('Select Color')}" 
                     class="btn-colorstop is-btn-color" 
-                    data-value="${color}" 
-                    style="background-color:${color}"></button>
+                    data-value="${item.color}" 
+                    style="background-color:${item.color}"></button>
 
                 <button title="${this.out('Remove')}" class="btn-remove">
                     <svg class="is-icon-flex"><use xlink:href="#icon-minus"></use></svg>
                 </button>
             </div>`;
-      n++;
     });
     const divSort = this.pickGradient.querySelector('.div-sort');
     divSort.innerHTML = htmlStop;
@@ -64130,25 +64517,35 @@ class GradientPicker {
       dragClass: 'hide-drag-class',
       onStart: () => {},
       onSort: () => {
-        this.updateColorsArray();
+        // TODO
+
+        const btnPicks = this.pickGradient.querySelectorAll('.btn-colorstop');
+        let colors = [];
+        btnPicks.forEach(btn => {
+          let color = btn.style.backgroundColor;
+          colors.push(color);
+        });
+        this.colorsPosArray.map((item, index) => {
+          item.color = colors[index];
+        });
+        this.gradSlider.draw(this.colorsPosArray);
+        this.renderColorStops();
         this.applyGradient();
+        if (this.onChange) this.onChange();
+        this.builder.onChange();
       }
     });
     const colorPicker = this.builder.colorPicker;
     const btnPicks = this.pickGradient.querySelectorAll('.btn-colorstop');
-    btnPicks.forEach(btn => {
+    btnPicks.forEach((btn, index) => {
       btn.addEventListener('click', () => {
         this.builder.uo.saveForUndo(true);
         colorPicker.open(color => {
           if (color === '') {
             const allow = this.allowRemoveStop();
             if (allow) {
-              // clear
-              btn.parentNode.remove();
-              this.updateColorsArray();
-              this.applyGradient();
-              if (this.onChange) this.onChange();
-              this.builder.onChange();
+              // remove
+              btn.parentNode.querySelector('.btn-remove').click();
               this.builder.util.hidePopOverlay(); // if pop is opened using overlay, to programmatically close, use this
               return;
             }
@@ -64157,14 +64554,7 @@ class GradientPicker {
 
           btn.setAttribute('data-color', color);
           btn.style.backgroundColor = color;
-          this.updateColorsArray();
-          if (this.areArraysIdentical(this.colorsArray, ['rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 1)'])) {
-            console.log('Initial, no gradient');
-            return;
-          }
-          this.applyGradient();
-          if (this.onChange) this.onChange();
-          this.builder.onChange();
+          this.gradSlider.updateColor(color, index); // triggers gradSlider.on('change')
         }, btn.style.backgroundColor, () => {
           btn.removeAttribute('data-focus');
           btn.focus();
@@ -64174,28 +64564,25 @@ class GradientPicker {
       });
     });
     const btnRemove = divSort.querySelectorAll('.btn-remove');
-    btnRemove.forEach(btn => {
+    btnRemove.forEach((btn, index) => {
       btn.addEventListener('click', e => {
         this.builder.uo.saveForUndo();
         const allow = this.allowRemoveStop();
         if (allow) {
           btn.parentNode.remove();
-        } else {
-          let color = 'rgba(255, 255, 255, 1)'; // gradient stop requires value
+          this.colorsPosArray.splice(index, 1);
+          this.renderColorStops(); // a must
 
-          const btnColor = btn.parentNode.querySelector('.btn-colorstop');
-          btnColor.setAttribute('data-color', color);
-          btnColor.style.backgroundColor = color;
+          this.gradSlider.removeColor(index);
         }
-        this.updateColorsArray();
-        this.applyGradient();
-        if (this.onChange) this.onChange();
-        this.builder.onChange();
         e.preventDefault();
         e.stopImmediatePropagation();
       });
     });
   }
+  renderColorPositions() {
+    this.gradSlider.draw(this.colorsPosArray);
+  }
   renderAngle() {
     const inpAngle = this.pickGradient.querySelector('.inp-angle');
     inpAngle.value = this.angle;
@@ -64302,16 +64689,117 @@ class GradientPicker {
     // this.onFinish = onFinish; // used in showPop below
 
     let cssGradient = elm.style.backgroundImage;
-    const colorsArray = this.extractColors(cssGradient);
-    this.colorsArray = colorsArray;
-    const angle = this.extractAngle(cssGradient);
-    this.angle = angle;
-    this.renderAngle();
-    this.renderColorStops();
+    if (!cssGradient) {
+      this.angle = 0;
+      this.renderAngle();
+      this.colorsPosArray = [{
+        color: 'rgba(255, 255, 255, 1)',
+        position: 0
+      }, {
+        color: 'rgba(255, 255, 255, 1)',
+        position: 100
+      }];
+      this.renderColorPositions();
+      this.renderColorStops();
+    } else {
+      const angle = this.extractAngle(cssGradient);
+      this.angle = angle;
+      this.renderAngle();
+      const colorsPosArray = this.extractColorsPos(cssGradient);
+      this.colorsPosArray = colorsPosArray;
+      this.renderColorPositions();
+      this.renderColorStops();
+    }
     setTimeout(() => {
       this.slider.create();
     }, 0);
   }
+  extractColorsPos(gradientString) {
+    // Regular expression to match rgb(a) colors and hex colors (with optional alpha) and their positions
+    const colorPositionRegex = /((rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(,\s*\d*\.?\d+\s*)?\)|#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?))(?:\s+(\d+)%\s*)?/g;
+    const matches = [...gradientString.matchAll(colorPositionRegex)];
+    let colorsWithPositions = matches.map(match => ({
+      color: match[1],
+      // The color value
+      position: match[5] ? parseInt(match[5], 10) : undefined // The position, if present
+    }));
+
+    // Additional operation to correctly parse positions
+    const positionMatches = [...gradientString.matchAll(/\d+\.?\d*%/g)].map(match => parseFloat(match[0]));
+    positionMatches.forEach((position, index) => {
+      if (colorsWithPositions[index]) {
+        colorsWithPositions[index].position = position;
+      }
+    });
+
+    // For gradients without explicit positions, we'll distribute positions evenly
+    if (colorsWithPositions.some(c => c.position === undefined)) {
+      const step = 100 / (colorsWithPositions.length - 1);
+      colorsWithPositions.forEach((c, i) => c.position = i * step);
+    }
+    return colorsWithPositions;
+  }
+  extractAngle(gradientString) {
+    const anglePattern = /linear-gradient\((\d+)deg,/;
+    const match = anglePattern.exec(gradientString);
+    if (match && match[1]) {
+      return parseInt(match[1], 10);
+    } else {
+      return 0;
+    }
+  }
+
+  // Utils
+
+  removeItemByIndex(arr, index) {
+    if (index > -1 && index < arr.length) {
+      arr.splice(index, 1);
+    }
+    return arr;
+  }
+  allowRemoveStop() {
+    const divSort = this.pickGradient.querySelector('.div-sort');
+    const btns = divSort.querySelectorAll('button[data-color]');
+    if (btns.length === 2) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+  convertColorsToGradient(colorsArray, deg = 0) {
+    let gradientString = `linear-gradient(${deg}deg, `;
+    colorsArray.forEach((color, index) => {
+      gradientString += color;
+      if (index < colorsArray.length - 1) {
+        gradientString += ', ';
+      }
+    });
+    gradientString += ')';
+    return gradientString;
+  }
+  constructGradientString(points, angle) {
+    const gradientParts = points.map(color => `${color.color} ${color.position}%`);
+    if (angle) {
+      return `linear-gradient(${angle}deg, ${gradientParts.join(', ')})`;
+    } else {
+      return `linear-gradient(${this.angle}deg, ${gradientParts.join(', ')})`;
+    }
+  }
+  areArraysIdentical(arr1, arr2) {
+    if (arr1.length !== arr2.length) {
+      return false; // Arrays of different lengths cannot be identical
+    }
+
+    for (let i = 0; i < arr1.length; i++) {
+      if (arr1[i] !== arr2[i]) {
+        return false; // Found elements that are not the same
+      }
+    }
+
+    return true; // All elements are the same and in the same order
+  }
+
+  // Pop stuff
   getElementPosition(element) {
     const top = element.getBoundingClientRect().top;
     const left = element.getBoundingClientRect().left;
@@ -90971,7 +91459,7 @@ class ContentBuilder {
       /* If not empty, applying font size will apply class: size-12, size-14, and so on. All responsive, defined in content.css */
       gradientColors: [
       // 'linear-gradient(234deg, rgba(255, 253, 185, 1), rgb(255, 208, 100), rgb(239, 98, 159), rgb(73, 88, 195), rgba(2, 20, 145, 1))',
-      'linear-gradient(234deg, rgba(255, 253, 193, 1), rgba(255, 211, 111, 1), rgba(246, 108, 168, 1), rgba(97, 110, 204, 1), rgba(4, 98, 183, 1))', 'linear-gradient(15deg, rgba(222, 90, 69, 1), rgba(255, 118, 96, 1), rgba(249, 214, 137, 1), rgba(255, 242, 172, 1))', 'linear-gradient(357deg, rgba(68, 85, 204, 1), rgba(4, 166, 240, 1), rgba(51, 241, 255, 1))', 'linear-gradient(26deg, rgba(41, 145, 255, 1), rgba(49, 103, 240, 1), rgba(67, 107, 208, 1), rgba(149, 115, 255, 1), rgba(159, 159, 255, 1))', 'linear-gradient(0deg, rgba(198, 233, 155, 1), rgba(97, 221, 180, 1), rgba(244, 255, 190, 1))', 'linear-gradient(342deg, rgb(189, 156, 219), rgb(163, 172, 240), rgba(154, 203, 253, 1))', 'linear-gradient(45deg, rgb(255, 225, 172), rgb(253, 194, 141), rgba(246, 150, 183, 1), rgba(221, 140, 207, 1))', 'linear-gradient(0deg, rgba(157, 172, 246, 1), rgba(129, 205, 255, 1), rgba(202, 255, 207, 1))'],
+      'linear-gradient(32deg, rgb(4, 98, 183) 0%, rgb(97, 110, 204) 23.5075%, rgb(246, 108, 168) 50%, rgb(255, 211, 111) 75%, rgb(255, 253, 193) 100%)', 'linear-gradient(15deg, rgba(222, 90, 69, 1), rgba(255, 118, 96, 1), rgba(249, 214, 137, 1), rgba(255, 242, 172, 1))', 'linear-gradient(357deg, rgba(68, 85, 204, 1), rgba(4, 166, 240, 1), rgba(51, 241, 255, 1))', 'linear-gradient(26deg, rgba(41, 145, 255, 1), rgba(49, 103, 240, 1), rgba(67, 107, 208, 1), rgba(149, 115, 255, 1), rgba(159, 159, 255, 1))', 'linear-gradient(0deg, rgba(198, 233, 155, 1), rgba(97, 221, 180, 1), rgba(244, 255, 190, 1))', 'linear-gradient(342deg, rgb(189, 156, 219), rgb(163, 172, 240), rgba(154, 203, 253, 1))', 'linear-gradient(45deg, rgb(255, 225, 172), rgb(253, 194, 141), rgba(246, 150, 183, 1), rgba(221, 140, 207, 1))', 'linear-gradient(0deg, rgba(157, 172, 246, 1), rgba(129, 205, 255, 1), rgba(202, 255, 207, 1))'],
       elementEditor: true,
       customval: '',
       moduleConfig: [],
@@ -92867,7 +93355,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
           dropdown.style.display = 'none';
         });
       }
-      const clrPicker = document.querySelector('.pop-picker.active');
+      const clrPicker = document.querySelector('.pop-picker.active') || document.querySelector('.pickgradientcolor.active');
       // if(clrPicker) return;
 
       // Image Resizer