diff options
-rw-r--r-- | askbot/media/images/ajax-loader.gif | bin | 0 -> 723 bytes | |||
-rw-r--r-- | askbot/media/js/live_search.js | 21 | ||||
-rw-r--r-- | askbot/media/js/post.js | 1 | ||||
-rw-r--r-- | askbot/media/js/utils.js | 39 | ||||
-rw-r--r-- | askbot/media/style/style.css | 13 | ||||
-rw-r--r-- | askbot/media/style/style.less | 16 |
6 files changed, 86 insertions, 4 deletions
diff --git a/askbot/media/images/ajax-loader.gif b/askbot/media/images/ajax-loader.gif Binary files differnew file mode 100644 index 00000000..212a8197 --- /dev/null +++ b/askbot/media/images/ajax-loader.gif diff --git a/askbot/media/js/live_search.js b/askbot/media/js/live_search.js index ef1b6e43..97b13e31 100644 --- a/askbot/media/js/live_search.js +++ b/askbot/media/js/live_search.js @@ -130,6 +130,19 @@ SearchDropMenu.prototype.makeKeyHandler = function() { }; }; +/** todo: change this to state management as >1 thing happens */ +SearchDropMenu.prototype.showWaitIcon = function() { + this._waitIcon.show(); + this._footer.hide(); + this._element.addClass('empty'); +}; + +SearchDropMenu.prototype.hideWaitIcon = function() { + this._waitIcon.hide(); + this._footer.show(); + this._element.removeClass('empty'); +}; + SearchDropMenu.prototype.createDom = function() { this._element = this.makeElement('div'); this._element.addClass('search-drop-menu'); @@ -139,6 +152,11 @@ SearchDropMenu.prototype.createDom = function() { this._element.append(this._resultsList); this._element.addClass('empty'); + var waitIcon = new WaitIcon(); + waitIcon.hide(); + this._element.append(waitIcon.getElement()); + this._waitIcon = waitIcon; + //add ask button, @todo: make into separate class? var footer = this.makeElement('div'); this._element.append(footer); @@ -471,6 +489,7 @@ FullTextSearch.prototype.getSearchQuery = function() { */ FullTextSearch.prototype.renderTitleSearchResult = function(data) { var menu = this._dropMenu; + menu.hideWaitIcon(); menu.setData(data); menu.render(); menu.show(); @@ -741,6 +760,8 @@ FullTextSearch.prototype.makeKeyDownHandler = function() { if (query.length === 0) { if (keyCode !== 8 && keyCode !== 48) {//del and backspace toolTip.hide(); + dropMenu.show(); + dropMenu.showWaitIcon(); //xButton.show();//causes a jump of search input... } } else { diff --git a/askbot/media/js/post.js b/askbot/media/js/post.js index 05e49387..6bc37600 100644 --- a/askbot/media/js/post.js +++ b/askbot/media/js/post.js @@ -23,6 +23,7 @@ var lanai = { } }; +//todo: clean-up now there is utils:WaitIcon function appendLoader(element) { loading = gettext('loading...') element.append('<img class="ajax-loader" ' + diff --git a/askbot/media/js/utils.js b/askbot/media/js/utils.js index cf748ee6..e9ae4dd2 100644 --- a/askbot/media/js/utils.js +++ b/askbot/media/js/utils.js @@ -382,6 +382,45 @@ WrappedElement.prototype.dispose = function(){ this._in_document = false; }; +/** + * @constructor + * a loader + */ +var WaitIcon = function() { + WrappedElement.call(this); + this._isVisible = false; +}; +inherits(WaitIcon, WrappedElement); + +WaitIcon.prototype.setVisible = function(isVisible) { + this._isVisible = isVisible; + if (this._element) { + if (this._isVisible === true) { + this._element.show(); + } else { + this._element.hide(); + } + } +}; + +WaitIcon.prototype.hide = function() { + this.setVisible(false); +}; + +WaitIcon.prototype.show = function() { + this.setVisible(true); +}; + +WaitIcon.prototype.createDom = function() { + var box = this.makeElement('div'); + box.addClass('wait-icon-box'); + this._element = box; + var img = this.makeElement('img'); + img.attr('src', mediaUrl('media/images/ajax-loader.gif')); + box.append(img); + this.setVisible(this._isVisible); +}; + /** * @contsructor * a form helper that disables submit button diff --git a/askbot/media/style/style.css b/askbot/media/style/style.css index 249b01b5..b23526f5 100644 --- a/askbot/media/style/style.css +++ b/askbot/media/style/style.css @@ -211,6 +211,9 @@ body.user-messages { font-size: 16px; color: #424242; } +.wait-icon-box { + text-align: center; +} #closeNotify { position: absolute; right: 5px; @@ -490,13 +493,19 @@ body.user-messages { color: whitesmoke; } .search-drop-menu ul.empty { - padding: 5px; - margin: 0; + margin-bottom: 0; } .search-drop-menu .footer { text-align: center; padding-bottom: 10px; } +.search-drop-menu.empty { + padding-bottom: 8px; +} +.search-drop-menu.empty ul { + padding: 5px; + margin: 0; +} .input-tool-tip { color: #999; } diff --git a/askbot/media/style/style.less b/askbot/media/style/style.less index 104e499e..905fdbfd 100644 --- a/askbot/media/style/style.less +++ b/askbot/media/style/style.less @@ -205,6 +205,10 @@ body.user-messages { } } +.wait-icon-box { + text-align: center; +} + #closeNotify { position: absolute; right: 5px; @@ -518,8 +522,7 @@ body.user-messages { } ul.empty { - padding: 5px; - margin: 0; + margin-bottom: 0; } .footer { @@ -528,6 +531,15 @@ body.user-messages { } } +.search-drop-menu.empty { + padding-bottom: 8px; + ul { + padding: 5px; + margin: 0; + } +} + + .input-tool-tip { color: #999; } |