HTML UI as a jQuery plugin

textadventures · Feb 8, 2015 · 7fed61b · 7fed61b
1 parent 1669289
commit 7fed61b
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 23 deletions.
diff --git a/cli.js b/cli.js
@@ -34,8 +34,4 @@ var readline = require('readline');
 			}
 		});
 	};
-
-	questkit.ui.start = function () {
-		questkit.ready();
-	};
 })();
diff --git a/index.template.html b/index.template.html
@@ -6,6 +6,11 @@
     <script src="jquery.min.js"></script>
     <script src="bootstrap.min.js"></script>
     <script src="story.js"></script>
+    <script>
+      $(function () {
+        $("#questkit-output").questkit({input: "#questkit-input"});
+      });
+    </script>
     <link rel="stylesheet" href="bootstrap.min.css"/>
     <link rel="stylesheet" href="style.css"/>
   </head>

diff --git a/questkit.js b/questkit.js
@@ -46,11 +46,13 @@ function Compiler() {
             return fs.readFileSync(path.join(sourcePath, file)).toString();
         }).join('');
 
+        var startJs = options.cli ? '(function () {' : '(function ($) {';
+
         var coreJsFile = fs.readFileSync(path.join(sourcePath, 'core.js'));
         var uiJsFile = fs.readFileSync(path.join(sourcePath, options.cli ? 'cli.js' : 'ui.js'));
         var jsData = '// Created with QuestKit {0}\n// https://github.com/textadventures/questkit\n\n'
             .format(questKitVersion) +
-            '(function () {\n' +
+            startJs + '\n' +
             coreJs + '\n' +
             uiJsFile.toString();
 
@@ -105,8 +107,14 @@ function Compiler() {
         outputJsFile.push('\n');
         outputJsFile.push('initData.templates = ' + JSON.stringify(this.language.defaults, null, '\t') + ';\n');
         outputJsFile.push('questkit.ready = function () { questkit.init(initData); };\n');
-        outputJsFile.push('questkit.ui.start();\n');
-        outputJsFile.push('})();');
+
+        if (options.cli) {
+            outputJsFile.push('questkit.ready();');
+            outputJsFile.push('})();');
+        }
+        else {
+            outputJsFile.push('}(jQuery));');
+        }
 
         fs.writeFileSync(path.join(outputPath, 'story.js'), outputJsFile.join(''));
 

diff --git a/ui.js b/ui.js
@@ -13,8 +13,9 @@
 			createNewDiv('left');
 		}
 
-		$('#questkit-output').append(text + '<br/>');
-		$('#questkit-output').css('min-height', $('#questkit-output').height());
+		questkit.ui.output
+			.append(text + '<br/>')
+			.css('min-height', questkit.ui.output.height());
 	};
 
 	var createNewDiv = function (alignment) {
@@ -24,7 +25,7 @@
 			id: 'questkit-output-section' + getDivCount(),
 			style: 'text-align: ' + alignment,
 			'class': classes
-		}).appendTo('#questkit-output');
+		}).appendTo(questkit.ui.output);
 		setCurrentDiv('#questkit-output-section' + getDivCount());
 	};
 
@@ -68,11 +69,11 @@
 			// TODO: 'easeInOutCubic' is nice here
 			$('body,html').stop().animate({ scrollTop: scrollTo }, duration);
 		}
-		$('#questkit-input').focus();
+		questkit.ui.input.focus();
 	};
 
 	questkit.ui.markScrollPosition = function () {
-		beginningOfCurrentTurnScrollPosition = $('#questkit-output').height();
+		beginningOfCurrentTurnScrollPosition = questkit.ui.output.height();
 	};
 
 	questkit.ui.escapeString = function (str) {
@@ -85,23 +86,28 @@
 	questkit.ui.init = function () {
 	};
 
-	questkit.ui.start = function () {
-		$(function () {
-			questkit.ready();
-		});
-	};
 })();
 
-$(function () {
-	$('#questkit-input').focus();
-	$('#questkit-input').keydown(function (e) {
+$.fn.questkit = function (options) {
+	var settings = $.extend({
+        // TODO: Defaults here
+    }, options);
+
+    questkit.ui.output = this;
+    questkit.ui.input = $(settings.input);
+	questkit.ui.input.focus();
+	questkit.ui.input.keydown(function (e) {
 		if (e.which != 13) return;
-		var input = $('#questkit-input').val();
-		$('#questkit-input').val('');
+		var input = $(this).val();
+		$(this).val('');
 		questkit.ui.markScrollPosition();
 		msg('');
 		msg(questkit.ui.escapeString('> ' + input));
 		questkit.handleCommand(input);
 		questkit.ui.scrollToEnd();
 	});
-});
+
+	questkit.ready();
+
+    return this;
+};