gergely/gergelypolonkai-web-jekyll
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

TMP start transitioning to bootstrap modals

Browse Source
This commit is contained in:
Gergely Polonkai 2015-10-05 15:48:15 +02:00
parent cf888b7247
commit d2e1bcccec
1 changed files with 136 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

258
symbolon/index.html
View File

@ -2,160 +2,174 @@
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Symbolon</title> <title>Symbolon</title>
<style> <style>
div#holder { div#holder {
overflow: auto; overflow: auto;
height: 320px; height: 320px;
} }
div.card { div.card {
float: left; float: left;
margin-right: 1em; margin-right: 1em;
} }
p { p {
text-align: center; text-align: center;
border-bottom: 1px solid black; border-bottom: 1px solid black;
} }
img { img {
border: 0 none; border: 0 none;
} }
</style> </style>
<link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css" type="text/css"> <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/fancybox/source/jquery.fancybox.pack.js"></script>
</head>
<body>
<select>
<option value="">Mind / All</option>
<option value="aries">Kos / Aries</option>
<option value="taurus">Bika / Taurus</option>
<option value="gemini">Ikrek / Gemini</option>
<option value="cancer">Rák / Cancer</option>
<option value="leo">Oroszlán / Leo</option>
<option value="virgo">Szűz / Virgo</option>
<option value="libra">Mérleg / Libra</option>
<option value="scorpio">Skorpió / Scorpio</option>
<option value="sagittarius">Nyilas / Sagittarius</option>
<option value="capricorn">Bak / Capricorn</option>
<option value="aquarius">Vízöntő / Aquarius</option>
<option value="pisces">Halak / Pisces</option>
</select>
<select> <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<option value="">Mind / All</option> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<option value="aries">Kos / Aries</option> </head>
<option value="taurus">Bika / Taurus</option> <body>
<option value="gemini">Ikrek / Gemini</option> <div class="container">
<option value="cancer">Rák / Cancer</option> <select>
<option value="leo">Oroszlán / Leo</option> <option value="">Mind / All</option>
<option value="virgo">Szűz / Virgo</option> <option value="aries">Kos / Aries</option>
<option value="libra">Mérleg / Libra</option> <option value="taurus">Bika / Taurus</option>
<option value="scorpio">Skorpió / Scorpio</option> <option value="gemini">Ikrek / Gemini</option>
<option value="sagittarius">Nyilas / Sagittarius</option> <option value="cancer">Rák / Cancer</option>
<option value="capricorn">Bak / Capricorn</option> <option value="leo">Oroszlán / Leo</option>
<option value="aquarius">Vízöntő / Aquarius</option> <option value="virgo">Szűz / Virgo</option>
<option value="pisces">Halak / Pisces</option> <option value="libra">Mérleg / Libra</option>
</select> <option value="scorpio">Skorpió / Scorpio</option>
<option value="sagittarius">Nyilas / Sagittarius</option>
<option value="capricorn">Bak / Capricorn</option>
<option value="aquarius">Vízöntő / Aquarius</option>
<option value="pisces">Halak / Pisces</option>
</select>
<button id="draw">Húzz egyet / Draw one</button> <select>
<option value="">Mind / All</option>
<option value="aries">Kos / Aries</option>
<option value="taurus">Bika / Taurus</option>
<option value="gemini">Ikrek / Gemini</option>
<option value="cancer">Rák / Cancer</option>
<option value="leo">Oroszlán / Leo</option>
<option value="virgo">Szűz / Virgo</option>
<option value="libra">Mérleg / Libra</option>
<option value="scorpio">Skorpió / Scorpio</option>
<option value="sagittarius">Nyilas / Sagittarius</option>
<option value="capricorn">Bak / Capricorn</option>
<option value="aquarius">Vízöntő / Aquarius</option>
<option value="pisces">Halak / Pisces</option>
</select>
<hr> <button type="button" class="btn" data-toggle="modal" data-target="#draw-one-modal" id="draw">Húzz egyet!</button>
<div id="holder"> <hr>
<div id="holder">
{% assign list = site.data.symbolon | sort:'number'%} {% assign list = site.data.symbolon | sort:'number'%}
{% for s in list %} {% for s in list %}
{% assign image = '0' | append: s.number %} {% assign image = '0' | append: s.number %}
{% comment %}
Using image|slice:-2,2 would be much easier here. However, it seems the
slice filer is not working for some time now…
{% endcomment %}
{% assign len = image | size %} {% assign len = image | size %}
{% if len == 3 %} {% if len == 3 %}
{% assign image = '' | append: s.number %} {% assign image = '' | append: s.number %}
{% endif %} {% endif %}
<div class="card{% for sign in s.signs %} {{sign}}{% endfor %}"> <div class="card{% for sign in s.signs %} {{sign}}{% endfor %}">
<a id="card_{{image}}" class="fancybox" rel="group" href="images/{{image}}.jpg"> <a id="card_{{image}}" rel="group" href="images/{{image}}.jpg">
<img src="images/{{image}}.jpg" alt="{{s.name}}"> <img src="images/{{image}}.jpg" alt="{{s.name}}">
</a> </a>
<p class="cim">{{s.number}}. {{s.name}}</p> <p class="cim">{{s.number}}. {{s.name}}</p>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
</div>
<script> <div class="modal fade" id="draw-one-modal" tabindex="-1" role="dialog" aria-labelledby="draw-one-title">
$('select').change(function () { <div class="modal-dialog" role="document">
var classes = new Array(); <div class="modal-content">
var single_card = false; <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="draw-one-title">Draw One</h4>
</div>
$('select').each(function (i, e) { <div class="modal-body" id="draw-one-body">
sign = $(e).val(); Body!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
if (sign != '') { <script>
classes.push($(e).val()); $('select').change(function () {
} var classes = new Array();
}); var single_card = false;
if (classes.length == 2 && (classes[0] == classes[1])) { $('select').each(function (i, e) {
single_card = true; sign = $(e).val();
}
classes = classes.filter(function (e, i, arr) { if (sign != '') {
return arr.lastIndexOf(e) === i; classes.push($(e).val());
}); }
});
selector = ''; if (classes.length == 2 && (classes[0] == classes[1])) {
single_card = true;
}
$.map(classes, function (e) { classes = classes.filter(function (e, i, arr) {
selector += '.' + e; return arr.lastIndexOf(e) === i;
}); });
if (single_card) { selector = '';
selector = '.' + classes[0] + '[class="card ' + classes[0] + '"]';
}
console.log(selector); $.map(classes, function (e) {
selector += '.' + e;
});
$('div.card').show(); if (single_card) {
if (selector != '') { selector = '.' + classes[0] + '[class="card ' + classes[0] + '"]';
$('div.card').not(selector).hide(); }
}
});
function resize_holder() { $('div.card').show();
var winheight = $(window).height();
var holdertop = $('#holder').position().top;
$('#holder').height(winheight - holdertop - 10);
}
$(document).ready(function () { if (selector != '') {
resize_holder(); $('div.card').not(selector).hide();
}
});
$('.fancybox').fancybox({ function resize_holder() {
beforeShow: function() { var winheight = $(window).height();
var alt = this.element.find('img').attr('alt'); var holdertop = $('#holder').position().top;
this.inner.find('img').attr('alt', alt);
this.title = alt;
}
});
});
$(window).resize(function () { $('#holder').height(winheight - holdertop - 10);
resize_holder(); }
});
$('#draw').click(function () { $(document).ready(function () {
count = $('div.card').length; resize_holder();
});
draw_num = Math.floor(Math.random() * count) + 1; $(window).resize(function () {
num_str = (draw_num < 10) ? '0' + draw_num : draw_num; resize_holder();
draw_id = '#card_' + num_str; });
console.log(draw_id); $('#draw-one-modal').on('show.bs.modal', function(e) {
count = $('div.card').length;
$(draw_id).click(); draw_num = Math.floor(Math.random() * count) + 1;
}); num_str = (draw_num < 10) ? '0' + draw_num : draw_num;
</script>
</body> $('#draw-one-body').html('');
});
</script>
</body>
</html> </html>