Commit cfe70937 authored by Christopher Guess's avatar Christopher Guess
Browse files

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.
parent eef4d861
......@@ -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
}
......@@ -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);
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment