mobilize everything. Now works for touch and mouse hovers. Views are modified...

mobilize everything. Now works for touch and mouse hovers. Views are modified depending on screen size. Added mobile test page.

css/marka.css

@@ -3,20 +3,23 @@
     display:none;
 }
 .marka > .marka-dropdown {
-    visibility:hidden;
-    opacity:0;
-
+    top:0px;
+    left:0px;
 }
 .marka > .marka-dropdown > .marka-result {
     display:block;
 }
 
-.marka:hover > .marka-dropdown {
+.marka > .mark-dropdown.visible {
     visibility:visible;
     opacity:1;
     transition:opacity 0.2s ease-out, visibility 0s linear 0s;
-    top:0px;
-    left:0px;
+}
+
+.marka > .marka-dropdown.hidden {
+    visibility:hidden;
+    opacity:0;
+    transition:opacity 0.2s ease-out, visibility 0s linear 0s;
 }
 
 /* info text when empty */
@@ -79,11 +82,22 @@
     z-index:1000;
     border:none;
 }
+
+@media screen and (max-width: 800px){
+    .marka > .marka-dropdown {
+        font-size: larger;
+    }
+}
+
+@media screen and (min-width: 800px){
+    .marka > .marka-dropdown {
+        font-size: medium;
+    }
+}
 .marka > .marka-dropdown > .marka-result {
     padding:0.1em;
 }
 
-
 /* lightbox styling */
 #marka-currency-lightbox {
     position:fixed;
@@ -102,10 +116,22 @@
 
 #marka-currency-lightbox > div {
     min-width:10em;
-    max-width:50%;
     text-align:center;
 }
 
+@media screen and (max-width: 800px){
+    #marka-currency-lightbox > div {
+        max-width:100%;
+    }
+}
+
+@media screen and (min-width: 800px){
+    #marka-currency-lightbox > div {
+        max-width:50%;
+    }
+}
+
+
 #marka-currency-lightbox > div > div {
     padding:1.5em 2em;
     background:white;
@@ -147,3 +173,5 @@
 #marka-currency-lightbox #marka-currency-select option[value=""] {
     margin-bottom:1em
 }
+
+

js/marka.js

@@ -19,6 +19,17 @@ function Marka(target) {
         this.target = target;
     }
 
+    var lightbox = this.buildLightbox();
+    $(this.target).append($(lightbox))
+    this.setLightboxHandlers();
+
+    $('.marka-dropdown').addClass('visible');
+
+    this.match();
+    this.doConversions();
+}
+
+Marka.prototype.buildLightbox = function() {
     // lightbox
     var lightbox = '<div id="marka-currency-lightbox"><div><h2>Select a currency:</h2><div><select id="marka-currency-select">'
     var currencies = this.currencies_supported()
@@ -30,28 +41,74 @@ function Marka(target) {
             lightbox += '<option value="' + currencies[cur].code + '">' + currencies[cur].name_plural + ' (' + currencies[cur].code + ')</option>'
         }
     }
-    lightbox += '</select></div><span>or click anywhere to close</span></div></div>'
-    $(this.target).append($(lightbox))
+    // Close the select box
+    lightbox += '</select>';
+    // Close the div
+    lightbox += '</div>';
+    // Add instructions
+    lightbox += '<span>or click anywhere to close</span>';
+    // Close the entire lightbox out
+    lightbox += '</div></div>';
+    
+    return lightbox;
+}
+
+Marka.prototype.showLightbox = function(event){
+    console.log("showing Lightbox");
+    $('#marka-currency-lightbox').css('display', 'flex');
+}
+
+// This is a state variable, since the hover/click thing on mobile is miserable
+var showingMarkaDropdown = false;
+
+Marka.prototype.setLightboxHandlers = function() {
     var self = this
-    $('#marka-currency-select').change(
-        function() {
-            self.setCurrency($(this).val());
+    
+    var hideLightbox = function(){
+        $('#marka-currency-lightbox').css('display', 'none');
+    };
+    
+    var changeCurrency = function() {
+        console.log("Chanigng currency to: " + $('#marka-currency-select').val());
+            self.setCurrency($('#marka-currency-select').val());
             self.doConversions();
-            $('#marka-currency-lightbox').css('display', 'none')
-        })
-
+            hideLightbox();
+        };
+    
+    $('#marka-currency-select').change(function(){
+        changeCurrency();   
+    });
+    
+    $('#marka-currency-select-button').click(function(){
+        changeCurrency();
+    });
+    
     $('#marka-currency-lightbox').click(function(){
-        $(this).css('display', 'none')
-    })
+        hideLightbox();
+    });
 
     $('#marka-currency-lightbox > div > div').click(function(event){
         event.preventDefault()
         event.stopPropagation()
         return false
     })
+    
+    $('body').on('touchstart', function(event){
+        console.log("clicked");
+        if(!$(event.target).is('.marka-dropdown')){
+            $('.marka').each(function(index, element){
+                Marka.prototype.dropdownHoverRemove(element);
+            }); 
+        }
+    });
+}
 
-    this.match();
-    this.doConversions();
+Marka.prototype.dropdownHover = function(element){
+    $(element).children('.marka-dropdown').removeClass('hidden').addClass('visible');
+}
+
+Marka.prototype.dropdownHoverRemove = function(element){
+    $(element).children('.marka-dropdown').removeClass('visible').addClass('hidden');
 }
 
 Marka.prototype.match = function() {
@@ -217,7 +274,7 @@ Marka.prototype.findSymbol = function(text) {
 }
 
 Marka.prototype.wrapNode = function() {
-    var markaDropdownHTML = $('<span class="marka" onclick="$(\'#marka-currency-lightbox\').css(\'display\', \'flex\')"><span class="marka-dropdown" ></span></span>');
+    var markaDropdownHTML = $('<span class="marka" onmouseenter="Marka.prototype.dropdownHover(this);" onmouseleave="Marka.prototype.dropdownHoverRemove(this);" onclick="Marka.prototype.dropdownHover(this);"><span onclick="Marka.prototype.showLightbox();" class="marka-dropdown hidden" ></span></span>');
     return markaDropdownHTML.get(0);
 }