initial commit

script.js

@@ -0,0 +1,81 @@
+var x = document.getElementById('ff_8_dropdown'); //Get the form element
+const optionsList = []; //Array that will store options data
+
+/** 
+  * Iterates on each option, gets the value and data-calc_value generated by fluentforms.
+  * The reason for this is when choices.js is used on the select element, the data-calc_value
+  * is removed and only the value is retained. 
+  * 
+  */
+for( let i=0; i < x.length; i++ ) {
+    var tempObj = {
+        value: x.options[i].getAttribute('value'),
+        calcValue: x.options[i].getAttribute('data-calc_value'),
+    }
+    optionsList.push(tempObj);
+    }
+    /**
+      * Gets the choices.js script using CDN. 
+      * 
+      * Then Converts the select element using choices.js plugin. Customized it so that we can use the 
+      * data-calc_value option of fluent forms.
+      */
+$.getScript("https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js", function(){
+     const choices = new Choices(x, {
+      callbackOnCreateTemplates: function(template) {
+       return {
+        choice: ({ classNames }, data) => {
+                const val = data.value;
+                const calcValue = getCalcValue(val);
+                const color = getColor( parseInt( calcValue ) );
+                /**
+                 * This returns the default template used by choices.js. 
+                 * Only the {$color} attribute is added for the custom color of the option.
+                 * The rest are default.
+                 */ 
+                return template(`
+                  <div class="${classNames.item} ${classNames.itemChoice} ${
+                  data.disabled ? classNames.itemDisabled : classNames.itemSelectable
+                } ${color}" data-select-text="${this.config.itemSelectText}" data-choice ${
+                  data.disabled
+                    ? 'data-choice-disabled aria-disabled="true"'
+                    : 'data-choice-selectable'
+                } data-id="${data.id}" data-value="${data.value}" ${
+                  data.groupId > 0 ? 'role="treeitem"' : 'role="option"'
+                }>
+                     ${data.label}
+                  </div>
+                `);
+              },
+            };
+          },
+     });
+
+     /**
+      * Compares the value from the optionsList and the one generated in choices.js. If equal, returns
+      * the data-calc_value of the option.
+      */
+     function getCalcValue( val ) {
+      var length = optionsList.length;
+      for( let x = 0; x < optionsList.length; x++ ){
+        if( val === optionsList[x].value ){
+          return optionsList[x].calcValue;
+        }
+      }
+    }
+    /**
+     * Uses the data-calc_value to identify the color of the option field.
+     * Returns a custom class name that will be used to identify the color of the option field using CSS.
+     */
+    function getColor( calcValue ){
+      switch( calcValue ) {
+        case 1:
+          return 'option_blue';
+        case 2:
+          return 'option_green';
+        case 3:
+          return 'option_red';
+      }
+    }
+     
+});

style.css

@@ -0,0 +1,16 @@
+@import url('https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css');
+
+.option_blue{
+        border-left: solid;
+        border-color: blue;
+}
+
+.option_green{
+border-left: solid;
+border-color: green;
+}
+
+.option_red{
+border-left: solid;
+border-color: red;
+}