add language drop-down selector

js/kiri-init.js

@@ -1464,6 +1464,23 @@ var gs_kiri_init = exports;
             UI.modeExport.innerHTML     = "E<u>x</u>port";
         }
 
+        // populate language drop-down
+        let lp = $('langpop');
+        let elp = DOC.createElement("div");
+        let dlp = DOC.createElement("div");
+        elp.appendChild(DOC.createTextNode('english'));
+        dlp.appendChild(DOC.createTextNode('danish'));
+        lp.appendChild(elp);
+        lp.appendChild(dlp);
+        elp.onclick = function() {
+            SDB.setItem('kiri-lang', 'en-us');
+            LOC.reload();
+        };
+        dlp.onclick = function() {
+            SDB.setItem('kiri-lang', 'da-dk');
+            LOC.reload();
+        };
+
         SPACE.addEventHandlers(self, [
             'keyup', keyUpHandler,
             'keydown', keyDownHandler,

web/kiri/index.html

@@ -21,8 +21,9 @@
 <body>
     <!-- app title home page links -->
     <div id="appid">
+        <span id="applang" title="language">A<div id="langpop"></div></span>
         <span><a href="#" id="appname">Kiri:Moto</a> by <a href="/" target="home">Grid.Space</a></span>
-        <span id="apphelp">?</span>
+        <span id="apphelp" title="help">?</span>
     </div>
     <!-- left control menu -->
     <div id="control-left" class="control"><div id="assets"></div></div>

web/moto/style.css

@@ -232,6 +232,9 @@ th, tr, td, span, div, label, button {
     background-color: rgba(170,221,255,0.75);
     color: rgba(0,0,0,0.5);
 }
+#appid span:hover {
+    background-color: rgba(170,221,255,0.5);
+}
 #appid a {
     color: rgba(0,0,0,0.75);
     font-weight: bold;
@@ -239,12 +242,35 @@ th, tr, td, span, div, label, button {
 #appid a:hover {
     color: rgba(0,50,50,0.75);
 }
-#applang:hover .drop {
-    display: block;
-}
 #apphelp {
     margin-left: 5px;
 }
+#applang {
+    position: relative;
+    margin-right: 5px;
+    font-weight: bold;
+}
+#langpop {
+    display: none;
+    position: absolute;
+    white-space: nowrap;
+    top: 105%;
+    left: 0;
+    border-radius: 5px;
+    border: 1px solid #ddd;
+    background-color: rgba(255,255,255,0.75);
+    padding: 5px;
+}
+#langpop > div {
+    padding: 5px;
+}
+#langpop > div:hover {
+    background-color: rgba(255,128,128,0.5);
+    border-radius: 5px;
+}
+#applang:hover #langpop {
+    display: block;
+}
 #container {
     width: 100%;
     height: 100%;