Awesome tabs working for the levels

build/bundle.js

@@ -19768,12 +19768,7 @@ exports.levelSequences = {
     require('./rebase/manyRebases').level,
     require('./advanced/multipleParents').level,
     require('./rebase/selectiveRebase').level
-  ]
+  ],
-};
-
-if (typeof window !== 'undefined' && window.location &&
-    window.location.href.indexOf('showRemote') !== -1) {
-  exports.levelSequences = {
   remote: [
     require('./remote/clone').level,
     require('./remote/remoteBranches').level,
@@ -19788,11 +19783,10 @@ if (typeof window !== 'undefined' && window.location &&
     require('./remote/pushManyFeatures').level,
     require('./remote/mergeManyFeatures').level
   ]
-  };
+};
-}
 
 // there are also cute names and such for sequences
-exports.sequenceInfo = {
+var sequenceInfo = exports.sequenceInfo = {
   intro: {
     displayName: {
       'en_US': 'Introduction Sequence',
@@ -19824,6 +19818,7 @@ exports.sequenceInfo = {
     }
   },
   remote: {
+    tab: 'remote',
     displayName: {
       'en_US': 'Push & Pull -- Git Remotes!'
     },
@@ -19832,6 +19827,7 @@ exports.sequenceInfo = {
     }
   },
   remoteAdvanced: {
+    tab: 'remote',
     displayName: {
       'en_US': 'To Origin And Beyond -- Advanced Git Remotes!'
     },
@@ -19887,6 +19883,13 @@ exports.sequenceInfo = {
   }
 };
 
+exports.getTabForSequence = function(sequenceName) {
+  var info = sequenceInfo[sequenceName];
+  return (info.tab) ?
+    info.tab :
+    'main';
+};
+
 
 });
 
@@ -24093,14 +24096,31 @@ var ModalTerminal = require('../views').ModalTerminal;
 var ContainedBase = require('../views').ContainedBase;
 var BaseView = require('../views').BaseView;
 
+var LEVELS = require('../../levels');
+
 var LevelDropdownView = ContainedBase.extend({
   tagName: 'div',
   className: 'levelDropdownView box vertical',
   template: _.template($('#level-dropdown-view').html()),
+  events: {
+    'click div.levelDropdownTab': 'onTabClick'
+  },
 
   initialize: function(options) {
     options = options || {};
-    this.JSON = {};
+    var queryParams = util.parseQueryString(
+      window.location.href
+    );
+    this.JSON = {
+      selectedTab: queryParams.defaultTab || 'main',
+      tabs: [{
+        id: 'main',
+        name: intl.todo('Main')
+      }, {
+        id: 'remote',
+        name: intl.todo('Remote')
+      }]
+    };
 
     this.navEvents = _.clone(Backbone.Events);
     this.navEvents.on('clickedID', _.debounce(
@@ -24146,6 +24166,21 @@ var LevelDropdownView = ContainedBase.extend({
     this.buildSequences();
   },
 
+  onTabClick: function(ev) {
+    var srcElement = ev.target || ev.srcElement;
+    var id = $(srcElement).attr('data-id');
+    if (id === this.JSON.selectedTab) {
+      return;
+    }
+    this.JSON.selectedTab = id;
+    this.render();
+    if (this.selectedID) {
+      this.selectedSequence = this.getSequencesOnTab()[0];
+      this.selectedIndex = 0;
+      this.updateSelectedIcon();
+    }
+  },
+
   positive: function() {
     if (!this.selectedID) {
       return;
@@ -24160,11 +24195,15 @@ var LevelDropdownView = ContainedBase.extend({
     this.leftOrRight(-1);
   },
 
+  updateSelectedIcon: function() {
+    this.selectedID = this.getSelectedID();
+    this.selectIconByID(this.selectedID);
+  },
+
   leftOrRight: function(delta) {
     this.deselectIconByID(this.selectedID);
     this.selectedIndex = this.wrapIndex(this.selectedIndex + delta, this.getCurrentSequence());
-    this.selectedID = this.getSelectedID();
+    this.updateSelectedIcon();
-    this.selectIconByID(this.selectedID);
   },
 
   right: function() {
@@ -24193,8 +24232,7 @@ var LevelDropdownView = ContainedBase.extend({
   downOrUp: function() {
     this.selectedIndex = this.boundIndex(this.selectedIndex, this.getCurrentSequence());
     this.deselectIconByID(this.selectedID);
-    this.selectedID = this.getSelectedID();
+    this.updateSelectedIcon();
-    this.selectIconByID(this.selectedID);
   },
 
   turnOnKeyboardSelection: function() {
@@ -24225,20 +24263,27 @@ var LevelDropdownView = ContainedBase.extend({
     return index;
   },
 
+  getSequencesOnTab: function() {
+    return _.filter(this.sequences, function(sequenceName) {
+      var tab = LEVELS.getTabForSequence(sequenceName);
+      return tab === this.JSON.selectedTab;
+    }, this);
+  },
+
   getNextSequence: function() {
     var current = this.getSequenceIndex(this.selectedSequence);
-    var desired = this.wrapIndex(current + 1, this.sequences);
+    var desired = this.wrapIndex(current + 1, this.getSequencesOnTab());
-    return this.sequences[desired];
+    return this.getSequencesOnTab()[desired];
   },
 
   getPreviousSequence: function() {
     var current = this.getSequenceIndex(this.selectedSequence);
-    var desired = this.wrapIndex(current - 1, this.sequences);
+    var desired = this.wrapIndex(current - 1, this.getSequencesOnTab());
-    return this.sequences[desired];
+    return this.getSequencesOnTab()[desired];
   },
 
   getSequenceIndex: function(name) {
-    var index = this.sequences.indexOf(name);
+    var index = this.getSequencesOnTab().indexOf(name);
     if (index < 0) { throw new Error('didnt find'); }
     return index;
   },
@@ -24248,10 +24293,10 @@ var LevelDropdownView = ContainedBase.extend({
   },
 
   selectFirst: function() {
-    var firstID = this.sequenceToLevels[this.sequences[0]][0].id;
+    var firstID = this.sequenceToLevels[this.getSequencesOnTab()[0]][0].id;
     this.selectIconByID(firstID);
     this.selectedIndex = 0;
-    this.selectedSequence = this.sequences[0];
+    this.selectedSequence = this.getSequencesOnTab()[0];
   },
 
   getCurrentSequence: function() {
@@ -24335,7 +24380,7 @@ var LevelDropdownView = ContainedBase.extend({
 
   buildSequences: function() {
     this.seriesViews = [];
-    _.each(this.sequences, function(sequenceName) {
+    _.each(this.getSequencesOnTab(), function(sequenceName) {
       this.seriesViews.push(new SeriesView({
         destination: this.$el,
         name: sequenceName,
@@ -35815,14 +35860,31 @@ var ModalTerminal = require('../views').ModalTerminal;
 var ContainedBase = require('../views').ContainedBase;
 var BaseView = require('../views').BaseView;
 
+var LEVELS = require('../../levels');
+
 var LevelDropdownView = ContainedBase.extend({
   tagName: 'div',
   className: 'levelDropdownView box vertical',
   template: _.template($('#level-dropdown-view').html()),
+  events: {
+    'click div.levelDropdownTab': 'onTabClick'
+  },
 
   initialize: function(options) {
     options = options || {};
-    this.JSON = {};
+    var queryParams = util.parseQueryString(
+      window.location.href
+    );
+    this.JSON = {
+      selectedTab: queryParams.defaultTab || 'main',
+      tabs: [{
+        id: 'main',
+        name: intl.todo('Main')
+      }, {
+        id: 'remote',
+        name: intl.todo('Remote')
+      }]
+    };
 
     this.navEvents = _.clone(Backbone.Events);
     this.navEvents.on('clickedID', _.debounce(
@@ -35868,6 +35930,21 @@ var LevelDropdownView = ContainedBase.extend({
     this.buildSequences();
   },
 
+  onTabClick: function(ev) {
+    var srcElement = ev.target || ev.srcElement;
+    var id = $(srcElement).attr('data-id');
+    if (id === this.JSON.selectedTab) {
+      return;
+    }
+    this.JSON.selectedTab = id;
+    this.render();
+    if (this.selectedID) {
+      this.selectedSequence = this.getSequencesOnTab()[0];
+      this.selectedIndex = 0;
+      this.updateSelectedIcon();
+    }
+  },
+
   positive: function() {
     if (!this.selectedID) {
       return;
@@ -35882,11 +35959,15 @@ var LevelDropdownView = ContainedBase.extend({
     this.leftOrRight(-1);
   },
 
+  updateSelectedIcon: function() {
+    this.selectedID = this.getSelectedID();
+    this.selectIconByID(this.selectedID);
+  },
+
   leftOrRight: function(delta) {
     this.deselectIconByID(this.selectedID);
     this.selectedIndex = this.wrapIndex(this.selectedIndex + delta, this.getCurrentSequence());
-    this.selectedID = this.getSelectedID();
+    this.updateSelectedIcon();
-    this.selectIconByID(this.selectedID);
   },
 
   right: function() {
@@ -35915,8 +35996,7 @@ var LevelDropdownView = ContainedBase.extend({
   downOrUp: function() {
     this.selectedIndex = this.boundIndex(this.selectedIndex, this.getCurrentSequence());
     this.deselectIconByID(this.selectedID);
-    this.selectedID = this.getSelectedID();
+    this.updateSelectedIcon();
-    this.selectIconByID(this.selectedID);
   },
 
   turnOnKeyboardSelection: function() {
@@ -35947,20 +36027,27 @@ var LevelDropdownView = ContainedBase.extend({
     return index;
   },
 
+  getSequencesOnTab: function() {
+    return _.filter(this.sequences, function(sequenceName) {
+      var tab = LEVELS.getTabForSequence(sequenceName);
+      return tab === this.JSON.selectedTab;
+    }, this);
+  },
+
   getNextSequence: function() {
     var current = this.getSequenceIndex(this.selectedSequence);
-    var desired = this.wrapIndex(current + 1, this.sequences);
+    var desired = this.wrapIndex(current + 1, this.getSequencesOnTab());
-    return this.sequences[desired];
+    return this.getSequencesOnTab()[desired];
   },
 
   getPreviousSequence: function() {
     var current = this.getSequenceIndex(this.selectedSequence);
-    var desired = this.wrapIndex(current - 1, this.sequences);
+    var desired = this.wrapIndex(current - 1, this.getSequencesOnTab());
-    return this.sequences[desired];
+    return this.getSequencesOnTab()[desired];
   },
 
   getSequenceIndex: function(name) {
-    var index = this.sequences.indexOf(name);
+    var index = this.getSequencesOnTab().indexOf(name);
     if (index < 0) { throw new Error('didnt find'); }
     return index;
   },
@@ -35970,10 +36057,10 @@ var LevelDropdownView = ContainedBase.extend({
   },
 
   selectFirst: function() {
-    var firstID = this.sequenceToLevels[this.sequences[0]][0].id;
+    var firstID = this.sequenceToLevels[this.getSequencesOnTab()[0]][0].id;
     this.selectIconByID(firstID);
     this.selectedIndex = 0;
-    this.selectedSequence = this.sequences[0];
+    this.selectedSequence = this.getSequencesOnTab()[0];
   },
 
   getCurrentSequence: function() {
@@ -36057,7 +36144,7 @@ var LevelDropdownView = ContainedBase.extend({
 
   buildSequences: function() {
     this.seriesViews = [];
-    _.each(this.sequences, function(sequenceName) {
+    _.each(this.getSequencesOnTab(), function(sequenceName) {
       this.seriesViews.push(new SeriesView({
         destination: this.$el,
         name: sequenceName,
@@ -39589,12 +39676,7 @@ exports.levelSequences = {
     require('./rebase/manyRebases').level,
     require('./advanced/multipleParents').level,
     require('./rebase/selectiveRebase').level
-  ]
+  ],
-};
-
-if (typeof window !== 'undefined' && window.location &&
-    window.location.href.indexOf('showRemote') !== -1) {
-  exports.levelSequences = {
   remote: [
     require('./remote/clone').level,
     require('./remote/remoteBranches').level,
@@ -39609,11 +39691,10 @@ if (typeof window !== 'undefined' && window.location &&
     require('./remote/pushManyFeatures').level,
     require('./remote/mergeManyFeatures').level
   ]
-  };
+};
-}
 
 // there are also cute names and such for sequences
-exports.sequenceInfo = {
+var sequenceInfo = exports.sequenceInfo = {
   intro: {
     displayName: {
       'en_US': 'Introduction Sequence',
@@ -39645,6 +39726,7 @@ exports.sequenceInfo = {
     }
   },
   remote: {
+    tab: 'remote',
     displayName: {
       'en_US': 'Push & Pull -- Git Remotes!'
     },
@@ -39653,6 +39735,7 @@ exports.sequenceInfo = {
     }
   },
   remoteAdvanced: {
+    tab: 'remote',
     displayName: {
       'en_US': 'To Origin And Beyond -- Advanced Git Remotes!'
     },
@@ -39708,6 +39791,13 @@ exports.sequenceInfo = {
   }
 };
 
+exports.getTabForSequence = function(sequenceName) {
+  var info = sequenceInfo[sequenceName];
+  return (info.tab) ?
+    info.tab :
+    'main';
+};
+
 
 });
 require("/src/levels/index.js");

build/main.5f9b0b08.css

@@ -748,6 +748,30 @@ div.modalView.box.inFront.show {
 .levelDropdownView {
 }
 
+div.levelDropdownTabWrapper {
+  margin-left: -10px;
+  margin-right: -10px;
+  border-bottom: 2px solid #ccc;
+  margin-bottom: 10px;
+}
+
+div.levelDropdownTab {
+  border: 1px solid #ccc;
+  border-bottom: 0;
+  cursor: pointer;
+  box-shadow: 0px -4px 12px rgba(0,0,0,0.7);
+  border-radius: 4px 4px 0 0;
+  text-align: center;
+  padding: 4px 10px;
+  color: black;
+  background: #ccc;
+  margin: 0 10px;
+}
+
+div.levelDropdownTab.deselected {
+  opacity: 0.3;
+}
+
 div.displayName {
   border-bottom: 1px dashed grey;
   text-align: center;

index.html

@@ -13,7 +13,7 @@
   <meta property="og:image" content="http://pcottle.github.io/learnGitBranching/assets/learnGitBranching.png"/>
   <meta property="og:description" content="A interactive Git visualization tool to educate and challenge!"/>
 
-	<link rel="stylesheet" href="build/main.d4092b65.css" type="text/css" charset="utf-8">
+	<link rel="stylesheet" href="build/main.5f9b0b08.css" type="text/css" charset="utf-8">
 	<link rel="stylesheet" href="src/style/font-awesome.css" type="text/css" charset="utf-8">
 </head>
 <body>
@@ -225,6 +225,19 @@
   </script>
 
   <script type="text/html" id="level-dropdown-view">
+    <div class="box horizontal center levelDropdownTabWrapper">
+      <% for (var i = 0; i < tabs.length; i++) { %>
+        <% if (tabs[i].id === selectedTab) { %>
+          <div class="levelDropdownTab" data-id="<%=tabs[i].id%>">
+        <% } else { %>
+          <div class="levelDropdownTab deselected" data-id="<%=tabs[i].id%>">
+        <% } %>
+          <span data-id="<%=tabs[i].id%>">
+            <%= tabs[i].name %>
+          </span>
+        </div>
+      <% } %>
+    </div>
   </script>
 
   <script type="text/html" id="series-view">
@@ -445,7 +458,7 @@
        For a much easier time perusing the source, see the individual files at:
           https://github.com/pcottle/learnGitBranching
   -->
-  <script src="build/bundle.min.3fa21ecf.js"></script>
+  <script src="build/bundle.min.5f173106.js"></script>
 
   <!-- The advantage of github pages: super-easy, simple, slick static hostic.
        The downside? No raw logs to parse for analytics, so I have to include

src/js/views/levelDropdownView.js

@@ -13,14 +13,31 @@ var ModalTerminal = require('../views').ModalTerminal;
 var ContainedBase = require('../views').ContainedBase;
 var BaseView = require('../views').BaseView;
 
+var LEVELS = require('../../levels');
+
 var LevelDropdownView = ContainedBase.extend({
   tagName: 'div',
   className: 'levelDropdownView box vertical',
   template: _.template($('#level-dropdown-view').html()),
+  events: {
+    'click div.levelDropdownTab': 'onTabClick'
+  },
 
   initialize: function(options) {
     options = options || {};
-    this.JSON = {};
+    var queryParams = util.parseQueryString(
+      window.location.href
+    );
+    this.JSON = {
+      selectedTab: queryParams.defaultTab || 'main',
+      tabs: [{
+        id: 'main',
+        name: intl.todo('Main')
+      }, {
+        id: 'remote',
+        name: intl.todo('Remote')
+      }]
+    };
 
     this.navEvents = _.clone(Backbone.Events);
     this.navEvents.on('clickedID', _.debounce(
@@ -66,6 +83,21 @@ var LevelDropdownView = ContainedBase.extend({
     this.buildSequences();
   },
 
+  onTabClick: function(ev) {
+    var srcElement = ev.target || ev.srcElement;
+    var id = $(srcElement).attr('data-id');
+    if (id === this.JSON.selectedTab) {
+      return;
+    }
+    this.JSON.selectedTab = id;
+    this.render();
+    if (this.selectedID) {
+      this.selectedSequence = this.getSequencesOnTab()[0];
+      this.selectedIndex = 0;
+      this.updateSelectedIcon();
+    }
+  },
+
   positive: function() {
     if (!this.selectedID) {
       return;
@@ -80,11 +112,15 @@ var LevelDropdownView = ContainedBase.extend({
     this.leftOrRight(-1);
   },
 
+  updateSelectedIcon: function() {
+    this.selectedID = this.getSelectedID();
+    this.selectIconByID(this.selectedID);
+  },
+
   leftOrRight: function(delta) {
     this.deselectIconByID(this.selectedID);
     this.selectedIndex = this.wrapIndex(this.selectedIndex + delta, this.getCurrentSequence());
-    this.selectedID = this.getSelectedID();
+    this.updateSelectedIcon();
-    this.selectIconByID(this.selectedID);
   },
 
   right: function() {
@@ -113,8 +149,7 @@ var LevelDropdownView = ContainedBase.extend({
   downOrUp: function() {
     this.selectedIndex = this.boundIndex(this.selectedIndex, this.getCurrentSequence());
     this.deselectIconByID(this.selectedID);
-    this.selectedID = this.getSelectedID();
+    this.updateSelectedIcon();
-    this.selectIconByID(this.selectedID);
   },
 
   turnOnKeyboardSelection: function() {
@@ -145,20 +180,27 @@ var LevelDropdownView = ContainedBase.extend({
     return index;
   },
 
+  getSequencesOnTab: function() {
+    return _.filter(this.sequences, function(sequenceName) {
+      var tab = LEVELS.getTabForSequence(sequenceName);
+      return tab === this.JSON.selectedTab;
+    }, this);
+  },
+
   getNextSequence: function() {
     var current = this.getSequenceIndex(this.selectedSequence);
-    var desired = this.wrapIndex(current + 1, this.sequences);
+    var desired = this.wrapIndex(current + 1, this.getSequencesOnTab());
-    return this.sequences[desired];
+    return this.getSequencesOnTab()[desired];
   },
 
   getPreviousSequence: function() {
     var current = this.getSequenceIndex(this.selectedSequence);
-    var desired = this.wrapIndex(current - 1, this.sequences);
+    var desired = this.wrapIndex(current - 1, this.getSequencesOnTab());
-    return this.sequences[desired];
+    return this.getSequencesOnTab()[desired];
   },
 
   getSequenceIndex: function(name) {
-    var index = this.sequences.indexOf(name);
+    var index = this.getSequencesOnTab().indexOf(name);
     if (index < 0) { throw new Error('didnt find'); }
     return index;
   },
@@ -168,10 +210,10 @@ var LevelDropdownView = ContainedBase.extend({
   },
 
   selectFirst: function() {
-    var firstID = this.sequenceToLevels[this.sequences[0]][0].id;
+    var firstID = this.sequenceToLevels[this.getSequencesOnTab()[0]][0].id;
     this.selectIconByID(firstID);
     this.selectedIndex = 0;
-    this.selectedSequence = this.sequences[0];
+    this.selectedSequence = this.getSequencesOnTab()[0];
   },
 
   getCurrentSequence: function() {
@@ -255,7 +297,7 @@ var LevelDropdownView = ContainedBase.extend({
 
   buildSequences: function() {
     this.seriesViews = [];
-    _.each(this.sequences, function(sequenceName) {
+    _.each(this.getSequencesOnTab(), function(sequenceName) {
       this.seriesViews.push(new SeriesView({
         destination: this.$el,
         name: sequenceName,

src/levels/index.js

@@ -26,12 +26,7 @@ exports.levelSequences = {
     require('./rebase/manyRebases').level,
     require('./advanced/multipleParents').level,
     require('./rebase/selectiveRebase').level
-  ]
+  ],
-};
-
-if (typeof window !== 'undefined' && window.location &&
-    window.location.href.indexOf('showRemote') !== -1) {
-  exports.levelSequences = {
   remote: [
     require('./remote/clone').level,
     require('./remote/remoteBranches').level,
@@ -46,11 +41,10 @@ if (typeof window !== 'undefined' && window.location &&
     require('./remote/pushManyFeatures').level,
     require('./remote/mergeManyFeatures').level
   ]
-  };
+};
-}
 
 // there are also cute names and such for sequences
-exports.sequenceInfo = {
+var sequenceInfo = exports.sequenceInfo = {
   intro: {
     displayName: {
       'en_US': 'Introduction Sequence',
@@ -82,6 +76,7 @@ exports.sequenceInfo = {
     }
   },
   remote: {
+    tab: 'remote',
     displayName: {
       'en_US': 'Push & Pull -- Git Remotes!'
     },
@@ -90,6 +85,7 @@ exports.sequenceInfo = {
     }
   },
   remoteAdvanced: {
+    tab: 'remote',
     displayName: {
       'en_US': 'To Origin And Beyond -- Advanced Git Remotes!'
     },
@@ -145,3 +141,10 @@ exports.sequenceInfo = {
   }
 };
 
+exports.getTabForSequence = function(sequenceName) {
+  var info = sequenceInfo[sequenceName];
+  return (info.tab) ?
+    info.tab :
+    'main';
+};
+

src/style/main.css

@@ -748,6 +748,30 @@ div.modalView.box.inFront.show {
 .levelDropdownView {
 }
 
+div.levelDropdownTabWrapper {
+  margin-left: -10px;
+  margin-right: -10px;
+  border-bottom: 2px solid #ccc;
+  margin-bottom: 10px;
+}
+
+div.levelDropdownTab {
+  border: 1px solid #ccc;
+  border-bottom: 0;
+  cursor: pointer;
+  box-shadow: 0px -4px 12px rgba(0,0,0,0.7);
+  border-radius: 4px 4px 0 0;
+  text-align: center;
+  padding: 4px 10px;
+  color: black;
+  background: #ccc;
+  margin: 0 10px;
+}
+
+div.levelDropdownTab.deselected {
+  opacity: 0.3;
+}
+
 div.displayName {
   border-bottom: 1px dashed grey;
   text-align: center;

src/template.index.html

@@ -225,6 +225,19 @@
   </script>
 
   <script type="text/html" id="level-dropdown-view">
+    <div class="box horizontal center levelDropdownTabWrapper">
+      <% for (var i = 0; i < tabs.length; i++) { %>
+        <% if (tabs[i].id === selectedTab) { %>
+          <div class="levelDropdownTab" data-id="<%=tabs[i].id%>">
+        <% } else { %>
+          <div class="levelDropdownTab deselected" data-id="<%=tabs[i].id%>">
+        <% } %>
+          <span data-id="<%=tabs[i].id%>">
+            <%= tabs[i].name %>
+          </span>
+        </div>
+      <% } %>
+    </div>
   </script>
 
   <script type="text/html" id="series-view">