converted fulltext box search js code from ext2 to jquery

koala-framework · Oct 6, 2017 · 8aabbcb · 8aabbcb
1 parent ae9f059
commit 8aabbcb
Showing 1 changed file with 37 additions and 44 deletions.
diff --git a/Kwc/FulltextSearch/Box/Component.defer.js b/Kwc/FulltextSearch/Box/Component.defer.js
@@ -1,20 +1,21 @@
-//TODO: convert to jquery
 /*
-var onReady = require('kwf/on-ready-ext2');
+var $ = require('jQuery');
+var _ = require('underscore');
+var onReady = require('kwf/on-ready');
 var getKwcRenderUrl = require('kwf/get-kwc-render-url');
 var historyState = require('kwf/history-state');
 var findForm = require('kwf/frontend-form/find-form');
-var kwfNs = require('kwf/namespace');
+var Field = require('kwf/frontend-form/field/field');
 
 var FulltextSearchBoxComponent = function(el, config) {
     this.el = el;
     this.config = config;
 
     if (this.config.hideSubmit) {
-        this.el.child('.submitWrapper').enableDisplayMode();
-        this.el.child('.submitWrapper').hide();
+        this.el.find('.kwfUp-submitWrapper').hide();
     }
 
+
     if (this.config.useLiveSearch) {
         historyState.on('popstate', function() {
             if (historyState.currentState.searchVisible) {
@@ -40,24 +41,24 @@ var FulltextSearchBoxComponent = function(el, config) {
         }, this);
     }
 
-    this.searchForm = findForm(el.dom);
+    this.searchForm = findForm(el.find('.kwfUp-kwcForm'));
 
-    if (location.pathname == config.searchUrl) {
+    if (location.pathname === config.searchUrl) {
         //we are already on search page; nothing to do
-        this.searchMainContent = Ext2.select('.kwfUp-kwfMainContent').first();
+        this.searchMainContent = $('.kwfUp-kwfMainContent').first();
         historyState.currentState.searchBoxValues = this.searchForm.getValues();
         historyState.currentState.searchVisible = true;
         historyState.updateState();
         return;
     }
     this.previousSearchFormValues = this.searchForm.getValues();
 
-    this.searchForm.on('fieldChange', function(f) {
-        if (f instanceof Kwf.FrontendForm.Field && f.getValue().length < this.config.minSearchTermLength) {
+    this.searchForm.on('fieldChange', _.debounce(function(ev, f) {
+        if (f instanceof Field && f.getValue().length < this.config.minSearchTermLength) {
             return; //minimum length
         }
         this.doSearch();
-    }, this, { buffer: 500 });
+    }, 500), this);
 
     this.searchForm.on('beforeSubmit', function(f) {
         this.doSearch();
@@ -69,7 +70,8 @@ var FulltextSearchBoxComponent = function(el, config) {
     }, this);
 
     historyState.currentState.searchVisible = false;
-    this.previousMainContent = Ext2.select('.kwfUp-kwfMainContent').first();
+    this.previousMainContent = $('.kwfUp-kwfMainContent').first();
+
 };
 
 FulltextSearchBoxComponent.prototype =
@@ -87,7 +89,7 @@ FulltextSearchBoxComponent.prototype =
         var values = this.searchForm.getValues();
         var diffFound = false;
         for(var i in values) {
-            if (values[i] != this.previousSearchFormValues[i]) {
+            if (values[i] !== this.previousSearchFormValues[i]) {
                 diffFound = true;
                 break;
             }
@@ -108,7 +110,7 @@ FulltextSearchBoxComponent.prototype =
         this.loadSearch({
             success: function() {
                 historyState.currentState.searchVisible = true;
-                var ajaxViewEl = this.searchMainContent.child('.kwcDirectoriesListViewAjax');
+                var ajaxViewEl = this.searchMainContent.find('.kwfUp-kwcDirectoriesListViewAjax');
                 if (ajaxViewEl && ajaxViewEl.kwcViewAjax) {
                     ajaxViewEl.kwcViewAjax.pushSearchFormHistoryState();
                 }
@@ -119,37 +121,32 @@ FulltextSearchBoxComponent.prototype =
 
     loadSearch: function(params)
     {
-        this.previousMainContent = Ext2.select('.kwfUp-kwfMainContent').first();
-        this.previousMainContent.enableDisplayMode('block');
+        this.previousMainContent = $('.kwfUp-kwfMainContent').first();
         this.previousMainContent.hide();
-        this.loadingContent = this.el.createChild({
-            cls: 'kwfUp-kwfMainContent loadingContent',
-            tag: 'main',
-            style: 'width: ' + this.previousMainContent.getStyle('width'),
-            html: '<div class="loading"></div>'
-        }, this.previousMainContent);
-        this.loadingContent.enableDisplayMode('block');
+
+        this.loadingContent = $('<main>', {
+            class: 'kwfUp-kwfMainContent kwfUp-loadingContent',
+            style: 'width: ' + this.previousMainContent.width(),
+            html: '<div class="kwfUp-loading"></div>'
+        }).insertBefore(this.previousMainContent);
 
         var requestParams = this.searchForm.getValuesIncludingPost();
         requestParams.url = location.protocol+'//'+location.host+this.config.searchUrl;
-        Ext2.Ajax.request({
-            params: requestParams,
+
+        $.ajax({
             url: getKwcRenderUrl(),
-            success: function(response, options) {
-                this.loadingContent.remove();
-                this.searchMainContent = this.el.createChild({
-                    cls: 'kwfUp-kwfMainContent',
-                    tag: 'main',
-                    style: 'width: ' + this.previousMainContent.getStyle('width'),
-                    html: response.responseText
-                }, this.previousMainContent);
-                this.searchMainContent.enableDisplayMode('block');
-                onReady.callOnContentReady(this.searchMainContent, {newRender: true});
-
-                if (params && params.success) params.success.call(params.scope || this);
-            },
-            scope: this
-        });
+            data: requestParams
+        }).then((function (data) {
+            this.loadingContent.remove();
+            this.searchMainContent = $('<main>',{
+                class: 'kwfUp-kwfMainContent',
+                style: 'width: ' + this.previousMainContent.width(),
+                html: data
+            }).insertBefore(this.previousMainContent);
+            onReady.callOnContentReady(this.searchMainContent, {newRender: true});
+
+            if (params && params.success) params.success.call(params.scope || this);
+        }).bind(this));
     },
 
     hideSearch: function() {
@@ -165,14 +162,10 @@ FulltextSearchBoxComponent.prototype =
     }
 };
 
-
-
 onReady.onRender('.kwcClass', function fulltextSearchBox(el, config) {
     new FulltextSearchBoxComponent(el, config);
 }, {
     priority: 0, //call *after* initializing kwcForm to have access to searchForm
     defer: true
 });
-
-
 */