├── .gitignore ├── LICENSE ├── README.md ├── demo.html ├── jquery.textavatar.js ├── package-lock.json ├── package.json ├── textavatar.css ├── textavatar.iife.js └── textavatar.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013 Knovour 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | jQuery Text Avatar (include vanillajs version) 2 | ================= 3 | Let user name become a simple text avatar 4 | #### [Demo] 5 | 6 | ## Usage 7 | 8 | For older version check [here](https://github.com/Knovour/jquery-textavatar/tree/old) 9 | 10 | ```bash 11 | npm i jquery.textavatar 12 | ``` 13 | 14 | Load **textavatar.css** or just merge to your css file. 15 | 16 | ### jQuery 17 | ```html 18 |
19 | 20 | ``` 21 | ```javascript 22 | $('.textavatar').textAvatar() 23 | ``` 24 | #### Auto Create 25 | ```html 26 |
27 | ``` 28 | 29 | 30 | #### Options 31 | There is only **width** and **name** now. 32 | ```javascript 33 | $('DIV-NAME').textAvatar({ 34 | width: 120, //no need to type 'px' 35 | name: NAME HERE 36 | }) 37 | ``` 38 | 39 | ### VanillaJS 40 | ```html 41 |
42 | ``` 43 | 44 | For es6 module 45 | ```javascript 46 | import textAvatar from 'textavatar.js' 47 | 48 | textAvatar(document.querySelector('.textavatar')) 49 | ``` 50 | 51 | For normal usage 52 | ```html 53 | 54 | ``` 55 | 56 | 57 | #### Auto Create 58 | ```html 59 |
60 | ``` 61 | 62 | 63 | #### Options 64 | There is only **width** and **name** now. 65 | ```javascript 66 | textAvatar(document.querySelector('DIV-NAME'), { 67 | width: 120, //no need to type 'px' 68 | name: NAME HERE 69 | }) 70 | ``` 71 | 72 | ## MIT License 73 | 74 | [Demo]: http://knovour.github.io/jquery-textavatar 75 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | text avatar demo 6 | 7 | 26 | 27 | 28 |

Try it!

29 | 30 | 31 |
32 | 33 | 34 |
35 |
36 | 37 |

English

38 |
It will show only one word in small size(width < 26px)
39 |
40 |
41 | Steve Rogers 42 |
43 | 44 |
45 |
46 | Tony Stark 47 |
48 | 49 |
50 |
51 | Thor Odinson 52 |
53 | 54 |
55 |
56 | Bruce Banner 57 |
58 | 59 |
60 |
61 | Natasha Romanoff 62 |
63 | 64 |
65 |
66 | Clint Barton 67 |
68 | 69 |
70 |
71 | Jarvis 72 |
73 | 74 |
75 |
76 | Loki Laufeyson 77 |
78 | 79 |

Chinese 中文

80 |
It will show only one word in Chinese. 中文字僅顯示一個字。
81 |
82 |
83 | 強尼戴普 84 |
85 |
86 |
87 | 莫那魯道 88 |
89 |
90 |
91 | 無名氏 92 |
93 |
94 |
95 | 某某人 96 |
97 |
98 |
99 | 水母 100 |
101 | 102 | 103 | 104 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /jquery.textavatar.js: -------------------------------------------------------------------------------- 1 | // https://github.com/Knovour/jquery-textavatar 2 | 3 | ;($ => { 4 | const ONE_WORD_WIDTH = 26 5 | const ASIA_CHAR_REG = /[\u4E00-\u9FA5\uF900-\uFA2D]/ig //check Chinese, Japenese & Korean character 6 | 7 | $.fn.textAvatar = function (options = {}) { 8 | $(this).each(function () { 9 | if (!$(this).data('name') && !options.name) 10 | return 11 | 12 | const defaultOptions = { 13 | name: (options.name || $(this).data('name')).trim(), 14 | width: parseFloat(options.width || $(this).width()) 15 | } 16 | 17 | const name = defaultOptions.name 18 | .replace(/ +/g, ' ') // Replace multi space to one space, prevent typing error 19 | .trim() 20 | .toUpperCase() 21 | .split(' ') 22 | 23 | const isTwoWord = !ASIA_CHAR_REG.test(defaultOptions.name) && name.length > 1 && defaultOptions.width > ONE_WORD_WIDTH 24 | const avatarContent = isTwoWord ? `${name[0][0]}${name[name.length - 1][0]}` : name[0][0] 25 | 26 | $(this) 27 | .html(`${avatarContent}`) 28 | .css({ 29 | width: defaultOptions.width, 30 | height: defaultOptions.width, 31 | 'font-size': `${defaultOptions.width * 0.4}px` 32 | }) 33 | }) 34 | } 35 | })(jQuery) 36 | 37 | $(() => $('[data-toggle="textavatar"]').textAvatar()) 38 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-textavatar", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "@types/estree": { 8 | "version": "0.0.39", 9 | "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", 10 | "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==", 11 | "dev": true 12 | }, 13 | "@types/node": { 14 | "version": "11.13.4", 15 | "resolved": "https://registry.npmjs.org/@types/node/-/node-11.13.4.tgz", 16 | "integrity": "sha512-+rabAZZ3Yn7tF/XPGHupKIL5EcAbrLxnTr/hgQICxbeuAfWtT0UZSfULE+ndusckBItcv4o6ZeOJplQikVcLvQ==", 17 | "dev": true 18 | }, 19 | "acorn": { 20 | "version": "6.1.1", 21 | "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.1.1.tgz", 22 | "integrity": "sha512-jPTiwtOxaHNaAPg/dmrJ/beuzLRnXtB0kQPQ8JpotKJgTB6rX6c8mlf315941pyjBSaPg8NHXS9fhP4u17DpGA==", 23 | "dev": true 24 | }, 25 | "rollup": { 26 | "version": "1.10.0", 27 | "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.10.0.tgz", 28 | "integrity": "sha512-U9t/JaKtO0+X0pSmLVKMrAZEixrbVzITf193TiEhfoVKCnd7pDimIFo94IxUCgbn6+v5VmduHkubx2VV1s0Ftw==", 29 | "dev": true, 30 | "requires": { 31 | "@types/estree": "0.0.39", 32 | "@types/node": "^11.13.4", 33 | "acorn": "^6.1.1" 34 | } 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-textavatar", 3 | "version": "1.0.1", 4 | "description": "Let user name become an simple text avatar", 5 | "main": "jquery.textavatar.js", 6 | "scripts": { 7 | "build:iife": "rollup textavatar.js --file textavatar.iife.js --format iife --name textAvatar", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/Knovour/jquery-textavatar.git" 13 | }, 14 | "author": "Knovour", 15 | "license": "MIT", 16 | "bugs": { 17 | "url": "https://github.com/Knovour/jquery-textavatar/issues" 18 | }, 19 | "homepage": "https://github.com/Knovour/jquery-textavatar#readme", 20 | "devDependencies": { 21 | "rollup": "^1.10.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /textavatar.css: -------------------------------------------------------------------------------- 1 | [data-toggle="textavatar"], 2 | .textavatar { 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | } 7 | 8 | [data-toggle="textavatar"] abbr, 9 | .textavatar abbr { 10 | font-weight: bold; 11 | line-height: 1; 12 | letter-spacing: .1em; 13 | text-indent: .1em; 14 | text-decoration: none; 15 | 16 | /* Avoid Bootstrap css*/ 17 | border-bottom: 0 !important; 18 | cursor: default !important; 19 | } 20 | -------------------------------------------------------------------------------- /textavatar.iife.js: -------------------------------------------------------------------------------- 1 | var textAvatar = (function () { 2 | 'use strict'; 3 | 4 | const _textAvatar = ($elems, options = {}) => { 5 | const ONE_WORD_WIDTH = 26; 6 | const ASIA_CHAR_REG = /[\u4E00-\u9FA5\uF900-\uFA2D]/ig; //check Chinese, Japenese & Korean character 7 | 8 | const $targets = $elems.length ? $elems : [$elems]; 9 | $targets.forEach($elem => { 10 | if ((!$elem.dataset || !$elem.dataset.name) && !options.name) 11 | return 12 | 13 | const defaultOptions = { 14 | name: (options.name || $elem.dataset.name.trim()), 15 | width: parseFloat(options.width || $elem.offsetWidth) 16 | }; 17 | 18 | const name = defaultOptions.name 19 | .replace(/ +/g, ' ') // Replace multi space to one space, prevent typing error 20 | .trim() 21 | .toUpperCase() 22 | .split(' '); 23 | 24 | const isTwoWord = !ASIA_CHAR_REG.test(defaultOptions.name) && name.length > 1 && defaultOptions.width > ONE_WORD_WIDTH; 25 | const avatarContent = isTwoWord ? `${name[0][0]}${name[name.length - 1][0]}` : name[0][0]; 26 | 27 | $elem.innerHTML = `${avatarContent}`; 28 | $elem.style.width = `${defaultOptions.width}px`; 29 | $elem.style.height = `${defaultOptions.width}px`; 30 | $elem.style.fontSize = `${defaultOptions.width * 0.4}px`; 31 | }); 32 | }; 33 | 34 | document.addEventListener('DOMContentLoaded', () => _textAvatar(document.querySelectorAll('[data-toggle="textavatar"]'))); 35 | 36 | return _textAvatar; 37 | 38 | }()); 39 | -------------------------------------------------------------------------------- /textavatar.js: -------------------------------------------------------------------------------- 1 | const _textAvatar = ($elems, options = {}) => { 2 | const ONE_WORD_WIDTH = 26 3 | const ASIA_CHAR_REG = /[\u4E00-\u9FA5\uF900-\uFA2D]/ig //check Chinese, Japenese & Korean character 4 | 5 | const $targets = $elems.length ? $elems : [$elems] 6 | $targets.forEach($elem => { 7 | if ((!$elem.dataset || !$elem.dataset.name) && !options.name) 8 | return 9 | 10 | const defaultOptions = { 11 | name: (options.name || $elem.dataset.name.trim()), 12 | width: parseFloat(options.width || $elem.offsetWidth) 13 | } 14 | 15 | const name = defaultOptions.name 16 | .replace(/ +/g, ' ') // Replace multi space to one space, prevent typing error 17 | .trim() 18 | .toUpperCase() 19 | .split(' ') 20 | 21 | const isTwoWord = !ASIA_CHAR_REG.test(defaultOptions.name) && name.length > 1 && defaultOptions.width > ONE_WORD_WIDTH 22 | const avatarContent = isTwoWord ? `${name[0][0]}${name[name.length - 1][0]}` : name[0][0] 23 | 24 | $elem.innerHTML = `${avatarContent}` 25 | $elem.style.width = `${defaultOptions.width}px` 26 | $elem.style.height = `${defaultOptions.width}px` 27 | $elem.style.fontSize = `${defaultOptions.width * 0.4}px` 28 | }) 29 | } 30 | 31 | document.addEventListener('DOMContentLoaded', () => _textAvatar(document.querySelectorAll('[data-toggle="textavatar"]'))) 32 | 33 | export default _textAvatar 34 | --------------------------------------------------------------------------------