mirror of
https://github.com/twbs/bootstrap.git
synced 2025-09-28 14:29:07 +02:00
rebuild + first bit of customizer urls
This commit is contained in:
175
assets/js/customizer.js
Normal file
175
assets/js/customizer.js
Normal file
@@ -0,0 +1,175 @@
|
||||
window.onload = function () { // wait for load in a dumb way because B-0
|
||||
var cw = '/*!\n * Bootstrap v3.0.0-rc.2\n *\n * Copyright 2013 Twitter, Inc\n * Licensed under the Apache License v2.0\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Designed and built with all the love in the world @twitter by @mdo and @fat.\n */\n\n'
|
||||
|
||||
function generateUrl() {
|
||||
var vars = {}
|
||||
|
||||
$('#less-variables-section input')
|
||||
.each(function () {
|
||||
$(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
|
||||
})
|
||||
|
||||
var data = {
|
||||
vars: vars,
|
||||
css: $('#less-section input:not(:checked)').map(function () { return this.value }).toArray(),
|
||||
js: $('#plugin-section input:not(:checked)').map(function () { return this.value }).toArray()
|
||||
}
|
||||
|
||||
if ($.isEmptyObject(data.vars) && !data.css.length && !data.js.length) return
|
||||
|
||||
window.location = jQuery.param.querystring('/customize/', data)
|
||||
}
|
||||
|
||||
function parseUrl() {
|
||||
var data = jQuery.deparam.querystring()
|
||||
|
||||
if (data.js) {
|
||||
for (var i = 0; i < data.js.length; i++) {
|
||||
var input = $('input[value="'+data.js[i]+'"]')
|
||||
input && input.prop('checked', false)
|
||||
}
|
||||
}
|
||||
|
||||
if (data.css) {
|
||||
for (var i = 0; i < data.css.length; i++) {
|
||||
var input = $('input[value="'+data.css[i]+'"]')
|
||||
input && input.prop('checked', false)
|
||||
}
|
||||
}
|
||||
|
||||
if (data.vars) {
|
||||
// todo (fat): vars
|
||||
}
|
||||
}
|
||||
|
||||
function generateZip(css, js, complete) {
|
||||
if (!css && !js) return alert('you want to build nothing… o_O')
|
||||
|
||||
var zip = new JSZip()
|
||||
|
||||
if (css) {
|
||||
var cssFolder = zip.folder('css')
|
||||
for (var fileName in css) {
|
||||
cssFolder.file(fileName, css[fileName])
|
||||
}
|
||||
}
|
||||
|
||||
if (js) {
|
||||
var jsFolder = zip.folder('js')
|
||||
for (var fileName in js) {
|
||||
jsFolder.file(fileName, js[fileName])
|
||||
}
|
||||
}
|
||||
|
||||
var content = zip.generate()
|
||||
|
||||
location.href = 'data:application/zip;base64,' + content
|
||||
|
||||
complete()
|
||||
}
|
||||
|
||||
function generateCustomCSS(vars) {
|
||||
var result = ''
|
||||
|
||||
for (var key in vars) {
|
||||
result += key + ': ' + vars[key] + ';\n'
|
||||
}
|
||||
|
||||
return result + '\n\n'
|
||||
}
|
||||
|
||||
function generateCSS() {
|
||||
var $checked = $('#less-section input:checked')
|
||||
|
||||
if (!$checked.length) return false
|
||||
|
||||
var result = {}
|
||||
var vars = {}
|
||||
var css = ''
|
||||
|
||||
$('#less-variables-section input')
|
||||
.each(function () {
|
||||
$(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
|
||||
})
|
||||
|
||||
css += __less['variables.less']
|
||||
if (vars) css += generateCustomCSS(vars)
|
||||
css += __less['mixins.less']
|
||||
css += $checked
|
||||
.map(function () { return __less[this.value] })
|
||||
.toArray()
|
||||
.join('\n')
|
||||
|
||||
css = css.replace(/@import[^\n]*/gi, '') //strip any imports
|
||||
|
||||
try {
|
||||
var parser = new less.Parser({
|
||||
paths: ['variables.less', 'mixins.less']
|
||||
, optimization: 0
|
||||
, filename: 'bootstrap.css'
|
||||
}).parse(css, function (err, tree) {
|
||||
if (err) return alert(err)
|
||||
|
||||
result = {
|
||||
'bootstrap.css' : cw + tree.toCSS(),
|
||||
'bootstrap.min.css' : cw + tree.toCSS({ compress: true })
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
return alert(err)
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
function generateJavascript() {
|
||||
var $checked = $('#plugin-section input:checked')
|
||||
if (!$checked.length) return false
|
||||
|
||||
var js = $checked
|
||||
.map(function () { return __js[this.value] })
|
||||
.toArray()
|
||||
.join('\n')
|
||||
|
||||
return {
|
||||
'bootstrap.js': js,
|
||||
'bootstrap.min.js': cw + uglify(js)
|
||||
}
|
||||
}
|
||||
|
||||
var $downloadBtn = $('#btn-download').on('click', function (e) {
|
||||
e.preventDefault()
|
||||
$downloadBtn.addClass('loading')
|
||||
generateZip(generateCSS(), generateJavascript(), function () {
|
||||
$downloadBtn.removeClass('loading')
|
||||
setTimeout(function () {
|
||||
generateUrl()
|
||||
}, 1)
|
||||
})
|
||||
})
|
||||
|
||||
var inputsComponent = $('#less-section input')
|
||||
var inputsPlugin = $('#plugin-section input')
|
||||
var inputsVariables = $('#less-variables-section input')
|
||||
|
||||
$('#less-section .toggle').on('click', function (e) {
|
||||
e.preventDefault()
|
||||
inputsComponent.prop('checked', !inputsComponent.is(':checked'))
|
||||
})
|
||||
|
||||
$('#plugin-section .toggle').on('click', function (e) {
|
||||
e.preventDefault()
|
||||
inputsPlugin.prop('checked', !inputsPlugin.is(':checked'))
|
||||
})
|
||||
|
||||
$('#less-variables-section .toggle').on('click', function (e) {
|
||||
e.preventDefault()
|
||||
inputsVariables.val('')
|
||||
})
|
||||
|
||||
try {
|
||||
parseUrl()
|
||||
} catch (e) {
|
||||
// maybe alert user that we can't parse their url
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user