瀏覽代碼

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.
tags/v1.0^2
Severyn Kozak 10 年之前
父節點
當前提交
fcdb01ee81
共有 3 個檔案被更改,包括 104 行新增34 行删除
  1. +38
    -7
      static/js/index.js
  2. +48
    -11
      static/sass/index.sass
  3. +18
    -16
      templates/index.html

+ 38
- 7
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 = $("<div/>", {class : "search-group"});
$("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);
});

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


+ 48
- 11
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%


+ 18
- 16
templates/index.html 查看文件

@@ -34,48 +34,50 @@
</button>

<div id="advanced-search">
<div id="heading">
<div id="col1">Fields</div
><div id="col2">Search groups</div>
</div>
<div id="sidebar">
<div>
Fields
</div>
<ul>
<li>
<input type="checkbox" id="language" checked/>
<input type="checkbox" id="language" checked="true">
<label for="language"><div>languages</div></label>
</li>
<li>
<input type="checkbox" id="author"/>
<input type="checkbox" id="author">
<label for="author"><div>authors</div></label>
</li>
<li>
<input type="checkbox" id="modified"/>
<label for="modified"><div>date last modified</div></label>
<input type="checkbox" id="date-last-modified">
<label for="date-last-modified"><div>date last modified</div></label>
</li>
<li>
<input type="checkbox" id="created"/>
<label for="created"><div>date created</div></label>
<input type="checkbox" id="date-created">
<label for="date-created"><div>date created</div></label>
</li>
<li>
<input type="checkbox" id="symbol"/>
<input type="checkbox" id="symbol">
<label for="symbol"><div>symbols</div></label>
</li>
<li>
<input type="checkbox" id="function"/>
<input type="checkbox" id="function">
<label for="function"><div>functions</div></label>
</li>
<li>
<input type="checkbox" id="class"/>
<input type="checkbox" id="class">
<label for="class"><div>classes</div></label>
</li>
<li>
<input type="checkbox" id="variable"/>
<input type="checkbox" id="variable">
<label for="variable"><div>variables</div></label>
</li>
</ul>
<button id="add-group">
<div>
<span>+</span> Add group
</div>
<div><span>+</span> Add</div>
</button>
<button id="remove-group">
<div><span>-</span> Remove</div>
</button>
</div>
<div id="search-groups">


Loading…
取消
儲存