ben
/
bitshift
mirror of https://github.com/earwig/bitshift
1
1
Fork 0
Code Releases 1 Activity
Browse Source

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 10 years ago
parent
53bc6cde3f
commit
3431703dd0
3 changed files with 49 additions and 94 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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 View File

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


var searchGroups = [];
var currentSearchGroup = 0;

var searchGroups = $("div#search-groups");
// Create a new search group. // 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 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 View File

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


form#search-bar form#search-bar
min-width: 510px

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


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


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


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

&:hover &:hover
@extend .t3 @extend .t3


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


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


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


&:checked + span
@extend .t2

color: green
font-weight: bold

span span
font-size: 80% font-size: 80%




+ 9
- 35
templates/index.html View File

@@ -40,7 +40,7 @@
</div> </div>
<ul> <ul>
<li> <li>
<input type="checkbox" id="language"/>
<input type="checkbox" id="language" checked/>
<label for="language"><div>languages</div></label> <label for="language"><div>languages</div></label>
</li> </li>
<li> <li>
@@ -73,45 +73,19 @@
</li> </li>
</ul> </ul>
<button id="add-group"> <button id="add-group">
<!-- <div> -->
+
<!-- </div> -->
<div>
<span>+</span> Add group
</div>
</button> </button>
</div> </div>
<div id="search-groups"> <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> </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>
</div> </div>
</form> </form>


Write Preview
Loading…
Cancel
Save