Commit 5980539c authored by Thomas Park's avatar Thomas Park
Browse files

tests: add theme switcher to components, use api v3, remove unused code

parent 30265cfd
......@@ -4,8 +4,18 @@
<title>Bootswatch: Components</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="../amelia/bootstrap.css" media="screen">
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css" media="screen" id="stylesheet">
<link rel="stylesheet" href="../assets/css/bootswatch.min.css">
<style>
#menu {
z-index: 1040;
position:fixed;
top:10px;
right:10px;
}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../bower_components/bootstrap/assets/js/html5shiv.js"></script>
......@@ -77,8 +87,8 @@
<div class="container">
<div class="page-header">
<h1>Bootstrap</h1>
<p class="lead">The original</p>
<h1 id="theme">Bootstrap</h1>
<p id="description" class="lead">The original</p>
</div>
......@@ -2722,11 +2732,27 @@
<script src="../bower_components/jquery/jquery.min.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<script src="../assets/js/bootswatch.js"></script>
<script>
$('[data-toggle=popover]').popover();
$.get("http://api.bootswatch.com/3/", function (data) {
var menuTemplate = "<div id='menu'><select>{{#.}}<option data-description='{{description}}'>{{name}}</option>{{/.}}</select></div>",
menuHTML = Mustache.render(menuTemplate, data.themes);
$('body').append(menuHTML);
$('#menu').change(function(){
var theme = $('#menu :selected');
$('#theme').text(theme.text());
$('#description').text(theme.data('description'));
theme = '../' + theme.text().toLowerCase() + '/bootstrap.min.css';
$('#stylesheet').attr('href', theme);
});
}, "json");
</script>
</body>
</html>
\ No newline at end of file
</html>
......@@ -93,29 +93,21 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<script>
$.get("http://api.bootswatch.com", function (data) {
$.get("http://api.bootswatch.com/3/", function (data) {
var menuTemplate = "<div id='menu' style='position:fixed;top:10px;right:10px;'><select>{{#.}}<option data-description='{{description}}'>{{name}}</option>{{/.}}</select></div>",
menuHTML = Mustache.render(menuTemplate, data.themes);
var t_menu = "<div id='menu' style='position:fixed;top:10px;right:10px;'><select>{{#.}}<option data-description='{{description}}'>{{name}}</option>{{/.}}</select></div>";
var t_previews = "{{#.}}<div class='preview hidden' id='{{name}}'><h1>{{name}}: {{description}}</h1><p><a href='{{preview}}'><img src='{{thumbnail}}'></a></p></div>{{/.}}";
var o_menu = Mustache.render(t_menu, data.themes);
var o_previews = Mustache.render(t_previews, data.themes);
$('body').append(o_menu);
$('body').append(menuHTML);
$('#menu').change(function(){
var theme = $('#menu :selected');
$('#theme').text(theme.text());
$('#description').text(theme.data('description'));
theme = '../' + theme.text().toLowerCase() + '/bootstrap.min.css';
$('#stylesheet').attr('href', theme);
});
}, "json");
</script>
</body>
</html>
\ No newline at end of file
</html>
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