ribbon through require

js/main.js

@@ -27,6 +27,7 @@ requirejs.config({
         //UI
         navbar: 'menus/Navbar',
         navViewMenu: 'menus/NavViewMenu',//view dropdown
+        ribbon: 'menus/Ribbon',
         menuWrapper: 'menus/MenuWrapperView',
         menuParent: 'menus/MenuParentView',
         latticeMenu: 'menus/LatticeMenuView',
@@ -61,12 +62,12 @@ requirejs.config({
 });
 
 //init stuff
-requirejs(['appState', 'lattice', 'menuWrapper', 'navbar', 'threeModel', 'threeView', 'analytics', 'flatUI'],
-    function(appState, lattice, MenuWrapper, Navbar, three, ThreeView){
+requirejs(['appState', 'lattice', 'menuWrapper', 'navbar', 'ribbon', 'threeModel', 'threeView', 'analytics', 'flatUI'],
+    function(appState, lattice, MenuWrapper, Navbar, Ribbon, three, ThreeView){
 
     new MenuWrapper({model:appState});
     new Navbar({model:appState});
-//    new Ribbon({model:appState});
+    new Ribbon({model:appState});
 
     new ThreeView({model:three});
 

js/menus/Ribbon.js

@@ -2,73 +2,75 @@
  * Created by fab on 3/18/15.
  */
 
-
-Ribbon = Backbone.View.extend({
-
-    el: "#navRibbon",
-
-    events: {
-        "click .ribbonCellMode":                                 "_updateCellMode",
-        "click .ribbonDeleteMode":                               "_updateDeleteMode",
-        "click .highlightMode":                                  "_updateHighlightMode",
-        "click .cellsVisible":                                   "_updateCellVisibility"
-    },
-
-    initialize: function(){
-
-        _.bindAll(this, "render");
-
-        this.listenTo(this.model, "change:ribbonIsVisible", this._changeVisibility);
-        this.listenTo(this.model, "change:cellMode", this.render);
-        this.listenTo(this.model, "change:deleteMode", this.render);
-        this.listenTo(this.model, "change:highlightMode", this.render);
-        this.listenTo(this.model, "change:cellsVisible", this.render);
-        this.listenTo(globals.lattice, "change:cellType change:connectionType", this.render);
-        this.render();
-    },
-
-    _updateCellMode: function(e){
-        e.preventDefault();
-        globals.appState.set("cellMode", $(e.target).data("type"));
-    },
-
-    _updateDeleteMode: function(e){
-        e.preventDefault();
-        globals.appState.set("deleteMode", !globals.appState.get("deleteMode"));
-    },
-
-    _updateHighlightMode: function(e){
-        e.preventDefault();
-        globals.appState.set("highlightMode", !globals.appState.get("highlightMode"));
-    },
-
-    _updateCellVisibility: function(e){
-        e.preventDefault();
-        globals.appState.set("cellsVisible", !globals.appState.get("cellsVisible"));
-    },
-
-    _changeVisibility: function(){
-        var state = this.model.get("ribbonIsVisible");
-        if (state) this.$el.show();
-        else this.$el.hide();
-    },
-
-    render: function(){
-        this.$el.html(this.template(_.extend(globals.lattice.toJSON(), this.model.toJSON(), globals.plist)));
-    },
-
-    template: _.template('\
-        <div class="btn-toolbar">\
-            <div class="btn-group">\
-              <a data-type="cell" class="btn btn-primary btn-ribbon ribbonCellMode<% if (cellMode == "cell"){ %> ribbon-selected<% } %>" href="#"><img data-type="cell" src="assets/imgs/cell-sm.png"></a>\
-              <% if (allPartTypes[cellType][connectionType]){ %>\
-              <a data-type="part" class="btn btn-primary btn-ribbon ribbonCellMode<% if (cellMode == "part"){ %> ribbon-selected<% } %>" href="#"><img data-type="part" src="assets/imgs/part-sm.png"></a>\
-              <% } %>\
-              <a class="btn btn-primary btn-ribbon ribbonDeleteMode<% if (deleteMode){ %> ribbon-selected"<% } %>"><span class="fui-cross"></span></a>\
+define(['jquery', 'underscore', 'backbone', 'lattice', 'plist'], function($, _, Backbone, lattice, plist){
+
+    return Backbone.View.extend({
+
+        el: "#navRibbon",
+
+        events: {
+            "click .ribbonCellMode":                                 "_updateCellMode",
+            "click .ribbonDeleteMode":                               "_updateDeleteMode",
+            "click .highlightMode":                                  "_updateHighlightMode",
+            "click .cellsVisible":                                   "_updateCellVisibility"
+        },
+
+        initialize: function(){
+
+            _.bindAll(this, "render");
+
+            this.listenTo(this.model, "change:ribbonIsVisible", this._changeVisibility);
+            this.listenTo(this.model, "change:cellMode", this.render);
+            this.listenTo(this.model, "change:deleteMode", this.render);
+            this.listenTo(this.model, "change:highlightMode", this.render);
+            this.listenTo(this.model, "change:cellsVisible", this.render);
+            this.listenTo(lattice, "change:cellType change:connectionType", this.render);
+            this.render();
+        },
+
+        _updateCellMode: function(e){
+            e.preventDefault();
+            this.model.set("cellMode", $(e.target).data("type"));
+        },
+
+        _updateDeleteMode: function(e){
+            e.preventDefault();
+            this.model.set("deleteMode", !this.model.get("deleteMode"));
+        },
+
+        _updateHighlightMode: function(e){
+            e.preventDefault();
+            this.model.set("highlightMode", !this.model.get("highlightMode"));
+        },
+
+        _updateCellVisibility: function(e){
+            e.preventDefault();
+            this.model.set("cellsVisible", !this.model.get("cellsVisible"));
+        },
+
+        _changeVisibility: function(){
+            var state = this.model.get("ribbonIsVisible");
+            if (state) this.$el.show();
+            else this.$el.hide();
+        },
+
+        render: function(){
+            this.$el.html(this.template(_.extend(lattice.toJSON(), this.model.toJSON(), plist)));
+        },
+
+        template: _.template('\
+            <div class="btn-toolbar">\
+                <div class="btn-group">\
+                  <a data-type="cell" class="btn btn-primary btn-ribbon ribbonCellMode<% if (cellMode == "cell"){ %> ribbon-selected<% } %>" href="#"><img data-type="cell" src="assets/imgs/cell-sm.png"></a>\
+                  <% if (allPartTypes[cellType][connectionType]){ %>\
+                  <a data-type="part" class="btn btn-primary btn-ribbon ribbonCellMode<% if (cellMode == "part"){ %> ribbon-selected<% } %>" href="#"><img data-type="part" src="assets/imgs/part-sm.png"></a>\
+                  <% } %>\
+                  <a class="btn btn-primary btn-ribbon ribbonDeleteMode<% if (deleteMode){ %> ribbon-selected"<% } %>"><span class="fui-cross"></span></a>\
+                </div>\
             </div>\
-        </div>\
-        ')
+            ')
 
+    });
 });
 
 //<a class="btn btn-primary btn-ribbon highlightMode<% if (highlightMode){ %> ribbon-selected<% } %>" href="#"><img data-type="part" src="assets/imgs/cursor-light.png"></a>\