materio_search_api_ajax.js 7.2 KB

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