mashlib 2.0.0-10fd4920 → 2.0.0-145706e2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/browse-test.html +65 -26
  2. package/dist/browse.html +61 -20
  3. package/dist/databrowser.html +1 -1
  4. package/dist/mash.css +2437 -617
  5. package/dist/mash.css.map +1 -1
  6. package/dist/mashlib.js +831 -626
  7. package/dist/mashlib.js.map +1 -1
  8. package/dist/mashlib.min.js +323 -133
  9. package/dist/mashlib.min.js.map +1 -1
  10. package/package.json +24 -17
package/dist/browse-test.html CHANGED
@@ -33,7 +33,7 @@ document.addEventListener('DOMContentLoaded', function() {
33
33
  const goButton = dom.getElementById('goButton')
34
34
  const loginButtonArea = document.getElementById("loginButtonArea");
35
35
  const webIdArea = dom.getElementById('webId')
36
- const banner = dom.getElementById('inputArea')
36
+ const inputArea = dom.getElementById('inputArea')
37
37
 
38
38
  uriField.addEventListener('keyup', function (e) {
39
39
  if (e.keyCode === 13) {
@@ -59,11 +59,8 @@ document.addEventListener('DOMContentLoaded', function() {
59
59
  const logoutButton = loginButtonArea.querySelector('input');
60
60
  logoutButton.value = "Logout";
61
61
  let displayId = `<${me.value}>`;
62
- webIdArea.innerHTML = displayId;
63
- banner.style.backgroundColor="#bbccbb";
64
- } else {
65
- banner.style.backgroundColor="#ccbbbb";
66
- }
62
+ webIdArea.innerHTML = displayId;
63
+ }
67
64
  loginButtonArea.style.display="inline-block";
68
65
  }
69
66
 
@@ -87,33 +84,52 @@ document.addEventListener('DOMContentLoaded', function() {
87
84
  </script>
88
85
  </head>
89
86
  <body>
87
+ <a href="#DummyUUID" class="skip-link">Skip to main content</a>
90
88
 
91
- <div style="width:100%;" id="inputArea">
92
- <div style="margin-bottom:0.6em">
93
- The SolidOS Databrowser
89
+ <header id="PageHeader" role="banner" class="header-mash">
90
+ The SolidOS Databrowser
91
+ </header>
92
+ <main id="mainContent" tabindex="-1">
93
+
94
+ <div class="input-row" id="inputArea">
95
+ Viewing <input id="uriField" type="text" class="uri-field" placeholder="enter a pod address e.g. https://you.solidcommunity.net/"/> <input type="button" id="goButton" value="Go" />
94
96
  </div>
95
- <div style="margin-left:1em">
96
- Viewing <input id="uriField" type="text" style="font-size:100%; min-width:25em; padding:0.5em;" placeholder="enter a pod address e.g. https://you.solidcommunity.net/"/> <input type="button" id="goButton" value="Go" />
97
- </div>
98
- <div style="margin-top:0.5em;margin-left:1em">
99
- As user <span id="webId">&lt;public user></span> <span id="loginButtonArea"></span>
97
+ <div class="user-row">
98
+ As user <span id="webId">&lt;public user></span>
99
+ <span id="loginButtonArea"></span>
100
100
  </div>
101
101
  </div>
102
102
 
103
- <table style="width:100%;">
104
- <tr>
105
- <div class="TabulatorOutline" id="DummyUUID" role="main">
106
- <table id="outline"></table>
107
- <div id="GlobalDashboard"></div>
108
- </div>
109
- </tr>
110
- </table>
103
+ <div class="TabulatorOutline" id="DummyUUID" role="main">
104
+ <table id="outline">
105
+ <thead>
106
+ <tr>
107
+ <th id="outlineHeader" scope="col"></th>
108
+ <!-- Add more <th> as needed for columns -->
109
+ </tr>
110
+ </thead>
111
+ <tbody>
112
+ <!-- Table rows injected by JS -->
113
+ </tbody>
114
+ </table>
115
+ <div id="GlobalDashboard" aria-label="Global Dashboard"></div>
116
+ </div>
117
+ </main>
111
118
 
119
+ <footer id="PageFooter" role="contentinfo"></footer>
112
120
  <style>
113
- #inputArea {
121
+ .header-mash {
114
122
  width:100%;
115
- padding:0.5em;
116
- background-color:#d0d0d0;
123
+ padding:1em;
124
+ background-color:#ccbbbb;
125
+ margin-bottom:0.6em;
126
+ }
127
+ .input-row {
128
+ margin-left:1em;
129
+ }
130
+ .user-row {
131
+ margin-top:0.5em;
132
+ margin-left:1em;
117
133
  }
118
134
  #loginButtonArea input {
119
135
  display:inline-block;
@@ -125,10 +141,33 @@ document.addEventListener('DOMContentLoaded', function() {
125
141
  padding-top:0.6em;
126
142
  padding-bottom:0.6em;
127
143
  }
128
- #uriField {
144
+ #uriField, .uri-field {
145
+ font-size:100%;
146
+ min-width:25em;
147
+ padding:0.5em;
129
148
  width:70%;
130
149
  margin-top:0.6em !important;
131
150
  }
151
+
152
+ /* Ensure skip link is visible when focused */
153
+ .skip-link {
154
+ position:absolute;
155
+ left:-999px;
156
+ top:auto;
157
+ width:1px;
158
+ height:1px;
159
+ overflow:hidden;
160
+ }
161
+ .skip-link:focus {
162
+ position: static;
163
+ width: auto;
164
+ height: auto;
165
+ padding: 0.5em 1em;
166
+ background: #005fcc;
167
+ color: #fff;
168
+ z-index: 1000;
169
+ outline: none;
170
+ }
132
171
  </style>
133
172
 
134
173
  </body></html>
package/dist/browse.html CHANGED
@@ -87,33 +87,51 @@ document.addEventListener('DOMContentLoaded', function() {
87
87
  </script>
88
88
  </head>
89
89
  <body>
90
+ <a href="#DummyUUID" class="skip-link">Skip to main content</a>
90
91
 
91
- <div style="width:100%;" id="inputArea">
92
- <div style="margin-bottom:0.6em">
93
- The SolidOS Databrowser
92
+ <header id="PageHeader" role="banner" class="header-mash">
93
+ The SolidOS Databrowser
94
+ </header>
95
+ <main id="mainContent" tabindex="-1">
96
+ <div class="input-row" id="inputArea">
97
+ Viewing <input id="uriField" type="text" class="uri-field" placeholder="enter a pod address e.g. https://you.solidcommunity.net/"/> <input type="button" id="goButton" value="Go" />
94
98
  </div>
95
- <div style="margin-left:1em">
96
- Viewing <input id="uriField" type="text" style="font-size:100%; min-width:25em; padding:0.5em;" placeholder="enter a pod address e.g. https://you.solidcommunity.net/"/> <input type="button" id="goButton" value="Go" />
97
- </div>
98
- <div style="margin-top:0.5em;margin-left:1em">
99
- As user <span id="webId">&lt;public user></span> <span id="loginButtonArea"></span>
99
+ <div class="user-row">
100
+ As user <span id="webId">&lt;public user></span>
101
+ <span id="loginButtonArea"></span>
100
102
  </div>
101
103
  </div>
102
104
 
103
- <table style="width:100%;">
104
- <tr>
105
- <div class="TabulatorOutline" id="DummyUUID" role="main">
106
- <table id="outline"></table>
107
- <div id="GlobalDashboard"></div>
108
- </div>
109
- </tr>
110
- </table>
105
+ <div class="TabulatorOutline" id="DummyUUID" role="main">
106
+ <table id="outline">
107
+ <thead>
108
+ <tr>
109
+ <th id="outlineHeader" scope="col"></th>
110
+ <!-- Add more <th> as needed for columns -->
111
+ </tr>
112
+ </thead>
113
+ <tbody>
114
+ <!-- Table rows injected by JS -->
115
+ </tbody>
116
+ </table>
117
+ <div id="GlobalDashboard" aria-label="Global Dashboard"></div>
118
+ </div>
119
+ </main>
111
120
 
121
+ <footer id="PageFooter" role="contentinfo"></footer>
112
122
  <style>
113
- #inputArea {
123
+ .header-mash {
114
124
  width:100%;
115
- padding:0.5em;
116
- background-color:#d0d0d0;
125
+ padding:1em;
126
+ background-color:#ccbbbb;
127
+ margin-bottom:0.6em;
128
+ }
129
+ .input-row {
130
+ margin-left:1em;
131
+ }
132
+ .user-row {
133
+ margin-top:0.5em;
134
+ margin-left:1em;
117
135
  }
118
136
  #loginButtonArea input {
119
137
  display:inline-block;
@@ -125,10 +143,33 @@ document.addEventListener('DOMContentLoaded', function() {
125
143
  padding-top:0.6em;
126
144
  padding-bottom:0.6em;
127
145
  }
128
- #uriField {
146
+ #uriField, .uri-field {
147
+ font-size:100%;
148
+ min-width:25em;
149
+ padding:0.5em;
129
150
  width:70%;
130
151
  margin-top:0.6em !important;
131
152
  }
153
+
154
+ /* Ensure skip link is visible when focused */
155
+ .skip-link {
156
+ position:absolute;
157
+ left:-999px;
158
+ top:auto;
159
+ width:1px;
160
+ height:1px;
161
+ overflow:hidden;
162
+ }
163
+ .skip-link:focus {
164
+ position: static;
165
+ width: auto;
166
+ height: auto;
167
+ padding: 0.5em 1em;
168
+ background: #005fcc;
169
+ color: #fff;
170
+ z-index: 1000;
171
+ outline: none;
172
+ }
132
173
  </style>
133
174
 
134
175
  </body></html>
package/dist/databrowser.html CHANGED
@@ -1,3 +1,3 @@
1
1
  <!doctype html><html><head><meta charset="utf-8"/><title>SolidOS Web App</title><script>document.addEventListener('DOMContentLoaded', function() {
2
2
  panes.runDataBrowser()
3
- })</script><script defer="defer" src="/mashlib.min.js"></script><link href="/mash.css" rel="stylesheet"></head><body id="PageBody"><header id="PageHeader"></header><div class="TabulatorOutline" id="DummyUUID" role="main"><table id="outline"></table><div id="GlobalDashboard"></div></div><footer id="PageFooter"></footer></body></html>
3
+ })</script><script defer="defer" src="/mashlib.min.js"></script><link href="/mash.css" rel="stylesheet"></head><body id="PageBody"><a href="#DummyUUID" class="skip-link" style="position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;">Skip to main content</a><header id="PageHeader" role="banner"></header><main id="mainContent" tabindex="-1"><div class="TabulatorOutline" id="DummyUUID" role="main"><table id="outline"><thead><tr><th id="outlineHeader" scope="col"></th></tr></thead><tbody></tbody></table><div id="GlobalDashboard" aria-label="Global Dashboard"></div></div></main><footer id="PageFooter" role="contentinfo"></footer></body></html>