Skip to content

Instantly share code, notes, and snippets.

@paulerickson

paulerickson/index.html

Created December 12, 2019 22:09
Show Gist options
  • Save paulerickson/5e65c058ff167578e64cfb4d83f4b62c to your computer and use it in GitHub Desktop.
Save paulerickson/5e65c058ff167578e64cfb4d83f4b62c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tota11y/0.1.6/tota11y.min.js"></script>
<!-- Polyfill loader -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.3.0/webcomponents-bundle.js"></script>
<script type="module">
import "https://cdn.my.wisc.edu/@myuw-web-components/myuw-app-styles@latest/myuw-app-styles.min.mjs";
import "https://cdn.my.wisc.edu/@myuw-web-components/myuw-drawer@latest/myuw-drawer.min.mjs";
import "https://cdn.my.wisc.edu/@myuw-web-components/myuw-notifications@latest/myuw-notifications.min.mjs";
import "https://cdn.my.wisc.edu/@myuw-web-components/myuw-profile@latest/myuw-profile.min.mjs";
import "https://cdn.my.wisc.edu/@myuw-web-components/myuw-search@latest/myuw-search.min.mjs";
import "https://cdn.my.wisc.edu/@myuw-web-components/myuw-app-bar@PR-29/myuw-app-bar.min.mjs";
class Controller {
constructor() {
this.appBar = document.querySelector('myuw-app-bar');
document.dispatchEvent(new CustomEvent('myuw-login', { details: {} }));
fetch('https://litipsum.com/api/p')
.then(res => res.text())
.then(text => document.getElementById('ipsum').innerHTML += text)
;
}
setAppBarAttribute(attribute, value) {
this.appBar.setAttribute(attribute, value);
}
setAppBarStyle(property, value) {
document.documentElement.style.setProperty(`--${property}`, value);
}
}
window.controller = new Controller();
</script>
<header>
<myuw-app-bar
role="toolbar"
theme-name="MyUW"
app-name="App Bar Demo"
app-url="https://my.wisc.edu"
>
<myuw-drawer slot="myuw-navigation"></myuw-drawer>
<myuw-search
slot="myuw-search"
input-label="Search components"
button-label="Submit search"
icon="search"
></myuw-search>
<myuw-notifications slot="myuw-notifications"></myuw-notifications>
<myuw-profile slot="myuw-profile" login-url="login.wisc.edu"></myuw-profile>
</myuw-app-bar>
</header>
<main>
<fieldset oninput='controller.setAppBarAttribute(event.target.name, event.target.value)'>
<legend>Change top bar attributes</legend>
<label>Portal name:
<input name="theme-name" type="text" placeholder="New portal name"/>
</label>
<label>App name:
<input name="app-name" type="text" placeholder="New app name"/>
</label>
<label>App URL:
<input name="app-url" type="text" placeholder="www.google.com"/>
</label>
</fieldset>
<fieldset oninput='controller.setAppBarStyle(event.target.name, event.target.value)'>
<legend>Change top bar attributes</legend>
<label>Color:
<input name="myuw-app-bar-color" type="color" value="#C0FFEE"/>
</label>
<label>Background color:
<input name="myuw-app-bar-bg" type="color" value="#000000"/>
</label>
<label>Font Family:
<input name="myuw-app-bar-font" type="text" placeholder="monospace"/>
</label>
<label>Font Size:
<input name="myuw-app-bar-title-font-size" type="text" placeholder="24pt"/>
</label>
</fieldset>
<article id="ipsum">
<h1>Sample Content</h1>
</article>
</main>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment