Allow library to be inserted in HEAD tag and lazily loaded

gulpfile.js

@@ -9,6 +9,7 @@ const concatJS = require('gulp-concat');
 const uglifyJS = require('gulp-uglify-es').default;
 const concatCSS = require('gulp-concat-css');
 const uglifyCSS = require('gulp-uglifycss');
+const inject = require('gulp-inject-string');
 const sass = require('gulp-sass');
 sass.compiler = require('node-sass');
 
@@ -20,6 +21,8 @@ sass.compiler = require('node-sass');
 gulp.task('devScripts', async function () {
 	gulp.src(['./src/js/setup.js', './src/js/*.js'])
 		.pipe(concatJS('colr_pickr.js'))
+        .pipe(inject.prepend('document.addEventListener("DOMContentLoaded", function () {'))
+        .pipe(inject.append('window.ColorPicker = ColorPicker;window.colorPickerComp = colorPickerComp;});'))
 		.pipe(gulp.dest('./build'));
 });
 
@@ -44,6 +47,8 @@ gulp.task('productionScripts', async function () {
 	gulp.src(['./src/js/setup.js', './src/js/*.js'])
 		.pipe(concatJS('colr_pickr.min.js'))
 		.pipe(uglifyJS())
+        .pipe(inject.prepend('document.addEventListener("DOMContentLoaded", function () {'))
+        .pipe(inject.append('window.ColorPicker = ColorPicker;window.colorPickerComp = colorPickerComp;});'))
 		.pipe(gulp.dest('./build'));
 });
 

package.json

@@ -10,6 +10,8 @@
 	"browser": "build/colr_pickr.min.js",
 	"license": "MIT",
 	"scripts": {
+        "devBuild": "gulp devBuild",
+        "devWatch": "gulp watch",
 		"build": "gulp productionBuild",
 		"doc": "jsdoc -c jsdoc.json",
 		"test": "echo \"Error: no test specified\" && exit 1"
@@ -49,6 +51,7 @@
 		"gulp": "^4.0.2",
 		"gulp-concat": "^2.6.1",
 		"gulp-concat-css": "^3.1.0",
+        "gulp-inject-string": "^1.1.2",
 		"gulp-markdown": "^5.0.1",
 		"gulp-rimraf": "^1.0.0",
 		"gulp-sass": "^4.1.0",

src/js/color_text_values.js

@@ -67,7 +67,7 @@ document.getElementById('switch_color_type').addEventListener('click', function
 // Event to update the color when the user leaves the hex value box
 document.getElementById('hex_input').addEventListener('blur', function () {
 	// Value
-	const hexInput = this.value;
+    const hexInput = this.value.toLowerCase();
 
 	// Check to see if the hex is formatted correctly
 	if (hexInput.match(/^#[0-9a-f]{3}([0-9a-f]{3})?([0-9a-f]{2})?$/)) {

src/js/custom_color.js

@@ -26,6 +26,10 @@ document.getElementById('custom_colors_box').addEventListener('click', function
 
 		// Update
 		updatePicker();
+
+        // Show delete button
+        document.getElementById('custom_colors_del').style.display = 'inline-block';
+
 	}
 });
 
@@ -38,6 +42,11 @@ colorPickerComp.addCustomColor = function () {
 	// Getting the color
 	const color = `hsla(${colorPickerComp.hue}, ${colorPickerComp.saturation}%, ${colorPickerComp.lightness}%, ${colorPickerComp.alpha})`;
 
+    // Check if color is already present
+    for (let i = 0; i < colorPickerComp.LSCustomColors[0].length; i++)
+        if (colorPickerComp.LSCustomColors[0][i] == color)
+            return;
+
 	// Creating the element
 	let customColorElem = document.createElement('BUTTON');
 	customColorElem.className = 'custom_colors_preview';
@@ -47,15 +56,36 @@ colorPickerComp.addCustomColor = function () {
 	document.getElementById('custom_colors_box').appendChild(customColorElem);
 
 	// Pushing the color to the top of the array
-	colorPickerComp.LSCustomColors[0].unshift(color);
+    colorPickerComp.LSCustomColors[0].push(color);
 
 	// Updating the local storage with the new custom color
+    try {
 	localStorage.setItem('custom_colors', JSON.stringify(colorPickerComp.LSCustomColors));
+    } catch (e) {}
 };
 document.getElementById('custom_colors_add').addEventListener('click', function () {
 	colorPickerComp.addCustomColor();
 });
 
+// Function to remove an existing custom color
+colorPickerComp.removeCustomColor = function () {
+    // Update status of remove button
+    const color = `hsla(${colorPickerComp.hue}, ${colorPickerComp.saturation}%, ${colorPickerComp.lightness}%, ${colorPickerComp.alpha})`;
+
+    // Check if color is already present
+    let isCustomColor = false;
+    for (let i = 0; i < colorPickerComp.LSCustomColors[0].length; i++)
+        if (colorPickerComp.LSCustomColors[0][i] == color) {
+            let elem = document.getElementById('custom_colors_box').getElementsByClassName('custom_colors_preview')[i];
+            colorPickerComp.clearSingleCustomColor(elem);
+            document.getElementById('custom_colors_del').style.display = 'none';
+            return;
+        }
+};
+document.getElementById('custom_colors_del').addEventListener('click', function () {
+    colorPickerComp.removeCustomColor();
+});
+
 // Event to fire for a context menu
 document.getElementById('custom_colors_box').addEventListener('contextmenu', function (event) {
 	// Making sure the users has selected a color preview
@@ -102,7 +132,9 @@ colorPickerComp.clearSingleCustomColor = function (element) {
 	}
 
 	// Updating the local storage
+    try {
 	localStorage.setItem('custom_colors', JSON.stringify(colorPickerComp.LSCustomColors));
+    } catch (e) {}
 
 	// Making sure the add color button is displaying
 	document.getElementById('custom_colors_add').style.display = 'inline-block';
@@ -124,7 +156,9 @@ colorPickerComp.clearAllCustomColors = function () {
 	}
 
 	// Updating the local storage
+    try {
 	localStorage.setItem('custom_colors', JSON.stringify(colorPickerComp.LSCustomColors));
+    } catch (e) {}
 
 	// Making sure the add color button is displaying
 	document.getElementById('custom_colors_add').style.display = 'inline-block';