diff --git a/js/main.js b/js/main.js index be57e720a74d04764bf931f45ac51a6391a2315d..18550b938fbf71a80a4b095be64792efc1b36b58 100644 --- a/js/main.js +++ b/js/main.js @@ -25,6 +25,8 @@ requirejs.config({ fileSaver: 'models/FileSaver', //UI + navbar: 'menus/Navbar', + navViewMenu: 'menus/NavViewMenu',//view dropdown menuWrapper: 'menus/MenuWrapperView', menuParent: 'menus/MenuParentView', latticeMenu: 'menus/LatticeMenuView', @@ -58,8 +60,17 @@ requirejs.config({ } }); -requirejs(['menuWrapper', 'analytics', 'flatUI'], function(menuWrapper) { - console.log(menuWrapper); +//init stuff +requirejs(['appState', 'lattice', 'menuWrapper', 'navbar', 'threeModel', 'threeView', 'analytics', 'flatUI'], + function(appState, lattice, MenuWrapper, Navbar, three, ThreeView){ + + new MenuWrapper({model:appState}); + new Navbar({model:appState}); +// new Ribbon({model:appState}); + + new ThreeView({model:three}); + +// if (lattice.get("connectionType") != "gik") lattice.addCellAtIndex({x:0,y:0,z:0});//add a cell }); diff --git a/js/menus/LatticeMenuView.js b/js/menus/LatticeMenuView.js index 0a639d4f51003cee11107131e7939952371c1ebe..b9847bd2f41db174a6aed8efc29321a829ca97c6 100644 --- a/js/menus/LatticeMenuView.js +++ b/js/menus/LatticeMenuView.js @@ -2,7 +2,7 @@ * Created by aghassaei on 1/26/15. */ -define(['menuParent', 'lattice', 'plist'], function(MenuParentView, lattice, plist){ +define(['jquery', 'underscore', 'menuParent', 'lattice', 'plist'], function($, _, MenuParentView, lattice, plist){ return MenuParentView.extend({ diff --git a/js/menus/MenuWrapperView.js b/js/menus/MenuWrapperView.js index 54a48c1bc798d914e2af505f0b8d9ddb4fed5a2f..42a1d4b17ed18be723bd5b7c49f2cadfefbc35ff 100644 --- a/js/menus/MenuWrapperView.js +++ b/js/menus/MenuWrapperView.js @@ -3,9 +3,9 @@ */ -define(['jquery', 'backbone', 'appState', 'lattice', 'plist'], function($, Backbone, appState, lattice, plist){ +define(['jquery', 'underscore', 'backbone', 'lattice', 'plist'], function($, _, Backbone, lattice, plist){ - var MenuWrapper = Backbone.View.extend({ + return Backbone.View.extend({ el: "#menuWrapper", @@ -208,6 +208,4 @@ define(['jquery', 'backbone', 'appState', 'lattice', 'plist'], function($, Backb </ul>\ ') }); - - return new MenuWrapper({model:appState}); }); \ No newline at end of file diff --git a/js/menus/NavViewMenu.js b/js/menus/NavViewMenu.js index 958155545b61d43c41f23f847d5488682a677e2f..6130fc16f59117faea4a769840bb621ac1fd2e1a 100644 --- a/js/menus/NavViewMenu.js +++ b/js/menus/NavViewMenu.js @@ -3,78 +3,79 @@ */ -//model is appState -//not templating this view yet +define(['jquery', 'underscore', 'backbone'], function($, _, Backbone){ -NavViewMenu = Backbone.View.extend({ + return Backbone.View.extend({ - el: "#navViewMenu", + el: "#navViewMenu", - events: { - "click a.boolProperty": "_makeSelection", - "click #reset3DView": "_reset3DNavigation" - }, + events: { + "click a.boolProperty": "_makeSelection", + "click #reset3DView": "_reset3DNavigation" + }, - initialize: function(){ + initialize: function(){ - _.bindAll(this, "render"); - }, + _.bindAll(this, "render"); + }, - _makeSelection: function(e){ - e.preventDefault(); - var $target = $(e.target); - var property = $target.data("property"); - var owner = this._getPropertyOwner($target); - if (owner) owner.set(property, !owner.get(property)); - }, + _makeSelection: function(e){ + e.preventDefault(); + var $target = $(e.target); + var property = $target.data("property"); + var owner = this._getPropertyOwner($target); + if (owner) owner.set(property, !owner.get(property)); + }, - _getPropertyOwner: function($target){ - if ($target.hasClass("appState")) return globals.appState; - console.warn("no owner found for " + $target); - return null; - }, + _getPropertyOwner: function($target){ + if ($target.hasClass("appState")) return this.model; + console.warn("no owner found for " + $target); + return null; + }, - _reset3DNavigation: function(){ - e.preventDefault(); - }, + _reset3DNavigation: function(){ + e.preventDefault(); + }, - render: function(){ - this.$el.html(this.template(this.model.toJSON())); + render: function(){ + this.$el.html(this.template(this.model.toJSON())); - _.each($(".boolProperty"), function(item){ - var $item = $(item); - if (globals.appState.get($item.data("property"))) $item.html('<span class="fui-check"></span>' + $item.html()); - }) - }, + var self = this; + _.each($(".boolProperty"), function(item){ + var $item = $(item); + if (self.model.get($item.data("property"))) $item.html('<span class="fui-check"></span>' + $item.html()); + }) + }, - template: _.template('\ - <li class="dropdown-submenu">\ - <a tabindex="-1">UI<span class="pull-right fui-arrow-right"></span></a>\ - <ul class="dropdown-menu">\ - <li><a class="appState boolProperty" data-property="menuIsVisible" href="#">Menu</a></li>\ - <li><a class="appState boolProperty" data-property="scriptIsVisible" href="#">Script</a></li>\ - <li><a class="appState boolProperty" data-property="consoleIsVisible" href="#">Console</a></li>\ - <li><a class="appState boolProperty" data-property="ribbonIsVisible" href="#">Ribbon</a></li>\ - </ul></li>\ - <li class="dropdown-submenu">\ - <a tabindex="-1">3D UI<span class="pull-right fui-arrow-right"></span></a>\ - <ul class="dropdown-menu">\ - <li><a class="appState boolProperty" data-property="basePlaneIsVisible" href="#">Sketch Plane</a></li>\ - <li><a class="appState boolProperty" data-property="highlighterIsVisible" href="#">Hover Tool</a></li>\ - </ul></li>\ - <li class="dropdown-submenu">\ - <a tabindex="-1">Rendering<span class="pull-right fui-arrow-right"></span></a>\ - <ul class="dropdown-menu">\ - <li><a class="appState boolProperty" data-property="renderAmbientOcclusion" href="#">Ambient Occlusion</a></li>\ - <li><a class="appState boolProperty" data-property="realisticColorScheme" href="#">Realistic Color Scheme</a></li>\ - </ul></li>\ - <li class="dropdown-submenu">\ - <a tabindex="-1">3D<span class="pull-right fui-arrow-right"></span></a>\ - <ul class="dropdown-menu">\ - <li><a class="appState boolProperty" data-property="axesAreVisible" href="#">Axes</a></li>\ - <li><a id="reset3DView" href="#">Reset 3D Navigation</a></li>\ - </ul></li>\ - ') + template: _.template('\ + <li class="dropdown-submenu">\ + <a tabindex="-1">UI<span class="pull-right fui-arrow-right"></span></a>\ + <ul class="dropdown-menu">\ + <li><a class="appState boolProperty" data-property="menuIsVisible" href="#">Menu</a></li>\ + <li><a class="appState boolProperty" data-property="scriptIsVisible" href="#">Script</a></li>\ + <li><a class="appState boolProperty" data-property="consoleIsVisible" href="#">Console</a></li>\ + <li><a class="appState boolProperty" data-property="ribbonIsVisible" href="#">Ribbon</a></li>\ + </ul></li>\ + <li class="dropdown-submenu">\ + <a tabindex="-1">3D UI<span class="pull-right fui-arrow-right"></span></a>\ + <ul class="dropdown-menu">\ + <li><a class="appState boolProperty" data-property="basePlaneIsVisible" href="#">Sketch Plane</a></li>\ + <li><a class="appState boolProperty" data-property="highlighterIsVisible" href="#">Hover Tool</a></li>\ + </ul></li>\ + <li class="dropdown-submenu">\ + <a tabindex="-1">Rendering<span class="pull-right fui-arrow-right"></span></a>\ + <ul class="dropdown-menu">\ + <li><a class="appState boolProperty" data-property="renderAmbientOcclusion" href="#">Ambient Occlusion</a></li>\ + <li><a class="appState boolProperty" data-property="realisticColorScheme" href="#">Realistic Color Scheme</a></li>\ + </ul></li>\ + <li class="dropdown-submenu">\ + <a tabindex="-1">3D<span class="pull-right fui-arrow-right"></span></a>\ + <ul class="dropdown-menu">\ + <li><a class="appState boolProperty" data-property="axesAreVisible" href="#">Axes</a></li>\ + <li><a id="reset3DView" href="#">Reset 3D Navigation</a></li>\ + </ul></li>\ + ') + }); }); \ No newline at end of file diff --git a/js/menus/Navbar.js b/js/menus/Navbar.js index 06b66528a903d3b36b5bca0f525253e037879346..9e90c18d8cc46223919e21de703cd2151db898a1 100644 --- a/js/menus/Navbar.js +++ b/js/menus/Navbar.js @@ -3,168 +3,168 @@ */ -//model is appState -//not templating this view yet +define(['jquery', 'underscore', 'backbone', 'fileSaver', 'navViewMenu'], function($, _, Backbone, fileSaver, NavViewMenu){ -NavBar = Backbone.View.extend({ + return Backbone.View.extend({ - el: "body", + el: "body", - events: { - "click #showHideMenu": "_setMenuVisibility", - "click .menuHoverControls": "_setNavSelection", - "shown.bs.modal .modal": "_showModal", - "hide.bs.modal .modal": "_hideModal", + events: { + "click #showHideMenu": "_setMenuVisibility", + "click .menuHoverControls": "_setNavSelection", + "shown.bs.modal .modal": "_showModal", + "hide.bs.modal .modal": "_hideModal", - "click .saveJSON": "_save", - "click .saveAsJSON": "_saveAs", - "change #saveAsFileName": "_saveAs",//detect enter key - "click .saveUser": "_saveUser", - "change #saveUserFileName": "_saveUser",//detect enter key + "click .saveJSON": "_save", + "click .saveAsJSON": "_saveAs", + "change #saveAsFileName": "_saveAs",//detect enter key + "click .saveUser": "_saveUser", + "change #saveUserFileName": "_saveUser",//detect enter key - "click .importJSON": "_importJSON", - "change #jsonInput": "_selectJSONFiles", - "click .loadUser": "_loadUser", - "click .loadDemo": "_loadDemo", + "click .importJSON": "_importJSON", + "change #jsonInput": "_selectJSONFiles", + "click .loadUser": "_loadUser", + "click .loadDemo": "_loadDemo", - "click #viewMenuDropdown": "_renderViewMenu" - }, + "click #viewMenuDropdown": "_renderViewMenu" + }, - initialize: function(){ + initialize: function(){ - this.viewMenu = new NavViewMenu({model:globals.appState}); + this.viewMenu = new NavViewMenu({model:this.model}); - _.bindAll(this, "_setMenuVisibility", "_setNavSelection"); + _.bindAll(this, "_setMenuVisibility", "_setNavSelection"); - this.listenTo(this.model, "change:currentNav", this._updateNavSelectionUI); + this.listenTo(this.model, "change:currentNav", this._updateNavSelectionUI); - this._logo(); - this._updateNavSelectionUI(); - }, + this._logo(); + this._updateNavSelectionUI(); + }, - _setMenuVisibility: function(e){ - e.preventDefault(); - var state = this.model.get("menuIsVisible"); - this.model.set("menuIsVisible", !state); - $(e.target).blur(); - }, - - _setNavSelection: function(e){ - var navSelection = $(e.target).data("menuId"); - if (navSelection == "about") { + _setMenuVisibility: function(e){ + e.preventDefault(); + var state = this.model.get("menuIsVisible"); + this.model.set("menuIsVisible", !state); $(e.target).blur(); - return; - } - e.preventDefault(); - if (navSelection) this.model.set("currentNav", navSelection); - }, - - _updateNavSelectionUI: function(){ - this._deselectAllNavItems(); - var navSelection = this.model.get("currentNav"); - _.each($(".menuHoverControls"), function(link){ - var $link = $(link); - if ($link.data("menuId") == navSelection) $link.parent().addClass("open");//highlight - }); - }, - - _logo: function(){ - var $logo = $("#logo"); - $logo.mouseover(function(){ - $logo.attr("src","assets/imgs/logo-active.png"); - }); - $logo.mouseout(function(){ - $logo.attr("src","assets/imgs/logo.png"); - }); - }, - - _deselectAllNavItems: function(){ - $(".open").removeClass("open");//no highlight - }, - - _showModal: function(e){ - var input = $(e.target).find("input.filename"); - input.focus(); - input.select(); - }, - - _hideModal: function(e){ - $(e.target).find("input.filename").blur(); - }, - - - _renderViewMenu: function(){ - this.viewMenu.render(); - }, - - - - _save: function(e){ - e.preventDefault(); - globals.fileSaver.save(); - }, - - _saveAs: function(e){ - e.preventDefault(); - var fileName = $("#saveAsFileName").val(); - globals.fileSaver.save(fileName); - $('#saveAsModel').modal('hide'); - }, - - _saveUser: function(e){ - e.preventDefault(); - var fileName = $("#saveUserFileName").val(); - globals.fileSaver.saveUser(fileName); - $('#saveUserModel').modal('hide'); - }, - - - - - _importJSON: function(e){ - e.preventDefault(); - $("#jsonInput").click(); - }, - - _selectJSONFiles: function(e){ - e.preventDefault(); - var input = $(e.target), - numFiles = input.get(0).files ? input.get(0).files.length : 1, - label = input.val().replace(/\\/g, '/').replace(/.*\//, ''); - this._readDataURL(numFiles, label, input.get(0).files); - input.val(""); - }, - - _readDataURL: function(numFiles, filename, files){ - if (numFiles>1) console.warn("too many files selected"); - var reader = new FileReader(); - reader.readAsText(files[0]); - reader.onload = (function() { - return function(e) { - var extension = filename.substr(filename.length - 5); - if (extension == ".json"){ - globals.fileSaver.loadFile(JSON.parse(e.target.result)); - } else if (extension == ".user"){ - globals.fileSaver.loadUser(JSON.parse(e.target.result)); - } else console.warn("file type not recognized"); + }, + + _setNavSelection: function(e){ + var navSelection = $(e.target).data("menuId"); + if (navSelection == "about") { + $(e.target).blur(); + return; } - })(); - }, - - _loadUser: function(e){ - e.preventDefault(); - var url = "data/users/" + $(e.target).data("file"); - $.getJSON( url, function(data) { - globals.fileSaver.loadUser(data); - }); - }, - - _loadDemo: function(e){ - e.preventDefault(); - var url = "data/demos/" + $(e.target).data("file"); - $.getJSON( url, function(data) { - globals.fileSaver.loadFile(data); - }); - } + e.preventDefault(); + if (navSelection) this.model.set("currentNav", navSelection); + }, + + _updateNavSelectionUI: function(){ + this._deselectAllNavItems(); + var navSelection = this.model.get("currentNav"); + _.each($(".menuHoverControls"), function(link){ + var $link = $(link); + if ($link.data("menuId") == navSelection) $link.parent().addClass("open");//highlight + }); + }, + + _logo: function(){ + var $logo = $("#logo"); + $logo.mouseover(function(){ + $logo.attr("src","assets/imgs/logo-active.png"); + }); + $logo.mouseout(function(){ + $logo.attr("src","assets/imgs/logo.png"); + }); + }, + + _deselectAllNavItems: function(){ + $(".open").removeClass("open");//no highlight + }, + + _showModal: function(e){ + var input = $(e.target).find("input.filename"); + input.focus(); + input.select(); + }, + + _hideModal: function(e){ + $(e.target).find("input.filename").blur(); + }, + + + _renderViewMenu: function(){ + this.viewMenu.render(); + }, + + + + _save: function(e){ + e.preventDefault(); + fileSaver.save(); + }, + + _saveAs: function(e){ + e.preventDefault(); + var fileName = $("#saveAsFileName").val(); + fileSaver.save(fileName); + $('#saveAsModel').modal('hide'); + }, + + _saveUser: function(e){ + e.preventDefault(); + var fileName = $("#saveUserFileName").val(); + fileSaver.saveUser(fileName); + $('#saveUserModel').modal('hide'); + }, + + + + + _importJSON: function(e){ + e.preventDefault(); + $("#jsonInput").click(); + }, + + _selectJSONFiles: function(e){ + e.preventDefault(); + var input = $(e.target), + numFiles = input.get(0).files ? input.get(0).files.length : 1, + label = input.val().replace(/\\/g, '/').replace(/.*\//, ''); + this._readDataURL(numFiles, label, input.get(0).files); + input.val(""); + }, + + _readDataURL: function(numFiles, filename, files){ + if (numFiles>1) console.warn("too many files selected"); + var reader = new FileReader(); + reader.readAsText(files[0]); + reader.onload = (function() { + return function(e) { + var extension = filename.substr(filename.length - 5); + if (extension == ".json"){ + fileSaver.loadFile(JSON.parse(e.target.result)); + } else if (extension == ".user"){ + fileSaver.loadUser(JSON.parse(e.target.result)); + } else console.warn("file type not recognized"); + } + })(); + }, + + _loadUser: function(e){ + e.preventDefault(); + var url = "data/users/" + $(e.target).data("file"); + $.getJSON( url, function(data) { + fileSaver.loadUser(data); + }); + }, + + _loadDemo: function(e){ + e.preventDefault(); + var url = "data/demos/" + $(e.target).data("file"); + $.getJSON( url, function(data) { + fileSaver.loadFile(data); + }); + } + }); }); \ No newline at end of file diff --git a/js/menus/PartMenuView.js b/js/menus/PartMenuView.js index a060c611feaea3a4931ae75c427187f45065415a..bfe198368ea69c1d258b4bed6dc70c27a2f52962 100644 --- a/js/menus/PartMenuView.js +++ b/js/menus/PartMenuView.js @@ -2,7 +2,7 @@ * Created by aghassaei on 1/26/15. */ -define(['menuParent', 'lattice', 'plist'], function(MenuParentView, lattice, plist){ +define(['jquery', 'underscore', 'menuParent', 'lattice', 'plist'], function($, _, MenuParentView, lattice, plist){ return MenuParentView({ diff --git a/js/three/ThreeView.js b/js/three/ThreeView.js index 39de47c1c500ad79ffb960cac64a4a12592e4cfb..6792ff94d659c42131126496441546c02c02ffe8 100644 --- a/js/three/ThreeView.js +++ b/js/three/ThreeView.js @@ -4,7 +4,7 @@ define(['backbone', 'threeModel', 'orbitControls', 'appState'], function(Backbone, three, THREE, appState){ - var ThreeView = Backbone.View.extend({ + return Backbone.View.extend({ events: { "mousemove": "_mouseMoved", @@ -153,7 +153,4 @@ define(['backbone', 'threeModel', 'orbitControls', 'appState'], function(Backbon } }); - - return new ThreeView({model:three}); - }); \ No newline at end of file