[Common] dynamically insert svg into developer html
This commit is contained in:
Maxim Kadushkin
parent
6ea33aa303
commit
d223649a8a
30
apps/common/main/resources/img/header/buttons.svg
Normal file
30
apps/common/main/resources/img/header/buttons.svg
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="20px" height="60px" viewBox="0 0 20 60" enable-background="new 0 0 20 60" xml:space="preserve">
|
||||
<symbol id="svg-btn-comments" viewBox="0 0 20 20">
|
||||
<path d="M16,4H4C3.45,4,3,4.45,3,5v9c0,0.55,0.45,1,1,1h2l2,2h1l2-2h5c0.55,0,1-0.45,1-1V5C17,4.45,16.55,4,16,4zM16,14h-5h-0.414l-2,2H8.414l-2-2H6H4V5h12V14z"/>
|
||||
<rect x="6" y="7" width="8" height="1"/>
|
||||
<rect x="6" y="9" width="8" height="1"/>
|
||||
<rect x="6" y="11" width="8" height="1"/>
|
||||
</symbol>
|
||||
<symbol id="svg-btn-goback" viewBox="0 20 20 20">
|
||||
<path d="M17,26h-6v-1c0-0.553-0.448-1-1-1H3c-0.552,0-1,0.447-1,1v11c0,0.553,0.448,1,1,1h14c0.552,0,1-0.447,1-1v-9C18,26.447,17.552,26,17,26z M17,36H3V25h7v1c0,0.553,0.448,1,1,1h6v1V36z"/>
|
||||
<polygon points="13,31 10,28 10,30 6,30 6,32 10,32 10,34 "/>
|
||||
</symbol>
|
||||
<symbol id="svg-btn-users" viewBox="0 0 20 20">
|
||||
<path d="M16.469,14.184l-0.161-1.113c0.658-0.479,1.118-1.524,1.118-2.319c0-1.092-0.863-2.013-1.926-2.013c-1.063,0-1.925,0.868-1.925,1.961c0,0.795,0.46,1.766,1.118,2.242l-0.162,1.247c-0.461,0.039-0.863,0.108-1.214,0.215
|
||||
c-0.886-1.419-2.496-2.061-3.997-2.226l-0.129-0.844c0.903-0.804,1.559-2.239,1.559-3.48c0-1.85-1.458-3.354-3.25-3.354S4.25,5.985,4.25,7.811c0,1.23,0.644,2.616,1.562,3.419l-0.135,0.952C3.459,12.427,1,13.705,1,17h18
|
||||
C19,16,18.387,14.345,16.469,14.184z M2.517,16c0.136-1.908,1.116-2.647,3.642-2.86l0.397-0.033l0.328-2.317L6.64,10.612C5.86,10.048,5.25,8.816,5.25,7.811C5.25,6.536,6.26,5.5,7.5,5.5s2.25,1.056,2.25,2.354c0,1.024-0.624,2.312-1.391,2.868L8.113,10.9
|
||||
l0.337,2.202l0.393,0.033c2.525,0.213,3.505,0.952,3.641,2.864H2.517z"/>
|
||||
</symbol>
|
||||
<symbol id="svg-btn-download" viewBox="0 0 20 20">
|
||||
<rect x="4" y="16" width="12" height="1"/>
|
||||
<polygon points="14.243,7.585 11,10.829 11,4 9,4 9,10.827 5.758,7.585 4.344,9 10.001,14.656 15.657,9 "/>
|
||||
</symbol>
|
||||
<symbol id="svg-btn-print" viewBox="0 0 20 20">
|
||||
<rect x="7" y="12" width="5" height="1"/>
|
||||
<rect x="7" y="14" width="5" height="1"/>
|
||||
<path d="M16,7h-2V5c0-0.552-0.447-1-1-1H6C5.448,4,5,4.448,5,5v2H3C2.448,7,2,7.448,2,8v5c0,0.553,0.448,1,1,1h2v2
|
||||
c0,0.553,0.448,1,1,1h7c0.553,0,1-0.447,1-1v-2h2c0.553,0,1-0.447,1-1V8C17,7.448,16.553,7,16,7z M6,5h7v2H6V5z M5,13H3v-2h2V13z
|
||||
M13,16H6v-5h7V16z M16,13h-2v-2h2V13z M3,10V8h13v2H3z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -260,24 +260,12 @@
|
|||
<body>
|
||||
<div id="viewport"></div>
|
||||
|
||||
<svg style="display: none;">
|
||||
<symbol id="svg-btn-comments" viewBox="0 0 20 20">
|
||||
<path d="M16,4H4C3.45,4,3,4.45,3,5v9c0,0.55,0.45,1,1,1h2l2,2h1l2-2h5c0.55,0,1-0.45,1-1V5C17,4.45,16.55,4,16,4zM16,14h-5h-0.414l-2,2H8.414l-2-2H6H4V5h12V14z"/>
|
||||
<rect x="6" y="7" width="8" height="1"/>
|
||||
<rect x="6" y="9" width="8" height="1"/>
|
||||
<rect x="6" y="11" width="8" height="1"/>
|
||||
</symbol>
|
||||
<symbol id="svg-btn-goback" viewBox="0 20 20 20">
|
||||
<path d="M17,26h-6v-1c0-0.553-0.448-1-1-1H3c-0.552,0-1,0.447-1,1v11c0,0.553,0.448,1,1,1h14c0.552,0,1-0.447,1-1v-9C18,26.447,17.552,26,17,26z M17,36H3V25h7v1c0,0.553,0.448,1,1,1h6v1V36z"/>
|
||||
<polygon points="13,31 10,28 10,30 6,30 6,32 10,32 10,34 "/>
|
||||
</symbol>
|
||||
<symbol id="svg-btn-users" viewBox="0 0 20 20">
|
||||
<path d="M16.469,14.184l-0.161-1.113c0.658-0.479,1.118-1.524,1.118-2.319c0-1.092-0.863-2.013-1.926-2.013c-1.063,0-1.925,0.868-1.925,1.961c0,0.795,0.46,1.766,1.118,2.242l-0.162,1.247c-0.461,0.039-0.863,0.108-1.214,0.215
|
||||
c-0.886-1.419-2.496-2.061-3.997-2.226l-0.129-0.844c0.903-0.804,1.559-2.239,1.559-3.48c0-1.85-1.458-3.354-3.25-3.354S4.25,5.985,4.25,7.811c0,1.23,0.644,2.616,1.562,3.419l-0.135,0.952C3.459,12.427,1,13.705,1,17h18
|
||||
C19,16,18.387,14.345,16.469,14.184z M2.517,16c0.136-1.908,1.116-2.647,3.642-2.86l0.397-0.033l0.328-2.317L6.64,10.612C5.86,10.048,5.25,8.816,5.25,7.811C5.25,6.536,6.26,5.5,7.5,5.5s2.25,1.056,2.25,2.354c0,1.024-0.624,2.312-1.391,2.868L8.113,10.9
|
||||
l0.337,2.202l0.393,0.033c2.525,0.213,3.505,0.952,3.641,2.864H2.517z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
<script src="../../../vendor/svg-injector/svg-injector.min.js"></script>
|
||||
<img class="inline-svg" src="../../common/main/resources/img/header/buttons.svg">
|
||||
<script>
|
||||
var svgpoints = document.querySelectorAll('img.inline-svg');
|
||||
SVGInjector(svgpoints);
|
||||
</script>
|
||||
|
||||
<!-- debug begin -->
|
||||
<script type="text/javascript">var less=less||{};less.env='development';</script>
|
||||
|
|
|
|||
|
|
@ -259,26 +259,12 @@
|
|||
<body>
|
||||
<div id="viewport"></div>
|
||||
|
||||
<svg style="display: none;">
|
||||
<symbol id="svg-btn-comments" viewBox="0 0 20 20">
|
||||
<path d="M16,4H4C3.45,4,3,4.45,3,5v9c0,0.55,0.45,1,1,1h2l2,2h1l2-2h5c0.55,0,1-0.45,1-1V5C17,4.45,16.55,4,16,4z
|
||||
M16,14h-5h-0.414l-2,2H8.414l-2-2H6H4V5h12V14z"/>
|
||||
<rect x="6" y="7" width="8" height="1"/>
|
||||
<rect x="6" y="9" width="8" height="1"/>
|
||||
<rect x="6" y="11" width="8" height="1"/>
|
||||
</symbol>
|
||||
<symbol id="svg-btn-goback" viewBox="0 20 20 20">
|
||||
<path d="M17,26h-6v-1c0-0.553-0.448-1-1-1H3c-0.552,0-1,0.447-1,1v11c0,0.553,0.448,1,1,1h14
|
||||
c0.552,0,1-0.447,1-1v-9C18,26.447,17.552,26,17,26z M17,36H3V25h7v1c0,0.553,0.448,1,1,1h6v1V36z"/>
|
||||
<polygon points="13,31 10,28 10,30 6,30 6,32 10,32 10,34 "/>
|
||||
</symbol>
|
||||
<symbol id="svg-btn-users" viewBox="0 0 20 20">
|
||||
<path d="M16.469,14.184l-0.161-1.113c0.658-0.479,1.118-1.524,1.118-2.319c0-1.092-0.863-2.013-1.926-2.013c-1.063,0-1.925,0.868-1.925,1.961c0,0.795,0.46,1.766,1.118,2.242l-0.162,1.247c-0.461,0.039-0.863,0.108-1.214,0.215
|
||||
c-0.886-1.419-2.496-2.061-3.997-2.226l-0.129-0.844c0.903-0.804,1.559-2.239,1.559-3.48c0-1.85-1.458-3.354-3.25-3.354S4.25,5.985,4.25,7.811c0,1.23,0.644,2.616,1.562,3.419l-0.135,0.952C3.459,12.427,1,13.705,1,17h18
|
||||
C19,16,18.387,14.345,16.469,14.184z M2.517,16c0.136-1.908,1.116-2.647,3.642-2.86l0.397-0.033l0.328-2.317L6.64,10.612C5.86,10.048,5.25,8.816,5.25,7.811C5.25,6.536,6.26,5.5,7.5,5.5s2.25,1.056,2.25,2.354c0,1.024-0.624,2.312-1.391,2.868L8.113,10.9
|
||||
l0.337,2.202l0.393,0.033c2.525,0.213,3.505,0.952,3.641,2.864H2.517z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
<script src="../../../vendor/svg-injector/svg-injector.min.js"></script>
|
||||
<img class="inline-svg" src="../../common/main/resources/img/header/buttons.svg">
|
||||
<script>
|
||||
var svgpoints = document.querySelectorAll('img.inline-svg');
|
||||
SVGInjector(svgpoints);
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
|
||||
|
|
|
|||
|
|
@ -261,25 +261,12 @@
|
|||
|
||||
<div id="viewport"></div>
|
||||
|
||||
<svg style="display: none;">
|
||||
<symbol id="svg-btn-comments" viewBox="0 0 20 20">
|
||||
<path d="M16,4H4C3.45,4,3,4.45,3,5v9c0,0.55,0.45,1,1,1h2l2,2h1l2-2h5c0.55,0,1-0.45,1-1V5C17,4.45,16.55,4,16,4zM16,14h-5h-0.414l-2,2H8.414l-2-2H6H4V5h12V14z"/>
|
||||
<rect x="6" y="7" width="8" height="1"/>
|
||||
<rect x="6" y="9" width="8" height="1"/>
|
||||
<rect x="6" y="11" width="8" height="1"/>
|
||||
</symbol>
|
||||
<symbol id="svg-btn-goback" viewBox="0 20 20 20">
|
||||
<path d="M17,26h-6v-1c0-0.553-0.448-1-1-1H3c-0.552,0-1,0.447-1,1v11c0,0.553,0.448,1,1,1h14c0.552,0,1-0.447,1-1v-9C18,26.447,17.552,26,17,26z M17,36H3V25h7v1c0,0.553,0.448,1,1,1h6v1V36z"/>
|
||||
<polygon points="13,31 10,28 10,30 6,30 6,32 10,32 10,34 "/>
|
||||
</symbol>
|
||||
<symbol id="svg-btn-users" viewBox="0 0 20 20">
|
||||
<path d="M16.469,14.184l-0.161-1.113c0.658-0.479,1.118-1.524,1.118-2.319c0-1.092-0.863-2.013-1.926-2.013c-1.063,0-1.925,0.868-1.925,1.961c0,0.795,0.46,1.766,1.118,2.242l-0.162,1.247c-0.461,0.039-0.863,0.108-1.214,0.215
|
||||
c-0.886-1.419-2.496-2.061-3.997-2.226l-0.129-0.844c0.903-0.804,1.559-2.239,1.559-3.48c0-1.85-1.458-3.354-3.25-3.354S4.25,5.985,4.25,7.811c0,1.23,0.644,2.616,1.562,3.419l-0.135,0.952C3.459,12.427,1,13.705,1,17h18
|
||||
C19,16,18.387,14.345,16.469,14.184z M2.517,16c0.136-1.908,1.116-2.647,3.642-2.86l0.397-0.033l0.328-2.317L6.64,10.612C5.86,10.048,5.25,8.816,5.25,7.811C5.25,6.536,6.26,5.5,7.5,5.5s2.25,1.056,2.25,2.354c0,1.024-0.624,2.312-1.391,2.868L8.113,10.9
|
||||
l0.337,2.202l0.393,0.033c2.525,0.213,3.505,0.952,3.641,2.864H2.517z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<script src="../../../vendor/svg-injector/svg-injector.min.js"></script>
|
||||
<img class="inline-svg" src="../../common/main/resources/img/header/buttons.svg">
|
||||
<script>
|
||||
var svgpoints = document.querySelectorAll('img.inline-svg');
|
||||
SVGInjector(svgpoints);
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
window.g_debug_mode = true;
|
||||
|
|
|
|||
1
vendor/svg-injector/svg-injector.map.js
vendored
Normal file
1
vendor/svg-injector/svg-injector.map.js
vendored
Normal file
File diff suppressed because one or more lines are too long
9
vendor/svg-injector/svg-injector.min.js
vendored
Normal file
9
vendor/svg-injector/svg-injector.min.js
vendored
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
/**
|
||||
* SVGInjector v1.1.3 - Fast, caching, dynamic inline SVG DOM injection library
|
||||
* https://github.com/iconic/SVGInjector
|
||||
*
|
||||
* Copyright (c) 2014-2015 Waybury <hello@waybury.com>
|
||||
* @license MIT
|
||||
*/
|
||||
!function(t,e){"use strict";function r(t){t=t.split(" ");for(var e={},r=t.length,n=[];r--;)e.hasOwnProperty(t[r])||(e[t[r]]=1,n.unshift(t[r]));return n.join(" ")}var n="file:"===t.location.protocol,i=e.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1"),o=Array.prototype.forEach||function(t,e){if(void 0===this||null===this||"function"!=typeof t)throw new TypeError;var r,n=this.length>>>0;for(r=0;n>r;++r)r in this&&t.call(e,this[r],r,this)},a={},l=0,s=[],u=[],c={},f=function(t){return t.cloneNode(!0)},p=function(t,e){u[t]=u[t]||[],u[t].push(e)},d=function(t){for(var e=0,r=u[t].length;r>e;e++)!function(e){setTimeout(function(){u[t][e](f(a[t]))},0)}(e)},v=function(e,r){if(void 0!==a[e])a[e]instanceof SVGSVGElement?r(f(a[e])):p(e,r);else{if(!t.XMLHttpRequest)return r("Browser does not support XMLHttpRequest"),!1;a[e]={},p(e,r);var i=new XMLHttpRequest;i.onreadystatechange=function(){if(4===i.readyState){if(404===i.status||null===i.responseXML)return r("Unable to load SVG file: "+e),n&&r("Note: SVG injection ajax calls do not work locally without adjusting security setting in your browser. Or consider using a local webserver."),r(),!1;if(!(200===i.status||n&&0===i.status))return r("There was a problem injecting the SVG: "+i.status+" "+i.statusText),!1;if(i.responseXML instanceof Document)a[e]=i.responseXML.documentElement;else if(DOMParser&&DOMParser instanceof Function){var t;try{var o=new DOMParser;t=o.parseFromString(i.responseText,"text/xml")}catch(l){t=void 0}if(!t||t.getElementsByTagName("parsererror").length)return r("Unable to parse SVG file: "+e),!1;a[e]=t.documentElement}d(e)}},i.open("GET",e),i.overrideMimeType&&i.overrideMimeType("text/xml"),i.send()}},h=function(e,n,a,u){var f=e.getAttribute("data-src")||e.getAttribute("src");if(!/\.svg/i.test(f))return void u("Attempted to inject a file with a non-svg extension: "+f);if(!i){var p=e.getAttribute("data-fallback")||e.getAttribute("data-png");return void(p?(e.setAttribute("src",p),u(null)):a?(e.setAttribute("src",a+"/"+f.split("/").pop().replace(".svg",".png")),u(null)):u("This browser does not support SVG and no PNG fallback was defined."))}-1===s.indexOf(e)&&(s.push(e),e.setAttribute("src",""),v(f,function(i){if("undefined"==typeof i||"string"==typeof i)return u(i),!1;var a=e.getAttribute("id");a&&i.setAttribute("id",a);var p=e.getAttribute("title");p&&i.setAttribute("title",p);var d=[].concat(i.getAttribute("class")||[],"injected-svg",e.getAttribute("class")||[]).join(" ");i.setAttribute("class",r(d));var v=e.getAttribute("style");v&&i.setAttribute("style",v);var h=[].filter.call(e.attributes,function(t){return/^data-\w[\w\-]*$/.test(t.name)});o.call(h,function(t){t.name&&t.value&&i.setAttribute(t.name,t.value)});var g,m,b,y,A,w={clipPath:["clip-path"],"color-profile":["color-profile"],cursor:["cursor"],filter:["filter"],linearGradient:["fill","stroke"],marker:["marker","marker-start","marker-mid","marker-end"],mask:["mask"],pattern:["fill","stroke"],radialGradient:["fill","stroke"]};Object.keys(w).forEach(function(t){g=t,b=w[t],m=i.querySelectorAll("defs "+g+"[id]");for(var e=0,r=m.length;r>e;e++){y=m[e].id,A=y+"-"+l;var n;o.call(b,function(t){n=i.querySelectorAll("["+t+'*="'+y+'"]');for(var e=0,r=n.length;r>e;e++)n[e].setAttribute(t,"url(#"+A+")")}),m[e].id=A}}),i.removeAttribute("xmlns:a");for(var x,S,k=i.querySelectorAll("script"),j=[],G=0,T=k.length;T>G;G++)S=k[G].getAttribute("type"),S&&"application/ecmascript"!==S&&"application/javascript"!==S||(x=k[G].innerText||k[G].textContent,j.push(x),i.removeChild(k[G]));if(j.length>0&&("always"===n||"once"===n&&!c[f])){for(var M=0,V=j.length;V>M;M++)new Function(j[M])(t);c[f]=!0}var E=i.querySelectorAll("style");o.call(E,function(t){t.textContent+=""}),e.parentNode.replaceChild(i,e),delete s[s.indexOf(e)],e=null,l++,u(i)}))},g=function(t,e,r){e=e||{};var n=e.evalScripts||"always",i=e.pngFallback||!1,a=e.each;if(void 0!==t.length){var l=0;o.call(t,function(e){h(e,n,i,function(e){a&&"function"==typeof a&&a(e),r&&t.length===++l&&r(l)})})}else t?h(t,n,i,function(e){a&&"function"==typeof a&&a(e),r&&r(1),t=null}):r&&r(0)};"object"==typeof module&&"object"==typeof module.exports?module.exports=exports=g:"function"==typeof define&&define.amd?define(function(){return g}):"object"==typeof t&&(t.SVGInjector=g)}(window,document);
|
||||
//# sourceMappingURL=svg-injector.map.js
|
||||
Loading…
Reference in a new issue