ipi-jquery/js/ws-menu.js

"use strict";
(function($) {
  $(document).ready(function() {
    console.log('ws: init menu');

    /**
     * Main menu
     */
    var $mainMenu = $('#nav-menus');


    /**
     * Main menu toggle button
     */
    var $menuBtn = $('#menu-btn');
    $menuBtn.click(toggleMainMenu);

    /**
     * Navigation state
     */
    var navState = parsePath();


    /**
     * Previous navigation state
     */
    var prevNavState;


    /**
     * Toggle main menu
     */
    function toggleMainMenu() {
      $mainMenu.toggleClass('in');
    };


    /**
     * Extract bits (repo&example slugs) from requested url path
     */
    function parsePath() {
      const path = window.location.pathname.substr(1);
      const bits = path.split('/');
      return {
        repo: bits[0],
        example: bits.length === 1 ? '' : bits[1]
      };
    }

    /**
     * Handle navigation
     */
     function navigateTo(path) {
      history.pushState({}, 'New path', path);
      prevNavState = navState;
      navState = parsePath();
      console.log('previous&new nav states', prevNavState, navState);

      if(navState.repo !== prevNavState.repo) {
        if(navState.repo === '') {
          console.log('nav: back to root');
          _ws.events.emit('navToRoot');
          _ws.ui.menuExample.render({ examples: [] });
        }
        else {
          console.log('nav: repo changed');
          rp.get('/parts/' + navState.repo, 'json')
          .then(function(parts) {
            // renderMenuExample(parts.menuExample);
            console.log('render with parts', parts);
            _ws.ui.detailsRepo.render(parts);
            _ws.ui.menuExample.render(parts);
            _ws.events.emit('navToRepo', navState.repo);
          });
        }
      }
      else if(navState.example !== prevNavState.example) {
        rp.get('/parts/' + navState.repo + '/' + navState.example, 'json')
        .then(function(parts) {
          console.log('nav: example changed');
          _ws.files = parts.files;
          console.log(_ws.ui);
          // renderDetailsExample(parts);
          _ws.ui.detailsExample.render(parts);
          _ws.ui.editor.render(parts);
          _ws.ui.tabs.render(parts);
          _ws.ui.sandboxIframe.render(navState);
        });
      }
    }


    function menuItemClicked(e) {
      e.preventDefault();
      var $link = $(e.target);
      console.log($link.prop('href'));
      var originalColor = $link.css('backgroundColor');
      toggleMainMenu();
      $link.animate({
        backgroundColor: '#aaa',
      }, 70);
      $link.animate({
        backgroundColor: originalColor,
      }, 70);
      navigateTo($link.prop('href'));
    }


    /**
     * Initialize menu-example view
     */
    _ws.makeView('menu-example', {
      events: {
        'click a': menuItemClicked
      }
    });


    /**
     * Initialize menu-example view
     */
    // _ws.makeView('menu-repo', {
    //   events: {
    //     'click a': menuItemClicked
    //   }
    // });

    /**
     * Handle click on links outside #menu-example
     */
    $('#menu-repo a').click(menuItemClicked);
    $('#nav-back-home').click(function(e) {
      e.preventDefault();
      $mainMenu.removeClass('in');
      navigateTo('/');
    });


    /**
     * Initialize details-example view
     */
    _ws.makeView('details-example');


    /**
     * Initialize details-repo view
     */
    _ws.makeView('details-repo');





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