feat: #5964, #8734 remove colorpicker

public/src/admin/manage/category.js

@@ -3,11 +3,10 @@
 define('admin/manage/category', [
 	'uploader',
 	'iconSelect',
-	'admin/modules/colorpicker',
 	'categorySelector',
 	'benchpress',
 	'api',
-], function (uploader, iconSelect, colorpicker, categorySelector, Benchpress, api) {
+], function (uploader, iconSelect, categorySelector, Benchpress, api) {
 	var	Category = {};
 	var updateHash = {};
 
@@ -21,21 +20,6 @@ define('admin/manage/category', [
 			ajaxify.go('admin/manage/categories/' + selectedCategory.cid);
 		});
 
-		function enableColorPicker(idx, inputEl) {
-			var $inputEl = $(inputEl);
-			var previewEl = $inputEl.parents('[data-cid]').find('.category-preview');
-
-			colorpicker.enable($inputEl, function (hsb, hex) {
-				if ($inputEl.attr('data-name') === 'bgColor') {
-					previewEl.css('background-color', '#' + hex);
-				} else if ($inputEl.attr('data-name') === 'color') {
-					previewEl.css('color', '#' + hex);
-				}
-
-				modified($inputEl[0]);
-			});
-		}
-
 		handleTags();
 
 		$('#category-settings input, #category-settings select').on('change', function (ev) {
@@ -46,7 +30,17 @@ define('admin/manage/category', [
 			$('.category-preview').css('background-size', $(this).val());
 		});
 
-		$('[data-name="bgColor"], [data-name="color"]').each(enableColorPicker);
+		$('[data-name="bgColor"], [data-name="color"]').on('input', function () {
+			var $inputEl = $(this);
+			var previewEl = $inputEl.parents('[data-cid]').find('.category-preview');
+			if ($inputEl.attr('data-name') === 'bgColor') {
+				previewEl.css('background-color', $inputEl.val());
+			} else if ($inputEl.attr('data-name') === 'color') {
+				previewEl.css('color', $inputEl.val());
+			}
+
+			modified($inputEl[0]);
+		});
 
 		$('#save').on('click', function () {
 			var tags = $('#tag-whitelist').val() ? $('#tag-whitelist').val().split(',') : [];

public/src/admin/manage/group.js

@@ -3,12 +3,11 @@
 define('admin/manage/group', [
 	'forum/groups/memberlist',
 	'iconSelect',
-	'admin/modules/colorpicker',
 	'translator',
 	'categorySelector',
 	'groupSearch',
 	'api',
-], function (memberList, iconSelect, colorpicker, translator, categorySelector, groupSearch, api) {
+], function (memberList, iconSelect, translator, categorySelector, groupSearch, api) {
 	var Groups = {};
 
 	Groups.init = function () {
@@ -27,15 +26,15 @@ define('admin/manage/group', [
 
 		memberList.init('admin/manage/group');
 
-		changeGroupUserTitle.keyup(function () {
+		changeGroupUserTitle.on('keyup', function () {
 			groupLabelPreviewText.text(changeGroupUserTitle.val());
 		});
 
-		changeGroupLabelColor.keyup(function () {
+		changeGroupLabelColor.on('keyup input', function () {
-			groupLabelPreview.css('background', changeGroupLabelColor.val() || '#000000');
+			groupLabelPreview.css('background-color', changeGroupLabelColor.val() || '#000000');
 		});
 
-		changeGroupTextColor.keyup(function () {
+		changeGroupTextColor.on('keyup input', function () {
 			groupLabelPreview.css('color', changeGroupTextColor.val() || '#ffffff');
 		});
 
@@ -63,14 +62,6 @@ define('admin/manage/group', [
 
 		groupSearch.init($('[component="group-selector"]'));
 
-		colorpicker.enable(changeGroupLabelColor, function (hsb, hex) {
-			groupLabelPreview.css('background-color', '#' + hex);
-		});
-
-		colorpicker.enable(changeGroupTextColor, function (hsb, hex) {
-			groupLabelPreview.css('color', '#' + hex);
-		});
-
 		$('form [data-property]').on('change', function () {
 			app.flags = app.flags || {};
 			app.flags._unsaved = true;

public/src/admin/manage/tags.js

@@ -4,8 +4,7 @@
 define('admin/manage/tags', [
 	'forum/infinitescroll',
 	'admin/modules/selectable',
-	'admin/modules/colorpicker',
+], function (infinitescroll, selectable) {
-], function (infinitescroll, selectable, colorpicker) {
 	var	Tags = {};
 	var timeoutId = 0;
 
@@ -91,7 +90,7 @@ define('admin/manage/tags', [
 			}
 
 			var firstTag = $(tagsToModify[0]);
-			var modal = bootbox.dialog({
+			bootbox.dialog({
 				title: '[[admin/manage/tags:alerts.editing]]',
 				message: firstTag.find('.tag-modal').html(),
 				buttons: {
@@ -100,15 +99,17 @@ define('admin/manage/tags', [
 						className: 'btn-primary save',
 						callback: function () {
 							var modal = $('.bootbox');
-							var bgColor = modal.find('[data-name="bgColor"]').val();
+							var resetColors = modal.find('#reset-colors').is(':checked');
-							var color = modal.find('[data-name="color"]').val();
+							var bgColor = resetColors ? '' : modal.find('[data-name="bgColor"]').val();
+							var color = resetColors ? '' : modal.find('[data-name="color"]').val();
+
 							var data = [];
 							tagsToModify.each(function (idx, tag) {
 								tag = $(tag);
 								data.push({
 									value: tag.attr('data-tag'),
-									color: modal.find('[data-name="color"]').val(),
+									color: color,
-									bgColor: modal.find('[data-name="bgColor"]').val(),
+									bgColor: bgColor,
 								});
 
 								tag.find('[data-name="bgColor"]').val(bgColor);
@@ -126,8 +127,6 @@ define('admin/manage/tags', [
 					},
 				},
 			});
-
-			handleColorPickers(modal);
 		});
 	}
 
@@ -195,14 +194,5 @@ define('admin/manage/tags', [
 		});
 	}
 
-	function handleColorPickers(modal) {
-		function enableColorPicker(idx, inputEl) {
-			var $inputEl = $(inputEl);
-			colorpicker.enable($inputEl);
-		}
-
-		modal.find('[data-name="bgColor"], [data-name="color"]').each(enableColorPicker);
-	}
-
 	return Tags;
 });

public/src/client/groups/details.js

@@ -8,7 +8,6 @@ define('forum/groups/details', [
 	'pictureCropper',
 	'translator',
 	'api',
-	'vendor/colorpicker/colorpicker',
 ], function (memberList, iconSelect, components, coverPhoto, pictureCropper, translator, api) {
 	var Details = {};
 	var groupName;
@@ -138,8 +137,6 @@ define('forum/groups/details', [
 
 	Details.prepareSettings = function () {
 		var settingsFormEl = components.get('groups/settings');
-		var labelColorBtn = settingsFormEl.find('[data-action="label-color-select"]');
-		var textColorBtn = settingsFormEl.find('[data-action="text-color-select"]');
 		var labelColorValueEl = settingsFormEl.find('[name="labelColor"]');
 		var textColorValueEl = settingsFormEl.find('[name="textColor"]');
 		var iconBtn = settingsFormEl.find('[data-action="icon-select"]');
@@ -149,27 +146,12 @@ define('forum/groups/details', [
 		var userTitleEnabledEl = settingsFormEl.find('[name="userTitleEnabled"]');
 		var iconValueEl = settingsFormEl.find('[name="icon"]');
 
-		// Add color picker to settings form
+		labelColorValueEl.on('input', function () {
-		labelColorBtn.ColorPicker({
+			previewEl.css('background-color', labelColorValueEl.val());
-			color: labelColorValueEl.val() || '#000',
-			onChange: function (hsb, hex) {
-				labelColorValueEl.val('#' + hex);
-				previewEl.css('background-color', '#' + hex);
-			},
-			onShow: function (colpkr) {
-				$(colpkr).css('z-index', 1051);
-			},
 		});
 
-		textColorBtn.ColorPicker({
+		textColorValueEl.on('input', function () {
-			color: textColorValueEl.val() || '#fff',
+			previewEl.css('color', textColorValueEl.val());
-			onChange: function (hsb, hex) {
-				textColorValueEl.val('#' + hex);
-				previewEl.css('color', '#' + hex);
-			},
-			onShow: function (colpkr) {
-				$(colpkr).css('z-index', 1051);
-			},
 		});
 
 		// Add icon selection interface

public/vendor/colorpicker/colorpicker.css

@@ -1,161 +0,0 @@
-.colorpicker {
-	width: 356px;
-	height: 176px;
-	overflow: hidden;
-	position: absolute;
-	background: url(./vendor/colorpicker/images/custom_background.png);
-	font-family: Arial, Helvetica, sans-serif;
-	display: none;
-}
-.colorpicker_color {
-	width: 150px;
-	height: 150px;
-	left: 14px;
-	top: 13px;
-	position: absolute;
-	background: #f00;
-	overflow: hidden;
-	cursor: crosshair;
-}
-.colorpicker_color div {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 150px;
-	height: 150px;
-	background: url(./vendor/colorpicker/images/colorpicker_overlay.png);
-}
-.colorpicker_color div div {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 11px;
-	height: 11px;
-	overflow: hidden;
-	background: url(./vendor/colorpicker/images/colorpicker_select.gif);
-	margin: -5px 0 0 -5px;
-}
-.colorpicker_hue {
-	position: absolute;
-	top: 13px;
-	left: 171px;
-	width: 35px;
-	height: 150px;
-	cursor: n-resize;
-}
-.colorpicker_hue div {
-	position: absolute;
-	width: 35px;
-	height: 9px;
-	overflow: hidden;
-	background: url(./vendor/colorpicker/images/custom_indic.gif) left top;
-	margin: -4px 0 0 0;
-	left: 0px;
-}
-.colorpicker_new_color {
-	position: absolute;
-	width: 60px;
-	height: 30px;
-	left: 213px;
-	top: 13px;
-	background: #f00;
-}
-.colorpicker_current_color {
-	position: absolute;
-	width: 60px;
-	height: 30px;
-	left: 283px;
-	top: 13px;
-	background: #f00;
-}
-.colorpicker input {
-	background-color: transparent;
-	border: 1px solid transparent;
-	position: absolute;
-	font-size: 10px;
-	font-family: Arial, Helvetica, sans-serif;
-	color: #898989;
-	top: 4px;
-	right: 11px;
-	text-align: right;
-	margin: 0;
-	padding: 0;
-	height: 11px;
-}
-.colorpicker_hex {
-	position: absolute;
-	width: 72px;
-	height: 22px;
-	background: url(./vendor/colorpicker/images/custom_hex.png) top;
-	left: 212px;
-	top: 142px;
-}
-.colorpicker_hex input {
-	right: 6px;
-}
-.colorpicker_field {
-	height: 22px;
-	width: 62px;
-	background-position: top;
-	position: absolute;
-}
-.colorpicker_field span {
-	position: absolute;
-	width: 12px;
-	height: 22px;
-	overflow: hidden;
-	top: 0;
-	right: 0;
-	cursor: n-resize;
-}
-.colorpicker_rgb_r {
-	background-image: url(./vendor/colorpicker/images/custom_rgb_r.png);
-	top: 52px;
-	left: 212px;
-}
-.colorpicker_rgb_g {
-	background-image: url(./vendor/colorpicker/images/custom_rgb_g.png);
-	top: 82px;
-	left: 212px;
-}
-.colorpicker_rgb_b {
-	background-image: url(./vendor/colorpicker/images/custom_rgb_b.png);
-	top: 112px;
-	left: 212px;
-}
-.colorpicker_hsb_h {
-	background-image: url(./vendor/colorpicker/images/custom_hsb_h.png);
-	top: 52px;
-	left: 282px;
-}
-.colorpicker_hsb_s {
-	background-image: url(./vendor/colorpicker/images/custom_hsb_s.png);
-	top: 82px;
-	left: 282px;
-}
-.colorpicker_hsb_b {
-	background-image: url(./vendor/colorpicker/images/custom_hsb_b.png);
-	top: 112px;
-	left: 282px;
-}
-.colorpicker_submit {
-	position: absolute;
-	width: 22px;
-	height: 22px;
-	background: url(./vendor/colorpicker/images/custom_submit.png) top;
-	left: 322px;
-	top: 142px;
-	overflow: hidden;
-}
-.colorpicker_focus {
-	background-position: center;
-}
-.colorpicker_hex.colorpicker_focus {
-	background-position: bottom;
-}
-.colorpicker_submit.colorpicker_focus {
-	background-position: bottom;
-}
-.colorpicker_slider {
-	background-position: bottom;
-}

src/categories/create.js

@@ -111,7 +111,7 @@ module.exports = function (Categories) {
 
 	Categories.assignColours = function () {
 		const backgrounds = ['#AB4642', '#DC9656', '#F7CA88', '#A1B56C', '#86C1B9', '#7CAFC2', '#BA8BAF', '#A16946'];
-		const text = ['#fff', '#fff', '#333', '#fff', '#333', '#fff', '#fff', '#fff'];
+		const text = ['#ffffff', '#ffffff', '#333333', '#ffffff', '#333333', '#ffffff', '#ffffff', '#ffffff'];
 		const index = Math.floor(Math.random() * backgrounds.length);
 		return [backgrounds[index], text[index]];
 	};

src/meta/css.js

@@ -26,7 +26,6 @@ var buildImports = {
 			'@import "font-awesome";',
 			'@import "../../public/less/jquery-ui.less";',
 			'@import (inline) "../public/vendor/jquery/bootstrap-tagsinput/bootstrap-tagsinput.css";',
-			'@import (inline) "../public/vendor/colorpicker/colorpicker.css";',
 			'@import (inline) "../node_modules/cropperjs/dist/cropper.css";',
 			'@import "../../public/less/flags.less";',
 			'@import "../../public/less/generics.less";',
@@ -42,7 +41,6 @@ var buildImports = {
 			'@import "font-awesome";',
 			'@import "../public/less/admin/admin";',
 			'@import "../public/less/generics.less";',
-			'@import (inline) "../public/vendor/colorpicker/colorpicker.css";',
 			'@import "../../public/less/jquery-ui.less";',
 			'@import (inline) "../public/vendor/jquery/bootstrap-tagsinput/bootstrap-tagsinput.css";',
 			'@import (inline) "../public/vendor/mdl/material.css";',

src/meta/js.js

@@ -83,7 +83,6 @@ JS.scripts = {
 
 	admin: [
 		'node_modules/material-design-lite/material.js',
-		'public/vendor/colorpicker/colorpicker.js',
 		'public/src/admin/admin.js',
 		'public/vendor/jquery/serializeObject/jquery.ba-serializeobject.min.js',
 		'public/vendor/jquery/deserialize/jquery.deserialize.min.js',

src/upgrades/1.15.0/fix_category_colors.js

@@ -0,0 +1,21 @@
+'use strict';
+
+const db = require('../../database');
+
+module.exports = {
+	name: 'Fix category colors that are 3 digit hex colors',
+	timestamp: Date.UTC(2020, 9, 11),
+	method: async () => {
+		const batch = require('../../batch');
+		await batch.processSortedSet('categories:cid', async function (cids) {
+			let categoryData = await db.getObjects(cids.map(c => 'category:' + c));
+			categoryData = categoryData.filter(c => c && (c.color === '#fff' || c.color === '#333' || String(c.color).length !== 7));
+			if (categoryData.length) {
+				await Promise.all(categoryData.map(async (data) => {
+					const color = '#' + new Array(6).fill((data.color && data.color[1]) || 'f').join('');
+					await db.setObjectField('category:' + data.cid, 'color', color);
+				}));
+			}
+		}, { batch: 500 });
+	},
+};

src/views/admin/manage/category.tpl

@@ -28,7 +28,7 @@
 							<label for="cid-{category.cid}-bgColor">
 								[[admin/manage/categories:bg-color]]
 							</label>
-							<input id="cid-{category.cid}-bgColor" placeholder="#0059b2" data-name="bgColor" value="{category.bgColor}" class="form-control category_bgColor" />
+							<input type="color" id="cid-{category.cid}-bgColor" placeholder="#0059b2" data-name="bgColor" value="{category.bgColor}" class="form-control category_bgColor" />
 						</div>
 					</div>
 					<div class="col-sm-4 col-xs-12">
@@ -36,7 +36,7 @@
 							<label for="cid-{category.cid}-color">
 								[[admin/manage/categories:text-color]]
 							</label>
-							<input id="cid-{category.cid}-color" placeholder="#fff" data-name="color" value="{category.color}" class="form-control category_color" />
+							<input type="color" id="cid-{category.cid}-color" placeholder="#ffffff" data-name="color" value="{category.color}" class="form-control category_color" />
 						</div>
 					</div>
 					<div class="col-sm-4 col-xs-12">

src/views/admin/manage/group.tpl

@@ -30,13 +30,13 @@
 						<fieldset>
 							<label for="change-group-label-color">[[admin/manage/groups:edit.label-color]]</label>
 
-							<input id="change-group-label-color" placeholder="#0059b2" data-name="bgColor" value="{group.labelColor}" class="form-control" data-property/><br />
+							<input type="color" id="change-group-label-color" placeholder="#0059b2" data-name="bgColor" value="{group.labelColor}" class="form-control" data-property/><br />
 						</fieldset>
 					</div>
 					<div class="col-md-3">
 						<fieldset>
 							<label for="change-group-text-color">[[admin/manage/groups:edit.text-color]]</label>
-							<input id="change-group-text-color" placeholder="#ffffff" data-name="textColor" value="{group.textColor}" class="form-control" data-property/><br />
+							<input type="color" id="change-group-text-color" placeholder="#ffffff" data-name="textColor" value="{group.textColor}" class="form-control" data-property/><br />
 						</fieldset>
 					</div>
 				</div>

src/views/admin/manage/tags.tpl

@@ -25,11 +25,16 @@
 						<div class="tag-modal hidden">
 							<div class="form-group">
 								<label for="bgColor">[[admin/manage/tags:bg-color]]</label>
-								<input id="bgColor" placeholder="#ffffff" data-name="bgColor" value="{tags.bgColor}" class="form-control category_bgColor" />
+								<input type="color" id="bgColor" placeholder="#ffffff" data-name="bgColor" value="{tags.bgColor}" class="form-control category_bgColor" />
 							</div>
 							<div class="form-group">
 								<label for="color">[[admin/manage/tags:text-color]]</label>
-								<input id="color" placeholder="#a2a2a2" data-name="color" value="{tags.color}" class="form-control category_color" />
+								<input type="color" id="color" placeholder="#a2a2a2" data-name="color" value="{tags.color}" class="form-control category_color" />
+							</div>
+							<div class="checkbox">
+								<label>
+									<input id="reset-colors" type="checkbox"> <strong>[[admin/manage/tags:reset-colors]]</strong>
+								</label>
 							</div>
 						</div>
 					</div>