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 = _$body.is('.path-frontpage');
    var _$corpus_canvas;
    var _$row = $('main[role="main"]>.layout-content>.row');
    var _$ajaxLinks;
    var _audioPlayer;
    var _randomPlayer;
    var _compoPlayer;

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

      initHistory();

      if(!drupalSettings.path.isFront)
        return;

      initEvents();

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

      initAjaxLinks();

      // if (_$body.is('.path-productions')) initProductions();
      // if(_$body.is('.path-frontpage')) initHome();
      // initScrollbars();
    };

    //  ___             _
    // | __|_ _____ _ _| |_ ___
    // | _|\ 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)
        .on('open_entree', closeAllModals)
        .on('close_entree', 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 parseAjaxSysPath(sys_path, view_mode){
      // console.log('Theme : parseAjaxSysPath', sys_path);
      var ajax_path = sys_path;

      // convert node link to edlp_ajax_node module links
      var node_match = ajax_path.match(/^\/?(node\/\d+)$/g);
      var term_match = ajax_path.match(/^\/?(taxonomy\/term\/\d+)$/g);
      if(node_match){
        ajax_path = _ajax_settings.entityjson_path+'/'+node_match[0];
        // check for viewmode attribute
        if(view_mode){
          ajax_path += '/'+view_mode;
        }
      }else if(term_match){
        ajax_path = _ajax_settings.entityjson_path+'/'+term_match[0];
        ajax_path = ajax_path.replace(/taxonomy\/term/, 'taxonomy_term');
        // check for viewmode attribute
        if(view_mode){
          ajax_path += '/'+view_mode;
        }
      }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 !!
        ajax_path += '/ajax'
      }
      return ajax_path;
    };
    function ajaxLoadContent(url, sys_path, ajax_path, selector){
      // console.log('ajaxLoadContent : url', url);
      _$body.addClass('ajax-loading');

      var path = window.location.origin + Drupal.url(ajax_path);
      $.getJSON(path, {})
        .done(function(data){
          onAjaxLoaded(data, url, ajax_path, sys_path, selector);
        })
        .fail(function(jqxhr, textStatus, error){
          onAjaxLoadError(jqxhr, textStatus, error, 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, url, ajax_path, sys_path, selector){
      // console.log('ajax loaded : data', 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)
      _$row.removeAttr('style').html(data.rendered);

      // add close btn
      if(sys_path != 'productions'){
        addCloseBtnToCols();
      }

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

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

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

      if(typeof selector != 'undefined'){
        $('a[selector="'+selector+'"]').addClass('is-active');
      }else{
        $('a[data-drupal-link-system-path="'+sys_path+'"]').addClass('is-active');
      }

      // 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(sys_path == "productions")
        initProductions();

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


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

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

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

        $(this).children('.wrapper').append($('<span>')
          .addClass('close-col-btn')
          .on('click', function(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 call closeAllModals()
            if(!$('.col', _$row).length){
              backToFrontPage();
            }
          })
        );
      });
    };

    //  _  _ _    _
    // | || (_)__| |_ ___ _ _ _  _
    // | __ | (_-<  _/ _ \ '_| || |
    // |_||_|_/__/\__\___/_|  \_, |
    //                        |__/
    function initHistory(){
      initFirstLoad();
      window.addEventListener('popstate', onHistoryPopState);
    };
    function initFirstLoad(){
      // console.log('theme : initFirstLoad()', window.location);
      // console.log(document.cookie);
      var url = window.location.pathname;
      var origin_path = getCookie('edlp_origin_path');
      // console.log('origin_path', origin_path);
      if(origin_path){
        var path_elements = origin_path.split('~~');
        // console.log(path_elements);
        // create history state
        var state = {
          ajax_path: parseAjaxSysPath(path_elements[0]),
          sys_path: path_elements[0],
        };
        // record history state
        history.replaceState(state, null, path_elements[1]);
        // load content through ajax
        ajaxLoadContent(null, state.sys_path, state.ajax_path);
        // reset the cookie
        deleteCookie('edlp_origin_path');

      }else{
        history.replaceState({home:true}, null, url);
        _$body.attr('booted', 'booted');
      }
    };
    function onHistoryPopState(e){
      //console.log('onPopState',e);
      if(e.state.home){
        backToFrontPage();
      }else{
        ajaxLoadContent(null, e.state.sys_path, e.state.ajax_path)
      }
    };

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

      $('a', '#block-mainnavigation')
        .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')
          });
        return false;
      }

      // other links
      var url = $(this).attr('href');
      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 ajax_path = parseAjaxSysPath(sys_path, view_mode);

      $link.addClass('ajax-loading');

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

      ajaxLoadContent(url, sys_path, ajax_path, selector);
      return false;
    };

    //   ___
    //  / __|___ _ _ _ __ _  _ ___
    // | (__/ _ \ '_| '_ \ || (_-<
    //  \___\___/_| | .__/\_,_/__/
    //              |_|
    function onCorpusMapReady(e){
      //console.log('theme : onCorpusReady', e);
      _$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')
            .openDocument(e.target_node);
        });

      _randomPlayer = new RandomPlayer(e.playlist);

      _$body.attr('corpus-map', 'ready');
    }

    //    _          _ _
    //   /_\ _  _ __| (_)___
    //  / _ \ || / _` | / _ \
    // /_/ \_\_,_\__,_|_\___/
    //
    // 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"];

      // 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;

      // 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){
        // 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;
        }
        this.historic.push(node);
        this.currentHistoricIndex = this.historic.length-1;
        // this.shuffle_mode = shuffle_mode || false;

        // TODO: add an hash tag to be able to share and play audio from any where

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

        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(){
        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();
      },
      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()');
        this.audio.pause();
        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(){
        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();
      },
      onNodeLoadFail(jqxhr, textStatus, error){
        console.warn('AudioPlayer node load failed', jqxhr.responseText);
        this.$cartel.removeClass('loading').html('');
      },
      // 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));
      },
      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();
      },
      stop(){
        this.active = _audioPlayer.shuffle_is_active = false;
        this.$btn.removeClass('is-active');
        // stop audio player
        // _audioPlayer.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(){
        _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(){
      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 initHome(){
      addCloseBtnToCols();
      // 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 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($) {
    var edlptheme = new EdlpTheme();
  });


})(jQuery, Drupal, drupalSettings);