Remove obsolete jQuery dependency from the demo.

blueimp · blueimp · commit d43d6eb9d904 · 2015-12-27T21:12:26.000+01:00
diff --git a/css/demo.css b/css/demo.css
@@ -48,6 +48,9 @@ input {
   background: #fff;
   color: #222;
 }
+.error {
+  color: red;
+}
 
 @media (min-width: 481px) {
   .navigation {
diff --git a/index.html b/index.html
@@ -72,11 +72,10 @@ <h4>Features</h4>
 }
 </script>
 <script type="text/x-tmpl" id="tmpl-error">
-<code>{%=o%}</code>
+<h3 class="error">{%=o.title%}</h3>
+<code>{%=o.error%}</code>
 </script>
 <script src="js/tmpl.js"></script>
-<!-- jQuery is not required by JavaScript Templates, but included for the demo -->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script src="js/demo.js"></script>
 </body>
 </html>
diff --git a/js/demo.js b/js/demo.js
@@ -9,40 +9,61 @@
  * http://www.opensource.org/licenses/MIT
  */
 
-/*global window, $ */
+/* global document, tmpl */
 
-$(function () {
+(function () {
     'use strict';
 
-    var render = function (event) {
-            event.preventDefault();
-            var result;
-            try {
-                result = window.tmpl(
-                    $('#template').val(),
-                    $.parseJSON($('#data').val())
-                );
-            } catch (e) {
-                result = window.tmpl('tmpl-error', e);
-            }
-            $('#result').html(result);
-        },
-        init = function (event) {
-            if (event) {
-                event.preventDefault();
-            }
-            $('#template').val($.trim($('#tmpl-demo').html()));
-            $('#data').val($.trim($('#tmpl-data').html()));
-            $('#result').empty();
-        },
-        error = function (e) {
-            $('#result').html(
-                window.tmpl('tmpl-error', e.originalEvent.message)
+    var templateInput = document.getElementById('template');
+    var dataInput = document.getElementById('data');
+    var resultNode = document.getElementById('result');
+    var templateDemoNode = document.getElementById('tmpl-demo');
+    var templateDataNode = document.getElementById('tmpl-data');
+
+    function renderError(title, error) {
+        resultNode.innerHTML = tmpl(
+            'tmpl-error',
+            {title: title, error: error}
+        );
+    }
+
+    function render(event) {
+        event.preventDefault();
+        var data;
+        try {
+            data = JSON.parse(dataInput.value);
+        } catch (e) {
+            renderError('JSON parsing failed', e);
+            return;
+        }
+        try {
+            resultNode.innerHTML = tmpl(
+                templateInput.value,
+                data
             );
-        };
-    $(window).on('error', error);
-    $('#render').on('click', render);
-    $('#reset').on('click', init);
+        } catch (e) {
+            renderError('Template rendering failed', e);
+        }
+    }
+
+    function empty(node) {
+        while (node.lastChild) {
+            node.removeChild(node.lastChild);
+        }
+    }
+
+    function init(event) {
+        if (event) {
+            event.preventDefault();
+        }
+        templateInput.value = templateDemoNode.innerHTML.trim();
+        dataInput.value = templateDataNode.innerHTML.trim();
+        empty(resultNode);
+    }
+
+    document.getElementById('render').addEventListener('click', render);
+    document.getElementById('reset').addEventListener('click', init);
+
     init();
 
-});
+}());

Original file line number	Diff line number	Diff line change
`@@ -48,6 +48,9 @@ input {`
`48`	`48`	`background: #fff;`
`49`	`49`	`color: #222;`
`50`	`50`	`}`
	`51`	`+.error {`
	`52`	`+ color: red;`
	`53`	`+}`
`51`	`54`
`52`	`55`	`@media (min-width: 481px) {`
`53`	`56`	`.navigation {`