123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485 |
-
- (function($) {
- var svg_icons = {}, fixIDs;
- $.svgIcons = function(file, opts) {
- var svgns = "http://www.w3.org/2000/svg",
- xlinkns = "http://www.w3.org/1999/xlink",
- icon_w = opts.w?opts.w : 24,
- icon_h = opts.h?opts.h : 24,
- elems, svgdoc, testImg,
- icons_made = false, data_loaded = false, load_attempts = 0,
- ua = navigator.userAgent, isOpera = !!window.opera, isSafari = (ua.indexOf('Safari/') > -1 && ua.indexOf('Chrome/')==-1),
- data_pre = 'data:image/svg+xml;charset=utf-8;base64,';
-
- if(opts.svgz) {
- var data_el = $('<object data="' + file + '" type=image/svg+xml>').appendTo('body').hide();
- try {
- svgdoc = data_el[0].contentDocument;
- data_el.load(getIcons);
- getIcons(0, true);
- } catch(err1) {
- useFallback();
- }
- } else {
- var parser = new DOMParser();
- $.ajax({
- url: file,
- dataType: 'string',
- success: function(data) {
- if(!data) {
- $(useFallback);
- return;
- }
- svgdoc = parser.parseFromString(data, "text/xml");
- $(function() {
- getIcons('ajax');
- });
- },
- error: function(err) {
-
- if(window.opera) {
- $(function() {
- useFallback();
- });
- } else {
- if(err.responseText) {
- svgdoc = parser.parseFromString(err.responseText, "text/xml");
- if(!svgdoc.childNodes.length) {
- $(useFallback);
- }
- $(function() {
- getIcons('ajax');
- });
- } else {
- $(useFallback);
- }
- }
- }
- });
- }
-
- function getIcons(evt, no_wait) {
- if(evt !== 'ajax') {
- if(data_loaded) return;
-
-
-
- svgdoc = data_el[0].contentDocument;
- var isReady = (svgdoc && svgdoc.getElementById('svg_eof'));
- if(!isReady && !(no_wait && isReady)) {
- load_attempts++;
- if(load_attempts < 50) {
- setTimeout(getIcons, 20);
- } else {
- useFallback();
- data_loaded = true;
- }
- return;
- }
- data_loaded = true;
- }
-
- elems = $(svgdoc.firstChild).children();
-
- if(!opts.no_img) {
- var testSrc = data_pre + 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D';
-
- testImg = $(new Image()).attr({
- src: testSrc,
- width: 0,
- height: 0
- }).appendTo('body')
- .load(function () {
-
- makeIcons(true);
- }).error(function () {
- makeIcons();
- });
- } else {
- setTimeout(function() {
- if(!icons_made) makeIcons();
- },500);
- }
- }
-
- var setIcon = function(target, icon, id, setID) {
- if(isOpera) icon.css('visibility','hidden');
- if(opts.replace) {
- if(setID) icon.attr('id',id);
- var cl = target.attr('class');
- if(cl) icon.attr('class','svg_icon '+cl);
- target.replaceWith(icon);
- } else {
-
- target.append(icon);
- }
- if(isOpera) {
- setTimeout(function() {
- icon.removeAttr('style');
- },1);
- }
- };
-
- var addIcon = function(icon, id) {
- if(opts.id_match === undefined || opts.id_match !== false) {
- setIcon(holder, icon, id, true);
- }
- svg_icons[id] = icon;
- };
-
- function makeIcons(toImage, fallback) {
- if(icons_made) return;
- if(opts.no_img) toImage = false;
- var holder, temp_holder;
-
- if(toImage) {
- temp_holder = $(document.createElement('div'));
- temp_holder.hide().appendTo('body');
- }
- if(fallback) {
- var path = opts.fallback_path?opts.fallback_path:'';
- $.each(fallback, function(id, imgsrc) {
- holder = $('#' + id);
- var icon = $(new Image())
- .attr({
- 'class':'svg_icon',
- src: path + imgsrc,
- 'width': icon_w,
- 'height': icon_h,
- 'alt': 'icon'
- });
-
- addIcon(icon, id);
- });
- } else {
- var len = elems.length;
- for(var i = 0; i < len; i++) {
- var elem = elems[i];
- var id = elem.id;
- if(id === 'svg_eof') break;
- holder = $('#' + id);
- var svg = elem.getElementsByTagNameNS(svgns, 'svg')[0];
- var svgroot = document.createElementNS(svgns, "svg");
-
-
- svgroot.setAttributeNS(null, 'viewBox', [0,0,icon_w,icon_h].join(' '));
-
-
- var w = svg.getAttribute('width');
- var h = svg.getAttribute('height');
- svg.removeAttribute('width');
- svg.removeAttribute('height');
-
- var vb = svg.getAttribute('viewBox');
- if(!vb) {
- svg.setAttribute('viewBox', [0,0,w,h].join(' '));
- }
-
-
- svgroot.setAttribute('xmlns', svgns);
- svgroot.setAttribute('width', icon_w);
- svgroot.setAttribute('height', icon_h);
- svgroot.setAttribute("xmlns:xlink", xlinkns);
- svgroot.setAttribute("class", 'svg_icon');
-
-
- if(!isOpera) svg = svg.cloneNode(true);
-
- svgroot.appendChild(svg);
- var icon;
- if(toImage) {
- temp_holder.empty().append(svgroot);
- var str = data_pre + encode64(unescape(encodeURIComponent(new XMLSerializer().serializeToString(svgroot))));
- icon = $(new Image())
- .attr({'class':'svg_icon', src:str});
- } else {
- icon = fixIDs($(svgroot), i);
- }
- addIcon(icon, id);
- }
- }
-
- if(opts.placement) {
- $.each(opts.placement, function(sel, id) {
- if(!svg_icons[id]) return;
- $(sel).each(function(i) {
- var copy = svg_icons[id].clone();
- if(i > 0 && !toImage) copy = fixIDs(copy, i, true);
- setIcon($(this), copy, id);
- });
- });
- }
- if(!fallback) {
- if(toImage) temp_holder.remove();
- if(data_el) data_el.remove();
- if(testImg) testImg.remove();
- }
- if(opts.resize) $.resizeSvgIcons(opts.resize);
- icons_made = true;
- if(opts.callback) opts.callback(svg_icons);
- }
-
- fixIDs = function(svg_el, svg_num, force) {
- var defs = svg_el.find('defs');
- if(!defs.length) return svg_el;
- var id_elems;
- if(isOpera) {
- id_elems = defs.find('*').filter(function() {
- return !!this.id;
- });
- } else {
- id_elems = defs.find('[id]');
- }
-
- var all_elems = svg_el[0].getElementsByTagName('*'), len = all_elems.length;
-
- id_elems.each(function(i) {
- var id = this.id;
- var no_dupes = ($(svgdoc).find('#' + id).length <= 1);
- if(isOpera) no_dupes = false;
-
- var new_id = 'x' + id + svg_num + i;
- this.id = new_id;
-
- var old_val = 'url(#' + id + ')';
- var new_val = 'url(#' + new_id + ')';
-
-
- for(i = 0; i < len; i++) {
- var elem = all_elems[i];
- if(elem.getAttribute('fill') === old_val) {
- elem.setAttribute('fill', new_val);
- }
- if(elem.getAttribute('stroke') === old_val) {
- elem.setAttribute('stroke', new_val);
- }
- if(elem.getAttribute('filter') === old_val) {
- elem.setAttribute('filter', new_val);
- }
- }
- });
- return svg_el;
- };
-
- function useFallback() {
- if(file.indexOf('.svgz') != -1) {
- var reg_file = file.replace('.svgz','.svg');
- if(window.console) {
- console.log('.svgz failed, trying with .svg');
- }
- $.svgIcons(reg_file, opts);
- } else if(opts.fallback) {
- makeIcons(false, opts.fallback);
- }
- }
-
- function encode64(input) {
-
- if(window.btoa) return window.btoa(input);
- var _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
- var output = new Array( Math.floor( (input.length + 2) / 3 ) * 4 );
- var chr1, chr2, chr3;
- var enc1, enc2, enc3, enc4;
- var i = 0, p = 0;
-
- do {
- chr1 = input.charCodeAt(i++);
- chr2 = input.charCodeAt(i++);
- chr3 = input.charCodeAt(i++);
-
- enc1 = chr1 >> 2;
- enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
- enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
- enc4 = chr3 & 63;
-
- if (isNaN(chr2)) {
- enc3 = enc4 = 64;
- } else if (isNaN(chr3)) {
- enc4 = 64;
- }
-
- output[p++] = _keyStr.charAt(enc1);
- output[p++] = _keyStr.charAt(enc2);
- output[p++] = _keyStr.charAt(enc3);
- output[p++] = _keyStr.charAt(enc4);
- } while (i < input.length);
-
- return output.join('');
- }
- };
-
- $.getSvgIcon = function(id, uniqueClone) {
- var icon = svg_icons[id];
- if(uniqueClone && icon) {
- icon = fixIDs(icon, 0, true).clone(true);
- }
- return icon;
- };
-
- $.resizeSvgIcons = function(obj) {
-
- var change_sel = !$('.svg_icon:first').length;
- $.each(obj, function(sel, size) {
- var arr = $.isArray(size);
- var w = arr?size[0]:size,
- h = arr?size[1]:size;
- if(change_sel) {
- sel = sel.replace(/\.svg_icon/g,'svg');
- }
- $(sel).each(function() {
- this.setAttribute('width', w);
- this.setAttribute('height', h);
- if(window.opera && window.widget) {
- this.parentNode.style.width = w + 'px';
- this.parentNode.style.height = h + 'px';
- }
- });
- });
- };
-
- })(jQuery);
|