materio_search_api_ajax.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341
  1. // @codekit-prepend "gui.js"
  2. // @koala-prepend "gui_ck_fw/gui.js"
  3. (function($) {
  4. MaterioSearchApiAjax = function(){
  5. var _isloadingresults = false;
  6. var _$content = $('#content');
  7. // TODO: define $content by module settings
  8. /**
  9. * init()
  10. */
  11. function init(){
  12. //trace('init MaterioSearchApiAjax');
  13. initSearchAjax();
  14. initViewMode();
  15. };
  16. /**
  17. * searchAjax
  18. */
  19. function initSearchAjax(){
  20. // trace('initSearchAjax');
  21. $('#materio-search-api-search-form').bind('submit', function(event) {
  22. // trace('search submited', event);
  23. // var $this = $(this);
  24. setTimeout(function(){
  25. loadResults(getSearchKeys());
  26. },10);
  27. return false;
  28. });
  29. // /!\ AUTOCOMPLETE SELECT EVENT need a patch http://drupal.org/node/365241#comment-5374686
  30. $("#edit-searchfield")
  31. .bind('autocompleteSelect', function(event) {
  32. // $(this).parents('.form').trigger('submit');
  33. setTimeout(function(){
  34. loadResults(getSearchKeys(), "taxonomy");
  35. },10);
  36. })
  37. .bind('focus', function(event){
  38. $(this).select();
  39. });
  40. $(document)
  41. .bind('theme-ready', onThemeReady)
  42. .bind('init-scroller-pager', onInitScrollerPager)
  43. .bind('load-scroller-pager', onLoadScrollerPager)
  44. .bind('view-mode-changed', onViewModeChanged)
  45. .bind('history-state-change', onHistoryStateChange);
  46. };
  47. function onThemeReady(event){
  48. // trace('MaterioSearchApiAjax :: onThemeReady');
  49. if( isActuality() || isExplore() ){
  50. $.event.trigger({
  51. type : 'resultschanged',
  52. container : isActuality() ? '#content .actuality-items' : '#content .search-results'
  53. });
  54. }
  55. };
  56. function getSearchKeys(){
  57. return $('#materio-search-api-search-form').find('input[name*="searchfield"]').val();
  58. };
  59. function loadResults(keys, searchmode){
  60. //trace('keys', keys);
  61. if(keys !== undefined && keys !== '' && keys.length >= 2){
  62. keys = keys.replace('/', ' ');
  63. // define mode (between full text or only term selected on autocompletion)
  64. searchmode = searchmode || "fulltext";
  65. // record the "node type filter" form item
  66. var types = {}, stringTypes = [];
  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. stringTypes.push($this.val());
  71. types[$this.val()] = $this.attr('checked');
  72. });
  73. //trace('types', types);
  74. if(!_isloadingresults){
  75. $.event.trigger('loading-content');
  76. _isloadingresults = true;
  77. $('#materio-search-api-search-form').addClass('loading');
  78. // trace('window.location.href',window.location.href);
  79. // TODO: record ajax path in a variable from materio_search_api_ajax_init
  80. $.getJSON(Drupal.settings.basePath+Drupal.settings.pathPrefix+'materio_search_api_ajax/search/',
  81. {'types':types,'current_path':document.location.href, 'keys':keys, 'searchmode':searchmode},
  82. function(json){
  83. //trace('json', json);
  84. // google analytics
  85. $.event.trigger({
  86. type : "record-stat",
  87. categorie : 'Search',
  88. action : keys,
  89. label : 'filters : '+ stringTypes.join(' ,'),
  90. value : json.count
  91. });
  92. if(json.redirect){
  93. window.location = json.redirect;
  94. }else{
  95. $.event.trigger('loaded-content');
  96. _isloadingresults = false;
  97. $('#materio-search-api-search-form').removeClass('loading');
  98. changeContent(json);
  99. }
  100. });
  101. }
  102. }
  103. };
  104. function loadActuality(){
  105. if(!_isloadingresults){
  106. $.event.trigger('loading-content');
  107. _isloadingresults = true;
  108. $('#materio-search-api-search-form').addClass('loading');
  109. var url = Drupal.settings.basePath+Drupal.settings.pathPrefix+'materio_search_api_ajax/actuality';
  110. $.getJSON(url,
  111. function(json){
  112. //trace('json', json);
  113. $.event.trigger('loaded-content');
  114. _isloadingresults = false;
  115. $('#materio-search-api-search-form').removeClass('loading');
  116. changeContent(json);
  117. });
  118. }
  119. };
  120. function changeContent(json){
  121. //trace('MaterioSearchApiAjax changeContent | json', json);
  122. if(json.returned){
  123. $.event.trigger('loaded-content');
  124. $('.inner-content',_$content).html(json.returned).find('ul.pager').hide();
  125. triggerContentChanged();
  126. }else{
  127. //trace('no results');
  128. }
  129. $.event.trigger({
  130. type : 'new-history-page',
  131. path : Drupal.settings.basePath + Drupal.settings.pathPrefix + json.path,
  132. title : json.title,
  133. content : json.returned
  134. });
  135. for (language in Drupal.settings.materio_search_api_ajax.languages) {
  136. var l = Drupal.settings.materio_search_api_ajax.languages[language];
  137. $('#block-locale-language li.'+language+' a').attr('href', Drupal.settings.basePath + l.prefix+'/' + json.search_path + '/' + json.keys)
  138. };
  139. };
  140. function triggerContentChanged(){
  141. //trace('MaterioSearchApiAjax :: triggerContentChanged');
  142. $.event.trigger({
  143. type : 'resultschanged',
  144. container : '#content .search-results, #content .actuality-items'
  145. });
  146. };
  147. function onInitScrollerPager(event){
  148. // trace("onInitScrollerPager");
  149. if(isActuality() || isExplore())
  150. event.pager.hide();
  151. };
  152. function onLoadScrollerPager(event){
  153. // trace("onLoadScrollerPager");
  154. if(!_isloadingresults){
  155. if (isExplore())
  156. loadNextResultsPage(event.href);
  157. if(isActuality())
  158. loadNextActualityPage(event.href);
  159. }
  160. };
  161. function loadNextResultsPage(href){
  162. trace('loadNextResultsPage');
  163. var keys = href.match(/explore\/([^\/|\?]+)/);
  164. var page = href.match(/\?page=([0-9]+)/);
  165. var url = Drupal.settings.basePath+Drupal.settings.pathPrefix+'materio_search_api_ajax/search/'+page[1];
  166. loadNextPage(url, keys[1], $('.materiobase-results', _$content), '.search-results');
  167. };
  168. function loadNextActualityPage(href){
  169. // trace('loadNextActualityPage');
  170. var page = href.match(/\?page=([0-9]+)/);
  171. var url = Drupal.settings.basePath+Drupal.settings.pathPrefix+'materio_search_api_ajax/actuality/'+page[1];
  172. loadNextPage(url, '', $('.materiobase-actuality', _$content), '.actuality-items');
  173. };
  174. function loadNextPage(url, keys, $container, target){
  175. // trace('MaterioSearchApiAjax :: loadNextPage()');
  176. _isloadingresults = true;
  177. $container.addClass('loading');
  178. $.getJSON(url, {'keys':keys}, function(json){
  179. //trace('json', json);
  180. $container.removeClass('loading');
  181. addNextpage(json, target);
  182. // addNextpageItemByItem($(json.return), target);
  183. });
  184. };
  185. function addNextpage(json, container_class){
  186. // trace('json',json);
  187. if(json){
  188. var $newcontent = $(json.returned),
  189. $newitems = $(container_class, $newcontent).children('article'), //.addClass('just-added'),
  190. $newpager = $('ul.pager', $newcontent);
  191. $(container_class, _$content).append($newitems);
  192. $('ul.pager', _$content).replaceWith($newpager.hide());
  193. // TODO: animation, this should be on theme side
  194. $(container_class, _$content).children('.just-added').each(function(i){
  195. var $this = $(this);
  196. setTimeout(function(){
  197. $this.removeClass('just-added');
  198. }, 150*i);
  199. });
  200. $.event.trigger({
  201. type : 'resultscompleted',
  202. container : $(container_class, _$content)
  203. });
  204. }
  205. _isloadingresults = false;
  206. };
  207. // TEST not used
  208. function addNextpageItemByItem($newcontent, container_class){
  209. //trace('MaterioSearchApiAjax :: addNextpageItemByItem()');
  210. $('ul.pager', _$content).remove();
  211. $(container_class, _$content).append($(container_class, $newcontent).children('article').eq(0));
  212. if($(container_class, $newcontent).children('article').length){
  213. setTimeout(function(){
  214. addNextpageItemByItem($newcontent, container_class);
  215. }, 200);
  216. }else{
  217. _isloadingresults = false;
  218. $('ul.pager', _$content).replaceWith($('ul.pager', $newcontent).hide());
  219. $.event.trigger({
  220. type : 'resultscompleted',
  221. container : $(container_class, _$content)
  222. });
  223. }
  224. };
  225. /**
  226. * viewmode
  227. */
  228. function initViewMode(){
  229. $('.viewmode-link').click(function(event){
  230. event.preventDefault();
  231. if(!$(this).is('.active')){
  232. $(this).trigger({type:'vm-clicked'});
  233. changeViewMode($(this).attr('rel'), $(this));
  234. }else{
  235. $(this).trigger({type:'vm-clicked-active'});
  236. }
  237. return false;
  238. });
  239. };
  240. function changeViewMode(vm, $btn){
  241. if(!_isloadingresults){
  242. _isloadingresults = true;
  243. $.getJSON(Drupal.settings.basePath+'materio_search_api_ajax/viewmode/change/'+vm, function(json){
  244. //trace('viewmode json', json);
  245. _isloadingresults = false;
  246. if (json.statut == "saved"){
  247. // google analytics
  248. $.event.trigger({
  249. type : "record-stat",
  250. categorie : 'Viewmode',
  251. action : vm,
  252. label : isActuality() ? 'Actualities' : 'Search results'
  253. });
  254. $.event.trigger('view-mode-changed');
  255. $('.viewmode-link, .viewmode-link i').removeClass('active');
  256. $btn.addClass('active').find('i').addClass('active');
  257. }
  258. });
  259. }
  260. };
  261. function onViewModeChanged(event){
  262. if (isExplore())
  263. loadResults(getSearchKeys());
  264. if(isActuality())
  265. loadActuality();
  266. };
  267. /**
  268. * history
  269. */
  270. function onHistoryStateChange(event){
  271. if(isExplore() || isActuality())
  272. triggerContentChanged();
  273. // TODO: pushstate trogger state change, so we have a retriggerring here on loading new results … how to avoid this
  274. };
  275. /**
  276. * helpers
  277. */
  278. function isExplore(){
  279. return $('.search-results', '#content').length;
  280. };
  281. function isActuality(){
  282. return $('.actuality-items', '#content').length;
  283. };
  284. init();
  285. };
  286. $(document).ready(function() {
  287. var materiosearchapiajax = new MaterioSearchApiAjax();
  288. });
  289. })(jQuery);