script menu

css/main.css

@@ -85,17 +85,27 @@ nav .btn {
 
 /*menus*/
 
-#menuWrapper {
-    width: 430px;
+#menuWrapper, #scriptView {
     height: 100%;
     z-index: 1;
     position: absolute;
     display: block;
     background-color: rgba(255,255,255,0.8);
-    right: -430px;/*initially hidden*/
     overflow:hidden;
 }
 
+#menuWrapper{
+    width: 430px;
+    right: -430px;/*initially hidden*/
+}
+
+#scriptView{
+    padding: 30px 20px;
+    left:-820px;
+    width:820px;
+}
+
+
 .slider-selection {
 	background: #BABABA;
 }
@@ -374,3 +384,8 @@ label.colorSwatches>span.icons{
 #navViewMenu .dropdown-menu span{
     margin-right:10px;
 }
+
+.CodeMirror {
+    opacity: 0.6;
+    margin: 0 20px 0 -10px;
+}
\ No newline at end of file

dependencies/codemirror/codemirror.css

+/* BASICS */
+
+.CodeMirror {
+  /* Set height, width, borders, and global font properties here */
+  font-family: monospace;
+  height: 300px;
+  color: black;
+}
+
+/* PADDING */
+
+.CodeMirror-lines {
+  padding: 4px 0; /* Vertical padding around content */
+}
+.CodeMirror pre {
+  padding: 0 4px; /* Horizontal padding of content */
+}
+
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  background-color: white; /* The little square between H and V scrollbars */
+}
+
+/* GUTTER */
+
+.CodeMirror-gutters {
+  border-right: 1px solid #ddd;
+  background-color: #f7f7f7;
+  white-space: nowrap;
+}
+.CodeMirror-linenumbers {}
+.CodeMirror-linenumber {
+  padding: 0 3px 0 5px;
+  min-width: 20px;
+  text-align: right;
+  color: #999;
+  white-space: nowrap;
+}
+
+.CodeMirror-guttermarker { color: black; }
+.CodeMirror-guttermarker-subtle { color: #999; }
+
+/* CURSOR */
+
+.CodeMirror div.CodeMirror-cursor {
+  border-left: 1px solid black;
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+  border-left: 1px solid silver;
+}
+.CodeMirror.cm-fat-cursor div.CodeMirror-cursor {
+  width: auto;
+  border: 0;
+  background: #7e7;
+}
+.CodeMirror.cm-fat-cursor div.CodeMirror-cursors {
+  z-index: 1;
+}
+
+.cm-animate-fat-cursor {
+  width: auto;
+  border: 0;
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+}
+@-moz-keyframes blink {
+  0% { background: #7e7; }
+  50% { background: none; }
+  100% { background: #7e7; }
+}
+@-webkit-keyframes blink {
+  0% { background: #7e7; }
+  50% { background: none; }
+  100% { background: #7e7; }
+}
+@keyframes blink {
+  0% { background: #7e7; }
+  50% { background: none; }
+  100% { background: #7e7; }
+}
+
+/* Can style cursor different in overwrite (non-insert) mode */
+div.CodeMirror-overwrite div.CodeMirror-cursor {}
+
+.cm-tab { display: inline-block; text-decoration: inherit; }
+
+.CodeMirror-ruler {
+  border-left: 1px solid #ccc;
+  position: absolute;
+}
+
+/* DEFAULT THEME */
+
+.cm-s-default .cm-keyword {color: #708;}
+.cm-s-default .cm-atom {color: #219;}
+.cm-s-default .cm-number {color: #164;}
+.cm-s-default .cm-def {color: #00f;}
+.cm-s-default .cm-variable,
+.cm-s-default .cm-punctuation,
+.cm-s-default .cm-property,
+.cm-s-default .cm-operator {}
+.cm-s-default .cm-variable-2 {color: #05a;}
+.cm-s-default .cm-variable-3 {color: #085;}
+.cm-s-default .cm-comment {color: #a50;}
+.cm-s-default .cm-string {color: #a11;}
+.cm-s-default .cm-string-2 {color: #f50;}
+.cm-s-default .cm-meta {color: #555;}
+.cm-s-default .cm-qualifier {color: #555;}
+.cm-s-default .cm-builtin {color: #30a;}
+.cm-s-default .cm-bracket {color: #997;}
+.cm-s-default .cm-tag {color: #170;}
+.cm-s-default .cm-attribute {color: #00c;}
+.cm-s-default .cm-header {color: blue;}
+.cm-s-default .cm-quote {color: #090;}
+.cm-s-default .cm-hr {color: #999;}
+.cm-s-default .cm-link {color: #00c;}
+
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+.cm-strikethrough {text-decoration: line-through;}
+
+.cm-s-default .cm-error {color: #f00;}
+.cm-invalidchar {color: #f00;}
+
+/* Default styles for common addons */
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
+.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
+.CodeMirror-activeline-background {background: #e8f2ff;}
+
+/* STOP */
+
+/* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+
+.CodeMirror {
+  position: relative;
+  overflow: hidden;
+  background: white;
+}
+
+.CodeMirror-scroll {
+  overflow: scroll !important; /* Things will break if this is overridden */
+  /* 30px is the magic margin used to hide the element's real scrollbars */
+  /* See overflow: hidden in .CodeMirror */
+  margin-bottom: -30px; margin-right: -30px;
+  padding-bottom: 30px;
+  height: 100%;
+  outline: none; /* Prevent dragging from highlighting the element */
+  position: relative;
+}
+.CodeMirror-sizer {
+  position: relative;
+  border-right: 30px solid transparent;
+}
+
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+   before actuall scrolling happens, thus preventing shaking and
+   flickering artifacts. */
+.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  position: absolute;
+  z-index: 6;
+  display: none;
+}
+.CodeMirror-vscrollbar {
+  right: 0; top: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.CodeMirror-hscrollbar {
+  bottom: 0; left: 0;
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
+.CodeMirror-scrollbar-filler {
+  right: 0; bottom: 0;
+}
+.CodeMirror-gutter-filler {
+  left: 0; bottom: 0;
+}
+
+.CodeMirror-gutters {
+  position: absolute; left: 0; top: 0;
+  z-index: 3;
+}
+.CodeMirror-gutter {
+  white-space: normal;
+  height: 100%;
+  display: inline-block;
+  margin-bottom: -30px;
+  /* Hack to make IE7 behave */
+  *zoom:1;
+  *display:inline;
+}
+.CodeMirror-gutter-wrapper {
+  position: absolute;
+  z-index: 4;
+  height: 100%;
+}
+.CodeMirror-gutter-elt {
+  position: absolute;
+  cursor: default;
+  z-index: 4;
+}
+.CodeMirror-gutter-wrapper {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.CodeMirror-lines {
+  cursor: text;
+  min-height: 1px; /* prevents collapsing before first draw */
+}
+.CodeMirror pre {
+  /* Reset some styles that the rest of the page might have set */
+  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+  border-width: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  margin: 0;
+  white-space: pre;
+  word-wrap: normal;
+  line-height: inherit;
+  color: inherit;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+  -webkit-tap-highlight-color: transparent;
+}
+.CodeMirror-wrap pre {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: normal;
+}
+
+.CodeMirror-linebackground {
+  position: absolute;
+  left: 0; right: 0; top: 0; bottom: 0;
+  z-index: 0;
+}
+
+.CodeMirror-linewidget {
+  position: relative;
+  z-index: 2;
+  overflow: auto;
+}
+
+.CodeMirror-widget {}
+
+.CodeMirror-code {
+  outline: none;
+}
+
+/* Force content-box sizing for the elements where we expect it */
+.CodeMirror-scroll,
+.CodeMirror-sizer,
+.CodeMirror-gutter,
+.CodeMirror-gutters,
+.CodeMirror-linenumber {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+.CodeMirror-measure {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+.CodeMirror-measure pre { position: static; }
+
+.CodeMirror div.CodeMirror-cursor {
+  position: absolute;
+  border-right: none;
+  width: 0;
+}
+
+div.CodeMirror-cursors {
+  visibility: hidden;
+  position: relative;
+  z-index: 3;
+}
+.CodeMirror-focused div.CodeMirror-cursors {
+  visibility: visible;
+}
+
+.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
+.CodeMirror-crosshair { cursor: crosshair; }
+.CodeMirror ::selection { background: #d7d4f0; }
+.CodeMirror ::-moz-selection { background: #d7d4f0; }
+
+.cm-searching {
+  background: #ffa;
+  background: rgba(255, 255, 0, .4);
+}
+
+/* IE7 hack to prevent it from returning funny offsetTops on the spans */
+.CodeMirror span { *vertical-align: text-bottom; }
+
+/* Used to force a border model for a node */
+.cm-force-border { padding-right: .1px; }
+
+@media print {
+  /* Hide the cursor when printing */
+  .CodeMirror div.CodeMirror-cursors {
+    visibility: hidden;
+  }
+}
+
+/* See issue #2901 */
+.cm-tab-wrap-hack:after { content: ''; }
+
+/* Help users use markselection to safely style text background */
+span.CodeMirror-selectedtext { background: none; }

index.html

@@ -36,6 +36,11 @@
     <!--numerical javascript-->
     <script src="dependencies/numeric-1.2.6.js"></script>
 
+    <!-- code mirror -->
+    <script src="dependencies/codemirror/codemirror.js"></script>
+    <script src="dependencies/codemirror/javascript.js"></script>
+    <link rel="stylesheet" type="text/css" href="dependencies/codemirror/codemirror.css">
+
     <script src="js/models/AllAppPLists.js"></script>
 
     <!--multi-threading-->
@@ -106,6 +111,7 @@
     <script src="js/menus/PartMenuView.js"></script>
     <script src="js/menus/SketchMenuView.js"></script>
     <script src="js/menus/ScriptMenuView.js"></script>
+    <script src="js/menus/ScriptView.js"></script>
     <script src="js/menus/PhysicsMenuView.js"></script>
     <script src="js/menus/MaterialMenuView.js"></script>
     <script src="js/menus/OptimizationMenuView.js"></script>
@@ -213,6 +219,7 @@
 </div>
 
 <div id="menuWrapper"><div id="menuHeader"></div><div id="menuContent"></div></div>
+<div id="scriptView"></div>
 <div id="navRibbon"></div>
 
 <div id="threeContainer"></div>

js/main.js

@@ -26,6 +26,7 @@ $(function(){
     new MenuWrapper({model: globals.appState});
     new NavBar({model:globals.appState});
     new Ribbon({model:globals.appState});
+    new ScriptView({model:globals.appState});
 
     //threeJS View
     new ThreeView({model:globals.three});

js/menus/NavViewMenu.js

@@ -26,7 +26,7 @@ NavViewMenu = Backbone.View.extend({
         var $target = $(e.target);
         var property = $target.data("property");
         var owner = this._getPropertyOwner($target);
-        owner.set(property, !owner.get(property));
+        if (owner) owner.set(property, !owner.get(property));
     },
 
     _getPropertyOwner: function($target){

js/menus/ScriptView.js

+/**
+ * Created by aghassaei on 5/30/15.
+ */
+
+
+ScriptView = Backbone.View.extend({
+
+    el: "#scriptView",
+
+    events: {
+        "click #runScript":                                       "_runScript",
+        "click #saveScript":                                      "_saveScript",
+        "click #loadScript":                                      "_loadScript"
+    },
+
+    initialize: function(){
+
+        _.bindAll(this, "render", "_handleKeyStroke");
+
+        //bind events
+        $(document).bind('keydown', {}, this._handleKeyStroke);
+        this.render();
+
+        this.listenTo(globals.appState, "change:scriptIsVisible", this._setVisibility);
+    },
+
+    _handleKeyStroke: function(e){
+        if (e.keyCode == 82 && this.model.get("currentTab") == "script"){
+            if (e.shiftKey || !e.metaKey) return;
+            e.preventDefault();
+            e.stopPropagation();
+//            globals.appState.runScript(globals.codeMirror.getValue());
+        }
+    },
+
+    _runScript: function(e){
+        e.preventDefault();
+//        globals.appState.runScript(globals.codeMirror.getValue());
+    },
+
+    _saveScript: function(e){
+        e.preventDefault();
+//        globals.appState.syncScript(globals.codeMirror.getValue());
+//        globals.saveFile(globals.script, "linkageScript", ".js");
+    },
+
+    _loadScript: function(e){
+        e.preventDefault();
+        $("#fileInput").click();
+    },
+
+    _setEditorHeight: function(){
+        var $editor = $('.CodeMirror');
+        var height = this.$el.height()-$editor.position().top;
+        height = Math.max(height, 250);
+        $editor.css({height:height +"px"});
+    },
+
+    _setVisibility: function(){
+        if(this.model.get("scriptIsVisible")) this._show();
+        else this._hide();
+    },
+
+    _hide: function(){
+        var width = this.$el.parent().width();
+        this.$el.animate({left: "-" + width + "px"});
+    },
+
+    _show: function(){
+        this.$el.animate({left: "0"});
+    },
+
+    render: function(){
+        this.$el.html(this.template({script:globals.script}));
+        globals.codeMirror = CodeMirror.fromTextArea(document.getElementById("scriptEditor"), {
+            lineNumbers: true,
+            mode: "javascript"
+        });
+        this._setEditorHeight();
+    },
+
+    template: _.template('\
+            <div class="col-sm-4"><a href="#" id="loadScript" class=" btn btn-lg btn-block btn-default">Load Script</a></div>\
+            <div class="col-sm-4"><a href="#" id="runScript" class=" btn btn-lg btn-block btn-default">Run Script&nbsp&nbsp&nbsp(CTRL/&#8984; + R)</a></div>\
+            <div class="col-sm-4"><a href="#" id="saveScript" class=" btn btn-lg btn-block btn-default">Save Script</a></div><br/><br/>\
+            <textarea id="scriptEditor"><%= script %></textarea><br/>\
+        ')
+
+});
\ No newline at end of file