ipi-jquery/js/menu.js

"use strict";
(function($) {
  $(document).ready(function() {

    function SandboxNavigator() {
      this.$menu = $('#nav-menus');
      this.$menuBtn = $('#menu-btn');
      this.$menuExample = $('#menu-example');
      this.$menuBtn.click(this.toggleMenu.bind(this));
      this.$links = $('#nav-menus a,#nav-back-home');
      this.init();
    }

    SandboxNavigator.prototype.init = function() {
      this.nav = this.parsePath();
      this.bindAllLinksEvents();
    };

    SandboxNavigator.prototype.toggleMenu = function() {
      this.$menu.toggleClass('in');
    };

    SandboxNavigator.prototype.bindAllLinksEvents = function() {
      this.$links.each(this.bindLinkEvents.bind(this));
    };

    SandboxNavigator.prototype.bindLinkEvents = function(idx, linkEl) {
      var self = this;
      $(linkEl).click(function(e) {
        e.preventDefault();
        var $link = $(this);
        var originalColor = $link.css('backgroundColor');
        self.toggleMenu();
        $link.animate({
          backgroundColor: '#aaa',
        }, 70);
        $link.animate({
          backgroundColor: originalColor,
        }, 70);
        self.navigateTo($link.prop('href'));
      });
    };

    SandboxNavigator.prototype.parsePath = function() {
      const path = window.location.pathname.substr(1);
      const bits = path.split('/');
      return {
        repo: bits[0],
        example: bits.length === 1 ? '' : bits[1]
      };
    };


    SandboxNavigator.prototype.navigateTo = function(path) {
      history.pushState({}, 'New path', path);
      var oldNav = this.nav;
      this.nav = this.parsePath();
      console.log(this.nav, oldNav);

      if(this.nav.repo !== oldNav.repo) {
        console.log('nav: repo changed');
        _ws.events.emit('navToRepo', this.nav.repo);
        rp.get('/parts/' + this.nav.repo, 'json')
        .then(function(parts) {
          renderMenuExample(parts.menuExample);
        });
      }
      else if(this.nav.example !== oldNav.example) {
        console.log('nav: example changed');
        _ws.events.emit('navToExample', this.nav.example);
        rp.get('/parts/' + this.nav.repo + '/' + this.nav.example, 'json')
        .then(function(parts) {
          console.log(parts);
          renderDetailsExample(parts);
          renderTabs(parts);

        });
      }


      // if(this.nav.repo === oldNav.repo && this.nav.example === oldNav.example) {
      //   console.log('nav: nop');
      // }
      // // else if(this.nav.repo !== oldNav.repo && this.nav.example !== oldNav.example) {
      // //   console.log('nav: repo&example');
      // // }
      // else if(this.nav.repo === oldNav.repo) {
      //   if(this.nav.example === '') {
      //     console.log('nav: example empty');
      //     console.log(_ws.events);
      //     _ws.events.emit('navToRepoRoot');
      //   }
      //   else {
      //     console.log('nav: example changed');
      //     _ws.events.emit('navToExample', this.nav.repo); 
      //   }
      // }
      // else if(this.nav.example === oldNav.example) {
      //   if(this.nav.repo === '') {
      //     console.log('nav: repo empty');
      //     _ws.events.emit('navToRoot');
      //   }
      //   else {
      //   }
      // }

    };

    function renderInto(id, parts) {
      var tmpl = $('#' + id + '-tmpl').html();
      console.log(tmpl);
      $('#' + id).html( Mustache.render( tmpl, parts ) );
    }

    function renderTabs(parts) {
      renderInto('tabs', parts);
      _ws.events.emit('rendered:tabs');
    }

    function renderDetailsExample(parts) {
      var tmpl = $('#details-example-tmpl').html();
      console.log(tmpl);
      $('#details-example').html( Mustache.render( tmpl, parts ) );
    }
    function renderMenuExample(menuExample) {
      var tmpl = $('#menu-example-tmpl').html();
      console.log(tmpl);
      $('#menu-example').html( Mustache.render( tmpl, { menuExample: menuExample } ) );
    }

    window._ws.navigator = new SandboxNavigator();
    console.log('navigator init', _ws);

    //     var $exMenuItem = $('<li><a href="/' + repoSlug + '/' + example.slug + '">' + example.title + '</a></li>')
    //     .appendTo( $('#cat-' + example.category) );
    //     notify('success', "Exemple créé !");
    //     navigateTo('/'+ repoSlug + '/' + example.slug);
    //   })
    //   .catch(errText => notify('error', 'Erreur: ' + errText));
    // }

    // function clearAndCloseEditor() {
    //   $exampleFormIn.val('');
    //   toggleEditor();
    // }


  });
})(jQuery);