Added color picker

Author: mplattu

Diff for: .gitignore

@@ -1,2 +1,3 @@
 src/backend/ext/
 src/ui/ext/
+temp/

Diff for: Makefile

@@ -3,6 +3,12 @@
 update-libs:
 	wget -O src/backend/ext/Parsedown.php https://raw.githubusercontent.com/erusev/parsedown/master/Parsedown.php
 	wget -O src/ui/ext/jquery.min.js https://code.jquery.com/jquery-3.4.1.min.js
+	mkdir temp
+	wget -O temp/bootstrap-colorpicker.zip https://github.com/itsjavi/bootstrap-colorpicker/releases/download/3.1.2/bootstrap-colorpicker-v3.1.2-dist.zip
+	cd temp; unzip bootstrap-colorpicker.zip
+	cp temp/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js src/ui/ext/
+	cp temp/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css src/ui/ext/
+	rm -fR temp/
 
 lint:
 	php -l src/backend/lib/AdminAPI.php

Diff for: dist/index.php

@@ -6,12 +6,16 @@
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+  <style>
+    <!-- include:src/ui/ext/bootstrap-colorpicker.min.css -->
+  </style>
   <script type="text/javascript">
     <!-- include:src/ui/ext/jquery.min.js -->
   </script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
   <script type="text/javascript">
+    <!-- include:src/ui/ext/bootstrap-colorpicker.min.js -->
     <!-- include:src/ui/AdminUI.js -->
   </script>
 </head>

Diff for: src/ui/AdminUI.html

@@ -39,6 +39,19 @@ class PageContent {
     return this.page_data.parts.length;
   }
 
+  render_editor_input(field, name) {
+    if (field == "color") {
+      return '<input class="page_field color_field form-control" type="text" name="'+name+'" id="'+name+'">';
+    }
+
+    if (field == "text") {
+      return '<textarea class="section_field form-control" name="'+name+'" id="'+name+'" rows="5"></textarea>';
+    }
+
+    // Fallback: single-line text
+    return '<input class="page_field form-control" type="text" name="'+name+'" id="'+name+'">';
+  }
+
   render_editor_fields_page() {
     var html = [];
 
@@ -49,7 +62,7 @@ class PageContent {
 
       html.push('<div class="row">'
         +'<div class="col-4">'+this.fields.page_values[field]+'</div>'
-        +'<div class="col-8"><input class="page_field form-control" type="text" name="'+name+'" id="'+name+'"></div>'
+        +'<div class="col-8">'+this.render_editor_input(field, name)+'</div>'
         +'</div>');
     }
     html.push('</div>');
@@ -66,13 +79,13 @@ class PageContent {
 
       html.push('<div class="row">'
         +'<div class="col-4">'+this.fields.section_values[field]+'</div>'
-        +'<div class="col-8"><input class="section_field form-control" type="text" name="'+name+'" id="'+name+'"></div>'
+        +'<div class="col-8">'+this.render_editor_input(field, name)+'</div>'
         +'</div>');
     }
 
     var name='section_'+n+'_text';
 
-    html.push('<div class="row"><div class="col-12"><label for="'+name+'">Text</label><textarea class="section_field form-control" name="'+name+'" id="'+name+'" rows="5"></textarea></div></div>');
+    html.push('<div class="row"><div class="col-12"><label for="'+name+'">Text</label>'+this.render_editor_input('text', name)+'</div></div>');
     html.push('</div>');
 
     return html.join("\n");
@@ -102,8 +115,9 @@ class PageContent {
 
     $(this.page_content_id).html(html.join("\n"));
 
-    $(".page_field").on('keyup', {obj: this}, this.update_object_value);
-    $(".section_field").on("keyup", {obj: this}, this.update_object_value);
+    $(".page_field").on('keyup change', {obj: this}, this.update_object_value);
+    $(".section_field").on("keyup change", {obj: this}, this.update_object_value);
+    $(".color_field").colorpicker();
   }
 
   update_object_value(event) {