From 5860bfbc5f20cc7c29935cc95f1ad9cfcf8f698a Mon Sep 17 00:00:00 2001
From: Radek Czajka <rczajka@rczajka.pl>
Date: Thu, 22 Apr 2021 12:27:41 +0200
Subject: [PATCH 1/1] Add keyboard view.
---
src/redakcja/static/js/wiki/toolbar.js | 5 ++
src/toolbar/templates/toolbar/keyboard.html | 88 +++++++++++++++++++++
src/toolbar/templates/toolbar/toolbar.html | 2 +
src/toolbar/templatetags/toolbar_tags.py | 22 ++++++
4 files changed, 117 insertions(+)
create mode 100644 src/toolbar/templates/toolbar/keyboard.html
diff --git a/src/redakcja/static/js/wiki/toolbar.js b/src/redakcja/static/js/wiki/toolbar.js
index 9f4272ee..8e4c0f05 100644
--- a/src/redakcja/static/js/wiki/toolbar.js
+++ b/src/redakcja/static/js/wiki/toolbar.js
@@ -57,4 +57,9 @@
};
+
+ $("#keyboard-close").click(function() {
+ $(this).parent().toggle();
+ })
+
})(jQuery);
diff --git a/src/toolbar/templates/toolbar/keyboard.html b/src/toolbar/templates/toolbar/keyboard.html
new file mode 100644
index 00000000..3fd2748f
--- /dev/null
+++ b/src/toolbar/templates/toolbar/keyboard.html
@@ -0,0 +1,88 @@
+<style>
+#keyboard {
+ display: none;
+ position: absolute;
+ left: 5vw;
+ right: 5vw;
+ top: calc((100vh - 31vw) / 2);
+ z-index: 1000;
+ background: #ddd;
+ padding: 3vw 2.25vw 2.5vw 2.75vw;
+
+}
+#keyboard .keyboard-row {
+ display: flex;
+ direction: row;
+ margin-bottom: .5vw;
+}
+#keyboard .keyboard-row:nth-child(2) {
+ margin-left: 3vw;
+}
+#keyboard .keyboard-row:nth-child(3) {
+ margin-left: 6vw;
+}
+#keyboard .keyboard-row div {
+ width: 8vw;
+ height: 8vw;
+ margin-right: .5vw;
+ background: white;
+ border: 1px solid black;
+ border-radius: 10px;
+ font-size: 3vw;
+ padding-left: 1vw;
+ padding-top: 1.5vw;
+ position: relative;
+}
+#keyboard .keyboard-row .lower, #keyboard .keyboard-row .upper {
+ position: absolute;
+ font-size: 1vw;
+ bottom: 1vw;
+ right: 1vw;
+ left: 1vw;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ text-align: right;
+}
+#keyboard .keyboard-row .upper {
+ bottom: auto;
+ top: 1vw;
+}
+ #keyboard-close {
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 3vw;
+ height: 3vw;
+ font-size: 2.5vw;
+ line-height: 3vw;
+ text-align: center;
+ cursor: pointer;
+ border: none;
+ background: none;
+ }
+
+
+</style>
+
+
+<div id="keyboard">
+ {% for row in rows %}
+ <div class="keyboard-row">
+ {% for key in row %}
+ <div>
+ {% if key.upper %}
+ <span class="upper" title="{{ key.upper.full_tooltip }}">{{ key.upper.label|safe }}</span>
+ {% endif %}
+ {% if key.lower %}
+ <span class="lower" title="{{ key.lower.full_tooltip }}">{{ key.lower.label|safe }}</span>
+ {% endif %}
+ {{ key.symbol }}
+ </div>
+ {% endfor %}
+ </div>
+ {% endfor %}
+ <button id="keyboard-close" data-ui-accesskey="?">ðª</button>
+
+</div>
+
diff --git a/src/toolbar/templates/toolbar/toolbar.html b/src/toolbar/templates/toolbar/toolbar.html
index e5fe1977..6c8beff6 100644
--- a/src/toolbar/templates/toolbar/toolbar.html
+++ b/src/toolbar/templates/toolbar/toolbar.html
@@ -19,3 +19,5 @@
</span>
</div>
</div>
+
+{% keyboard toolbar_groups %}
diff --git a/src/toolbar/templatetags/toolbar_tags.py b/src/toolbar/templatetags/toolbar_tags.py
index 3fa5e1b0..6a2dddb5 100644
--- a/src/toolbar/templatetags/toolbar_tags.py
+++ b/src/toolbar/templatetags/toolbar_tags.py
@@ -15,3 +15,25 @@ def toolbar():
@register.inclusion_tag('toolbar/button.html')
def toolbar_button(b):
return {'button': b}
+
+
+@register.inclusion_tag('toolbar/keyboard.html')
+def keyboard(groups):
+ keys = {}
+ for g in groups:
+ for b in g.button_set.all():
+ if b.accesskey:
+ keys[b.accesskey] = b
+ rows = [
+ [
+ {
+ 'symbol': symbol,
+ 'lower': keys.get(symbol.lower()),
+ 'upper': keys.get(symbol),
+ }
+ for symbol in row
+ ]
+ for row in ['QWERTYUIOP', 'ASDFGHJKL', 'ZXCVBNM']
+ ]
+
+ return {'rows': rows}
--
2.20.1