Skip to content

Commit

Permalink
Add import of pb-tify in pb-tify demo codepen
Browse files Browse the repository at this point in the history
  • Loading branch information
DrRataplan committed Nov 6, 2024
1 parent 4f09858 commit 2ff755b
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 6 deletions.
4 changes: 2 additions & 2 deletions demo/pb-tify.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
</head>

<body>
<pb-demo-snippet>
<pb-demo-snippet require-pb-tify="true">
<template>
<pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher" api-version="1.0">
<!-- Display facsimile -->
Expand All @@ -41,4 +41,4 @@
</pb-demo-snippet>
</body>

</html>
</html>
19 changes: 15 additions & 4 deletions src/docs/pb-demo-snippet.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const codePenEndpoint = "https://teipublisher.com/exist/apps/tei-publisher";

/**
* Viewer for demo code.
*
*
* @customElement pb-demo-snippet
* @polymer
* @appliesMixin pbMixin
Expand All @@ -28,7 +28,10 @@ export class PbDemoSnippet extends LitElement {
},
_editCodeLabel: {
type: String
}
},
_requirePbTify: {
type: Boolean
},
};
}

Expand All @@ -37,10 +40,12 @@ export class PbDemoSnippet extends LitElement {
this.title = 'TEI Publisher Webcomponents Example';
this.code = 'Loading ...';
this._showCodeLabel = 'demo.showCode.show';
this._requirePbTify = false;
}

connectedCallback() {
super.connectedCallback();
this._requirePbTify = !!this.getAttribute('require-pb-tify');
const template = this.querySelector('template');
this.code = PbDemoSnippet.removeIndent(template.innerHTML);
this.code = this.code.replace(/\s*<style[\s\S]*>[\s\S]*?<\/style>\s*/g, '');
Expand Down Expand Up @@ -75,22 +80,28 @@ body {
}
${PbDemoSnippet.removeIndent(css)}`;

const cpHtml = `
<html>
<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">
<title>${ this.title}</title>
<title>${this.title}</title>
<script src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-loader.js"></script>
<script type="module" src="https://unpkg.com/@teipublisher/pb-components@latest/dist/pb-components-bundle.js"></script>
<script type="module" src="https://unpkg.com/@teipublisher/pb-components@latest/dist/pb-leaflet-map.js"></script>
</head>
<body>
${ cpCode}
${cpCode}
</body>
${
this._requirePbTify
? '<script type="module" src="https://unpkg.com/@teipublisher/pb-components@latest/dist/pb-tify.js"></script>'
: ''
}
</html>`;

const cpOptions = {
Expand Down

0 comments on commit 2ff755b

Please sign in to comment.