git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/docs-assets/js/customizer.js

   1 /*!
   2  * Copyright 2013 Twitter, Inc.
   3  *
   4  * Licensed under the Creative Commons Attribution 3.0 Unported License. For
   5  * details, see http://creativecommons.org/licenses/by/3.0/.
   6  */
   7
   8
   9 window.onload = function () { // wait for load in a dumb way because B-0
  10   var cw = '/*!\n * Bootstrap v3.0.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'
  11
  12   function showError(msg, err) {
  13     $('<div id="bsCustomizerAlert" class="bs-customizer-alert">\
  14         <div class="container">\
  15           <a href="#bsCustomizerAlert" data-dismiss="alert" class="close pull-right">&times;</a>\
  16           <p class="bs-customizer-alert-text"><span class="glyphicon glyphicon-warning-sign"></span>' + msg + '</p>' +
  17           (err.extract ? '<pre class="bs-customizer-alert-extract">' + err.extract.join('\n') + '</pre>' : '') + '\
  18         </div>\
  19       </div>').appendTo('body').alert()
  20     throw err
  21   }
  22
  23   function showCallout(msg, showUpTop) {
  24     var callout = $('<div class="bs-callout bs-callout-danger">\
  25        <h4>Attention!</h4>\
  26       <p>' + msg + '</p>\
  27     </div>')
  28
  29     if (showUpTop) {
  30       callout.appendTo('.bs-docs-container')
  31     } else {
  32       callout.insertAfter('.bs-customize-download')
  33     }
  34   }
  35
  36   function getQueryParam(key) {
  37     key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
  38     var match = location.search.match(new RegExp("[?&]"+key+"=([^&]+)(&|$)"));
  39     return match && decodeURIComponent(match[1].replace(/\+/g, " "));
  40   }
  41
  42   function createGist(configJson) {
  43     var data = {
  44       "description": "Bootstrap Customizer Config",
  45       "public": true,
  46       "files": {
  47         "config.json": {
  48           "content": configJson
  49         }
  50       }
  51     }
  52     $.ajax({
  53       url: 'https://api.github.com/gists',
  54       type: 'POST',
  55       dataType: 'json',
  56       data: JSON.stringify(data)
  57     })
  58     .success(function(result) {
  59       var origin = window.location.protocol + "//" + window.location.host
  60       history.replaceState(false, document.title, origin + window.location.pathname + '?id=' + result.id)
  61     })
  62     .error(function(err) {
  63       showError('<strong>Ruh roh!</strong> Could not save gist file, configuration not saved.', err)
  64     })
  65   }
  66
  67   function getCustomizerData() {
  68     var vars = {}
  69
  70     $('#less-variables-section input')
  71         .each(function () {
  72           $(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
  73         })
  74
  75     var data = {
  76       vars: vars,
  77       css: $('#less-section input:checked')  .map(function () { return this.value }).toArray(),
  78       js:  $('#plugin-section input:checked').map(function () { return this.value }).toArray()
  79     }
  80
  81     if ($.isEmptyObject(data.vars) && !data.css.length && !data.js.length) return
  82
  83     return data
  84   }
  85
  86   function parseUrl() {
  87     var id = getQueryParam('id')
  88
  89     if (!id) return
  90
  91     $.ajax({
  92       url: 'https://api.github.com/gists/' + id,
  93       type: 'GET',
  94       dataType: 'json'
  95     })
  96     .success(function(result) {
  97       var data = JSON.parse(result.files['config.json'].content)
  98       if (data.js) {
  99         $('#plugin-section input').each(function () {
 100           $(this).prop('checked', ~$.inArray(this.value, data.js))
 101         })
 102       }
 103       if (data.css) {
 104         $('#less-section input').each(function () {
 105           $(this).prop('checked', ~$.inArray(this.value, data.css))
 106         })
 107       }
 108       if (data.vars) {
 109         for (var i in data.vars) {
 110           $('input[data-var="' + i + '"]').val(data.vars[i])
 111         }
 112       }
 113     })
 114     .error(function(err) {
 115       showError('Error fetching bootstrap config file', err)
 116     })
 117   }
 118
 119   function generateZip(css, js, fonts, config, complete) {
 120     if (!css && !js) return showError('<strong>Ruh roh!</strong> No Bootstrap files selected.', new Error('no Bootstrap'))
 121
 122     var zip = new JSZip()
 123
 124     if (css) {
 125       var cssFolder = zip.folder('css')
 126       for (var fileName in css) {
 127         cssFolder.file(fileName, css[fileName])
 128       }
 129     }
 130
 131     if (js) {
 132       var jsFolder = zip.folder('js')
 133       for (var fileName in js) {
 134         jsFolder.file(fileName, js[fileName])
 135       }
 136     }
 137
 138     if (fonts) {
 139       var fontsFolder = zip.folder('fonts')
 140       for (var fileName in fonts) {
 141         fontsFolder.file(fileName, fonts[fileName], {base64: true})
 142       }
 143     }
 144
 145     if (config) {
 146       zip.file('config.json', config)
 147     }
 148
 149     var content = zip.generate({type:"blob"})
 150
 151     complete(content)
 152   }
 153
 154   function generateCustomCSS(vars) {
 155     var result = ''
 156
 157     for (var key in vars) {
 158       result += key + ': ' + vars[key] + ';\n'
 159     }
 160
 161     return result + '\n\n'
 162   }
 163
 164   function generateFonts() {
 165     var glyphicons = $('#less-section [value="glyphicons.less"]:checked')
 166     if (glyphicons.length) {
 167       return __fonts
 168     }
 169   }
 170
 171   // Returns an Array of @import'd filenames from 'bootstrap.less' in the order
 172   // in which they appear in the file.
 173   function bootstrapLessFilenames() {
 174     var IMPORT_REGEX = /^@import \"(.*?)\";$/
 175     var bootstrapLessLines = __less['bootstrap.less'].split('\n')
 176
 177     for (var i = 0, imports = []; i < bootstrapLessLines.length; i++) {
 178       var match = IMPORT_REGEX.exec(bootstrapLessLines[i])
 179       if (match) imports.push(match[1])
 180     }
 181
 182     return imports
 183   }
 184
 185   function generateCSS() {
 186     var oneChecked = false
 187     var lessFileIncludes = {}
 188     $('#less-section input').each(function() {
 189       var $this = $(this)
 190       var checked = $this.is(':checked')
 191       lessFileIncludes[$this.val()] = checked
 192
 193       oneChecked = oneChecked || checked
 194     })
 195
 196     if (!oneChecked) return false
 197
 198     var result = {}
 199     var vars = {}
 200     var css = ''
 201
 202     $('#less-variables-section input')
 203         .each(function () {
 204           $(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
 205         })
 206
 207     $.each(bootstrapLessFilenames(), function(index, filename) {
 208       var fileInclude = lessFileIncludes[filename]
 209
 210       // Files not explicitly unchecked are compiled into the final stylesheet.
 211       // Core stylesheets like 'normalize.less' are not included in the form
 212       // since disabling them would wreck everything, and so their 'fileInclude'
 213       // will be 'undefined'.
 214       if (fileInclude || (fileInclude == null)) css += __less[filename]
 215
 216       // Custom variables are added after Bootstrap variables so the custom
 217       // ones take precedence.
 218       if (('variables.less' === filename) && vars) css += generateCustomCSS(vars)
 219     })
 220
 221     css = css.replace(/@import[^\n]*/gi, '') //strip any imports
 222
 223     try {
 224       var parser = new less.Parser({
 225           paths: ['variables.less', 'mixins.less']
 226         , optimization: 0
 227         , filename: 'bootstrap.css'
 228       }).parse(css, function (err, tree) {
 229         if (err) {
 230           return showError('<strong>Ruh roh!</strong> Could not parse less files.', err)
 231         }
 232         result = {
 233           'bootstrap.css'     : cw + tree.toCSS(),
 234           'bootstrap.min.css' : cw + tree.toCSS({ compress: true })
 235         }
 236       })
 237     } catch (err) {
 238       return showError('<strong>Ruh roh!</strong> Could not parse less files.', err)
 239     }
 240
 241     return result
 242   }
 243
 244   function generateJavascript() {
 245     var $checked = $('#plugin-section input:checked')
 246     if (!$checked.length) return false
 247
 248     var js = $checked
 249       .map(function () { return __js[this.value] })
 250       .toArray()
 251       .join('\n')
 252
 253     return {
 254       'bootstrap.js': js,
 255       'bootstrap.min.js': cw + uglify(js)
 256     }
 257   }
 258
 259   var inputsComponent = $('#less-section input')
 260   var inputsPlugin    = $('#plugin-section input')
 261   var inputsVariables = $('#less-variables-section input')
 262
 263   $('#less-section .toggle').on('click', function (e) {
 264     e.preventDefault()
 265     inputsComponent.prop('checked', !inputsComponent.is(':checked'))
 266   })
 267
 268   $('#plugin-section .toggle').on('click', function (e) {
 269     e.preventDefault()
 270     inputsPlugin.prop('checked', !inputsPlugin.is(':checked'))
 271   })
 272
 273   $('#less-variables-section .toggle').on('click', function (e) {
 274     e.preventDefault()
 275     inputsVariables.val('')
 276   })
 277
 278   $('[data-dependencies]').on('click', function () {
 279     if (!$(this).is(':checked')) return
 280     var dependencies = this.getAttribute('data-dependencies')
 281     if (!dependencies) return
 282     dependencies = dependencies.split(',')
 283     for (var i = 0; i < dependencies.length; i++) {
 284       var dependency = $('[value="' + dependencies[i] + '"]')
 285       dependency && dependency.prop('checked', true)
 286     }
 287   })
 288
 289   $('[data-dependents]').on('click', function () {
 290     if ($(this).is(':checked')) return
 291     var dependents = this.getAttribute('data-dependents')
 292     if (!dependents) return
 293     dependents = dependents.split(',')
 294     for (var i = 0; i < dependents.length; i++) {
 295       var dependent = $('[value="' + dependents[i] + '"]')
 296       dependent && dependent.prop('checked', false)
 297     }
 298   })
 299
 300   var $compileBtn = $('#btn-compile')
 301   var $downloadBtn = $('#btn-download')
 302
 303   $compileBtn.on('click', function (e) {
 304     var configData = getCustomizerData()
 305     var configJson = JSON.stringify(configData, null, 2)
 306
 307     e.preventDefault()
 308
 309     $compileBtn.attr('disabled', 'disabled')
 310
 311     generateZip(generateCSS(), generateJavascript(), generateFonts(), configJson, function (blob) {
 312       $compileBtn.removeAttr('disabled')
 313       saveAs(blob, "bootstrap.zip")
 314       createGist(configJson)
 315     })
 316   })
 317
 318   // browser support alerts
 319   if (!window.URL && navigator.userAgent.toLowerCase().indexOf('safari') != -1) {
 320     showCallout("Looks like you're using safari, which sadly doesn't have the best support\
 321                  for HTML5 blobs. Because of this your file will be downloaded with the name <code>\"untitled\"</code>.\
 322                  However, if you check your downloads folder, just rename this <code>\"untitled\"</code> file\
 323                  to <code>\"bootstrap.zip\"</code> and you should be good to go!")
 324   } else if (!window.URL && !window.webkitURL) {
 325     $('.bs-docs-section, .bs-sidebar').css('display', 'none')
 326
 327     showCallout("Looks like your current browser doesn't support the Bootstrap Customizer. Please take a second\
 328                 to <a href=\"https://www.google.com/intl/en/chrome/browser/\"> upgrade to a more modern browser</a>.", true)
 329   }
 330
 331   parseUrl()
 332 }