materio-base-d7/js/materio_flag.js

// @codekit-prepend "gui.js"

(function($) {

MaterioFlag = function(){
  var _isLoadingList = false ;

  /**
  * init()
  */
  function init(){
    trace('init MaterioFlag');
    $(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){
      var type = 'bookmarks';
    }else if($('#block-materio-flag-materio-flag-mylists').length){
      var type = 'lists';
    }
    
    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);
  };

  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-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){
    event.preventDefault();
    var $link = $(event.currentTarget);
    var type = $link.attr('href').match(/[^\/]*$/);
    // trace('type', type);
    var url = Drupal.settings.basePath+Drupal.settings.pathPrefix+'materioflag/createlist/form/'+type[0];

    $.getJSON(url, function(json){
      trace('json', json);
      showCreateListForm(json, $link);
    });
    return false;
  };

  function showCreateListForm(json, $link){
    
    // google analytics
    var estat = jQuery.Event('record-stat');
    estat.path = false;
    estat.categorie = 'FlagLists';
    estat.action = 'show create form';
    estat.label = '';  
    $.event.trigger(estat);

    var $modal = $('<div id="modal" class="modal"/>').appendTo('body');
    $modal
      .css({
        position:'absolute',
        top:'40%', left:'50%',
        marginLeft:'-150px', width:'300px',
        zIndex:"99999"
      })
      .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();
            
            // google analytics
            var estat = jQuery.Event('record-stat');
            estat.path = false;
            estat.categorie = 'FlagLists';
            estat.action = 'cancel create form';
            estat.label = '';  
            $.event.trigger(estat);

            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();

            // google analytics
            var estat = jQuery.Event('record-stat');
            estat.path = false;
            estat.categorie = 'FlagLists';
            estat.action = 'submit create form';
            estat.label = 'title : '+title;  
            $.event.trigger(estat);

            createList($modal, type, title, $link);
            break;
        }
        
        return false;
      })
      .parents('form').find('input[type="text"]').focus();
  };

  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) {
          
          // google analytics
          var estat = jQuery.Event('record-stat');
          estat.path = false;
          estat.categorie = 'FlagLists';
          estat.action = 'node flaged';
          estat.label = 'nid : '+nid+' | flag : '+name;  
          $.event.trigger(estat);

          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();


};

var materioflag = new MaterioFlag();
  
})(jQuery);