<ods-dataset-context context="search,ctx"
search-dataset="demographyref-france-pop-active-sexe-activite-commune-millesime"
search-domain="public"
ctx-dataset="demographyref-france-pop-active-sexe-activite-commune-millesime"
ctx-domain="public"
ng-init="variables = {}">
<div ods-adv-analysis="results"
ods-adv-analysis-context="search"
ods-adv-analysis-select="count(*)"
ods-adv-analysis-group-by="com_arm_name,com_arm_code,dep_code">
<div class="search-module">
<!-- The search bar with it's cancel button -->
<div class="search-bar">
<i class="fa fa-search search-bar-icon" aria-hidden="true"></i>
<label for="search-as-you-type" class="sr-only">Search for a city</label>
<input id="search-as-you-type"
name="search-as-you-type"
autocomplete="off"
aria-label="search-as-you-type: type some characters to make a search"
aria-expanded="{{ variables.recherche != undefined }}"
aria-controls="search-results"
placeholder="Search for a city"
ng-model="variables.recherche"
ng-model-options="{ updateOn: 'keyup', debounce: 400 }"
ng-change="variables.recherche ? (search.parameters['q'] = ('#search(com_arm_name,\'' + variables.recherche + '\')' )) : (ctx.parameters['refine.com_arm_code'] = undefined);"
class="search-bar-input"
type="text"/>
<button aria-label="Clear search"
class="search-bar-clear"
ng-if="variables.recherche"
ng-click="variables.recherche = undefined;
search.parameters['q'] = undefined">
<i class="fa fa-times-circle" aria-hidden="true"></i>
<span class="sr-only">Clear search</span>
</button>
</div>
<!-- Search results -->
<div class="search-results">
<span class="sr-only">
Search results will be displayed bellow, as a list of external links
</span>
<ul ng-if="search.parameters['q']"
class="display-tags"
aria-label="search-as-you-type results displayed here when a search is made"
aria-live="polite"
aria-atomic="true"
aria-labelledby="search-as-you-type"
role="group"
id="search-results">
<li ng-repeat="(i,item) in results"
ng-if="search.parameters['q'] && i <= 9"
role="listitem">
<div ng-click="ctx.parameters['refine.com_arm_code'] = item.com_arm_code;
variables.selection = item.com_arm_name;">
{{item.com_arm_name }} ({{item.dep_code }})
<i class="fa fa-map-marker" aria-hidden="true"></i>
<span class="sr-only">Filter on the selected city</span>
</div>
</li>
<li class="more-than-ten"
role="listitem"
ng-if="search.parameters['q'] && results.length > 10">
More than 10 results. Continue typing to narrow your search...
</li>
</ul>
</div>
<!-- The active selection, and clear selection button -->
<div class="search-selection"
ng-if="ctx.parameters['refine.com_arm_code']">
<h2 class="search-selection-value">
{{ variables.selection }}
</h2>
<button class="clear-filters-button"
ng-click="ctx.parameters['refine.com_arm_code'] = undefined;
variables.selection = undefined">
Clear selection
<i class="fa fa-times-circle" aria-hidden="true"></i>
</button>
</div>
</div>
<!-- Optionnal content, for the resource only, to highlight the selection and filter -->
<ods-chart timescale="year" align-month="true">
<ods-chart-query context="ctx" field-x="geo_year" maxpoints="0" timescale="year"
series-breakdown="variable_label">
<ods-chart-serie expression-y="value" chart-type="column" function-y="SUM" label-y="Nombre de personnes"
color="Paired" display-values="false" scientific-display="true">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
</div>
</ods-dataset-context>
/* Search Module
========================================================================== */
.search-bar {
display: flex;
align-items: stretch;
border-bottom: 1px solid #dee5ef;
margin-bottom: 20px;
transition: all .2s;
}
.search-bar:hover,
.search-bar:focus-within {
border-bottom-color: var(--links);
}
.search-bar-icon {
color: #898d92;
margin-right: 8px;
align-self: center;
}
.search-bar-input {
background-color: transparent;
width: 100%;
outline: none;
border: none;
padding: 12px 0;
transition: all .2s;
color: var(--text);
}
.search-bar-input::placeholder {
transition: all .2s;
}
.search-bar-clear {
color: #898d92;
font-size: 1rem;
background: transparent;
border: none;
margin: 0;
outline: none;
padding: 0 0 0 12px;
transition: all .2s;
}
.search-bar-clear:hover {
opacity: .65;
}
.search-bar:hover .search-bar-icon,
.search-bar:focus-within .search-bar-icon,
.search-bar:hover .search-bar-input::placeholder,
.search-bar:focus-within .search-bar-input::placeholder {
color: var(--links)
}
/* Results bloc */
.search-results {
min-height: 50px;
}
/* Display results */
.display-tags {
display: flex;
flex-wrap: wrap;
margin: 20px 10px;
padding: 0;
}
.display-tags li {
list-style: none;
}
.display-tags div {
align-items: center;
background-color: #f5f5f5;
border-radius: 4px;
color: #4a4a4a;
display: inline-flex;
font-size: 0.85rem;
justify-content: center;
line-height: 1.5;
padding: 0.25em .75em;
white-space: nowrap;
margin: 0.2rem;
text-decoration: none;
}
.display-tags div i {
margin-left: 6px;
}
.display-tags div:focus, .display-tags div:hover {
border-color: #4a4a4a;
background-color: #d0d0d0;
}
.more-than-ten {
display: flex;
align-items: center;
color: #4a4a4a;
padding: 2px 5px;
}
/* Selection, display and clear */
.search-selection {
display: flex;
align-items: baseline;
justify-content: center;
flex-wrap: wrap;
gap: 20px 10px;
}
.clear-filters-button {
background: none;
border: none;
color: var(--text);
}
.clear-filters-button:hover {
opacity: 0.65;
}
/* Content Card
========================================================================== */
.content-card {
background-color: var(--boxes-background);
border-radius: 4px;
height: 100%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.13);
padding: 26px;
}
.content-card-title {
color: var(--titles);
font-size: 1.2rem;
line-height: 1.5;
font-weight: normal;
margin-top: 0;
margin-bottom: 13px;
max-width: 100%;
}
.content-card-fields dt {
font-size: 0.8rem;
opacity: 0.8;
}
.content-card-fields dd {
margin-left: 0;
}
