Skip to content

Commit 4e8a56d

Browse files
djthorpedjthorpe
committed
Updates
1 parent a9d1887 commit 4e8a56d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+904
-82
lines changed

‎example/hala-white-132x132.svg

Lines changed: 11 additions & 0 deletions
Loading

‎example/index.html

Lines changed: 81 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,28 @@
22
<html lang="en">
33

44
<head>
5-
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Example</title>
8-
<script type="module" src="index.js" defer></script>
9-
<link href="index.css" rel="stylesheet">
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Example</title>
8+
<script type="module" src="index.js" defer></script>
9+
<link href="index.css" rel="stylesheet">
1010
</head>
1111

1212
<body>
13-
14-
<!-- toast which persists on the screen for 10 seconds -->
15-
<js-toast id="toast" duration="10"></js-toast>
16-
17-
<js-container>
13+
<js-canvas>
14+
<js-nav vertical>
15+
<js-navitem disabled><js-image id="icon"></js-image></js-navitem>
16+
<js-navitem texttransform="uppercase">Home</js-navitem>
17+
<js-navspacer></js-navspacer>
18+
<js-navitem texttransform="capitalize">
19+
Login
20+
<js-icon size="large">person-circle</js-icon>
21+
</js-navitem>
22+
</js-nav>
23+
24+
<js-content>
25+
<h1>Buttons</h1>
26+
<div>
1827
BUTTON COLOR
1928
<js-button color="primary" texttransform="uppercase">Primary</js-button>
2029
<js-button color="secondary" texttransform="uppercase">Secondary</js-button>
@@ -25,48 +34,25 @@
2534
<js-button color="dark" texttransform="uppercase">Dark</js-button>
2635
<js-button color="white" texttransform="uppercase">White</js-button>
2736
<js-button color="black" texttransform="uppercase">Black</js-button>
37+
</div>
2838

39+
<div>
2940
BUTTON SIZE
3041
<js-button size="small" texttransform="lowercase">Small</js-button>
3142
<js-button size="medium" texttransform="lowercase">Medium</js-button>
3243
<js-button size="large" texttransform="lowercase">Large</js-button>
3344
<js-button size="xlarge" texttransform="lowercase">XLarge</js-button>
45+
</div>
3446

47+
<div>
3548
DISABLED
3649
<js-button color="primary" texttransform="uppercase" disabled>Disabled</js-button>
50+
</div>
51+
</js-content>
3752

38-
</js-container>
39-
40-
<!-- header -->
41-
<js-container>
42-
<!-- where the data comes from -->
43-
<js-provider id="provider" origin="http://localhost:8080/" path="aktek/area?format=geojson" interval="5"></js-provider>
44-
45-
<!-- model, areas come from the body element -->
46-
<js-array id="array" provider="#provider" select="body"></js-array>
47-
48-
<!-- view -->
49-
<js-tablebody id="body" data="#array">
50-
<js-tablehead body="#body"></js-tablehead>
51-
</js-tablebody>
52-
</js-container>
53-
54-
<js-container>
55-
<js-tag texttransform="uppercase"><js-icon size="small">compass</js-icon> Map</js-tag>
56-
<div style="height: 500px;">
57-
<js-map id="map"
58-
accessToken="pk.eyJ1IjoiZGp0aG9ycGUiLCJhIjoiY2x5ZnJhZjAzMDJsYTJqcjd6eWQ3cjRvcSJ9.LvoT_wihG5VQtv008P-MPw">
59-
<!-- add a source from the array (must currently be an array of GeoJSON features) -->
60-
<js-mapsource id="area" type="geojson" data="#array"></js-mapsource>
61-
62-
<!-- display the source on the map as polygons -->
63-
<js-maplayer id="points" source="#area" type="fill"
64-
paint='{ "fill-opacity": 0.2, "fill-color": "#aa0000" }'></js-maplayer>
65-
</js-map>
66-
</div>
67-
</js-container>
68-
69-
<js-container>
53+
<js-content>
54+
<h1>Tags</h1>
55+
<div>
7056
TAG COLOR
7157
<js-tag color="primary" texttransform="uppercase">Primary</js-tag>
7258
<js-tag color="secondary" texttransform="uppercase">Secondary</js-tag>
@@ -77,16 +63,23 @@
7763
<js-tag color="dark" texttransform="uppercase">Dark</js-tag>
7864
<js-tag color="white" texttransform="uppercase">White</js-tag>
7965
<js-tag color="black" texttransform="uppercase">Black</js-tag>
66+
</div>
8067

68+
<div>
8169
TAG SIZE
8270
<js-tag color="light" size="small" texttransform="lowercase">Small</js-tag>
8371
<js-tag color="light" size="medium" texttransform="lowercase">Medium</js-tag>
8472
<js-tag color="light" size="large" texttransform="lowercase">Large</js-tag>
8573
<js-tag color="light" size="xlarge" texttransform="lowercase">XLarge</js-tag>
86-
</js-container>
74+
</div>
8775

88-
<js-container>
89-
ICON COLOR
76+
</js-content>
77+
78+
<js-content>
79+
<h1>Icons</h1>
80+
81+
<div>
82+
ICON COLOR (in a tag)
9083
<js-tag color="primary" texttransform="uppercase"><js-icon></js-icon></js-tag>
9184
<js-tag color="secondary" texttransform="uppercase"><js-icon></js-icon></js-tag>
9285
<js-tag color="success" texttransform="uppercase"><js-icon></js-icon></js-tag>
@@ -96,14 +89,52 @@
9689
<js-tag color="dark" texttransform="uppercase"><js-icon></js-icon></js-tag>
9790
<js-tag color="white" texttransform="uppercase"><js-icon></js-icon></js-tag>
9891
<js-tag color="black" texttransform="uppercase"><js-icon></js-icon></js-tag>
92+
</div>
9993

94+
<div>
10095
ICON SIZE
101-
<js-tag color="light" size="small"><js-icon>bootstrap</js-icon> small</js-tag>
102-
<js-tag color="light" size="medium"><js-icon></js-icon> medium</js-tag>
103-
<js-tag color="light" size="large"><js-icon></js-icon> large</js-tag>
104-
<js-tag color="light" size="xlarge"><js-icon></js-icon> xlarge</js-tag>
105-
</js-container>
96+
<js-icon size="small">youtube</js-icon>
97+
<js-icon size="medium">youtube</js-icon>
98+
<js-icon size="large">youtube</js-icon>
99+
<js-icon size="xlarge">youtube</js-icon>
100+
</div>
106101

102+
</js-content>
103+
<!-- header -->
104+
<js-content>
105+
<!-- where the data comes from -->
106+
<js-provider id="provider" origin="http://localhost:8080/" path="aktek/area?format=geojson"
107+
interval="5"></js-provider>
108+
109+
<!-- model, areas come from the body element -->
110+
<js-array id="array" provider="#provider" select="body"></js-array>
111+
112+
<!-- view -->
113+
<js-tablebody id="body" data="#array">
114+
<js-tablehead body="#body"></js-tablehead>
115+
</js-tablebody>
116+
</js-content>
117+
118+
<js-content>
119+
<js-tag texttransform="uppercase"><js-icon size="small">compass</js-icon> Map</js-tag>
120+
<div style="height: 500px;">
121+
<js-map id="map"
122+
accessToken="pk.eyJ1IjoiZGp0aG9ycGUiLCJhIjoiY2x5ZnJhZjAzMDJsYTJqcjd6eWQ3cjRvcSJ9.LvoT_wihG5VQtv008P-MPw">
123+
<!-- add a source from the array (must currently be an array of GeoJSON features) -->
124+
<js-mapsource id="area" type="geojson" data="#array"></js-mapsource>
125+
126+
<!-- display the source on the map as polygons -->
127+
<js-maplayer id="points" source="#area" type="fill"
128+
paint='{ "fill-opacity": 0.2, "fill-color": "#aa0000" }'></js-maplayer>
129+
</js-map>
130+
</div>
131+
</js-content>
132+
133+
134+
</js-canvas>
135+
136+
<!-- toast which persists on the screen for 10 seconds -->
137+
<js-toast id="toast" duration="10"></js-toast>
107138
</body>
108139

109140
</html>

‎example/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
// This file defines all the styles and elements used for the web components
2-
import '../src/index.js';
2+
import '../src/index';
33
import './esbuild';
44
import './load';

‎example/load.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import { EventType } from '../src/core/EventType';
2+
import hala from './hala-white-132x132.svg';
23

34
window.addEventListener('load', () => {
5+
// Brand
6+
const icon = document.querySelector('#icon');
7+
if (icon) {
8+
icon.src = hala;
9+
}
10+
411
// Set toast when error or done
512
const provider = document.querySelector('#provider');
613
const toast = document.querySelector('#toast');

‎src/assets/font/IBMPlexMono/IBMPlexMono-Bold.ttf

133 KB
Binary file not shown.

‎src/assets/font/IBMPlexMono/IBMPlexMono-BoldItalic.ttf

139 KB
Binary file not shown.

‎src/assets/font/IBMPlexMono/IBMPlexMono-ExtraLight.ttf

131 KB
Binary file not shown.

‎src/assets/font/IBMPlexMono/IBMPlexMono-ExtraLightItalic.ttf

139 KB
Binary file not shown.

‎src/assets/font/IBMPlexMono/IBMPlexMono-Italic.ttf

139 KB
Binary file not shown.

‎src/assets/font/IBMPlexMono/IBMPlexMono-Light.ttf

130 KB
Binary file not shown.

0 commit comments

Comments
 (0)