Quellcode durchsuchen

Add ability to add input fields/groups.

Add:
    static/js/index.js
        -Add callback functions to the buttons/checkboxes in `#sidebar`, which
        allow the user to add new search groups, and to add input fields to the
        currently selected search group.

Rem:
    static/js/index.js
        -Remove obsolete functions which allowed the creation/deletion of search
        groups in the old form.
tags/v1.0^2
Severyn Kozak vor 10 Jahren
Ursprung
Commit
3431703dd0
3 geänderte Dateien mit 49 neuen und 94 gelöschten Zeilen
  1. +22
    -54
      static/js/index.js
  2. +18
    -5
      static/sass/index.sass
  3. +9
    -35
      templates/index.html

+ 22
- 54
static/js/index.js Datei anzeigen

@@ -171,65 +171,33 @@ function loadMoreResults(){
}
}

var searchGroups = [];
var currentSearchGroup = 0;

var searchGroups = $("div#search-groups");
// Create a new search group.
$("div#add-group").click(function(){
storeSearchGroup();
currentSearchGroup = searchGroups.length;
$("span#current, span#total").text(currentSearchGroup + 1);
});

// Save the current's search group's values, and load the previous one.
$("div#previous-group").click(function(){
console.log(currentSearchGroup);
if(0 < currentSearchGroup){
storeSearchGroup();
currentSearchGroup--;
loadSearchGroup();
$("span#current").text(currentSearchGroup + 1);
}
});

// Save the current's search group's values, and load the next one.
$("div#next-group").click(function(){
console.log(currentSearchGroup);
if(currentSearchGroup < searchGroups.length - 1){
storeSearchGroup();
currentSearchGroup++;
loadSearchGroup();
$("span#current").text(currentSearchGroup + 1);
}
$("button#add-group").click(function(){
var searchGroup = $("<div/>", {class : "search-group"});
searchGroups.append(searchGroup.append(createSearchGroupInput("language")));
});

/*
* Store the advanced search form's values into the currently selected search
* group object.
*/
function storeSearchGroup(){
var searchGroup = {};
var inputs = $("div#advanced-search input[type='text']");

for(var input = 0; input < inputs.length; input++)
if(inputs[input].value.length > 0){
searchGroup[inputs[input].id] = inputs[input].value;
inputs[input].value = "";
}

if(currentSearchGroup < searchGroups.length)
searchGroups[currentSearchGroup] = searchGroup;
$("div#advanced-search #sidebar input[type=checkbox]").click(function(){
var fieldId = $(this).attr("id");
if($(this).is(":checked"))
$("div.search-group#selected").append(
$.parseHTML(createSearchGroupInput(fieldId)));
else
searchGroups.push(searchGroup);
}
$("div.search-group#selected #" + fieldId).remove()
})

/*
* Load the values belonging to the currently selected search group object into
* the advanced search form.
* 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 loadSearchGroup(groupNumber){
for(var inputId in searchGroups[currentSearchGroup]){
var selector = "div#advanced-search input[type='text']#" + inputId;
$(selector).val(searchGroups[currentSearchGroup][inputId]);
}
function createSearchGroupInput(fieldId){
return [
"<div id='" + fieldId + "'>",
"<div>" + fieldId + "</div>",
"<input id='" + "'type='text'>",
"<input type='checkbox' name='regex'><span>Regex</span>",
"</div>"
].join("");
}

+ 18
- 5
static/sass/index.sass Datei anzeigen

@@ -70,8 +70,6 @@ div#search-field
font-style: italic

form#search-bar
min-width: 510px

input[type="text"], button
@extend .t3
@include vendor(box-sizing, border-box)
@@ -114,6 +112,8 @@ div#search-field
div#advanced-search
background-color: white
border: 1px solid $baseColor3
font-size: 96%
min-width: 490px
padding-top: 0px
overflow-x: auto
height: 400px
@@ -150,7 +150,6 @@ div#search-field

background-color: $lightGray
border: none
font-size: 96%
padding: 3%
width: 85%

@@ -176,21 +175,29 @@ div#search-field
background-color: $lightBlue
border: none
color: white
font-weight: bold
height: 40px
margin-bottom: 10%
overflow: hidden
white-space: nowrap
width: 40px

span
font-size: 150%
font-weight: bold
margin-left: 6px
margin-right: 10px

&:hover
@extend .t3

background-color: $blue
cursor: pointer
width: 90%

#search-groups
margin-top: 2%
max-height: 93%
overflow-y: scroll
overflow-y: auto
width: 75%

.search-group
@@ -212,6 +219,12 @@ div#search-field
input[type=checkbox]
margin-left: 2%

&:checked + span
@extend .t2

color: green
font-weight: bold

span
font-size: 80%



+ 9
- 35
templates/index.html Datei anzeigen

@@ -40,7 +40,7 @@
</div>
<ul>
<li>
<input type="checkbox" id="language"/>
<input type="checkbox" id="language" checked/>
<label for="language"><div>languages</div></label>
</li>
<li>
@@ -73,45 +73,19 @@
</li>
</ul>
<button id="add-group">
<!-- <div> -->
+
<!-- </div> -->
<div>
<span>+</span> Add group
</div>
</button>
</div>
<div id="search-groups">
<div class="search-group">
<div>
<div>Authors</div>
<input type="text">
<input type="checkbox" name="regex"><span>Regex?</span>
</div>
<div>
<div>Language</div>
<input type="text">
<input type="checkbox" name="regex"><span>Regex?</span>
<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>
</div>
</div>
<div class="search-group">Hello, world. 2</div>
<div class="search-group">Hello, world. 3</div>
<div class="search-group">Hello, world. 4</div>
<div class="search-group">Hello, world. 5</div>
<div class="search-group">Hello, world. 6</div>
<div class="search-group">Hello, world. 7</div>
<div class="search-group">Hello, world. 8</div>
<div class="search-group">Hello, world. 9</div>
<div class="search-group">Hello, world. 10</div>
<div class="search-group">Hello, world. 11</div>
<div class="search-group">Hello, world. 12</div>
<div class="search-group">Hello, world. 13</div>
<div class="search-group">Hello, world. 14</div>
<div class="search-group">Hello, world. 15</div>
<div class="search-group">Hello, world. 16</div>
<div class="search-group">Hello, world. 17</div>
<div class="search-group">Hello, world. 18</div>
<div class="search-group">Hello, world. 19</div>
<div class="search-group">Hello, world. 20</div>
<div class="search-group">Hello, world. 21</div>
<div class="search-group">Hello, world. 22</div>
</div>
</div>
</form>


Laden…
Abbrechen
Speichern