Language sort optionlist at LED tab (#3178)

* Sort 2 optionlist using sortSelect

* Update led_strip.js

Do the suggestion to code
(and remove some blank lines)

Author: HThuren

src/js/tabs/led_strip.js

@@ -6,7 +6,6 @@ const led_strip = {
         directions: ['n', 'e', 's', 'w', 'u', 'd'],
     };
 
-
 led_strip.initialize = function (callback, scrollPosition) {
     let selectedColorIndex = null;
     let selectedModeColor = null;
@@ -34,7 +33,6 @@ led_strip.initialize = function (callback, scrollPosition) {
         MSP.send_message(MSPCodes.MSP_LED_STRIP_MODECOLOR, false, false, load_html);
     }
 
-
     function load_html() {
         $('#content').load("./tabs/led_strip.html", process_html);
     }
@@ -186,7 +184,6 @@ led_strip.initialize = function (callback, scrollPosition) {
             });
 
             updateBulkCmd();
-
         });
 
         // Color sliders
@@ -217,7 +214,6 @@ led_strip.initialize = function (callback, scrollPosition) {
                 }
             }
 
-
             setColorSliders(selectedColorIndex);
 
             $(this).addClass('btnOn');
@@ -396,6 +392,9 @@ led_strip.initialize = function (callback, scrollPosition) {
             },
         });
 
+        // Sort the element, if need to group, do it by lexical sort, ie. by naming of (the translated) selection text
+        $('#ledStripFunctionSelect').sortSelect(i18n.getMessage("ledStripFunctionNoneOption"));
+
         // UI: select LED function from drop-down
         $('.functionSelect').on('change', function() {
             clearModeColorSelection();
@@ -405,6 +404,9 @@ led_strip.initialize = function (callback, scrollPosition) {
             updateBulkCmd();
         });
 
+        // Sort the element, if need to group, do it by lexical sort, ie. by naming of (the translated) selection text
+        $('#ledStripModeColorsModeSelect').sortSelect(i18n.getMessage("ledStripModeColorsModeOrientation"));
+
         // UI: select mode from drop-down
         $('.modeSelect').on('change', function() {
 
@@ -425,8 +427,7 @@ led_strip.initialize = function (callback, scrollPosition) {
             $('.mode_colors').each(function() { setModeBackgroundColor($(this)); });
         });
 
-        function toggleSwitch(that, letter)
-        {
+        function toggleSwitch(that, letter) {
             if ($(that).is(':checked')) {
                 $('.ui-selected').find('.wire').each(function() {
                     if ($(this).text() != "") {
@@ -528,8 +529,6 @@ led_strip.initialize = function (callback, scrollPosition) {
             }
         });
 
-
-
         $('.mainGrid').disableSelection();
 
         $('.gPoint').each(function(){
@@ -563,7 +562,6 @@ led_strip.initialize = function (callback, scrollPosition) {
             }
 
             $(this).addClass(`color-${led.color}`);
-
         });
 
         $('a.save').on('click', function () {
@@ -582,7 +580,6 @@ led_strip.initialize = function (callback, scrollPosition) {
                     GUI.log(i18n.getMessage('ledStripEepromSaved'));
                 });
             }
-
         });
 
         colorDefineSliders.hide();
@@ -601,12 +598,6 @@ led_strip.initialize = function (callback, scrollPosition) {
         GUI.content_ready(callback);
     }
 
-
-
-
-
-
-
     function findLed(x, y) {
         for (let ledIndex = 0; ledIndex < FC.LED_STRIP.length; ledIndex++) {
             const led = FC.LED_STRIP[ledIndex];
@@ -617,7 +608,6 @@ led_strip.initialize = function (callback, scrollPosition) {
         return undefined;
     }
 
-
     function updateBulkCmd() {
         const ledStripLength = FC.LED_STRIP.length;
 
@@ -943,7 +933,6 @@ led_strip.initialize = function (callback, scrollPosition) {
             }
         }
 
-
         // refresh color buttons
         $('.colors').children().each(function() { setBackgroundColor($(this)); });
         $('.overlay-color').each(function() { setBackgroundColor($(this)); });
@@ -1005,7 +994,6 @@ led_strip.initialize = function (callback, scrollPosition) {
         // only fire events when all values are set
         if (change)
             sliders.trigger('input');
-
     }
 
     function HsvToColor(input) {

src/tabs/led_strip.html

@@ -39,7 +39,7 @@
 
             <div class="select">
                 <span class="color_section" i18n="ledStripFunctionTitle"></span>
-                <select class="functionSelect">
+                <select id="ledStripFunctionSelect" class="functionSelect">
                     <option value="" i18n="ledStripFunctionNoneOption"></option>
                     <option value="function-c"  i18n="ledStripFunctionColorOption"></option>
                     <option value="function-f"  i18n="ledStripFunctionModesOption"></option>
@@ -112,7 +112,7 @@
             <div class="mode_colors">
                 <div class="section" i18n="ledStripModeColorsTitle"></div>
 
-                <select class="modeSelect">
+                <select id="ledStripModeColorsModeSelect" class="modeSelect">
                     <option value="0" i18n="ledStripModeColorsModeOrientation"></option>
                     <option value="1" i18n="ledStripModeColorsModeHeadfree"></option>
                     <option value="2" i18n="ledStripModeColorsModeHorizon"></option>