From c35771e59dd160e0752f06836393ebe698474a45 Mon Sep 17 00:00:00 2001
From: daria <dariae9@yahoo.com>
Date: Fri, 1 Mar 2024 15:54:08 +0200
Subject: [PATCH] `Theme` items(Slide) are accessible using the keyboard WIP
 #1284

---
 www/slide/inner.js | 64 ++++++++++++++++++++++++++++++++++------------
 1 file changed, 47 insertions(+), 17 deletions(-)

diff --git a/www/slide/inner.js b/www/slide/inner.js
index bed3fb61f..ebd188af2 100644
--- a/www/slide/inner.js
+++ b/www/slide/inner.js
@@ -65,6 +65,7 @@ define([
     CMeditor,
     UIElements)
 {
+    var Common;
     window.CodeMirror = CMeditor;
 
     var SLIDE_BACKCOLOR_ID = "cp-app-slide-toolbar-backcolor";
@@ -108,19 +109,15 @@ define([
     };
 
     var mkThemeButton = function (framework) {
-        var $theme = $(h('button.cp-toolbar-appmenu', [
-            h('i.cptools.cptools-palette'),
-            h('span.cp-button-name', Messages.toolbar_theme)
-        ]));
-        var $content = $(h('div.cp-toolbar-drawer-content', {
-            tabindex: 1
-        })).hide();
-
-        // set up all the necessary events
-        UI.createDrawer($theme, $content);
-
-        framework._.toolbar.$theme = $content;
-        framework._.toolbar.$bottomL.append($theme);
+        const $drawer = UIElements.createDropdown({
+            text: Messages.toolbar_theme,
+            options: [],
+            common: Common,
+            buttonCls: 'cptools cptools-palette'
+        });
+        framework._.toolbar.$theme = $drawer.find('ul.cp-dropdown-content');
+        framework._.toolbar.$bottomL.append($drawer);
+        $drawer.find('span').addClass('cp-button-name');
     };
 
     var mkPrintButton = function (framework, editor, $content, $print) {
@@ -334,10 +331,20 @@ define([
             text: Messages.slideOptionsText,
             name: 'options'
         });
-        $optionsButton.click(function () {
-            $('body').append(createPrintDialog());
+        var $options = UIElements.createDropdownEntry({
+            tag: 'a',
+            attributes: { 'class': $optionsButton.attr('class') },
+            content: [
+                h('i', { 'class': $optionsButton.children('i').attr('class') }),
+                h('span', $optionsButton.text())
+            ],
+            action: function () {
+                $options.click(function () {
+                    $('body').append(createPrintDialog());
+                });
+            }
         });
-        framework._.toolbar.$theme.append($optionsButton);
+        framework._.toolbar.$theme.append($options);
 
         metadataMgr.onChange(function () {
             var md = metadataMgr.getMetadata();
@@ -392,6 +399,17 @@ define([
             $backgroundPicker.val(backColor);
             $backgroundPicker.click();
         });
+        var $backButton = UIElements.createDropdownEntry({
+            tag: 'a',
+            attributes: { 'class': $back.attr('class'), 'id': SLIDE_BACKCOLOR_ID },
+            content: [
+                h('i', { 'class': $back.children('i').attr('class')}),
+                h('span', $back.text())
+            ],
+            action: function () {
+                $back.click();
+            }
+        });
 
         var $foregroundPicker = $('<input>', { type: 'color', value: textColor })
             .css({ display: 'none', })
@@ -407,13 +425,25 @@ define([
             $foregroundPicker.val(textColor);
             $foregroundPicker.click();
         });
+
+        var $textButton = UIElements.createDropdownEntry({
+            tag: 'a',
+            attributes: { 'class': $text.attr('class'),'id': SLIDE_COLOR_ID },
+            content: [
+                h('i', { 'class': $text.children('i').attr('class') }),
+                h('span', $text.text())
+            ],
+            action: function () {
+                $text.click();
+            }
+        });
         var $testColor = $('<input>', { type: 'color', value: '!' });
         if ($testColor.attr('type') !== "color" || $testColor.val() === '!') { return; }
 
         $check.append($backgroundPicker);
         $check.append($foregroundPicker);
 
-        framework._.toolbar.$theme.append($text).append($back);
+        framework._.toolbar.$theme.append($textButton).append($backButton);
 
         metadataMgr.onChange(function () {
             var md = metadataMgr.getMetadata();