materio_search_api_ajax.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. // @codekit-prepend "gui.js"
  2. (function($) {
  3. MaterioBaseMod = function(){
  4. var _History = window.History,
  5. _isloadingresults = false;
  6. _$content = $('#content');
  7. // TODO: define $content by module settings
  8. /**
  9. * init()
  10. */
  11. function init(){
  12. trace('init module');
  13. initSearchAjax();
  14. initHistoryNav();
  15. initViewMode();
  16. };
  17. /**
  18. * searchAjax
  19. */
  20. function initSearchAjax(){
  21. // trace('initSearchAjax');
  22. // $('#edit-searchfield').focus();
  23. $('#materio-search-api-search-form').bind('submit', function(event) {
  24. // trace('search submited', event);
  25. var $this = $(this);
  26. setTimeout(function(){
  27. loadResults(getSearchKeys());
  28. },10);
  29. return false;
  30. });
  31. // /!\ AUTOCOMPLETE SELECT EVENT need a patch http://drupal.org/node/365241#comment-5374686
  32. $("#edit-searchfield").bind('autocompleteSelect', function(event) {
  33. setTimeout(function(){
  34. loadResults(getSearchKeys());
  35. },10);
  36. // loadResults($(this).val());
  37. });
  38. _$content
  39. .bind('jsp-initialised', function(event, isScrollable){
  40. // trace('isScrollable = '+isScrollable);
  41. // TODO: better to check scroll-y than isscrollable, load next page before the end of scroll
  42. if(!isScrollable)
  43. loadNextResultsPage();
  44. // TODO: what happend when there is no more page
  45. })
  46. .bind('jsp-scroll-y', function(event, scrollPositionY, isAtTop, isAtBottom){
  47. if(isAtBottom)
  48. loadNextResultsPage();
  49. });
  50. // trigger updated event on search results for direct html loading
  51. if($('.search-results', _$content).length){
  52. setTimeout(function(){
  53. var event = jQuery.Event('resultsupdated');
  54. event.container = $('.search-results', _$content);
  55. $(window).trigger(event);
  56. }, 10);
  57. }
  58. };
  59. function loadResults(keys){
  60. // trace('keys', keys);
  61. if(keys !== undefined){
  62. keys = keys.replace('/', ' ');
  63. if(!_isloadingresults){
  64. _isloadingresults = true;
  65. $('#materio-search-api-search-form').addClass('loading');
  66. // TODO: record ajax path in a variable from materio_search_api_ajax_init
  67. $.getJSON('/materio_search_api_ajax/search/'+keys, function(json){
  68. // trace('json', json);
  69. $(window).trigger('resultsloaded');
  70. _isloadingresults = false;
  71. $('#materio-search-api-search-form').removeClass('loading');
  72. updateContent(json);
  73. });
  74. }
  75. }
  76. };
  77. function updateContent(json){
  78. if(json.return){
  79. // TODO: set jscrollpane to top
  80. $('.inner-content',_$content).html(json.return);
  81. // TODO: this a DIRTY sheet of what could be refresh results transitions
  82. // var $newContent = $(json.return);
  83. // trace('newContent', $newContent);
  84. // $('.node-materiau',$newContent).hide();
  85. // $('.node-materiau','#content').fadeOut(300);
  86. // setTimeout(function(){
  87. // $('#content').html($newContent);
  88. // $('.node-materiau','#content').fadeIn(500);
  89. // },300);
  90. _History.pushState({content:json.return}, json.keys, '/'+json.search_path + '/' +json.keys);
  91. // navigate({content:json.return}, '', '/'+json.page.path + '/' +json.keys);
  92. var event = jQuery.Event('resultsupdated');
  93. event.container = $('.search-results', _$content);
  94. $(window).trigger(event);
  95. }else{
  96. trace('no results');
  97. }
  98. };
  99. function getSearchKeys(){
  100. return $('#materio-search-api-search-form').find('input[name*="searchfield"]').val();
  101. };
  102. /**
  103. * infinit scroll
  104. */
  105. function loadNextResultsPage(){
  106. var $nextpage = $('ul.pager .pager-current', _$content).next(),
  107. href = $('a', $nextpage).attr('href');
  108. if(href){
  109. var keys = href.match(/explore\/([^\/|\?]+)/);
  110. var page = href.match(/\?page=([0-9]+)/);
  111. if(!_isloadingresults){
  112. _isloadingresults = true;
  113. $('.materiobase-results', _$content).addClass('loading');
  114. $.getJSON('/materio_search_api_ajax/search/'+keys[1]+'/'+page[1], function(json){
  115. // trace('json', json);
  116. _isloadingresults = false;
  117. $('.materiobase-results', _$content).removeClass('loading');
  118. addNextpage(json);
  119. });
  120. }
  121. }
  122. };
  123. function addNextpage(json){
  124. var $newcontent = $(json.return),
  125. $newresults = $('.search-results', $newcontent).children('article').addClass('just-added'),
  126. $newpager = $('ul.pager', $newcontent);
  127. $('.search-results', _$content).append($newresults);
  128. $('ul.pager', _$content).replaceWith($newpager);
  129. $('.search-results', _$content).children('.just-added').each(function(i){
  130. // $(this).delay(5000*i).removeClass('just-added');
  131. var $this = $(this);
  132. setTimeout(function(){
  133. $this.removeClass('just-added');
  134. }, 150*i);
  135. });
  136. var event = jQuery.Event('resultscompleted');
  137. event.container = $('.search-results', _$content);
  138. $(window).trigger(event);
  139. };
  140. /**
  141. * history navigation
  142. */
  143. function initHistoryNav(){
  144. var state = _History.getState();
  145. _History.log('initial:', state.data, state.title, state.url);
  146. _History.Adapter.bind(window,'statechange',function(){
  147. var state = _History.getState();
  148. _History.log('statechange:', state.data, state.title, state.url);
  149. // TODO: History : empty content if we go back to the homepage
  150. $('.inner-content',_$content).html(state.data.content);
  151. });
  152. };
  153. /**
  154. * viewmode
  155. */
  156. function initViewMode(){
  157. $('.viewmode-link').click(function(event){
  158. changeViewMode($(this).attr('rel'), $(this));
  159. });
  160. };
  161. function changeViewMode(vm, $btn){
  162. $.getJSON('/materiosearchapi/viewmode/change/'+vm, function(json){
  163. // trace('viewmode json', json);
  164. if (json.statut == "saved"){
  165. loadResults(getSearchKeys());
  166. $('.viewmode-link').removeClass('active');
  167. $btn.addClass('active');
  168. }
  169. });
  170. };
  171. init();
  172. };
  173. var materiobasemod = new MaterioBaseMod();
  174. })(jQuery);