Get off off rails-assets
Just moving the things we currently use (and should drop in the ASAP) to vendor/assets
This commit is contained in:
Henne Vogelsang
parent
9fd0807a9a
commit
b6560dbb34
659 changed files with 129299 additions and 67 deletions
64
vendor/assets/javascripts/holderjs/src/lib/renderers/canvas.js
vendored
Normal file
64
vendor/assets/javascripts/holderjs/src/lib/renderers/canvas.js
vendored
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
var DOM = require('../dom');
|
||||
var utils = require('../utils');
|
||||
|
||||
module.exports = (function() {
|
||||
var canvas = DOM.newEl('canvas');
|
||||
var ctx = null;
|
||||
|
||||
return function(sceneGraph) {
|
||||
if (ctx == null) {
|
||||
ctx = canvas.getContext('2d');
|
||||
}
|
||||
|
||||
var dpr = utils.canvasRatio();
|
||||
var root = sceneGraph.root;
|
||||
canvas.width = dpr * root.properties.width;
|
||||
canvas.height = dpr * root.properties.height ;
|
||||
ctx.textBaseline = 'middle';
|
||||
|
||||
var bg = root.children.holderBg;
|
||||
var bgWidth = dpr * bg.width;
|
||||
var bgHeight = dpr * bg.height;
|
||||
//todo: parametrize outline width (e.g. in scene object)
|
||||
var outlineWidth = 2;
|
||||
var outlineOffsetWidth = outlineWidth / 2;
|
||||
|
||||
ctx.fillStyle = bg.properties.fill;
|
||||
ctx.fillRect(0, 0, bgWidth, bgHeight);
|
||||
|
||||
if (bg.properties.outline) {
|
||||
//todo: abstract this into a method
|
||||
ctx.strokeStyle = bg.properties.outline.fill;
|
||||
ctx.lineWidth = bg.properties.outline.width;
|
||||
ctx.moveTo(outlineOffsetWidth, outlineOffsetWidth);
|
||||
// TL, TR, BR, BL
|
||||
ctx.lineTo(bgWidth - outlineOffsetWidth, outlineOffsetWidth);
|
||||
ctx.lineTo(bgWidth - outlineOffsetWidth, bgHeight - outlineOffsetWidth);
|
||||
ctx.lineTo(outlineOffsetWidth, bgHeight - outlineOffsetWidth);
|
||||
ctx.lineTo(outlineOffsetWidth, outlineOffsetWidth);
|
||||
// Diagonals
|
||||
ctx.moveTo(0, outlineOffsetWidth);
|
||||
ctx.lineTo(bgWidth, bgHeight - outlineOffsetWidth);
|
||||
ctx.moveTo(0, bgHeight - outlineOffsetWidth);
|
||||
ctx.lineTo(bgWidth, outlineOffsetWidth);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
var textGroup = root.children.holderTextGroup;
|
||||
ctx.font = textGroup.properties.font.weight + ' ' + (dpr * textGroup.properties.font.size) + textGroup.properties.font.units + ' ' + textGroup.properties.font.family + ', monospace';
|
||||
ctx.fillStyle = textGroup.properties.fill;
|
||||
|
||||
for (var lineKey in textGroup.children) {
|
||||
var line = textGroup.children[lineKey];
|
||||
for (var wordKey in line.children) {
|
||||
var word = line.children[wordKey];
|
||||
var x = dpr * (textGroup.x + line.x + word.x);
|
||||
var y = dpr * (textGroup.y + line.y + word.y + (textGroup.properties.leading / 2));
|
||||
|
||||
ctx.fillText(word.properties.text, x, y);
|
||||
}
|
||||
}
|
||||
|
||||
return canvas.toDataURL('image/png');
|
||||
};
|
||||
})();
|
||||
122
vendor/assets/javascripts/holderjs/src/lib/renderers/svg-dom.js
vendored
Normal file
122
vendor/assets/javascripts/holderjs/src/lib/renderers/svg-dom.js
vendored
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
var SVG = require('../svg');
|
||||
var DOM = require('../dom');
|
||||
var utils = require('../utils');
|
||||
var constants = require('../constants');
|
||||
|
||||
var SVG_NS = constants.svg_ns;
|
||||
|
||||
var generatorComment = '\n' +
|
||||
'Created with Holder.js ' + constants.version + '.\n' +
|
||||
'Learn more at http://holderjs.com\n' +
|
||||
'(c) 2012-2015 Ivan Malopinsky - http://imsky.co\n';
|
||||
|
||||
module.exports = (function() {
|
||||
//Prevent IE <9 from initializing SVG renderer
|
||||
if (!global.XMLSerializer) return;
|
||||
var xml = DOM.createXML();
|
||||
var svg = SVG.initSVG(null, 0, 0);
|
||||
var bgEl = DOM.newEl('rect', SVG_NS);
|
||||
svg.appendChild(bgEl);
|
||||
|
||||
//todo: create a reusable pool for textNodes, resize if more words present
|
||||
|
||||
return function(sceneGraph, renderSettings) {
|
||||
var root = sceneGraph.root;
|
||||
|
||||
SVG.initSVG(svg, root.properties.width, root.properties.height);
|
||||
|
||||
var groups = svg.querySelectorAll('g');
|
||||
|
||||
for (var i = 0; i < groups.length; i++) {
|
||||
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 = DOM.newEl('g', SVG_NS);
|
||||
var textGroup = root.children.holderTextGroup;
|
||||
var tgProps = textGroup.properties;
|
||||
var textGroupEl = DOM.newEl('g', SVG_NS);
|
||||
var tpdata = textGroup.textPositionData;
|
||||
var textCSSRule = '#' + holderId + ' text { ' +
|
||||
utils.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');
|
||||
var bg = root.children.holderBg;
|
||||
|
||||
DOM.setAttr(sceneGroupEl, {
|
||||
id: holderId
|
||||
});
|
||||
|
||||
svg.insertBefore(commentNode, svg.firstChild);
|
||||
styleEl.appendChild(holderCSS);
|
||||
|
||||
sceneGroupEl.appendChild(bgEl);
|
||||
|
||||
//todo: abstract this into a cross-browser SVG outline method
|
||||
if (bg.properties.outline) {
|
||||
var outlineEl = DOM.newEl('path', SVG_NS);
|
||||
var outlineWidth = bg.properties.outline.width;
|
||||
var outlineOffsetWidth = outlineWidth / 2;
|
||||
DOM.setAttr(outlineEl, {
|
||||
'd': [
|
||||
'M', outlineOffsetWidth, outlineOffsetWidth,
|
||||
'H', bg.width - outlineOffsetWidth,
|
||||
'V', bg.height - outlineOffsetWidth,
|
||||
'H', outlineOffsetWidth,
|
||||
'V', 0,
|
||||
'M', 0, outlineOffsetWidth,
|
||||
'L', bg.width, bg.height - outlineOffsetWidth,
|
||||
'M', 0, bg.height - outlineOffsetWidth,
|
||||
'L', bg.width, outlineOffsetWidth
|
||||
].join(' '),
|
||||
'stroke-width': bg.properties.outline.width,
|
||||
'stroke': bg.properties.outline.fill,
|
||||
'fill': 'none'
|
||||
});
|
||||
sceneGroupEl.appendChild(outlineEl);
|
||||
}
|
||||
|
||||
sceneGroupEl.appendChild(textGroupEl);
|
||||
svg.appendChild(sceneGroupEl);
|
||||
|
||||
DOM.setAttr(bgEl, {
|
||||
'width': bg.width,
|
||||
'height': bg.height,
|
||||
'fill': bg.properties.fill
|
||||
});
|
||||
|
||||
textGroup.y += tpdata.boundingBox.height * 0.8;
|
||||
|
||||
for (var lineKey in textGroup.children) {
|
||||
var line = textGroup.children[lineKey];
|
||||
for (var wordKey in line.children) {
|
||||
var word = line.children[wordKey];
|
||||
var x = textGroup.x + line.x + word.x;
|
||||
var y = textGroup.y + line.y + word.y;
|
||||
|
||||
var textEl = DOM.newEl('text', SVG_NS);
|
||||
var textNode = document.createTextNode(null);
|
||||
|
||||
DOM.setAttr(textEl, {
|
||||
'x': x,
|
||||
'y': y
|
||||
});
|
||||
|
||||
textNode.nodeValue = word.properties.text;
|
||||
textEl.appendChild(textNode);
|
||||
textGroupEl.appendChild(textEl);
|
||||
}
|
||||
}
|
||||
|
||||
//todo: factor the background check up the chain, perhaps only return reference
|
||||
var svgString = SVG.svgStringToDataURI(SVG.serializeSVG(svg, renderSettings.engineSettings), renderSettings.mode === 'background');
|
||||
return svgString;
|
||||
};
|
||||
})();
|
||||
157
vendor/assets/javascripts/holderjs/src/lib/renderers/svg-text.js
vendored
Normal file
157
vendor/assets/javascripts/holderjs/src/lib/renderers/svg-text.js
vendored
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
var shaven = require('shaven');
|
||||
|
||||
var SVG = require('../svg');
|
||||
var constants = require('../constants');
|
||||
var utils = require('../utils');
|
||||
|
||||
var SVG_NS = constants.svg_ns;
|
||||
|
||||
var templates = {
|
||||
'element': function (options) {
|
||||
var tag = options.tag;
|
||||
var content = options.content || '';
|
||||
delete options.tag;
|
||||
delete options.content;
|
||||
return [tag, content, options];
|
||||
}
|
||||
};
|
||||
|
||||
//todo: deprecate tag arg, infer tag from shape object
|
||||
function convertShape (shape, tag) {
|
||||
return templates.element({
|
||||
'tag': tag,
|
||||
'width': shape.width,
|
||||
'height': shape.height,
|
||||
'fill': shape.properties.fill
|
||||
});
|
||||
}
|
||||
|
||||
function textCss (properties) {
|
||||
return utils.cssProps({
|
||||
'fill': properties.fill,
|
||||
'font-weight': properties.font.weight,
|
||||
'font-family': properties.font.family + ', monospace',
|
||||
'font-size': properties.font.size + properties.font.units
|
||||
});
|
||||
}
|
||||
|
||||
function outlinePath (bgWidth, bgHeight, outlineWidth) {
|
||||
var outlineOffsetWidth = outlineWidth / 2;
|
||||
|
||||
return [
|
||||
'M', outlineOffsetWidth, outlineOffsetWidth,
|
||||
'H', bgWidth - outlineOffsetWidth,
|
||||
'V', bgHeight - outlineOffsetWidth,
|
||||
'H', outlineOffsetWidth,
|
||||
'V', 0,
|
||||
'M', 0, outlineOffsetWidth,
|
||||
'L', bgWidth, bgHeight - outlineOffsetWidth,
|
||||
'M', 0, bgHeight - outlineOffsetWidth,
|
||||
'L', bgWidth, outlineOffsetWidth
|
||||
].join(' ');
|
||||
}
|
||||
|
||||
module.exports = function (sceneGraph, renderSettings) {
|
||||
var engineSettings = renderSettings.engineSettings;
|
||||
var stylesheets = engineSettings.stylesheets;
|
||||
var stylesheetXml = stylesheets.map(function (stylesheet) {
|
||||
return '<?xml-stylesheet rel="stylesheet" href="' + stylesheet + '"?>';
|
||||
}).join('\n');
|
||||
|
||||
var holderId = 'holder_' + Number(new Date()).toString(16);
|
||||
|
||||
var root = sceneGraph.root;
|
||||
var textGroup = root.children.holderTextGroup;
|
||||
|
||||
var css = '#' + holderId + ' text { ' + textCss(textGroup.properties) + ' } ';
|
||||
|
||||
// push text down to be equally vertically aligned with canvas renderer
|
||||
textGroup.y += textGroup.textPositionData.boundingBox.height * 0.8;
|
||||
|
||||
var wordTags = [];
|
||||
|
||||
Object.keys(textGroup.children).forEach(function (lineKey) {
|
||||
var line = textGroup.children[lineKey];
|
||||
|
||||
Object.keys(line.children).forEach(function (wordKey) {
|
||||
var word = line.children[wordKey];
|
||||
var x = textGroup.x + line.x + word.x;
|
||||
var y = textGroup.y + line.y + word.y;
|
||||
var wordTag = templates.element({
|
||||
'tag': 'text',
|
||||
'content': word.properties.text,
|
||||
'x': x,
|
||||
'y': y
|
||||
});
|
||||
|
||||
wordTags.push(wordTag);
|
||||
});
|
||||
});
|
||||
|
||||
var text = templates.element({
|
||||
'tag': 'g',
|
||||
'content': wordTags
|
||||
});
|
||||
|
||||
var outline = null;
|
||||
|
||||
if (root.children.holderBg.properties.outline) {
|
||||
var outlineProperties = root.children.holderBg.properties.outline;
|
||||
outline = templates.element({
|
||||
'tag': 'path',
|
||||
'd': outlinePath(root.children.holderBg.width, root.children.holderBg.height, outlineProperties.width),
|
||||
'stroke-width': outlineProperties.width,
|
||||
'stroke': outlineProperties.fill,
|
||||
'fill': 'none'
|
||||
});
|
||||
}
|
||||
|
||||
var bg = convertShape(root.children.holderBg, 'rect');
|
||||
|
||||
var sceneContent = [];
|
||||
|
||||
sceneContent.push(bg);
|
||||
if (outlineProperties) {
|
||||
sceneContent.push(outline);
|
||||
}
|
||||
sceneContent.push(text);
|
||||
|
||||
var scene = templates.element({
|
||||
'tag': 'g',
|
||||
'id': holderId,
|
||||
'content': sceneContent
|
||||
});
|
||||
|
||||
var style = templates.element({
|
||||
'tag': 'style',
|
||||
//todo: figure out how to add CDATA directive
|
||||
'content': css,
|
||||
'type': 'text/css'
|
||||
});
|
||||
|
||||
var defs = templates.element({
|
||||
'tag': 'defs',
|
||||
'content': style
|
||||
});
|
||||
|
||||
var svg = templates.element({
|
||||
'tag': 'svg',
|
||||
'content': [defs, scene],
|
||||
'width': root.properties.width,
|
||||
'height': root.properties.height,
|
||||
'xmlns': SVG_NS,
|
||||
'viewBox': [0, 0, root.properties.width, root.properties.height].join(' '),
|
||||
'preserveAspectRatio': 'none'
|
||||
});
|
||||
|
||||
var output = shaven(svg);
|
||||
|
||||
if (/\&(x)?#[0-9A-Fa-f]/.test(output[0])) {
|
||||
output[0] = output[0].replace(/&#/gm, '&#');
|
||||
}
|
||||
|
||||
output = stylesheetXml + output[0];
|
||||
|
||||
var svgString = SVG.svgStringToDataURI(output, renderSettings.mode === 'background');
|
||||
return svgString;
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue