diff options
author | Morris Jobke <morris.jobke@gmail.com> | 2013-08-28 16:52:12 +0200 |
---|---|---|
committer | Morris Jobke <morris.jobke@gmail.com> | 2013-08-28 16:52:12 +0200 |
commit | ed2fa06a26ad1f43dcf750133cd658638a0e9481 (patch) | |
tree | 5f73ac859d550f466b002d7cf1416c43e42e719d /core/js/placeholder.js | |
parent | 4a00b26029647b5f86d42654f1da99032b1fdf47 (diff) | |
download | nextcloud-server-ed2fa06a26ad1f43dcf750133cd658638a0e9481.tar.gz nextcloud-server-ed2fa06a26ad1f43dcf750133cd658638a0e9481.zip |
reviewers comments
Diffstat (limited to 'core/js/placeholder.js')
-rw-r--r-- | core/js/placeholder.js | 60 |
1 files changed, 60 insertions, 0 deletions
diff --git a/core/js/placeholder.js b/core/js/placeholder.js new file mode 100644 index 00000000000..6a1c653b587 --- /dev/null +++ b/core/js/placeholder.js @@ -0,0 +1,60 @@ +/** + * ownCloud + * + * @author Morris Jobke + * @copyright 2013 Morris Jobke <morris.jobke@gmail.com> + * + * This library is free software; you can redistribute it and/or + * modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE + * License as published by the Free Software Foundation; either + * version 3 of the License, or any later version. + * + * This library is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU AFFERO GENERAL PUBLIC LICENSE for more details. + * + * You should have received a copy of the GNU Affero General Public + * License along with this library. If not, see <http://www.gnu.org/licenses/>. + * + */ + +/* + * Adds a background color to the element called on and adds the first charater + * of the passed in string. This string is also the seed for the generation of + * the background color. + * + * You have following HTML: + * + * <div id="albumart"></div> + * + * And call this from Javascript: + * + * $('#albumart').placeholder('The Album Title'); + * + * Which will result in: + * + * <div id="albumart" style="background-color: rgb(123, 123, 123)">T</div> + * + */ + +(function ($) { + $.fn.placeholder = function(seed) { + var hash = md5(seed), + maxRange = parseInt('ffffffffff', 16), + red = parseInt(hash.substr(0,10), 16) / maxRange * 256, + green = parseInt(hash.substr(10,10), 16) / maxRange * 256, + blue = parseInt(hash.substr(20,10), 16) / maxRange * 256, + rgb = [Math.floor(red), Math.floor(green), Math.floor(blue)]; + this.css('background-color', 'rgb(' + rgb.join(',') + ')'); + + // CSS rules + this.css('color', 'rgb(255, 255, 255)'); + this.css('font-weight', 'bold'); + this.css('text-align', 'center'); + + if(seed !== null && seed.length) { + this.html(seed[0].toUpperCase()); + } + }; +}(jQuery)); |