materio_search_api_ajax.js 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
  1. // @codekit-prepend "gui.js"
  2. (function($) {
  3. MaterioSearchApiAjax = function(){
  4. var _isloadingresults = false;
  5. var _$content = $('#content');
  6. // TODO: define $content by module settings
  7. /**
  8. * init()
  9. */
  10. function init(){
  11. trace('init MaterioSearchApiAjax');
  12. initSearchAjax();
  13. initViewMode();
  14. };
  15. /**
  16. * searchAjax
  17. */
  18. function initSearchAjax(){
  19. // trace('initSearchAjax');
  20. $('#materio-search-api-search-form').bind('submit', function(event) {
  21. // trace('search submited', event);
  22. var $this = $(this);
  23. setTimeout(function(){
  24. loadResults(getSearchKeys());
  25. },10);
  26. return false;
  27. });
  28. // /!\ AUTOCOMPLETE SELECT EVENT need a patch http://drupal.org/node/365241#comment-5374686
  29. $("#edit-searchfield").bind('autocompleteSelect', function(event) {
  30. $(this).parents('.form').trigger('submit');
  31. });
  32. $(document)
  33. .bind('init-scroller-pager', onInitScrollerPager)
  34. .bind('load-scroller-pager', onLoadScrollerPager)
  35. .bind('view-mode-changed', onViewModeChanged)
  36. .bind('history-state-change', onHistoryStateChange);
  37. // trigger updated event for direct html loading
  38. setTimeout(function(){
  39. var event = jQuery.Event('resultschanged');
  40. if(isExplore())
  41. event.container = '#content .search-results';
  42. if(isActuality())
  43. event.container = '#content .actuality-items';
  44. $.event.trigger(event);
  45. }, 10);
  46. };
  47. function getSearchKeys(){
  48. return $('#materio-search-api-search-form').find('input[name*="searchfield"]').val();
  49. };
  50. function loadResults(keys){
  51. // trace('keys', keys);
  52. if(keys !== undefined){
  53. keys = keys.replace('/', ' ');
  54. var types = {};
  55. $('#edit-bundles-filter', '#materio-search-api-search-form').find('input[type*="checkbox"]').each(function(i){
  56. $this = $(this);
  57. // if ( $this.attr('checked') ) {
  58. types[$this.val()] = $this.attr('checked');
  59. // }
  60. });
  61. trace('types', types);
  62. if(!_isloadingresults){
  63. $.event.trigger('loading-content');
  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(Drupal.settings.basePath+Drupal.settings.pathPrefix+'materio_search_api_ajax/search/'+keys,
  68. {'types':types},
  69. function(json){
  70. trace('json', json);
  71. $.event.trigger('loaded-content');
  72. _isloadingresults = false;
  73. $('#materio-search-api-search-form').removeClass('loading');
  74. var path = Drupal.settings.basePath + Drupal.settings.pathPrefix + json.search_path + '/' + json.keys;
  75. var event = jQuery.Event('new-history-page');
  76. event.path = path;
  77. event.title = json.keys;
  78. event.content = json.return;
  79. $.event.trigger(event);
  80. for (language in Drupal.settings.materio_search_api_ajax.languages) {
  81. var l = Drupal.settings.materio_search_api_ajax.languages[language];
  82. $('#block-locale-language li.'+language+' a').attr('href', Drupal.settings.basePath + l.prefix+'/' + json.search_path + '/' + json.keys)
  83. };
  84. changeContent(json);
  85. });
  86. }
  87. }
  88. };
  89. function loadActuality(){
  90. if(!_isloadingresults){
  91. $.event.trigger('loading-content');
  92. _isloadingresults = true;
  93. $('#materio-search-api-search-form').addClass('loading');
  94. var url = Drupal.settings.basePath+Drupal.settings.pathPrefix+'materio_search_api_ajax/actuality';
  95. $.getJSON(url,
  96. function(json){
  97. trace('json', json);
  98. $.event.trigger('resultsloaded');
  99. _isloadingresults = false;
  100. $('#materio-search-api-search-form').removeClass('loading');
  101. changeContent(json);
  102. });
  103. }
  104. };
  105. function changeContent(json){
  106. if(json.return){
  107. $.event.trigger('loaded-content');
  108. $('.inner-content',_$content).html(json.return);
  109. triggerContentChanged();
  110. }else{
  111. trace('no results');
  112. }
  113. };
  114. function triggerContentChanged(){
  115. var event = jQuery.Event('resultschanged');
  116. event.container = '#content .search-results, #content .actuality-items';
  117. $.event.trigger(event);
  118. };
  119. function onInitScrollerPager(event){
  120. if(isActuality() || isExplore())
  121. event.pager.hide();
  122. };
  123. function onLoadScrollerPager(event){
  124. if (isExplore())
  125. loadNextResultsPage(event.href);
  126. if(isActuality())
  127. loadNextActualityPage(event.href);
  128. };
  129. function loadNextResultsPage(href){
  130. // trace('loadNextResultsPage');
  131. if(!_isloadingresults){
  132. var keys = href.match(/explore\/([^\/|\?]+)/);
  133. var page = href.match(/\?page=([0-9]+)/);
  134. var url = Drupal.settings.basePath+Drupal.settings.pathPrefix+'materio_search_api_ajax/search/'+keys[1]+'/'+page[1];
  135. loadNextPage(url, $('.materiobase-results', _$content), '.search-results');
  136. }
  137. };
  138. function loadNextActualityPage(href){
  139. // trace('loadNextActualityPage');
  140. if(!_isloadingresults){
  141. var page = href.match(/\?page=([0-9]+)/);
  142. var url = Drupal.settings.basePath+Drupal.settings.pathPrefix+'materio_search_api_ajax/actuality/'+page[1];
  143. loadNextPage(url, $('.materiobase-actuality', _$content), '.actuality-items');
  144. }
  145. };
  146. function loadNextPage(url, $container, target){
  147. trace('loadNextPage');
  148. _isloadingresults = true;
  149. $container.addClass('loading');
  150. $.getJSON(url, function(json){
  151. trace('json', json);
  152. _isloadingresults = false;
  153. $container.removeClass('loading');
  154. addNextpage(json, target);
  155. });
  156. };
  157. function addNextpage(json, container_class){
  158. var $newcontent = $(json.return),
  159. $newitems = $(container_class, $newcontent).children('article').addClass('just-added'),
  160. $newpager = $('ul.pager', $newcontent);
  161. $(container_class, _$content).append($newitems);
  162. $('ul.pager', _$content).replaceWith($newpager.hide());
  163. // TODO: animation, this should be on theme side
  164. $(container_class, _$content).children('.just-added').each(function(i){
  165. // $(this).delay(5000*i).removeClass('just-added');
  166. var $this = $(this);
  167. setTimeout(function(){
  168. $this.removeClass('just-added');
  169. }, 150*i);
  170. });
  171. var event = jQuery.Event('resultscompleted');
  172. event.container = $(container_class, _$content);
  173. $.event.trigger(event);
  174. };
  175. /**
  176. * viewmode
  177. */
  178. function initViewMode(){
  179. $('.viewmode-link').click(function(event){
  180. event.preventDefault();
  181. changeViewMode($(this).attr('rel'), $(this));
  182. return false;
  183. });
  184. };
  185. function changeViewMode(vm, $btn){
  186. $.getJSON(Drupal.settings.basePath+'materio_search_api_ajax/viewmode/change/'+vm, function(json){
  187. trace('viewmode json', json);
  188. if (json.statut == "saved"){
  189. // loadResults(getSearchKeys());
  190. $.event.trigger('view-mode-changed');
  191. $('.viewmode-link').removeClass('active');
  192. $btn.addClass('active');
  193. }
  194. });
  195. };
  196. function onViewModeChanged(event){
  197. if (isExplore())
  198. loadResults(getSearchKeys());
  199. if(isActuality())
  200. loadActuality();
  201. };
  202. /**
  203. * history
  204. */
  205. function onHistoryStateChange(event){
  206. if(isExplore() || isActuality())
  207. triggerContentChanged();
  208. };
  209. /**
  210. * helpers
  211. */
  212. function isExplore(){
  213. return $('.search-results', '#content').length;
  214. };
  215. function isActuality(){
  216. return $('.actuality-items', '#content').length;
  217. };
  218. init();
  219. };
  220. var materiosearchapiajax = new MaterioSearchApiAjax();
  221. })(jQuery);