feat: #5964, #8734 remove colorpicker

NodeBB · Oct 11, 2020 · 948f261 · 948f261
1 parent c954db8
commit 948f261
Show file tree

Hide file tree

Showing 39 changed files with 62 additions and 252 deletions.
diff --git a/public/src/admin/manage/category.js b/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(',') : [];

diff --git a/public/src/admin/manage/group.js b/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 () {
-			groupLabelPreview.css('background', changeGroupLabelColor.val() || '#000000');
+		changeGroupLabelColor.on('keyup input', function () {
+			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;

diff --git a/public/src/admin/manage/tags.js b/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, colorpicker) {
+], function (infinitescroll, selectable) {
 	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 color = modal.find('[data-name="color"]').val();
+							var resetColors = modal.find('#reset-colors').is(':checked');
+							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(),
-									bgColor: modal.find('[data-name="bgColor"]').val(),
+									color: color,
+									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;
 });
diff --git a/public/src/client/groups/details.js b/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
-		labelColorBtn.ColorPicker({
-			color: labelColorValueEl.val() || '#000',
-			onChange: function (hsb, hex) {
-				labelColorValueEl.val('#' + hex);
-				previewEl.css('background-color', '#' + hex);
-			},
-			onShow: function (colpkr) {
-				$(colpkr).css('z-index', 1051);
-			},
+		labelColorValueEl.on('input', function () {
+			previewEl.css('background-color', labelColorValueEl.val());
 		});
 
-		textColorBtn.ColorPicker({
-			color: textColorValueEl.val() || '#fff',
-			onChange: function (hsb, hex) {
-				textColorValueEl.val('#' + hex);
-				previewEl.css('color', '#' + hex);
-			},
-			onShow: function (colpkr) {
-				$(colpkr).css('z-index', 1051);
-			},
+		textColorValueEl.on('input', function () {
+			previewEl.css('color', textColorValueEl.val());
 		});
 
 		// Add icon selection interface

diff --git a/public/vendor/colorpicker/colorpicker.css b/public/vendor/colorpicker/colorpicker.css