build

dist/image-sequencer-ui.js

@@ -440,14 +440,30 @@ function DefaultHtmlStepUi(_sequencer, options) {
         var inputDesc = isInput ? mapHtmlTypes(inputs[paramName]) : {};
         if (!isInput) {
           html += '<span class="output"></span>';
-        } else if (inputDesc.type.toLowerCase() == 'select') {
+        }
+        else if (inputDesc.type.toLowerCase() == 'select') {
+
           html += '<select class="form-control target" name="' + paramName + '">';
           for (var option in inputDesc.values) {
             html += '<option>' + inputDesc.values[option] + '</option>';
           }
           html += '</select>';
-        } else {
+        }
+        else {
           let paramVal = step.options[paramName] || inputDesc.default;
+
+          if (inputDesc.id == 'color-picker') { // separate input field for color-picker
+            html +=
+              '<div id="color-picker" class="input-group colorpicker-component">' +
+              '<input class="form-control target" type="' +
+              inputDesc.type +
+              '" name="' +
+              paramName +
+              '" value="' +
+              paramVal + '">' + '<span class="input-group-addon"><i></i></span>' +
+              '</div>';
+          }
+          else { // use this if the the field isn't color-picker
             html =
               '<input class="form-control target" type="' +
               inputDesc.type +
@@ -470,6 +486,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
             }
             else html += '">';
           }
+        }
 
         var div = document.createElement('div');
         div.className = 'row';
@@ -528,6 +545,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
     
     $(step.imgElement).on('mousemove', _.debounce(() => imageHover(step), 150));
     $(step.imgElement).on('click', (e) => {e.preventDefault(); });
+    $(step.ui.querySelectorAll('#color-picker')).colorpicker();
 
     function saveOptions(e) {
       e.preventDefault();
@@ -714,7 +732,6 @@ if(typeof window === 'undefined'){
 
 module.exports = DefaultHtmlStepUi;
 
-
 },{"./intermediateHtmlStepUi.js":6,"./mapHtmltypes":7,"./urlHash.js":8,"lodash":9}],5:[function(require,module,exports){
 function generatePreview(previewStepName, customValues, path, selector) {