Replace JS colour lib with vanilla equivalent.

Fixes workflow editor.

Author: fbacall

app/assets/javascripts/application.js

@@ -17,7 +17,6 @@
 //= require bootstrap-tab-history
 //= require cytoscape
 //= require cytoscape-panzoom
-//= require jscolor
 //= require jquery.simplecolorpicker.js
 //= require split
 //= require handlebars.runtime

app/assets/javascripts/workflows.js

@@ -192,9 +192,9 @@ var Workflows = {
             $('#node-modal-form-title').val(data.name);
             $('#node-modal-form-description').val(data.description);
             if (data.color) {
-                $('#node-modal-form-colour')[0].jscolor.fromString(data.color);
+                $('#node-modal-form-colour').val(data.color);
             } else if (data.parent) {
-                $('#node-modal-form-colour')[0].jscolor.fromString(cy.$('#' + data.parent).data('color'));
+                $('#node-modal-form-colour').val(cy.$('#' + data.parent).data('color'));
             }
             $('#node-modal-form-parent-id').val(data.parent);
             $('#node-modal-form-x').val(position.x);
@@ -211,7 +211,7 @@ var Workflows = {
                     description: $('#node-modal-form-description').val(),
                     html_description: MarkdownIt.render($('#node-modal-form-description').val()),
                     color: $('#node-modal-form-colour').val(),
-                    font_color: $('#node-modal-form-colour').css("color"),
+                    font_color: Workflows.getTextColor($('#node-modal-form-colour').val()),
                     parent: $('#node-modal-form-parent-id').val(),
                     associatedResources: Workflows.associatedResources.fetch(),
                     ontologyTerms: Workflows.ontologyTerms.fetch()
@@ -470,6 +470,21 @@ var Workflows = {
                 );
             }
         }
+    },
+    getTextColor: function (hex) {
+        // Remove the leading '#', if present
+        hex = hex.replace('#', '');
+
+        // Parse r, g, b values
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+
+        // Calculate perceived brightness (luminance)
+        const brightness = (0.299 * r) + (0.587 * g) + (0.114 * b);
+
+        // Threshold of ~186 is a common practical cutoff
+        return brightness > 186 ? '#000000' : '#FFFFFF';
     }
 };
 
@@ -621,7 +636,6 @@ document.addEventListener("turbolinks:load", function() {
             // Initialize
             Workflows.cancelState();
             Workflows.history.initialize();
-            jscolor.installByClassName('jscolor');
         } else {
             // Hiding/revealing of child nodes
             if(hideChildNodes) {

app/views/workflows/_node_modal.html.erb

@@ -42,7 +42,7 @@
           <p style="margin: 0px; padding: 5px;">
             Click inside the box below to select colour using colour picker:
           </p>
-          <input type="text" class="form-control jscolor {hash:true, zIndex: 100000}" value="#F0721E" id="node-modal-form-colour">
+          <input type="color" class="form-control" value="#F0721E" id="node-modal-form-colour">
           <p style="background-color: #E7E7E7; margin-top: 5px; padding: 5px;">
             Or select from pre-defined colours:
             <%= render 'workflows/partials/simple_colour_picker' %>

app/views/workflows/partials/_simple_colour_picker.html.erb

@@ -19,12 +19,9 @@
 <%= select_tag '', options_for_select(predefined_colours), id: 'simple-colour-picker' %>
 <script>
   document.addEventListener("turbolinks:load", function() {
-    $('#simple-colour-picker').simplecolorpicker();
-
-    $('#simple-colour-picker').on('change', function (e) {
+    $('#simple-colour-picker').simplecolorpicker().on('change', function (e) {
       var valueSelected = this.value.toUpperCase();
       $('#node-modal-form-colour').val(valueSelected);
-      $('#node-modal-form-colour')[0].jscolor.fromString(valueSelected);
     });
   });
 </script>