Replace jscolor with coloris. #168 (#223)

* build: replace jscolor with coloris

* feat: make choices case insensitive

* fix: apply feedback

* fix: use json_script template tag

* fix: add last tweaks

* fix: remove useless argument

Author: obdulia-losantos

.gitattributes

@@ -1 +1 @@
-colorfield/static/colorfield/jscolor/* linguist-vendored=true
+colorfield/static/colorfield/coloris/* linguist-vendored=true

.gitignore

@@ -8,6 +8,7 @@ __pycache__/
 ## Local setup
 .vscode/
 .venv/
+venv/
 
 # Distribution / packaging
 .Python

README.md

@@ -132,7 +132,7 @@ class MyForm(forms.Form):
 ```
 
 ### Admin
-The admin will kindly provide a simple [color picker](http://jscolor.com/) for all color fields. :)
+The admin will kindly provide a simple [color picker](https://coloris.js.org/) for all color fields. :)
 
 ---
 

colorfield/fields.py

@@ -57,6 +57,10 @@ def __init__(self, *args, **kwargs):
                 "you can set only one of the two for a ColorField instance."
             )
 
+        # change choices to lower case (case-insensitive workaround)
+        if self.choices:
+            self.choices = [(k.lower(), *v) for (k, *v) in self.choices]
+
     def formfield(self, **kwargs):
         palette = []
         if self.choices:
@@ -67,11 +71,10 @@ def formfield(self, **kwargs):
         kwargs["widget"] = ColorWidget(
             attrs={
                 "default": self.get_default(),
-                "format": self.format,
-                "palette": palette,
-                # # TODO: in case choices is defined,
-                # # this will be used to hide the widget color spectrum
-                # 'palette_choices_only': bool(self.choices),
+                "format": self.format[0:3] if self.format else "hex",
+                "alpha": self.format[-1] == "a" if self.format else False,
+                "swatches": palette,
+                "swatches_only": bool(self.choices),
             }
         )
         return super().formfield(**kwargs)
@@ -89,6 +92,12 @@ def deconstruct(self):
         kwargs["image_field"] = self.image_field
         return name, path, args, kwargs
 
+    def validate(self, value, *args, **kwargs):
+        """
+        Override validation logic to make it case-insensitive.
+        """
+        super().validate(value.lower() if value else value, *args, **kwargs)
+
     def _get_image_field_color(self, instance):
         color = ""
         image_file = getattr(instance, self.image_field)

colorfield/static/colorfield/colorfield.js

@@ -1,12 +1,11 @@
-/** global: django */
+window.addEventListener('load', function () {
+  const inputs = document.getElementsByClassName('colorfield_field coloris');
+  for (const input of inputs) {
+    const colorisId = input.getAttribute('data-coloris-options-json-script-id');
+    const script = document.querySelector(`script[id='${colorisId}']`);
+    const options = JSON.parse(script.textContent);
 
-window.addEventListener('load', function (event) {
-    if (typeof django !== 'undefined' && typeof django.jQuery !== 'undefined') {
-        (function ($) {
-            // add colopicker to inlines added dynamically
-            $(document).on('formset:added', function onFormsetAdded(event, row) {
-                jscolor.install();
-            });
-        })(django.jQuery);
-    }
+    const id = input.getAttribute('id');
+    Coloris.setInstance(`.colorfield_field.coloris.${id}`, options);
+  }
 });

colorfield/static/colorfield/coloris/README.txt

@@ -0,0 +1,3 @@
+https://github.com/mdbassit/Coloris
+
+Release: v0.24.0