@teipublisher/pb-components
Version:
Collection of webcomponents underlying TEI Publisher
236 lines (186 loc) • 6.72 kB
HTML
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"/>
<title>pb-link Demo</title>
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script><script type="module" src="../pb-components-bundle.js"></script>
<style>
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap);
html {
font-family: Montserrat, Verdana, sans-serif;
}
</style>
</head>
<body>
<pb-demo-snippet>
<template>
<style>
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@100);
html {
font-family: Montserrat, Verdana, sans-serif;
}
h1 {
text-align: center;
}
header {
border-bottom: thin solid;
padding-bottom: 2rem;
background: #d1dae0;
padding:5rem;
}
.formRow {
display: grid;
grid-template-columns: 40% 60%;
width: 100%;
padding-bottom:0.3rem;
}
ul {
flex: 1 0;
display: block;
margin-right: 10px;
padding-right: 10px;
border-right: 1px solid #333333;
}
pb-view {
height: 70vh;
overflow: auto;
flex: 3 0;
}
pb-link a {
color: #333333;
text-decoration: none;
}
section.inputs label {
white-space: nowrap;
}
.formRow {
display: grid;
grid-template-columns:50% 50%;
font-size:0.7rem;
}
.formRow label{
justify-self:flex-end;
padding-right:1rem;
}
.formRow select, .formRow input{
max-width:140px;
width:140px;
border:none;
padding:0;
background:rgba(255,255,255,0.8);
}
#pattern {
width:inherit;
max-width: 400px;
margin: 0 auto;
font-size: 1.1rem;
font-weight:400;
padding: 0.3rem 0.5rem 0.3rem 2rem;
border-radius: 1.1rem;
border: none
}
pb-blacklab-results{
padding:3rem;
max-width:100%;
}
.search, .search input {
font-size: 1.2rem;
text-align: center;
}
.searchwrapper {
width: 100%;
text-align: center;
margin-bottom: 1rem;
}
#perpage {
text-align: center;
width: 3rem;
} </style>
<header>
<h1>Blacklab KWIC search</h1>
<div class="searchwrapper">
<input id="pattern" name="pattern" type="search"/>
</div>
<div class="formRow">
<label for="doc">Filter</label>
<input id="doc" name="doc"/>
</div>
<div class="formRow">
<label for="sort">Sort by</label>
<select name="sort" id="sort" size="1">
<option>title</option>
<option>author</option>
<option>numHits</option>
</select>
</div>
<div class="formRow perpage">
<label for="perpage">Results per Page</label>
<input id="perpage" name="perpage" type="number" value="5"/>
</div>
</header>
<!--
<section class="inputs">
<div class="formRow search">
</div>
<div class="formRow">
<label for="sort">Sort by</label>
<select name="sort" id="sort" size="1">
<option>title</option>
<option>author</option>
<option>numHits</option>
</select>
</div>
<div class="formRow">
<label for="doc">filter:</label>
<input id="doc" name="doc">
</div>
<div class="formRow">
<label for="perpage">Results per Page:</label>
<input id="perpage" name="perpage" type="number" value="5">
</div>
</section>
-->
<pb-page endpoint="https://teipublisher.com/exist/apps/tei-publisher" api-version="1.0.0">
<main>
<pb-blacklab-results per-page="5" pattern='[word="love"][word="by"]' path="data"></pb-blacklab-results>
</main>
</pb-page>
</template>
</pb-demo-snippet>
</body>
<script>
(function () {
document.addEventListener('pb-page-ready', () => {
const kwic = document.querySelector('pb-blacklab-results');
const pat = '[word="love"][word="by"]';
kwic.pattern = pat;
const pattern = document.querySelector('#pattern');
pattern.value = kwic.pattern;
document.querySelector('#doc').addEventListener('blur', (e) => {
kwic.doc = e.target.value;
kwic.load();
});
document.querySelector('#sort').addEventListener('change',(e) => {
kwic.sort = e.target.value;
kwic.load();
});
document.querySelector('#pattern').addEventListener('keyup', (e) => {
if(e.keyCode === 13){
localStorage.setItem('kwic-pattern', e.target.value);
kwic.pattern = e.target.value;
kwic.load();
}
});
document.querySelector('#pattern').addEventListener('blur', (e) => {
localStorage.setItem('kwic-pattern', e.target.value);
kwic.pattern = e.target.value;
kwic.load();
});
document.querySelector('#perpage').addEventListener('blur', (e) => {
kwic.perPage = e.target.value;
kwic.load();
});
});
})();
</script>
</html>