testing out new color picker again

api/functions/organizr-functions.php

@@ -555,6 +555,22 @@ function getCustomizeAppearance()
                     'value' => $GLOBALS['alternateHomepageHeaders']
                 )
             ),
+            'custom' => '
+            <div class="row">
+                <div class="col-lg-12">
+                    <div class="panel panel-info">
+                        <div class="panel-heading">
+                            <span lang="en">Notice</span>
+                        </div>
+                        <div class="panel-wrapper collapse in" aria-expanded="true">
+                            <div class="panel-body">
+                                <span lang="en">The value of #987654 is just a placeholder, you can change to any value you like.</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            ',
             'Colors & Themes' => array(
                 array(
                     'type' => 'input',

css/themes/Organizr.css

@@ -329,6 +329,15 @@ a.mytooltip {
 .bootstrap-tagsinput, .calendar-widget, .chat-main-box, .content-wrap, .css-bar:after, .customtab li.active a, .customtab li.active a:focus, .customtab li.active a:hover, .daterangepicker .input-mini, .dropify-wrapper, .dropify-wrapper .dropify-preview, .dropzone, .footer, .form-control, .jsgrid-alt-row>td, .jsgrid-header-row>th, .jsgrid-row>td, .list-group-item, .list-group-item.disabled, .list-group-item.disabled:focus, .list-group-item.disabled:hover, .manage-table, .modal-content, .myadmin-dd .dd-list .dd-item .dd-handle, .myadmin-dd-empty .dd-list .dd3-content, .myadmin-dd-empty .dd-list .dd3-handle, .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover, .pager li>a, .pager li>span, .pagination>li>a, .pagination>li>span, .panel, .panel .panel-footer, .panel-default .panel-body, .panel-default .panel-footer, .panel-default .panel-heading, .panel-footer textarea, .panel-white .panel-body, .panel-white .panel-footer, .panel-white .panel-heading, .radio label::before, .select2-container-multi .select2-choices, .table tbody tr.advance-table-row td, .thumbnail, .well, .white-box, input, pre, select, table.dataTable.display tbody tr.odd, table.dataTable.stripe tbody tr.odd {
     background: #1b1a1a;
 }
+.cp-container .cp-pills li a{
+	padding:5px;
+	color:#FFF;
+	text-decoration:none;
+}
+.cp-container .cp-pills li a.active,.cp-container .cp-pills li a:hover{
+	background-color:#2cabe3;
+  color:#fff
+}
 .jq-icon-info { background-color: rgba(71, 68, 68, 0.93); color: #FFF; border-color: #bce8f1; }
 .jq-icon-warning { background-color: rgba(154, 83, 20, 0.93); color: #fcf8e3; border-color: #faebcc; }
 .jq-icon-error { background-color: #a94442; color: #f2dede; border-color: #ebccd1; }

index.php

@@ -20,12 +20,12 @@
 	<link href="plugins/bower_components/Magnific-Popup-master/dist/magnific-popup.css" rel="stylesheet">
 	<link href="plugins/bower_components/sweetalert/sweetalert.css" rel="stylesheet" type="text/css">
 	<link href="plugins/bower_components/switchery/dist/switchery.min.css" rel="stylesheet" />
-	<link href="plugins/bower_components/jquery-asColorPicker-master/css/asColorPicker.css" rel="stylesheet">
 	<link href="plugins/bower_components/dropzone-master/dist/dropzone.css" rel="stylesheet" type="text/css" />
 	<link href="plugins/bower_components/css-chart/css-chart.css" rel="stylesheet">
 	<link href="plugins/bower_components/calendar/dist/fullcalendar.css" rel="stylesheet" />
 	<link rel="stylesheet" href="https://cdn.plyr.io/3.1.0/plyr.css">
 	<link href="plugins/bower_components/custom-select/custom-select.css" rel="stylesheet" type="text/css" />
+	<link href="plugins/bower_components/bootstrap-colorpicker-sliders/bootstrap.colorpickersliders.min.css" rel="stylesheet" type="text/css" />
 	<link href="plugins/bower_components/bootstrap-select/bootstrap-select.min.css" rel="stylesheet" />
 	<link href="plugins/bower_components/multiselect/css/multi-select.css" rel="stylesheet" type="text/css" />
 	<link href="plugins/bower_components/owl.carousel/owl.carousel.min.css" rel="stylesheet" type="text/css" />
@@ -137,8 +137,8 @@
 	<script src="js/jquery.serializeToJSON.js"></script>
 	<script src="js/lazyload.min2.js"></script>
 	<script src="js/clipboard.js"></script>
-	<script src="js/jsColorPicker.min.js"></script>
-	<script src="js/jsColor.js"></script>
+<!--	<script src="js/jsColorPicker.min.js"></script>
+	<script src="js/jsColor.js"></script>-->
 	<script src="js/emulatetab.joelpurra.js"></script>
 	<script src="plugins/bower_components/ace/ace.js"></script>
 	<script src="plugins/bower_components/ace/mode-css.js"></script>
@@ -150,8 +150,8 @@
 	<script src="plugins/bower_components/Magnific-Popup-master/dist/jquery.magnific-popup.min.js"></script>
 	<script src="plugins/bower_components/sweetalert/sweetalert.min.js"></script>
 	<script src="plugins/bower_components/switchery/dist/switchery.min.js"></script>
-	<script src="plugins/bower_components/jquery-asColorPicker-master/libs/jquery-asColor.js"></script>
-	<script src="plugins/bower_components/jquery-asColorPicker-master/dist/jquery-asColorPicker.min.js"></script>
+	<script src="//cdnjs.cloudflare.com/ajax/libs/tinycolor/0.11.1/tinycolor.min.js"></script>
+	<script src="plugins/bower_components/bootstrap-colorpicker-sliders/bootstrap.colorpickersliders.min.js"></script>
 	<script src="plugins/bower_components/dropzone-master/dist/dropzone.js"></script>
 	<script src="plugins/bower_components/owl.carousel/owl.carousel.min.js"></script>
 	<script src="plugins/bower_components/calendar/dist/fullcalendar.js"></script>

js/functions.js

@@ -871,13 +871,6 @@ function buildCustomizeAppearance(){
 	organizrAPI('GET','api/?v1/customize/appearance').success(function(data) {
 		var response = JSON.parse(data);
 		$('#customize-appearance-form').html(buildFormGroup(response.data));
-		$(".colorpicker").asColorPicker({
-	        mode: 'complex',
-	        color: {
-	            format: false,
-	            alphaConvert: false
-	        }
-	    });
 		cssEditor = ace.edit("customCSSEditor");
 		var CssMode = ace.require("ace/mode/css").Mode;
 		cssEditor.session.setMode(new CssMode());
@@ -890,13 +883,19 @@ function buildCustomizeAppearance(){
 				$('.saveCss').removeClass('hidden');
 			}
 		});
-		var colors = jsColorPicker('input.pick-a-color', {
+		/*var colors = jsColorPicker('input.pick-a-color', {
 			customBG: '#222',
 			readOnly: false,
 			init: function(elm, colors) { // colors is a different instance (not connected to colorPicker)
 				elm.style.backgroundColor = elm.value;
 				elm.style.color = colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd';
 			}
+		});*/
+		$("input.pick-a-color").ColorPickerSliders({
+			placement: 'bottom',
+			color: '#987654',
+			hsvpanel: true,
+			previewformat: 'hex',
 		});
 	}).fail(function(xhr) {
 		console.error("Organizr Function: API Connection Failed");