From 8e75eb8b3259663abe1ee51e3f5662ddc8910249 Mon Sep 17 00:00:00 2001
From: Amanda Ghassaei <amandaghassaei@gmail.com>
Date: Mon, 25 May 2015 12:32:21 -0700
Subject: [PATCH] dropdowns handled by menu wrapper
---
js/menus/LatticeMenuView.js | 86 +++++--------------------------------
js/menus/MenuWrapperView.js | 47 +++++++++++++++++---
js/models/Lattice.js | 12 ++++++
3 files changed, 63 insertions(+), 82 deletions(-)
diff --git a/js/menus/LatticeMenuView.js b/js/menus/LatticeMenuView.js
index 6d6ad332..348dc486 100644
--- a/js/menus/LatticeMenuView.js
+++ b/js/menus/LatticeMenuView.js
@@ -10,35 +10,16 @@ LatticeMenuView = Backbone.View.extend({
events: {
"click #latticeMenuClearCells": "_clearCells",
"change #latticeScale": "_changeScale",
- "click .units": "_changeUnits",
- "click .cellType": "_changeCellType",
- "click .connectionType": "_changeConnectionType",
- "slide #scaleSlider": "_sliderDidSlide",
- "slideStop #scaleSlider": "_changeScaleSlider",
- "click #freeformTetraCell": "_setTetraCell",
- "click #freeformOctaCell": "_setOctaCell"
+ "slide #latticeMenuScaleSlider": "_sliderDidSlide",
+ "slideStop #latticeMenuScaleSlider": "_changeScaleSlider"
},
initialize: function(){
- _.bindAll(this, "render", "_onKeyup");
+ _.bindAll(this, "render");
//bind events
this.listenTo(globals.lattice, "change", this.render);
- $(document).bind('keyup', {state:false}, this._onKeyup);
- },
-
- _onKeyup: function(e){
- if (this.model.get("currentTab") != "lattice") return;
-
- if ($("input").is(":focus") && e.keyCode == 13) {//enter key
- $(e.target).blur();
- this.render();
- return;
- }
-
- if ($(".cellSeparation").is(":focus")) this._updateNumber(e, "cellSeparation");
- if ($("#gikLength").is(":focus")) this._updateGikLength(e);
},
_updateNumber: function(e, property){
@@ -69,11 +50,6 @@ LatticeMenuView = Backbone.View.extend({
globals.lattice.set("scale", val);
},
- _changeUnits: function(e){
- e.preventDefault();
- globals.lattice.set("units", $(e.target).data("type"));
- },
-
_sliderDidSlide: function(e){
var scale = $(e.target)[0].value;
globals.lattice.previewScaleChange(scale);//does not trigger lattice change event - no rerendering of ui
@@ -85,52 +61,12 @@ LatticeMenuView = Backbone.View.extend({
globals.lattice.set("scale", $(e.target)[0].value);
},
- _changeCellType: function(e){
- e.preventDefault();
- var cellType = $(e.target).data("type");
-
- //reset everything to defaults silently
- if (cellType != globals.lattice.get("cellType")){
- this._setAppStateToDefaultsSilently(cellType);
- }
- globals.lattice.set("cellType", cellType);
- },
-
- _changeConnectionType: function(e){
- e.preventDefault();
- var connectionType = $(e.target).data("type");
- if (connectionType != globals.lattice.get("connectionType")){
- this._setAppStateToDefaultsSilently(globals.lattice.get("cellType"), connectionType);
- }
- globals.lattice.set("connectionType", connectionType);
- },
-
- _setAppStateToDefaultsSilently: function(newCellType, newConnectionType){
- if (!newConnectionType){
- newConnectionType = _.keys(globals.plist["allConnectionTypes"][newCellType])[0];
- globals.lattice.set("connectionType", newConnectionType, {silent:true});
- }
- var partType = _.keys(globals.plist["allPartTypes"][newCellType][newConnectionType])[0];
- globals.lattice.set("partType", partType, {silent:true});
- },
-
- //todo get rid of this
- _setTetraCell: function(e){
- e.preventDefault();
- globals.lattice.set("freeformCellType", "tetra");
- },
-
- _setOctaCell: function(e){
- e.preventDefault();
- globals.lattice.set("freeformCellType", "octa");
- },
-
render: function(){
if (this.model.changedAttributes()["currentNav"]) return;
if (this.model.get("currentTab") != "lattice") return;
this.$el.html(this.template(_.extend(this.model.toJSON(), globals.lattice.toJSON(), globals.plist)));
- $('#scaleSlider').slider({
+ $('#latticeMenuScaleSlider').slider({
formatter: function(value) {
return value;
}
@@ -143,7 +79,7 @@ LatticeMenuView = Backbone.View.extend({
<button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allCellTypes[cellType] %><span class="caret"></span></button>\
<ul role="menu" class="dropdown-menu">\
<% _.each(_.keys(allCellTypes), function(key){ %>\
- <li><a class="cellType" data-type="<%= key %>" href="#"><%= allCellTypes[key] %></a></li>\
+ <li><a class="lattice dropdownSelector" data-property="cellType" data-value="<%= key %>" href="#"><%= allCellTypes[key] %></a></li>\
<% }); %>\
</ul>\
</div><br/><br/>\
@@ -152,7 +88,7 @@ LatticeMenuView = Backbone.View.extend({
<button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allConnectionTypes[cellType][connectionType] %>-Connected<span class="caret"></span></button>\
<ul role="menu" class="dropdown-menu">\
<% _.each(_.keys(allConnectionTypes[cellType]), function(key){ %>\
- <li><a class="connectionType" data-type="<%= key %>" href="#"><%= allConnectionTypes[cellType][key] %></a></li>\
+ <li><a class="lattice dropdownSelector" data-property="connectionType" data-value="<%= key %>" href="#"><%= allConnectionTypes[cellType][key] %></a></li>\
<% }); %>\
</ul>\
</div><br/><br/>\
@@ -161,8 +97,8 @@ LatticeMenuView = Backbone.View.extend({
<div class="btn-group">\
<button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= freeformCellType %><span class="caret"></span></button>\
<ul role="menu" class="dropdown-menu">\
- <li><a id="freeformOctaCell" href="#">octa</a></li>\
- <li><a id="freeformTetraCell" href="#">tetra</a></li>\
+ <li><a class="lattice dropdownSelector" data-property="freeformCellType" data-value="octa" href="#">octa</a></li>\
+ <li><a class="lattice dropdownSelector" data-property="freeformCellType" data-value="tetra" href="#">tetra</a></li>\
</ul>\
</div>\
<br/><br/>\
@@ -176,21 +112,21 @@ LatticeMenuView = Backbone.View.extend({
<button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allMaterialTypes[cellType][connectionType][materialType].name %><span class="caret"></span></button>\
<ul role="menu" class="dropdown-menu">\
<% _.each(_.keys(allMaterialTypes[cellType][connectionType]), function(key){ %>\
- <li><a class="materialType" data-type="<%= key %>" href="#"><%= allMaterialTypes[cellType][connectionType][key].name %></a></li>\
+ <li><a class="lattice dropdownSelector" data-property="materialType" data-value="<%= key %>" href="#"><%= allMaterialTypes[cellType][connectionType][key].name %></a></li>\
<% }); %>\
</ul>\
</div><br/><br/>\
<% } %>\
<br/>\
Scale: <input id="latticeScale" value="<%= scale %>" placeholder="enter scale" class="form-control numberInput" type="text"><br/>\
- <input id="scaleSlider" data-slider-id="ex1Slider" type="text" data-slider-min="1" data-slider-max="100" data-slider-step="0.1" data-slider-value="<%= scale %>"/>\
+ <input id="latticeMenuScaleSlider" data-slider-id="ex1Slider" type="text" data-slider-min="1" data-slider-max="100" data-slider-step="0.1" data-slider-value="<%= scale %>"/>\
<br/>\
Units: \
<div class="btn-group">\
<button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allUnitTypes[units] %><span class="caret"></span></button>\
<ul role="menu" class="dropdown-menu">\
<% _.each(_.keys(allUnitTypes), function(key){ %>\
- <li><a class="units" data-type="<%= key %>" href="#"><%= allUnitTypes[key] %></a></li>\
+ <li><a class="lattice dropdownSelector" data-property="units" data-value="<%= key %>" href="#"><%= allUnitTypes[key] %></a></li>\
<% }); %>\
</ul>\
</div><br/><br/>\
diff --git a/js/menus/MenuWrapperView.js b/js/menus/MenuWrapperView.js
index 6ebdca11..80a210e0 100644
--- a/js/menus/MenuWrapperView.js
+++ b/js/menus/MenuWrapperView.js
@@ -5,20 +5,21 @@
MenuWrapper = Backbone.View.extend({
- el: "#menuHeader",
+ el: "#menuWrapper",
events: {
- "click .menuWrapperTab>a": "_tabWasSelected"
+ "click .menuWrapperTab>a": "_tabWasSelected",
+ "click .dropdownSelector": "_makeDropdownSelection"
},
initialize: function(){
- _.bindAll(this, "render", "_updateCurrentTab", "_setVisibility", "_hide", "_show");
+ _.bindAll(this, "render", "_updateCurrentTab", "_setVisibility", "_hide", "_show", "_onKeyUp");
+ $(document).bind('keyup', {}, this._onKeyUp);
var lattice = globals.lattice;
//init all tab view controllers
- this.latticeMenu = new LatticeMenuView({model:this.model});
this.importMenu = new ImportMenuView({model:this.model});
this.sketchMenu = new SketchMenuView({model:lattice, appState:this.model});
this.partMenu = new PartMenuView({model:this.model, lattice:lattice});
@@ -40,6 +41,37 @@ MenuWrapper = Backbone.View.extend({
if (this.model.get("menuIsVisible")) this._populateAndShow();
},
+
+ _onKeyUp: function(e){
+
+ if ($("input").is(":focus") && e.keyCode == 13) {//enter key
+ $(e.target).blur();
+// this.render();
+ return;
+ }
+
+ if ($(".floatInput").is(":focus")) this._updateFloat(e);
+ if ($(".intInput").is(":focus")) this._updateInt(e);
+ },
+
+ _updateFloat: function(e){
+
+ },
+
+ _updateInt: function(e){
+
+ },
+
+ _makeDropdownSelection: function(e){
+ var $target = $(e.target);
+ var property = $target.data("property");
+ var value = $target.data("value");
+ if (!property || !value) return;
+ if ($target.hasClass("lattice")) globals.lattice.set(property, value);
+ },
+
+
+
_tabWasSelected: function(e){
e.preventDefault();
var tabName = $(e.target).parent().data('name');
@@ -58,6 +90,7 @@ MenuWrapper = Backbone.View.extend({
});
if (tabName == "lattice"){
+ if (!this.latticeMenu) this.latticeMenu = new LatticeMenuView({model:this.model});
this.latticeMenu.render();
} else if (tabName == "import"){
this.importMenu.render();
@@ -97,7 +130,7 @@ MenuWrapper = Backbone.View.extend({
},
_populateAndShow: function(){
- this.$el.html(this.template(_.extend(this.model.toJSON(), globals.lattice.toJSON(), globals.plist)));
+ $("#menuHeader").html(this.template(_.extend(this.model.toJSON(), globals.lattice.toJSON(), globals.plist)));
this._updateCurrentTab();
this._show();
},
@@ -111,12 +144,12 @@ MenuWrapper = Backbone.View.extend({
},
_hide: function(callback, suppressModelUpdate){
- this.$el.parent().animate({right: "-430"}, {done: callback});
+ this.$el.animate({right: "-430"}, {done: callback});
if (!suppressModelUpdate) this.model.set("menuIsVisible", false);
},
_show: function(){
- this.$el.parent().animate({right: "0"});
+ this.$el.animate({right: "0"});
this.model.set("menuIsVisible", true);
},
diff --git a/js/models/Lattice.js b/js/models/Lattice.js
index ddcdd330..6f023b64 100644
--- a/js/models/Lattice.js
+++ b/js/models/Lattice.js
@@ -424,6 +424,7 @@ Lattice = Backbone.Model.extend({
_updateLatticeType: function(arg1, arg2, arg3, loadingFromFile){//do not clear cells if loading from file (cells array contains important metadata)
+ this._setToDefaultsSilently();
this._setDefaultCellMode();
if (typeof loadingFromFile == "undefined") loadingFromFile = false;
@@ -496,6 +497,17 @@ Lattice = Backbone.Model.extend({
globals.three.render();
},
+ _setToDefaultsSilently: function(){
+ var newCellType = this.get("cellType");
+ var newConnectionType = this.get("connectionType");
+ if (newConnectionType == this.previous("connectionType")){
+ newConnectionType = _.keys(globals.plist["allConnectionTypes"][newCellType])[0];
+ this.set("connectionType", newConnectionType, {silent:true});
+ }
+ var partType = _.keys(globals.plist["allPartTypes"][newCellType][newConnectionType])[0];
+ this.set("partType", partType, {silent:true});
+ },
+
_setDefaultCellMode: function(){
if (!globals.plist["allPartTypes"][this.get("cellType")][this.get("connectionType")]){
globals.appState.set("cellMode", "cell");
--
GitLab