diff --git a/dependencies/bootstrap-slider/bootstrap-slider.js b/dependencies/bootstrap-slider/bootstrap-slider.js index ccb3c42039d864345bf72d1be3e35a6fa95dc79b..49b6de5d34a13bf45c160ca1d0f9f4a28ad5367d 100755 --- a/dependencies/bootstrap-slider/bootstrap-slider.js +++ b/dependencies/bootstrap-slider/bootstrap-slider.js @@ -402,7 +402,7 @@ this.tooltip_max.style.left = '100%'; } else { this._addClass(this.sliderElem, 'slider-horizontal'); - this._addClass(this.sliderElem, 'fullWidth'); +// this._addClass(this.sliderElem, 'fullWidth'); this.sliderElem.style.width = origWidth; this.options.orientation = 'horizontal'; diff --git a/js/menus/LatticeMenuView.js b/js/menus/LatticeMenuView.js index 1347e678c05d29c9fae8fa64ef4f85fa9bcc8eac..dc1543a6d82bb6744e9c726f1b5af04bd480ddc8 100644 --- a/js/menus/LatticeMenuView.js +++ b/js/menus/LatticeMenuView.js @@ -11,7 +11,9 @@ LatticeMenuView = Backbone.View.extend({ "click #latticeMenuClearCells": "_clearCells", "change #latticeScale": "_changeScale", "click .cellType": "_changeCellType", - "click .connectionType": "_changeConnectionType" + "click .connectionType": "_changeConnectionType", + "slide #scaleSlider": "_sliderDidSlide", + "slideStop #scaleSlider": "_changeScaleSlider" }, @@ -25,6 +27,7 @@ LatticeMenuView = Backbone.View.extend({ this.render(); }; }); + }, _clearCells: function(e){ @@ -39,6 +42,15 @@ LatticeMenuView = Backbone.View.extend({ this.model.set("scale", val); }, + _sliderDidSlide: function(e){ + this.model.previewScaleChange($(e.target)[0].value); + window.three.render(); + }, + + _changeScaleSlider: function(e){ + this.model.set("scale", $(e.target)[0].value); + }, + _changeCellType: function(e){ e.preventDefault(); var cellType = $(e.target).data("type"); @@ -88,6 +100,12 @@ LatticeMenuView = Backbone.View.extend({ render: function(){ if (this.appState.get("currentTab") != "lattice") return; this.$el.html(this.template(this.model.attributes)); + + $('#scaleSlider').slider({ + formatter: function(value) { + return value; + } + }); }, template: _.template('\ @@ -109,7 +127,8 @@ LatticeMenuView = Backbone.View.extend({ <% }); %>\ </ul>\ </div><br/><br/>\ - Scale: <input id="latticeScale" value="<%= scale %>" placeholder="enter scale" class="form-control" type="text"><br/>\ + Scale: <input id="scaleSlider" data-slider-id="ex1Slider" type="text" data-slider-min="1" data-slider-max="100" data-slider-step="1" data-slider-value="<%= scale %>"/>\ + <br/><input id="latticeScale" value="<%= scale %>" placeholder="enter scale" class="form-control" type="text"><br/>\ Num Cells: <%= numCells %><br/>\ <br/>\ <a href="#" id="latticeMenuClearCells" class=" btn btn-block btn-lg btn-default">Clear All Cells</a><br/>\ diff --git a/js/models/Lattice.js b/js/models/Lattice.js index 1deb9964b74b72c8b602739f8ead2fd930972cbb..fde2f765aeeae3dec3733bfe0209c7220d6328eb 100644 --- a/js/models/Lattice.js +++ b/js/models/Lattice.js @@ -228,8 +228,11 @@ Lattice = Backbone.Model.extend({ window.three.render(); }, + previewScaleChange: function(scale){ + this.get("basePlane").updateScale(scale); + }, + _changeLatticeStructure: function(){ - console.log("amanda"); this.clearCells(); this.get("basePlane").updateGeometry(this.get("cellType"), this.get("connectionType"), this.get("scale")); },