Sfoglia il codice sorgente

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.
tags/v1.0^2
Severyn Kozak 10 anni fa
parent
commit
51321343cd
4 ha cambiato i file con 123 aggiunte e 93 eliminazioni
  1. +112
    -0
      static/js/index.advanced-search-form.js
  2. +0
    -85
      static/js/index.js
  3. +8
    -6
      static/sass/index.sass
  4. +3
    -2
      templates/index.html

+ 112
- 0
static/js/index.advanced-search-form.js Vedi File

@@ -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 = $("<div/>", {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 [
"<div id='" + fieldId + "'>",
"<div>" + fieldId.replace(/-/g, " ") + "</div>",
"<input class='" + fieldId + "'type='text'/>",
"<input type='checkbox' name='regex'><span>Regex</span>",
"</div>"
].join("");
}

function assembleQuery(){
var groups = searchGroups.children(".search-group");
var groupQueries = [];

for(var group = 0; group < groups.length; group++)
console.log(group);
}

+ 0
- 85
static/js/index.js Vedi File

@@ -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 = $("<div/>", {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 [
"<div id='" + fieldId + "'>",
"<div>" + fieldId.replace(/-/g, " ") + "</div>",
"<input id='" + fieldId + "'type='text'/>",
"<input type='checkbox' name='regex'><span>Regex</span>",
"</div>"
].join("");
}

+ 8
- 6
static/sass/index.sass Vedi File

@@ -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


+ 3
- 2
templates/index.html Vedi File

@@ -84,8 +84,8 @@
<div class="search-group" id="selected">
<div id="language">
<div>language</div>
<input id="language" type="text">
<input type="checkbox" name="regex"><span>Regex</span>
<input class="language" type="text">
<input type="checkbox" name="regex"><span class="regex">Regex</span>
</div>
</div>
</div>
@@ -96,4 +96,5 @@
<div id="results"></div>

{{ assets.tag("index.js") }}
{{ assets.tag("index.advanced-search-form.js") }}
= endblock

Caricamento…
Annulla
Salva