Flag list OK

all ajax OK

Signed-off-by: bachy <git@g-u-i.net>

js/materio_flag.js

@@ -3,55 +3,135 @@
 (function($) {
 
 MaterioFlag = function(){
+  var _isLoadingList = false ;
 
-  
   /**
   * init()
   */
   function init(){
     trace('init MaterioFlag');
-    $(document).bind('flagGlobalAfterLinkUpdate', onFlaging);
-    $(document).bind('resultscompleted', onResultsUpdated);
+    $(document)
+      .bind('flagGlobalAfterLinkUpdate', onFlaging)
+      .bind('resultscompleted resultschanged', onResultsUpdated)
+      .bind('init-scroller-pager', onInitScrollerPager)
+      .bind('load-scroller-pager', onLoadScrollerPager)
+      .bind('view-mode-changed', onViewModeChanged)
+      .bind('history-state-change', onHistoryStateChange);
+
     ajaxifyLinks();
+
+      // trigger updated event for direct html loading
+    setTimeout(function(){
+      triggerContentChanged();
+    }, 10);  
   };
 
   function onFlaging(event){
     trace('onFlaging', event);
+    refreshBlocks();
+  };
+
+  function refreshBlocks(name){
+    trace('refreshBlocks | name', name);
     if($('#block-materio-flag-materio-flag-mybookmarks').length){
-      $.getJSON('/materioflag/refresh/block/bookmarks', function(json){
-        trace('json', json);
-        $('#block-materio-flag-materio-flag-mybookmarks').replaceWith(json.block);
-        Drupal.flagLink('#block-materio-flag-materio-flag-mybookmarks');
-        // TODO:  update flags stars on search results after unflaging from block  
-        $.event.trigger('mybookmarks-block-updated');
-      });  
-    }    
+      var type = 'bookmarks';
+    }else if($('#block-materio-flag-materio-flag-mylists').length){
+      var type = 'lists';
+    }
     
-    if($('#block-materio-flag-materio-flag-mylists').length){
-      $.getJSON('/materioflag/refresh/block/mylists', function(json){
-        trace('json', json);
-        $('#block-materio-flag-materio-flag-mylists').replaceWith(json.block);
-        Drupal.flagLink('#block-materio-flag-materio-flag-mylists');
-        // TODO:  update flags stars on search results after unflaging from block  
-        $.event.trigger('mylists-block-updated');
+    if(type != undefined){
+      var id = '#block-materio-flag-materio-flag-my'+type;
+      $.getJSON(Drupal.settings.basePath+Drupal.settings.pathPrefix+'materioflag/refresh/block/'+type, function(json){
+        trace('block refreshed '+type, json);
+        $(id).replaceWith(json.block);
+
+        var event = jQuery.Event('my'+type+'-block-updated');
+        event.listname = name;
+        $.event.trigger(event);
       });
     }
 
+    ajaxifyLinks();
   };
 
   function onResultsUpdated(event){
     trace('onResultsUpdated', event);
-
-     ajaxifyLinks(event.container);
+    ajaxifyLinks(event.container);
   };
 
-  function ajaxifyLinks(cont){
-    trace('ajaxifyLinks');
-    var container = cont || 'body';
-    $('a.flag-lists-create:not(.ajax)', container)
+  function ajaxifyLinks(container){
+    trace('ajaxifyLinks', container);
+
+    container = ((container != null) ? container : 'body');
+ 
+    // trace('typeof Drupal.flagLink', typeof Drupal.flagLink);
+    if (typeof Drupal.flagLink != 'undefined')
+      Drupal.flagLink(container);
+
+    $('a.flag-lists-create:not(.ajax-processed)', container)
       .bind('click', onClickCreatLink)
-      .addClass('ajax');
+      .addClass('ajax-processed');
+
+    $('a.open-list:not(.ajax-processed)', '#block-materio-flag-materio-flag-mylists')
+      .bind('click', onClickOpenLink)
+      .addClass('ajax-processed');
+  };
+
+  function onClickOpenLink(event){
+    event.preventDefault();
+    var $link = $(event.currentTarget);
+    var fid = $link.attr('href').match(/lists\/([0-9]+)$/);
+    // trace('type', type);
+    loadList(fid[1]);
+    return false;
+  };
+
+  function loadList(fid){
+    var url = Drupal.settings.basePath+Drupal.settings.pathPrefix+'materioflag/ajax/list/'+fid;
     
+    $.event.trigger('loading-content');
+
+    $.getJSON(url, function(json){
+      trace('json', json);
+      changeContent(json);
+    });
+  };
+
+  function changeContent(json){
+    if(json.return){
+
+      $('.inner-content','#content').html(json.return);
+      
+      $.event.trigger('loaded-content');
+      
+      // no need of ajaxifylinks because it's triggered with resultschanged
+      // ajaxifyLinks('#content');
+
+      var path = Drupal.settings.basePath + Drupal.settings.pathPrefix + json.path;
+      
+      var event = jQuery.Event('new-history-page');
+      event.path = path;
+      event.title = json.title;
+      event.content = json.return;
+      $.event.trigger(event);
+
+      // TODO:  change language links for folders  
+      // for (language in Drupal.settings.materio_search_api_ajax.languages) {
+      //   var l = Drupal.settings.materio_search_api_ajax.languages[language];
+      //   $('#block-locale-language li.'+language+' a').attr('href', Drupal.settings.basePath + l.prefix+'/' + json.search_path + '/' + json.keys)        
+      // };
+
+      triggerContentChanged();
+
+    }else{
+      trace('no results');
+    }
+  };
+
+  function triggerContentChanged(){
+    var event = jQuery.Event('resultschanged');
+    event.container = '#content .flaglist-items';
+    $.event.trigger(event);
   };
 
   function onClickCreatLink(event){
@@ -59,40 +139,203 @@ MaterioFlag = function(){
     var $link = $(event.currentTarget);
     var type = $link.attr('href').match(/[^\/]*$/);
     // trace('type', type);
-    var url = 'materioflag/createlist/form/'+type[0];
+    var url = Drupal.settings.basePath+Drupal.settings.pathPrefix+'materioflag/createlist/form/'+type[0];
 
     $.getJSON(url, function(json){
       trace('json', json);
-      showCreateListForm(json);
+      showCreateListForm(json, $link);
     });
     return false;
-  }
+  };
 
-  function showCreateListForm(json){
-    var $modal = $('<div id="modal"/>').appendTo('body');
+  function showCreateListForm(json, $link){
+    var $modal = $('<div id="modal" class="modal"/>').appendTo('body');
     $modal
       .css({
         position:'absolute',
         top:'40%', left:'50%',
-        marginLeft:'-200px', width:'400px',
+        marginLeft:'-150px', width:'300px',
         zIndex:"99999"
       })
-      .append(json.return);
-      // .find('#flag-lists-form').bind('submit', function(event) {
-      //   trace('submit',event);
-      //   var title = $(this).find('input[name*="title"]').val();
-      //   createList(title);
-      //   return false;
-      // });
+      .append(json.return)
+      .find('input[type="submit"]', '#materio-flag-create-list-form').bind('click', function(event) {
+        event.preventDefault();
+        switch($(this).attr('name')){
+          case 'cancel':
+            trace('cancel',event);
+            $(this).parents('#modal').remove();
+            break;
+          case 'create':
+            trace('create',event);
+            var title = $(this).parents('form').find('input[name*="flag-lists-name"]').val();
+            var type = $(this).parents('form').find('input[name*="type"]').val();
+            createList($modal, type, title, $link);
+            break;
+        }
+        
+        return false;
+      })
+      .parents('form').find('input[type="text"]').focus();
   };
 
-  function createList(title){
-    var url = 'materioflag/createlist/'+title;
-    $.getJSON(url, function(json){
-      trace('json', json);
+  function createList($modal, type, title, $link){
+    var url = Drupal.settings.basePath+Drupal.settings.pathPrefix+'flag-lists/add/'+type+'/js';
+    $.getJSON(url, {name:title}, function(data) {
+      if (data.error) {
+        trace(data.error);
+      }
+      else {
+        // select.append('<option value="'+data.flag.fid+'">'+data.flag.title+'</option>');
+        // $('input.name', $(this)).val('');
+        // dialog.dialog('close');
+        trace('created list : data', data);
+
+        flagEntityWithList(data.flag.name, $link.attr('nid'), $link.attr('token'));
+        $modal.remove();
+      }
     });
   };
   
+  function flagEntityWithList(name, nid, token){
+    // var ret;
+    // Send POST request
+    $.ajax({
+      type: 'POST',
+      url: Drupal.settings.basePath+Drupal.settings.pathPrefix+'flag-lists/flag/'+name+'/'+nid,
+      data: { js: true, token: token },
+      dataType: 'json',
+      success: function (data2) {
+        trace('node taged with newly created list : data2', data2)
+        if (data2.status) {
+          // success
+          refreshBlocks(name);
+          refreshNodeLinks();
+        }else {
+          // Failure.
+          alert(data2.errorMessage);
+        }
+      },
+      error: function (xmlhttp) {
+        alert('An HTTP error '+ xmlhttp.status +' occurred.\n'+ element.href);
+      }
+    });
+  };
+
+  function refreshNodeLinks(){
+    
+    var nids = new Array();
+    $('.flag-lists-entity-links').parents('.node').each(function(index) {
+      nids.push($(this).attr('class').match(/node-([0-9]+)/)[1]);
+    });
+    trace('nids', nids);
+    
+    var url = Drupal.settings.basePath+Drupal.settings.pathPrefix+'materioflag/nodelinks';
+    $.getJSON(url, {nids:nids.join(";")}, function(data) {
+      trace('data', data);
+      for(nid in data.links){
+        trace('nid', nid);
+        trace('data.links[nid]', data.links[nid]);
+        $('.node-'+nid+' .flag-lists-entity-links').parent('.item-list').replaceWith(data.links[nid]);
+
+        // trace('typeof Drupal.flagLink', typeof Drupal.flagLink);
+        // if (typeof Drupal.flagLink != 'undefined')
+        //   Drupal.flagLink($('.node-'+nid+' .flag-lists-entity-links'));  
+
+        ajaxifyLinks('.node-'+nid+' .flag-lists-entity-links');
+
+      }
+    });
+    
+    var event = jQuery.Event('materioflag-nodelinks-updated');
+    event.nids = nids;
+    $.event.trigger(event);
+  };
+
+  function onInitScrollerPager(event){
+    // trace('MaterioFlag :: onInitScrollerPager');
+    if (isList()){
+      // trace('event.pager', event);
+      event.pager.hide();
+    }
+  };
+
+  function onLoadScrollerPager(event){
+    if (isList())
+      loadNextListPage(event.href);
+  };
+
+  function loadNextListPage(href){
+    // trace('loadNextListPage', href);
+    if(!_isLoadingList){
+      var fid = href.match(/lists\/([^\/|\?]+)/);
+      var page = href.match(/\?page=([0-9]+)/);
+      var url = Drupal.settings.basePath+Drupal.settings.pathPrefix+'materioflag/ajax/list/'+fid[1]+'/'+page[1];
+      // trace('url', url);
+      loadNextPage(url, $('.materio-flags-list', '#content'), '.flaglist-items');
+    }
+  };
+
+  function loadNextPage(url, $container, target){
+    trace('loadNextPage');
+    _isLoadingList = true;
+    $container.addClass('loading');
+    $.getJSON(url, function(json){
+      trace('json', json);
+      _isLoadingList = false;
+      $container.removeClass('loading');
+      addNextpage(json, target);
+    });
+  };
+
+  function addNextpage(json, container_class){
+    var $newcontent = $(json.return),
+        $newitems = $(container_class, $newcontent).children('article').addClass('just-added'),
+        $newpager = $('ul.pager', $newcontent);
+    
+    $(container_class, '#content').append($newitems);
+    $('ul.pager', '#content').replaceWith($newpager.hide());
+
+
+    // TODO: animation, this should be on theme side
+    $(container_class, '#content').children('.just-added').each(function(i){
+      // $(this).delay(5000*i).removeClass('just-added');
+      var $this = $(this);
+      setTimeout(function(){
+        $this.removeClass('just-added');
+      }, 150*i);
+    });
+
+    var event = jQuery.Event('resultscompleted');
+    event.container = $(container_class, '#content');
+    $.event.trigger(event);
+  };
+
+  function onViewModeChanged(event){
+    if (isList())
+      loadList(getFid());
+  };
+
+  /**
+  * history
+  */
+  function onHistoryStateChange(event){
+    if(isList())
+      triggerContentChanged();
+  };
+
+  /**
+  * Helpers
+  */
+
+  function getFid(){
+    return $('.materio-flags-list', '#content').attr('fid');;
+  };
+
+  function isList(){
+    return $('.materio-flags-list', '#content').length;
+  };
+
+
   init();
 
 

js/materio_search_api_ajax.js

@@ -3,21 +3,16 @@
 (function($) {
 
 MaterioSearchApiAjax = function(){
-  
-  var _History = window.History,
-      _isloadingresults = false;
-      _$content = $('#content'),
-      isExplore = $('.search-results', _$content).length,
-      isActuality = $('.actuality-items', _$content).length;
+  var _isloadingresults = false;
+  var _$content = $('#content');
       // TODO:  define $content by module settings  
   /**
   * init()
   */
   function init(){
-    trace('init module');
+    trace('init MaterioSearchApiAjax');
 
     initSearchAjax();
-    initHistoryNav();
     initViewMode();
 
   };
@@ -27,7 +22,6 @@ MaterioSearchApiAjax = function(){
   */
   function initSearchAjax(){
     // trace('initSearchAjax');
-    // $('#edit-searchfield').focus();
 
     $('#materio-search-api-search-form').bind('submit', function(event) {
       // trace('search submited', event);
@@ -36,36 +30,28 @@ MaterioSearchApiAjax = function(){
         loadResults(getSearchKeys());
       },10);
       return false;
-    });  
-
+    });
 
     // /!\ AUTOCOMPLETE SELECT EVENT need a patch http://drupal.org/node/365241#comment-5374686
     $("#edit-searchfield").bind('autocompleteSelect', function(event) {
       $(this).parents('.form').trigger('submit');
     });
     
-    _$content
-      .bind('jsp-initialised', function(event, isScrollable){
-        trace('isScrollable = '+isScrollable);
-        // TODO:  better to check scroll-y than isscrollable, load next page before the end of scroll  
-        if(!isScrollable)
-          infinitScrollPager();
-          // TODO:  what happend when there is no more page
-      })
-      .bind('jsp-scroll-y', function(event, scrollPositionY, isAtTop, isAtBottom){
-          if(isAtBottom)
-            infinitScrollPager();
-      });
-
+    $(document)
+      .bind('init-scroller-pager', onInitScrollerPager)
+      .bind('load-scroller-pager', onLoadScrollerPager)
+      .bind('view-mode-changed', onViewModeChanged)
+      .bind('history-state-change', onHistoryStateChange);
+    
     // trigger updated event for direct html loading
       setTimeout(function(){
         var event = jQuery.Event('resultschanged');
         
-        if(isExplore)
-          event.container = $('.search-results', _$content);
+        if(isExplore())
+          event.container = '#content .search-results';
 
-        if(isActuality)
-          event.container = $('.actuality-items', _$content);  
+        if(isActuality())
+          event.container = '#content .actuality-items';  
 
         $.event.trigger(event);  
       }, 10);  
@@ -93,6 +79,7 @@ MaterioSearchApiAjax = function(){
 
 
       if(!_isloadingresults){
+        $.event.trigger('loading-content');
         _isloadingresults = true;
         $('#materio-search-api-search-form').addClass('loading');
         // TODO:  record ajax path in a variable from materio_search_api_ajax_init
@@ -100,57 +87,75 @@ MaterioSearchApiAjax = function(){
           {'types':types},
           function(json){
             trace('json', json);
-            $.event.trigger('resultsloaded');      
+            $.event.trigger('loaded-content');      
             _isloadingresults = false;
             $('#materio-search-api-search-form').removeClass('loading');
-            updateContent(json);
+
+            var path = Drupal.settings.basePath + Drupal.settings.pathPrefix + json.search_path + '/' + json.keys;
+            
+            var event = jQuery.Event('new-history-page');
+            event.path = path;
+            event.title = json.keys;
+            event.content = json.return;
+            $.event.trigger(event);
+            
+            for (language in Drupal.settings.materio_search_api_ajax.languages) {
+              var l = Drupal.settings.materio_search_api_ajax.languages[language];
+              $('#block-locale-language li.'+language+' a').attr('href', Drupal.settings.basePath + l.prefix+'/' + json.search_path + '/' + json.keys)        
+            };
+
+            changeContent(json);
+
         });
       }
     }
-    
   };
 
-  function updateContent(json){
+  function loadActuality(){
+    if(!_isloadingresults){
+      $.event.trigger('loading-content');
+      _isloadingresults = true;
+      $('#materio-search-api-search-form').addClass('loading');
+
+      var url = Drupal.settings.basePath+Drupal.settings.pathPrefix+'materio_search_api_ajax/actuality';
+      $.getJSON(url, 
+        function(json){
+          trace('json', json);
+          $.event.trigger('resultsloaded');      
+          _isloadingresults = false;
+          $('#materio-search-api-search-form').removeClass('loading');
+          changeContent(json);
+      });
+    }
+  };
+
+  function changeContent(json){
     if(json.return){
-
+      $.event.trigger('loaded-content');
       $('.inner-content',_$content).html(json.return);
-
-      var path = Drupal.settings.basePath + Drupal.settings.pathPrefix + json.search_path + '/' + json.keys;
-      
-      _History.pushState({content:json.return}, json.keys, path);
-      $('input[name=location]','#feedback-form').attr('value', path);
-
-      for (language in Drupal.settings.materio_search_api_ajax.languages) {
-        var l = Drupal.settings.materio_search_api_ajax.languages[language];
-        $('#block-locale-language li.'+language+' a').attr('href', Drupal.settings.basePath + l.prefix+'/' + json.search_path + '/' + json.keys)        
-      };
-
-      var event = jQuery.Event('resultschanged');
-      event.container = $('.search-results', _$content);
-      $.event.trigger(event);
-
+      triggerContentChanged();
     }else{
       trace('no results');
     }
   };
 
+  function triggerContentChanged(){
+    var event = jQuery.Event('resultschanged');
+    event.container = '#content .search-results, #content .actuality-items';
+    $.event.trigger(event);
+  };
 
-  /** 
-  * infinit scroll
-  */
-  function infinitScrollPager(){
-    var $nextpage = $('ul.pager .pager-current', _$content).next(),
-        href = $('a', $nextpage).attr('href');
-    
-    if(href){
-      if (isExplore)
-        loadNextResultsPage(href);
-
-      if(isActuality)
-        loadNextActualityPage(href);
-    }
+  function onInitScrollerPager(event){
+    if(isActuality() || isExplore())
+      event.pager.hide();
+  };
 
+  function onLoadScrollerPager(event){
+    if (isExplore())
+      loadNextResultsPage(event.href);
 
+    if(isActuality())
+      loadNextActualityPage(event.href);
   };
 
   function loadNextResultsPage(href){
@@ -192,8 +197,9 @@ MaterioSearchApiAjax = function(){
         $newpager = $('ul.pager', $newcontent);
     
     $(container_class, _$content).append($newitems);
-    $('ul.pager', _$content).replaceWith($newpager);
+    $('ul.pager', _$content).replaceWith($newpager.hide());
 
+    // TODO: animation, this should be on theme side
     $(container_class, _$content).children('.just-added').each(function(i){
       // $(this).delay(5000*i).removeClass('just-added');
       var $this = $(this);
@@ -207,28 +213,14 @@ MaterioSearchApiAjax = function(){
     $.event.trigger(event);
   };
 
-  /**
-  * history navigation
-  */
-  function initHistoryNav(){
-    var state = _History.getState();
-    _History.log('initial:', state.data, state.title, state.url);    
-
-    _History.Adapter.bind(window,'statechange',function(){ 
-      var state = _History.getState(); 
-      _History.log('statechange:', state.data, state.title, state.url);
-      // TODO:  History : empty content if we go back to the homepage  
-      $('.inner-content',_$content).html(state.data.content);
-    });
-
-  };
-
   /**
   * viewmode
   */
   function initViewMode(){
     $('.viewmode-link').click(function(event){
+      event.preventDefault();
       changeViewMode($(this).attr('rel'), $(this));
+      return false;
     });
   };
 
@@ -236,7 +228,8 @@ MaterioSearchApiAjax = function(){
     $.getJSON(Drupal.settings.basePath+'materio_search_api_ajax/viewmode/change/'+vm, function(json){
       trace('viewmode json', json);
       if (json.statut == "saved"){
-        loadResults(getSearchKeys());
+        // loadResults(getSearchKeys());
+        $.event.trigger('view-mode-changed');
         $('.viewmode-link').removeClass('active');
         $btn.addClass('active');
       }
@@ -244,6 +237,34 @@ MaterioSearchApiAjax = function(){
     });
   };
 
+  function onViewModeChanged(event){
+    if (isExplore())
+      loadResults(getSearchKeys());
+
+    if(isActuality())
+      loadActuality();
+  };
+
+  /**
+  * history
+  */
+  function onHistoryStateChange(event){
+    if(isExplore() || isActuality())
+      triggerContentChanged();
+  };
+
+  /**
+  * helpers
+  */
+  function isExplore(){
+     return $('.search-results', '#content').length;
+  };
+
+  function isActuality(){
+    return $('.actuality-items', '#content').length;
+  };
+    
+
 
   init();