From a08c5c9390d14c366bdce734c27dc737317144d3 Mon Sep 17 00:00:00 2001 From: feugenix Date: Sun, 15 Oct 2017 23:35:50 +0300 Subject: [PATCH] Fixed cssclassprefix query option on download page Fixed some jshint warnings. --- frontend/js/download/CodeExampleModal.js | 2 +- frontend/js/download/DownloadOverlay.js | 2 +- frontend/js/download/DownloadUI.js | 8 +++-- frontend/js/download/LeftColumn.js | 14 +++++---- frontend/js/download/index.js | 39 +++++++++++++++--------- server/buildSteps/download.js | 4 +-- 6 files changed, 41 insertions(+), 28 deletions(-) diff --git a/frontend/js/download/CodeExampleModal.js b/frontend/js/download/CodeExampleModal.js index da42cd1..dc1b1cf 100644 --- a/frontend/js/download/CodeExampleModal.js +++ b/frontend/js/download/CodeExampleModal.js @@ -34,7 +34,7 @@ var CodeExampleModal = React.createClass({ (data.async ? '});' : '') }}) ) - ) + ); } }); diff --git a/frontend/js/download/DownloadOverlay.js b/frontend/js/download/DownloadOverlay.js index b3e1785..29a6da8 100644 --- a/frontend/js/download/DownloadOverlay.js +++ b/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) { diff --git a/frontend/js/download/DownloadUI.js b/frontend/js/download/DownloadUI.js index 53ae296..f93028a 100644 --- a/frontend/js/download/DownloadUI.js +++ b/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({ diff --git a/frontend/js/download/LeftColumn.js b/frontend/js/download/LeftColumn.js index f6085ea..e688a41 100644 --- a/frontend/js/download/LeftColumn.js +++ b/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); } diff --git a/frontend/js/download/index.js b/frontend/js/download/index.js index 2ea9255..471664e 100644 --- a/frontend/js/download/index.js +++ b/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')); diff --git a/server/buildSteps/download.js b/server/buildSteps/download.js index 6e803ea..857a577 100644 --- a/server/buildSteps/download.js +++ b/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: {}}));