cordova-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From nikhi...@apache.org
Subject [1/3] cordova-registry-web git commit: Adding routing on search queries and auto url updations
Date Sat, 27 Jun 2015 00:21:21 GMT
Repository: cordova-registry-web
Updated Branches:
  refs/heads/master 63c85a103 -> 9b71bb822


Adding routing on search queries and auto url updations


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/19f33747
Tree: http://git-wip-us.apache.org/repos/asf/cordova-registry-web/tree/19f33747
Diff: http://git-wip-us.apache.org/repos/asf/cordova-registry-web/diff/19f33747

Branch: refs/heads/master
Commit: 19f3374773e3b5be1c9b3827e424a0e276e8f72b
Parents: 63c85a1
Author: Raghav Katyal <rakatyal@microsoft.com>
Authored: Thu Jun 25 15:19:22 2015 -0700
Committer: Nikhil Khandelwal <nikhilkh@microsoft.com>
Committed: Fri Jun 26 17:20:41 2015 -0700

----------------------------------------------------------------------
 npm-search/assets/css/base.css |  5 +++
 npm-search/assets/js/app.js    | 70 +++++++++++++++++++++++++++----------
 2 files changed, 57 insertions(+), 18 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/cordova-registry-web/blob/19f33747/npm-search/assets/css/base.css
----------------------------------------------------------------------
diff --git a/npm-search/assets/css/base.css b/npm-search/assets/css/base.css
index d9eb472..4a94652 100644
--- a/npm-search/assets/css/base.css
+++ b/npm-search/assets/css/base.css
@@ -5,6 +5,11 @@ body {
   margin: 0; 
 } 
 
+h1 {
+  -webkit-margin-before: 0.3em;
+  -webkit-margin-after: 0.3em;
+}
+
 /*---------------------------------------------------
     Pluggy and msg
 ---------------------------------------------------*/

http://git-wip-us.apache.org/repos/asf/cordova-registry-web/blob/19f33747/npm-search/assets/js/app.js
----------------------------------------------------------------------
diff --git a/npm-search/assets/js/app.js b/npm-search/assets/js/app.js
index f5aa49c..920e575 100644
--- a/npm-search/assets/js/app.js
+++ b/npm-search/assets/js/app.js
@@ -1,6 +1,6 @@
 var React    = window.React = require('react'), // assign it to window for react chrome extension
     classNames = require('classnames'), 
-    App = {};
+    App = {};   
 
 var OfficialPlugin = React.createClass({
     render: function() {
@@ -8,7 +8,7 @@ var OfficialPlugin = React.createClass({
             <div id="featured"></div>
         );
     }
-})
+});
 
 var PlatformButton = React.createClass({
     onClick: function() {
@@ -20,7 +20,7 @@ var PlatformButton = React.createClass({
             <li className = "clickable" onClick={this.onClick}> {this.props.platform}
</li>
         );
     }
-})
+});
 
 var SupportedPlatforms = React.createClass({
     getInitialState: function() {
@@ -99,7 +99,7 @@ var SupportedPlatforms = React.createClass({
             </ul>
         );
     }
-})
+});
 
 var SearchBar = React.createClass({
     handleChange: function() {
@@ -124,7 +124,7 @@ var SearchBar = React.createClass({
             </div>
         );
     }
-})
+});
 
 var Plugin = React.createClass({
     render: function() {
@@ -171,7 +171,15 @@ var Plugin = React.createClass({
             </li>
         )
     }
-})
+});
+
+var timer=0;
+window.onpopstate = function(e){
+    if(e.state){
+        var appInstance = React.render(<App />, document.getElementById('container'));
+        appInstance.loadFilterText(e.state.filterText);
+    }
+};
 
 var PluginList = React.createClass({
     contains: function(values, pluginInfo) {
@@ -238,6 +246,17 @@ var PluginList = React.createClass({
         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 = this.populateFilters(filterText);
 
         this.props.plugins.forEach(function(plugin) {
@@ -283,12 +302,23 @@ var App = React.createClass({
             }
             else {    
                 return {
-                    filterText: previousState.filterText + condition + ' ',
+                    filterText: previousState.filterText + ' ' + condition + ' ',
                     plugins: previousState.plugins
                 };
             }
         });
     },
+    loadFilterText : function(filterText) {
+        this.setState(function(previousState, currentProps) {
+            return {
+                filterText: filterText,
+                plugins: previousState.plugins
+            };
+        });
+    },
+    getURLParameter : function(name) {
+        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g,
'%20'))||null;
+    },
 
     componentDidMount: function() {
         var plugins = [],
@@ -366,10 +396,19 @@ var App = React.createClass({
             };
 
             if (this.isMounted()) {
-                this.setState({
-                  plugins: plugins,
-                  placeHolderText: 'Search ' + pluginCount + ' plugins...'
-                });
+                var q = this.getURLParameter('q');
+                if(q) {
+                    this.setState({
+                        plugins: plugins,
+                        filterText: q
+                    });
+                }
+                else {
+                    this.setState({
+                        plugins: plugins,
+                        placeHolderText: 'Search ' + pluginCount + ' plugins...'
+                    });
+                }
                 getDownloadCount(plugins,this);
             }
         }
@@ -408,13 +447,8 @@ var App = React.createClass({
     }
 });
 
-App.start = function() {
-    
-    React.render( 
-        <App />, 
-        document.getElementById('container') 
-     )    
-
+App.start = function() {    
+    React.render(<App />, document.getElementById('container'));
 };
 
 function xhrRequest(url, success, fail) {


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


Mime
View raw message