Skip to content

Commit db1c2a8

Browse files
HokidHokid
committedJun 29, 2019
feat: replace letters with svg
·
v1.0.0-beta.3v1.0.0-beta.0
1 parent d5523e7 commit db1c2a8

File tree

5 files changed

+119
-13
lines changed

5 files changed

+119
-13
lines changed
 

‎src/components/always-avatar/always-avatar.tsx

+40-9
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,82 @@
11
import {Component, h, Prop} from '@stencil/core';
2-
import {getColorPalletCache, getSignCache} from '../../utils/utils';
2+
import {getColorPalletCache, getSignCache, getSVGGenerationData} from '../../utils/utils';
33

44
@Component({
55
tag: 'always-avatar',
66
shadow: true,
7-
styles:
8-
`
7+
// language=CSS
8+
styles: `
99
:host {
1010
display: inline-block;
1111
overflow: hidden;
1212
border-radius: 50%;
1313
user-select: none;
1414
}
15-
15+
1616
span {
1717
display: inline-block;
1818
vertical-align: top;
19+
white-space: normal;
1920
text-align: center;
2021
}
22+
23+
svg {
24+
display: inline-block;
25+
pointer-events: none;
26+
vertical-align: middle;
27+
fill: currentColor;
28+
height: 35%;
29+
margin-bottom: -8%;
30+
}
2131
`
2232
})
2333
export class AlwaysAvatar {
24-
@Prop() source: string;
34+
@Prop() source: string = '';
2535
@Prop() size: number | string = 48;
2636

2737
render() {
28-
const sign = getSignCache(this.source);
38+
const sign = this.getSign();
2939
const pallet = getColorPalletCache(sign);
30-
console.log(sign, pallet);
40+
const svgGenerationData = getSVGGenerationData(sign);
3141
const size = this.getSize();
3242

3343
return (
3444
<span
45+
class={sign.length === 2 ? 'two' : ''}
3546
style={{
3647
backgroundColor: pallet[0],
3748
color: pallet[1],
3849
width: size + 'px',
3950
height: size + 'px',
40-
fontSize: size * 0.5 + 'px',
4151
lineHeight: size + 'px'
4252
}}
43-
>{sign}</span>
53+
>{
54+
svgGenerationData.map(
55+
data => this.renderSvgContent(
56+
data.path,
57+
data.width,
58+
data.height
59+
)
60+
)
61+
}</span>
4462
);
4563
}
4664

4765
getSize() {
4866
const parsed = parseFloat(this.size as string);
4967
return parsed >= 0 ? parsed : 48;
5068
}
69+
70+
getSign() {
71+
return getSignCache(this.source) || 'AA';
72+
}
73+
74+
renderSvgContent(path: string, viewBoxWidth: number, viewBoxHeight: number) {
75+
return (
76+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
77+
viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}>
78+
<path d={path}/>
79+
</svg>
80+
);
81+
}
5182
}

‎src/components/always-avatar/readme.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# always-avatar
2+
3+
4+
5+
<!-- Auto Generated Below -->
6+
7+
8+
## Properties
9+
10+
| Property | Attribute | Description | Type | Default |
11+
| -------- | --------- | ----------- | ------------------ | ------- |
12+
| `size` | `size` | | `number \| string` | `48` |
13+
| `source` | `source` | | `string` | `''` |
14+
15+
16+
----------------------------------------------
17+
18+
*Built with [StencilJS](https://stenciljs.com/)*

‎src/index.html

+40-4
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,47 @@
1010

1111
</head>
1212
<body>
13+
<script>
14+
const ranges = [
15+
// A-Z
16+
[0x41, 0x5A],
17+
// А-Я
18+
[0x410, 0x42F]
19+
];
1320

14-
<always-avatar source="Stencil FFFF" size="100"></always-avatar>
15-
<always-avatar source="A B" size="100"></always-avatar>
16-
<always-avatar source="А С" size="100"></always-avatar>
17-
<always-avatar source="С Я" size="100"></always-avatar>
21+
document.write(generate(generateAlphabet(ranges)));
1822

23+
function generateAlphabet(ranges) {
24+
return ranges.reduce((out, range) => {
25+
const [min, max]= range;
26+
let current = min;
27+
28+
while (current <= max) {
29+
out += String.fromCharCode(current);
30+
current++;
31+
}
32+
33+
return out;
34+
}, '')
35+
}
36+
37+
function generate(alphabet) {
38+
let content = '';
39+
40+
for (let i = 0; i < alphabet.length; i++) {
41+
content += generateEl(alphabet[i]);
42+
43+
for (let ii = 0; ii < alphabet.length; ii++) {
44+
content += generateEl(alphabet[i] + '-' + alphabet[ii])
45+
}
46+
}
47+
48+
return content;
49+
}
50+
51+
function generateEl(source, size = 100) {
52+
return `<always-avatar source="${source}" size="${size}"></always-avatar>`;
53+
}
54+
</script>
1955
</body>
2056
</html>

‎src/utils/utils.ts

+20
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,29 @@
1+
import bundle from '../letters/dist/bundle.json';
2+
13
const min = Math.min;
24
const max = Math.max;
35

46
const WHITE = '#ffffff';
57
const DEFAULT_PALLET = ['#f8e7e7', WHITE];
68

9+
export function getSVGGenerationData(sign: string): ({path: string, width: number, height: number})[] {
10+
const ln = sign.length;
11+
12+
if (ln === 0) {
13+
return [];
14+
}
15+
16+
let offset = 0, list = [];
17+
18+
while (offset < ln) {
19+
list.push(bundle[sign[offset]]);
20+
offset++;
21+
}
22+
23+
return list;
24+
}
25+
26+
727
const palletCache = new Map();
828

929
export function getColorPalletCache(sign: string): string[] {

‎tsconfig.json

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"allowSyntheticDefaultImports": true,
44
"allowUnreachableCode": false,
55
"declaration": false,
6+
"resolveJsonModule": true,
67
"experimentalDecorators": true,
78
"lib": [
89
"dom",

0 commit comments

Comments
 (0)
Please sign in to comment.