cordova-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From dblot...@apache.org
Subject [1/3] docs commit: Applying Richard's changes.
Date Fri, 21 Aug 2015 22:55:18 GMT
Repository: cordova-docs
Updated Branches:
  refs/heads/cordova-website 2c078dcff -> 786c1ab71


Applying Richard's changes.


Project: http://git-wip-us.apache.org/repos/asf/cordova-docs/repo
Commit: http://git-wip-us.apache.org/repos/asf/cordova-docs/commit/89d07741
Tree: http://git-wip-us.apache.org/repos/asf/cordova-docs/tree/89d07741
Diff: http://git-wip-us.apache.org/repos/asf/cordova-docs/diff/89d07741

Branch: refs/heads/cordova-website
Commit: 89d077412fa1f1e10c668c384ec090c1f946c531
Parents: 2b08a73
Author: Dmitry Blotsky <dmitry.blotsky@gmail.com>
Authored: Fri Aug 21 14:50:04 2015 -0700
Committer: Dmitry Blotsky <dmitry.blotsky@gmail.com>
Committed: Fri Aug 21 14:51:41 2015 -0700

----------------------------------------------------------------------
 www/static/css-src/_plugins.scss            |  13 +-
 www/static/plugins/app.js                   | 222 ++++++++++++++++++-----
 www/static/plugins/blacklisted-plugins.json |   2 +-
 www/static/plugins/official-plugins.json    |   2 +-
 www/static/plugins/platformbutton.jsx       |  32 +++-
 www/static/plugins/plugin.jsx               |  73 +++++---
 www/static/plugins/pluginlist.jsx           |  16 +-
 www/static/plugins/searchbar.jsx            |  15 +-
 www/static/plugins/sortbutton.jsx           |  15 ++
 www/static/plugins/sortdropdown.jsx         |  22 +++
 www/static/plugins/supportedplatforms.jsx   |  24 ++-
 11 files changed, 332 insertions(+), 104 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/89d07741/www/static/css-src/_plugins.scss
----------------------------------------------------------------------
diff --git a/www/static/css-src/_plugins.scss b/www/static/css-src/_plugins.scss
index afeb4e6..06a8d29 100644
--- a/www/static/css-src/_plugins.scss
+++ b/www/static/css-src/_plugins.scss
@@ -10,9 +10,9 @@ button.btn {
 
 	img {
 		float:left;
-		    padding-right: 20px;
+			padding-right: 20px;
 			padding-bottom: 20px;
-		    width: 84px;
+			width: 84px;
 	}
 }
 .plugins_links {
@@ -69,8 +69,8 @@ button.btn {
 }
 
 /***
-****	Plugins Results	
-****	
+****	Plugins Results
+****
 */
 
 .plugins-results-container {
@@ -81,6 +81,11 @@ button.btn {
 	margin-bottom:20px;
 	background-color:$gray-5;
 	position: relative;
+	.plugin-npm-command {
+		width:0px;
+		height:0px;
+		overflow:hidden;
+	}
 }
 .version_and_author {
 	display: inline-block;

http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/89d07741/www/static/plugins/app.js
----------------------------------------------------------------------
diff --git a/www/static/plugins/app.js b/www/static/plugins/app.js
old mode 100644
new mode 100755
index 3264567..5948833
--- a/www/static/plugins/app.js
+++ b/www/static/plugins/app.js
@@ -1,7 +1,9 @@
 var React           = window.React = require('react'), // assign it to window for react chrome
extension
     SearchBar       = require('./searchbar.jsx'),
     PluginList      = require('./pluginlist.jsx'),
-    App             = {};
+    PlatformButton  = require('./platformbutton.jsx')
+    App             = {},
+    SortDropdown = require('./sortdropdown.jsx');
 
 var timer = null;
 var Constants = {
@@ -18,49 +20,72 @@ window.addEventListener('popstate', function(e) {
 
 var App = React.createClass({
     getInitialState: function() {
+        var staticFilters = [];
+        staticFilters['platforms'] = [];
+        staticFilters['authors'] = [];
+        staticFilters['licenses'] = [];
+        var platforms = App.getURLParameter('platforms');
+        if(platforms) {
+            staticFilters['platforms'] = staticFilters['platforms'].concat(platforms.split(','));
+        }
         var q = App.getURLParameter('q');
         if (q) {
             return {
                 plugins: [],
                 filterText: q,
                 placeHolderText: 'Loading...',
-                searchResults: []
-            }
+                searchResults: [],
+                staticFilters: staticFilters
+            };
         } else {
             return {
                 plugins: [],
                 filterText: '',
                 placeHolderText: 'Loading...',
-                searchResults: []
+                searchResults: [],
+                staticFilters: staticFilters
             };
         }
     },
     handleUserInput: function(filterText) {
         /* Routing logic */
-        var filterTextLowerCase = filterText.toLowerCase();
+        var platformFilters = this.state.staticFilters["platforms"];
         delay(function(){
-            window.history.pushState({"filterText":filterTextLowerCase}, "", "?q=" + filterTextLowerCase);
-            ga('send', 'pageview', '/index.html?q=' + filterTextLowerCase);
+            App.updateURL(filterText, platformFilters);
         }, 2000 );
 
         this.setState({
             filterText: filterText,
-            searchResults: App.filterPlugins(this.state.plugins, filterText)
+            searchResults: App.filterPlugins(this.state.plugins, filterText, this.state.staticFilters)
         });
     },
-    addCondition: function(condition) {
+    toggleCondition: function(keyword, condition) {
         this.setState(function(previousState, currentProps) {
-            if(previousState.filterText.indexOf(condition) > -1) {
-                return {
-                    filterText: previousState.filterText,
-                    plugins: previousState.plugins
-                };
+            var conditionIndex = previousState.staticFilters[keyword].indexOf(condition);
+            if(conditionIndex > -1) {
+                previousState.staticFilters[keyword].splice(conditionIndex, 1);
             }
             else {
-                return {
-                    filterText: previousState.filterText.trim() + ' ' + condition + ' ',
-                    plugins: previousState.plugins
-                };
+                previousState.staticFilters[keyword].push(condition);
+            }
+
+            delay(function(){
+                App.updateURL(previousState.filterText, previousState.staticFilters['platforms']);
+            }, 2000 );
+
+            return {
+                staticFilters: previousState.staticFilters,
+                plugins: previousState.plugins,
+                searchResults: App.filterPlugins(previousState.plugins, this.state.filterText,
this.state.staticFilters)
+            };
+        });
+    },
+    setSort: function(sort) {
+        this.setState(function(previousState, currentProps) {
+            App.sortPlugins(previousState.plugins, sort)
+            return {
+                plugins: previousState.plugins,
+                searchResults: App.filterPlugins(previousState.plugins, this.state.filterText,
this.state.staticFilters)
             }
         });
     },
@@ -89,7 +114,7 @@ var App = React.createClass({
         tagOfficialPlugins: function() {
 
         },
-        filterPlugins: function(plugins, filter) {
+        filterPlugins: function(plugins, filter, staticFilters) {
             var contains = function(values, pluginInfo) {
                 var allValuesPresent = true;
                 if(values.length == 0) {
@@ -151,18 +176,96 @@ var App = React.createClass({
             }
             var results = [];
             var filters = populateFilters(filter);
+
+            var combine = function(filter1, filter2) {
+                var result = [].concat(filter1)
+                for(var i = 0; i < filter2.length; i++) {
+                    if(result.indexOf(filter2[i]) === -1) {
+                        result.push(filter2[i])
+                    }
+                }
+                return result;
+            }
+
             for (var i = 0; i < plugins.length; i++) {
                 var plugin = plugins[i];
                 var fullPluginText = plugin.name.concat(plugin.author, plugin.keywords, plugin.license,
plugin.description);
-                if(contains(filters['platforms'], plugin.keywords)
-                    && contains(filters['authors'], plugin.author)
-                    && contains(filters['licenses'], plugin.license)
+
+                if(contains(combine(filters['platforms'], staticFilters['platforms']), plugin.keywords)
+                    && contains(combine(filters['authors'], staticFilters['authors']),
plugin.author)
+                    && contains(combine(filters['licenses'], staticFilters['licenses']),
plugin.license)
                     && contains(filters['searchWords'], fullPluginText)) {
                         results.push(plugin);
                 }
             };
             return results;
-        }
+        },
+        sortPlugins: function(plugins, criteria) {
+            // Search results should be deterministic, so we need a secondary
+            // sort function for cases where the plugins are equal
+            var compareName = function(p1, p2) {
+                if(p1.name === p2.name) {
+                    return 0;
+                } else if(p1.name > p2.name) {
+                    return 1;
+                } else {
+                    return -1;
+                }
+            }
+            switch(criteria) {
+                case 'Downloads':
+                    plugins.sort(function(p1, p2) {
+                        if(p2.downloadCount === p1.downloadCount) {
+                            return compareName(p1, p2);
+                        };
+                        return p2.downloadCount - p1.downloadCount;
+                    });
+                    break;
+                case 'Recently Updated':
+                    plugins.sort(function(p1, p2) {
+                        if(p2.modified === p1.modified) {
+                            return compareName(p1, p2);
+                        };
+                        return p1.modified - p2.modified;
+                    });
+                    break;
+                case 'Quality':
+                default:
+                    plugins.sort(function(p1, p2) {
+                        if(p2.rating === p1.rating) {
+                            return compareName(p1, p2);
+                        };
+                        return p2.rating - p1.rating;
+                    });
+                    break;
+            }
+            return plugins;
+        },
+        updateURL: function(filterText, platformFilters) {
+            var query = "";
+            var stateObj = {};
+            if(filterText) {
+                var filterTextLowerCase = filterText;
+                query = "?q=" + filterTextLowerCase;
+                stateObj.filterText = filterTextLowerCase;
+            }
+
+            if(platformFilters.length > 0) {
+                if(!query) {
+                    query = "?platforms=";
+                } else {
+                    query = query + "&platforms=";
+                }
+                platformFilters.forEach(function(platform) {
+                    query = query + platform + ",";
+                });
+                query = query.slice(0, query.length - 1);
+                stateObj.platforms = platformFilters;
+            }
+
+            window.history.pushState(stateObj, "", query);
+            ga('send', 'pageview', '/index.html' + query);
+        },
     },
     componentDidMount: function() {
         var plugins = [],
@@ -171,17 +274,17 @@ var App = React.createClass({
             pluginCount = 0,
             self = this,
             queryHost = "http://npmsearch.com/query",
-            queryFields = "fields=name,keywords,license,description,author,modified,homepage,version",
+            queryFields = "fields=name,keywords,license,description,author,modified,homepage,version,rating",
             queryKeywords = "q=keywords:%22ecosystem:cordova%22",
             queryInitialSize = Constants.NpmSearchInitialSize;
 
-        xhrRequest(queryHost + "?" + queryFields + "&" + queryKeywords + "&size="
+ queryInitialSize + "&start=0&sort=rating:desc", function(xhrResult) {
+        xhrRequest(queryHost + "?" + queryFields + "&" + queryKeywords + "&size="
+ queryInitialSize + "&start=0", function(xhrResult) {
             plugins = xhrResult.results;
             pluginCount = xhrResult.total;
             if (pluginCount <= queryInitialSize) {
                 processPlugins.bind(self, officialPlugins, plugins)();
             } else {
-                xhrRequest(queryHost + "?" + queryFields + "&" + queryKeywords + "&size="
+ (pluginCount - queryInitialSize) + "&start=" + queryInitialSize + "&sort=rating:desc",
function(xhrResult) {
+                xhrRequest(queryHost + "?" + queryFields + "&" + queryKeywords + "&size="
+ (pluginCount - queryInitialSize) + "&start=" + queryInitialSize, function(xhrResult)
{
                         plugins = [].concat(plugins, xhrResult.results);
                         processPlugins.bind(self, officialPlugins, plugins)();
                 }, function() { console.log('xhr err'); });
@@ -201,17 +304,9 @@ var App = React.createClass({
                             }
                         }
 
-                        // If we were unable to do server side sorting because
-                        // we requested in multiple batches, do it in the client
-                        if(plugins.length > Constants.NpmSearchInitialSize) {
-                            plugins.sort(function(p1, p2) {
-                                return p2.downloadCount - p1.downloadCount;
-                            });
-                        }
-
                         that.setState({
                             plugins: plugins,
-                            searchResults: App.filterPlugins(plugins, this.state.filterText)
+                            searchResults: App.filterPlugins(plugins, this.state.filterText,
this.state.staticFilters)
                         });
                     }.bind(self), function() { console.log('xhr err'); });
                     packageNames = "";
@@ -251,6 +346,9 @@ var App = React.createClass({
                 plugins[i].modified = Math.ceil((dateNow - new Date(plugins[i].modified))
/ oneDay);
             };
 
+            // Initial sort is always on quality
+            plugins = App.sortPlugins(plugins, 'Quality');
+
             if (this.isMounted()) {
                 var q = App.getURLParameter('q');
                 if(q) {
@@ -258,14 +356,14 @@ var App = React.createClass({
                         plugins: plugins,
                         filterText: q,
                         placeHolderText: 'Search ' + pluginCount + ' plugins...',
-                        searchResults: App.filterPlugins(plugins, q)
+                        searchResults: App.filterPlugins(plugins, q, this.state.staticFilters)
                     });
                 }
                 else {
                     this.setState({
                         plugins: plugins,
                         placeHolderText: 'Search ' + pluginCount + ' plugins...',
-                        searchResults: plugins
+                        searchResults: App.filterPlugins(plugins, '', this.state.staticFilters)
                     });
                 }
                 getDownloadCount(plugins,this);
@@ -273,18 +371,50 @@ var App = React.createClass({
         }
     },
     render: function() {
+        var createPlatformButton = function(platform, keyword, state) {
+            var active = state.staticFilters["platforms"].indexOf(keyword) > -1;
+            return (
+                <PlatformButton platform={platform} keyword={keyword} initiallyActive={active}/>
+            );
+        }
         return (
             <div>
-                <div id="headblock">
-                    <div id="topcontent">
-                        <div id="pluggy"></div>
-                        <div id="discovermessage"><h1>Search Cordova Plugins</h1></div>
+                <div className="container">
+                    <div className="row">
+                        <div className="col-sm-12 text-center">
+                            <h1>Cordova Plugins</h1>
+                        </div>
+                    </div>
+                    <div className="row">
+                        <div className="col-sm-12">
+                        <SearchBar
+                            initialValue={this.state.filterText}
+                            placeHolderText={this.state.placeHolderText}
+                            onUserInput={this.handleUserInput}
+                        />
+                            <div className="plugins_links">
+                                    <ul className="nav nav-justified">
+                                    <li><a href="#"><span className="glyphicon
glyphicon-plus"></span><i>&nbsp;</i>Contribute Plugins</a></li>
+                                    <li><a href="#"><span className="glyphicon
glyphicon-question-sign"></span><i>&nbsp;</i>Plugin Help</a></li>
+                                    <li><a href="#"><span className="glyphicon
glyphicon-alert"></span><i>&nbsp;</i>Plugin Issue Tracker</a></li>
+                                    </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="row filter-by-platforms">
+                        <div className="filter-by-platform-label"><span>Platform:</span></div>
+                        <ul className="nav nav-pills filter-by-platform-filters">
+                            {createPlatformButton("Android", "cordova-android", this.state)}
+                            {createPlatformButton("iOS", "cordova-ios", this.state)}
+                            {createPlatformButton("Windows 10", "cordova-windows", this.state)}
+                            {createPlatformButton("Blackberry", "cordova-blackberry10", this.state)}
+                            {createPlatformButton("Ubuntu", "cordova-ubuntu", this.state)}
+                            {createPlatformButton("Firefox OS", "cordova-firefoxos", this.state)}
+                            {createPlatformButton("WebOS", "cordova-webos", this.state)}
+                            {createPlatformButton("Fire OS", "cordova-amazon-fireos", this.state)}
+                            {createPlatformButton("Browser", "cordova-browser", this.state)}
+                        </ul>
                     </div>
-                    <SearchBar
-                        initialValue={this.state.filterText}
-                        placeHolderText={this.state.placeHolderText}
-                        onUserInput={this.handleUserInput}
-                    />
                 </div>
                 <PluginList plugins={this.state.searchResults} />
             </div>

http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/89d07741/www/static/plugins/blacklisted-plugins.json
----------------------------------------------------------------------
diff --git a/www/static/plugins/blacklisted-plugins.json b/www/static/plugins/blacklisted-plugins.json
old mode 100644
new mode 100755
index 946e82e..4836042
--- a/www/static/plugins/blacklisted-plugins.json
+++ b/www/static/plugins/blacklisted-plugins.json
@@ -5,4 +5,4 @@
         "cordova-app-hello-world",
         "delete-this"
     ]
-}
\ No newline at end of file
+}

http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/89d07741/www/static/plugins/official-plugins.json
----------------------------------------------------------------------
diff --git a/www/static/plugins/official-plugins.json b/www/static/plugins/official-plugins.json
old mode 100644
new mode 100755
index d220cfb..567ef1a
--- a/www/static/plugins/official-plugins.json
+++ b/www/static/plugins/official-plugins.json
@@ -23,4 +23,4 @@
         "cordova-plugin-vibration",
         "cordova-plugin-whitelist"
     ]
-}
\ No newline at end of file
+}

http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/89d07741/www/static/plugins/platformbutton.jsx
----------------------------------------------------------------------
diff --git a/www/static/plugins/platformbutton.jsx b/www/static/plugins/platformbutton.jsx
old mode 100644
new mode 100755
index 66b007b..0002284
--- a/www/static/plugins/platformbutton.jsx
+++ b/www/static/plugins/platformbutton.jsx
@@ -1,14 +1,38 @@
 var React = require('react');
 
 var PlatformButton = React.createClass({
+    getInitialState: function() {
+        return {
+            isActive: this.props.initiallyActive
+        };
+    },
     onClick: function() {
         var appInstance = React.render(<App />, document.getElementById('container'));
-        appInstance.addCondition("platform:" + this.props.platform);
+        appInstance.toggleCondition('platforms', this.props.keyword);
+        this.setState(function(prevState, currentProps) {
+            return {
+                isActive: !prevState.isActive
+            };
+        });
     },
     render: function() {
-        return (
-            <li className = "clickable" onClick={this.onClick}> {this.props.platform}
</li>
-        );
+        if(this.state.isActive) {
+            return (
+                <li role="presentation" className="active" onClick={this.onClick}>
+                    <a href="#">
+                        <span className="glyphicon glyphicon-ok"></span><i>&nbsp;</i>{this.props.platform}
+                    </a>
+                </li>
+            );
+        } else {
+            return (
+                <li role="presentation" onClick={this.onClick}>
+                    <a href="#">
+                        {this.props.platform}
+                    </a>
+                </li>
+            );
+        }
     }
 });
 

http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/89d07741/www/static/plugins/plugin.jsx
----------------------------------------------------------------------
diff --git a/www/static/plugins/plugin.jsx b/www/static/plugins/plugin.jsx
old mode 100644
new mode 100755
index 0c5cb2f..7f7ae4b
--- a/www/static/plugins/plugin.jsx
+++ b/www/static/plugins/plugin.jsx
@@ -6,18 +6,38 @@ var Plugin = React.createClass({
     shouldComponentUpdate: function(nextProps, nextState) {
         return this.props.plugin !== nextProps.plugin;
     },
+    copyText: function() {
+        var range = document.createRange();
+        range.selectNode(document.getElementById("command-" + this.props.plugin.name));
+
+        var select = window.getSelection();
+        select.addRange(range);
+        try {
+            document.execCommand("copy");
+        } catch(error) {
+
+        }
+        select.removeAllRanges();
+    },
     render: function() {
         if(!this.props.plugin) {
             // Empty card with loading wheel
             return (
-                <li>
-                    <div className="pluginCard">
-                        <div style={{ textAlign: 'center', height: 10 + "rem"}}>
-                            <span style={{ display: 'inline-block', height: 100 + "%",
verticalAlign: 'middle'}} />
-                            <img style={{verticalAlign: 'middle'}} src="img/loading.gif"
/>
+                // <li>
+                //     <div className="pluginCard">
+                //         <div style={{ textAlign: 'center', height: 10 + "rem"}}>
+                //             <span style={{ display: 'inline-block', height: 100 + "%",
verticalAlign: 'middle'}} />
+                //             <img style={{verticalAlign: 'middle'}} src="img/loading.gif"
/>
+                //         </div>
+                //     </div>
+                // </li>
+                <div className="container plugin-results-result">
+                    <div className="row">
+                        <div className="col-sm-9">
+                            <h2>Loading...</h2>
                         </div>
                     </div>
-                </li>
+                </div>
             )
         }
 
@@ -26,6 +46,7 @@ var Plugin = React.createClass({
             license = license[0];
         }
         var downloadField;
+        var copyIcon;
         var npmLink = 'https://www.npmjs.com/package/' + this.props.plugin.name;
 
         var classes = classNames({
@@ -38,28 +59,32 @@ var Plugin = React.createClass({
             downloadField = <p><small> {downloadCount} downloads last month</small></p>;
         }
 
+        if(document.queryCommandSupported("copy")) {
+            copyIcon = (<img src="/static/img/copy-clipboard-icon.svg" className="plugins-copy-to-clipboard"
onClick={this.copyText}/>)
+        }
+
         return (
-            <li>
-                <div className={classes}>
-                    <div className="primaryContent">
-                        <div className="header">
-                            <h3><a href={npmLink} onClick={trackOutboundLink.bind(this,
npmLink)} 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>
+            <div className="container plugin-results-result">
+                {copyIcon}
+                <div className="row">
+                    <div className="col-sm-9">
+                        <h2><a href={npmLink} onClick={trackOutboundLink.bind(this,
npmLink)} target="_blank">{this.props.plugin.name}</a></h2>
+                        <p className="version_and_author">v{this.props.plugin.version}
by <strong>{this.props.plugin.author}</strong></p>
                     </div>
-                    <div className="secondaryContent">
-                        <SupportedPlatforms keywords={this.props.plugin.keywords}/>
-                        <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 className="row">
+                    <div className="col-sm-8">
+                        <p>{this.props.plugin.description}</p>
+                    </div>
+                    <div className="col-sm-3 col-sm-offset-1">
+                        <hr className="visible-xs results-divider-line"/>
+                        <p className="license">{license}</p>
+                        <p className="downloads"><strong>{downloadCount}</strong>
downloads last month</p>
+                        <p className="last-updated">Last updated <strong>{this.props.plugin.modified}
days ago</strong></p>
                     </div>
+                    <div className="plugin-npm-command" id={"command-" + this.props.plugin.name}>{"npm
install " + this.props.plugin.name}</div>
                 </div>
-            </li>
+            </div>
         )
     }
 });

http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/89d07741/www/static/plugins/pluginlist.jsx
----------------------------------------------------------------------
diff --git a/www/static/plugins/pluginlist.jsx b/www/static/plugins/pluginlist.jsx
old mode 100644
new mode 100755
index 0868979..4d83a09
--- a/www/static/plugins/pluginlist.jsx
+++ b/www/static/plugins/pluginlist.jsx
@@ -30,10 +30,8 @@ var PluginList = React.createClass({
             };
 
             return (
-                <div className="contentwrap">
-                    <ul className="pluginList">
-                        {emptyPluginList}
-                    </ul>
+                <div className="container plugins-results-container">
+                    {emptyPluginList}
                 </div>
             )
         } else {
@@ -52,10 +50,8 @@ var PluginList = React.createClass({
 
             if (plugins.length === 0) {
                 return (
-                    <div className="contentwrap">
-                        <div className="pluginEmptyMessage">
+                    <div className="container plugins-results-container">
                             No plugins found. Learn how to <a href="http://cordova.apache.org/docs/en/edge/guide_hybrid_plugins_index.md.html#Plugin%20Development%20Guide">create
one</a>
-                        </div>
                     </div>
                 );
             } else {
@@ -67,10 +63,8 @@ var PluginList = React.createClass({
                     }
                 };
                 return (
-                    <div className="contentwrap">
-                        <ul className="pluginList">
-                            {visiblePlugins}
-                        </ul>
+                    <div className="container plugins-results-container">
+                        {visiblePlugins}
                         {showMore}
                     </div>
                 );

http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/89d07741/www/static/plugins/searchbar.jsx
----------------------------------------------------------------------
diff --git a/www/static/plugins/searchbar.jsx b/www/static/plugins/searchbar.jsx
old mode 100644
new mode 100755
index 75a4569..16e33ad
--- a/www/static/plugins/searchbar.jsx
+++ b/www/static/plugins/searchbar.jsx
@@ -39,17 +39,20 @@ var SearchBar = React.createClass({
 
     render: function() {
         return (
-                <div className="contentwrap">
-                    <div id="search">
+                <div className="plugins_search_container">
+                    <div className="input-group">
                         <input
-                            className="searchBox"
-                            type="search"
+                            className="form-control"
+                            type="text"
                             autoComplete="off"
-                            placeholder={this.props.placeHolderText}
+                            placeholder="Find a Plugin..."
                             value={this.state.textValue}
                             onChange={this.handleChange}
                             ref="filterTextInput"
-                        />
+                            />
+                        <span className="input-group-btn">
+                            <button className="btn btn-default" type="button"><span
className="glyphicon glyphicon-search"></span></button>
+                        </span>
                     </div>
                 </div>
         );

http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/89d07741/www/static/plugins/sortbutton.jsx
----------------------------------------------------------------------
diff --git a/www/static/plugins/sortbutton.jsx b/www/static/plugins/sortbutton.jsx
new file mode 100755
index 0000000..e9d321d
--- /dev/null
+++ b/www/static/plugins/sortbutton.jsx
@@ -0,0 +1,15 @@
+var React = require('react');
+
+var SortButton = React.createClass({
+    onClick: function() {
+        var appInstance = React.render(<App />, document.getElementById('container'));
+        appInstance.setSort(this.props.criteria);
+    },
+    render: function() {
+        return (
+            <li className="clickable" onClick={this.onClick}><a>{this.props.criteria}</a></li>
+        );
+    }
+});
+
+module.exports = SortButton;

http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/89d07741/www/static/plugins/sortdropdown.jsx
----------------------------------------------------------------------
diff --git a/www/static/plugins/sortdropdown.jsx b/www/static/plugins/sortdropdown.jsx
new file mode 100755
index 0000000..511c657
--- /dev/null
+++ b/www/static/plugins/sortdropdown.jsx
@@ -0,0 +1,22 @@
+var React = require('react');
+var SortButton = require('./sortbutton.jsx');
+
+var SortDropdown = React.createClass({
+    render: function() {
+        return (
+            <div className="dropdown">
+                <button className="btn btn-default dropdown-toggle" type="button" id="sortdropdown"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                    Sort
+                    <span className="caret"></span>
+                </button>
+                <ul className="dropdown-menu" aria-labelledby="sortdropdown">
+                    <SortButton criteria="Quality"/>
+                    <SortButton criteria="Recently Updated"/>
+                    <SortButton criteria="Downloads"/>
+                </ul>
+            </div>
+        );
+    }
+});
+
+module.exports = SortDropdown;

http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/89d07741/www/static/plugins/supportedplatforms.jsx
----------------------------------------------------------------------
diff --git a/www/static/plugins/supportedplatforms.jsx b/www/static/plugins/supportedplatforms.jsx
old mode 100644
new mode 100755
index f6de778..83df2b9
--- a/www/static/plugins/supportedplatforms.jsx
+++ b/www/static/plugins/supportedplatforms.jsx
@@ -12,9 +12,19 @@ var SupportedPlatforms = React.createClass({
             moreClicked: true
         });
     },
+    componentWillReceiveProps: function(nextProps) {
+        this.setState({
+            moreClicked: false
+        });
+    },
     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 sortedMajorPlatforms = [
+            {present:false, text: "Android", keyword:"cordova-android"},
+            {present:false, text: "iOS", keyword:"cordova-ios"},
+            {present:false, text: "Windows", keyword:"cordova-windows"},
+            {present:false, text: "Blackberry10", keyword:"cordova-blackberry10"}
+        ];
         var majorPlatformsSupported = [];
         var otherPlatformsSupported = [];
         // remove windows8 & windows dupe
@@ -24,16 +34,16 @@ var SupportedPlatforms = React.createClass({
         keywords.forEach(function(keyword) {
             switch (keyword) {
                 case 'cordova-firefoxos':
-                    otherPlatformsSupported.push(<PlatformButton platform="FirefoxOS"
/>);
+                    otherPlatformsSupported.push(<PlatformButton platform="FirefoxOS"
keyword={keyword} />);
                     break;
                 case 'cordova-android':
                     sortedMajorPlatforms[0].present = true;
                     break;
                 case 'cordova-amazon-fireos':
-                    otherPlatformsSupported.push(<PlatformButton platform="FireOS" />);
+                    otherPlatformsSupported.push(<PlatformButton platform="FireOS" keyword={keyword}
/>);
                     break;
                 case 'cordova-ubuntu':
-                    otherPlatformsSupported.push(<PlatformButton platform="Ubuntu" />);
+                    otherPlatformsSupported.push(<PlatformButton platform="Ubuntu" keyword={keyword}
/>);
                     break;
                 case 'cordova-ios':
                     sortedMajorPlatforms[1].present = true;
@@ -42,21 +52,21 @@ var SupportedPlatforms = React.createClass({
                     sortedMajorPlatforms[3].present = true;
                     break;
                 case 'cordova-wp8':
-                    otherPlatformsSupported.push(<PlatformButton platform="Windows Phone
8" />);
+                    otherPlatformsSupported.push(<PlatformButton platform="Windows Phone
8" keyword={keyword} />);
                     break;
                 case 'cordova-windows8':
                 case 'cordova-windows':
                     sortedMajorPlatforms[2].present = true;
                     break;
                 case 'cordova-browser':
-                    otherPlatformsSupported.push(<PlatformButton platform="Browser" />);
+                    otherPlatformsSupported.push(<PlatformButton platform="Browser" keyword={keyword}
/>);
                     break;
             }
         });
 
         sortedMajorPlatforms.forEach(function(platform) {
             if(platform.present) {
-                majorPlatformsSupported.push(<PlatformButton platform={platform.text}
/>)
+                majorPlatformsSupported.push(<PlatformButton platform={platform.text}
keyword={platform.keyword}/>)
             }
         });
         while(majorPlatformsSupported.length < 4 && otherPlatformsSupported.length
> 0) {


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


Mime
View raw message