From 51321343cd8141ecb56605e011f009e5243031d4 Mon Sep 17 00:00:00 2001 From: Severyn Kozak Date: Tue, 20 May 2014 13:13:50 -0400 Subject: [PATCH] Migrate search-form code to new file. Add: static/js/(index > index.advanced-search-form).js -Migrate code relevant to the advanced search form to its own file. -Group global-scope function calls into wrapper functions executed on definition. -Add datepicker to new form's input fields. --- static/js/index.advanced-search-form.js | 112 ++++++++++++++++++++++++++++++++ static/js/index.js | 85 ------------------------ static/sass/index.sass | 14 ++-- templates/index.html | 5 +- 4 files changed, 123 insertions(+), 93 deletions(-) create mode 100644 static/js/index.advanced-search-form.js diff --git a/static/js/index.advanced-search-form.js b/static/js/index.advanced-search-form.js new file mode 100644 index 0000000..f918d58 --- /dev/null +++ b/static/js/index.advanced-search-form.js @@ -0,0 +1,112 @@ +/* + * @file Manages all advanced search form logic. + */ + +var searchGroups = $("div#search-groups"); + +/* + * Load all advanced search form libraries. + */ +(function loadInputFieldWidgets(){ + $(".search-group input#date-last-modified").datepicker(); + $(".search-group input#date-created").datepicker(); + + var languages = new Bloodhound({ + datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"), + queryTokenizer: Bloodhound.tokenizers.whitespace, + local: $.map(TYPEAHEAD_LANGUAGES, function(state){ + return {value : state}; + }) + }); + + languages.initialize(); + $("#language.typeahead").typeahead({ + hint: true, + highlight: true, + minLength: 1 + }, + { + name: "languages", + displayKey: "value", + source: languages.ttAdapter() + }); +}()); + +/* + * Set all advanced search form button callbacks. + */ +(function setSearchFormCallbacks(){ + // Create a new search group, and update the `#sidebar` checklist accordingly. + $("button#add-group").click(function(){ + $("div#sidebar input[type=checkbox]").prop("checked", false); + + searchGroups.children("#selected").removeAttr("id"); + var searchGroup = $("
", {class : "search-group", id : "selected"}); + searchGroups.append(searchGroup.append(createSearchGroupInput("language"))); + $("div#sidebar input[type=checkbox]#language").prop("checked", true); + }); + + // Remove the currently selected group if it's not the only one, and mark one + // of its siblings as selected. + $("button#remove-group").click(function(){ + var currentGroup = $("div.search-group#selected"); + + if($("div.search-group").length == 1) + return; + else { + var nextGroup = currentGroup.prev(); + if(nextGroup.size() == 0) + nextGroup = currentGroup.next(); + } + currentGroup.remove(); + nextGroup.click(); + }); + + // Select a search group, and update the `#sidebar` checklist accordingly. + $(document).on("click", "div.search-group", function(){ + searchGroups.children("#selected").removeAttr("id"); + $(this).attr("id", "selected"); + $("div#sidebar input[type=checkbox]").prop("checked", false); + $(this).find("input[type=text]").each(function(){ + var checkBoxSelector = "div#sidebar input[type=checkbox]"; + $(checkBoxSelector + "#" + $(this).attr("class").split(" ")[0]). + prop("checked", true); + }) + }); + + // Add an input field to the currently selected search group. + $("div#sidebar input[type=checkbox]").click(function(){ + var fieldId = $(this).prop("id"); + if($(this).is(":checked")){ + $("div.search-group#selected").append( + $.parseHTML(createSearchGroupInput(fieldId))); + if(fieldId.slice(0, 4) == "date") + $(".search-group#selected ." + fieldId).datepicker(); + } + else + $("div.search-group#selected ." + fieldId).remove() + }); +}()); + +/* + * Return an HTML string representing a new input field div in a search group. + * + * @param fieldId The id of the input field div, and its child elements. + */ +function createSearchGroupInput(fieldId){ + return [ + "
", + "
" + fieldId.replace(/-/g, " ") + "
", + "", + "Regex", + "
" + ].join(""); +} + +function assembleQuery(){ + var groups = searchGroups.children(".search-group"); + var groupQueries = []; + + for(var group = 0; group < groups.length; group++) + console.log(group); +} diff --git a/static/js/index.js b/static/js/index.js index e7d82df..13b404c 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -20,29 +20,6 @@ advancedSearchButton.click(function(){ } }); -$("#date-last-modified").datepicker(); -$("#date-created").datepicker(); - -var languages = new Bloodhound({ - datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"), - queryTokenizer: Bloodhound.tokenizers.whitespace, - local: $.map(TYPEAHEAD_LANGUAGES, function(state){ - return {value : state}; - }) -}); - -languages.initialize(); -$("#languages.typeahead").typeahead({ - hint: true, - highlight: true, - minLength: 1 - }, - { - name: "languages", - displayKey: "value", - source: languages.ttAdapter() -}); - FINISH_TYPING_INTERVAL = 650; searchBar = $("form#search-bar input[type='text']")[0]; resultsDiv = $("div#results")[0]; @@ -170,65 +147,3 @@ function loadMoreResults(){ result * 20); } } - -var searchGroups = $("div#search-groups"); - -// Create a new search group, and update the `#sidebar` checklist accordingly. -$("button#add-group").click(function(){ - $("div#sidebar input[type=checkbox]").prop("checked", false); - - searchGroups.children("#selected").removeAttr("id"); - var searchGroup = $("
", {class : "search-group", id : "selected"}); - searchGroups.append(searchGroup.append(createSearchGroupInput("language"))); - $("div#sidebar input[type=checkbox]#language").prop("checked", true); -}); - -$("button#remove-group").click(function(){ - var currentGroup = $("div.search-group#selected"); - - if($("div.search-group").length == 1) - return; - else { - var nextGroup = currentGroup.prev(); - if(nextGroup.size() == 0) - nextGroup = currentGroup.next(); - } - currentGroup.remove(); - nextGroup.click(); -}); - -// Select a search group, and update the `#sidebar` checklist accordingly. -$(document).on("click", "div.search-group", function(){ - searchGroups.children("#selected").removeAttr("id"); - $(this).attr("id", "selected"); - $("div#sidebar input[type=checkbox]").prop("checked", false); - $(this).find("input[type=text]").each(function(){ - var checkBoxSelector = "div#sidebar input[type=checkbox]"; - $(checkBoxSelector + "#" + $(this).attr("id")).prop("checked", true); - }) -}); - -// Add an input field to the currently selected search group. -$("div#sidebar input[type=checkbox]").click(function(){ - var fieldId = $(this).prop("id"); - if($(this).is(":checked")) - $("div.search-group#selected").append( - $.parseHTML(createSearchGroupInput(fieldId))); - else - $("div.search-group#selected #" + fieldId).remove() -}); - -/* - * Return an HTML string representing a new input field div in a search group. - * - * @param fieldId The id of the input field div, and its child elements. - */ -function createSearchGroupInput(fieldId){ - return [ - "
", - "
" + fieldId.replace(/-/g, " ") + "
", - "", - "Regex", - "
" - ].join(""); -} diff --git a/static/sass/index.sass b/static/sass/index.sass index 92baaf3..f0cf513 100644 --- a/static/sass/index.sass +++ b/static/sass/index.sass @@ -9,7 +9,8 @@ font-size: 70% .twitter-typeahead - width: 100% + // display: inline-block + width: 60% .tt-hint color: $baseColor2 @@ -117,10 +118,11 @@ div#search-field background-color: white border: 1px solid $baseColor3 font-size: 96% + height: 400px min-width: $minSearchFieldsWidth padding-top: 0px overflow-x: auto - height: 400px + overflow-y: hidden #heading color: $baseColor2 @@ -242,15 +244,15 @@ div#search-field >div margin-bottom: 0.7% - div + >div display: inline-block width: 18% - input[type=text] + >input[type=text] padding: 2px width: 60% - input[type=checkbox] + >input[type=checkbox] margin-left: 2% &:checked + span @@ -259,7 +261,7 @@ div#search-field color: green font-weight: bold - span + span.regex font-size: 80% &#selected diff --git a/templates/index.html b/templates/index.html index 44f7005..8a29071 100644 --- a/templates/index.html +++ b/templates/index.html @@ -84,8 +84,8 @@
language
- - Regex + + Regex
@@ -96,4 +96,5 @@
{{ assets.tag("index.js") }} + {{ assets.tag("index.advanced-search-form.js") }} = endblock