From 0ad1785335c1fd4bb42d45e252fc4414959f4844 Mon Sep 17 00:00:00 2001
From: Amanda Ghassaei <amandaghassaei@gmail.com>
Date: Tue, 2 Jun 2015 14:21:04 -0700
Subject: [PATCH] ribbon through require
---
js/main.js | 7 +--
js/menus/Ribbon.js | 132 +++++++++++++++++++++++----------------------
2 files changed, 71 insertions(+), 68 deletions(-)
diff --git a/js/main.js b/js/main.js
index 18550b93..fb896c99 100644
--- a/js/main.js
+++ b/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});
diff --git a/js/menus/Ribbon.js b/js/menus/Ribbon.js
index e1d224a3..10169cb5 100644
--- a/js/menus/Ribbon.js
+++ b/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>\
--
GitLab