From ab0cab1f5f9a37ff25454685f7f01ca33873df56 Mon Sep 17 00:00:00 2001
From: Amanda Ghassaei <amandaghassaei@gmail.com>
Date: Tue, 2 Jun 2015 13:48:22 -0700
Subject: [PATCH] menu starting to come in through require
---
index.html | 3 -
js/main.js | 16 +-
js/menus/LatticeMenuView.js | 107 ++++-----
js/menus/MenuParentView.js | 20 ++
js/menus/MenuWrapperView.js | 437 +++++++++++++++++-------------------
5 files changed, 289 insertions(+), 294 deletions(-)
create mode 100644 js/menus/MenuParentView.js
diff --git a/index.html b/index.html
index f44e533a..08b948ae 100644
--- a/index.html
+++ b/index.html
@@ -5,13 +5,10 @@
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!--<script src="dependencies/analytics.js"></script>-->
<!--flatUI bootstrap theme-->
<link href="js/dependencies/flatUI/css/vendor/bootstrap.min.css" rel="stylesheet"><!-- Loading Bootstrap -->
<link href="js/dependencies/flatUI/css/flat-ui.css" rel="stylesheet"><!-- Loading Flat UI -->
- <!--<script src="dependencies/flatUI/js/flat-ui.js"></script>-->
- <!--<script src="dependencies/flatUI/js/vendor/video.js"></script>-->
<!--bootstrap slider-->
<link href="js/dependencies/bootstrap-slider/bootstrap-slider.css" rel="stylesheet">
diff --git a/js/main.js b/js/main.js
index b156eb89..b78dd18e 100644
--- a/js/main.js
+++ b/js/main.js
@@ -9,6 +9,7 @@ requirejs.config({
jquery: 'dependencies/jquery-2.1.3',
underscore: 'dependencies/underscore',
backbone: 'dependencies/backbone',
+ flatUI: 'dependencies/flatUI/js/flat-ui',
fileSaverLib: 'dependencies/loaders/FileSaver.min',
//three
@@ -21,12 +22,12 @@ requirejs.config({
plist: 'models/PList',
appState: 'models/AppState',
lattice: 'lattice/Lattice',
- fileSaver: 'models/FileSaver'
-
- //views
-
+ fileSaver: 'models/FileSaver',
//UI
+ menuWrapper: 'menus/MenuWrapperView',
+ menuParent: 'menus/MenuParentView',
+ latticeMenu: 'menus/LatticeMenuView'
},
shim: {
three: {
@@ -38,12 +39,15 @@ requirejs.config({
},
fileSaverLib: {
exports: 'saveAs'
+ },
+ flatUI: {
+ deps: ['jquery']
}
}
});
-requirejs(['fileSaver', 'analytics'], function(fileSaver) {
- console.log(fileSaver);
+requirejs(['menuWrapper', 'analytics', 'flatUI'], function(menuWrapper) {
+ console.log(menuWrapper);
});
diff --git a/js/menus/LatticeMenuView.js b/js/menus/LatticeMenuView.js
index ba485f5e..4ef8a2ed 100644
--- a/js/menus/LatticeMenuView.js
+++ b/js/menus/LatticeMenuView.js
@@ -2,66 +2,69 @@
* Created by aghassaei on 1/26/15.
*/
+define(['menuParent', 'lattice', 'plist'], function(MenuParentView, lattice, plist){
-LatticeMenuView = Backbone.View.extend({
+ var LatticeMenuView = MenuParentView.extend({
- el: "#menuContent",
+ events: {
+ },
- events: {
- },
+ initialize: function(){
- initialize: function(){
+ _.bindAll(this, "render");
+ //bind events
+ this.listenTo(lattice, "change", this.render);
+ },
- _.bindAll(this, "render");
- //bind events
- this.listenTo(globals.lattice, "change", this.render);
- },
+ render: function(){
+ if (this.model.changedAttributes()["currentNav"]) return;
+ if (this.model.get("currentTab") != "lattice") return;
+ if ($("input[type=text]").is(":focus")) return;
+ this.$el.html(this.template(_.extend(lattice.toJSON(), plist)));
+ },
- render: function(){
- if (this.model.changedAttributes()["currentNav"]) return;
- if (this.model.get("currentTab") != "lattice") return;
- if ($("input[type=text]").is(":focus")) return;
- this.$el.html(this.template(_.extend(globals.lattice.toJSON(), globals.plist)));
- },
+ template: _.template('\
+ Cell Type: \
+ <div class="btn-group">\
+ <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="lattice dropdownSelector" data-property="cellType" data-value="<%= key %>" href="#"><%= allCellTypes[key] %></a></li>\
+ <% }); %>\
+ </ul>\
+ </div><br/><br/>\
+ Cell Connection: \
+ <div class="btn-group">\
+ <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="lattice dropdownSelector" data-property="connectionType" data-value="<%= key %>" href="#"><%= allConnectionTypes[cellType][key] %></a></li>\
+ <% }); %>\
+ </ul>\
+ </div><br/><br/>\
+ <% if (connectionType == "freeformFace") { %>\
+ Current Draw Shape: \
+ <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 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/>\
+ <% } %>\
+ <% if (connectionType == "gik") { %>\
+ GIK Length: <input data-property="superCellRange" data-key="x" value="<%= superCellRange.x %>" placeholder="GIK length" class="form-control intInput lattice" type="text"><br/>\
+ <br/>\
+ <% } %>\
+ <a href="#" class="clearCells btn btn-block btn-lg btn-danger">Clear All Cells</a><br/>\
+ Num Cells: <%= numCells %><br/>\
+ ')
- template: _.template('\
- Cell Type: \
- <div class="btn-group">\
- <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="lattice dropdownSelector" data-property="cellType" data-value="<%= key %>" href="#"><%= allCellTypes[key] %></a></li>\
- <% }); %>\
- </ul>\
- </div><br/><br/>\
- Cell Connection: \
- <div class="btn-group">\
- <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="lattice dropdownSelector" data-property="connectionType" data-value="<%= key %>" href="#"><%= allConnectionTypes[cellType][key] %></a></li>\
- <% }); %>\
- </ul>\
- </div><br/><br/>\
- <% if (connectionType == "freeformFace") { %>\
- Current Draw Shape: \
- <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 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/>\
- <% } %>\
- <% if (connectionType == "gik") { %>\
- GIK Length: <input data-property="superCellRange" data-key="x" value="<%= superCellRange.x %>" placeholder="GIK length" class="form-control intInput lattice" type="text"><br/>\
- <br/>\
- <% } %>\
- <a href="#" class="clearCells btn btn-block btn-lg btn-danger">Clear All Cells</a><br/>\
- Num Cells: <%= numCells %><br/>\
- ')
+ });
+
+ return LatticeMenuView;
});
diff --git a/js/menus/MenuParentView.js b/js/menus/MenuParentView.js
new file mode 100644
index 00000000..b10e5301
--- /dev/null
+++ b/js/menus/MenuParentView.js
@@ -0,0 +1,20 @@
+/**
+ * Created by aghassaei on 6/2/15.
+ */
+
+
+define(['backbone'], function(Backbone){
+
+ var MenuParentView = Backbone.View.extend({
+
+ el: "#menuContent",
+
+ destroy: function(){
+
+ }
+
+ });
+
+ return MenuParentView;
+
+});
\ No newline at end of file
diff --git a/js/menus/MenuWrapperView.js b/js/menus/MenuWrapperView.js
index a1c155f8..54a48c1b 100644
--- a/js/menus/MenuWrapperView.js
+++ b/js/menus/MenuWrapperView.js
@@ -3,240 +3,211 @@
*/
-MenuWrapper = Backbone.View.extend({
-
- el: "#menuWrapper",
-
- events: {
- "click .menuWrapperTab>a": "_tabWasSelected",
- "click .dropdownSelector": "_makeDropdownSelection",
- "click .clearCells": "_clearCells",
- "focusout .floatInput": "_renderTab",//force rounding if needed
- "focusout .intInput": "_renderTab",
- "change input:checkbox": "_clickCheckbox",
- "click input:radio": "_radioSelection"
- },
-
- initialize: function(){
-
- _.bindAll(this, "render", "_updateCurrentTab", "_setVisibility", "_hide", "_show", "_onKeyUp");
- $(document).bind('keyup', {}, this._onKeyUp);
-
- //bind events
- this.listenTo(this.model, "change:currentNav", this.render);
- this.listenTo(globals.lattice, "change:cellType change:connectionType", this._populateAndShow);
- this.listenTo(this.model, "change:currentTab", this._updateCurrentTab);
- this.listenTo(this.model, "change:menuIsVisible", this._setVisibility);
-
- if (this.model.get("menuIsVisible")) this._populateAndShow();
- },
-
- _onKeyUp: function(e){
- if ($("input").is(":focus") && e.keyCode == 13) {//enter key
- $(e.target).blur();
- this._renderTab();
- return;
- }
- if ($(".floatInput").is(":focus")) this._updateFloat(e);
- if ($(".intInput").is(":focus")) this._updateInt(e);
- },
-
- _updateFloat: function(e){
- e.preventDefault();
- var $target = $(e.target);
- var newVal = parseFloat($target.val());
- if (isNaN(newVal)) {
- console.warn("value is not float");
- return;
- }
- newVal = parseFloat(newVal.toFixed(parseInt(4)));
- this._setNumber($target, newVal);
- },
-
- _updateInt: function(e){
- e.preventDefault();
- var $target = $(e.target);
- var newVal = parseInt($target.val());
- if (isNaN(newVal)) {
- console.warn("value is NaN");
- return;
- }
- this._setNumber($target, newVal);
- },
-
- _setNumber: function($target, newVal){
- var property = $target.data("property");
- if (!property) {
- console.warn("no property associated with number input");
- return;
- }
- var key = $target.data("key");
-
- //some numbers are relative
- if (property == "stockPosition" && globals.cam.get(property + "Relative")){
- if (key) newVal = parseFloat((newVal + globals.cam.get("originPosition")[key]).toFixed(4));
- else console.warn("no key found for " + property);
- } else if (property == "rapidHeight" && !globals.cam.get(property + "Relative")){
- newVal = parseFloat((newVal - globals.cam.get("originPosition")["z"]).toFixed(4));
- }
-
- //remove trailing zeros
- newVal = newVal.toString();
- newVal = parseFloat(newVal);
-
- if (key){
- var value = _.clone(this._getPropertyOwner($target).get(property));
- value[key] = newVal;
+define(['jquery', 'backbone', 'appState', 'lattice', 'plist'], function($, Backbone, appState, lattice, plist){
+
+ var MenuWrapper = Backbone.View.extend({
+
+ el: "#menuWrapper",
+
+ events: {
+ "click .menuWrapperTab>a": "_tabWasSelected",
+ "click .dropdownSelector": "_makeDropdownSelection",
+ "click .clearCells": "_clearCells",
+ "focusout .floatInput": "_renderTab",//force rounding if needed
+ "focusout .intInput": "_renderTab",
+ "change input:checkbox": "_clickCheckbox",
+ "click input:radio": "_radioSelection"
+ },
+
+ initialize: function(){
+
+ _.bindAll(this, "render", "_updateCurrentTab", "_setVisibility", "_hide", "_show", "_onKeyUp");
+ $(document).bind('keyup', {}, this._onKeyUp);
+
+ //bind events
+ this.listenTo(this.model, "change:currentNav", this.render);
+ this.listenTo(lattice, "change:cellType change:connectionType", this._populateAndShow);
+ this.listenTo(this.model, "change:currentTab", this._updateCurrentTab);
+ this.listenTo(this.model, "change:menuIsVisible", this._setVisibility);
+
+ if (this.model.get("menuIsVisible")) this._populateAndShow();
+ },
+
+ _onKeyUp: function(e){
+ if ($("input").is(":focus") && e.keyCode == 13) {//enter key
+ $(e.target).blur();
+ this._renderTab();
+ return;
+ }
+ if ($(".floatInput").is(":focus")) this._updateFloat(e);
+ if ($(".intInput").is(":focus")) this._updateInt(e);
+ },
+
+ _updateFloat: function(e){
+ e.preventDefault();
+ var $target = $(e.target);
+ var newVal = parseFloat($target.val());
+ if (isNaN(newVal)) {
+ console.warn("value is not float");
+ return;
+ }
+ newVal = parseFloat(newVal.toFixed(parseInt(4)));
+ this._setNumber($target, newVal);
+ },
+
+ _updateInt: function(e){
+ e.preventDefault();
+ var $target = $(e.target);
+ var newVal = parseInt($target.val());
+ if (isNaN(newVal)) {
+ console.warn("value is NaN");
+ return;
+ }
+ this._setNumber($target, newVal);
+ },
+
+ _setNumber: function($target, newVal){
+ var property = $target.data("property");
+ if (!property) {
+ console.warn("no property associated with number input");
+ return;
+ }
+ var key = $target.data("key");
+
+ //some numbers are relative
+ if (property == "stockPosition" && globals.cam.get(property + "Relative")){
+ if (key) newVal = parseFloat((newVal + globals.cam.get("originPosition")[key]).toFixed(4));
+ else console.warn("no key found for " + property);
+ } else if (property == "rapidHeight" && !globals.cam.get(property + "Relative")){
+ newVal = parseFloat((newVal - globals.cam.get("originPosition")["z"]).toFixed(4));
+ }
+
+ //remove trailing zeros
+ newVal = newVal.toString();
+ newVal = parseFloat(newVal);
+
+ if (key){
+ var value = _.clone(this._getPropertyOwner($target).get(property));
+ value[key] = newVal;
+ this._getPropertyOwner($target).set(property, value);
+ }
+ this._getPropertyOwner($target).set(property, newVal);
+ },
+
+ _makeDropdownSelection: function(e){
+ var $target = $(e.target);
+ var property = $target.data("property");
+ var value = $target.data("value");
+ if (!property || !value) return;
this._getPropertyOwner($target).set(property, value);
- }
- this._getPropertyOwner($target).set(property, newVal);
- },
-
- _makeDropdownSelection: function(e){
- var $target = $(e.target);
- var property = $target.data("property");
- var value = $target.data("value");
- if (!property || !value) return;
- this._getPropertyOwner($target).set(property, value);
- },
-
- _clickCheckbox: function(e){
- e.preventDefault();
- var $target = $(e.target);
- $target.blur();
- var property = $target.data("property");
- if (!property) {
- console.warn("no property associated with checkbox input");
- return;
- }
- this._getPropertyOwner($target).set(property, !this._getPropertyOwner($target).get(property));
- },
-
- _radioSelection: function(e){
- e.preventDefault();
- var $target = $(e.target);
- this._getPropertyOwner($target).set($target.attr("name"), $target.val());
- $target.blur();
- },
-
- _clearCells: function(e){
- e.preventDefault();
- globals.lattice.clearCells();
- },
-
- _getPropertyOwner: function($target){
- if ($target.hasClass("lattice")) return globals.lattice;
- if ($target.hasClass("assembler")) return globals.cam;
- if ($target.hasClass("appState")) return globals.appState;
- console.warn("no owner found for " + $target);
- return null;
- },
-
-
-
-
- _tabWasSelected: function(e){
- e.preventDefault();
- var tabName = $(e.target).parent().data('name');
- this.model.set("currentTab", tabName);
- },
-
- _updateCurrentTab: function(){
- var tabName = this.model.get("currentTab");
- _.each($(".menuWrapperTab"), function(tab){
- var $tab = $(tab);
- if ($tab.data('name') == tabName){
- $tab.addClass("active");
+ },
+
+ _clickCheckbox: function(e){
+ e.preventDefault();
+ var $target = $(e.target);
+ $target.blur();
+ var property = $target.data("property");
+ if (!property) {
+ console.warn("no property associated with checkbox input");
+ return;
+ }
+ this._getPropertyOwner($target).set(property, !this._getPropertyOwner($target).get(property));
+ },
+
+ _radioSelection: function(e){
+ e.preventDefault();
+ var $target = $(e.target);
+ this._getPropertyOwner($target).set($target.attr("name"), $target.val());
+ $target.blur();
+ },
+
+ _clearCells: function(e){
+ e.preventDefault();
+ lattice.clearCells();
+ },
+
+ _getPropertyOwner: function($target){
+ if ($target.hasClass("lattice")) return lattice;
+ if ($target.hasClass("assembler")) return globals.cam;
+ if ($target.hasClass("appState")) return this.model;
+ console.warn("no owner found for " + $target);
+ return null;
+ },
+
+
+
+
+ _tabWasSelected: function(e){
+ e.preventDefault();
+ var tabName = $(e.target).parent().data('name');
+ this.model.set("currentTab", tabName);
+ },
+
+ _updateCurrentTab: function(){
+ var tabName = this.model.get("currentTab");
+ _.each($(".menuWrapperTab"), function(tab){
+ var $tab = $(tab);
+ if ($tab.data('name') == tabName){
+ $tab.addClass("active");
+ } else {
+ $tab.removeClass("active");
+ }
+ });
+ this._renderTab(tabName);
+ },
+
+ _renderTab: function(tabName){
+ if (!tabName || !_.isString(tabName)) tabName = this.model.get("currentTab");
+
+ if (this.menu) this.menu.destroy();
+ var self = this;
+ require([tabName + "Menu"], function(MenuView){
+ self.menu = new MenuView({model:self.model});
+ self.menu.render();
+ });
+ },
+
+ render: function(){
+ var self = this;
+ this._hide(function(){
+ self._populateAndShow();
+ self.model.trigger("change:currentTab");//this was updated silently before todo need this?
+ }, true);
+ },
+
+ _populateAndShow: function(){
+ $("#menuHeader").html(this.template(_.extend(this.model.toJSON(), lattice.toJSON(), plist)));
+ this._updateCurrentTab();
+ this._show();
+ },
+
+ _setVisibility: function(){
+ if(this.model.get("menuIsVisible")){
+ this._populateAndShow();
} else {
- $tab.removeClass("active");
+ this._hide();
}
- });
- this._renderTab(tabName);
- },
-
- _renderTab: function(tabName){
- if (!tabName || !_.isString(tabName)) tabName = this.model.get("currentTab");
-
- if (tabName == "lattice"){
- if (!this.latticeMenu) this.latticeMenu = new LatticeMenuView({model:this.model});
- this.latticeMenu.render();
- } else if (tabName == "import"){
- if (!this.importMenu) this.importMenu = new ImportMenuView({model:this.model});
- this.importMenu.render();
- } else if (tabName == "sketch"){
- if (!this.sketchMenu) this.sketchMenu = new SketchMenuView({model:this.model});
- this.sketchMenu.render();
- } else if (tabName == "part"){
- if (!this.partMenu) this.partMenu = new PartMenuView({model:this.model});
- this.partMenu.render();
- } else if (tabName == "script"){
- if (!this.scriptMenu) this.scriptMenu = new ScriptMenuView({model:this.model});
- this.scriptMenu.render();
- } else if (tabName == "physics"){
- if (!this.physicsMenu) this.physicsMenu = new PhysicsMenuView({model:this.model});
- this.physicsMenu.render();
- } else if (tabName == "material"){
- if (!this.materialMenu) this.materialMenu = new MaterialMenuView({model:this.model});
- this.materialMenu.render();
- } else if (tabName == "optimize"){
- if (!this.optimizeMenu) this.optimizeMenu = new OptimizationMenuView({model:this.model});
- this.optimizeMenu.render();
- } else if (tabName == "assembler"){
- if (!this.assemblerMenu) this.assemblerMenu = new AssemblerMenuView({model:this.model});
- this.assemblerMenu.render();
- } else if (tabName == "cam"){
- if (!this.camMenu) this.camMenu = new CamMenuView({model:this.model});
- this.camMenu.render();
- } else if (tabName == "animate"){
- if (!this.animationMenu) this.animationMenu = new AnimationMenuView({model:this.model});
- this.animationMenu.render();
- } else if (tabName == "send"){
- if (!this.sendMenu) this.sendMenu = new SendMenuView({model:this.model});
- this.sendMenu.render();
- } else {
- console.warn("no tab initialized!");
- $("#menuContent").html('Coming Soon.');//clear out content from menu
- }
- },
-
- render: function(){
- var self = this;
- this._hide(function(){
- self._populateAndShow();
- self.model.trigger("change:currentTab");//this was updated silently before todo need this?
- }, true);
- },
-
- _populateAndShow: function(){
- $("#menuHeader").html(this.template(_.extend(this.model.toJSON(), globals.lattice.toJSON(), globals.plist)));
- this._updateCurrentTab();
- this._show();
- },
-
- _setVisibility: function(){
- if(this.model.get("menuIsVisible")){
- this._populateAndShow();
- } else {
- this._hide();
- }
- },
-
- _hide: function(callback, suppressModelUpdate){
- this.$el.animate({right: "-430"}, {done: callback});
- if (!suppressModelUpdate) this.model.set("menuIsVisible", false);
- },
-
- _show: function(){
- this.$el.animate({right: "0"});
- this.model.set("menuIsVisible", true);
- },
-
- template: _.template('\
- <ul class="nav nav-tabs nav-justified">\
- <% _.each(_.keys(allMenuTabs[currentNav]), function(key){\
- if (key == "part" && !(allPartTypes[cellType][connectionType])) return; %>\
- <li role="presentation" class="menuWrapperTab" data-name="<%= key %>"><a href="#"><%= allMenuTabs[currentNav][key] %></a></li>\
- <% }); %>\
- </ul>\
- ')
+ },
+
+ _hide: function(callback, suppressModelUpdate){
+ this.$el.animate({right: "-430"}, {done: callback});
+ if (!suppressModelUpdate) this.model.set("menuIsVisible", false);
+ },
+
+ _show: function(){
+ this.$el.animate({right: "0"});
+ this.model.set("menuIsVisible", true);
+ },
+
+ template: _.template('\
+ <ul class="nav nav-tabs nav-justified">\
+ <% _.each(_.keys(allMenuTabs[currentNav]), function(key){\
+ if (key == "part" && !(allPartTypes[cellType][connectionType])) return; %>\
+ <li role="presentation" class="menuWrapperTab" data-name="<%= key %>"><a href="#"><%= allMenuTabs[currentNav][key] %></a></li>\
+ <% }); %>\
+ </ul>\
+ ')
+ });
+
+ return new MenuWrapper({model:appState});
});
\ No newline at end of file
--
GitLab