lightbox beta

css/marka.css

@@ -28,13 +28,13 @@
     font-size:80%;
     text-align:center;
     font-style:italic;
-    color:#999;
-    text-shadow:0px 0px 1px #999;
+    color:#8C9566;
+    text-shadow:0px 0px 1px #34AE30;
     white-space:nowrap;
 }
 
 .marka-dropdown::after {
-    border-bottom:1px dotted #aaa;
+    border-bottom:1px dotted #34AE30;
 }
 
 .marka-dropdown:hover::after {
@@ -63,7 +63,7 @@
     color:black !important;
     position:relative;
     cursor: pointer;
-    border-bottom:1px dotted black;
+    border-bottom:1px dotted #34AE30;
 }
 
 .marka > .marka-dropdown {
@@ -90,21 +90,41 @@
     left:0px;
     bottom:0px;
     right:0px;
-    background:rgba(0, 0, 0, 0.2);
+    background:rgba(0, 0, 0, 0.8);
     display:flex;
     align-items:center;
-    justify-items:center;
+    justify-content:center;
+    display:none;
+    z-index:2000;
 }
 
 #marka-currency-lightbox > div {
-    padding:1em;
+    min-width:10em;
+    max-width:50%;
+}
+
+#marka-currency-lightbox > div > div {
+    padding:1.5em 2em;
     background:white;
     border-radius:0.2em;
     box-shadow:2px 2px 5px black;
+    color:black;
+}
+
+#marka-currency-lightbox > div > h2 {
+    color:white;
+    text-shadow:2px 2px 4px black, -1px -1px 0px black;
+    text-align:center;
 }
 
 #marka-currency-lightbox #marka-currency-select {
     padding:0.2em;
     font-size:120%;
     color:black;
+    background:#aaa;
+    width:100%;
+    display:block;
+    border-radius:0.2em;
+    border:none;
+    box-shadow:inset 1px 1px 2px black;
 }
\ No newline at end of file

js/marka.js

@@ -27,13 +27,21 @@ function Marka(target) {
     }
     
     // lightbox
-    /*
-    */
-    var lightbox = '<div id="marka-currency-lightbox"><div><select id="marka-currency-select">'
-    for (cur in currencies_supported()) {
-        lightbox += '<option value="' +  + '">' +  + '</option>'
+    var lightbox = '<div id="marka-currency-lightbox"><div><h2>Select a currency:</h2><div><select id="marka-currency-select">'
+    var currencies = this.currencies_supported()
+    lightbox += '<option value="">Show original currency</option>'
+    for (var cur in currencies) {
+        lightbox += '<option value="' + currencies[cur].code + '">' + currencies[cur].name_plural + '</option>'
     }
-    lightbox += '</select></div></div>'
+    lightbox += '</select></div></div></div>'
+    $(this.target).append($(lightbox))
+    var self = this
+    $('#marka-currency-select').change(
+        function() {
+            self.setCurrency($(this).val());
+            self.doConversions();
+            $('#marka-currency-lightbox').css('display', 'none')
+        })
 
     this.match();
     this.doConversions();
@@ -184,7 +192,7 @@ Marka.prototype.findSymbol = function(text) {
 }
 
 Marka.prototype.wrapNode = function() {
-    var markaDropdownHTML = $('<span class="marka"><span class="marka-dropdown"></span></span>');
+    var markaDropdownHTML = $('<span class="marka"><span class="marka-dropdown" onclick="$(\'#marka-currency-lightbox\').css(\'display\', \'flex\')"></span></span>');
     return markaDropdownHTML.get(0);
 }