craftingguide/website
1
0
Fork 0
Code Pull Requests Actions Activity

[#31] Upgrade recipe selector to support search

Browse Source 
* Add the jQuery-UI autocomplete component instead of a regular select control
  for choosing recipes
This commit is contained in:
Andrew Miner
2013-08-21 20:30:56 -07:00
parent 56421ab074
commit 07d147a455
3 changed files with 75 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/crafting.js
+59 -48
View File
@@ -1,10 +1,12 @@
// Constants //////////////////////////////////////////////////////////////////////////////////////////////////////////
var ERROR_DISPLAY_DURATION = 10000; // ms
var FADE_DURATION = 250; // ms
var ERROR_DISPLAY_DURATION = 5000; // ms
var SLIDE_DURATION = 600; // ms
// Global Variables ///////////////////////////////////////////////////////////////////////////////////////////////////
var __loadingCount = 0;
var __recipebooks = [];
var __toolsIncluded = false;
@@ -12,32 +14,24 @@ var __toolsIncluded = false;
$(function() {
$("#recipebook_load_button").click(onRecipeLoadButtonClicked);
$("#crafting_selector").change(onCraftingSelectorChanged);
$("#crafting_count").change(onCraftingSelectorChanged);
$("#tools_included").change(onIncludeToolsChanged);
$("#crafting_selector").focus(onCraftingSelectorFocused);
loadRecipebook("data/vanilla.json", function() {
loadRecipebook("data/buildcraft.json", function() {
loadRecipebook("data/industrial_craft.json", function() {
parseUrlParameters();
onCraftingSelectorChanged();
});
});
});
loadRecipebook("data/vanilla.json");
loadRecipebook("data/buildcraft.json");
loadRecipebook("data/industrial_craft.json");
});
function onCraftingSelectorChanged() {
var recipeName = $("#crafting_selector option:selected").val();
var recipeName = $("#crafting_selector").val();
var count = parseInt($("#crafting_count option:selected").val());
if (recipeName === undefined) return;
if (count === undefined) return;
updatePageState(count, recipeName);
var recipe = findRecipe(recipeName);
if (recipe === undefined) {
$("#crafting_error").html("Cannot find recipe for " + recipeName);
$("#crafting_error").fadeIn(FADE_DURATION).delay(ERROR_DISPLAY_DURATION).fadeOut(FADE_DURATION);
$("#crafting_output").slideUp(SLIDE_DURATION);
} else {
var inventory = createManifest();
var craftedItems = createManifest();
@@ -50,7 +44,28 @@ function onCraftingSelectorChanged() {
$("#missing_materials").html(missingMaterials.toHtml());
$("#crafted_items").html(craftedItems.toHtml());
$("#leftover_materials").html(inventory.toHtml());
$("#crafting_output").fadeIn(FADE_DURATION);
$("#crafting_output").slideDown(SLIDE_DURATION);
}
updatePageState(count, recipeName);
}
function onCraftingSelectorFocused() {
$("#crafting_selector").autocomplete("search");
}
function onIncludeToolsChanged() {
__toolsIncluded = $("#tools_included").is(":checked");
onCraftingSelectorChanged()
}
function onRecipeBookLoaded() {
if (__loadingCount > 0 || __recipebooks.length === 0) {
$("#crafting").fadeOut(FADE_DURATION);
} else if (__loadingCount === 0 && __recipebooks.length > 0) {
updateCraftingSelector();
parseUrlParameters();
$("#crafting").fadeIn(FADE_DURATION);
}
}
@@ -62,14 +77,10 @@ function onRecipeLoadButtonClicked() {
});
}
function onIncludeToolsChanged() {
__toolsIncluded = $("#tools_included").is(":checked");
onCraftingSelectorChanged()
}
// UI Helper Functions ////////////////////////////////////////////////////////////////////////////////////////////////
function loadRecipebook(recipebookUrl, onSuccess) {
function loadRecipebook(recipebookUrl) {
__loadingCount++;
$.ajax({
url: recipebookUrl,
dataType: "text",
@@ -79,19 +90,18 @@ function loadRecipebook(recipebookUrl, onSuccess) {
__recipebooks.push(recipebook);
recipebook.asTableRow().insertBefore($("#recipebook_table tr").last());
updateCraftingSelector();
$("#crafting").fadeIn(FADE_DURATION);
if (onSuccess !== undefined) onSuccess();
} catch (e) {
$("#load_error").html(e);
$("#load_error").slideDown(FADE_DURATION).delay(ERROR_DISPLAY_DURATION).slideUp(FADE_DURATION);
}
},
error: function(response, status, error) {
$("#load_error").html(error);
$("#load_error").html(status + ": " + error);
$("#load_error").slideDown(FADE_DURATION).delay(ERROR_DISPLAY_DURATION).slideUp(FADE_DURATION);
},
complete: function() {
__loadingCount--;
onRecipeBookLoaded();
}
});
}
@@ -113,7 +123,9 @@ function parseUrlParameters() {
if (recipeName !== undefined) {
$("#crafting_selector").val(recipeName);
if ($("#crafting_selector option:selected").val() === undefined) {
if (findRecipe(recipeName) !== undefined) {
onCraftingSelectorChanged();
} else if (recipeName.length > 0) {
$("#crafting_error").html("Cannot find recipe for " + recipeName);
$("#crafting_error").fadeIn(FADE_DURATION).delay(ERROR_DISPLAY_DURATION).fadeOut(FADE_DURATION);
}
@@ -121,38 +133,37 @@ function parseUrlParameters() {
}
function updateCraftingSelector() {
var $selector = $("#crafting_selector");
$selector.html("");
if (__recipebooks.length == 0) {
$selector.attr("disabled", "disabled");
$selector.html("<option>No recipes</option>");
} else {
$(__recipebooks).each(function(i, recipebook) {
var $optgroup = $("<optgroup label=\"" + recipebook.name + "\">");
$selector.append($optgroup);
var $selector = $("crafting_selector");
var names = [];
$(__recipebooks).each(function(i, recipebook) {
for (var name in recipebook.recipes) {
names.push(name);
}
});
names.sort();
for (var i = 0; i < names.length; i++) {
$optgroup.append("<option value=\"" + names[i] + "\">" + names[i] + "</option>");
}
$("#crafting_selector").autocomplete({
source: names, delay: 0, minLength: 0,
change: onCraftingSelectorChanged,
close: onCraftingSelectorChanged,
select: onCraftingSelectorChanged,
});
$selector.removeAttr("disabled");
}
}
function updatePageState(count, recipeName) {
var newTitle = "Crafting Guide: " + count + " " + recipeName;
var newLink = "?count=" + count + "&recipeName=" + encodeURIComponent(recipeName);
var newTitle = "Crafting Guide";
var newLink = window.location.pathname;
var state = {}
if (recipeName !== undefined && recipeName.length > 0) {
newTitle = "Crafting Guide: " + count + " " + recipeName;
newLink = "?count=" + count + "&recipeName=" + encodeURIComponent(recipeName);
newLink = newLink.replace(/%20/g, "+");
state = {count: count, name: recipeName};
}
console.log("newTitle: " + newTitle + ", newLink: " + newLink);
document.title = newTitle;
history.pushState({count: count, name: recipeName}, newTitle, newLink);
history.pushState(state, newTitle, newLink);
ga('send', 'pageview');
}
html/css/main.css
+2
View File
@@ -19,6 +19,7 @@ p { margin-left: 10px; margin-right: 10px; }
#crafting_output { margin-left: 10px; width: 920px; }
#crafting_output th { background: #f8f8f8; border-left: 1px solid #bbb; font-weight: bold; padding: 10px; }
#crafting_output td { background: #f8f8f8; border-left: 1px solid #bbb; padding: 10px; }
#crafting_selector { width: 400px; }
#footer { background: #3E1D0A; color: white; padding-top: 10px; };
#footer iframe { display: inline-block; }
#footer a { color: gray; }
@@ -31,3 +32,4 @@ p { margin-left: 10px; margin-right: 10px; }
#recipebook_url { width: 600px; }
#recipebooks { margin-top: 32px; margin-bottom: 32px; }
.ui-autocomplete { max-height: 400px; overflow-y: auto; overflow-x: hidden; }
html/index.html
+7 -5
View File
@@ -2,11 +2,12 @@
<html>
<head>
<title>Crafting Guide</title>
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Press+Start+2P'/>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/text.css"/>
<link rel="stylesheet" type="text/css" href="css/960.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Press+Start+2P'/>
</head>
<body class="container_12">
@@ -32,7 +33,7 @@
<div id="crafting" class="hidden">
<h1><img src="images/workbench_top.png"> Crafting</h1>
<p>Choose a recipe:
<p>I want to make
<select id="crafting_count">
<option value="1">1</option>
<option value="2">2</option>
@@ -42,9 +43,9 @@
<option value="32">32</option>
<option value="64">64</option>
</select>
<select id="crafting_selector" disabled></select>
<input id="crafting_selector"></input>
<input id="tools_included" name="tools_included" type="checkbox"></input>
<label for="include_tools">include tools</label>
<label for="tools_included">include tools</label>
</p>
<table id="crafting_output" class="hidden" cellpadding="0" cellspacing="0">
<tr>
@@ -96,7 +97,8 @@
<div id="border_bedrock" class="grid_12 alpha omega">&nbsp;</div>
</div> <!-- .container_12 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="purl.js"></script>
<script src="crafting.js"></script>
<script>