EH22/dokuwiki-template-sprintdoc-modified
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

directly embed SVGs for better styling

Browse source 
Now the SVGs are loaded via AJAX and are directly embedded into the
HTML. This allows for styling them via CSS and we can apply proper hover
styles.

The svg dispatcher was extended with an embed option (boolean parameter
'e') which will return an absolute minimum svg with absolutely no
styles.
This commit is contained in:
Andreas Gohr 2017-02-13 16:19:43 +01:00
commit 9fd3d99b8f
3 changed files with 36 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

10
css/area_main-sidebar.less
View file

@ -35,10 +35,12 @@
margin-right: @margin-small;
color: @color-nav;
img {
svg {
width: @icon-size;
height: @icon-size;
filter: grayscale(100%); //fixme maybe we could find a better way
path {
fill: @color-nav;
}
}
}
@ -50,8 +52,8 @@
color: @button_background;
text-decoration: none;
span img {
filter: none;
span svg path {
fill: @button_background;
}
}
}

6
js/sidebar.js
View file

@ -17,11 +17,7 @@ jQuery(function () {
.text(text.substr(0, 1).toUpperCase() + text.substr(1, 1).toLowerCase());
if (data[1]) {
const src = data[1].trim();
const $svg = jQuery('<img>');
$svg.attr('src', DOKU_BASE + 'lib/tpl/sprintdoc/svg.php?svg='+src+'&f=__link__');
$svg.on('load', function () {
$icon.html($svg);
});
$icon.load(DOKU_BASE + 'lib/tpl/sprintdoc/svg.php?svg=' + src + '&e=1'); // directly embed
}
// make the new toggler

31
svg.php
View file

@ -129,12 +129,17 @@ class SVG {
$params = $this->getParameters();
header('Content-Type: image/svg+xml');
$cachekey = md5($file . serialize($params));
$cachekey = md5($file . serialize($params) . filemtime(__FILE__));
$cache = new \cache($cachekey, '.svg');
$cache->_event = 'SVG_CACHE';
http_cached($cache->cache, $cache->useCache(array('files' => array($file, __FILE__))));
http_cached_finish($cache->cache, $this->generateSVG($file, $params));
if($params['e']) {
$content = $this->embedSVG($file);
} else {
$content = $this->generateSVG($file, $params);
}
http_cached_finish($cache->cache, $content);
}
/**
@ -154,6 +159,26 @@ class SVG {
return $xml->asXML();
}
/**
* Return the absolute minimum path definition for direct embedding
*
* No styles will be applied. They have to be done in CSS
*
* @param string $file the SVG file to load
* @return string the new XML contents
*/
protected function embedSVG($file) {
/** @var SvgNode $xml */
$xml = simplexml_load_file($file, SvgNode::class);
$def = hsc((string) $xml->path['d']);
$w = hsc($xml['width']);
$h = hsc($xml['height']);
$v = hsc($xml['viewBox']);
return "<svg width=\"$w\" height=\"$h\" viewBox=\"$v\"><path d=\"$def\" /></svg>";
}
/**
* Get the supported parameters from request
*
@ -163,6 +188,7 @@ class SVG {
global $INPUT;
$params = array(
'e' => $INPUT->bool('e', false),
's' => $this->fixColor($INPUT->str('s')),
'f' => $this->fixColor($INPUT->str('f')),
'b' => $this->fixColor($INPUT->str('b')),
@ -299,3 +325,4 @@ class SVG {
$svg = new SVG();
$svg->out();