feat(web): add hydra to web editor

hypermedia-app · Jul 11, 2019 · 908511c · 908511c
1 parent c167a05
commit 908511c
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 27 deletions.
diff --git a/...hypermedia.testing.dsl.web/src/main/java/app/hypermedia/testing/dsl/web/CoreServlet.xtend b/...hypermedia.testing.dsl.web/src/main/java/app/hypermedia/testing/dsl/web/CoreServlet.xtend
@@ -10,13 +10,14 @@ import org.eclipse.xtext.web.servlet.XtextServlet
 /**
  * Deploy this class into a servlet container to enable DSL-specific services.
  */
-@WebServlet(name = 'XtextServices', urlPatterns = '/xtext-service/*')
+@WebServlet(name='XtextServices', urlPatterns='/xtext-service/*')
 class CoreServlet extends XtextServlet {
 
     DisposableRegistry disposableRegistry
 
     override init() {
         super.init()
+        new HydraWebSetup().createInjectorAndDoEMFRegistration
         val injector = new CoreWebSetup().createInjectorAndDoEMFRegistration()
         disposableRegistry = injector.getInstance(DisposableRegistry)
     }

diff --git a/app.hypermedia.testing.dsl.web/src/main/webapp/index.html b/app.hypermedia.testing.dsl.web/src/main/webapp/index.html
@@ -6,38 +6,63 @@
 	<link rel="stylesheet" type="text/css" href="xtext/2.18.0/xtext-ace.css"/>
 	<link rel="stylesheet" type="text/css" href="style.css"/>
 	<script src="webjars/requirejs/2.3.6/require.min.js"></script>
-	<script type="text/javascript">
-		var baseUrl = window.location.pathname;
-		var fileIndex = baseUrl.indexOf("index.html");
-		if (fileIndex > 0)
-			baseUrl = baseUrl.slice(0, fileIndex);
-		require.config({
-			baseUrl: baseUrl,
-			paths: {
-				"jquery": "webjars/jquery/3.3.1-1/jquery.min",
-				"ace/ext/language_tools": "webjars/ace/1.3.3/src/ext-language_tools",
-				"xtext/xtext-ace": "xtext/2.18.0/xtext-ace"
-			}
-		});
-		require(["webjars/ace/1.3.3/src/ace"], function() {
-			require(["xtext/xtext-ace"], function(xtext) {
-				xtext.createEditor({
-					baseUrl: baseUrl,
-					syntaxDefinition: "xtext-resources/generated/mode-api"
-				});
-			});
-		});
-	</script>
 </head>
 <body>
 
 <div class="container">
 	<div class="header">
-		<h1>Example Hypertest DSL Web Editor</h1>
+	   <h1>Example Hypertest DSL Web Editor</h1>
+	   <form method="GET" action="">
+    	   <select id="language" name="language">
+               <option value="core">Core grammar</option>
+               <option value="hydra">Hydra</option>
+    	   </select>
+    	   <input type="submit" value="Switch language">
+	   </form>
 	</div>
 	<div class="content">
-		<div id="xtext-editor" data-editor-xtext-lang="api"></div>
+		<div id="xtext-editor"></div>
 	</div>
+
+    <script type="text/javascript">
+        var language = 'api'
+        var languageMatch = document.location.search.match(/language=(.+)/)
+        if (languageMatch) {
+            switch (languageMatch[1]) {
+                case 'hydra':
+                    language = languageMatch[1]
+                    break;
+                default:
+                    language = 'api'
+                    break;
+            }            
+        }
+        document.getElementById('language').value = language
+
+        var editor = document.querySelector('#xtext-editor');
+        editor.setAttribute('data-editor-xtext-lang', language)
+
+        var baseUrl = window.location.pathname;
+        var fileIndex = baseUrl.indexOf("index.html");
+        if (fileIndex > 0)
+            baseUrl = baseUrl.slice(0, fileIndex);
+        require.config({
+            baseUrl: baseUrl,
+            paths: {
+                "jquery": "webjars/jquery/3.3.1-1/jquery.min",
+                "ace/ext/language_tools": "webjars/ace/1.3.3/src/ext-language_tools",
+                "xtext/xtext-ace": "xtext/2.18.0/xtext-ace"
+            }
+        });
+        require(["webjars/ace/1.3.3/src/ace"], function() {
+            require(["xtext/xtext-ace"], function(xtext) {
+                xtext.createEditor({
+                    baseUrl: baseUrl,
+                    syntaxDefinition: `xtext-resources/generated/mode-${language}`
+                });
+            });
+        });
+    </script>
 </div>
 
 </body>

diff --git a/app.hypermedia.testing.dsl.web/src/main/webapp/style.css b/app.hypermedia.testing.dsl.web/src/main/webapp/style.css
@@ -31,14 +31,13 @@ a:hover {
 	top: 0;
 	left: 0;
 	right: 0;
-	height: 60px;
 	padding: 10px;
 }
 
 .content {
 	display: block;
 	position: absolute;
-	top: 90px;
+	top: 150px;
 	bottom: 0;
 	left: 0;
 	width: 640px;