[minor] added color picker to bookmark tab add and edit forms

api/plugins/bookmark.php

@@ -372,11 +372,11 @@ class Bookmark extends Organizr
 				<div class="row">
 					<div class="form-group col-lg-4">
 						<label class="control-label" for="new-bookmark-tab-form-inputBackgroundColor" lang="en">Background Color</label>
-						<input type="text" class="form-control pick-a-color-bookmark" id="new-bookmark-tab-form-inputBackgroundColor" name="background_color" required="" value="#fff">
+						<input type="text" class="form-control bookmark-pick-a-color" id="new-bookmark-tab-form-inputBackgroundColor" name="background_color" required="" value="#fff">
 					</div>
 					<div class="form-group col-lg-4">
 						<label class="control-label" for="new-bookmark-tab-form-inputTextColor" lang="en">Text Color</label>
-						<input type="text" class="form-control pick-a-color-bookmark" id="new-bookmark-tab-form-inputTextColor" name="text_color" required="" value="#000">
+						<input type="text" class="form-control bookmark-pick-a-color" id="new-bookmark-tab-form-inputTextColor" name="text_color" required="" value="#000">
 					</div>
 					<div class="form-group col-lg-4">
 						<label class="control-label" for="new-bookmark-preview" lang="en">Preview</label>
@@ -423,11 +423,11 @@ class Bookmark extends Organizr
 				<div class="row">
 					<div class="form-group col-lg-4">
 						<label class="control-label" for="edit-bookmark-tab-form-inputBackgroundColor" lang="en">Background Color</label>
-						<input type="text" class="form-control pick-a-color-bookmark" id="edit-bookmark-tab-form-inputBackgroundColor" name="background_color" required="">
+						<input type="text" class="form-control bookmark-pick-a-color" id="edit-bookmark-tab-form-inputBackgroundColor" name="background_color" required="">
 					</div>
 					<div class="form-group col-lg-4">
 						<label class="control-label" for="edit-bookmark-tab-form-inputTextColor" lang="en">Text Color</label>
-						<input type="text" class="form-control pick-a-color-bookmark" id="edit-bookmark-tab-form-inputTextColor" name="text_color" required="">
+						<input type="text" class="form-control bookmark-pick-a-color" id="edit-bookmark-tab-form-inputTextColor" name="text_color" required="">
 					</div>
 					<div class="form-group col-lg-4">
 						<label class="control-label" for="edit-bookmark-preview" lang="en">Preview</label>

api/plugins/css/bookmark.css

@@ -67,4 +67,4 @@
     color: white;
     text-align: left;
     font-weight: 500;
-}
+}

api/plugins/js/bookmark-settings.js

@@ -55,6 +55,11 @@ function bookmarkTabsLaunch(){
 	$('#settings-main-tab-editor .nav-tabs').append(menuList);
 }
 
+function getColorPickerOptionsWithCallback(func){
+	return ;
+}
+
+var colorPickerInitialized = false;
 function buildBookmarkTabEditor(){
 	organizrAPI2('GET','api/v2/plugins/bookmark/tabs').success(function(data) {
 		try {
@@ -63,6 +68,22 @@ function buildBookmarkTabEditor(){
 			organizrCatchError(e,data);
 		}
 		$('#bookmarkTabEditorTable').html(buildBookmarkTabEditorItem(response.data));
+		
+		// initialize color pickers only first time
+		if(!colorPickerInitialized){
+			$("input.bookmark-pick-a-color").ColorPickerSliders({
+				placement: 'bottom',
+				color: '#987654',
+				hsvpanel: true,
+				previewformat: 'hex',
+				flat: true,
+				onchange: function(container, color){ 
+					generatePreviewBookmarkNewTab();
+					generatePreviewBookmarkEditTab();
+				}
+			});
+			colorPickerInitialized = true;
+		}
 	}).fail(function(xhr) {
 		OrganizrApiError(xhr);
 	});
@@ -135,8 +156,8 @@ function editBookmarkTabForm(id){
 			$('#originalBookmarkTabName').html(response.data.name);
 			$('#edit-bookmark-tab-form [name=url]').val(response.data.url);
 			$('#edit-bookmark-tab-form [name=image]').val(response.data.image);
-			$('#edit-bookmark-tab-form [name=background_color]').val(response.data.background_color);
-			$('#edit-bookmark-tab-form [name=text_color]').val(response.data.text_color);
+			$('#edit-bookmark-tab-form [name=background_color]').val(response.data.background_color).change();
+			$('#edit-bookmark-tab-form [name=text_color]').val(response.data.text_color).change();
 			$('#edit-bookmark-tab-form [name=id]').val(response.data.id);
 			if( response.data.url.indexOf('/?v') > 0){
 				$('#edit-bookmark-tab-form [name=url]').prop('disabled', 'true');
@@ -450,6 +471,18 @@ $(document).on('input change', "#edit-bookmark-tab-form-inputImage", generatePre
 $(document).on('input', "#edit-bookmark-tab-form-inputBackgroundColor", generatePreviewBookmarkEditTab);
 $(document).on('input', "#edit-bookmark-tab-form-inputTextColor", generatePreviewBookmarkEditTab);
 
+//TODO
+/*$(document).on('focusout', 'input.bookmark-pick-a-color', function(e) {
+    var original = $(this).attr('data-original');
+    var newValue = $(this).val();
+    if((original !== newValue) && (newValue !== '#987654') && newValue !== ''){
+        $(this).change();
+        $(this).attr('data-original', newValue);
+    }else if(newValue == ''){
+        $(this).attr('style','');
+    }
+});*/
+
 // CATEGORY MANAGEMENT
 function bookmarkCategoriesLaunch(){
 	var menuList = `<li onclick="changeSettingsMenu('Settings::Tab Editor::Bookmark Categories');loadSettingsPage2('api/v2/plugins/bookmark/settings_tab_editor_bookmark_categories','#settings-tab-editor-tabs','Tab Editor');" role="presentation"><a id="settings-tab-editor-tabs-anchor" href="#settings-tab-editor-tabs" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="true"><span class="visible-xs"><i class="ti-layout-tab-v"></i></span><span class="hidden-xs" lang="en">Bookmark Categories</span></a></li>`;