@lrnwebcomponents/hax-body
Version:
A full on Headless authoring experience as a single tag. The ultimate authoring solution across platforms to win the future.
361 lines (357 loc) • 14.4 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>HAX: h-a-x Demo</title>
<script>
window.process = window.process || {
env: {
NODE_ENV: "production"
}
};
</script>
<script src="../../../node_modules/@lrnwebcomponents/deduping-fix/deduping-fix.js"></script>
<script type="module">
import '@lrnwebcomponents/h-a-x/h-a-x.js';
import '../lib/hax-text-editor.js';
import '../lib/hax-text-editor-toolbar.js';
import("@polymer/polymer/lib/utils/settings.js").then((esModule) => {
esModule.setPassiveTouchGestures(true);
});
</script>
<style>
body, html, :root {
--primary-color: var(--simple-colors-default-theme-cyan-7, #3b97e3);
}
p {
padding: 8px;
}
</style>
</head>
<body>
<div style="padding:100px 300px 100px 100px;">
<h2>HAX Toolbar</h2><hax-toolbar>
<hax-context-item
mini
action
more
slot="prefix"
icon="image:image"
label="$activeTagName, click to change"
event-name="hax-transform-node"
></hax-context-item>
<div slot="primary">
<slot></slot>
</div>
<hax-context-item
mini
action
slot="primary"
icon="icons:code"
label="Modify HTML source"
event-name="hax-source-view-toggle"
></hax-context-item>
<hax-context-item-textop
action
menu
slot="more"
icon="hardware:keyboard-arrow-up"
event-name="insert-above-active"
>Insert item above</hax-context-item-textop
>
<hax-context-item-textop
action
menu
slot="more"
icon="hardware:keyboard-arrow-down"
event-name="insert-below-active"
>Insert item below</hax-context-item-textop
>
</hax-toolbar>
<hax-toolbar id="toolbar">
<simple-popover-selection
slot="primary"
@simple-popover-selection-changed="${this.textFormatChanged}"
auto
orientation="tb"
id="textformat"
>
<div slot="style">
simple-popover-manager button { color: black; font-size: 10px
!important; margin: 0; padding: 4px; text-align:left; overflow:
hidden; min-height: unset; width: 100%; display: block;
justify-content: start; align-items: center; border: 0; }
simple-popover-manager button simple-icon-lite {
--simple-icon-height: 18px; --simple-icon-width: 18px; margin-right:
8px; }
</div>
<hax-context-item
action
mini
slot="button"
id="formatsize"
icon="text-format"
label="Text format"
data-simple-tour-stop
data-stop-title="label"
>
<div slot="tour" data-stop-content>
Change how the text is structured and visualized in the page.
</div>
</hax-context-item>
<button slot="options" value="${val.value}">
<simple-icon-lite icon="help"></simple-icon-lite>
text
</button>
</simple-popover-selection>
<hax-context-item
mini
action
slot="primary"
icon="icons:code"
label="Modify HTML source"
event-name="hax-source-view-toggle"
></hax-context-item>
<hax-context-item-textop
mini
action
slot="primary"
icon="editor:format-list-bulleted"
event-name="text-tag-ul"
label="Bulleted list"
.hidden="${!this._showLists}"
></hax-context-item-textop>
<hax-context-item-textop
mini
action
slot="primary"
icon="editor:format-list-numbered"
label="Numbered list"
event-name="text-tag-ol"
.hidden="${!this._showLists}"
></hax-context-item-textop>
<hax-context-item-textop
mini
action
slot="primary"
icon="editor:format-indent-decrease"
label="Outdent"
event-name="text-outdent"
.hidden="${!this._showIndent}"
></hax-context-item-textop>
<hax-context-item-textop
mini
action
slot="primary"
icon="editor:format-indent-increase"
label="Indent"
event-name="text-indent"
.hidden="${!this._showIndent}"
></hax-context-item-textop>
<hax-context-item-textop
mini
action
slot="primary"
icon="editor:format-bold"
label="Bold"
class="selected-buttons"
event-name="text-bold"
?hidden="${!this.hasSelectedText}"
></hax-context-item-textop>
<hax-context-item-textop
mini
action
slot="primary"
icon="editor:format-italic"
label="Italic"
class="selected-buttons"
event-name="text-italic"
?hidden="${!this.hasSelectedText}"
></hax-context-item-textop>
<hax-context-item-textop
mini
action
slot="primary"
icon="editor:insert-link"
label="Link"
class="selected-buttons"
event-name="text-link"
?hidden="${!this.hasSelectedText}"
></hax-context-item-textop>
<hax-context-item-textop
mini
action
slot="primary"
icon="mdextra:unlink"
label="Remove link"
class="selected-buttons"
event-name="text-unlink"
?hidden="${!this.hasSelectedText}"
></hax-context-item-textop>
<hax-context-item-textop
mini
action
slot="primary"
icon="editor:format-clear"
label="Remove format"
class="selected-buttons"
event-name="text-remove-format"
?hidden="${!this.hasSelectedText}"
></hax-context-item-textop>
<hax-context-item
mini
action
slot="primary"
icon="hax:add-brick"
label="Add element to selection"
class="selected-buttons"
event-name="insert-inline-gizmo"
?hidden="${this.isSafari || !this.hasSelectedText}"
></hax-context-item>
<hax-context-item-textop
mini
action
slot="primary"
icon="hax:add-brick"
label="Add element to selection"
class="selected-buttons"
event-name="insert-inline-gizmo"
?hidden="${!this.isSafari || !this.hasSelectedText}"
></hax-context-item-textop>
<hax-context-item-textop
action
menu
slot="more"
icon="mdextra:subscript"
event-name="text-subscript"
?hidden="${!this.hasSelectedText}"
>Subscript</hax-context-item-textop
>
<hax-context-item-textop
action
menu
slot="more"
icon="mdextra:superscript"
event-name="text-superscript"
?hidden="${!this.hasSelectedText}"
>Superscript</hax-context-item-textop
>
<hax-context-item-textop
action
menu
slot="more"
icon="editor:format-underlined"
event-name="text-underline"
?hidden="${!this.hasSelectedText}"
>Underline</hax-context-item-textop
>
<hax-context-item-textop
action
menu
slot="more"
icon="editor:format-strikethrough"
event-name="text-strikethrough"
?hidden="${!this.hasSelectedText}"
>Cross out</hax-context-item-textop
>
<hax-context-item-textop
action
menu
slot="more"
icon="hardware:keyboard-arrow-up"
event-name="insert-above-active"
>Insert item above</hax-context-item-textop
>
<hax-context-item-textop
action
menu
slot="more"
icon="hardware:keyboard-arrow-down"
event-name="insert-below-active"
>Insert item below</hax-context-item-textop
>
</hax-toolbar>
<h2>HAX Text Editor (plus toolbar and buttons)</h2>
<hax-text-editor-toolbar show="selection"></hax-text-editor-toolbar>
<hax-text-editor><p>Click to edit <lrn-math>a+b=c</lrn-math>.</p></hax-text-editor>
<h-a-x app-store='{"url": "appstore.json"}' element-align="right">
<p>
stuff and things
<p>
stuff and things
<p>stuff and things</p>
<p>stuff and things2</p>
</p>
</p>
<img src="https://media0.giphy.com/media/zHaPZZvl6cVHi/480w_s.jpg" alt="dmd 100 course background art"/>
<magazine-cover action="Touch to learn more" icon="icons:forward" image="https://cdn.pixabay.com/photo/2019/07/14/13/11/banner-4337089_960_720.jpg" header="" subheader="Use the platform!" event-data="{}"></magazine-cover>
<h2 id="header-0a02ffc4-e336-e988-9ceb-3b2a4ac7ab32">Cool stuff</h2>
<p>testxt</p>
<image-compare-slider
bottom-alt="Kitten in color"
bottom-src="//placekitten.com/400/200"
top-alt="Kitten in greyscale"
top-src="//placekitten.com/g/400/200"
top-description-id="grey"
bottom-description-id="color"
style="width: 400px">
<h2 slot="heading">Image Compare Slider</h2>
<p slot="description">
The image on the top or when slider is moved all the way to the
right is the <span id="grey">random kitten image in greyscale</span>.
As you move the slider to the left, the image below it
reveals the <span id="color">random kitten image in color</span>.
</p>
</image-compare-slider>
<task-list name="Plan for World Domination" tasks="[{"name":"Use HAX","link":""},{"name":"???","link":""},{"name":"Profit","link":""}]"></task-list>
<h3 id="header-d3827ba5-5aa8-5fb0-367b-1673f353579b">Another</h3>
<p>coool</p>
<h3 id="specific">With id</h3>
<accent-card accent-color="cyan" accent-heading horizontal image-src="https://cdn.pixabay.com/photo/2015/08/24/12/54/banner-904887_960_720.jpg">
<div slot="heading">Accent Card</div>
<div slot="subheading">A card with optional accent stylings.</div>
<div slot="content">
<p>
This card is highly customizable.
There are a number of options for using <tt>accent-card</tt>.
See documentation for more info.
</p>
</div>
</accent-card>
<h2 id="header-0a02ffc4-e336-e988-9ceb-3b2a4ac7ab32">Cool stuff</h2>
<p>testxt</p>
<task-list name="Plan for World Domination" tasks="[{"name":"Use HAX","link":""},{"name":"???","link":""},{"name":"Profit","link":""}]"></task-list>
<h3 id="header-d3827ba5-5aa8-5fb0-367b-1673f353579b">Another</h3>
<p>coool</p>
<h3 id="specific">With id</h3>
<marked-element>Hello</marked-element>
<magazine-cover action="Touch to learn more" icon="icons:forward" image="https://cdn.pixabay.com/photo/2019/07/14/13/11/banner-4337089_960_720.jpg" header="" subheader="Use the platform!" event-data="{}"></magazine-cover>
<h2 id="header-0a02ffc4-e336-e988-9ceb-3b2a4ac7ab32">Cool stuff</h2>
<p>testxt</p>
<h3 id="specific">With id</h3>
<a11y-gif-player
alt="It's Always Sunny in Philadelphia GIF Meme"
src="https://media0.giphy.com/media/zHaPZZvl6cVHi/giphy.gif"
src-without-animation="https://media0.giphy.com/media/zHaPZZvl6cVHi/480w_s.jpg"
longdesc="Pepe Silvia scene from It's Always Sunny in Philadelphia. Jesus, dude, you're still making GIFs. The GIF's don't stop.".>
</a11y-gif-player>
<!--lrndesign-gallery id="gallery2" accent-color="green" dark title="Dark Carousel" sources="[{ "alt": "A picture of an Atari console", "details": "This console was made by <em>Atari</em>.", "id": "atari", "src": "./images/atari.jpg", "thumbnail": "./images/thumbnails/atari.jpg", "title": "Atari" }, { "alt": "A picture of an Microsoft console", "details": "This console was made by <em>Microsoft</em>.", "id": "microsoft", "src": "./images/xbox.png", "thumbnail": "./images/thumbnails/xbox.png", "title": "Microsoft" }, { "alt": "A picture of an Nintendo console", "details": "This console was made by <em>Nintendo</em>.", "id": "nintendo", "src": "./images/nintendo.png", "thumbnail": "./images/thumbnails/nintendo.png", "title": "Nintendo" }, { "alt": "A picture of an Sega console", "details": "This console was made by <em>Sega</em>.", "id": "sega", "src": "./images/sega.jpg", "thumbnail": "./images/thumbnails/sega.jpg", "title": "Sega" }, { "alt": "A picture of an Sony console", "details": "This console was made by <em>Sony</em>.", "id": "sony", "src": "./images/ps4.jpg", "thumbnail": "./images/thumbnails/ps4.jpg", "title": "Sony" }]">
<div slot="description">This is a <strong>carousel</strong> of game consoles with the <em>dark</em> theme.</div>
</lrndesign-gallery>
<lrndesign-timeline id="mytimeline" accent-color="blue">
This is lrndesign-timeline
</lrndesign-timeline>
<chartist-render id="pie-chart"
chart-title="A pie chart of favorite foods"
data='{
"labels": ["Bananas", "Apples", "Grapes"],
"series": [20, 15, 40]
}'
type="pie"
scale="ct-square">
</chartist-render-->
</h-a-x>
</div>
</body>
</html>