From: Radek Czajka <rczajka@rczajka.pl>
Date: Thu, 22 Apr 2021 10:27:41 +0000 (+0200)
Subject: Add keyboard view.
X-Git-Url: https://git.mdrn.pl/redakcja.git/commitdiff_plain/5860bfbc5f20cc7c29935cc95f1ad9cfcf8f698a

Add keyboard view.
---

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}