edlp_d8/sites/all/themes/custom/edlptheme/assets/scripts/main.js

(function($) {

  EdlpTheme = function(){

    var _$body = $('body');
    var _is_front = _$body.is('.path-frontpage');
    var _$corpus_map;
    var _$content_container = $('.layout-container>main>.layout-content');
    var _$ajaxLinks;

    function init(){
      console.log("EdlpTheme init()");
      _$body.on('corpus-map-ready', onCorpusMapReady);
      initScrollbars();
      initAjaxLinks();
      if (_$body.is('.path-productions')) {
        initProductions();
      }
    };

    //  ___             _ _ ___
    // / __| __ _ _ ___| | | _ ) __ _ _ _ ___
    // \__ \/ _| '_/ _ \ | | _ \/ _` | '_(_-<
    // |___/\__|_| \___/_|_|___/\__,_|_| /__/
    function initScrollbars(){
      console.log("initScrollbars");
      $('.os-scroll').overlayScrollbars({
        overflowBehavior:{x:'h',y:'scroll'}
      });
    };

    //    _    _
    //   /_\  (_)__ ___ __
    //  / _ \ | / _` \ \ /
    // /_/ \_\/ \__,_/_\_\
    //      |__/

    // TODO: add url hash nav
    // TODO: implement history.js
    function  initAjaxLinks(){
      console.log('initAjaxLinks');
      $('a', '#block-mainnavigation, #block-footer.menu--footer, #block-productions').addClass('ajax-link');

      _$ajaxLinks = $('.ajax-link')
        .each(function(i,e){
          var $this = $(this);

          // avoid already ajaxified links
          if($this.is('.ajax-enable')) return;

          var sys_path = $this.attr('data-drupal-link-system-path');
          if(sys_path){
            // convert node link to edlp_ajax_node module links
            m = sys_path.match(/^\/?(node\/\d+)$/g);
            if(m) $this.attr('data-drupal-link-system-path', 'edlp/'+m[0]);
          }
          $this.on('click', onClickAjaxLink).addClass('ajax-enable');
        })

      ;
    };

    function onClickAjaxLink(e){
      e.preventDefault();
      var $link = $(this);

      if($link.is('.is-active'))
        return false;

      var sys_path = $(this).attr('data-drupal-link-system-path');
      if(sys_path == '<front>'){
        backToFrontPage();
        return false;
      }

      var path = window.location.origin + drupalSettings.path.baseUrl + sys_path;
      _$body.addClass('ajax-loading');
      $link.addClass('ajax-loading');
      // $.getJSON(path, {}, function(data){
      //   onAjaxLinkLoaded(data, $link, sys_path);
      // });
      $.getJSON(path+'/ajax', {})
        .done(function(data){
          onAjaxLinkLoaded(data, $link, sys_path);
        })
        .fail(function(jqxhr, textStatus, error){
          onAjaxLinkLoadError(jqxhr, textStatus, error, $link, sys_path);
        });

      return false;
    };

    function onAjaxLinkLoadError(jqxhr, textStatus, error, $link, sys_path){
      console.warn('fail : error', jqxhr.responseText);
      $link.removeClass('ajax-loading');
      _$body.removeClass('ajax-loading');
    };

    function onAjaxLinkLoaded(data, $link, sys_path){
      console.log('ajax link loaded : data', data);
      _$body.removeClass('ajax-loading');

      // replace all content with newly loaded
      _$content_container.html(data.rendered);

      // add body class for currently loaded content
      _$body.removeClass().addClass('path-'+sys_path.replace(/\//g, '-'));
      // id node add a generic path-node class to body
      m = sys_path.match(/^\/?(edlp\/node\/\d+)$/g);
      if(m)
        _$body.addClass('path-edlp-node');

      // handle clicked link classes
      _$ajaxLinks.removeClass('is-active');
      $link.removeClass('ajax-loading').addClass('is-active');

      // if block attached (eg : from edlp_productions module)
      if(typeof data.block != 'undefined'){
        // if block not already added
        if(!$('#'+data.block.id, '.region-'+data.block.region).length){
          $('.region-'+data.block.region).append(data.block.rendered);
        }
      }

      initScrollbars();

      if(sys_path == "productions")
        initProductions();

      initAjaxLinks();

    };

    //   ___
    //  / __|___ _ _ _ __ _  _ ___
    // | (__/ _ \ '_| '_ \ || (_-<
    //  \___\___/_| | .__/\_,_/__/
    //              |_|
    function onCorpusMapReady(e){
      console.log('theme : onCorpusReady');
      _$corpus_map = $('canvas#corpus-map');
      _$corpus_map.on('corpus-cliked-on-map', function(e) {
        console.log('theme : corpus-cliked-on-map');
        backToFrontPage();
      });
    }

    //  ___             _         _   _
    // | _ \_ _ ___  __| |_  _ __| |_(_)___ _ _  ___
    // |  _/ '_/ _ \/ _` | || / _|  _| / _ \ ' \(_-<
    // |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/
    function initProductions(){
      console.log('theme : initProductions');
      var $grid = $('.row', _$content_container).masonry({
        itemSelector:'.col',
        columnWidth:'.col-2'
      });

      // layout Masonry after each image loads
      $grid.imagesLoaded().progress( function() {
        $grid.masonry('layout');
      });
      // var $grid = $('.row', _$content_container).imagesLoaded( function() {
      //   // init Masonry after all images have loaded
      //   $grid.masonry({
      //     itemSelector:'.col',
      //     columnWidth:'.col-2'
      //   });
      // });
    };


    //  ___            _   ___
    // | __| _ ___ _ _| |_| _ \__ _ __ _ ___
    // | _| '_/ _ \ ' \  _|  _/ _` / _` / -_)
    // |_||_| \___/_||_\__|_| \__,_\__, \___|
    //                             |___/
    function backToFrontPage(){
      closeAllModals();
      // assume we are going back to front page
      $('body').removeClass().addClass('path-frontpage');
      $('a[data-drupal-link-system-path="<front>"]').addClass('is-active');

    }

    //  __  __         _      _
    // |  \/  |___  __| |__ _| |___
    // | |\/| / _ \/ _` / _` | (_-<
    // |_|  |_\___/\__,_\__,_|_/__/
    function closeAllModals(){
      console.log('theme : closeAllModals');
      // TODO: animate the remove
      _$content_container.html('');
      _$ajaxLinks.removeClass('is-active');
    };

    init();
  } // end EdlpTheme()

  $(document).ready(function($) {
    var edlptheme = new EdlpTheme();
  });


})(jQuery);