diff --git a/js/menus/LatticeMenuView.js b/js/menus/LatticeMenuView.js index 6d6ad332f3d28c9281c716438ab8a77710f1ea3f..348dc486c96a11e5dfe30408caf95d580d26b778 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 6ebdca11eb01c0640010a0fb06f00619dd8566e5..80a210e04c0b0541bd3d23f26621d6d34c97853a 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 ddcdd3304a1b5bd54733e38115644d90374d4558..6f023b64585ad2829da221a6a6e7f49d69a590f0 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");