litvinovg/vitro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

New search form

Browse source
This commit is contained in:
Georgy Litvinov 2020-09-03 15:38:28 +02:00
parent 14e3ab6379
commit 135bd7bb50
10 changed files with 281 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
webapp/src/main/webapp/themes/iph/css/iph.css
View file

@ -496,6 +496,44 @@ ul#header-nav a.log-out {
padding-left: 10px;
}
/* SEARCH ------> */
.search-form-container {
width: 100%;
float: left;
}
#switch-to-extended-searchform {
border:none;
background-color:unset;
color: #2485AE;
}
.custom-search-input {
width: 60%;
border-radius: unset !important;
-webkit-border-radius: unset !important;
float: left;
height: 2rem;
padding: 0px 0px 0px 5px !important;
border-style: solid;
border-color: #4d5863 !important;
margin-bottom: 0 !important;
}
.search-submit-button{
border-radius: unset !important;
-webkit-border-radius: unset !important;
float: left;
height: calc( 2rem + 2px);
border-style: solid;
border-color: #4d5863;
background: white;
}
.custom-search-select{
border-radius: unset !important;
-webkit-border-radius: unset !important;
margin: 0;
float: left;
height: calc( 2rem + 2px);
border-style: solid;
border-color: #4d5863;
}
#search {
position: absolute;
width: 396px;

173
webapp/src/main/webapp/themes/iph/css/query-builder.default.css Normal file
View file

@ -0,0 +1,173 @@
/*!
* jQuery QueryBuilder 2.5.2
* Copyright 2014-2018 Damien "Mistic" Sorel (http://www.strangeplanet.fr)
* Licensed under MIT (https://opensource.org/licenses/MIT)
*/
.query-builder .rules-group-container, .query-builder .rule-container, .query-builder .rule-placeholder {
position: relative;
margin: 4px 0;
border-radius: 5px;
padding: 5px;
border: 1px solid #EEE;
background: rgba(255, 255, 255, 0.9);
}
.query-builder .rule-container .rule-filter-container,
.query-builder .rule-container .rule-operator-container,
.query-builder .rule-container .rule-value-container, .query-builder .error-container, .query-builder .drag-handle {
display: inline-block;
margin: 0 5px 0 0;
vertical-align: middle;
}
.query-builder .rules-group-container {
padding: 10px;
padding-bottom: 6px;
border: 1px solid #DCC896;
background: rgba(250, 240, 210, 0.5);
}
.query-builder .rules-group-header {
margin-bottom: 10px;
}
.query-builder .rules-group-header .group-conditions .btn.readonly:not(.active),
.query-builder .rules-group-header .group-conditions input[name$='_cond'] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
.query-builder .rules-group-header .group-conditions .btn.readonly {
border-radius: 3px;
}
.query-builder .rules-list {
list-style: none;
padding: 0 0 0 15px;
margin: 0;
}
.query-builder .rule-value-container {
border-left: 1px solid #DDD;
padding-left: 5px;
}
.query-builder .rule-value-container label {
margin-bottom: 0;
font-weight: normal;
}
.query-builder .rule-value-container label.block {
display: block;
}
.query-builder .rule-value-container select,
.query-builder .rule-value-container input[type='text'],
.query-builder .rule-value-container input[type='number'] {
padding: 1px;
}
.query-builder .error-container {
display: none;
cursor: help;
color: #F00;
}
.query-builder .has-error {
background-color: #FDD;
border-color: #F99;
}
.query-builder .has-error .error-container {
display: inline-block !important;
}
.query-builder .rules-list > *::before, .query-builder .rules-list > *::after {
content: '';
position: absolute;
left: -10px;
width: 10px;
height: calc(50% + 4px);
border-color: #CCC;
border-style: solid;
}
.query-builder .rules-list > *::before {
top: -4px;
border-width: 0 0 2px 2px;
}
.query-builder .rules-list > *::after {
top: 50%;
border-width: 0 0 0 2px;
}
.query-builder .rules-list > *:first-child::before {
top: -12px;
height: calc(50% + 14px);
}
.query-builder .rules-list > *:last-child::before {
border-radius: 0 0 0 4px;
}
.query-builder .rules-list > *:last-child::after {
display: none;
}
.query-builder.bt-checkbox-glyphicons .checkbox input[type='checkbox']:checked + label::after {
font-family: 'Glyphicons Halflings';
content: '\e013';
}
.query-builder.bt-checkbox-glyphicons .checkbox label::after {
padding-left: 4px;
padding-top: 2px;
font-size: 9px;
}
.query-builder .error-container + .tooltip .tooltip-inner {
color: #F99 !important;
}
.query-builder p.filter-description {
margin: 5px 0 0 0;
background: #D9EDF7;
border: 1px solid #BCE8F1;
color: #31708F;
border-radius: 5px;
padding: 2.5px 5px;
font-size: .8em;
}
.query-builder .rules-group-header [data-invert] {
margin-left: 5px;
}
.query-builder .drag-handle {
cursor: move;
vertical-align: middle;
margin-left: 5px;
}
.query-builder .dragging {
position: fixed;
opacity: .5;
z-index: 100;
}
.query-builder .dragging::before, .query-builder .dragging::after {
display: none;
}
.query-builder .rule-placeholder {
border: 1px dashed #BBB;
opacity: .7;
}

6
webapp/src/main/webapp/themes/iph/css/query-builder.default.min.css vendored Normal file
View file

@ -0,0 +1,6 @@
/*!
* jQuery QueryBuilder 2.5.2
* Copyright 2014-2018 Damien "Mistic" Sorel (http://www.strangeplanet.fr)
* Licensed under MIT (https://opensource.org/licenses/MIT)
*/
.query-builder .rule-container,.query-builder .rule-placeholder,.query-builder .rules-group-container{position:relative;margin:4px 0;border-radius:5px;padding:5px;border:1px solid #eee;background:rgba(255,255,255,.9)}.query-builder .drag-handle,.query-builder .error-container,.query-builder .rule-container .rule-filter-container,.query-builder .rule-container .rule-operator-container,.query-builder .rule-container .rule-value-container{display:inline-block;margin:0 5px 0 0;vertical-align:middle}.query-builder .rules-group-container{padding:10px;padding-bottom:6px;border:1px solid #dcc896;background:rgba(250,240,210,.5)}.query-builder .rules-group-header{margin-bottom:10px}.query-builder .rules-group-header .group-conditions .btn.readonly:not(.active),.query-builder .rules-group-header .group-conditions input[name$='_cond']{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.query-builder .rules-group-header .group-conditions .btn.readonly{border-radius:3px}.query-builder .rules-list{list-style:none;padding:0 0 0 15px;margin:0}.query-builder .rule-value-container{border-left:1px solid #ddd;padding-left:5px}.query-builder .rule-value-container label{margin-bottom:0;font-weight:400}.query-builder .rule-value-container label.block{display:block}.query-builder .rule-value-container input[type=number],.query-builder .rule-value-container input[type=text],.query-builder .rule-value-container select{padding:1px}.query-builder .error-container{display:none;cursor:help;color:red}.query-builder .has-error{background-color:#fdd;border-color:#f99}.query-builder .has-error .error-container{display:inline-block!important}.query-builder .rules-list>::after,.query-builder .rules-list>::before{content:'';position:absolute;left:-10px;width:10px;height:calc(50% + 4px);border-color:#ccc;border-style:solid}.query-builder .rules-list>::before{top:-4px;border-width:0 0 2px 2px}.query-builder .rules-list>::after{top:50%;border-width:0 0 0 2px}.query-builder .rules-list>:first-child::before{top:-12px;height:calc(50% + 14px)}.query-builder .rules-list>:last-child::before{border-radius:0 0 0 4px}.query-builder .rules-list>:last-child::after{display:none}.query-builder.bt-checkbox-glyphicons .checkbox input[type=checkbox]:checked+label::after{font-family:'Glyphicons Halflings';content:'\e013'}.query-builder.bt-checkbox-glyphicons .checkbox label::after{padding-left:4px;padding-top:2px;font-size:9px}.query-builder .error-container+.tooltip .tooltip-inner{color:#f99!important}.query-builder p.filter-description{margin:5px 0 0 0;background:#d9edf7;border:1px solid #bce8f1;color:#31708f;border-radius:5px;padding:2.5px 5px;font-size:.8em}.query-builder .rules-group-header [data-invert]{margin-left:5px}.query-builder .drag-handle{cursor:move;vertical-align:middle;margin-left:5px}.query-builder .dragging{position:fixed;opacity:.5;z-index:100}.query-builder .dragging::after,.query-builder .dragging::before{display:none}.query-builder .rule-placeholder{border:1px dashed #bbb;opacity:.7}

0
webapp/src/main/webapp/themes/iph/js/query-builder-config.js Normal file
View file

25
webapp/src/main/webapp/themes/iph/templates/customSearchForm.ftl Normal file
View file

@ -0,0 +1,25 @@
<div class="search-form-container">
<form id="custom-search" action="${urls.customsearch}" name="custom-search" role="search" method="post" >
<input type="text" name="querytext" class="custom-search-input" value="${querytext!?html}" autocapitalize="off" />
<#if vClassGroups??>
<select form="custom-search" name="classgroup" class="custom-search-select">
<option value="">${i18n().all_capitalized}</option>
<@classGroupOptions vClassGroups! />
</select>
</#if>
<input type="submit" value="${i18n().search_button}" class="search-submit-button" />
<!--
<a class="filter-search filter-default" href="#" title="${i18n().intro_filtersearch}">
<span class="displace">${i18n().intro_filtersearch}</span>
</a>
-->
</form>
</div>
<#macro classGroupOptions classGroups>
<#list classGroups as group>
<#if (group.individualCount > 0)>
<option value="${group.uri}">${group.displayName?capitalize}</option>
</#if>
</#list>
</#macro>

3
webapp/src/main/webapp/themes/iph/templates/customsearchpanel.ftl Normal file
View file

@ -0,0 +1,3 @@
<section id="search" role="region">
<#include "customSearchForm.ftl">
</section>

18
webapp/src/main/webapp/themes/iph/templates/page-home.ftl
View file

@ -42,24 +42,8 @@
<fieldset>
<legend>${i18n().search_form}</legend>
<form id="search-homepage" action="${urls.customsearch}" name="search-home" role="search" method="post" >
<div id="search-home-field">
<input type="text" name="querytext" class="search-homepage" value="" autocapitalize="off" />
<input type="submit" value="${i18n().search_button}" class="search" />
<input type="hidden" name="classgroup" value="" autocapitalize="off" />
</div>
<a class="filter-search filter-default" href="#" title="${i18n().intro_filtersearch}">
<span class="displace">${i18n().intro_filtersearch}</span>
</a>
<ul id="filter-search-nav">
<li><a class="active" href="">${i18n().all_capitalized}</a></li>
<@lh.allClassGroupNames vClassGroups! />
</ul>
</form>
</fieldset>
<#include "queryBuilder.ftl">
<#include "searchSelector.ftl">
</section> <!-- #search-home -->
</section> <!-- #intro -->

4
webapp/src/main/webapp/themes/iph/templates/page.ftl
View file

@ -10,7 +10,9 @@
<body class="${bodyClasses!}" onload="${bodyOnload!}">
<#include "identity.ftl">
<#include "search.ftl" >
<#if !querytext?? >
<#include "customsearchpanel.ftl" >
</#if>
<#include "menu.ftl">
<#-- VIVO OpenSocial Extension by UCSF -->

9
webapp/src/main/webapp/themes/iph/templates/queryBuilder.ftl
View file

@ -1,10 +1,13 @@
<div id="querybuilder-container" style="display:none;">
<div id="builder"></div>
<div class="btn-group">
<button id="btn-get-standard-searchform" class="btn btn-warning reset" data-target="basic">Стандартная форма поиска</button>
<button id="btn-reset" class="btn btn-warning reset" data-target="basic">Очистить</button>
<button id="btn-set" class="btn btn-success set-json" data-target="basic">Пример</button>
<button id="btn-search" class="btn btn-warning reset" data-target="basic">Поиск</button>
<!-- <button id="btn-get" class="btn btn-primary parse-json" data-target="basic">Get rules</button> -->
</div>
</div>
<script src="themes/iph/js/query-builder.standalone.min.js"></script>
<script src="themes/iph/js/query-builder.ru.js"></script>
<script>
@ -74,6 +77,12 @@
$('#builder').queryBuilder('setRules', rules_example);
});
$('#btn-get-standard-searchform').on('click', function() {
$('#querybuilder-container').hide();
$('#simple-search-container').show();
});
//$('#btn-get').on('click', function() {
// var result = $('#builder').queryBuilder('getRules');
//

17
webapp/src/main/webapp/themes/iph/templates/searchSelector.ftl Normal file
View file

@ -0,0 +1,17 @@
<div id="simple-search-container">
<#include "customSearchForm.ftl">
<button id="switch-to-extended-searchform">Расширенный поиск</button>
</div>
<#include "queryBuilder.ftl">
<script>
$('#switch-to-extended-searchform').on('click', function() {
$('#simple-search-container').hide();
$('#querybuilder-container').show();
});
if ( "${querytext!?html}".includes(":\"") ){
$('#simple-search-container').hide();
$('#querybuilder-container').show();
}
</script>