github/holder
1
1
Fork 0
mirror of https://github.com/imsky/holder.git synced 2026-01-10 22:38:07 -05:00
Code Issues Packages Projects Releases Wiki Activity

create css rules for text nodes, fix version replacement

Browse Source
This commit is contained in:
Ivan Malopinsky
2015-04-07 23:53:59 -04:00
parent 09ee1e4924
commit a89edc7ccf
4 changed files with 123 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gulpfile.js
View File

@@ -42,7 +42,6 @@ gulp.task('todo', function(){
gulp.task('build', ['jshint'], function () {
return gulp.src('src/holder.js')
.pipe(replace('%version%', pkg.version))
.pipe(webpack({
output: {
library: 'Holder',
@@ -68,6 +67,7 @@ gulp.task('minify', ['bundle'], function () {
gulp.task('banner', ['minify'], function () {
return gulp.src(["holder*.js"])
.pipe(replace('%version%', pkg.version))
.pipe(header(banner, {
pkg: pkg,
year: moment().format("YYYY"),

84
holder.js
View File

@@ -1,7 +1,7 @@
/*!
Holder - client side image placeholders
Version 2.6.0-pre+51b90
Version 2.6.0-pre+51e75
© 2015 Ivan Malopinsky - http://imsky.co
Site: http://holderjs.com
@@ -86,7 +86,7 @@ return /******/ (function(modules) { // webpackBootstrap
//Constants and definitions
var SVG_NS = 'http://www.w3.org/2000/svg';
var NODE_TYPE_COMMENT = 8;
var version = '%version%';
var version = '2.6.0-pre';
var generatorComment = '\n' +
'Created with Holder.js ' + version + '.\n' +
'Learn more at http://holderjs.com\n' +
@@ -1156,6 +1156,7 @@ return /******/ (function(modules) { // webpackBootstrap
var sgSVGRenderer = (function() {
//Prevent IE <9 from initializing SVG renderer
if (!global.XMLSerializer) return;
var xml = createXML();
var svg = initSVG(null, 0, 0);
var bgEl = newEl('rect', SVG_NS);
svg.appendChild(bgEl);
@@ -1165,11 +1166,7 @@ return /******/ (function(modules) { // webpackBootstrap
return function(sceneGraph, renderSettings) {
var root = sceneGraph.root;
var holderURL = renderSettings.holderSettings.flags.holderURL;
var commentNode = document.createComment('\n' + 'Source URL: ' + holderURL + generatorComment);
initSVG(svg, root.properties.width, root.properties.height);
svg.insertBefore(commentNode, svg.firstChild);
var groups = svg.querySelectorAll('g');
@@ -1177,18 +1174,41 @@ return /******/ (function(modules) { // webpackBootstrap
groups[i].parentNode.removeChild(groups[i]);
}
var holderURL = renderSettings.holderSettings.flags.holderURL;
var holderId = 'holder_' + (Number(new Date()) + 32768 + (0 | Math.random() * 32768)).toString(16);
var sceneGroupEl = newEl('g', SVG_NS);
var textGroup = root.children.holderTextGroup;
var tgProps = textGroup.properties;
var textGroupEl = newEl('g', SVG_NS);
var tpdata = textGroup.textPositionData;
var textCSSRule = '#' + holderId + ' text { ' +
cssProps({
'fill': tgProps.fill,
'font-weight': tgProps.font.weight,
'font-family': tgProps.font.family + ', monospace',
'font-size': tgProps.font.size + tgProps.font.units
}) + ' } ';
var commentNode = xml.createComment('\n' + 'Source URL: ' + holderURL + generatorComment);
var holderCSS = xml.createCDATASection(textCSSRule);
var styleEl = svg.querySelector('style');
setAttr(sceneGroupEl, {
id: holderId
});
svg.insertBefore(commentNode, svg.firstChild);
styleEl.appendChild(holderCSS);
sceneGroupEl.appendChild(bgEl);
sceneGroupEl.appendChild(textGroupEl);
svg.appendChild(sceneGroupEl);
setAttr(bgEl, {
'width': root.children.holderBg.width,
'height': root.children.holderBg.height,
'fill': root.children.holderBg.properties.fill
});
var textGroup = root.children.holderTextGroup;
var tgProps = textGroup.properties;
var textGroupEl = newEl('g', SVG_NS);
var tpdata = textGroup.textPositionData;
svg.appendChild(textGroupEl);
textGroup.y += tpdata.boundingBox.height * 0.8;
for (var lineKey in textGroup.children) {
@@ -1203,13 +1223,7 @@ return /******/ (function(modules) { // webpackBootstrap
setAttr(textEl, {
'x': x,
'y': y,
'style': cssProps({
'fill': tgProps.fill,
'font-weight': tgProps.font.weight,
'font-family': tgProps.font.family + ', monospace',
'font-size': tgProps.font.size + tgProps.font.units
})
'y': y
});
textNode.nodeValue = word.properties.text;
@@ -1263,11 +1277,21 @@ return /******/ (function(modules) { // webpackBootstrap
* @param height Document height
*/
function initSVG(svg, width, height) {
var defs, style;
if (svg == null) {
svg = newEl('svg', SVG_NS);
var defs = newEl('defs', SVG_NS);
defs = newEl('defs', SVG_NS);
style = newEl('style', SVG_NS);
setAttr(style, {
'type': 'text/css'
});
defs.appendChild(style);
svg.appendChild(defs);
} else {
style = svg.querySelector('style');
}
//IE throws an exception if this is set and Chrome requires it to be set
if (svg.webkitMatchesSelector) {
svg.setAttribute('xmlns', SVG_NS);
@@ -1279,17 +1303,23 @@ return /******/ (function(modules) { // webpackBootstrap
}
}
//Remove CSS
while (style.childNodes.length) {
style.removeChild(style.childNodes[0]);
}
setAttr(svg, {
'width': width,
'height': height,
'viewBox': '0 0 ' + width + ' ' + height,
'preserveAspectRatio': 'none'
});
return svg;
}
/**
* Generic SVG serialization function
* Returns XML processing instructions
*
* @private
* @param svg SVG context
@@ -1300,11 +1330,10 @@ return /******/ (function(modules) { // webpackBootstrap
var serializer = new XMLSerializer();
var svgCSS = '';
var stylesheets = engineSettings.stylesheets;
var defs = svg.querySelector('defs');
//External stylesheets: Processing Instruction method
if (engineSettings.svgXMLStylesheet) {
var xml = new DOMParser().parseFromString('<xml />', 'application/xml');
var xml = createXML();
//Add <?xml-stylesheet ?> directives
for (var i = stylesheets.length - 1; i >= 0; i--) {
var csspi = xml.createProcessingInstruction('xml-stylesheet', 'href="' + stylesheets[i] + '" rel="stylesheet"');
@@ -1323,6 +1352,15 @@ return /******/ (function(modules) { // webpackBootstrap
return svgCSS + svgText;
}
/**
* Creates a XML document
* @private
*/
function createXML() {
if (!global.DOMParser) return;
return new DOMParser().parseFromString('<xml />', 'application/xml');
}
/**
* Prevents a function from being called too often, waits until a timer elapses to call it again
*

4
holder.min.js vendored
View File

File diff suppressed because one or more lines are too long

80
src/holder.js
View File

@@ -1089,6 +1089,7 @@ var sgCanvasRenderer = (function() {
var sgSVGRenderer = (function() {
//Prevent IE <9 from initializing SVG renderer
if (!global.XMLSerializer) return;
var xml = createXML();
var svg = initSVG(null, 0, 0);
var bgEl = newEl('rect', SVG_NS);
svg.appendChild(bgEl);
@@ -1098,11 +1099,7 @@ var sgSVGRenderer = (function() {
return function(sceneGraph, renderSettings) {
var root = sceneGraph.root;
var holderURL = renderSettings.holderSettings.flags.holderURL;
var commentNode = document.createComment('\n' + 'Source URL: ' + holderURL + generatorComment);
initSVG(svg, root.properties.width, root.properties.height);
svg.insertBefore(commentNode, svg.firstChild);
var groups = svg.querySelectorAll('g');
@@ -1110,18 +1107,41 @@ var sgSVGRenderer = (function() {
groups[i].parentNode.removeChild(groups[i]);
}
var holderURL = renderSettings.holderSettings.flags.holderURL;
var holderId = 'holder_' + (Number(new Date()) + 32768 + (0 | Math.random() * 32768)).toString(16);
var sceneGroupEl = newEl('g', SVG_NS);
var textGroup = root.children.holderTextGroup;
var tgProps = textGroup.properties;
var textGroupEl = newEl('g', SVG_NS);
var tpdata = textGroup.textPositionData;
var textCSSRule = '#' + holderId + ' text { ' +
cssProps({
'fill': tgProps.fill,
'font-weight': tgProps.font.weight,
'font-family': tgProps.font.family + ', monospace',
'font-size': tgProps.font.size + tgProps.font.units
}) + ' } ';
var commentNode = xml.createComment('\n' + 'Source URL: ' + holderURL + generatorComment);
var holderCSS = xml.createCDATASection(textCSSRule);
var styleEl = svg.querySelector('style');
setAttr(sceneGroupEl, {
id: holderId
});
svg.insertBefore(commentNode, svg.firstChild);
styleEl.appendChild(holderCSS);
sceneGroupEl.appendChild(bgEl);
sceneGroupEl.appendChild(textGroupEl);
svg.appendChild(sceneGroupEl);
setAttr(bgEl, {
'width': root.children.holderBg.width,
'height': root.children.holderBg.height,
'fill': root.children.holderBg.properties.fill
});
var textGroup = root.children.holderTextGroup;
var tgProps = textGroup.properties;
var textGroupEl = newEl('g', SVG_NS);
var tpdata = textGroup.textPositionData;
svg.appendChild(textGroupEl);
textGroup.y += tpdata.boundingBox.height * 0.8;
for (var lineKey in textGroup.children) {
@@ -1136,13 +1156,7 @@ var sgSVGRenderer = (function() {
setAttr(textEl, {
'x': x,
'y': y,
'style': cssProps({
'fill': tgProps.fill,
'font-weight': tgProps.font.weight,
'font-family': tgProps.font.family + ', monospace',
'font-size': tgProps.font.size + tgProps.font.units
})
'y': y
});
textNode.nodeValue = word.properties.text;
@@ -1196,11 +1210,21 @@ function setAttr(el, attrs) {
* @param height Document height
*/
function initSVG(svg, width, height) {
var defs, style;
if (svg == null) {
svg = newEl('svg', SVG_NS);
var defs = newEl('defs', SVG_NS);
defs = newEl('defs', SVG_NS);
style = newEl('style', SVG_NS);
setAttr(style, {
'type': 'text/css'
});
defs.appendChild(style);
svg.appendChild(defs);
} else {
style = svg.querySelector('style');
}
//IE throws an exception if this is set and Chrome requires it to be set
if (svg.webkitMatchesSelector) {
svg.setAttribute('xmlns', SVG_NS);
@@ -1212,17 +1236,23 @@ function initSVG(svg, width, height) {
}
}
//Remove CSS
while (style.childNodes.length) {
style.removeChild(style.childNodes[0]);
}
setAttr(svg, {
'width': width,
'height': height,
'viewBox': '0 0 ' + width + ' ' + height,
'preserveAspectRatio': 'none'
});
return svg;
}
/**
* Generic SVG serialization function
* Returns XML processing instructions
*
* @private
* @param svg SVG context
@@ -1233,11 +1263,10 @@ function serializeSVG(svg, engineSettings) {
var serializer = new XMLSerializer();
var svgCSS = '';
var stylesheets = engineSettings.stylesheets;
var defs = svg.querySelector('defs');
//External stylesheets: Processing Instruction method
if (engineSettings.svgXMLStylesheet) {
var xml = new DOMParser().parseFromString('<xml />', 'application/xml');
var xml = createXML();
//Add <?xml-stylesheet ?> directives
for (var i = stylesheets.length - 1; i >= 0; i--) {
var csspi = xml.createProcessingInstruction('xml-stylesheet', 'href="' + stylesheets[i] + '" rel="stylesheet"');
@@ -1256,6 +1285,15 @@ function serializeSVG(svg, engineSettings) {
return svgCSS + svgText;
}
/**
* Creates a XML document
* @private
*/
function createXML() {
if (!global.DOMParser) return;
return new DOMParser().parseFromString('<xml />', 'application/xml');
}
/**
* Prevents a function from being called too often, waits until a timer elapses to call it again
*