From fcdb01ee8195e51382ff44f9b50e79548c2aa0a1 Mon Sep 17 00:00:00 2001 From: Severyn Kozak Date: Mon, 19 May 2014 21:53:42 -0400 Subject: [PATCH] Add search-group selection/removal. Add: static/js/index.js -Add ability to select an existing search group to edit. -Add ability to remove search groups with a button. static/sass/index.sass -Add styling for `div#header`, which contains the titles of both columns ("fields" and "search groups") in the advanced search form. --- static/js/index.js | 45 ++++++++++++++++++++++++++++++++------ static/sass/index.sass | 59 ++++++++++++++++++++++++++++++++++++++++---------- templates/index.html | 34 +++++++++++++++-------------- 3 files changed, 104 insertions(+), 34 deletions(-) diff --git a/static/js/index.js b/static/js/index.js index f9b1cbf..e7d82df 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -172,20 +172,51 @@ function loadMoreResults(){ } var searchGroups = $("div#search-groups"); -// Create a new search group. + +// Create a new search group, and update the `#sidebar` checklist accordingly. $("button#add-group").click(function(){ - var searchGroup = $("
", {class : "search-group"}); + $("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); }); -$("div#advanced-search #sidebar input[type=checkbox]").click(function(){ - var fieldId = $(this).attr("id"); +$("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. @@ -195,8 +226,8 @@ $("div#advanced-search #sidebar input[type=checkbox]").click(function(){ function createSearchGroupInput(fieldId){ return [ "
", - "
" + fieldId + "
", - "", + "
" + fieldId.replace(/-/g, " ") + "
", + "", "Regex", "
" ].join(""); diff --git a/static/sass/index.sass b/static/sass/index.sass index c50eb83..92baaf3 100644 --- a/static/sass/index.sass +++ b/static/sass/index.sass @@ -69,7 +69,11 @@ div#search-field color: $baseColor2 font-style: italic + $minSearchFieldsWidth: 490px + form#search-bar + min-width: $minSearchFieldsWidth + input[type="text"], button @extend .t3 @include vendor(box-sizing, border-box) @@ -113,11 +117,29 @@ div#search-field background-color: white border: 1px solid $baseColor3 font-size: 96% - min-width: 490px + min-width: $minSearchFieldsWidth padding-top: 0px overflow-x: auto height: 400px + #heading + color: $baseColor2 + display: block + font-size: 120% + padding-left: 1% + padding-top: 1% + width: 100% + + div + display: inline-block + font-size: 110% + + &#col1 + width: 25% + + &#col2 + width: 75% + >div @include vendor(box-sizing, border-box) @@ -128,11 +150,6 @@ div#search-field padding-left: 1% width: 25% - >div - color: $baseColor2 - font-size: 120% - padding-top: 5% - >ul list-style: none padding-left: 0 @@ -175,8 +192,9 @@ div#search-field background-color: $lightBlue border: none color: white + display: block height: 40px - margin-bottom: 10% + margin-bottom: 2% overflow: hidden white-space: nowrap width: 40px @@ -185,7 +203,7 @@ div#search-field font-size: 150% font-weight: bold margin-left: 6px - margin-right: 10px + margin-right: 14px &:hover @extend .t3 @@ -194,23 +212,39 @@ div#search-field cursor: pointer width: 90% + button#remove-group + @extend button#add-group + + background-color: #D82D48 + + span + padding-left: 3px + + &:hover + @extend .t3 + + background-color: #F11437 + #search-groups - margin-top: 2% + margin-top: 1% max-height: 93% overflow-y: auto width: 75% .search-group + @include vendor(transition, all 0.6s ease-out) + background-color: $lightGray padding: 1% - margin-bottom: 1% + margin-bottom: 2% + width: 97% >div margin-bottom: 0.7% div display: inline-block - width: 20% + width: 18% input[type=text] padding: 2px @@ -228,6 +262,9 @@ div#search-field span font-size: 80% + &#selected + background-color: #CACACA + &.partly-visible margin-top: 0% padding-bottom: 3% diff --git a/templates/index.html b/templates/index.html index cb4f366..44f7005 100644 --- a/templates/index.html +++ b/templates/index.html @@ -34,48 +34,50 @@