PUBLICATION-LIST (LMU Publication Module )
src/app/shared/components/publication-list/templates
Demo Section
Each variation will be presented in the following section.
Readme
publicationList (component)
Description
This blueprint is based on the blueprint of Veams.
Requirements
Veams#5.0.0
Installation
Installation with Veams from local machine
veams install bp absolute/filepath/to/publication-list
Fields
publication-list.hbs
The partial is a wrapWith partial. This means that you can access all properties and hashes via props.
See Mangony Handlebars Helper - wrapWith for detailed instructions.
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.publicationListClasses | String | '' |
Modifier classes for component |
| settings.publicationListContextClass | String | 'default' |
Context class of component |
Content
| Parameter | Type | Description |
|---|---|---|
| content.publicationListField | String | Please add a description! |
SASS
Variables
There are multiple variables which you can change:
| Variable | Value | Description |
|---|---|---|
| $publication-list-my-custom-var | 0px |
Please add a description! |
Modifier Classes
There are modifier classes you can add to c-publication-list:
| Modifier | Description |
|---|---|
| is-modifier | Please add a description! |
Templates
publication-list.hbs
<div class="c-publication-list{{#if settings.publicationListContextClass}}--{{settings.publicationListContextClass}}{{else}}--default{{/if}}{{#if settings.publicationListClasses}} {{settings.publicationListClasses}}{{/if}}"
data-css="c-publication-list"
data-js-module="publication-list">
{{#with content.filterForm}}
<form class="{{settings.formClasses}} {{settings.formJsOptions.classes.loading}}"
action="{{settings.formActionQA}}"
method="{{settings.formMethod}}"
data-js-item="{{settings.formJsItem}}">
{{#each content.fieldsets}}
{{> form__fieldset}}
{{/each}}
<!-- Results Info -->
<div class="publication-list__results-info" data-js-item="js-publication-list-results-info">
<p><span data-js-item="js-publication-list__total-item-count"> </span> {{{settings.formContent.i18n.resultsText}}}</p>
</div>
<!-- Loader -->
<div class="publication-list__results-loader" data-js-item="js-publication-list-results-loader">
<span class="publication-list__results-loader-box is-one"></span>
<span class="publication-list__results-loader-box is-two"></span>
<span class="publication-list__results-loader-box is-three"></span>
</div>
<!-- Template for Results -->
<ul class="publication-list__results-template">
<li class="publication-list__results-item" data-js-item="js-publication-list-results-template">
<div class="publication-list__results-item-text-wrapper">
<p>
<span class="publication-list__results-item-number"></span>
<span class="publication-list__results-item-document"></span>
</p>
<p class="publication-list__results-item-description"></p>
<p class="publication-list__results-item-notice">
<span class="publication-list__results-item-notice-text"></span>:
<span class="publication-list__results-item-notice-date"></span>
</p>
<p class="publication-list__results-item-publication">
<span class="publication-list__results-item-publication-text"></span>:
<span class="publication-list__results-item-publication-date"></span>
</p>
<p class="publication-list__results-item-link">
<a href="" class="publication-list__results-item-link-href"></a>
<span>[</span><span class="publication-list__results-item-link-size"></span><span>]</span>
</p>
</div>
</li>
</ul>
<!-- Results -->
<ul class="publication-list__results" data-js-item="js-publication-list-results">
</ul>
</form>
{{/with}}
</div>
Data File
publication-list.hjson
{
"variations": {
"default": {
"docs": {
"variationName": "Default"
},
"settings": {
"publicationListContextClass": "default",
"publicationListClasses": ""
},
"content": {
"filterForm": {
"settings": {
"formClasses": "c-publication-list--form",
"formContextClass": "filterable-list",
"formJsOptions": {
"classes": {
"loading": "is-loading"
},
"submitOnChange": true
},
"formJsItem": "js-publication-list-filter-form",
"formAction": "//localhost:3000/api/connector/get",
"formActionQA": "//localhost:3000/mocks/connector/getPublicationList.json",
"formMethod": "GET",
"formAjax": true,
"formContent": {
"i18n": {
"loadMore": "Mehr laden",
"noResultsText": "<strong>Es wurden keine Ergebnisse gefunden</strong>",
"resultsText": "<strong>Ergebnisse</strong> (Sortieren nach: <strong><span data-js-item=\"js-publication-list__total-item-tag-name\"></span></strong>)",
"showAll": "Alle anzeigen"
}
},
"resultTemplateContent": {
"category": "News",
"date": "2020-05-21",
"title": "Title Leuchtende Chamäleons",
"description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam...",
"link": ""
},
"loadMoreLabel": "Show More"
},
"content": {
"fieldsets": [
{
"settings": {
"fieldsetClasses": "is-small",
"legendClasses": "is-col-mobile-p-12 is-hidden"
},
"content": {
"legend": "Radio Buttons",
"rows": [
{
"settings": {
"rowClasses": ""
},
"content": {
"cols": [
{
"settings": {
"radioClasses": "is-inline-block is-filternav",
"colClasses": "is-text-align-right",
"inputClasses": "is-radios",
"labelWrapperClasses": "",
"radioWrapperClasses": "",
"legendClasses": "",
"id": "category",
"required": false,
"typeOf": "radio"
},
"content": {
"label": "Sortieren",
"radios": [
{
"settings": {
"wrapperClass": "is-radio-wrapper",
"inputClass": "",
"required": false,
"dataAttr": false,
"id": "sort-number",
"labelClass": "",
"name": "radio-group"
},
"content": {
"label": "Number"
}
},
{
"settings": {
"wrapperClass": "is-radio-wrapper",
"inputClass": "",
"required": false,
"dataAttr": false,
"id": "sort-announcement",
"labelClass": "",
"name": "radio-group"
},
"content": {
"label": "Bekanntmachung"
}
},
{
"settings": {
"wrapperClass": "is-radio-wrapper",
"inputClass": "",
"required": false,
"dataAttr": false,
"id": "sort-dateOfPublication",
"labelClass": "",
"name": "radio-group"
},
"content": {
"label": "Veröffentlichung"
}
},
{
"settings": {
"wrapperClass": "is-radio-wrapper",
"inputClass": "",
"required": false,
"dataAttr": false,
"id": "sort-documentType",
"labelClass": "",
"name": "radio-group"
},
"content": {
"label": "Dokumentart"
}
}
]
}
}
]
}
}
]
}
}
]
}
}
}
}
}
}
Styles
publication-list.scss
/* ===================================================
component: publication-list
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-publication-list"] {
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-publication-list--default {
h2 {
@include headline-h2-styles();
}
p.title-description {
@include content-p-styles();
margin-bottom: 50px;
}
.c-publication-list--form {
position: relative;
min-height: 400px;
&.is-loading {
.publication-list__results-loader {
opacity: 1;
}
.publication-list__results {
height: 0;
opacity: 0;
overflow: hidden;
}
.publication-list__result-error {
height: 0;
opacity: 0;
}
}
&.is-success {
.publication-list__results-loader {
z-index: -1;
opacity: 0;
}
.publication-list__results {
height: auto;
opacity: 1;
}
.publication-list__result-error {
height: 0;
opacity: 0;
}
}
&.is-error {
.filter-course-finder__results-loader {
z-index: -1;
opacity: 0;
}
.filter-course-finder__results {
height: 0;
opacity: 0;
overflow: hidden;
}
.filter-course-finder__result-error {
height: auto;
opacity: 1;
}
}
}
.form__row {
border-bottom: 1px solid $color-gray;
padding-bottom: 2px;
margin-bottom: 25px;
.is-inline-block {
width: 100%;
@include bp($bp-tablet-l) {
width: auto;
}
}
}
.form__radio-input {
@extend %visuallyhidden;
@include hcm() {
border: 1px solid $color-white;
margin: 6px 0 0;
clip: auto;
position: relative;
float: left;
& ~ .form__radio-label {
margin-left: 28px;
padding-left: 0;
width: auto;
display: block;
&::before {
display: none !important;
}
}
}
&:checked {
& ~ .form__radio-label {
&::before {
box-shadow: inset 0 0 0 10px $color-green;
border: 0;
width: 28px;
height: 28px;
}
}
&.a11y-focus-key {
& ~ .form__radio-label {
&::before {
@include pseudo();
border: 2px dashed #800;
}
}
}
}
}
.form__radio-label {
position: relative;
display: inline-block;
padding: 2px 0 5px 42px;
font-family: $font-bold;
color: $color-dark;
font-size: 1.6rem;
line-height: (24/16);
letter-spacing: .3px;
&:hover {
cursor: pointer;
}
&::before {
content: "";
width: 24px;
height: 24px;
display: inline-block;
position: absolute;
top: 0;
left: 0;
background: $color-white;
border-radius: 50%;
border: 2px solid $color-green;
}
}
/*
Labels & Types
----------------------- */
.is-filternav {
// Radio
.form__radio-wrapper,
.form__label-wrapper{
display: block;
float: left;
width: 100%;
@include bp($bp-tablet-l) {
display: inline;
width: auto;
}
}
.form__radio-list {
width: 100%;
margin-left: 0;
margin-bottom: 0;
}
.form__radio-item {
display: inline-block;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
padding-left: 0;
&:before {
content: none;
}
&:last-of-type {
.form__radio-label {
border-right: none;
@include bp($bp-tablet-p) {
padding-right: 0;
}
}
}
//.form__radio-label {
// margin-bottom: 0;
//}
}
.form__radio-legend {
color: $color-dark;
margin-right: 10px;
font-size: 1.7rem;
line-height: (20/17);
letter-spacing: .25px;
margin-bottom: 10px;
display: block;
text-align: left;
@include bp($bp-tablet-p) {
font-size: 1.8rem;
line-height: (21/18);
letter-spacing: .27px;
margin-bottom: 10px;
// text-align: right;
}
@include bp($bp-desktop-l) {
font-size: 2rem;
line-height: (24/20);
letter-spacing: .3px;
}
}
.form__radio-input {
@include hcm() {
@extend %visuallyhidden;
}
&:checked {
& ~ .form__radio-label {
background-color: $color-green;
color: $color-white;
@include bp($bp-tablet-p) {
background-color: transparent;
color: $color-dark;
}
@include print() {
text-decoration: underline;
}
@include hcm() {
text-decoration: underline;
}
}
}
&.a11y-focus-key {
& ~ .form__radio-label {
@include a11y-focus-key();
&::before {
display: none;
}
}
}
}
.form__radio-label {
background-color: $color-light;
font-family: $font-bold;
color: $color-green;
padding: 6px 12px;
font-size: 1.7rem;
line-height: (20/17);
letter-spacing: .25px;
margin-bottom: 5px;
@include bp($bp-tablet-p) {
background-color: transparent;
border-right: 1px solid $color-dark;
font-size: 1.8rem;
padding: 0 20px;
line-height: (21/18);
letter-spacing: .27px;
}
@include bp($bp-desktop-l) {
font-size: 2rem;
line-height: (24/20);
letter-spacing: .3px;
}
&::before {
display: none;
}
}
}
.publication-list__total-item-count {
display: inline-block;
}
.publication-list__results {
@include grid-column(12);
@include bp($bp-tablet-l) {
@include grid-column(10);
@include grid-push-h(1);
}
@include bp($bp-desktop-l) {
@include grid-column(8);
@include grid-push-h(2);
}
}
.publication-list__results-info {
@include headline-h3-styles();
font-family: $font-regular;
font-weight: 400;
padding-bottom: 20px;
p {
font-family: $font-regular;
font-weight: 400;
strong {
font-family: $font-bold;
}
}
}
.publication-list__results-item {
@include clearfix();
display: flex;
width: 100%;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 30px;
padding-bottom: 30px;
padding-left: 0;
border-bottom: 1px solid $color-gray-border;
position: relative;
opacity: 1;
transform: translate3d(0, 0, 0);
transition: opacity 2 * $animation-duration-std $animation-easing-std,
transform 2 * $animation-duration-std $animation-easing-std;
&::before {
content: none;
}
/*
MODIFIERS
----------------------- */
&:last-of-type {
border-bottom: none;
}
&.is-loading {
opacity: 0;
transform: translate3d(0, 50%, 0);
}
}
.publication-list__results-item-text-wrapper {
display: block;
position: relative;
flex: 1 1;
}
.publication-list__results-item-number {
display: inline-block;
color: $color-black;
font-size: 1.5rem;
line-height: (20/15);
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 15px;
font-family: $font-regular;
}
.publication-list__results-item-document {
color: $color-black;
font-family: $font-bold;
font-size: 1.6rem;
line-height: (24/16);
letter-spacing: .3px;
margin-bottom: 12px;
text-decoration: none;
display: inline-block;
&::before {
@include pseudo();
position: relative;
display: inline-block;
vertical-align: middle;
width: 3px;
height: 3px;
background-color: $color-black;
border-radius: 50%;
margin: -3px 7px 0 4px;
}
}
.publication-list__results-item-description {
display: block;
font-size: 1.6rem;
line-height: (24/16);
letter-spacing: .25px;
color: $color-dark;
margin-bottom: 15px;
a {
font-family: $font-bold;
font-weight: 700;
color: $color-green;
text-decoration: none;
transition: color $animation-duration-std $animation-easing-std;
&:focus {
outline: none;
}
&:hover,
&:focus {
color: $color-dark;
}
}
strong {
font-family: $font-bold;
}
}
.publication-list__results-item-notice,
.publication-list__results-item-publication {
display: block;
color: $color-gray;
font-size: 1.5rem;
line-height: (20/15);
font-family: $font-regular;
}
.publication-list__results-item-publication {
margin-bottom: 15px;
}
.publication-list__results-item-link-href {
color: $color-green;
font-family: $font-bold;
font-size: 1.5rem;
line-height: (20/15);
letter-spacing: .3px;
text-decoration: none;
transition: color $animation-duration-std/2 $animation-easing-std;
position: relative;
padding-left: 25px;
@include print() {
padding-left: 0;
}
&:focus {
outline: none;
}
&:hover,
&:focus {
color: $color-dark;
&::before {
@include sprites-icon-download-black();
transform: translateX(5px);
}
}
&::before {
@include pseudo();
@include sprites-icon-download-green100();
position: absolute;
display: inline-block;
top: 1px;
left: 0;
margin-right: 10px;
vertical-align: unset;
transition: transform $animation-duration-std $animation-easing-std;
@include print() {
display: none;
}
}
}
.publication-list__results-item-link span {
color: $color-gray;
display: inline-block;
font-size: 1.3rem;
line-height: (17/13);
line-height: (20/15);
}
.publication-list__tag-template {
display: none;
&+label {
display: none;
}
}
.publication-list__results-template {
display: none;
}
.publication-list__load-more-wrapper {
width: 100%;
height: auto;
display: block;
text-align: center;
position: relative;
clear: both;
opacity: 1;
transform: translate3d(0, 0, 0);
transition: opacity 2 * $animation-duration-std $animation-easing-std,
transform 2 * $animation-duration-std $animation-easing-std;
@include print() {
display: none;
}
&::before {
@include pseudo();
@include centering(v);
position: absolute;
width: 100%;
height: 1px;
border-top: 1px solid $color-gray-light;
margin-top: 1px;
}
&.is-loading {
height: 0;
overflow: hidden;
opacity: 0;
transform: translate3d(0, 50%, 0);
}
}
.publication-list__load-more {
@include reset-btn();
padding: 10px 30px;
min-width: 275px;
display: inline-block;
text-align: center;
background-color: $color-green;
cursor: pointer;
position: relative;
transition: background-color $animation-duration-std
$animation-easing-std;
@include bp($bp-desktop-l) {
padding: 18px 30px;
}
&:focus {
outline: none;
}
&:hover,
&.a11y-focus-key {
background-color: $color-white;
.publication-list__load-more-text {
color: $color-green;
&::before,
&::after {
background-color: $color-green;
}
}
&::before {
opacity: 1;
}
}
&::before {
@include pseudo();
position: absolute;
width: calc(100% - 2px);
height: calc(100% - 2px);
border: 1px solid $color-green;
display: block;
z-index: 2;
top: 0;
left: 0;
opacity: 0;
transition: opacity $animation-duration-std $animation-easing-std;
}
}
.publication-list__load-more-text {
color: $color-white;
font-size: 1.6rem;
line-height: (24/16);
letter-spacing: .3px;
font-family: $font-bold;
display: inline-block;
transition: color $animation-duration-std $animation-easing-std;
position: relative;
padding-left: 25px;
&::before {
@include pseudo();
width: 15px;
height: 3px;
display: block;
background-color: $color-white;
position: absolute;
left: 0;
top: 10px;
transition: background-color $animation-duration-std
$animation-easing-std;
}
&::after {
@include pseudo();
@include centering(v);
width: 3px;
height: 15px;
display: block;
background-color: $color-white;
position: absolute;
top: 11px;
left: 6px;
transition: background-color $animation-duration-std
$animation-easing-std;
}
}
.publication-list__results-loader {
@include centering(h);
position: absolute;
top: 200px;
display: flex;
width: 200px;
flex-direction: row;
background-color: $color-white;
height: 60px;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
transition: opacity $animation-duration-std $animation-easing-std;
z-index: 100;
border: 1px solid $color-green;
}
.publication-list__results-loader-box {
display: block;
margin: 10px;
border: 1em solid $color-green;
opacity: 0;
/*
MODIFIERS
----------------------- */
&.is-one {
animation: boxAppear 2s linear infinite;
}
&.is-two {
animation: boxAppear 2s linear .3s infinite;
}
&.is-three {
animation: boxAppear 2s linear .62s infinite;
}
}
// LOAD MORE LOADER
.publication-list__load-more-loader {
@include centering(hv);
position: absolute;
display: flex;
flex-direction: row;
background-color: $color-green;
z-index: 2;
width: calc(100% - 2px);
height: 100%;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
transition: opacity $animation-duration-std $animation-easing-std;
&.is-loading {
opacity: 1;
}
}
.publication-list__load-more-loader-box {
display: block;
margin: 10px;
border: 1em solid $color-white;
opacity: 0;
/*
MODIFIERS
----------------------- */
&.is-one {
animation: boxAppear 2s linear infinite;
}
&.is-two {
animation: boxAppear 2s linear .3s infinite;
}
&.is-three {
animation: boxAppear 2s linear .62s infinite;
}
}
}
Scripts
publication-list.js
/**
* Description of PublicationList.
* Class properties and decorators are supported.
*
* @module PublicationList
* @version v1.0.0
*
* @author your_name
*/
// Imports
import $ from 'jquery';
import Component from '@veams/component';
class PublicationList extends Component {
/**
* Class Properties
*/
$el = $(this.el);
$filterForm = $(this.options.selectors.filterForm, this.el);
$lang = document.getElementsByTagName("HTML")[0].getAttribute("lang") ? document.getElementsByTagName("HTML")[0].getAttribute("lang").toUpperCase() : 'DE';
$data = '';
$totalResults = 0;
$lastResult = 0;
$counterResults = 1;
$resultTemplate = document.querySelector(this.options.selectors.resultTemplate);
$currentDate = new Date();
$arrayForPrint = [];
/**
* Constructor for our class
*
* @see module.js
*
* @param {Object} obj - Object which is passed to our class
* @param {Object} obj.el - element which will be saved in this.el
* @param {Object} obj.options - options which will be passed in as JSON object
*/
constructor(obj) {
let options = {
selectors: {
filterForm: '[data-js-item="js-publication-list-filter-form"]',
resultTemplate: '[data-js-item="js-publication-list-results-template"]',
resultsList: '[data-js-item="js-publication-list-results"]',
totalResults: '[data-js-item="js-publication-list__total-item-count"]',
tagName: '[data-js-item="js-publication-list__total-item-tag-name"]',
btnLoadMore: '[data-js-item="js-publication-list-load-more-btn"]',
resultsLoader: '[data-js-item="js-publication-list-results-loader"]',
loadMoreLoader: '.publication-list__load-more-loader',
},
classes: {
isSuccess: 'is-success',
isError: 'is-error',
isLoading: 'is-loading'
}
};
super(obj, options);
}
/**
* Lifecycle Hooks
*/
willMount() {
console.log('Component PublicationList will mount!');
}
didMount() {
console.log('Component PublicationList mounted!');
}
bindEvents() {
this.options.filterForm = document.querySelector(
this.options.selectors.filterForm
);
this.options.resultsList = this.options.filterForm.querySelector(
this.options.selectors.resultsList
);
this.options.tagName = this.options.filterForm.querySelector(
this.options.selectors.tagName
);
this.getAndFillMyResults();
}
/**
* @desc Get data from JSON and fill in function initializationForm
*/
getAndFillMyResults() {
const uri = this.$filterForm[0].action;
if (uri) {
this.getJSON(uri, (data) => {
const results = data;
if (typeof results !== 'undefined') this.initializationForm(results);
});
}
}
/**
* @desc Data initialization
* @param {String} data - Results from JSON file
*/
initializationForm(data) {
this.$data = data;
// Print Results List
this.populateResults(true);
}
/**
* @desc Checking is the first iteration or not
* @param {Boolean} firstIteration - Status of first iteration: yes (true) or no (false)
*/
populateResults(firstIteration) {
// Fill from URL
const urlOptions = decodeURI(window.location.href.split('?')[1]).split('&');
let keyFromUrl = '';
if (urlOptions[0] !== 'undefined') {
urlOptions.forEach((key) => {
const option = key.split('=');
const element = this.options.filterForm.querySelector(`input[value="${option[1]}"]`);
if (option[0] === 'sortIdentifier') {
keyFromUrl = option[1];
if (this.options.tagName) {
this.options.tagName.innerHTML = element.parentElement.lastElementChild.innerHTML;
}
}
if (element) {
element.checked = true;
}
});
} else {
const element = this.options.filterForm.querySelector("#sort-number");
element.checked = true;
if (this.options.tagName) {
this.options.tagName.innerHTML = element.parentElement.lastElementChild.innerHTML;
}
}
// Removal of unpublished publications
this.objectOrArrayToArray(this.$data[this.$lang]).forEach((item) => {
if (item.dateOfPublication.millliseconds < this.$currentDate.getTime()) {
this.$arrayForPrint.push(item);
}
});
let arrayForPrint = this.sortArray(this.$arrayForPrint, keyFromUrl);
this.objectOrArrayToArray(arrayForPrint).forEach((item, index) => {
this.createResultItem(item, index, firstIteration);
});
this.options.filterForm.querySelector(this.options.selectors.totalResults).innerHTML = this.$totalResults;
this.clickOnFilterTag();
this.loadingProcess();
}
/**
* @desc Creating a single result
* @param {String} item - Result
* @param {Number} index - Index of item
* @param {Boolean} firstIteration - Status of first iteration: yes (true) or no (false)
*/
createResultItem(item, index, firstIteration) {
const result = this.$resultTemplate.cloneNode(true);
result.removeAttribute('data-js-item');
result.classList.remove('publication-list__results-template');
result.classList.add(this.options.classes.isLoading);
result.querySelector('.publication-list__results-item-number').innerHTML = this.arrayToString(item.number);
result.querySelector('.publication-list__results-item-document').innerHTML = this.arrayToString(item.documentType.value);
result.querySelector('.publication-list__results-item-description').innerHTML = this.arrayToString(item.description);
result.querySelector('.publication-list__results-item-notice-text').innerHTML = this.arrayToString(item.announcement.label);
result.querySelector('.publication-list__results-item-notice-date').innerHTML = this.arrayToString(item.announcement.date);
result.querySelector('.publication-list__results-item-publication-text').innerHTML = this.arrayToString(item.dateOfPublication.label);
result.querySelector('.publication-list__results-item-publication-date').innerHTML = this.arrayToString(item.dateOfPublication.date);
result.querySelector('.publication-list__results-item-link-href').innerHTML = this.arrayToString(item.pdf.text);
result.querySelector('.publication-list__results-item-link-size').innerHTML = this.arrayToString(item.pdf.size);
result.querySelector('.publication-list__results-item-link-href').setAttribute('href', item.pdf.href);
this.options.resultsList.appendChild(result);
this.$lastResult = index;
this.$counterResults += 1;
firstIteration ? this.$totalResults += 1 : '';
}
/**
* @desc Filter Tag click-related processes
*/
clickOnFilterTag() {
this.options.filterLabel = [].slice.call(
this.options.filterForm.querySelectorAll('label')
);
this.options.filterLabel.forEach((label) => {
label.addEventListener('click', (ev) => {
this.el.querySelector('form').classList.remove(this.options.classes.isSuccess);
this.el.querySelector('form').classList.add(this.options.classes.isLoading);
this.$counterResults = 1;
this.$totalResults = 0;
this.$lastResult = 0;
// Empty
this.options.resultsList.innerHTML = '';
let arrayForPrint = this.sortArray(this.$arrayForPrint, label.parentElement.firstElementChild.value);
this.objectOrArrayToArray(arrayForPrint).forEach((item, index) => {
this.createResultItem(item, index, true);
});
if (this.options.tagName) {
this.options.tagName.innerHTML = ev.target.innerHTML;
}
let output = `sortIdentifier=${label.parentElement.firstElementChild.value}`;
history.pushState(output, 'Search history', `${window.location.href.split('?')[0]}?${output}`);
this.options.filterForm.querySelector(this.options.selectors.totalResults).innerHTML = this.$totalResults;
this.loadingProcess();
});
});
}
/**
* @desc Processes related to data loading
*/
loadingProcess() {
setTimeout(() => {
const liElements = [].slice.call(this.options.resultsList.querySelectorAll('li'));
liElements.forEach((item) => {
item.classList.remove(this.options.classes.isLoading);
});
this.el.querySelector('form').classList.remove(this.options.classes.isLoading);
this.el.querySelector('form').classList.add(this.options.classes.isSuccess);
}, 250);
}
/**
* @desc Convert Array to String
* @param {Array} item - Array
* @return {String} - String
*
*/
arrayToString = (item) => {
item = item ? item.toString() : '';
return item;
}
sortArray(array, label) {
let result;
let sortBy = label.substring(5, label.length);
if (sortBy === 'announcement' || sortBy === 'dateOfPublication') {
result = array.sort(function (a, b) {
let dateA = new Date(a[sortBy].millliseconds), dateB = new Date(b[sortBy].millliseconds);
return dateB - dateA;
});
} else if (sortBy === 'number') {
result = array.sort(function (a, b) {
return b[sortBy] - a[sortBy];
})
} else if (sortBy === 'documentType') {
result = array.sort(function(a, b) {
let titleA = a[sortBy].value.toLowerCase(), titleB = b[sortBy].value.toLowerCase();
if (titleA < titleB) return -1;
if (titleA > titleB) return 1;
return 0;
});
} else {
result = array;
}
return result;
}
formatDate(date) {
return new Date(date).toLocaleString(`${this.$lang.toLowerCase()}-${this.$lang}`, {
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
}
/**
* @desc JSON request
* @param {Object} url - Link to JSON file
* @param {Object} callback - For results
* @param {Object} requestHeader - For request with Header like user, pass, type...
* @return {callback} - Return callback
*
*/
getJSON = (url, callback, requestHeader) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
if (requestHeader) {
requestHeader.forEach((element) => {
xhr.setRequestHeader(element.name, element.value);
});
}
xhr.onload = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
const res = xhr.responseText;
callback(JSON.parse(res));
} else {
console.error(xhr.statusText);
}
};
xhr.send(null);
};
/**
* @desc Convert Object or Array to Array
* @param {Object} item - Object or Array
* @return {Array} - Array
*
*/
objectOrArrayToArray = (item) => {
if (typeof item === 'undefined' || Array.isArray(item)) {
return item;
}
return [item];
};
/**
* Render class
*/
render() {
return this;
}
}
export default PublicationList;
HTML Output
Default
<div class="c-publication-list--default" data-css="c-publication-list" data-js-module="publication-list">
<form class="c-publication-list--form is-loading" action="//localhost:3000/mocks/connector/getPublicationList.json" method="GET" data-js-item="js-publication-list-filter-form">
<fieldset class="form__fieldset is-small">
<legend class="form__legend is-col-mobile-p-12 is-hidden">
Radio Buttons </legend>
<div class="form__row">
<div class="form__col is-text-align-right">
<div class="form__radio is-inline-block is-filternav">
<div class="form__label-wrapper">
<strong class="form__radio-legend">Sortieren</strong>
</div>
<div class="form__radio-wrapper">
<ul class="form__radio-list">
<li class="form__radio-item">
<input id="sort-number" name="radio-group" type="radio" value="sort-number" class="form__radio-input" />
<label role="button" for="sort-number" class="form__radio-label">
Number
</label>
</li>
<li class="form__radio-item">
<input id="sort-announcement" name="radio-group" type="radio" value="sort-announcement" class="form__radio-input" />
<label role="button" for="sort-announcement" class="form__radio-label">
Bekanntmachung
</label>
</li>
<li class="form__radio-item">
<input id="sort-dateOfPublication" name="radio-group" type="radio" value="sort-dateOfPublication" class="form__radio-input" />
<label role="button" for="sort-dateOfPublication" class="form__radio-label">
Veröffentlichung
</label>
</li>
<li class="form__radio-item">
<input id="sort-documentType" name="radio-group" type="radio" value="sort-documentType" class="form__radio-input" />
<label role="button" for="sort-documentType" class="form__radio-label">
Dokumentart
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</fieldset>
<!-- Results Info -->
<div class="publication-list__results-info" data-js-item="js-publication-list-results-info">
<p><span data-js-item="js-publication-list__total-item-count"> </span> <strong>Ergebnisse</strong> (Sortieren nach: <strong><span data-js-item="js-publication-list__total-item-tag-name"></span></strong>)</p>
</div>
<!-- Loader -->
<div class="publication-list__results-loader" data-js-item="js-publication-list-results-loader">
<span class="publication-list__results-loader-box is-one"></span>
<span class="publication-list__results-loader-box is-two"></span>
<span class="publication-list__results-loader-box is-three"></span>
</div>
<!-- Template for Results -->
<ul class="publication-list__results-template">
<li class="publication-list__results-item" data-js-item="js-publication-list-results-template">
<div class="publication-list__results-item-text-wrapper">
<p>
<span class="publication-list__results-item-number"></span>
<span class="publication-list__results-item-document"></span>
</p>
<p class="publication-list__results-item-description"></p>
<p class="publication-list__results-item-notice">
<span class="publication-list__results-item-notice-text"></span>:
<span class="publication-list__results-item-notice-date"></span>
</p>
<p class="publication-list__results-item-publication">
<span class="publication-list__results-item-publication-text"></span>:
<span class="publication-list__results-item-publication-date"></span>
</p>
<p class="publication-list__results-item-link">
<a href="" class="publication-list__results-item-link-href"></a>
<span>[</span><span class="publication-list__results-item-link-size"></span><span>]</span>
</p>
</div>
</li>
</ul>
<!-- Results -->
<ul class="publication-list__results" data-js-item="js-publication-list-results">
</ul>
</form>
</div>