* reworked settings sections, split symbol-picking/editing/rendering,…

… made sections collapsed by default, and added functionality to open/close them * implemented a new option in settings for the FontAwesome picker * added settings comments for clarity * updated all translations in regard with the new settings sections and the FA picker
imfx77 · Jun 6, 2024 · 0c33fee · 0c33fee
1 parent e7d7212
commit 0c33fee
Show file tree

Hide file tree

Showing 14 changed files with 366 additions and 96 deletions.
diff --git a/Assets/settings.js b/Assets/settings.js
@@ -0,0 +1,6 @@
+$(".fieldset-WysiwygMDEditor legend").click(function() {
+    $(this).parent().find(".fieldset-WysiwygMDEditor-container").toggleClass('fieldset-accordion-show');
+    $(this).parent().find(".fieldset-WysiwygMDEditor-container").toggleClass('fieldset-accordion-hide');
+    $(this).find("i").toggleClass('fa fa-chevron-down');
+    $(this).find("i").toggleClass('fa fa-chevron-up');
+});
diff --git a/Controller/WysiwygMDEditorConfigController.php b/Controller/WysiwygMDEditorConfigController.php
@@ -33,6 +33,9 @@ public function save()
         if (!isset($values['WysiwygMDEditor_enable_emojipicker'])) {
             $values['WysiwygMDEditor_enable_emojipicker'] = 0;
         }
+        if (!isset($values['WysiwygMDEditor_enable_faiconspicker'])) {
+            $values['WysiwygMDEditor_enable_faiconspicker'] = 0;
+        }
         if (!isset($values['WysiwygMDEditor_enable_easymde'])) {
             $values['WysiwygMDEditor_enable_easymde'] = 0;
         }

diff --git a/Locale/bg_BG/translations.php b/Locale/bg_BG/translations.php
@@ -16,6 +16,31 @@
     'WysiwygMDEditor_LINK_SETTINGS_PREVIEW' => 'Преглед със запазените настройки',
     'WysiwygMDEditor_LINK_SETTINGS_CHANGE' => 'Промяна на настройките',
     'WysiwygMDEditor_CONTAINER_PREVIEW' => 'Визуализация на контейнер',
+    //
+    // Template/config/settings/common
+    //
+    'WysiwygMDEditor_SETTINGS_ENABLE_BUTTON' => 'Активиране на бутон за',
+    'WysiwygMDEditor_SETTINGS_DETAILS_SUMMARY' => 'Вижте подробности ...',
+    'WysiwygMDEditor_SETTINGS_DESCR' => 'Този плъгин интегрира инструменти за избор на символи и външни MD редактори като допълнителни бутони в лентата с инструменти за редактиране.',
+    //
+    // Template/config/settings/symbol-pickers
+    //
+    'WysiwygMDEditor_SETTINGS_SYMBOLPICKER_OPTIONS' => 'Настройка на опциите за избор на символи',
+    'WysiwygMDEditor_SETTINGS_SYMBOLPICKER_DESCR' => 'Изберете кои инструменти за избор на символи да използвате.
+* Активирането на инструмент за избор на символи ще инжектира съответен бутон в лентата с инструменти за редактиране на всяко markdown поле.
+* Инструментите за избор се отварят взаимно изключващо се, в прозрачен режим на наслагване на цял екран (или модален), така че да има само един активен в даден момент.
+* Всички диалози за избор могат да се преместват, което е удобно за да виждате съдържанието отдолу.',
+    'WysiwygMDEditor_SETTINGS_EMOJIPICKER_DESCR' => 'Напълно офлайн инструмент за избор на емотикони на JavaScript.
+* ⚠ Емотиконите **НЕ** са базирани на изображения, а са уникод символи, така че представянето им вид зависи от браузъра и платформата !
+* Има категории и търсене.
+* Покрива текстовото поле за редактиране и може да се плъзга наоколо.
+* Щракването върху иконите на емотикони вмъква и заменя текущия избор на текст.',
+    'WysiwygMDEditor_SETTINGS_FAICONSPICKER_DESCR' => 'Напълно офлайн инструмент за избор на икони от `Font Awesome`, имплементиран с **jQuery**.
+* ⚠ Инструментът за избор е съвместим **САМО** с `Font Awesome 4.7.0`, това е версията, която се използва от последната версия на Kanboard !
+* ⚠ Вмъкнатите икони всъщност са `<i>` тагове, така че, за да се показват правилно, избраният от вас MD рендър трябва да позволява суров HTML !
+* Има търсене.
+* Покрива текстовото поле за редактиране и може да се плъзга наоколо.
+* Щракването върху иконите на Font Awesome вмъква и заменя текущия избор на текст.',
     //
     // Template/config/settings/editing
     //
@@ -24,12 +49,6 @@
 * Активирането на редактор ще вмъкне съответен бутон в лентата с инструменти за редактиране на всяко markdown поле.
 * Всички редактори се отварят независимо един от друг в режим на покриване на целия екран, така че да не се смесват с потребителския интерфейс на Kanboard.
 * Действителният език на потребителския интерфейс на редакторите е фиксиран (или **английски**, или **китайски**) и **`няма налични преводи`** за тях.',
-    'WysiwygMDEditor_SETTINGS_EDITING_ENABLE_BUTTON' => 'Активиране на бутон за',
-    'WysiwygMDEditor_SETTINGS_EDITING_DETAILS_SUMMARY' => 'Вижте подробности ...',
-    'WysiwygMDEditor_SETTINGS_EMOJIPICKER_DESCR' => 'Напълно офлайн инструмент за избор на емотикони на JavaScript.
-* Има категории и търсене.
-* Стои над текстовото поле за редактиране и може да се мести наоколо.
-* Щракването върху иконите на емотикони вмъква и заменя текущо избрания текст.',
     'WysiwygMDEditor_SETTINGS_EASYMDE_DESCR' => 'Напълно офлайн markdown редактор на JavaScript.
 * Конфигуриран да покрива пълния **MD** синтаксис и функции за преглед, съвместими с **GFM**.
 * Поддържа страничен преглед и има персонализирана лента за редактиране с множество инструменти.
@@ -46,7 +65,7 @@
      'WysiwygMDEditor_SETTINGS_STACKEDIT_DESCR' => 'Онлайн услуга, базирана на markdown редактор и инструмент за водене на бележки.
 * Покрива широка гама от варианти на **MD** синтаксис, но е конфигуриран да отговаря на **GFM**.
 * Поддържа страничен преглед и множество инструменти.
-* ⚠️Само основна светла тема !
+* ⚠ Само основна светла тема !
 * Поддържа оцветяване на синтаксиса на кода за множество езици.
 * Напълно поддържа синтаксис на емотикони, а също и въвеждане чрез шорткъти на OS (напр. « **Windows + .** » за Windows или « **Control + Command + Space** » за Mac).
 * Има допълнителни функции като **KaTeX** математически изрази, **Mermaid** UML диаграми и други разширения, които се
@@ -62,8 +81,9 @@
     'WysiwygMDEditor_SETTINGS_RENDERING_DESCR' => 'Изберете дали да използвате персонализирано изобразяване за markdown полетата.
 * Функцията за изобразяване е изпълнена изцяло от страна на клиента, тя използва JavaScript и специфичната визуализация на съответния редактор.
 * Всички markdown полета на страницата ще бъдат обработени, включително тези, които са динамично създадени или променени. Зареждането на страницата може да е малко бавно, ако има много такива полета.
-* <span style="border-bottom: 2px solid red; padding: 2px">Ако имате инсталиран плъгин **`MarkdownPlus`**, активирането на тази функция за изобразяване ще **`КОНФЛИКТИРА или ОТМЕНИ`** неговата функционалност,
-в зависимост от реда, в който се зареждат плъгините!</span><br>⚠️ И така, **преценете** кой от двата предпочитате да използвате !',
+* <span style="border-bottom: 2px solid red; padding: 2px">⚠ Ако имате инсталиран плъгин **`MarkdownPlus`**, активирането на тази функция за изобразяване ще **`КОНФЛИКТИРА или ОТМЕНИ`** неговата функционалност,
+в зависимост от реда, в който се зареждат плъгините!</span>  
+⚠️ И така, **преценете** кой от двата предпочитате да използвате !',
     'WysiwygMDEditor_SETTINGS_RENDERING_ENABLE_EASYMDE' => 'Активиране на markdown изобразяване с EasyMDE',
     'WysiwygMDEditor_SETTINGS_RENDERING_EASYMDE_DESCR' => 'Изобразените markdown полета ще изглеждат както в панела за преглед на редактора EasyMDE.
 * Темата за изобразяване се конфигурира независимо от избраната тема за редактора EasyMDE.

diff --git a/Locale/de_DE/translations.php b/Locale/de_DE/translations.php
@@ -16,6 +16,31 @@
     'WysiwygMDEditor_LINK_SETTINGS_PREVIEW' => 'Vorschau mit gespeicherten Einstellungen',
     'WysiwygMDEditor_LINK_SETTINGS_CHANGE' => 'Einstellungen ändern',
     'WysiwygMDEditor_CONTAINER_PREVIEW' => 'Vorschaucontainer',
+    //
+    // Template/config/settings/common
+    //
+    'WysiwygMDEditor_SETTINGS_ENABLE_BUTTON' => 'Eine Schaltfläche aktivieren für',
+    'WysiwygMDEditor_SETTINGS_DETAILS_SUMMARY' => 'Details anzeigen ...',
+    'WysiwygMDEditor_SETTINGS_DESCR' => 'Dieses Plugin integriert Symbolwähler und externe MD-Editoren als zusätzliche Schaltflächen in die Symbolleiste der Bearbeitungsansicht.',
+    //
+    // Template/config/settings/symbol-pickers
+    //
+    'WysiwygMDEditor_SETTINGS_SYMBOLPICKER_OPTIONS' => 'Symbolwähler-Optionen einrichten',
+    'WysiwygMDEditor_SETTINGS_SYMBOLPICKER_DESCR' => 'Wählen Sie aus, welche Symbolwähler verwendet werden sollen.
+* Durch Aktivieren eines Symbolwählers wird eine entsprechende Schaltfläche in die Bearbeitungssymbolleiste jedes Markdown-Textbereichs eingefügt.
+* Die Wähler öffnen sich gegenseitig ausschließend im transparenten Vollbild- (oder modalen) Overlay-Modus, sodass immer nur einer aktiv ist.
+* Alle Picker sind verschiebbar, man kann sie also bequem verschieben, um den Inhalt darunter zu sehen.',
+    'WysiwygMDEditor_SETTINGS_EMOJIPICKER_DESCR' => 'Ein vollständig offline verfügbarer Vanilla JavaScript Emoji-Picker.
+* ⚠ Die Emoticons sind **NICHT** bildbasiert, sondern Unicode-Symbole, ihr Aussehen ist also browser- und plattformabhängig!
+* Hat Kategorien und eine Suche.
+* Überlagert den Bearbeitungstextbereich und kann verschoben werden.
+* Durch Klicken auf die Emoji-Symbole wird die aktuelle Textauswahl eingefügt und ersetzt.',
+    'WysiwygMDEditor_SETTINGS_FAICONSPICKER_DESCR' => 'Ein vollständig offline verfügbarer Picker für `Font Awesome`-Symbole, implementiert mit **jQuery**.
+* ⚠ Der Picker ist **NUR** mit `Font Awesome 4.7.0` kompatibel, dies ist die Version, die von der neuesten Kanboard-Version verwendet wird !
+* ⚠ Die eingefügten Symbole sind eigentlich `<i>`-Tags. Damit sie also richtig angezeigt werden, muss Ihr gewählter MD-Renderer reines HTML zulassen !
+* Hat eine Suche.
+* Überlagert den Bearbeitungstextbereich und kann verschoben werden.
+* Durch Klicken auf die Font Awesome-Symbole wird die aktuelle Textauswahl eingefügt und ersetzt.',
     //
     // Template/config/settings/editing
     //
@@ -24,12 +49,6 @@
 * Durch die Aktivierung eines Editors wird eine entsprechende Schaltfläche in die Bearbeitungssymbolleiste jedes Markdown-Textbereichs eingefügt.
 * Alle Editoren werden unabhängig voneinander im Vollbild-Overlay-Modus geöffnet, damit sie nicht mit der Kanboard-Benutzeroberfläche in Konflikt geraten.
 * Die tatsächliche Benutzeroberflächensprache der Editoren ist festgelegt (entweder **Englisch** oder **Chinesisch**) und es sind **`keine Übersetzungen`** für sie verfügbar.',
-    'WysiwygMDEditor_SETTINGS_EDITING_ENABLE_BUTTON' => 'Eine Schaltfläche aktivieren für',
-    'WysiwygMDEditor_SETTINGS_EDITING_DETAILS_SUMMARY' => 'Details anzeigen ...',
-    'WysiwygMDEditor_SETTINGS_EMOJIPICKER_DESCR' => 'Ein vollständig offline verfügbarer Vanilla JavaScript-Emoji-Picker.
-* Verfügt über Kategorien und eine Suche.
-* Überlagert den Bearbeitungstextbereich und kann verschoben werden.
-* Durch Klicken auf Emoji-Symbole wird die aktuelle Textauswahl eingefügt und ersetzt.',
     'WysiwygMDEditor_SETTINGS_EASYMDE_DESCR' => 'Ein vollständig offline einsetzbarer JavaScript-Markdown-Editor.
 * Konfiguriert, um alle **MD**-Syntax- und Vorschaufunktionen abzudecken. **GFM**-kompatibel.
 * Unterstützt Seitenvorschau und verfügt über eine benutzerdefinierte Bearbeitungsleiste mit mehreren Werkzeugen.
@@ -46,7 +65,7 @@
     'WysiwygMDEditor_SETTINGS_STACKEDIT_DESCR' => 'Ein auf einem Onlinedienst basierender Markdown-Editor und Notizentool.
 * Deckt ein breites Spektrum an **MD**-Syntaxvarianten ab, ist jedoch für die Einhaltung von **GFM** konfiguriert.
 * Unterstützt Seitenvorschau und mehrere Tools.
-* ⚠️Nur einfaches helles Design !
+* ⚠ Nur einfaches helles Design !
 * Unterstützt die Code-Syntax-Hervorhebung für eine Vielzahl von Sprachen.
 * Unterstützt die Emoji-Syntax vollständig und auch die Eingabe über Betriebssystem-Verknüpfungen (z. B. « **Windows + .** » auf dem Windows oder « **Strg + Befehl + Leertaste** » auf dem Mac).
 * Es gibt zusätzliche Funktionen wie **KaTeX**-Matheausdrücke, **Mermaid**-UML-Diagramme und andere Erweiterungen
@@ -62,8 +81,9 @@
     'WysiwygMDEditor_SETTINGS_RENDERING_DESCR' => 'Wählen Sie, ob benutzerdefiniertes Rendering für Markdown-Felder verwendet werden soll.
 * Die Rendering-Funktion ist vollständig clientseitig implementiert, verwendet JavaScript und nutzt eine spezielle Editor-Visualisierung.
 * Alle Markdown-Felder auf der Seite werden verarbeitet, einschließlich derjenigen, die dynamisch erstellt oder geändert werden. Das Laden der Seite kann etwas langsam sein, wenn es viele davon gibt.
-* <span style="border-bottom: 2px solid red; padding: 2px">Wenn Sie das **`MarkdownPlus`**-Plugin installiert haben, führt die Aktivierung dieser Rendering-Funktion zu einem **`KONFLIKT oder ÜBERSCHREIBEN`** Funktionalität,
-abhängig von der Reihenfolge, in der die Plugins geladen werden!</span><br>⚠️ Also **entscheide**, welches du am liebsten verwendest !',
+* <span style="border-bottom: 2px solid red; padding: 2px">⚠ Wenn Sie das **`MarkdownPlus`**-Plugin installiert haben, führt die Aktivierung dieser Rendering-Funktion zu einem **`KONFLIKT oder ÜBERSCHREIBEN`** Funktionalität,
+abhängig von der Reihenfolge, in der die Plugins geladen werden!</span>  
+⚠️ Also **entscheide**, welches du am liebsten verwendest !',
     'WysiwygMDEditor_SETTINGS_RENDERING_ENABLE_EASYMDE' => 'Markdown-Rendering mit EasyMDE aktivieren',
     'WysiwygMDEditor_SETTINGS_RENDERING_EASYMDE_DESCR' => 'gerenderte Markdown-Felder sehen aus wie das Vorschaufenster des EasyMDE-Editors.
 * Das Renderthema wird unabhängig vom ausgewählten Thema für den EasyMDE-Editor konfiguriert.