cordova-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From mura...@apache.org
Subject [1/4] cordova-registry-web git commit: Refactor modules, faster search. This closes #29
Date Tue, 21 Jul 2015 21:18:58 GMT
Repository: cordova-registry-web
Updated Branches:
  refs/heads/master 84471f18d -> 3640a6bba


Refactor modules, faster search. This closes #29


Project: http://git-wip-us.apache.org/repos/asf/cordova-registry-web/repo
Commit: http://git-wip-us.apache.org/repos/asf/cordova-registry-web/commit/b0262448
Tree: http://git-wip-us.apache.org/repos/asf/cordova-registry-web/tree/b0262448
Diff: http://git-wip-us.apache.org/repos/asf/cordova-registry-web/diff/b0262448

Branch: refs/heads/master
Commit: b0262448039b006149fd1dd293c9ab09bf392d72
Parents: 84471f1
Author: Murat Sutunc <sutunc@gmail.com>
Authored: Fri Jul 17 00:00:05 2015 -0700
Committer: Murat Sutunc <sutunc@gmail.com>
Committed: Tue Jul 21 14:02:46 2015 -0700

----------------------------------------------------------------------
 npm-search/Gulpfile.js                   |   2 +-
 npm-search/package.json                  |   1 +
 npm-search/src/js/app.js                 | 308 ++------------------------
 npm-search/src/js/platformbutton.jsx     |  15 ++
 npm-search/src/js/plugin.jsx             |  55 +++++
 npm-search/src/js/pluginlist.jsx         | 105 +++++++++
 npm-search/src/js/searchbar.jsx          |  59 +++++
 npm-search/src/js/supportedplatforms.jsx |  83 +++++++
 8 files changed, 340 insertions(+), 288 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/cordova-registry-web/blob/b0262448/npm-search/Gulpfile.js
----------------------------------------------------------------------
diff --git a/npm-search/Gulpfile.js b/npm-search/Gulpfile.js
index 6839165..1f7463e 100644
--- a/npm-search/Gulpfile.js
+++ b/npm-search/Gulpfile.js
@@ -52,7 +52,7 @@ gulp.task('etc', function () {
 })
 
 gulp.task('dev', ['build'], function () {
-    gulp.watch(['src/js/**/*.js', 'src/js/*.json'], [ 'scripts' ]);
+    gulp.watch(['src/js/**/*.js', 'src/js/*.json', 'src/js/**/*.jsx'], [ 'scripts' ]);
     gulp.watch('src/css/**/*.css', [ 'styles' ]);
     gulp.watch('src/img/**', [ 'images' ]);
     gulp.watch('src/*.html', ['html']);

http://git-wip-us.apache.org/repos/asf/cordova-registry-web/blob/b0262448/npm-search/package.json
----------------------------------------------------------------------
diff --git a/npm-search/package.json b/npm-search/package.json
index 34fd6ba..67b40b8 100644
--- a/npm-search/package.json
+++ b/npm-search/package.json
@@ -17,6 +17,7 @@
   },
   "homepage": "https://github.com/apache/cordova-registry-web",
   "devDependencies": {
+    "baconjs": "^0.7.70",
     "browserify": "^10.2.4",
     "classnames": "^2.1.2",
     "envify": "^3.4.0",

http://git-wip-us.apache.org/repos/asf/cordova-registry-web/blob/b0262448/npm-search/src/js/app.js
----------------------------------------------------------------------
diff --git a/npm-search/src/js/app.js b/npm-search/src/js/app.js
index 278f5ef..548dcb7 100644
--- a/npm-search/src/js/app.js
+++ b/npm-search/src/js/app.js
@@ -1,188 +1,13 @@
-var React    = window.React = require('react'), // assign it to window for react chrome extension
-    classNames = require('classnames'),
-    App = {};
+var React           = window.React = require('react'), // assign it to window for react chrome
extension
+    SearchBar       = require('./searchbar.jsx'),
+    PluginList      = require('./pluginlist.jsx'),
+    App             = {};
 
 var Constants = {
     DownloadCountBatch: 100,
     NpmSearchInitialSize: 500
 }
 
-var OfficialPlugin = React.createClass({
-    render: function() {
-        return (
-            <div id="featured"></div>
-        );
-    }
-});
-
-var PlatformButton = React.createClass({
-    onClick: function() {
-        var appInstance = React.render(<App />, document.getElementById('container'));
-        appInstance.addCondition("platform:" + this.props.platform);
-    },
-    render: function() {
-        return (
-            <li className = "clickable" onClick={this.onClick}> {this.props.platform}
</li>
-        );
-    }
-});
-
-var SupportedPlatforms = React.createClass({
-    getInitialState: function() {
-        return {
-            moreClicked: false
-        };
-    },
-    onClick: function() {
-        this.setState({
-            moreClicked: true
-        });
-    },
-    render: function() {
-        var keywords = this.props.keywords;
-        var sortedMajorPlatforms = [{present:false, text: "Android"}, {present:false, text:
"iOS"}, {present:false, text: "Windows"}, {present:false, text: "Blackberry10"}];
-        var majorPlatformsSupported = [];
-        var otherPlatformsSupported = [];
-        // remove windows8 & windows dupe
-        if (keywords.indexOf('cordova-windows') > -1 && keywords.indexOf('cordova-windows8')
> -1) {
-            keywords.splice(keywords.indexOf('cordova-windows8'), 1);
-        }
-        keywords.forEach(function(keyword) {
-            switch (keyword) {
-                case 'cordova-firefoxos':
-                    otherPlatformsSupported.push(<PlatformButton platform="FirefoxOS"
/>);
-                    break;
-                case 'cordova-android':
-                    sortedMajorPlatforms[0].present = true;
-                    break;
-                case 'cordova-amazon-fireos':
-                    otherPlatformsSupported.push(<PlatformButton platform="FireOS" />);
-                    break;
-                case 'cordova-ubuntu':
-                    otherPlatformsSupported.push(<PlatformButton platform="Ubuntu" />);
-                    break;
-                case 'cordova-ios':
-                    sortedMajorPlatforms[1].present = true;
-                    break;
-                case 'cordova-blackberry10':
-                    sortedMajorPlatforms[3].present = true;
-                    break;
-                case 'cordova-wp8':
-                    otherPlatformsSupported.push(<PlatformButton platform="Windows Phone
8" />);
-                    break;
-                case 'cordova-windows8':
-                case 'cordova-windows':
-                    sortedMajorPlatforms[2].present = true;
-                    break;
-                case 'cordova-browser':
-                    otherPlatformsSupported.push(<PlatformButton platform="Browser" />);
-                    break;
-            }
-        });
-
-        sortedMajorPlatforms.forEach(function(platform) {
-            if(platform.present) {
-                majorPlatformsSupported.push(<PlatformButton platform={platform.text}
/>)
-            }
-        });
-        while(majorPlatformsSupported.length < 4 && otherPlatformsSupported.length
> 0) {
-            majorPlatformsSupported.push(otherPlatformsSupported.shift());
-        }
-
-        var moreButton;
-        if(otherPlatformsSupported.length > 0 && !this.state.moreClicked) {
-            moreButton = <li className="clickable" onClick={this.onClick}>...</li>
-        }
-        if (!this.state.moreClicked) {
-            otherPlatformsSupported = null;
-        }
-        return (
-            <ul className="supportedPlatforms">
-                {majorPlatformsSupported}
-                {moreButton}
-                {otherPlatformsSupported}
-            </ul>
-        );
-    }
-});
-
-var SearchBar = React.createClass({
-    handleChange: function() {
-        this.props.onUserInput(
-            this.refs.filterTextInput.getDOMNode().value
-        )
-    },
-    render: function() {
-        return (
-            <div className="col-xs-offset-2 col-xs-8">
-                <div id="searchwrapper">
-                    <input
-                        className="searchBox"
-                        type="search"
-                        autoComplete="off"
-                        placeholder={this.props.placeHolderText}
-                        value={this.props.filterText}
-                        ref="filterTextInput"
-                        onChange={this.handleChange}
-                    />
-                </div>
-            </div>
-        );
-    }
-});
-
-var Plugin = React.createClass({
-    shouldComponentUpdate: function(nextProps, nextState) {
-        return this.props.plugin !== nextProps.plugin;
-    },
-    render: function() {
-        var license = this.props.plugin.license;
-        if (license && license.length > 1) {
-            license = license[0];
-        }
-        var downloadField;
-
-        var classes = classNames({
-            'pluginCard': true,
-            'featuredPlugin': this.props.plugin.isOfficial,
-            'row': true
-        });
-
-        if(this.props.plugin.downloadCount) {
-            var downloadCount = this.props.plugin.downloadCount.toLocaleString();
-            downloadField = <p><small> {downloadCount} downloads last month</small></p>;
-        }
-        return (
-            <li>
-                <div className={classes}>
-                    <div className="primaryContent col-xs-9">
-                        <div className="header">
-                            <h3><a href={'https://www.npmjs.com/package/' + this.props.plugin.name}
target="_blank">{this.props.plugin.name}</a></h3>
-                            <small className="pluginVersion">v{this.props.plugin.version}</small>
-                            <small> by </small>
-                            <small className="pluginAuthor">{this.props.plugin.author}</small>
-                        </div>
-                        <div className="pluginDesc">{this.props.plugin.description}</div>
-                        <SupportedPlatforms keywords={this.props.plugin.keywords}/>
-                        </div>
-                        <div className="secondaryContent col-xs-3">
-                        <div className="download">
-                            <p></p>
-                        </div>
-                        <div className="extraInfo">
-                            <p><small><strong>License:</strong> {license}</small></p>
-                            {downloadField}
-                            <p><small><em>Last updated {this.props.plugin.modified}
days ago</em></small></p>
-                        </div>
-                    </div>
-                </div>
-            </li>
-        )
-    }
-});
-
-var timer=null;
-
 window.addEventListener('popstate', function(e) {
     if(e.state) {
         var appInstance = React.render(<App />, document.getElementById('container'));
@@ -190,113 +15,22 @@ window.addEventListener('popstate', function(e) {
     }
 });
 
-var PluginList = React.createClass({
-    statics: {
-        contains: function(values, pluginInfo) {
-            var allValuesPresent = true;
-            if(values.length == 0) {
-                return allValuesPresent;
-            }
-            if(!pluginInfo) {
-                return false;
-            }
-            values.forEach(function(value) {
-                var valuePresent = false;
-                for(var index=0; index < pluginInfo.length; index++) {
-                    if(pluginInfo[index] && pluginInfo[index].toLowerCase().indexOf(value)
> -1) {
-                        valuePresent = true;
-                    }
-                }
-                if(!valuePresent) {
-                    allValuesPresent = false;
-                }
-            });
-            return allValuesPresent;
-        },
-        populateFilters: function(filterText)
-        {
-            var searchStrings = filterText.split(" ");
-            var filters = [];
-            filters['platforms'] = [];
-            filters['authors'] = [];
-            filters['licenses'] = [];
-            filters['searchWords'] = [];
-
-            searchStrings.forEach(function(searchString) {
-                var keywords = searchString.split(":");
-                if(keywords.length == 1) {
-                    var param = keywords[0].trim();
-                    if(param) {
-                        filters['searchWords'].push(param);
-                    }
-                }
-                else if(keywords[1].trim()) {
-                    var param = keywords[1].trim();
-                    switch(keywords[0]) {
-                        case 'platform':
-                            filters['platforms'].push(param);
-                            break;
-                        case 'author':
-                            filters['authors'].push(param);
-                            break;
-                        case 'license':
-                            filters['licenses'].push(param);
-                            break;
-                        default:
-                            filters['searchWords'].push(searchString);
-                    }
-                }
-                else {
-                    filters['searchWords'].push(searchString);
-                }
-            });
-            return filters;
-        }
-    },
-    render: function() {
-        var plugins = [],
-            filterText = this.props.filterText.toLowerCase();
-
-        var delay = (function(){
-          return function(callback, ms){
-            clearTimeout (timer);
-            timer = setTimeout(callback, ms);
-          };
-        })();
-
-        delay(function(){
-                    window.history.pushState({"filterText":filterText}, "", "?q=" + filterText);
-            }, 2000 );
-
-        var filters = PluginList.populateFilters(filterText);
-
-        this.props.plugins.forEach(function(plugin) {
-            var fullPluginText = plugin.name.concat(plugin.author, plugin.keywords, plugin.license,
plugin.description);
-            if(PluginList.contains(filters['platforms'], plugin.keywords)
-                && PluginList.contains(filters['authors'], plugin.author)
-                && PluginList.contains(filters['licenses'], plugin.license)
-                && PluginList.contains(filters['searchWords'], fullPluginText)) {
-                    plugins.push(<Plugin plugin={plugin} key={plugin.author + plugin.name}/>);
-            }
-        }.bind(this));
-        return (
-            <div className="col-xs-offset-2 col-xs-8">
-                <ul className="pluginList">
-                    {plugins}
-                </ul>
-            </div>
-        );
-    }
-});
-
-
 var App = React.createClass({
     getInitialState: function() {
-        return {
-            plugins: [],
-            filterText: '',
-            placeHolderText: 'Loading...'
-        };
+        var q = App.getURLParameter('q');
+        if (q) {
+            return {
+                plugins: [],
+                filterText: q,
+                placeHolderText: 'Loading...'
+            }
+        } else {
+            return {
+                plugins: [],
+                filterText: '',
+                placeHolderText: 'Loading...'
+            };
+        }
     },
     handleUserInput: function(filterText) {
         this.setState({
@@ -424,7 +158,8 @@ var App = React.createClass({
                 if(q) {
                     this.setState({
                         plugins: plugins,
-                        filterText: q
+                        filterText: q,
+                        placeHolderText: 'Search ' + pluginCount + ' plugins...'
                     });
                 }
                 else {
@@ -452,7 +187,7 @@ var App = React.createClass({
                         </div>
                     </div>
                     <SearchBar
-                        filterText={this.state.filterText}
+                        initialValue={this.state.filterText}
                         placeHolderText={this.state.placeHolderText}
                         onUserInput={this.handleUserInput}
                     />
@@ -489,5 +224,4 @@ function xhrRequest(url, success, fail) {
     xhr.send();
 }
 
-
 module.exports = window.App = App;

http://git-wip-us.apache.org/repos/asf/cordova-registry-web/blob/b0262448/npm-search/src/js/platformbutton.jsx
----------------------------------------------------------------------
diff --git a/npm-search/src/js/platformbutton.jsx b/npm-search/src/js/platformbutton.jsx
new file mode 100644
index 0000000..66b007b
--- /dev/null
+++ b/npm-search/src/js/platformbutton.jsx
@@ -0,0 +1,15 @@
+var React = require('react');
+
+var PlatformButton = React.createClass({
+    onClick: function() {
+        var appInstance = React.render(<App />, document.getElementById('container'));
+        appInstance.addCondition("platform:" + this.props.platform);
+    },
+    render: function() {
+        return (
+            <li className = "clickable" onClick={this.onClick}> {this.props.platform}
</li>
+        );
+    }
+});
+
+module.exports = PlatformButton;

http://git-wip-us.apache.org/repos/asf/cordova-registry-web/blob/b0262448/npm-search/src/js/plugin.jsx
----------------------------------------------------------------------
diff --git a/npm-search/src/js/plugin.jsx b/npm-search/src/js/plugin.jsx
new file mode 100644
index 0000000..0f270f1
--- /dev/null
+++ b/npm-search/src/js/plugin.jsx
@@ -0,0 +1,55 @@
+var React = require('react'),
+    SupportedPlatforms = require('./supportedplatforms.jsx'),
+    classNames      = require('classnames');
+
+var Plugin = React.createClass({
+    shouldComponentUpdate: function(nextProps, nextState) {
+        return this.props.plugin !== nextProps.plugin;
+    },
+    render: function() {
+        var license = this.props.plugin.license;
+        if (license && license.length > 1) {
+            license = license[0];
+        }
+        var downloadField;
+
+        var classes = classNames({
+            'pluginCard': true,
+            'featuredPlugin': this.props.plugin.isOfficial,
+            'row': true
+        });
+
+        if(this.props.plugin.downloadCount) {
+            var downloadCount = this.props.plugin.downloadCount.toLocaleString();
+            downloadField = <p><small> {downloadCount} downloads last month</small></p>;
+        }
+        return (
+            <li>
+                <div className={classes}>
+                    <div className="primaryContent col-xs-9">
+                        <div className="header">
+                            <h3><a href={'https://www.npmjs.com/package/' + this.props.plugin.name}
target="_blank">{this.props.plugin.name}</a></h3>
+                            <small className="pluginVersion">v{this.props.plugin.version}</small>
+                            <small> by </small>
+                            <small className="pluginAuthor">{this.props.plugin.author}</small>
+                        </div>
+                        <div className="pluginDesc">{this.props.plugin.description}</div>
+                        <SupportedPlatforms keywords={this.props.plugin.keywords}/>
+                        </div>
+                        <div className="secondaryContent col-xs-3">
+                        <div className="download">
+                            <p></p>
+                        </div>
+                        <div className="extraInfo">
+                            <p><small><strong>License:</strong> {license}</small></p>
+                            {downloadField}
+                            <p><small><em>Last updated {this.props.plugin.modified}
days ago</em></small></p>
+                        </div>
+                    </div>
+                </div>
+            </li>
+        )
+    }
+});
+
+module.exports = Plugin;

http://git-wip-us.apache.org/repos/asf/cordova-registry-web/blob/b0262448/npm-search/src/js/pluginlist.jsx
----------------------------------------------------------------------
diff --git a/npm-search/src/js/pluginlist.jsx b/npm-search/src/js/pluginlist.jsx
new file mode 100644
index 0000000..bc25ce8
--- /dev/null
+++ b/npm-search/src/js/pluginlist.jsx
@@ -0,0 +1,105 @@
+var React = require('react'),
+    Plugin = require('./plugin.jsx');
+
+var timer=null;
+
+var PluginList = React.createClass({
+    statics: {
+        contains: function(values, pluginInfo) {
+            var allValuesPresent = true;
+            if(values.length == 0) {
+                return allValuesPresent;
+            }
+            if(!pluginInfo) {
+                return false;
+            }
+            values.forEach(function(value) {
+                var valuePresent = false;
+                for(var index=0; index < pluginInfo.length; index++) {
+                    if(pluginInfo[index] && pluginInfo[index].toLowerCase().indexOf(value)
> -1) {
+                        valuePresent = true;
+                    }
+                }
+                if(!valuePresent) {
+                    allValuesPresent = false;
+                }
+            });
+            return allValuesPresent;
+        },
+        populateFilters: function(filterText)
+        {
+            var searchStrings = filterText.split(" ");
+            var filters = [];
+            filters['platforms'] = [];
+            filters['authors'] = [];
+            filters['licenses'] = [];
+            filters['searchWords'] = [];
+
+            searchStrings.forEach(function(searchString) {
+                var keywords = searchString.split(":");
+                if(keywords.length == 1) {
+                    var param = keywords[0].trim();
+                    if(param) {
+                        filters['searchWords'].push(param);
+                    }
+                }
+                else if(keywords[1].trim()) {
+                    var param = keywords[1].trim();
+                    switch(keywords[0]) {
+                        case 'platform':
+                            filters['platforms'].push(param);
+                            break;
+                        case 'author':
+                            filters['authors'].push(param);
+                            break;
+                        case 'license':
+                            filters['licenses'].push(param);
+                            break;
+                        default:
+                            filters['searchWords'].push(searchString);
+                    }
+                }
+                else {
+                    filters['searchWords'].push(searchString);
+                }
+            });
+            return filters;
+        }
+    },
+    render: function() {
+        var plugins = [],
+            filterText = this.props.filterText.toLowerCase();
+
+        var delay = (function(){
+          return function(callback, ms){
+            clearTimeout (timer);
+            timer = setTimeout(callback, ms);
+          };
+        })();
+
+        delay(function(){
+                    window.history.pushState({"filterText":filterText}, "", "?q=" + filterText);
+            }, 2000 );
+
+        var filters = PluginList.populateFilters(filterText);
+
+        this.props.plugins.forEach(function(plugin) {
+            var fullPluginText = plugin.name.concat(plugin.author, plugin.keywords, plugin.license,
plugin.description);
+            if(PluginList.contains(filters['platforms'], plugin.keywords)
+                && PluginList.contains(filters['authors'], plugin.author)
+                && PluginList.contains(filters['licenses'], plugin.license)
+                && PluginList.contains(filters['searchWords'], fullPluginText)) {
+                    plugins.push(<Plugin plugin={plugin} key={plugin.author + plugin.name}/>);
+            }
+        }.bind(this));
+        return (
+            <div className="col-xs-offset-2 col-xs-8">
+                <ul className="pluginList">
+                    {plugins}
+                </ul>
+            </div>
+        );
+    }
+});
+
+module.exports = PluginList;

http://git-wip-us.apache.org/repos/asf/cordova-registry-web/blob/b0262448/npm-search/src/js/searchbar.jsx
----------------------------------------------------------------------
diff --git a/npm-search/src/js/searchbar.jsx b/npm-search/src/js/searchbar.jsx
new file mode 100644
index 0000000..2604db9
--- /dev/null
+++ b/npm-search/src/js/searchbar.jsx
@@ -0,0 +1,59 @@
+var Bacon = require('baconjs').Bacon;
+
+var SearchBar = React.createClass({
+    propTypes: {
+        initialValue: React.PropTypes.string.isRequired,
+        placeHolderText: React.PropTypes.string.isRequired,
+        onUserInput: React.PropTypes.func.isRequired
+    },
+
+    getInitialState: function() {
+        return { textValue: this.props.initialValue }
+    },
+
+    handleChange: function(event) {
+        this.setState({ textValue: event.target.value });
+    },
+
+    componentDidMount: function() {
+        var self = this,
+            delay = 200, // in ms
+            inputElem = React.findDOMNode(this.refs.filterTextInput);
+
+        // Convert keydown events to stream
+        var text = Bacon.fromEvent(inputElem, 'keydown')
+            .debounce(delay)
+            .map(function(event) {
+                return event.target.value;
+            })
+            .skipDuplicates();
+
+        var textObservable = text.flatMapLatest(function(query) {
+            return Bacon.once(query);
+        });
+
+        textObservable.onValue(function(val) {
+            self.props.onUserInput(val);
+        });
+    },
+
+    render: function() {
+        return (
+            <div className="col-xs-offset-2 col-xs-8">
+                <div id="searchwrapper">
+                    <input
+                        className="searchBox"
+                        type="search"
+                        autoComplete="off"
+                        placeholder={this.props.placeHolderText}
+                        value={this.state.textValue}
+                        onChange={this.handleChange}
+                        ref="filterTextInput"
+                    />
+                </div>
+            </div>
+        );
+    }
+});
+
+module.exports = SearchBar;

http://git-wip-us.apache.org/repos/asf/cordova-registry-web/blob/b0262448/npm-search/src/js/supportedplatforms.jsx
----------------------------------------------------------------------
diff --git a/npm-search/src/js/supportedplatforms.jsx b/npm-search/src/js/supportedplatforms.jsx
new file mode 100644
index 0000000..f6de778
--- /dev/null
+++ b/npm-search/src/js/supportedplatforms.jsx
@@ -0,0 +1,83 @@
+var React = require('react'),
+    PlatformButton = require('./platformbutton.jsx')
+
+var SupportedPlatforms = React.createClass({
+    getInitialState: function() {
+        return {
+            moreClicked: false
+        };
+    },
+    onClick: function() {
+        this.setState({
+            moreClicked: true
+        });
+    },
+    render: function() {
+        var keywords = this.props.keywords;
+        var sortedMajorPlatforms = [{present:false, text: "Android"}, {present:false, text:
"iOS"}, {present:false, text: "Windows"}, {present:false, text: "Blackberry10"}];
+        var majorPlatformsSupported = [];
+        var otherPlatformsSupported = [];
+        // remove windows8 & windows dupe
+        if (keywords.indexOf('cordova-windows') > -1 && keywords.indexOf('cordova-windows8')
> -1) {
+            keywords.splice(keywords.indexOf('cordova-windows8'), 1);
+        }
+        keywords.forEach(function(keyword) {
+            switch (keyword) {
+                case 'cordova-firefoxos':
+                    otherPlatformsSupported.push(<PlatformButton platform="FirefoxOS"
/>);
+                    break;
+                case 'cordova-android':
+                    sortedMajorPlatforms[0].present = true;
+                    break;
+                case 'cordova-amazon-fireos':
+                    otherPlatformsSupported.push(<PlatformButton platform="FireOS" />);
+                    break;
+                case 'cordova-ubuntu':
+                    otherPlatformsSupported.push(<PlatformButton platform="Ubuntu" />);
+                    break;
+                case 'cordova-ios':
+                    sortedMajorPlatforms[1].present = true;
+                    break;
+                case 'cordova-blackberry10':
+                    sortedMajorPlatforms[3].present = true;
+                    break;
+                case 'cordova-wp8':
+                    otherPlatformsSupported.push(<PlatformButton platform="Windows Phone
8" />);
+                    break;
+                case 'cordova-windows8':
+                case 'cordova-windows':
+                    sortedMajorPlatforms[2].present = true;
+                    break;
+                case 'cordova-browser':
+                    otherPlatformsSupported.push(<PlatformButton platform="Browser" />);
+                    break;
+            }
+        });
+
+        sortedMajorPlatforms.forEach(function(platform) {
+            if(platform.present) {
+                majorPlatformsSupported.push(<PlatformButton platform={platform.text}
/>)
+            }
+        });
+        while(majorPlatformsSupported.length < 4 && otherPlatformsSupported.length
> 0) {
+            majorPlatformsSupported.push(otherPlatformsSupported.shift());
+        }
+
+        var moreButton;
+        if(otherPlatformsSupported.length > 0 && !this.state.moreClicked) {
+            moreButton = <li className="clickable" onClick={this.onClick}>...</li>
+        }
+        if (!this.state.moreClicked) {
+            otherPlatformsSupported = null;
+        }
+        return (
+            <ul className="supportedPlatforms">
+                {majorPlatformsSupported}
+                {moreButton}
+                {otherPlatformsSupported}
+            </ul>
+        );
+    }
+});
+
+module.exports = SupportedPlatforms;


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@cordova.apache.org
For additional commands, e-mail: commits-help@cordova.apache.org


Mime
View raw message