[mod] cleanup
This commit is contained in:
parent
af2fac39b2
commit
dd7b0c1d83
22 changed files with 72 additions and 875 deletions
1
src/lib/.xqdoca
Normal file
1
src/lib/.xqdoca
Normal file
|
|
@ -0,0 +1 @@
|
|||
<xqdoca xmlns="urn:quodatum:xqdoca" version="1.0"><source>.</source><target>xqdoca/</target></xqdoca>
|
||||
|
|
@ -244,12 +244,14 @@ as map(*){
|
|||
)=>map:merge()
|
||||
};
|
||||
|
||||
(:~ page (ZERO based) as image
|
||||
@param $scale 1=72 dpi :)
|
||||
declare function pdfbox:pageAsImage($doc as item(), $pageNo as xs:integer,$scale as xs:float)
|
||||
(:~ java:bufferedImage for $pageNo using $scale times dpi= 72
|
||||
@param $pageNo (ZERO based)
|
||||
@param $scale 1=72 dpi
|
||||
@return Java java.awt.image.BufferedImage object
|
||||
:)
|
||||
declare function pdfbox:pageBufferedImage($doc as item(), $pageNo as xs:integer,$scale as xs:float)
|
||||
as item(){
|
||||
PDFRenderer:new($doc)
|
||||
=>PDFRenderer:renderImage($pageNo,$scale)
|
||||
PDFRenderer:new($doc)=>PDFRenderer:renderImage($pageNo,$scale)
|
||||
};
|
||||
|
||||
(:~ save bufferedimage to $dest
|
||||
|
|
@ -258,3 +260,13 @@ declare function pdfbox:imageSave($bufferedImage as item(),$dest as xs:string,$t
|
|||
as xs:boolean{
|
||||
Q{java:javax.imageio.ImageIO}write($bufferedImage , $type, File:new($dest))
|
||||
};
|
||||
|
||||
(:~ return image
|
||||
@param $type = "gif","png" etc:)
|
||||
declare function pdfbox:imageBinary($bufferedImage as item(),$type as xs:string)
|
||||
as xs:base64Binary{
|
||||
let $bytes:=Q{java:java.io.ByteArrayOutputStream}new()
|
||||
let $_:=Q{java:javax.imageio.ImageIO}write($bufferedImage , $type, $bytes)
|
||||
return Q{java:java.io.ByteArrayOutputStream}toByteArray($bytes)
|
||||
=>convert:integers-to-base64()
|
||||
};
|
||||
|
|
@ -5,26 +5,26 @@ pdfscrape:page-report($doc )=>pdfscrape:inverted-map()
|
|||
module namespace pdfscrape = 'urn:pdfscrape';
|
||||
import module namespace pdfbox="urn:expkg-zone58:pdfbox3" at "pdfbox3.xqm";
|
||||
|
||||
(: look for possible page number in first/last line of page text
|
||||
(:~ page number regex
|
||||
@todo last line and roman
|
||||
1=Number system ( D=decimal, R=Roman)
|
||||
2=Side L=left,R=right
|
||||
:)
|
||||
declare variable $pdfscrape:pats:=map{
|
||||
declare %private variable $pdfscrape:pats:=map{
|
||||
"DL": "^([1-9][0-9]*).*",
|
||||
"DR": ".*[^0-9]([1-9][0-9]*)$",
|
||||
"RL": "^([ivxlc]+).*",
|
||||
"RR": ".*[^ivxlc]([ivxlc]+)$"
|
||||
};
|
||||
|
||||
(: page-reports for all pages :)
|
||||
(:~ page-reports for all pages :)
|
||||
declare function pdfscrape:page-report($doc as item())
|
||||
as element(page)*{
|
||||
let $count:=pdfbox:page-count($doc)=>trace("Pages: ")
|
||||
return (1 to $count )!pdfscrape:page-report($doc,.)
|
||||
};
|
||||
|
||||
(: page-report for given page :)
|
||||
(:~ page-report for given page :)
|
||||
declare function pdfscrape:page-report($doc as item(), $page as xs:integer)
|
||||
as element(page){
|
||||
let $txt:=pdfbox:getText($doc,$page)
|
||||
|
|
@ -35,7 +35,7 @@ as element(page){
|
|||
return <page index="{ $page }">{ $found, $line1 }</page>
|
||||
};
|
||||
|
||||
(: empty or attributes created by matching $style with $line1 :)
|
||||
(:~ empty or attributes created by matching $style with $line1 :)
|
||||
declare function pdfscrape:line-report($style as xs:string, $line1 as xs:string)
|
||||
as attribute(*)*{
|
||||
if(matches($line1,$pdfscrape:pats?($style)))
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
(:~
|
||||
pdf
|
||||
:)
|
||||
module namespace api = 'pdf/api';
|
||||
import module namespace functx = "http://www.functx.com";
|
||||
(:~ list slugs :)
|
||||
declare
|
||||
%rest:path('/pdf/api/sources')
|
||||
%output:method("json")
|
||||
%output:json("format=xquery")
|
||||
function api:apt() as map(*)
|
||||
{
|
||||
let $base:="C:/Users/mrwhe/git/expkg-zone58/pdfbox/data/"
|
||||
let $d:="1e/"
|
||||
let $f:=file:list($base || $d,true(),"*.pdf")[not(contains(.,"\outputs\"))]
|
||||
return map{
|
||||
"count": count($f),
|
||||
"items": array{$f!api:path-info(.)}
|
||||
}
|
||||
};
|
||||
|
||||
declare function api:path-info($file as xs:string)
|
||||
as map(*)
|
||||
{
|
||||
map{
|
||||
"id": $file,
|
||||
"slug":functx:substring-before-last($file,"\"),
|
||||
"filename": file:name($file)
|
||||
}
|
||||
};
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
(:~
|
||||
pdf
|
||||
:)
|
||||
module namespace pdf = 'pdf/common';
|
||||
|
||||
|
||||
|
||||
(:~
|
||||
: Redirects to the start page.
|
||||
: @return redirection
|
||||
:)
|
||||
declare
|
||||
%rest:path('/pdf')
|
||||
function pdf:home() as element() {
|
||||
web:forward('/pdf/static/index.html')
|
||||
};
|
||||
declare
|
||||
%rest:path('/pdf/{$file=.+}')
|
||||
function pdf:spa($file)as element(){
|
||||
pdf:home()
|
||||
};
|
||||
|
||||
(:~
|
||||
: Returns a file.
|
||||
: @param $file file or unknown path
|
||||
: @return rest binary data
|
||||
:)
|
||||
declare
|
||||
%rest:path('/pdf/static/{$file=.+}')
|
||||
%output:method('basex')
|
||||
%perm:allow('public')
|
||||
function pdf:file(
|
||||
$file as xs:string
|
||||
) as item()+ {
|
||||
let $path := file:base-dir() || "static/" || $file
|
||||
return if(file:exists($path))
|
||||
then (
|
||||
web:response-header(
|
||||
map { 'media-type': web:content-type($path) },
|
||||
map { 'Cache-Control': 'max-age=3600,public', 'Content-Length': file:size($path) }
|
||||
),
|
||||
file:read-binary($path)
|
||||
)else
|
||||
()
|
||||
|
||||
};
|
||||
|
||||
164
src/webapp/pdf/package-lock.json
generated
164
src/webapp/pdf/package-lock.json
generated
|
|
@ -1,164 +0,0 @@
|
|||
{
|
||||
"name": "pdf",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"@shoelace-style/shoelace": "^2.15.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@ctrl/tinycolor": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-4.0.3.tgz",
|
||||
"integrity": "sha512-e9nEVehVJwkymQpkGhdSNzLT2Lr9UTTby+JePq4Z2SxBbOQjY7pLgSouAaXvfaGQVSAaY0U4eJdwfSDmCbItcw==",
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/core": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
|
||||
"integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
|
||||
"dependencies": {
|
||||
"@floating-ui/utils": "^0.2.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/dom": {
|
||||
"version": "1.6.3",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
|
||||
"integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
|
||||
"dependencies": {
|
||||
"@floating-ui/core": "^1.0.0",
|
||||
"@floating-ui/utils": "^0.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/utils": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
|
||||
"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
|
||||
},
|
||||
"node_modules/@lit-labs/ssr-dom-shim": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz",
|
||||
"integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g=="
|
||||
},
|
||||
"node_modules/@lit/react": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.4.tgz",
|
||||
"integrity": "sha512-6HBvk3AwF46z17fTkZp5F7/EdCJW9xqqQgYKr3sQGgoEJv0TKV1voWydG4UQQA2RWkoD4SHjy08snSpzyoyd0w==",
|
||||
"peerDependencies": {
|
||||
"@types/react": "17 || 18"
|
||||
}
|
||||
},
|
||||
"node_modules/@lit/reactive-element": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz",
|
||||
"integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==",
|
||||
"dependencies": {
|
||||
"@lit-labs/ssr-dom-shim": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@shoelace-style/animations": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@shoelace-style/animations/-/animations-1.1.0.tgz",
|
||||
"integrity": "sha512-Be+cahtZyI2dPKRm8EZSx3YJQ+jLvEcn3xzRP7tM4tqBnvd/eW/64Xh0iOf0t2w5P8iJKfdBbpVNE9naCaOf2g==",
|
||||
"funding": {
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/claviska"
|
||||
}
|
||||
},
|
||||
"node_modules/@shoelace-style/localize": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@shoelace-style/localize/-/localize-3.1.2.tgz",
|
||||
"integrity": "sha512-Hf45HeO+vdQblabpyZOTxJ4ZeZsmIUYXXPmoYrrR4OJ5OKxL+bhMz5mK8JXgl7HsoEowfz7+e248UGi861de9Q=="
|
||||
},
|
||||
"node_modules/@shoelace-style/shoelace": {
|
||||
"version": "2.15.0",
|
||||
"resolved": "https://registry.npmjs.org/@shoelace-style/shoelace/-/shoelace-2.15.0.tgz",
|
||||
"integrity": "sha512-Lcg938Y8U2VsHqIYewzlt+H1rbrXC4GRSUkTJgXyF8/0YAOlI+srd5OSfIw+/LYmwLP2Peyh398Kae/6tg4PDA==",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^4.0.2",
|
||||
"@floating-ui/dom": "^1.5.3",
|
||||
"@lit/react": "^1.0.0",
|
||||
"@shoelace-style/animations": "^1.1.0",
|
||||
"@shoelace-style/localize": "^3.1.2",
|
||||
"composed-offset-position": "^0.0.4",
|
||||
"lit": "^3.0.0",
|
||||
"qr-creator": "^1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.17.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/claviska"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/prop-types": {
|
||||
"version": "15.7.12",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
|
||||
"integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "18.2.74",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.74.tgz",
|
||||
"integrity": "sha512-9AEqNZZyBx8OdZpxzQlaFEVCSFUM2YXJH46yPOiOpm078k6ZLOCcuAzGum/zK8YBwY+dbahVNbHrbgrAwIRlqw==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/prop-types": "*",
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/trusted-types": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
|
||||
"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
|
||||
},
|
||||
"node_modules/composed-offset-position": {
|
||||
"version": "0.0.4",
|
||||
"resolved": "https://registry.npmjs.org/composed-offset-position/-/composed-offset-position-0.0.4.tgz",
|
||||
"integrity": "sha512-vMlvu1RuNegVE0YsCDSV/X4X10j56mq7PCIyOKK74FxkXzGLwhOUmdkJLSdOBOMwWycobGUMgft2lp+YgTe8hw=="
|
||||
},
|
||||
"node_modules/csstype": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/lit": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/lit/-/lit-3.1.2.tgz",
|
||||
"integrity": "sha512-VZx5iAyMtX7CV4K8iTLdCkMaYZ7ipjJZ0JcSdJ0zIdGxxyurjIn7yuuSxNBD7QmjvcNJwr0JS4cAdAtsy7gZ6w==",
|
||||
"dependencies": {
|
||||
"@lit/reactive-element": "^2.0.4",
|
||||
"lit-element": "^4.0.4",
|
||||
"lit-html": "^3.1.2"
|
||||
}
|
||||
},
|
||||
"node_modules/lit-element": {
|
||||
"version": "4.0.4",
|
||||
"resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.4.tgz",
|
||||
"integrity": "sha512-98CvgulX6eCPs6TyAIQoJZBCQPo80rgXR+dVBs61cstJXqtI+USQZAbA4gFHh6L/mxBx9MrgPLHLsUgDUHAcCQ==",
|
||||
"dependencies": {
|
||||
"@lit-labs/ssr-dom-shim": "^1.2.0",
|
||||
"@lit/reactive-element": "^2.0.4",
|
||||
"lit-html": "^3.1.2"
|
||||
}
|
||||
},
|
||||
"node_modules/lit-html": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.2.tgz",
|
||||
"integrity": "sha512-3OBZSUrPnAHoKJ9AMjRL/m01YJxQMf+TMHanNtTHG68ubjnZxK0RFl102DPzsw4mWnHibfZIBJm3LWCZ/LmMvg==",
|
||||
"dependencies": {
|
||||
"@types/trusted-types": "^2.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/qr-creator": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/qr-creator/-/qr-creator-1.0.0.tgz",
|
||||
"integrity": "sha512-C0cqfbS1P5hfqN4NhsYsUXePlk9BO+a45bAQ3xLYjBL3bOIFzoVEjs79Fado9u9BPBD3buHi3+vY+C8tHh4qMQ=="
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"@shoelace-style/shoelace": "^2.15.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
Uses
|
||||
* https://github.com/blikblum/slick-router#readme
|
||||
* https://dev.to/blikblum/slick-router-a-powerful-router-for-web-components-3fck
|
||||
|
||||
## Sync
|
||||
```
|
||||
cd C:\Users\mrwhe\git\expkg-zone58\pdfbox\src\webapp\pdf
|
||||
|
||||
c:\DeltaCopy\rsync -rlptz --progress --exclude=.git --exclude=.vscode . andy@localhost::basexserv/
|
||||
```
|
||||
## random html in markdown
|
||||
<style>table, th, td {
|
||||
border: 1px solid black;
|
||||
border-collapse: collapse;
|
||||
}</style>
|
||||
<table >
|
||||
<caption>Sample table</caption>
|
||||
<tr>
|
||||
<td>Foo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
/* extracted from https://vuejs.org/v2/guide/transitions.html */
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Enter and leave animations can use different */
|
||||
/* durations and timing functions. */
|
||||
.slide-fade-enter-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.slide-fade-leave-active {
|
||||
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
|
||||
}
|
||||
|
||||
.slide-fade-enter, .slide-fade-leave-to {
|
||||
transform: translateX(1000px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.bounce-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.bounce-enter-active {
|
||||
animation: bounce-in 0.8s;
|
||||
}
|
||||
|
||||
.bounce-leave-active {
|
||||
animation: bounce-in 0.8s reverse;
|
||||
}
|
||||
|
||||
@keyframes bounce-in {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
80% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
router-outlet > * {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1,290 +0,0 @@
|
|||
import { withRouterLinks } from 'https://unpkg.com/slick-router@2.5.0/middlewares/router-links.js'
|
||||
|
||||
customElements.define('application-view',
|
||||
class ApplicationView extends withRouterLinks(HTMLElement) {
|
||||
constructor() {
|
||||
super()
|
||||
this.addEventListener('change', e => {
|
||||
if (e.target.matches('#animation-type')) {
|
||||
const animation = e.target.value
|
||||
if (animation) {
|
||||
this.outlet.setAttribute('animation', e.target.value)
|
||||
} else {
|
||||
this.outlet.removeAttribute('animation')
|
||||
}
|
||||
}
|
||||
})
|
||||
this.addEventListener('load', e => {
|
||||
const data = e.detail;
|
||||
notify(JSON.stringify(data.items[0]));
|
||||
}
|
||||
)
|
||||
// Custom function to emit toast notifications
|
||||
function notify(message, variant = 'primary', icon = 'info-circle', duration = 3000) {
|
||||
const alert = Object.assign(document.createElement('sl-alert'), {
|
||||
variant,
|
||||
closable: true,
|
||||
duration: duration,
|
||||
innerHTML: `
|
||||
<sl-icon name="${icon}" slot="icon"></sl-icon>
|
||||
${message}
|
||||
`
|
||||
});
|
||||
|
||||
document.body.append(alert);
|
||||
return alert.toast();
|
||||
}
|
||||
// Always escape HTML for text arguments!
|
||||
function escapeHtml(html) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = html;
|
||||
return div.innerHTML;
|
||||
}
|
||||
this.addEventListener('click', e => {
|
||||
if (e.target.matches('#more-toast')) {
|
||||
const alert = this.querySelector('#toaster')
|
||||
notify(`This is custom toast `);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback()
|
||||
this.innerHTML = `
|
||||
<div class='App'>
|
||||
<div class='App-header'>
|
||||
<h1>Application</h1>
|
||||
<ul class='Nav' routerlinks>
|
||||
<li class='Nav-item'><a route="home" >Home</a></li>
|
||||
<li class='Nav-item'><a route="tweets" >Tweets</a></li>
|
||||
<li class='Nav-item'><a route="messages">Messages</a></li>
|
||||
<li class='Nav-item'><a route="profile.index" param-user="scrobblemuch">Profile</a></li>
|
||||
<li class='Nav-item'><a route="settings" >Settings</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
<router-outlet animation="fade"></router-outlet>
|
||||
|
||||
<div class="App-footer">
|
||||
<div>
|
||||
Animation
|
||||
<select id="animation-type">
|
||||
<option value="">None</option>
|
||||
<option value="fade" selected>Fade</option>
|
||||
<option value="slide-fade">Slide Fade</option>
|
||||
<option value="bounce">Bounce</option>
|
||||
</select>
|
||||
<button id="more-toast">toast</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
`
|
||||
this.outlet = this.querySelector('router-outlet')
|
||||
}
|
||||
}
|
||||
)
|
||||
customElements.define('home-view',
|
||||
class HomeView extends withRouterLinks(HTMLElement) {
|
||||
connectedCallback() {
|
||||
this.getModel();
|
||||
}
|
||||
getModel() {
|
||||
return new Promise((res, rej) => {
|
||||
fetch('/pdf/api/sources')
|
||||
.then(data => data.json())
|
||||
.then((json) => {
|
||||
this.renderPosts(json);
|
||||
res();
|
||||
})
|
||||
.catch((error) => rej(error));
|
||||
})
|
||||
}
|
||||
renderPosts(data) {
|
||||
const count = data.count
|
||||
const shadowRoot = this.attachShadow({ mode: "open" });
|
||||
const div = document.createElement("div", { class: "cards" });
|
||||
shadowRoot.appendChild(div);
|
||||
data.items.forEach(item => {
|
||||
div.appendChild(Object.assign(
|
||||
document.createElement('sl-card'), { class: "card", textContent: item.slug })
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
customElements.define('tweet-view',
|
||||
class TweetView extends withRouterLinks(HTMLElement) {
|
||||
connectedCallback() {
|
||||
super.connectedCallback()
|
||||
this.innerHTML = `
|
||||
<div class='Home' routerlinks>
|
||||
<h2>Tweets</h2>
|
||||
<div class='Tweet'>
|
||||
<div class='Tweet-author'>
|
||||
<a route="profile.index" param-user="dan_abramov">Dan Abramov @dan_abramov</a>
|
||||
</div>
|
||||
<div class='Tweet-time'>12m12 minutes ago</div>
|
||||
<div class='Tweet-content'>Another use case for \`this.context\` I think might be valid: forms. They're too painful right now.</div>
|
||||
</div>
|
||||
<div class='Tweet'>
|
||||
<div class='Tweet-author'>
|
||||
<a route="profile.index" param-user="afanasjevas">Eduardas Afanasjevas @afanasjevas</a>
|
||||
</div>
|
||||
<div class='Tweet-time'>12m12 minutes ago</div>
|
||||
<div class='Tweet-content'>I just published “What will Datasmoothie bring to the analytics startup landscape?” https://medium.com/@afanasjevas/what-will-datasmoothie-bring-to-the-analytics-startup-landscape-f7dab70d75c3?source=tw-81c4e81fe6f8-1427630532296</div>
|
||||
</div>
|
||||
<div class='Tweet'>
|
||||
<div class='Tweet-author'>
|
||||
<a route="profile.index" param-user="LNUGorg">LNUG @LNUGorg</a>
|
||||
</div>
|
||||
<div class='Tweet-time'>52m52 minutes ago</div>
|
||||
<div class='Tweet-content'> new talks uploaded on our YouTube page - check them out http://bit.ly/1yoXSAO</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
)
|
||||
customElements.define('messages-view',
|
||||
class MessagesView extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<div class='Messages'>
|
||||
<h2>Messages</h2>
|
||||
<p>You have no direct messages</p>
|
||||
<sl-tree>
|
||||
<sl-tree-item lazy>Available Trees</sl-tree-item>
|
||||
</sl-tree>
|
||||
|
||||
<script type="module">
|
||||
const lazyItem = document.querySelector('sl-tree-item[lazy]');
|
||||
|
||||
lazyItem.addEventListener('sl-lazy-load', () => {
|
||||
alert("heelo");
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
)
|
||||
customElements.define('settings-view',
|
||||
class SettingsView extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<div class='Messages'>
|
||||
<a href="/pdf/api/sources" target="_blank">DATA</a>
|
||||
<h2>Settings</h2>
|
||||
<div>
|
||||
Animation
|
||||
<select id="animation-type2">
|
||||
<option value="">None</option>
|
||||
<option value="fade" selected>Fade</option>
|
||||
<option value="slide-fade">Slide Fade</option>
|
||||
<option value="bounce">Bounce</option>
|
||||
</select>
|
||||
</div>
|
||||
<sl-alert variant="neutral" duration="3000" closable >
|
||||
<sl-icon slot="icon" name="gear"></sl-icon>
|
||||
<strong>Your settings have been updated</strong><br />
|
||||
Settings will take effect on next login.
|
||||
</sl-alert>
|
||||
<fetch-json src='/pdf/api/sources'/>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
)
|
||||
customElements.define('profile-view',
|
||||
class ProfileView extends HTMLElement {
|
||||
static get outlet() {
|
||||
return '.Container'
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<div class='Profile'>
|
||||
<div class='Container'></div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
customElements.define('profile-index-view',
|
||||
class ProfileIndexView extends HTMLElement {
|
||||
|
||||
connectedCallback() {
|
||||
|
||||
this.innerHTML = `
|
||||
<div class='ProfileIndex'>
|
||||
<h2>${this.$route.params.user} profile</h2>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
)
|
||||
customElements.define('cards-panel',
|
||||
class CardPanel extends HTMLElement {
|
||||
constructor(){
|
||||
super();
|
||||
const template = document.createElement('template');
|
||||
template.id = 'pool-calculator-template';
|
||||
template.innerHTML = `
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<div class="input-section">
|
||||
|
||||
<!-- ... -->
|
||||
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<div class='ProfileIndex'>
|
||||
<h2>${this.$route.params.user} profile</h2>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
)
|
||||
customElements.define('fetch-json',
|
||||
class FetchJson extends HTMLElement {
|
||||
static observedAttributes = ["src", "size"];
|
||||
|
||||
connectedCallback() {
|
||||
this.getModel();
|
||||
}
|
||||
getModel() {
|
||||
const src = this.getAttribute('src')
|
||||
+ "?" + new URLSearchParams({ foo: 'value', bar: 2, });
|
||||
return new Promise((res, rej) => {
|
||||
fetch(src)
|
||||
.then(data => data.json())
|
||||
.then((json) => {
|
||||
this.data=data;
|
||||
this.renderPosts(json);
|
||||
res();
|
||||
})
|
||||
.catch((error) => rej(error));
|
||||
})
|
||||
}
|
||||
renderPosts(data) {
|
||||
this.innerHTML = `<span>${this.getAttribute('src')} : ${data.count}</span>`;
|
||||
|
||||
this.dispatchEvent(new CustomEvent("load", {
|
||||
detail: data,
|
||||
composed: true,
|
||||
bubbles: true
|
||||
}));
|
||||
}
|
||||
}
|
||||
)
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
|
|
@ -1,24 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<base href="/pdf/static/" />
|
||||
<title>PDFS453 </title>
|
||||
|
||||
<link rel="icon" href="favicon.png">
|
||||
<link rel="stylesheet" href="/static/shoelace@2.15.0/cdn/themes/light.css" />
|
||||
|
||||
<script type="module" src="/static/shoelace@2.15.0/cdn/shoelace-autoloader.js"></script>
|
||||
<script type="module" src="/static/shoelace@2.15.0/cdn/components/alert/alert.js"></script>
|
||||
<script type="module" src="index.js"></script>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="animations.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
import { Router } from 'https://unpkg.com/slick-router@2.5.0/slick-router.js?module'
|
||||
import { wc } from 'https://unpkg.com/slick-router@2.5.0/middlewares/wc.js'
|
||||
import { events } from 'https://unpkg.com/slick-router@2.5.0/middlewares/events.js'
|
||||
import { routerLinks } from 'https://unpkg.com/slick-router@2.5.0/middlewares/router-links.js'
|
||||
import { AnimatedOutlet } from 'https://unpkg.com/slick-router@2.5.0/components/animated-outlet.js'
|
||||
|
||||
import './components.js'
|
||||
|
||||
customElements.define('router-outlet', AnimatedOutlet)
|
||||
|
||||
// create the router
|
||||
const router = new Router({
|
||||
pushState: true,
|
||||
|
||||
log: true
|
||||
})
|
||||
|
||||
// provide your route map
|
||||
// in this particular case we configure components by its tag name
|
||||
|
||||
router.map(route => {
|
||||
route('application', { path: '/pdf/',
|
||||
component: 'application-view' }, () => {
|
||||
route('home', { path: '', component: 'home-view' })
|
||||
route('tweets', { component: 'tweet-view' })
|
||||
route('messages', { component: 'messages-view' })
|
||||
route('status', { path: ':user/status/:id' })
|
||||
route('profile', { path: 'profile/:user', component: 'profile-view' }, () => {
|
||||
route('profile.index', { path: '', component: 'profile-index-view' })
|
||||
route('profile.lists')
|
||||
route('profile.edit')
|
||||
})
|
||||
route('settings',{path: 'settings',component:'settings-view'})
|
||||
})
|
||||
})
|
||||
|
||||
// install middleware that will handle transitions
|
||||
router.use(wc)
|
||||
router.use(routerLinks)
|
||||
router.use(events)
|
||||
|
||||
// start listening to browser's location bar changes
|
||||
router.listen()
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
|
||||
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
sl-card {
|
||||
display: flex;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.App {
|
||||
width: 800px;
|
||||
margin: 0 auto 20px auto;
|
||||
}
|
||||
|
||||
.App-header {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.App-header .active {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.App-footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
text-align: center;
|
||||
background-color: bisque;
|
||||
}
|
||||
|
||||
.App h1 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.Nav {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.Nav-item {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.Nav-item a {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.Tweet {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 3px;
|
||||
padding: 10px;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.Tweet:last-child {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.Tweet-author {
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.Tweet-time {
|
||||
color: #888;
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
router-outlet > * {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card-header [slot='header'] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-header h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card-header sl-icon-button {
|
||||
font-size: var(--sl-font-size-medium);
|
||||
}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
customElements.define('summary-display',
|
||||
class extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
const template = document.getElementById('summary-display-template');
|
||||
const templateContent = template.content;
|
||||
|
||||
const shadowRoot = this.attachShadow({mode: 'open'});
|
||||
shadowRoot.appendChild(templateContent.cloneNode(true));
|
||||
|
||||
const items = Array.from(this.querySelectorAll('li'));
|
||||
const descriptions = Array.from(this.querySelectorAll('p'));
|
||||
|
||||
items.forEach(item => {
|
||||
handleClick(item);
|
||||
});
|
||||
|
||||
function handleClick(item) {
|
||||
item.addEventListener('click', function() {
|
||||
items.forEach(item => {
|
||||
item.style.backgroundColor = 'white';
|
||||
});
|
||||
|
||||
descriptions.forEach(description => {
|
||||
updateDisplay(description, item);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function updateDisplay(description, item) {
|
||||
description.removeAttribute('slot');
|
||||
|
||||
if(description.getAttribute('data-name') === item.textContent) {
|
||||
description.setAttribute('slot', 'choice');
|
||||
item.style.backgroundColor = '#bad0e4';
|
||||
}
|
||||
}
|
||||
|
||||
const slots = this.shadowRoot.querySelectorAll('slot');
|
||||
slots[1].addEventListener('slotchange', function(e) {
|
||||
const nodes = slots[1].assignedNodes();
|
||||
console.log(`Element in Slot "${slots[1].name}" changed to "${nodes[0].outerHTML}".`);
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<!doctype html>
|
||||
<script type="module">
|
||||
import { define, store, html } from 'https://esm.sh/hybrids@^8';
|
||||
|
||||
const User = {
|
||||
id: true,
|
||||
res: null,
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
[store.connect]: {
|
||||
get: id => fetch(`http://localhost:8080/pdf/api/sources`)
|
||||
.then(data => data.json())
|
||||
.then(res=> { "43"})
|
||||
},
|
||||
};
|
||||
|
||||
define({
|
||||
tag: "user-details",
|
||||
user: store(User),
|
||||
render: ({ user }) => html`
|
||||
<div>
|
||||
${store.pending(user) && `Loading...`}
|
||||
${store.error(user) && `Something went wrong...`}
|
||||
|
||||
${store.ready(user) && html`
|
||||
<p>${user.id} ${user.lastName}</p>
|
||||
`}
|
||||
</div>
|
||||
`,
|
||||
});
|
||||
</script>
|
||||
<user-details user="2"></user-details>
|
||||
Loading…
Add table
Add a link
Reference in a new issue