.

.gitignore

@@ -0,0 +1 @@
+node_modules/

Gruntfile.js

@@ -0,0 +1,29 @@
+module.exports = function(grunt) {
+  
+  //need to install less and watch modules
+  
+  grunt.loadNpmTasks("grunt-contrib-less");
+  grunt.loadNpmTasks("grunt-contrib-watch");
+  
+  grunt.initConfig({
+    less: {
+      all: {
+        files: {
+          "css/editor.css": "css/editor.less"
+        }
+      }
+    },
+    watch: {
+      css: {
+        files: ["css/*.less"],
+        tasks: ["less"]
+      },
+      options: {
+        spawn: false
+      }
+    }
+  });
+  
+  grunt.registerTask("default", ["less", "watch"]);
+  
+};

css/editor.css

@@ -0,0 +1,88 @@
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  padding: 0;
+}
+.toolbar {
+  height: 30px;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  background: white;
+  line-height: 30px;
+  list-style-type: none;
+  z-index: 99;
+}
+.toolbar > li {
+  display: inline-block;
+  padding: 0 8px;
+}
+.toolbar > li:hover {
+  background: #EEE;
+}
+.toolbar > li .menu {
+  display: none;
+  min-width: 150px;
+  position: absolute;
+  z-index: 999;
+  background: white;
+  padding: 0;
+  margin-left: -8px;
+  box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.1);
+}
+.toolbar > li .menu li {
+  display: block;
+  padding: 4px 8px;
+}
+.toolbar > li .menu li:hover {
+  background: #EEE;
+}
+.toolbar > li:hover .menu {
+  display: block;
+}
+.tabs {
+  height: 32px;
+  width: 100%;
+  background: #BBB;
+  padding-top: 2px;
+}
+.tabs span {
+  display: inline-block;
+  height: 100%;
+  min-width: 100px;
+  line-height: 30px;
+  padding: 0 30px 0 4px;
+  margin-right: 3px;
+  background: #BBB;
+  border-radius: 3px 3px 0 0;
+  position: relative;
+  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.2);
+}
+.tabs span.active {
+  background: #EEE;
+}
+.tabs span .close {
+  background: rgba(0, 0, 0, 0.2);
+  box-shadow: inset 2px 2px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  font-size: 18px;
+  text-align: center;
+}
+.tabs span .close:hover {
+  box-shadow: inset 2px 2px 8px rgba(0, 0, 0, 0.5);
+}
+.editor-container {
+  position: absolute;
+  top: 60px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}

css/editor.less

@@ -0,0 +1,107 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+.toolbar {
+  height: 30px;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  background: white;
+  line-height: 30px;
+  list-style-type: none;
+  z-index: 99;
+  
+  & > li {
+    display: inline-block;
+    padding: 0 8px;
+    
+    &:hover {
+      background: #EEE;
+    }
+    
+    .menu {
+      display: none;
+      min-width: 150px;
+      position: absolute;
+      z-index: 999;
+      background: white;
+      padding: 0;
+      margin-left: -8px;
+      box-shadow: 4px 8px 16px rgba(0, 0, 0, .1);
+      
+      li {
+        display: block;
+        padding: 4px 8px;
+        
+        &:hover {
+          background: #EEE;
+        }
+      }
+    }
+    
+    &:hover {
+     
+     .menu {
+       display: block;
+     }
+     
+    }
+    
+  }
+}
+
+.tabs {
+  height: 32px;
+  width: 100%;
+  background: #BBB;
+  padding-top: 2px;
+  
+  span {
+    display: inline-block;
+    height: 100%;
+    min-width: 100px;
+    line-height: 30px;
+    padding: 0 30px 0 4px;
+    margin-right: 3px;
+    background: #BBB;
+    border-radius: 3px 3px 0 0;
+    position: relative;
+    box-shadow: 4px 0 8px rgba(0, 0, 0, .2);
+    
+    &.active {
+      background: #EEE;
+    }
+    
+    .close {
+      background: rgba(0, 0, 0, .2);
+      box-shadow: inset 2px 2px 8px rgba(0, 0, 0, .1);
+      border-radius: 4px;
+      position: absolute;
+      top: 6px;
+      right: 6px;
+      width: 18px;
+      height: 18px;
+      line-height: 18px;
+      font-size: 18px;
+      text-align: center;
+      
+      &:hover {
+        box-shadow: inset 2px 2px 8px rgba(0, 0, 0, .5);
+      }
+    }
+  }
+}
+
+.editor-container {
+  position: absolute;
+  top: 60px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}

js/command.js

@@ -0,0 +1,48 @@
+define(["dom2"], function() {
+
+  /*
+  
+  A module for translating UI interactions into events for the rest of the application. Basically it's a pubsub with a dom layer. Listens for menu events, as well as offering an API for firing and subscribing to arbitrary events.
+  
+  */
+  
+  var commands = {};
+  
+  var fire = function(command, argument) {
+    if (!commands[command]) return;
+    var registry = commands[command];
+    for (var i = 0; i < registry.length; i++) {
+      var entry = registry[i];
+      setTimeout(function() {
+        entry.callback.call(entry.scope || null, argument);
+      });
+    }
+  }
+  
+  var register = function(command, listener, scope) {
+    if (!commands[command]) {
+      commands[command] = [];
+    }
+    commands[command].push({
+      callback: listener,
+      scope: scope
+    });
+  }
+  
+  //delegate for all elements that have a command attribute
+  //may want to add more listeners for other UI elements (select)
+  document.body.on("click", function(e) {
+    //delegate all items with a command attribute
+    if (e.target.hasAttribute("command")) {
+      var command = e.target.getAttribute("command");
+      var arg = e.target.getAttribute("argument");
+      fire(command, arg);
+    }
+  });
+  
+  return {
+    fire: fire,
+    on: register
+  };
+
+});