<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Bootswatch Theme Picker - Auto Updated - Version 3.0.0</h2>
<p>I was looking to create a theme picker that always updated when Bootswatch updated their files. So I created this gem. Now when bootswatch updates this will update.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="form-group theme-control">
<label for="text" style="float:left;margin-right:5px; padding-top:5px; font-weight: normal;">Theme <a href="#" class="tip" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="You can preview snippets using a theme from Bootswatch"><span class="glyphicon glyphicon-question-sign"></span></a></label>
<div class="input-group">
<select class="form-control" name="bootstrap-theme" id="theme_chooser" data-toggle="selectpicker"></select>
</div>
</div>
</div>
</div>
// Custom String.Format used for quick text replacement
String.format = function() {
var str = arguments[0];
for (var i = 1; i < arguments.length; i++) {
str = str.replace(RegExp("\\{" + (i - 1) + "\\}", "gm"), arguments[i]);
}
return str;
};
// Version of Bootstrap
var version = 0;
$(document).ready(function() {
// Get stylesheet that contains Bootstrap Theme
var $link = $('head link[rel="stylesheet"]').eq(0);
// Set Bootstrap Version
var strip = {
0: '//maxcdn.bootstrapcdn.com/bootstrap/',
1: '//netdna.bootstrapcdn.com/twitter-bootstrap/',
2: '/css/bootstrap.min.css',
3: '/css/bootstrap-combined.min.css'
}
version = $link.attr('href');
$.each(strip, function(key, val) {
version = version.replace(val, '');
});
// Bind Theme Chooser on Change event to load selected Bootstrap Theme
$('#theme_chooser').on('change', function(event) {
var $selected = $(this).find('option:selected');
$link.attr('href', $selected.val());
});
});
$(document).ready(function() {
console.log(version);
var bootswatchAPI = 'http://api.bootswatch.com/' + version.split('.')[0],
optionTemplate = '<option value="{0}">{1}</option>';
var boostrapTheme = {
cssMin: '//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css'.replace('/latest/', '/'+version+'/'),
name: 'Bootstrap'
}
$('#theme_chooser').append(String.format(optionTemplate, boostrapTheme.cssMin, boostrapTheme.name));
$.getJSON(bootswatchAPI, function(data) {
var themes = data.themes;
themes.forEach(function(value, index) {
var cssCdn = value.cssCdn.replace('/latest/', '/'+version+'/');
$('#theme_chooser').append(String.format(optionTemplate, cssCdn, value.name));
});
})
})
