-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
124 lines (105 loc) · 3.99 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!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/[email protected]/webcomponents-bundle.js"></script>
<script type="module">
import "https://unpkg.com/@myuw-web-components/myuw-app-styles/dist/myuw-app-styles.min.mjs";
import "https://unpkg.com/@myuw-web-components/myuw-drawer/dist/myuw-drawer.min.mjs";
import "https://unpkg.com/@myuw-web-components/myuw-notifications/dist/myuw-notifications.min.mjs";
import "https://unpkg.com/@myuw-web-components/myuw-profile/dist/myuw-profile.min.mjs";
import "https://unpkg.com/@myuw-web-components/myuw-search/dist/myuw-search.min.mjs";
import "https://unpkg.com/@myuw-web-components/myuw-help/dist/myuw-help.min.mjs";
import "https://unpkg.com/@myuw-web-components/myuw-feedback/dist/myuw-feedback.min.mjs";
import "./dist/myuw-app-bar.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>
<style>
@media (max-width: 700px) {
.c-myuw-feedback {
display: none;
}
}
</style>
<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-feedback class="c-myuw-feedback" myuw-feedback-title="Feedback" slot="myuw-feedback" show-button>
<div slot="myuw-feedback-content">
<p>Please tell us what you think about the new all-in-one, integrated home for MyUW widgets.</p>
<div id="dialog-actions">
<a class="dialog-action" target="_blank" rel="noopener noreferrer" href="#">
Give Feedback</a>
</div>
</div>
</myuw-feedback>
<myuw-help slot="myuw-help"
myuw-help-title="Get help"
show-button >
<div class="some-class" slot="myuw-help-content">
Help content would go here.
</div>
</myuw-help>
<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>