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

(function($, Drupal, drupalSettings) {

  EdlpTheme = function(){
    var _ajax_settings = drupalSettings.edlp_ajax;
    var _$body = $('body');
    // var _is_front = drupalSettings.path.isFront;
    var _corpus_ready = false;
    var _$corpus_canvas;
    var _$row = $('main[role="main"]>.layout-content>.row');
    var _$ajaxLinks;
    var _audioPlayer;
    var _randomPlayer;
    var _compoPlayer;
    var _ajax_timing = {
      start:0,
      end:0
    };

    //  ___      _ _
    // |_ _|_ _ (_) |_
    //  | || ' \| |  _|
    // |___|_||_|_|\__|
    function init(){
      console.log("EdlpTheme init()");

      _audioPlayer = new AudioPlayer();
      _compoPlayer = new CompoPlayer();

      initAjaxLinks();

      initHistory();

      if(!drupalSettings.path.isFront)
        return;

      initEvents();

    };

    //  ___             _
    // | __|_ _____ _ _| |_ ___
    // | _|\ V / -_) ' \  _(_-<
    // |___|\_/\___|_||_\__/__/
    function initEvents(){
      _$body
        .on('corpus-map-ready', onCorpusMapReady)
        .on('on-studio-chutier-updated', initAjaxLinks)
        .on('studio-initialized', function(e){
          _compoPlayer.newCompo();
        })
        .on('studio-not-active', function(e){
          _compoPlayer.deactivate();
        })
        .on('on-studio-compo-updated', function(e){
          initAjaxLinks();
          _compoPlayer.refresh();
        })
        .on('on-studio-compo-opened', function(e){
          initAjaxLinks();
          _compoPlayer.newCompo();
        })
        .on('search-results-loaded', initAjaxLinks)
        // do not close index or notice modale on entree click
        .on('open_entree', function(e){
          console.log('on_open_entree : e', e);
          closeAllModals();

          // add body class for currently loaded content
          // var body_classes = [
          //   'path-'+sys_path.replace(/\//g, '-'),
          //   'entity-type-'+data.entity_type,
          //   'bundle-'+data.bundle,
          //   'view-mode-'+data.view_mode
          // ];
          _$body.removeClass();//.addClass(body_classes.join(' '));

          // record new history state
          if(typeof e.url != 'undefined'){
            // var state = {
            //   ajax_path:null,
            //   sys_path:null,
            //   entree_tid:e.tid
            // };
            var state = getSysPathState(e.sys_path);
            history.pushState(state, null, e.url);

            // piwik
            if(typeof _paq !== 'undefined'){
              // page tracking
              // https://matomo.org/blog/2017/02/how-to-track-single-page-websites-using-piwik-analytics/
              _paq.push(['setCustomUrl', e.url]);
              _paq.push(['setDocumentTitle', e.title]);
              _paq.push(['trackPageView']);
              // js event
              // trackEvent(category, action, [name], [value])
              // _paq.push(['trackEvent', 'AjaxNav', 'loaded', state.url]);
            }
          }
        })
        .on('close_entree', function(e){
          backToFrontPage();
        });
    }

    //  ___             _ _ ___
    // / __| __ _ _ ___| | | _ ) __ _ _ _ ___
    // \__ \/ _| '_/ _ \ | | _ \/ _` | '_(_-<
    // |___/\__|_| \___/_|_|___/\__,_|_| /__/
    function initScrollbars(){
      // console.log("initScrollbars");
      // TODO: find a better js scroll than overlayScrollbars which does not handle well max-height + overflow-y:auto;
      // $('.os-scroll').overlayScrollbars({
      //   overflowBehavior:{
      //     x:'h',
      //     y:'scroll',
      //     clipAlways:false
      //   }
      // });
    };

    //    _    _
    //   /_\  (_)__ ___ __
    //  / _ \ | / _` \ \ /
    // /_/ \_\/ \__,_/_\_\
    //      |__/
    function getSysPathState(sys_path, view_mode){
      // console.log('Theme : getSysPathState', sys_path);
      var state = {
        'sys_path':sys_path,
        'ajax_path': sys_path
      };

      // convert node link to edlp_ajax_node module links
      var node_match = state.ajax_path.match(/^\/?(node\/(\d+))$/i);
      console.log('node_match', node_match);
      var term_match = state.ajax_path.match(/^\/?(taxonomy\/term\/(\d+))$/i);
      console.log('term_match', term_match);
      if(node_match){
        // TODO: detect audio links which will open audioplayer and wont load any ajax content unless view_mode "article" or "transcript"

        state.ajax_path = _ajax_settings.entityjson_path+'/'+node_match[1];
        state.node_nid = node_match[2];
        // check for viewmode attribute
        if(view_mode){
          state.ajax_path += '/'+view_mode;
          state.view_mode = view_mode;
        }
      }else if(term_match){
        // terms are always entrees, there's no other vocabulary links in front
        state.ajax_path = _ajax_settings.entityjson_path+'/'+term_match[1];
        state.ajax_path = state.ajax_path.replace(/taxonomy\/term/, 'taxonomy_term');
        state.entree_tid = term_match[2];
        // check for viewmode attribute
        if(view_mode){
          state.ajax_path += '/'+view_mode;
          state.view_mode = view_mode;
        }else{
          state.ajax_path = null;
        }
      }else{
        // convert other link to ajax
        // TODO: we assume that other links (no node, no term) are all from own modules (e.g. productions) !! may not be true !!
        state.ajax_path += '/ajax'
      }
      return state;
    };
    function ajaxLoadContent(state){
      console.log('ajaxLoadContent : state', state);
      _$body.addClass('ajax-loading');
      _ajax_timing.start = performance.now();
      var path = window.location.origin + Drupal.url(state.ajax_path);
      $.getJSON(path, {})
        .done(function(data){
          onAjaxLoaded(data, state);
        })
        .fail(function(jqxhr, textStatus, error){
          onAjaxLoadError(jqxhr, textStatus, error, state.sys_path);
        });
    };
    function onAjaxLoadError(jqxhr, textStatus, error, sys_path){
      console.warn('ajaxlink load failed for '+sys_path+' : '+error, jqxhr.responseText);
      $('.ajax-loading').removeClass('ajax-loading');
      _$body.removeClass('ajax-loading');
    };
    function onAjaxLoaded(data, state){
      console.log('ajax loaded : state', state);
      // console.log(data);
      // reset all style may been added by other pages (like masonry for productions)
      // and replace all content with newly loaded
      // TODO: build a system to replace or append contents (like studio + search)
      if(data.entity_type == "node" && data.bundle == "evenement"){
        if(_$row.find('.col.event').length){
          _$row.find('.col.event').replaceWith(data.rendered);
        }else if(_$row.find('.col.aside').length){
          _$row.find('.col.aside').replaceWith(data.rendered);
        }else{
          _$row.append(data.rendered);
        }
      }else{
        _$row.removeAttr('style').html(data.rendered);
      }

      // add body class for currently loaded content
      var body_classes = [
        'path-'+state.sys_path.replace(/\//g, '-'),
        'entity-type-'+data.entity_type,
        'bundle-'+data.bundle,
        'view-mode-'+data.view_mode
      ];
      _$body.removeClass().addClass(body_classes.join(' '));

      // id node add a generic path-node class to body
      // m = state.sys_path.match(/^\/?(node\/\d+)$/g);
      // if(m)
      if(state.node_nid)
        _$body.addClass('path-edlp-node');

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

      if(typeof state.selector != 'undefined'){
        // in case of entree link (actualy, selector is used only for entries links)
        // TODO:  unfortunatly on initFirstLoad there is no selector property
        console.log('selector', state.selector);
        $('a[selector="'+state.selector+'"]').addClass('is-active');
        initAudioLinksInContent();
      }else{
        if(typeof state.view_mode != 'undefined'){
          $('a[viewmode="'+state.view_mode+'"][data-drupal-link-system-path="'+state.sys_path+'"]').addClass('is-active');
        }else{
          $('a[data-drupal-link-system-path="'+state.sys_path+'"]').addClass('is-active');
        }
        // as new content is not related to entree, we trigger close entree
        _$body.trigger({'type':'new-content-not-entree-ajax-loaded'});
      }

      // if bundle page (productions) activate production links
      if (typeof data.bundle != 'undefined' && data.bundle == "page") {
        $('a[data-drupal-link-system-path="productions"]').addClass('is-active-trail');
      }
      // if node is in production menu tree, set first level of tree active, e.g. pieces sonores
      if (typeof data.menu_parents != 'undefined') {
        for (var i = 0; i < data.menu_parents.length; i++) {
          var menu_sys_path = data.menu_parents[i];
          $('a[data-drupal-link-system-path="'+menu_sys_path+'"]').addClass('is-active-trail');
        }
      }

      // if block attached (eg : from edlp_productions module)
      // not used anymore as production block is always present (but not visible)
      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(state.sys_path == "productions"){
        initProductions();
      }else{
        addCloseModalBtnToCols();
      }

      // enregistrement transcription
      if(data.entity_type == "node" && data.bundle == "enregistrement" && data.view_mode == "transcript"){
        // window.requestAnimationFrame(initEnregistrementTranscript);
        initEnregistrementTranscript();
      }

      // update the language switcher block if it comes in the response
      if(typeof data.translations_links != 'undefined'){
        console.log('state',state);
        var lang_code = drupalSettings.path.currentLanguage;
        var $links = $(data.translations_links);
        // set active link
        $links.find('li[hreflang="'+lang_code+'"]').addClass('is-active').find('a').addClass('is-active');

        if(state.view_mode){
          $links.find('a').each(function(i,e){
            var $a = $(this);
            $a.attr('href', $a.attr('href')+'#'+state.view_mode);
          });
        }

        // if(state.selector){
        //   $links.find('a').attr('selector', state.selector);
        // }

        $('ul','.block.language-switcher-language-url').replaceWith($links);
      }

      initAjaxLinks();

      // trigger other modules behaviours
      _$body.trigger({'type':'new-content-ajax-loaded'});

      // and call druapl behaviours
      Drupal.attachBehaviors(_$row[0]);

      _$body.attr('booted', 'booted');
      _$body.removeClass('ajax-loading');

      // url is null means that we are loading content on popState event
      // so we don't record the state again
      if(state.url){
        // var state = {
        //   ajax_path:ajax_path,
        //   sys_path:sys_path,
        // };
        // console.log('url:'+url+' ; state',state);
        // console.log(window.location);
        // /!\ we can not pushestate with absolute url /!\
        history.pushState(state, null, state.url);

        // piwik
        if(typeof _paq !== 'undefined'){
          // page tracking
          // https://matomo.org/blog/2017/02/how-to-track-single-page-websites-using-piwik-analytics/
          _paq.push(['setCustomUrl', state.url]);
          _paq.push(['setDocumentTitle', data.title]);
          // TODO: piwik track load time
          _ajax_timing.end = performance.now();
          _paq.push(['setGenerationTimeMs', _ajax_timing.end-_ajax_timing.start]);
          _paq.push(['trackPageView']);


          // js event
          // trackEvent(category, action, [name], [value])
          _paq.push(['trackEvent', 'AjaxNav', 'loaded', state.url]);
        }
      }
    };

    function initAudioLinksInContent(){
      _$row.find('a.audio-link')
        .on('mouseover', function(event) {
          event.preventDefault();
          if(_corpus_ready){
            _$corpus_canvas.trigger({
              type:'mouseover-audio-link',
              nid:$(this).attr('nid')
            });
          }
        })
        .on('mouseout', function(event) {
          event.preventDefault();
          if(_corpus_ready){
            _$corpus_canvas.trigger({
              type:'mouseout-audio-link',
              nid:$(this).attr('nid')
            });
          }
        });
    };

    function addCloseModalBtnToCols(){
      $('.col', _$row).each(function(index, el) {

        if($('span.close-col-btn', this).length)
          return true;

        $(this).children('.wrapper').prepend($('<span>')
          .addClass('close-col-btn')
          .on('click', onCloseModal)
        );
      });
    };

    function onCloseModal(e){
      // check for theme attribute and emmit event
      var $col = $(this).parents('.col');
      var theme = $col.attr('theme');
      if(theme != ''){
        _$body.trigger({'type':theme+'-col-closed'});
      }
      // remove the col
      $col.remove();
      // if row is empty and we are not in productions or entree notice|index call closeAllModals()
      if(!$('.col', _$row).length
        && !_$body.is('.entity-type-node.bundle-page')
        && !_$body.is('.entity-type-taxonomy_term.bundle-entrees')){
          backToFrontPage();
      }
    };

    //    _    _            ___ _         _
    //   /_\  (_)__ ___ __ | _ ) |___  __| |__ ___
    //  / _ \ | / _` \ \ / | _ \ / _ \/ _| / /(_-<
    // /_/ \_\/ \__,_/_\_\ |___/_\___/\__|_\_\/__/
    //      |__/
    // NOT USED (YET)
    function refreshAllBlocks(){
      var path = window.location.origin + Drupal.url(_ajax_settings.blocksjson_path);
      $.getJSON(path, {})
        .done(function(data){
          onAjaxBlockLoaded(data);
        })
        .fail(function(jqxhr, textStatus, error){
          onAjaxBlockLoadError(jqxhr, textStatus, error);
        });
    };
    function onAjaxBlockLoadError(jqxhr, textStatus, error){
      console.warn('ajax block load failed: '+error, jqxhr.responseText);
    };
    function onAjaxBlockLoaded(data){
      console.log('onAjaxBlockLoaded', data);
      // TODO: update each blocks (exepted language switcher)
      for (var blockname in data.blocks) {
        var block = data.blocks[blockname];
        console.log(blockname, block);
        $(block.id).replaceWith(block.rendered);
      }
    };

    //  _  _ _    _
    // | || (_)__| |_ ___ _ _ _  _
    // | __ | (_-<  _/ _ \ '_| || |
    // |_||_|_/__/\__\___/_|  \_, |
    //                        |__/
    function initHistory(){
      initFirstLoad();
      window.addEventListener('popstate', onHistoryPopState);
    };
    function initFirstLoad(){
      console.log('theme : initFirstLoad()');

      // var origin_sys_path = window.localStorage.getItem('edlp_origin_path');
      var edlp_origin = JSON.parse(window.localStorage.getItem('edlp_origin'));
      console.log('edlp_origin', edlp_origin);

      if(edlp_origin != null && edlp_origin.sys_path){
        // hash is used as viewmode for taxonomy term entrees load (index or notice)
        // and for audio contents (article|transcript)
        var view_mode = edlp_origin.hash.replace('#', '');

        // create history state
        var state = getSysPathState(edlp_origin.sys_path, view_mode);

        // open entree tray in case of entree index|notice
        // (index or notice will be opened with ajaxLoadContent)
        // refactorized with new infos from edlp_origin
        // if(view_mode){
        if(edlp_origin.entity_type == "taxonomy_term"
            && edlp_origin.entity_bundle == "entrees"
            && view_mode){
          // var $link = $('[href="'+edlp_origin.url+'"][viewmode="'+view_mode+'"]');
          // var selector = $link.attr('selector') || null;

          // record the selector in the state for actions after ajaxContentLoaded
          state.selector = 'entree-'+view_mode+'-link-'+edlp_origin.entity_id; // entree-index-link-125
          // if(selector){
            // in case of entree link (actualy, selector is used only for entries links)
            // TODO: use a promise
            // TODO: but what if corpus ready before onAjaxLoaded >> use a promise !!
            if(_corpus_ready){
              _$corpus_canvas.trigger({
                type:'open-entree',
                // tid:$link.attr('tid')
                tid:edlp_origin.entity_id
              });
            }else{
              // else : EdlpCorpus will check when ready if entry item (notice or index) is already .is-active
              // .is-active class is added by onAjaxLoaded() (when content is loaded)
              // $('li.entree[tid="'+$link.attr('tid')+'"] a.term-link').addClass('is-active');
              $('li.entree[tid="'+edlp_origin.entity_id+'"] a.term-link').addClass('is-active');
            }
          // }
        }

        // check if audio link
        if(edlp_origin.audio_url){
          var node = {
            nid:edlp_origin.entity_id,
            audio_url:edlp_origin.audio_url
          };
          _audioPlayer.openDocument(node, 'history_first_load');
          if(view_mode == ""){
            // if audio only record in state
            state.audio = true;
            state.node = node;
            // we don't laod ajax content so we boot the home
            _$body.attr('booted', 'booted');
          }else{
            // ajax load content for audio only if article or transcript
            ajaxLoadContent(state);
          }
        }
        // only if not entree path
        // only if not audio (without article or transcript) path
        else if(state.ajax_path){
          // load content through ajax
          // ajaxLoadContent(null, state.sys_path, state.ajax_path, selector);
          ajaxLoadContent(state);
        }

        if(state.entree_tid){
          openEntree(state.entree_tid);
        }

        // record history state
        history.replaceState(state, null, edlp_origin.url+edlp_origin.hash);

        // reset the storage
        window.localStorage.removeItem("edlp_origin");
        // window.localStorage.removeItem("edlp_origin_url");

      }else{
        history.replaceState({home:true}, null, window.location.pathname);
        _$body.attr('booted', 'booted');
      }
    };
    function onHistoryPopState(e){
      console.log('onPopState',e.state);
      if(e.state.home){
        backToFrontPage(true);
      }
      else if (e.state.audio) {
          _audioPlayer.openDocument(e.state.node, 'popstate', e.state.historic_index);
      }
      else{
        if(e.state.entree_tid){
          openEntree(e.state.entree_tid);
        }
        if(e.state.ajax_path){
          e.state.url = null;
          // ajaxLoadContent(null, e.state.sys_path, e.state.ajax_path)
          ajaxLoadContent(e.state);
        }
      }
    };

    //    _    _          _    _      _
    //   /_\  (_)__ ___ _| |  (_)_ _ | |__ ___
    //  / _ \ | / _` \ \ / |__| | ' \| / /(_-<
    // /_/ \_\/ \__,_/_\_\____|_|_||_|_\_\/__/
    //      |__/
    function initAjaxLinks(){
      // console.log('initAjaxLinks');

      $('a.site-name', '#block-edlptheme-branding')
        .add('a', '#block-mainnavigation')
        // .add('a', '.block.language-switcher-language-url')
        .add('a', '#block-footer.menu--footer')
        .add('a', '#block-productions')
        .add('a', 'article.node:not(.node--type-enregistrement) h2.node-title')
        .add('a', '.productions-subtree')
        .add('a', '.productions-parent')
        // .add('a.index-link, a.notice-link', '#block-edlpentreesblock')
        .addClass('ajax-link');

      _$ajaxLinks = $('.ajax-link:not(.ajax-enabled)')
        .each(function(i,e){
          var $this = $(this);
          // avoid already ajaxified links
          if($this.is('.ajax-enable')) return;
          if($this.attr('data-drupal-link-system-path')){
            $this.on('click', onClickAjaxLink).addClass('ajax-enable');
          }
        });
    };
    function onClickAjaxLink(e){
      e.preventDefault();
      var $link = $(this);

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

      // Audio links
      // launch audio player and stop here
      if($link.is('.audio-link')){
        _audioPlayer
          .emmit('stop-shuffle')
          .openDocument({
            nid:$link.attr('nid'),
            audio_url:$link.attr('audio_url'),
            title:$link.find('.field--name-title').html()
          });
        return false;
      }

      // NOT USED (YET)
      // if($link.is('.language-link')){
        // TODO: change global site current language
        // load all blocks translated (exepted language switcher) ... :/
        // refreshAllBlocks();
        // TODO: use a promise to initAjaxLinks again after blocks updated
        // then let load the content
      // }

      // other links
      var sys_path = $(this).attr('data-drupal-link-system-path');

      // front page
      // just remove contents and stop here
      if(sys_path == '<front>'){
        backToFrontPage();
        return false;
      }

      var view_mode = $link.attr('viewmode');

      var state = getSysPathState(sys_path, view_mode);
      state.url = $(this).attr('href');

      if(view_mode){
        state.url += "#"+view_mode;
      }

      if($link.is('[selector]')){
        state.selector = $link.attr('selector');
      }

      $link.addClass('ajax-loading');
      // ajaxLoadContent(url, sys_path, state.ajax_path, selector);
      ajaxLoadContent(state);

      return false;
    };

    //   ___
    //  / __|___ _ _ _ __ _  _ ___
    // | (__/ _ \ '_| '_ \ || (_-<
    //  \___\___/_| | .__/\_,_/__/
    //              |_|
    function onCorpusMapReady(e){
      //console.log('theme : onCorpusReady', e);
      _corpus_ready = true;
      _$corpus_canvas = $('canvas#corpus-map');

      _$corpus_canvas
        .on('corpus-cliked-on-map', function(e) {
          //console.log('theme : corpus-cliked-on-map');
          backToFrontPage();
        })
        .on('corpus-cliked-on-node', function(e) {
          //console.log('theme : corpus-cliked-on-node', e);
          _audioPlayer
            .emmit('stop-shuffle')
            .setAutoOpenArticle(e.article)
            .openDocument(e.target_node);
        });

        _randomPlayer = new RandomPlayer(e.playlist);

      _$body.attr('corpus-map', 'ready');
    }
    function openEntree(tid){
      if(tid){
        closeAllModals();

        _$body.removeClass();//.addClass(body_classes.join(' '));

        // open entree
        if(_corpus_ready){
          _$corpus_canvas.trigger({
            type:'open-entree',
            tid:tid
          });
        }else{
          // else : EdlpCorpus will check when ready if entry item (notice or index) is already .is-active
          $('li.entree[tid="'+tid+'"] a.term-link').addClass('is-active');
        }
      }
    };

    //    _          _ _
    //   /_\ _  _ __| (_)___
    //  / _ \ || / _` | / _ \
    // /_/ \_\_,_\__,_|_\___/
    //
    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
    // https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg589528%28v%3dvs.85%29
    // https://www.binarytides.com/using-html5-audio-element-javascript/
    function AudioPlayer(){
      var that = this;
      this.fid;
      this.audio = new Audio();
      // audio events
      this.audio_events = ["loadedmetadata","canplay","playing","pause","timeupdate","ended","error"];

      // UI dom objects
      this.$container   = $('<div id="audio-player">');
      // btns
      this.$btns        = $('<div>').addClass('btns').appendTo(this.$container);
      this.$previous    = $('<div>').addClass('previous').appendTo(this.$btns);
      this.$playpause   = $('<div>').addClass('play-pause').appendTo(this.$btns);
      this.$next        = $('<div>').addClass('next').appendTo(this.$btns);
      // timeline
      this.$timelinecont= $('<div>').addClass('time-line-container').appendTo(this.$container);
      this.$timeline    = $('<div>').addClass('time-line').appendTo(this.$timelinecont);
      this.$loader      = $('<div>').addClass('loader').appendTo(this.$timeline);
      this.$cursor      = $('<div>').addClass('cursor').appendTo(this.$timeline);
      // time
      this.$time        = $('<div>').addClass('time').appendTo(this.$container);
      this.$currentTime = $('<div>').addClass('current-time').html('00:00').appendTo(this.$time);
      this.$duration    = $('<div>').addClass('duration').html('00:00').appendTo(this.$time);
      // favoris
      this.$fav       = $('<div>').addClass('favoris').appendTo(this.$container);
      // cartel
      this.$cartel       = $('<div>').addClass('cartel').appendTo(this.$container);

      // hiding
      this.hideTimer = false;
      this.hideTimeMS = 10000;

      // history
      this.currentHistoricIndex = null;
      this.historic = [];
      this.shuffle_is_active = false;

      // artciles
      this.auto_open_article = false;

      // object events
      this.event_handlers = {
        'audio-open-document':[],
        'audio-play':[],
        'audio-pause':[],
        'audio-play-next':[],
        'audio-ended':[],
        'stop-shuffle':[]
      };

      this.init();
    };
    AudioPlayer.prototype = {
      init(){
        // append ui to document
        this.$container.appendTo('header[role="banner"] .region-header');
        // record timeline width
        this.timeline_w = parseInt(this.$timeline.width());
        // init audio events
        var fn = '';
        for (var i = 0; i < this.audio_events.length; i++) {
          fn = this.audio_events[i];
          // capitalize first letter of event (only cosmetic :p )
          fn = 'on'+fn.charAt(0).toUpperCase()+fn.slice(1);
          this.audio.addEventListener(
            this.audio_events[i],
            this[fn].bind(this),
            true);
        }
        // init btns events
        this.$previous.on('click', this.playPrevious.bind(this));
        this.$playpause.on('click', this.togglePlayPause.bind(this));
        this.$next.on('click', this.playNext.bind(this));
      },
      openDocument(node, caller, historic_index){
        // console.log('AudioPlayer openDocument', node);
        if(typeof node == 'undefined'
          || typeof node.nid ==  'undefined'
          || typeof node.audio_url == 'undfined'){
          console.warn('AudioPlayer openDocument() node is malformed', node);
          return false;
        }

        // if we don't come from history popstate
        if(typeof caller == 'undefined' || caller != 'popstate'){
          this.historic.push(node);
          this.currentHistoricIndex = this.historic.length-1;
          // this.shuffle_mode = shuffle_mode || false;

          // add the document opening to history to be able to share and play audio from any where
          if(caller != "history_first_load"){
            state = {
              audio:true,
              node:node,
              historic_index : this.currentHistoricIndex,
            };

            history.pushState(state, null, node.document_url);
          }
        }else{
          // if the call commes from popstate, we update the current position of index
          this.currentHistoricIndex = historic_index;
        }

        this.emmit('audio-open-document', {caller:caller});


        // piwik
        // debugger;
        if(typeof _paq !== 'undefined'){
          // page tracking
          // https://matomo.org/blog/2017/02/how-to-track-single-page-websites-using-piwik-analytics/
          // _paq.push(['setCustomUrl', state.url]);
          // _paq.push(['setDocumentTitle', data.title]);
          // _paq.push(['trackPageView']);
          // js event
          // trackEvent(category, action, [name], [value])
          if(typeof node.title != 'undefined'){
            _paq.push(['trackEvent', 'Audio', 'play', node.title]);
          }
        }

        this.launch();
      },
      launch(){
        this.clearTimeOutToHide();
        this.setSRC(this.historic[this.currentHistoricIndex].audio_url);
        this.loadNode(this.historic[this.currentHistoricIndex].nid);
        // emmit new playing doc (e.g.: corpus map nowing that audio played from RandomPlayer)
        try {
          _$corpus_canvas.trigger({
            'type':'audio-node-opened',
            'nid':this.historic[this.currentHistoricIndex].nid
          });
        } catch (e) {
          console.info('AudioPlayer : _$corpus_canvas does not exists');
        }

        this.showHidePreviousBtn();
        this.showHideNextBtn();
        this.show();
      },
      // audio functions
      setSRC(url){
        console.log('AudioPlayer setSRC : url', url);
        this.audio.src = url;
      },
      onLoadedmetadata(){
        var rem = parseInt(this.audio.duration, 10),
            mins = Math.floor(rem/60,10),
            secs = rem - mins*60;
        this.$duration.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
        this.updateLoadingBar();
      },
      updateLoadingBar(){
        // if (this.audio.readyState === 4){
        if(this.audio.buffered.length>0){
          this.$loader.css({
            'width':parseInt((100 * this.audio.buffered.end(0) / this.audio.duration), 10)+'%'
          });
          if( this.audio.buffered.end(0) < this.audio.duration ){
            // loop through this function until file is fully loaded
            var that = this;
            window.requestAnimationFrame(that.updateLoadingBar.bind(that));
          }else{
            //console.log('Audio fully loaded');
          }
        }
      },
      onCanplay(){
        this.play();
      },
      onError(){
        console.warn("Audio Error " + this.audio.error.code + "; details: " + this.audio.error.message);
      },
      play(){
        this.clearTimeOutToHide();
        this.audio.play();
      },
      playPrevious(){
        if(this.currentHistoricIndex > 0){
          this.currentHistoricIndex -= 1;
          this.launch();
        }
      },
      playNext(){
        if(this.currentHistoricIndex < this.historic.length-1){
          this.currentHistoricIndex += 1;
          this.launch();
        }else{
          this.emmit('audio-play-next');
        }
      },
      togglePlayPause(e){
        if(this.audio.paused){
          this.audio.play();
        }else{
          this.audio.pause();
        }
      },
      stop(){
        // console.log('AudioPlayer stop()');
        // debugger;
        this.audio.pause();
        // don't close player if article or transcript is open
        if(!(_$body.is('.path-node-'+this.historic[this.currentHistoricIndex].nid)
          && (_$body.is('.view-mode-article') || _$body.is('.view-mode-transcript')))){
          this.timeOutToHide();
        }
      },
      // audio events
      onPlaying(){
        this.$btns.addClass('is-playing');
        this.emmit('audio-play');
      },
      onPause(){
        this.$btns.removeClass('is-playing');
        this.emmit('audio-pause');
      },
      onTimeupdate(){
        // move cursor
        this.$cursor.css({
          'left':(this.audio.currentTime/this.audio.duration * this.timeline_w)+"px"
        });
        // update time text display
        var rem = parseInt(this.audio.currentTime, 10),
            mins = Math.floor(rem/60,10),
            secs = rem - mins*60;
        this.$currentTime.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
      },
      onEnded(){
        console.log('AudioPlayer onEnded()');
        this.emmit('audio-ended');
        this.stop();
      },
      // cartel functions
      loadNode(nid){
        this.$cartel.addClass('loading');
        var vm = 'player_cartel';
        var ajax_path = _ajax_settings.entityjson_path+'/node/'+nid+'/'+vm;
        var path = window.location.origin + Drupal.url(ajax_path);
        $.getJSON(path, {})
          .done(this.onNodeLoaded.bind(this))
          .fail(this.onNodeLoadFail.bind(this));
      },
      onNodeLoaded(data){
        // console.log('AudioPlayer node loaded');
        this.$cartel.html(data.rendered).removeClass('loading');
        _$body.trigger({'type':'new-audio-cartel-loaded'});
        initAjaxLinks();
        if(this.auto_open_article){
          this.$cartel.find('a.link-article').trigger('click');
          this.auto_open_article = false;
        }
      },
      onNodeLoadFail(jqxhr, textStatus, error){
        console.warn('AudioPlayer node load failed', jqxhr.responseText);
        this.$cartel.removeClass('loading').html('');
      },
      setAutoOpenArticle(art){
        this.auto_open_article = art;
        return this;
      },
      // global
      show(){
        this.$container.addClass('visible');
      },
      showHidePreviousBtn(){
        if(this.historic.length > 1 && this.currentHistoricIndex > 0){
          this.$previous.addClass('is-active');
        }else{
          this.$previous.removeClass('is-active');
        }
      },
      showHideNextBtn(){
        if(this.currentHistoricIndex < this.historic.length-1 || this.shuffle_is_active){
          this.$next.addClass('is-active');
        }else{
          this.$next.removeClass('is-active');
        }
      },
      timeOutToHide(){
        // console.log('AudioPlayer timeOutToHide()');
        this.clearTimeOutToHide();
        this.hideTimer = setTimeout(this.hide.bind(this), this.hideTimeMS);
      },
      clearTimeOutToHide(){
        // console.log('AudioPlayer clearTimeOutToHide()',this.hideTimer);
        if(this.hideTimer){
          clearTimeout(this.hideTimer);
          this.hideTimer = false;
        }
      },
      hide(){
        // console.log('AudioPlayer hide()');
        this.$container.removeClass('visible');
        // trigger highlighted node remove on corpus map
        try {
          _$corpus_canvas.trigger('audio-node-closed');
        } catch (e) {
          console.info('AudioPlayer hide() : _$corpus_canvas does not exists');
        }
      },
      // object events
      on(event_name, handler){
        if(typeof this.event_handlers[event_name] == 'undefined'){
          console.warn('AudioPlayer : event '+event_name+' does not exists');
        }
        this.event_handlers[event_name].push(handler);
        return this;
      },
      emmit(event_name, args){
        // console.log('AudioPlayer emmit() event_name', event_name);
        // console.log('AudioPlayer emmit() handlers', this.event_handlers[event_name]);
        var handler;
        var args  = args || {};
        for (var i = this.event_handlers[event_name].length-1; i >= 0 ; i--) {
          handler = this.event_handlers[event_name][i];
          // console.log('AudioPlayer emmit() loop handler', handler);
          setTimeout(function(){
            // console.log('AudioPlayer emmit() timeout handler', handler);
            handler(args);
          }, 0);
        }
        return this;
      },
    }

    //  ___              _           ___ _
    // | _ \__ _ _ _  __| |___ _ __ | _ \ |__ _ _  _ ___ _ _
    // |   / _` | ' \/ _` / _ \ '  \|  _/ / _` | || / -_) '_|
    // |_|_\__,_|_||_\__,_\___/_|_|_|_| |_\__,_|\_, \___|_|
    //                                          |__/
    function RandomPlayer(playlist){
      this.active = false;
      this.playlist = playlist;
      this.$btn = $('<a>').html('Shuffle').addClass('random-player-btn');
      this.init();
    };
    RandomPlayer.prototype = {
      init(){
        // this.shuffle();
        $('<div>')
          .addClass('block random-player')
          .append(this.$btn)
          // .insertAfter('#block-userlogin, #block-studiolinkblock');
          .prependTo('.region-footer-right');

        // events
        this.$btn.on('click', this.toggleActive.bind(this));

        // attach an event on AudioPlayer
        _audioPlayer
          .on('audio-ended', this.onAudioPlayerEnded.bind(this))
          .on('audio-play-next', this.onAudioPlayNext.bind(this))
          .on('stop-shuffle', this.stop.bind(this));


        _$corpus_canvas
          .on('update-random-playlist', this.updatePlaylist.bind(this));
      },
      updatePlaylist(e){
        // debugger;
        this.playlist = e.playlist;
        this.shuffle();
      },
      shuffle(){
        var tempPLaylist = [];
        for (var i = this.playlist.length-1; i >= 0 ; i--) {
          tempPLaylist.push(this.playlist[i]);
        }
        this.shuffledPlaylist = [];
        while(tempPLaylist.length > 0){
          var r = Math.floor(Math.random() * tempPLaylist.length);
          this.shuffledPlaylist.push(tempPLaylist.splice(r,1)[0]);
        }
        //console.log('RandomPlayer, this.shuffledPlaylist', this.shuffledPlaylist);
      },
      toggleActive(e){
        if (this.active) {
          this.stop();
        }else{
          this.start();
        }
      },
      start(){
        this.active = _audioPlayer.shuffle_is_active = true;
        this.$btn.addClass('is-active');
        this.shuffle();
        this.next();
        // piwik
        if(typeof _paq !== 'undefined'){
          // trackEvent(category, action, [name], [value])
          _paq.push(['trackEvent', 'RandomPlayer', 'start']);
        }
      },
      stop(){
        this.active = _audioPlayer.shuffle_is_active = false;
        this.$btn.removeClass('is-active');
        // stop audio player
        // _audioPlayer.stop();
        if(typeof _paq !== 'undefined'){
          // trackEvent(category, action, [name], [value])
          _paq.push(['trackEvent', 'RandomPlayer', 'stop']);
        }
      },
      next(){
        if(this.active && this.shuffledPlaylist.length > 0)
          _audioPlayer.openDocument(this.shuffledPlaylist.splice(0,1)[0]);
      },
      onAudioPlayNext(){
        //console.log('RandomPlayer : onAudioPlayNext()');
        this.next();
      },
      onAudioPlayerEnded(){
        //console.log('RandomPlayer : onAudioPlayerEnded()');
        this.next();
      }
    };

    //   ___                     ___ _
    //  / __|___ _ __  _ __  ___| _ \ |__ _ _  _ ___ _ _
    // | (__/ _ \ '  \| '_ \/ _ \  _/ / _` | || / -_) '_|
    //  \___\___/_|_|_| .__/\___/_| |_\__,_|\_, \___|_|
    //                |_|                   |__/
    function CompoPlayer(){
      this.active = false;
      this.playing = false;
      this.paused = false;
      this.playlist = [];
      this.current_index = 0;
      this.$composer = null;
      this.$compo = null;
      this.$controls = null;
      this.init();
    };
    CompoPlayer.prototype = {
      init(){
        // console.log('CompoPlayer init()');
        // attach an event on AudioPlayer
        _audioPlayer
          .on('audio-open-document', this.onAudioOpenDocument.bind(this))
          .on('audio-play', this.onAudioPlayerPlay.bind(this))
          .on('audio-pause', this.onAudioPlayerPause.bind(this))
          .on('audio-ended', this.onAudioPlayerEnded.bind(this));
          // .on('audio-play-next', this.onAudioPlayNext.bind(this));

        // this.newCompo();
      },
      newCompo(){
        //console.log('CompoPlayer newCompo()');
        // this.$compo = $('.composition_ui .composer .composition');
        this.initControls();
      },
      initControls(){
        //console.log('CompoPlayer initControls()');
        this.$composer = $('.composition_ui .composer');
        this.$compo = $('.composition_ui .composer .composition');
        this.$controls = $('.composition_ui .composer .compo-player-controls');
        if(!this.$controls.is('.ready') && this.$compo){
          this.$previous = $('<div>').addClass('previous')
            .on('click', this.prev.bind(this))
            .appendTo(this.$controls);
          this.$playpause = $('<div>').addClass('play-pause')
            .on('click', this.togglePlayPause.bind(this))
            .appendTo(this.$controls);
          this.$next = $('<div>').addClass('next')
            .on('click', this.next.bind(this))
            .appendTo(this.$controls);

          this.$controls.addClass('ready');

          this.refresh();

          this.active = true;
          // this.newCompo();
        }
      },
      refresh(){
        // console.log('CompoPlayer refresh(), this', this);
        this.stop();

        // load new playlist
        this.playlist = [];
        var that = this;
        $('.field--name-documents .field__item',this.$compo).each(function(i,el){
          var $link = $('a.audio-link',this);
          that.playlist.push({
            item:$(this),
            audio_url:$link.attr("audio_url"),
            nid:$link.attr("nid"),
          });
        });
        this.showHideControls();
      },
      togglePlayPause(){
        // console.log('CompoPlayer togglePlayPause');
        if (this.playing && !this.paused) {
          this.pause();
        }else{
          if(this.playing && this.paused){
            this.play();
          }else{
            this.start();
          }
        }
      },
      start(){
        //console.log('start');
        // console.log('CompoPlayer start()');
        this.playing = true;
        this.play();
      },
      play(){
        // console.log('play');
        if(this.paused){
          this.paused = false;
          _audioPlayer.play();
        }else{
          _audioPlayer.openDocument(this.playlist[this.current_index], this);
        }
        this.setActiveItem().showHideControls();
      },
      pause(){
        //console.log('pause');
        this.paused = true;
        this.showHideControls();
        _audioPlayer.stop();
      },
      next(){
        // console.log('CompoPlayer next()');
        if(this.playing){
          this.current_index += 1;
          if(this.current_index < this.playlist.length){
            this.play();
          }else{
            this.stop();
          }
        }
      },
      prev(){
        // console.log('CompoPlayer prev()');
        if(this.playing){
          this.current_index -= 1;
          if(this.current_index >= 0){
            this.play();
          }else{
            this.stop();
          }
        }
      },
      stop(){
        if(this.playing){
          _audioPlayer.stop();
        }
        this.reset();
      },
      reset(){
        this.playing = false;
        this.paused = false;
        this.resetIndex();
      },
      resetIndex(){
        this.current_index = 0;
        this.showHideControls().resetActiveItems();
      },
      setActiveItem(){
        this.resetActiveItems();
        if(this.playing && this.current_index >= 0){
          this.playlist[this.current_index].item.addClass('is-active');
        }
        // this call shoud not be here
        this.showHideControls();
        return this;
      },
      resetActiveItems(){
        for (var n = 0; n < this.playlist.length; n++) {
          // console.log('node',node);
          this.playlist[n].item.removeClass('is-active');
        }
        return this;
      },
      showHideControls(){
        // console.log('CompoPlayer showHideNextBtn(), playing:'+this.playing+', paused:'+this.paused);
        // global playing
        if(this.$controls){
          if(this.playing && !this.paused){
            this.$controls.addClass('is-playing');
          }else{
            this.$controls.removeClass('is-playing');
          }
        }
        // playpause
        if(this.$playpause){
          if(this.playlist.length > 0){
            this.$playpause.addClass('is-active');
          }else{
            this.$playpause.removeClass('is-active');
          }
        }
        // next
        if(this.$next){
          if(this.playing && this.playlist.length > 1 && this.current_index < this.playlist.length -1){
            this.$next.addClass('is-active');
          }else{
            this.$next.removeClass('is-active');
          }
        }
        // previous
        if(this.$previous){
          if(this.playing && this.playlist.length > 1 && this.current_index > 0){
            this.$previous.addClass('is-active');
          }else{
            this.$previous.removeClass('is-active');
          }
        }
        return this;
      },
      deactivate(){
        this.stop();
        this.active = false;
      },
      // _audioPlayer events
      onAudioOpenDocument(args){
        if(args.caller !== this){
          // console.log('CompoPlayer onAudioOpenDocument() called by other');
          this.reset();
        }
        // else{
        //   // console.log('CompoPlayer onAudioOpenDocument() self calling');
        // }
      },
      onAudioPlayerPlay(){
        if(this.playing && this.paused){
          this.paused = false;
          this.showHideControls();
        }
      },
      onAudioPlayerPause(){
        if(this.playing && !this.paused){
          this.paused = true;
          this.showHideControls();
        }
      },
      onAudioPlayerEnded(){
        this.next();
      },
      // onAudioPlayNext(){
      //   this.next();
      // }
    };

    //  ___            _   ___
    // | __| _ ___ _ _| |_| _ \__ _ __ _ ___
    // | _| '_/ _ \ ' \  _|  _/ _` / _` / -_)
    // |_||_| \___/_||_\__|_| \__,_\__, \___|
    //                             |___/
    function backToFrontPage(pop_state){
      console.log('backToFrontPage', pop_state);
      closeAllModals();
      // assume we are going back to front page
      $('body').removeClass().addClass('path-frontpage');
      $('a[data-drupal-link-system-path="<front>"]').addClass('is-active');
      // close entrees
      _$corpus_canvas.trigger({'type':'close-all-entree'});

      if(typeof pop_state == "undefined" || !pop_state){
        console.log('backToFrontPage push state');
        history.pushState({home:true}, null, drupalSettings.path.baseUrl+drupalSettings.path.currentLanguage);
      }
    }

    function initHome(){
      addCloseModalBtnToCols();
      // console.log('theme : initHome');
      // console.log('theme : initProductions');
      var $grid = $('.grid',_$row).masonry({
        itemSelector:'.col',
        columnWidth:'.col-2',
        horizontalOrder: true,
        containerStyle: null,
        // disable initial layout
        // initLayout: false,
      });
      // bind event
      // $grid.masonry( 'on', 'layoutComplete', function() {
      //   console.log('layout is complete');
      // });

      // layout Masonry after each image loads
      $grid.imagesLoaded().progress( function() {
        $grid.masonry('layout');
      });

      $grid.imagesLoaded(function(){
        $grid.masonry('layout');
      });
    }

    //  ___             _         _   _
    // | _ \_ _ ___  __| |_  _ __| |_(_)___ _ _  ___
    // |  _/ '_/ _ \/ _` | || / _|  _| / _ \ ' \(_-<
    // |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/
    function initProductions(){
      // console.log('theme : initProductions');
      var $grid = $('.grid',_$row).masonry({
        itemSelector:'.col',
        columnWidth:'.col-2',
        horizontalOrder: true,
        containerStyle: null,
        // disable initial layout
        // initLayout: false,
      });
      // bind event
      // $grid.masonry( 'on', 'layoutComplete', function() {
      //   console.log('layout is complete');
      // });

      // layout Masonry after each image loads
      $grid.imagesLoaded().progress( function() {
        $grid.masonry('layout');
      });

      $grid.imagesLoaded(function(){
        $grid.masonry('layout');
      });
    };

    //  ___                   _    _                         _
    // | __|_ _  _ _ ___ __ _(_)__| |_ _ _ ___ _ __  ___ _ _| |_
    // | _|| ' \| '_/ -_) _` | (_-<  _| '_/ -_) '  \/ -_) ' \  _|
    // |___|_||_|_| \___\__, |_/__/\__|_| \___|_|_|_\___|_||_\__|
    //                  |___/
    function initEnregistrementTranscript(){
      console.log('initEnregistrementTranscript');
      var $node = _$row.find('article.node--type-enregistrement.node--view-mode-transcript');
      var $nav = $('<nav>').prependTo($node);
      $node.find('.field--name-field-transcript-vo').addClass('visible').find('.field__label')
        .clone().appendTo($nav).addClass('is-active')
        .attr('field_target', '.field--name-field-transcript-vo');
      $node.find('.field--name-field-transcript-trad').find('.field__label')
        .clone().appendTo($nav)
        .attr('field_target', '.field--name-field-transcript-trad');
      $nav.find('.field__label').on('click', function(){
        var $this = $(this).addClass('is-active');
        $this.siblings('.is-active').removeClass('is-active');
        $this.parents('article.node').find('.field.visible').removeClass('visible');
        $this.parents('article.node').find($this.attr('field_target')).addClass('visible');
      });
    };

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

    //  _  _     _
    // | || |___| |_ __  ___ _ _ ___
    // | __ / -_) | '_ \/ -_) '_(_-<
    // |_||_\___|_| .__/\___|_| /__/
    //            |_|

    // https://plainjs.com/javascript/utilities/set-cookie-get-cookie-and-delete-cookie-5/
    // function getCookie(name) {
    //   var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
    //   return v ? v[2] : null;
    // }
    // function setCookie(name, value, days) {
    //   var d = new Date;
    //   d.setTime(d.getTime() + 24*60*60*1000*days);
    //   document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
    // }
    // function deleteCookie(name) { setCookie(name, '', -1); }

    init();
  } // end EdlpTheme()

  $(document).ready(function($) {
    if(drupalSettings.path.isFront){
      var edlptheme = new EdlpTheme();
    }
  });

})(jQuery, Drupal, drupalSettings);