add views and JS assets

src/main/resources/index.jade

@@ -1,11 +1,53 @@
-link(rel='stylesheet'
-    type='text/css'
-    href='/style.css')
+!!!
+html(lang= "en")
+  head
+    meta(charset = "utf-8")
+    meta(http-equiv= "X-UA-Compatible" content= "chrome=1")
+    meta(name= "viewport" content= "width=device-width, initial-scale=1, maximum-scale=1")
 
-h1 asdasd
+    title UML Generator - Graphs generated with PlantUML
 
-#text
-  p
-    Your value is asd
+    //- %link{rel:"stylesheet", type:"text/css", href:"/css/auth-buttons.css", media:"screen"}
+    //- %link{rel:"stylesheet", type:"text/css", href:"/css/github.css", media:"screen"}
+    link(rel="stylesheet" type="text/css" href="/css/style.css" media="screen")
+    //- %link{rel:"stylesheet", type:"text/css", href:"/javascript/fancybox/jquery.fancybox.css?v=2.1.5", media:"screen"}
+
+  //-   %script#githubDiagramTemplate{type: "text/template"}
+  //-     %li.loading{id: "<%= id %>"}
+  //-       <%= file_path %>
+  //-       %br
+  //-       %a{href: "/edit?<%= file_githuburl %>"}
+  //-         %img.loader.hidden{src: "/images/loading.gif"}
+  //-         %img.diagram{src: "/render.png?<%= file_githuburl %>?<%= file_sha %>"}
+
+  //-   %script#diagramTemplate{type: "text/template"}
+  //-     %a.fancybox{href: "#"}
+  //-       %img.diagram{src: "data:image/png;base64,<%= imageData %>"}
+
+  //-   %script#folderTemplate{type: "text/template"}
+  //-     %ul
+
+  body
+    .edit.green
+      .editor.blue
+        #editor
+
+      .view
+        .content
+        .credits
+          | shiny graphs rendered with
+          a(href='http://plantuml.sourceforge.net' target='_blank') PlantUml
+
+    .show.yellow
+      .navigation
+        #menu
+
+      .view
+        .content
+        .credits
+          | shiny graphs rendered with
+          a(href='http://plantuml.sourceforge.net' target='_blank') PlantUml
+
+    script(src="/javascript/vendor/require.js" data-main="/javascript/main")
 
 

src/main/resources/public/javascript/app.js

@@ -0,0 +1,14 @@
+define(function(require, exports, module) {
+  "use strict";
+
+  // External dependencies.
+  var _ = require("underscore");
+  var $ = require("jquery");
+  var Backbone = require("backbone");
+
+  // Alias the module for easier identification.
+  var app = module.exports;
+
+  // The root path to run the application through.
+  app.root = "/";
+});

src/main/resources/public/javascript/config.js

@@ -0,0 +1,21 @@
+// This is the runtime configuration file.  It complements the Gruntfile.js by
+// supplementing shared properties.
+require.config({
+  paths: {
+    "underscore": "vendor/underscore",
+    "jquery":     "vendor/jquery",
+    "backbone":   "vendor/backbone"
+  },
+
+  shim: {
+    // This is required to ensure Backbone works as expected within the AMD
+    // environment.
+    "backbone": {
+      // These are the two hard dependencies that will be loaded first.
+      deps: ["jquery", "underscore"],
+
+      // This maps the global `Backbone` object to `require("backbone")`.
+      exports: "Backbone"
+    }
+  }
+});

src/main/resources/public/javascript/diagram_highlight/diagram.js

@@ -0,0 +1,65 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Distributed under the BSD license:
+ *
+ * Copyright (c) 2012, Ajax.org B.V.
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *     * Redistributions of source code must retain the above copyright
+ *       notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above copyright
+ *       notice, this list of conditions and the following disclaimer in the
+ *       documentation and/or other materials provided with the distribution.
+ *     * Neither the name of Ajax.org B.V. nor the
+ *       names of its contributors may be used to endorse or promote products
+ *       derived from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL AJAX.ORG B.V. BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ *
+ * Contributor(s):
+ *
+ *
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+/*
+  THIS FILE WAS AUTOGENERATED BY mode.tmpl.js
+*/
+
+define(function(require, exports, module) {
+"use strict";
+
+var oop = require("../lib/oop");
+var TextMode = require("./text").Mode;
+var Tokenizer = require("../tokenizer").Tokenizer;
+var DiagramHighlightRules = require("./diagram_highlight_rules").DiagramHighlightRules;
+// TODO: pick appropriate fold mode
+var FoldMode = require("./folding/cstyle").FoldMode;
+
+var Mode = function() {
+    var highlighter = new DiagramHighlightRules();
+    this.foldingRules = new FoldMode();
+    this.$tokenizer = new Tokenizer(highlighter.getRules());
+    this.$keywordList = highlighter.$keywordList;
+};
+oop.inherits(Mode, TextMode);
+
+(function() {
+    this.lineCommentStart = "//";
+    this.blockComment = {start: "/*", end: "*/"};
+    // Extra logic goes here.
+}).call(Mode.prototype);
+
+exports.Mode = Mode;
+});

src/main/resources/public/javascript/diagram_highlight/diagram_highlight_rules.js

@@ -0,0 +1,102 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Distributed under the BSD license:
+ *
+ * Copyright (c) 2012, Ajax.org B.V.
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *     * Redistributions of source code must retain the above copyright
+ *       notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above copyright
+ *       notice, this list of conditions and the following disclaimer in the
+ *       documentation and/or other materials provided with the distribution.
+ *     * Neither the name of Ajax.org B.V. nor the
+ *       names of its contributors may be used to endorse or promote products
+ *       derived from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL AJAX.ORG B.V. BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+/* THIS FILE WAS AUTOGENERATED FROM diagram.tmLanguage (UUID: ca03e751-04ef-4330-9a6b-2199aae1c418) */
+/****************************************************************
+ * IT MIGHT NOT BE PERFECT, PARTICULARLY:                       *
+ * IN DECIDING STATES TO TRANSITION TO,                         *
+ * IGNORING WHITESPACE,                                         *
+ * IGNORING GROUPS WITH ?:,                                     *
+ * EXTENDING EXISTING MODES,                                    *
+ * GATHERING KEYWORDS, OR                                       *
+ * DECIDING WHEN TO USE PUSH.                                   *
+ * ...But it's a good start from an existing *.tmlanguage file. *
+ ****************************************************************/
+
+define('ace/mode/diagram_highlight_rules', function(require, exports, module) {
+
+var oop = require("ace/lib/oop");
+var TextHighlightRules = require("ace/mode/text_highlight_rules").TextHighlightRules;
+
+var DiagramHighlightRules = function() {
+    var keywords = (
+        "@enduml|@startuml|activate|again|also|alt|as|autonumber|bottom|box|break|center|create|critical|deactivate|destroy|down|else|end|endif|endwhile|footbox|footer|fork|group|header|hide|if|is|left|link|loop|namespace|newpage|note|of|on|opt|over|package|page|par|partition|ref|repeat|return|right|rotate|show|skin|skinparam|start|stop|title|top|top to bottom direction|up|while"
+    );
+
+    var builtinConstants = (
+        "AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGray|DarkGreen|DarkGrey|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGray|DarkSlateGrey|DarkTurquoise|DarkViolet|Darkorange|DeepPink|DeepSkyBlue|DimGray|DimGrey|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gray|Green|GreenYellow|Grey|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGray|LightGreen|LightGrey|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGray|LightSlateGrey|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGray|SlateGrey|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen"
+    );
+
+    var builtinFunctions = (
+        "abstract|actor|class|component|enum|interface|object|participant|state|usecase"
+    );
+
+    var keywordMapper = this.createKeywordMapper({
+        "support.function": builtinFunctions,
+        "keyword": keywords,
+        "constant.language": builtinConstants
+    }, "identifier", true);
+
+    this.$rules = {
+        "start" : [ {
+            token : "comment",
+            regex : "'.*$"
+        }, {
+            token : "string",           // " string
+            regex : '".*?"'
+        }, {
+            token : "string",           // ' string
+            regex : "'.*?'"
+        }, {
+            token : "constant.numeric", // float
+            regex : "[+-]?\\d+(?:(?:\\.\\d*)?(?:[eE][+-]?\\d+)?)?\\b"
+        }, {
+            token : keywordMapper,
+            regex : "[a-zA-Z_$][a-zA-Z0-9_$]*\\b"
+        }, {
+            token : "keyword.operator",
+            regex : "-?->|<-?-"
+        }, {
+            token : "paren.lparen",
+            regex : ""
+        }, {
+            token : "paren.rparen",
+            regex : ""
+        }, {
+            token : "text",
+            regex : "\\s+"
+        } ]
+    };
+};
+
+oop.inherits(DiagramHighlightRules, TextHighlightRules);
+
+exports.DiagramHighlightRules = DiagramHighlightRules;
+});

src/main/resources/public/javascript/main.js

@@ -0,0 +1,21 @@
+// Break out the application running from the configuration definition to
+// assist with testing.
+require(["config"], function() {
+  // Kick off the application.
+
+  require(["app", "router", "models/folder"], function(app, Router, Folder) {
+    // Define your master router on the application namespace and trigger all
+    // navigation from this instance.
+
+    app.router = new Router();
+
+    Backbone.sync = function(method, model) {
+      alert(method + ": " + JSON.stringify(model));
+      // model.id = 1;
+    };
+
+    // Trigger the initial route and enable HTML5 History API support, set the
+    // root folder to '/' by default.  Change in app.js.
+    Backbone.history.start({ pushState: true, root: app.root });
+  });
+});

src/main/resources/public/javascript/models/folder.js

@@ -0,0 +1,34 @@
+define(["backbone", "models/folder_items"], function(Backbone, Items) {
+  var FolderModel = Backbone.Model.extend({
+    items: null,
+
+    add: function(item) {
+      this.items.add(item);
+    },
+
+    remove: function(item) {
+      this.items.remove(item);
+    },
+
+    at: function(pos) {
+      this.items.at(pos);
+    },
+
+    initialize: function() {
+      this.items = new Items();
+    }
+    // model: function(attrs, options) {
+    //   console.log("hihi");
+    //   console.log(attrs);
+    //   console.log(options);
+    //   if (condition) {
+    //     return new Diagram();
+    //   } else {
+    //     return new Folder();
+    //   }
+    // }
+  });
+
+  return FolderModel;
+});
+

src/main/resources/public/javascript/models/folder_items.js

@@ -0,0 +1,17 @@
+define(["backbone"], function(Backbone) {
+  var ItemsCollection = Backbone.Collection.extend({
+    // model: function(attrs, options) {
+    //   console.log("hihi");
+    //   console.log(attrs);
+    //   console.log(options);
+    //   if (condition) {
+    //     return new Diagram();
+    //   } else {
+    //     return new Folder();
+    //   }
+    // }
+  });
+
+  return ItemsCollection;
+});
+