Fixed cssclassprefix query option on download page

frontend/js/download/CodeExampleModal.js

@@ -34,7 +34,7 @@ var CodeExampleModal = React.createClass({
           (data.async ? '});' : '')
         }})
       )
-    )
+    );
   }
 });
 

frontend/js/download/DownloadOverlay.js

@@ -100,7 +100,7 @@ var DownloadOverlay = React.createClass({
 
     // multiclasses features are joined with a _, so we do this splitting and joining
     // to flatten the array into a list of individual classes
-    var features = location.search.slice(1).split('&')[0].split('_').join('-').split('-')
+    var features = location.search.slice(1).split('&')[0].split('_').join('-').split('-');
     var _ul = document.createElement('ul');
 
     features = _.forEach(features, function(feature) {

frontend/js/download/DownloadUI.js

@@ -10,13 +10,14 @@ var DOM = React.DOM, form = DOM.form;
 var DownloadUI = React.createClass({
   getInitialState: function() {
     return {
-      currentSearch: this.props.currentSearch
+      currentSearch: this.props.initialState.currentSearch,
+      classPrefix: this.props.initialState.classPrefix
     };
   },
 
   componentDidMount: function() {
     var props = this.props;
-    if (props.currentSearch) {
+    if (this.state.currentSearch) {
       this.refs.searchHeader.change();
     }
 
@@ -64,7 +65,8 @@ var DownloadUI = React.createClass({
           updatePrefix: this.updatePrefix,
           filesize: state.filesize,
           build: this.build,
-          select: this.select
+          select: this.select,
+          classPrefix: this.state.classPrefix
         }),
 
         DetectList({

frontend/js/download/LeftColumn.js

@@ -7,13 +7,15 @@ var util = require('./util');
 var cx = require('classnames');
 
 var pluralize = util.pluralize;
-var DOM = React.DOM, div = DOM.div, button = DOM.button, label = DOM.label, input = DOM.input;
+var DOM = React.DOM, div = DOM.div, label = DOM.label, input = DOM.input;
 
 var LeftColumn = React.createClass({
   mixins: [PureRenderMixin],
 
   getInitialState: function() {
-    return {};
+    return {
+      classPrefix: this.props.classPrefix || ''
+    };
   },
 
   render: function() {
@@ -35,7 +37,7 @@ var LeftColumn = React.createClass({
     });
     var inputClass = cx({
       'classPrefix': true,
-      'classNameAdded': state.classNameAdded
+      'classNameAdded': state.classPrefix.length > 0
     });
 
     var results = detects.length === allDetects.length ? ' ' :
@@ -78,7 +80,7 @@ var LeftColumn = React.createClass({
         checked: option.checked,
         toggleClassPrefix: this.toggleClassPrefix
       });
-    }, this);
+    }.bind(this));
 
     return (
       div({className: className, onClick: this.props.onClick},
@@ -95,7 +97,7 @@ var LeftColumn = React.createClass({
             hidden: !this.state.showClassPrefixInput
           })},
             label({htmlFor: 'classPrefix'}, '… with prefix'),
-            input({className: inputClass, name: 'classPrefix', id: 'classPrefix', placeholder:'e.g. mod_', onKeyUp: this.classNameAdded})
+            input({className: inputClass, value: this.state.classPrefix, name: 'classPrefix', id: 'classPrefix', placeholder:'e.g. mod_', onChange: this.classNameAdded})
           )
         )
       )
@@ -119,7 +121,7 @@ var LeftColumn = React.createClass({
 
   classNameAdded: function(e) {
     var prefix = e.target.value;
-    this.setState({classNameAdded: prefix.length});
+    this.setState({classPrefix: prefix});
     this.props.updatePrefix(prefix);
   }
 

frontend/js/download/index.js

@@ -1,9 +1,12 @@
 'use strict';
 var React = require('react/addons');
 var DownloadUI = React.createFactory(require('./DownloadUI'));
-var currentSearch;
 var shouldBuild;
 var useHash;
+var initialState = {
+  currentSearch: undefined,
+  classPrefix: undefined
+};
 
 if ('serviceWorker' in navigator &&
     (location.protocol === 'https:' || location.hostname === 'localhost')
@@ -46,48 +49,54 @@ if (location.hash.length || location.search.length) {
   if (queries.length) {
     shouldBuild = true;
 
-    queries.map(function(query) {
+    queries.forEach(function(query) {
       var searchResult = query.match(/q=(.*)/);
       if (searchResult) {
-        currentSearch = unescape(searchResult[1]);
+        initialState.currentSearch = unescape(searchResult[1]);
       } else {
+        var clearQuery = query.replace('#', '');
         var matches = function(obj) {
           var prop = obj.property;
           if (_.isArray(prop)) {
             prop = prop.join('_');
           }
 
-          if (query === prop.toLowerCase()
-             || query === 'shiv' && prop === 'html5shiv'
-             || query === 'printshiv' && prop === 'html5printshiv'
-             || obj.builderAliases && _.contains(obj.builderAliases, query)
-             || query === 'do_not_use_in_production') {
+          if (_.contains(clearQuery, 'cssclassprefix')) {
+            var splittedQuery = clearQuery.split(':');
+            if (splittedQuery.length === 2 && splittedQuery[1].length > 0) {
+              initialState.classPrefix = splittedQuery[1];
+            }
+          }
+
+          if (clearQuery === prop.toLowerCase()
+             || clearQuery === 'shiv' && prop === 'html5shiv'
+             || clearQuery === 'printshiv' && prop === 'html5printshiv'
+             || obj.builderAliases && _.contains(obj.builderAliases, clearQuery)
+             || clearQuery === 'do_not_use_in_production') {
             obj.checked = true;
             return true;
           }
 
-          if (query === 'dontmin' && prop === 'minify') {
+          if (clearQuery === 'dontmin' && prop === 'minify') {
             obj.checked = false;
             return true;
           }
         };
 
-        if(queries.length === 1 && query === 'do_not_use_in_production') {
+        if(queries.length === 1 && clearQuery === 'do_not_use_in_production') {
           _.chain(_.union(window._options, window._modernizrMetadata))
             .filter(function(option) {
               if(_.isArray(option.property)) {
                 return true;
               }
-              return option.property.toLowerCase() !== 'html5printshiv'
+              return option.property.toLowerCase() !== 'html5printshiv';
             })
             .forEach(matches)
             .value();
         } else {
-          return _.some(window._options, matches) || _.some(window._modernizrMetadata, matches);
+          _.some(window._options, matches) || _.some(window._modernizrMetadata, matches);
         }
       }
-
-      return query;
     });
 
     if (useHash) {
@@ -162,6 +171,6 @@ ZeroClipboard.config({
 React.render(DownloadUI({
   detects: window._modernizrMetadata,
   options: window._options,
-  currentSearch: currentSearch,
+  initialState: initialState,
   shouldBuild: shouldBuild
 }), document.getElementById('main'));

server/buildSteps/download.js

@@ -6,5 +6,5 @@ var DownloadModule = require('../../frontend/js/download/DownloadUI');
 var downloadFactory = React.createFactory(DownloadModule);
 var options = require('../util/modernizrOptions');
 
-// render a static version of the `builder` for a faster inital render/script-less clients
-module.exports = React.renderToString(downloadFactory({detects:Modernizr.metadata(), options: options}));
+// render a static version of the `builder` for a faster initial render/script-less clients
+module.exports = React.renderToString(downloadFactory({detects:Modernizr.metadata(), options: options, initialState: {}}));