From be98aac09cfcb9ca8d066884ed9eabc77cda3072 Mon Sep 17 00:00:00 2001 From: uttesh Date: Wed, 24 Jun 2015 00:35:14 +0530 Subject: [PATCH 1/3] Update README.md --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 131ef56..f313ee0 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,8 @@ AngularJS directive for simple data avatar like gmail/inbox. ![demo](https://raw.github.com/uttesh/ngletteravatar/master/demo/kannada.png) ![demo](https://raw.github.com/uttesh/ngletteravatar/master/demo/round_shape_digit_special.png) ![demo](https://raw.github.com/uttesh/ngletteravatar/master/demo/round_chinese_kannada.png) +![demo](https://raw.github.com/uttesh/ngletteravatar/master/demo/avatar_border1.png) +![demo](https://raw.github.com/uttesh/ngletteravatar/master/demo/avatar_border2.png) ## Quick start ``` @@ -60,7 +62,8 @@ name | default | description `fontSize` | 30px | set the font size for the letter `shape` | square | set the shape for the avatar. set 'round' for rounded avatars `fontFamily` | HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica, Arial,Lucida Grande, sans-serif | set the font Family of the avatar. - +`avatarborder` | false | set the avatarborder to 'true' for the white border to avatar. +`avatarcustomborder` | no default value | using this attribute set the custom style to avatar borders i.e "border:5px solid black". ## Contributions From fe55d41c88beadd586451442257d397fbc49d478 Mon Sep 17 00:00:00 2001 From: uttesh Date: Mon, 29 Jun 2015 14:50:49 +0530 Subject: [PATCH 2/3] Update ngletteravatar.js removed console logger --- ngletteravatar.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ngletteravatar.js b/ngletteravatar.js index c5724a4..3587ede 100644 --- a/ngletteravatar.js +++ b/ngletteravatar.js @@ -97,10 +97,10 @@ catalyst.directive('ngLetterAvatar', function() { var base = 'data:image/svg+xml;base64,'; var _style = ''; if(avatarBorderStyle){ - console.log('if avatarBorderStyle'); + _style = avatarBorderStyle; }else if(avatardefaultBorder){ - console.log('if avatardefaultBorder'); + _style = defaultBorder; } @@ -111,7 +111,7 @@ catalyst.directive('ngLetterAvatar', function() { component = ""; } }else{ - console.log("square style"+_style) + component = ""; } element.append(component); From 1936941f151f901c69dd312114e6cae0a5fc773b Mon Sep 17 00:00:00 2001 From: uttesh Date: Tue, 30 Jun 2015 15:28:18 +0530 Subject: [PATCH 3/3] Update ngletteravatar.js --- ngletteravatar.js | 206 ++++++++++++++++++++++------------------------ 1 file changed, 100 insertions(+), 106 deletions(-) diff --git a/ngletteravatar.js b/ngletteravatar.js index 3587ede..d4448e3 100644 --- a/ngletteravatar.js +++ b/ngletteravatar.js @@ -10,113 +10,107 @@ var catalyst = angular.module('ngLetterAvatar', []); catalyst.directive('ngLetterAvatar', function() { - return { - restrict: 'E', - link: function(scope, element, attrs) { + return { + restrict: 'E', + link: function(scope, element, attrs) { - var colors = ["#1abc9c", "#16a085", "#f1c40f", "#f39c12", "#2ecc71", "#27ae60", "#e67e22", "#d35400", "#3498db", "#2980b9", "#e74c3c", "#c0392b", "#9b59b6", "#8e44ad", "#bdc3c7", "#34495e", "#2c3e50", "#95a5a6", "#7f8c8d", "#ec87bf", "#d870ad", "#f69785", "#9ba37e", "#b49255", "#b49255", "#a94136"]; - - var random = ["#8e44ad", "#bdc3c7", "#34495e", "#2c3e50", "#95a5a6", "#7f8c8d", "#ec87bf", "#d870ad", "#f69785", "#9ba37e", "#b49255", "#b49255", "#a94136"]; + var colors = ["#1abc9c", "#16a085", "#f1c40f", "#f39c12", "#2ecc71", "#27ae60", "#e67e22", "#d35400", "#3498db", "#2980b9", "#e74c3c", "#c0392b", "#9b59b6", "#8e44ad", "#bdc3c7", "#34495e", "#2c3e50", "#95a5a6", "#7f8c8d", "#ec87bf", "#d870ad", "#f69785", "#9ba37e", "#b49255", "#b49255", "#a94136"]; - var charCount = attrs.charcount; - var data = attrs.data; - var textColor = '#ffffff'; - var height = attrs.height; - var width = attrs.width; - var fontSize = attrs.fontSize; - var fontWeight = attrs.fontweight; - var fontFamily = attrs.fontfamily; - var avatarBorderStyle = attrs.avatarcustomborder; - var avatardefaultBorder = attrs.avatarborder; - var defaultBorder = "border:5px solid white"; - - var shape = attrs.shape; - if (!charCount) { - charCount = 1; - } - if (!textColor) { - textColor = '#ffffff'; - } - if (!fontSize) { - fontSize = 30; - } - if (!height) { - height = 50; - } - if (!width) { - width = 50; - } - if (!fontWeight) { - fontWeight = 400; - } - if (!fontFamily) { - fontFamily = 'HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica, Arial,Lucida Grande, sans-serif'; - } - var c = data.substr(0, charCount).toUpperCase(); - - var cobj = $('').attr({ - 'y': '50%', - 'x': '50%', - 'dy' : '0.35em', - 'pointer-events':'auto', - 'fill': textColor, - 'font-family': fontFamily - }).html(c).css({ - 'font-weight': fontWeight, - 'font-size': fontSize+'px', - }); - var colorIndex = ''; - var color = ''; - if(c.charCodeAt(0) < 65){ - var letters = '0123456789ABCDEF'.split(''); - var _color = '#'; - for (var i = 0; i < 6; i++ ) { - _color += letters[Math.floor(Math.random() * 16)]; - } - color = _color; - }else{ - colorIndex = Math.floor((c.charCodeAt(0) - 65) % colors.length); - color = colors[colorIndex]; - } - - - var svg = $('').attr({ - 'xmlns': 'http://www.w3.org/2000/svg', - 'pointer-events':'none', - 'width': width, - 'height': height - }).css({ - 'background-color': color, - 'width': width+'px', - 'height': height+'px' - //'border': '5px solid red' - }); - svg.append(cobj); - var svgHtml = window.btoa(unescape(encodeURIComponent($('
').append(svg.clone()).html()))); - var component; - var base = 'data:image/svg+xml;base64,'; - var _style = ''; - if(avatarBorderStyle){ - - _style = avatarBorderStyle; - }else if(avatardefaultBorder){ - - _style = defaultBorder; - } - - if(shape){ - if(shape ==='round'){ - var round_style = "border-radius:30px;"+_style; - console.log("round style"+round_style) - component = ""; - } - }else{ - - component = ""; - } - element.append(component); + var charCount = attrs.charcount; + var data = attrs.data; + var textColor = '#ffffff'; + var height = attrs.height; + var width = attrs.width; + var fontSize = attrs.fontSize; + var fontWeight = attrs.fontweight; + var fontFamily = attrs.fontfamily; + var avatarBorderStyle = attrs.avatarcustomborder; + var avatardefaultBorder = attrs.avatarborder; + var defaultBorder = "border:5px solid white"; + + var shape = attrs.shape; + if (!charCount) { + charCount = 1; + } + if (!textColor) { + textColor = '#ffffff'; + } + if (!fontSize) { + fontSize = 30; + } + if (!height) { + height = 50; + } + if (!width) { + width = 50; + } + if (!fontWeight) { + fontWeight = 400; + } + if (!fontFamily) { + fontFamily = 'HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica, Arial,Lucida Grande, sans-serif'; + } + var c = data.substr(0, charCount).toUpperCase(); + + var cobj = $('').attr({ + 'y': '50%', + 'x': '50%', + 'dy': '0.35em', + 'pointer-events': 'auto', + 'fill': textColor, + 'font-family': fontFamily + }).html(c).css({ + 'font-weight': fontWeight, + 'font-size': fontSize + 'px', + }); + var colorIndex = ''; + var color = ''; + if (c.charCodeAt(0) < 65) { + var letters = '0123456789ABCDEF'.split(''); + var _color = '#'; + for (var i = 0; i < 6; i++) { + _color += letters[Math.floor(Math.random() * 16)]; } - }; - }); + color = _color; + } else { + colorIndex = Math.floor((c.charCodeAt(0) - 65) % colors.length); + color = colors[colorIndex]; + } + + + var svg = $('').attr({ + 'xmlns': 'http://www.w3.org/2000/svg', + 'pointer-events': 'none', + 'width': width, + 'height': height + }).css({ + 'background-color': color, + 'width': width + 'px', + 'height': height + 'px' + //'border': '5px solid red' + }); + svg.append(cobj); + var svgHtml = window.btoa(unescape(encodeURIComponent($('
').append(svg.clone()).html()))); + var component; + var base = 'data:image/svg+xml;base64,'; + var _style = ''; + if (avatarBorderStyle) { + _style = avatarBorderStyle; + } else if (avatardefaultBorder) { + _style = defaultBorder; + } + + if (shape) { + if (shape === 'round') { + var round_style = "border-radius:30px;" + _style; + component = ""; + } + } else { + component = ""; + } + element.append(component); + } + }; +}); + -