implemented simple sort mechanic for navigation (#222)

* implemented simple sort mechanic for navigation

- closes #15

* rm logs

README.md

@@ -231,6 +231,7 @@ E.g., if it was used in a menu and the menu is red, the circle would be red.
 ## Changelog
 ### **WORK IN PROGRESS**
 * (bluefox) Added the possibility to limit hard the view size
+* (foxriver76) implemented simple sort mechanic for navigation
 
 ### 2.9.2 (2023-11-29)
 * (foxriver76) fixed reactivity in custom components

src/src/Attributes/View.jsx

@@ -576,6 +576,9 @@ const View = props => {
                 {
                     type: 'text', name: 'Title', field: 'navigationTitle', notStyle: true, hidden: '!data.navigation',
                 },
+                {
+                    type: 'number', name: 'Order', field: 'navigationOrder', notStyle: true, hidden: '!data.navigation',
+                },
                 {
                     type: 'icon64', name: 'Icon', field: 'navigationIcon', notStyle: true, hidden: '!data.navigation || data.navigationImage',
                 },

src/src/Vis/utils.tsx

@@ -17,10 +17,16 @@ export function calculateOverflow(style: CSSProperties): void {
     }
 }
 
-export function isVarFinite(numberOrString: any): boolean {
+/**
+ * Check, that given number is not Infinity or NaN
+ *
+ * @param numberOrString number or string to check
+ */
+export function isVarFinite(numberOrString: number | string): boolean {
     // the difference between Number.isFinite and window.isFinite is that window.isFinite tries to convert the parameter to a number
     // and Number.isFinite does not and just check against non NaN and non Infinity
+    const num = typeof numberOrString === 'string' ? parseFloat(numberOrString) : numberOrString;
 
     // eslint-disable-next-line no-restricted-properties
-    return window.isFinite(numberOrString);
+    return window.isFinite(num);
 }

src/src/Vis/visNavigation.jsx

@@ -219,17 +219,20 @@ class VisNavigation extends React.Component {
                     color: viewSettings.navigationColor,
                     icon: viewSettings.navigationIcon || viewSettings.navigationImage,
                     noText: viewSettings.navigationOnlyIcon,
+                    order: parseInt(viewSettings.navigationOrder ?? '0'),
                     view,
                 };
 
                 items.push(item);
 
-                if (item.icon && item.icon.startsWith('_PRJ_NAME/')) {
+                if (item.icon?.startsWith('_PRJ_NAME/')) {
                     item.icon = `../${this.props.context.adapterName}.${this.props.context.instance}/${this.props.context.projectName}${item.icon.substring(9)}`;  // "_PRJ_NAME".length = 9
                 }
             }
         });
 
+        items.sort((prevItem, nextItem) => (prevItem.order === nextItem.order ? 0 : prevItem.order < nextItem.order ? -1 : 1));
+
         if (settings.navigationOrientation === 'horizontal') {
             return <div
                 className={this.props.classes.verticalMenu}

src/src/i18n/de.json

@@ -233,6 +233,11 @@
   "Jump to widget by double click": "Springen Sie zum Widget, indem Sie auf das Widget doppelklicken",
   "Just use without modification": "Einfach ohne Modifikation verwenden",
   "Keep on old place": "Am alten Ort lassen",
+  "Limit background color": "Hintergrundfarbe",
+  "Limit border color": "Randfarbe",
+  "Limit border style": "Grenzstil",
+  "Limit border width": "Rahmenbreite",
+  "Limit screen": "Bildschirm begrenzen",
   "Lined paper": "Liniertes Papier",
   "Lock": "Sperren",
   "Lock dragging": "Ziehen sperren",
@@ -275,6 +280,7 @@
   "Open runtime in new window": "Runtime in neuem Fenster öffnen",
   "Open widgeteria": "Widgeteria öffnen",
   "Options": "Optionen",
+  "Order": "Reihenfolge",
   "Orientation": "Orientierung",
   "Palette": "Palette",
   "Paste": "Einfügen",
@@ -634,10 +640,5 @@
   "vis_2_widgets_widgets_tabs_variant_full_width": "Gesamtbreite",
   "vis_2_widgets_widgets_tabs_vertical": "Vertikal",
   "welcome_message": "Es existiert noch kein Projekt.",
-  "word-spacing": "Wortabstand",
-  "Limit screen": "Bildschirm begrenzen",
-  "Limit border width": "Rahmenbreite",
-  "Limit border color": "Randfarbe",
-  "Limit border style": "Grenzstil",
-  "Limit background color": "Hintergrundfarbe"
+  "word-spacing": "Wortabstand"
 }

src/src/i18n/en.json

@@ -233,6 +233,11 @@
   "Jump to widget by double click": "Jump to widget by double click on widget",
   "Just use without modification": "Just use without modification",
   "Keep on old place": "Keep on old place",
+  "Limit background color": "Background color",
+  "Limit border color": "Border color",
+  "Limit border style": "Border style",
+  "Limit border width": "Border width",
+  "Limit screen": "Limit screen",
   "Lined paper": "Lined paper",
   "Lock": "Lock",
   "Lock dragging": "Lock dragging",
@@ -275,6 +280,7 @@
   "Open runtime in new window": "Open runtime in new window",
   "Open widgeteria": "Open widgeteria",
   "Options": "Options",
+  "Order": "Order",
   "Orientation": "Orientation",
   "Palette": "Palette",
   "Paste": "Paste",
@@ -634,10 +640,5 @@
   "vis_2_widgets_widgets_tabs_variant_full_width": "full width",
   "vis_2_widgets_widgets_tabs_vertical": "Vertical",
   "welcome_message": "No one project yet exists.",
-  "word-spacing": "word-spacing",
-  "Limit screen": "Limit screen",
-  "Limit border width": "Border width",
-  "Limit border color": "Border color",
-  "Limit border style": "Border style",
-  "Limit background color": "Background color"
+  "word-spacing": "word-spacing"
 }

src/src/i18n/es.json

@@ -233,6 +233,11 @@
   "Jump to widget by double click": "Saltar al widget haciendo doble clic en el widget",
   "Just use without modification": "Solo uso sin modificaciones.",
   "Keep on old place": "Mantener en el lugar antiguo",
+  "Limit background color": "Color de fondo",
+  "Limit border color": "Color del borde",
+  "Limit border style": "Estilo de borde",
+  "Limit border width": "Ancho del borde",
+  "Limit screen": "Pantalla límite",
   "Lined paper": "Papel rayado",
   "Lock": "Cerrar",
   "Lock dragging": "Arrastrar bloqueo",
@@ -275,6 +280,7 @@
   "Open runtime in new window": "Abrir el tiempo de ejecución en una nueva ventana",
   "Open widgeteria": "Widgetería abierta",
   "Options": "Opciones",
+  "Order": "Orden",
   "Orientation": "Orientación",
   "Palette": "Paleta",
   "Paste": "Pegar",
@@ -634,10 +640,5 @@
   "vis_2_widgets_widgets_tabs_variant_full_width": "ancho completo",
   "vis_2_widgets_widgets_tabs_vertical": "Vertical",
   "welcome_message": "Aún no existe ningún proyecto.",
-  "word-spacing": "espacio entre palabras",
-  "Limit screen": "Pantalla límite",
-  "Limit border width": "Ancho del borde",
-  "Limit border color": "Color del borde",
-  "Limit border style": "Estilo de borde",
-  "Limit background color": "Color de fondo"
+  "word-spacing": "espacio entre palabras"
 }

src/src/i18n/fr.json

@@ -233,6 +233,11 @@
   "Jump to widget by double click": "Aller au widget en double-cliquant sur le widget",
   "Just use without modification": "A utiliser sans modification",
   "Keep on old place": "Gardez l'ancien endroit",
+  "Limit background color": "Couleur de l'arrière plan",
+  "Limit border color": "Couleur de la bordure",
+  "Limit border style": "Style de bordure",
+  "Limit border width": "Largeur de la bordure",
+  "Limit screen": "Écran de limite",
   "Lined paper": "Papier ligné",
   "Lock": "Bloquer",
   "Lock dragging": "Verrouiller le glissement",
@@ -275,6 +280,7 @@
   "Open runtime in new window": "Ouvrir le runtime dans une nouvelle fenêtre",
   "Open widgeteria": "Widgeteria ouverte",
   "Options": "Choix",
+  "Order": "Commande",
   "Orientation": "Orientation",
   "Palette": "Palette",
   "Paste": "Pâte",
@@ -634,10 +640,5 @@
   "vis_2_widgets_widgets_tabs_variant_full_width": "pleine largeur",
   "vis_2_widgets_widgets_tabs_vertical": "Vertical",
   "welcome_message": "Aucun projet n'existe encore.",
-  "word-spacing": "espacement des mots",
-  "Limit screen": "Écran de limite",
-  "Limit border width": "Largeur de la bordure",
-  "Limit border color": "Couleur de la bordure",
-  "Limit border style": "Style de bordure",
-  "Limit background color": "Couleur de l'arrière plan"
+  "word-spacing": "espacement des mots"
 }

src/src/i18n/it.json

@@ -233,6 +233,11 @@
   "Jump to widget by double click": "Vai al widget facendo doppio clic sul widget",
   "Just use without modification": "Basta usare senza modifiche",
   "Keep on old place": "Mantieni il vecchio posto",
+  "Limit background color": "Colore di sfondo",
+  "Limit border color": "Colore del bordo",
+  "Limit border style": "Stile del bordo",
+  "Limit border width": "Larghezza del bordo",
+  "Limit screen": "Schermata Limite",
   "Lined paper": "Carta a righe",
   "Lock": "Serratura",
   "Lock dragging": "Blocca trascinamento",
@@ -275,6 +280,7 @@
   "Open runtime in new window": "Apri runtime in una nuova finestra",
   "Open widgeteria": "Apri widgeteria",
   "Options": "Opzioni",
+  "Order": "Ordine",
   "Orientation": "Orientamento",
   "Palette": "Tavolozza",
   "Paste": "Incolla",
@@ -634,10 +640,5 @@
   "vis_2_widgets_widgets_tabs_variant_full_width": "intera larghezza",
   "vis_2_widgets_widgets_tabs_vertical": "Verticale",
   "welcome_message": "Non esiste ancora un progetto.",
-  "word-spacing": "spaziatura delle parole",
-  "Limit screen": "Schermata Limite",
-  "Limit border width": "Larghezza del bordo",
-  "Limit border color": "Colore del bordo",
-  "Limit border style": "Stile del bordo",
-  "Limit background color": "Colore di sfondo"
+  "word-spacing": "spaziatura delle parole"
 }

src/src/i18n/nl.json

@@ -233,6 +233,11 @@
   "Jump to widget by double click": "Spring naar widget door te dubbelklikken op widget",
   "Just use without modification": "Gewoon gebruiken zonder wijziging",
   "Keep on old place": "Blijf op de oude plek",
+  "Limit background color": "Achtergrond kleur",
+  "Limit border color": "Rand kleur",
+  "Limit border style": "Randstijl",
+  "Limit border width": "Grensbreedte",
+  "Limit screen": "Beperk scherm",
   "Lined paper": "Lijntjes papier",
   "Lock": "Op slot doen",
   "Lock dragging": "Vergrendelen slepen",
@@ -275,6 +280,7 @@
   "Open runtime in new window": "Open runtime in nieuw venster",
   "Open widgeteria": "Widgeteria openen",
   "Options": "Opties",
+  "Order": "Volgorde",
   "Orientation": "Oriëntatie",
   "Palette": "Palet",
   "Paste": "Plakken",
@@ -634,10 +640,5 @@
   "vis_2_widgets_widgets_tabs_variant_full_width": "volle breedte",
   "vis_2_widgets_widgets_tabs_vertical": "Verticaal",
   "welcome_message": "Er is nog geen enkel project.",
-  "word-spacing": "woordspatiëring",
-  "Limit screen": "Beperk scherm",
-  "Limit border width": "Grensbreedte",
-  "Limit border color": "Rand kleur",
-  "Limit border style": "Randstijl",
-  "Limit background color": "Achtergrond kleur"
+  "word-spacing": "woordspatiëring"
 }

src/src/i18n/pl.json

@@ -233,6 +233,11 @@
   "Jump to widget by double click": "Przejdź do widżetu, klikając dwukrotnie widżet",
   "Just use without modification": "Po prostu użyj bez modyfikacji",
   "Keep on old place": "Trzymaj się starego miejsca",
+  "Limit background color": "Kolor tła",
+  "Limit border color": "Kolor ramki",
+  "Limit border style": "Styl graniczny",
+  "Limit border width": "Szerokość granicy",
+  "Limit screen": "Ogranicz ekran",
   "Lined paper": "Papier w linie",
   "Lock": "Zamek",
   "Lock dragging": "Zablokuj przeciąganie",
@@ -275,6 +280,7 @@
   "Open runtime in new window": "Otwórz środowisko uruchomieniowe w nowym oknie",
   "Open widgeteria": "Otwórz widgeterię",
   "Options": "Opcje",
+  "Order": "Zamówienie",
   "Orientation": "Orientacja",
   "Palette": "Paleta",
   "Paste": "Pasta",
@@ -634,10 +640,5 @@
   "vis_2_widgets_widgets_tabs_variant_full_width": "pełna szerokość",
   "vis_2_widgets_widgets_tabs_vertical": "Pionowy",
   "welcome_message": "Żaden projekt jeszcze nie istnieje.",
-  "word-spacing": "odstępy między wyrazami",
-  "Limit screen": "Ogranicz ekran",
-  "Limit border width": "Szerokość granicy",
-  "Limit border color": "Kolor ramki",
-  "Limit border style": "Styl graniczny",
-  "Limit background color": "Kolor tła"
+  "word-spacing": "odstępy między wyrazami"
 }

src/src/i18n/pt.json

@@ -233,6 +233,11 @@
   "Jump to widget by double click": "Vá para o widget clicando duas vezes no widget",
   "Just use without modification": "Basta usar sem modificação",
   "Keep on old place": "Manter no lugar antigo",
+  "Limit background color": "Cor de fundo",
+  "Limit border color": "Cor da borda",
+  "Limit border style": "Estilo de borda",
+  "Limit border width": "Largura da borda",
+  "Limit screen": "Tela limite",
   "Lined paper": "Papel pautado",
   "Lock": "Trancar",
   "Lock dragging": "Bloquear arrastando",
@@ -275,6 +280,7 @@
   "Open runtime in new window": "Abra o tempo de execução em uma nova janela",
   "Open widgeteria": "Widgeteria aberta",
   "Options": "Opções",
+  "Order": "Ordem",
   "Orientation": "Orientação",
   "Palette": "Paleta",
   "Paste": "Colar",
@@ -634,10 +640,5 @@
   "vis_2_widgets_widgets_tabs_variant_full_width": "largura completa",
   "vis_2_widgets_widgets_tabs_vertical": "Vertical",
   "welcome_message": "Nenhum projeto ainda existe.",
-  "word-spacing": "espaçamento entre palavras",
-  "Limit screen": "Tela limite",
-  "Limit border width": "Largura da borda",
-  "Limit border color": "Cor da borda",
-  "Limit border style": "Estilo de borda",
-  "Limit background color": "Cor de fundo"
+  "word-spacing": "espaçamento entre palavras"
 }

src/src/i18n/ru.json

@@ -233,6 +233,11 @@
   "Jump to widget by double click": "Перейти к виджету двойным щелчком по виджету",
   "Just use without modification": "Просто используйте без изменений",
   "Keep on old place": "Держись на старом месте",
+  "Limit background color": "Фоновый цвет",
+  "Limit border color": "Цвет границы",
+  "Limit border style": "Стиль границы",
+  "Limit border width": "Ширина рамки",
+  "Limit screen": "Ограничить экран",
   "Lined paper": "Линованной бумаги",
   "Lock": "Замок",
   "Lock dragging": "Блокировка перетаскивания",
@@ -275,6 +280,7 @@
   "Open runtime in new window": "Открыть среду выполнения в новом окне",
   "Open widgeteria": "Открыть виджетерию",
   "Options": "Опции",
+  "Order": "Заказ",
   "Orientation": "Ориентация",
   "Palette": "Палитра",
   "Paste": "Вставить",
@@ -634,10 +640,5 @@
   "vis_2_widgets_widgets_tabs_variant_full_width": "полная ширина",
   "vis_2_widgets_widgets_tabs_vertical": "Вертикальный",
   "welcome_message": "Ни одного проекта пока не существует.",
-  "word-spacing": "межсловный интервал",
-  "Limit screen": "Ограничить экран",
-  "Limit border width": "Ширина рамки",
-  "Limit border color": "Цвет границы",
-  "Limit border style": "Стиль границы",
-  "Limit background color": "Фоновый цвет"
+  "word-spacing": "межсловный интервал"
 }

src/src/i18n/uk.json

@@ -233,6 +233,11 @@
   "Jump to widget by double click": "Перейдіть до віджета, двічі клацнувши на віджеті",
   "Just use without modification": "Просто використовуйте без змін",
   "Keep on old place": "Залишити на старому місці",
+  "Limit background color": "Колір фону",
+  "Limit border color": "Колір рамки",
+  "Limit border style": "Стиль кордону",
+  "Limit border width": "Ширина кордону",
+  "Limit screen": "Обмежити екран",
   "Lined paper": "Лінійований папір",
   "Lock": "Замок",
   "Lock dragging": "Перетягування замка",
@@ -275,6 +280,7 @@
   "Open runtime in new window": "Відкрити середовище виконання в новому вікні",
   "Open widgeteria": "Відкрити widgeteria",
   "Options": "Опції",
+  "Order": "порядок",
   "Orientation": "Орієнтація",
   "Palette": "Палітра",
   "Paste": "Вставити",
@@ -634,10 +640,5 @@
   "vis_2_widgets_widgets_tabs_variant_full_width": "повна ширина",
   "vis_2_widgets_widgets_tabs_vertical": "Вертикальний",
   "welcome_message": "Жодного проекту ще немає.",
-  "word-spacing": "міжсловний інтервал",
-  "Limit screen": "Обмежити екран",
-  "Limit border width": "Ширина кордону",
-  "Limit border color": "Колір рамки",
-  "Limit border style": "Стиль кордону",
-  "Limit background color": "Колір фону"
+  "word-spacing": "міжсловний інтервал"
 }