Reactive-template script moved from index.html

openzim · Dec 2, 2022 · a079612 · a079612
1 parent 167352e
commit a079612
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 34 deletions.
diff --git a/res/js/index.ts b/res/js/index.ts
@@ -1,6 +1,7 @@
 import swal from 'sweetalert2';
 import * as ArrayFrom from 'array-from';
 import {Category, Simulation} from '../../lib/types';
+import { template as reactiveTemplate } from '../templates/reactive-template'
 
 if (!(Array as any).from) (Array as any).from = ArrayFrom;
 
@@ -39,7 +40,7 @@ const currentCategory = (localStorage && localStorage[window.lsPrefix + 'current
 
 const ractive = new Ractive({
   el: '#ractive-target',
-  template: '#ractive-template',
+  template: reactiveTemplate,
   computed: {
     languages() {
       return Object.entries(this.get('languageMappings'));

diff --git a/res/template.html b/res/template.html
@@ -38,39 +38,6 @@
 	<div id="container">
 		<div id='ractive-target'></div>
 	</div>
-
-	<script id='ractive-template' type='text/html'>
-		<div class="language-container">
-			{{#if languages.length > 1}}
-				<label>
-					<select value="{{selectedLanguage}}">
-						{{#each languages}}
-							<option value='{{this[0]}}'>{{this[1]}}</option>
-						{{/each}}
-					</select>
-				</label>
-			{{/if}}
-			<label>
-				<select value='{{selectedCategory}}'>
-					<option value='all'>All categories</option>
-					{{#each categories}}
-						<option value='{{makeCategoryId(.)}}'>{{makeCategoryName(.)}}</option>
-					{{/each}}
-				</select>
-			</label>
-		</div>
-		<div class="card-cont">
-		    {{#each simulations}}
-				<div class="sim-card" on-click='showConfirm'>
-					<img src="../I/{{id}}.png" alt="Screenshot of the {{display}}" />
-					<div class="overlay">
-						<i class="fa fa-info-circle" aria-hidden="true"></i>
-						<h2>{{title}}</h2>
-					</div>
-				</div>
-			{{/each}}
-		</div>
-	</script>
 </body>
 
 <script src='../-/catalog.js'></script>

diff --git a/res/templates/reactive-template.ts b/res/templates/reactive-template.ts
@@ -0,0 +1,32 @@
+export const template: string = `
+<div class="language-container">
+	{{#if languages.length > 1}}
+		<label>
+			<select value="{{selectedLanguage}}">
+				{{#each languages}}
+					<option value='{{this[0]}}'>{{this[1]}}</option>
+				{{/each}}
+			</select>
+		</label>
+	{{/if}}
+	<label>
+		<select value='{{selectedCategory}}'>
+			<option value='all'>All categories</option>
+			{{#each categories}}
+				<option value='{{makeCategoryId(.)}}'>{{makeCategoryName(.)}}</option>
+			{{/each}}
+		</select>
+	</label>
+</div>
+<div class="card-cont">
+	{{#each simulations}}
+		<div class="sim-card" on-click='showConfirm'>
+			<img src="../I/{{id}}.png" alt="Screenshot of the {{display}}" />
+			<div class="overlay">
+				<i class="fa fa-info-circle" aria-hidden="true"></i>
+				<h2>{{title}}</h2>
+			</div>
+		</div>
+	{{/each}}
+</div>
+`