Extract code for creating color boxes.

ckeditor · Feb 4, 2020 · 445f68d · 445f68d
1 parent 8194866
commit 445f68d
Showing 1 changed file with 32 additions and 24 deletions.
diff --git a/plugins/colorbutton/plugin.js b/plugins/colorbutton/plugin.js
@@ -295,7 +295,7 @@ CKEDITOR.plugins.add( 'colorbutton', {
 					editor.getColorFromDialog( function( color ) {
 						if ( color ) {
 							setColor( color );
-							addColorToHistory( {
+							saveColor( {
 								colorHistoryRows: panel.element.find( '.cke_colorhistory_row' ).toArray(),
 								colorHistorySeparator: panel.element.findOne( '.cke_colorhistory_separator' ),
 								colorHexCode: color.substr( 1 ).toUpperCase(),
@@ -306,7 +306,7 @@ CKEDITOR.plugins.add( 'colorbutton', {
 					}, null, colorData );
 				} else {
 					setColor( color && '#' + color );
-					addColorToHistory( {
+					saveColor( {
 						colorHistoryRows: panel.element.find( '.cke_colorhistory_row' ).toArray(),
 						colorHistorySeparator: panel.element.findOne( '.cke_colorhistory_separator' ),
 						colorHexCode: color.toUpperCase(),
@@ -442,7 +442,7 @@ CKEDITOR.plugins.add( 'colorbutton', {
 				return;
 			}
 
-			sortedColors = sortByOccurrences( colorOccurrences, 'colorCode' );
+			sortedColors = sortByOccurrencesAscending( colorOccurrences, 'colorCode' );
 
 			trimArray( sortedColors, colorsPerRow, rowLimit );
 
@@ -485,7 +485,7 @@ CKEDITOR.plugins.add( 'colorbutton', {
 			}
 		}
 
-		function sortByOccurrences( objectToParse, targetKeyName ) {
+		function sortByOccurrencesAscending( objectToParse, targetKeyName ) {
 			var result = [];
 
 			for ( var key in objectToParse ) {
@@ -501,7 +501,7 @@ CKEDITOR.plugins.add( 'colorbutton', {
 				return b.frequency - a.frequency;
 			} );
 
-			return result;
+			return result.reverse();
 		}
 
 		function trimArray( array, rowSize, rowLimit ) {
@@ -526,20 +526,16 @@ CKEDITOR.plugins.add( 'colorbutton', {
 					currentRow = appendNewColorHistoryRow( currentRow );
 				}
 
-				// Unfortunately CKEDITOR.dom.element.createFromHtml() doesn't work for table elements,
-				// so table cell has to be created separately.
-				var colorBox = new CKEDITOR.dom.element( 'td' ),
-					color = options.colorArray[ index ];
+				var color = options.colorArray[ index ];
 
-				colorBox.setHtml( generateColorBoxHtml( {
+				addColorToHistory( {
 					colorLabel: color.label,
 					clickFn: options.clickFn,
 					colorCode: color.colorCode,
-					position: index + 1,
-					setSize: options.setSize
-				} ) );
-
-				currentRow.append( colorBox );
+					position: options.setSize - index,
+					setSize: options.setSize,
+					colorHistoryRow: currentRow
+				} );
 			}
 		}
 
@@ -552,6 +548,22 @@ CKEDITOR.plugins.add( 'colorbutton', {
 			return newRow;
 		}
 
+		function addColorToHistory( options ) {
+			// Unfortunately CKEDITOR.dom.element.createFromHtml() doesn't work for table elements,
+			// so table cell has to be created separately.
+			var colorBox = new CKEDITOR.dom.element( 'td' );
+
+			colorBox.setHtml( generateColorBoxHtml( {
+				colorLabel: options.colorLabel,
+				clickFn: options.clickFn,
+				colorCode: options.colorCode,
+				position: options.position,
+				setSize: options.setSize
+			} ) );
+
+			options.colorHistoryRow.append( colorBox, true );
+		}
+
 		function generateColorBoxHtml( options ) {
 			return '<a class="cke_colorbox" _cke_focus=1 hidefocus=true' +
 				' title="' + options.colorLabel + '"' +
@@ -567,7 +579,7 @@ CKEDITOR.plugins.add( 'colorbutton', {
 		}
 
 		// This function is called whenever a color from panel or colordialog is chosen.
-		function addColorToHistory( options ) {
+		function saveColor( options ) {
 			if ( config.colorButton_historyRowLimit === 0 ) {
 				return;
 			}
@@ -583,22 +595,18 @@ CKEDITOR.plugins.add( 'colorbutton', {
 				// instead of creating a new one.
 				options.colorHistoryRows[ 0 ].append( chosenColorBox.getParent(), true );
 			} else {
-				var colorBox = new CKEDITOR.dom.element( 'td' );
-
 				if ( colorBoxesNumber < colorBoxesLimit ) {
 					colorBoxesNumber += 1;
 				}
 
-				colorBox.setHtml( generateColorBoxHtml( {
+				addColorToHistory( {
 					colorLabel: colorLabel,
 					clickFn: options.clickFn,
 					colorCode: options.colorHexCode,
-					type: options.type,
 					position: 1,
-					setSize: colorBoxesNumber
-				} ) );
-
-				options.colorHistoryRows[ 0 ].append( colorBox, true );
+					setSize: colorBoxesNumber,
+					colorHistoryRow: options.colorHistoryRows[ 0 ]
+				} );
 			}
 
 			rearrangeRows( options.colorHistoryRows, rowLimit, options.colorsPerRow );