ok
Direktori : /home/keydecors/www/admin/bower_components/holderjs/src/ |
Current File : /home/keydecors/www/admin/bower_components/holderjs/src/holder.js |
/* Holder.js - client side image placeholders © 2012-2014 Ivan Malopinsky - http://imsky.co */ (function(register, global, undefined) { //Constants and definitions var SVG_NS = 'http://www.w3.org/2000/svg'; var document = global.document; var Holder = { /** * Adds a theme to default settings * * @param {string} name Theme name * @param {Object} theme Theme object, with foreground, background, size, font, and fontweight properties. */ addTheme: function(name, theme) { name != null && theme != null && (App.settings.themes[name] = theme); delete App.vars.cache.themeKeys; return this; }, /** * Appends a placeholder to an element * * @param {string} src Placeholder URL string * @param {string} el Selector of target element(s) */ addImage: function(src, el) { var node = document.querySelectorAll(el); if (node.length) { for (var i = 0, l = node.length; i < l; i++) { var img = newEl('img'); setAttr(img, { 'data-src': src }); node[i].appendChild(img); } } return this; }, /** * Runs Holder with options. By default runs Holder on all images with "holder.js" in their source attributes. * * @param {Object} userOptions Options object, can contain domain, themes, images, and bgnodes properties */ run: function(userOptions) { userOptions = userOptions || {}; var renderSettings = {}; App.vars.preempted = true; var options = extend(App.settings, userOptions); renderSettings.renderer = options.renderer ? options.renderer : App.setup.renderer; if (App.setup.renderers.join(',').indexOf(renderSettings.renderer) === -1) { renderSettings.renderer = App.setup.supportsSVG ? 'svg' : (App.setup.supportsCanvas ? 'canvas' : 'html'); } //< v2.4 API compatibility if (options.use_canvas) { renderSettings.renderer = 'canvas'; } else if (options.use_svg) { renderSettings.renderer = 'svg'; } var images = getNodeArray(options.images); var bgnodes = getNodeArray(options.bgnodes); var stylenodes = getNodeArray(options.stylenodes); var objects = getNodeArray(options.objects); renderSettings.stylesheets = []; renderSettings.svgXMLStylesheet = true; renderSettings.noFontFallback = options.noFontFallback ? options.noFontFallback : false; for (var i = 0; i < stylenodes.length; i++) { var styleNode = stylenodes[i]; if (styleNode.attributes.rel && styleNode.attributes.href && styleNode.attributes.rel.value == 'stylesheet') { var href = styleNode.attributes.href.value; //todo: write isomorphic relative-to-absolute URL function var proxyLink = newEl('a'); proxyLink.href = href; var stylesheetURL = proxyLink.protocol + '//' + proxyLink.host + proxyLink.pathname + proxyLink.search; renderSettings.stylesheets.push(stylesheetURL); } } for (i = 0; i < bgnodes.length; i++) { var backgroundImage = global.getComputedStyle(bgnodes[i], null).getPropertyValue('background-image'); var dataBackgroundImage = bgnodes[i].getAttribute('data-background-src'); var rawURL = null; if (dataBackgroundImage == null) { rawURL = backgroundImage; } else { rawURL = dataBackgroundImage; } var holderURL = null; var holderString = '?' + options.domain + '/'; if (rawURL.indexOf(holderString) === 0) { holderURL = rawURL.slice(1); } else if (rawURL.indexOf(holderString) != -1) { var fragment = rawURL.substr(rawURL.indexOf(holderString)).slice(1); var fragmentMatch = fragment.match(/([^\"]*)"?\)/); if (fragmentMatch != null) { holderURL = fragmentMatch[1]; } } if (holderURL != null) { var holderFlags = parseURL(holderURL, options); if (holderFlags) { prepareDOMElement('background', bgnodes[i], holderFlags, renderSettings); } } } for (i = 0; i < objects.length; i++) { var object = objects[i]; var objectAttr = {}; try { objectAttr.data = object.getAttribute('data'); objectAttr.dataSrc = object.getAttribute('data-src'); } catch (e) {} var objectHasSrcURL = objectAttr.data != null && objectAttr.data.indexOf(options.domain) === 0; var objectHasDataSrcURL = objectAttr.dataSrc != null && objectAttr.dataSrc.indexOf(options.domain) === 0; if (objectHasSrcURL) { prepareImageElement(options, renderSettings, objectAttr.data, object); } else if (objectHasDataSrcURL) { prepareImageElement(options, renderSettings, objectAttr.dataSrc, object); } } for (i = 0; i < images.length; i++) { var image = images[i]; var imageAttr = {}; try { imageAttr.src = image.getAttribute('src'); imageAttr.dataSrc = image.getAttribute('data-src'); imageAttr.rendered = image.getAttribute('data-holder-rendered'); } catch (e) {} var imageHasSrc = imageAttr.src != null; var imageHasDataSrcURL = imageAttr.dataSrc != null && imageAttr.dataSrc.indexOf(options.domain) === 0; var imageRendered = imageAttr.rendered != null && imageAttr.rendered == 'true'; if (imageHasSrc) { if (imageAttr.src.indexOf(options.domain) === 0) { prepareImageElement(options, renderSettings, imageAttr.src, image); } else if (imageHasDataSrcURL) { //Image has a valid data-src and an invalid src if (imageRendered) { //If the placeholder has already been render, re-render it prepareImageElement(options, renderSettings, imageAttr.dataSrc, image); } else { //If the placeholder has not been rendered, check if the image exists and render a fallback if it doesn't (function(src, options, renderSettings, dataSrc, image){ imageExists(src, function(exists){ if(!exists){ prepareImageElement(options, renderSettings, dataSrc, image); } }); })(imageAttr.src, options, renderSettings, imageAttr.dataSrc, image); } } } else if (imageHasDataSrcURL) { prepareImageElement(options, renderSettings, imageAttr.dataSrc, image); } } return this; }, //todo: remove invisibleErrorFn for 2.5 invisibleErrorFn: function(fn) { return function(el) { if (el.hasAttribute('data-holder-invisible')) { throw 'Holder: invisible placeholder'; } }; } }; //< v2.4 API compatibility Holder.add_theme = Holder.addTheme; Holder.add_image = Holder.addImage; Holder.invisible_error_fn = Holder.invisibleErrorFn; var App = { settings: { domain: 'holder.js', images: 'img', objects: 'object', bgnodes: 'body .holderjs', stylenodes: 'head link.holderjs', stylesheets: [], themes: { 'gray': { background: '#EEEEEE', foreground: '#AAAAAA' }, 'social': { background: '#3a5a97', foreground: '#FFFFFF' }, 'industrial': { background: '#434A52', foreground: '#C2F200' }, 'sky': { background: '#0D8FDB', foreground: '#FFFFFF' }, 'vine': { background: '#39DBAC', foreground: '#1E292C' }, 'lava': { background: '#F8591A', foreground: '#1C2846' } } }, defaults: { size: 10, units: 'pt', scale: 1/16 }, flags: { dimensions: { regex: /^(\d+)x(\d+)$/, output: function(val) { var exec = this.regex.exec(val); return { width: +exec[1], height: +exec[2] }; } }, fluid: { regex: /^([0-9]+%?)x([0-9]+%?)$/, output: function(val) { var exec = this.regex.exec(val); return { width: exec[1], height: exec[2] }; } }, colors: { regex: /(?:#|\^)([0-9a-f]{3,})\:(?:#|\^)([0-9a-f]{3,})/i, output: function(val) { var exec = this.regex.exec(val); return { foreground: '#' + exec[2], background: '#' + exec[1] }; } }, text: { regex: /text\:(.*)/, output: function(val) { return this.regex.exec(val)[1].replace('\\/', '/'); } }, font: { regex: /font\:(.*)/, output: function(val) { return this.regex.exec(val)[1]; } }, auto: { regex: /^auto$/ }, textmode: { regex: /textmode\:(.*)/, output: function(val) { return this.regex.exec(val)[1]; } }, random: { regex: /^random$/ } } }; /** * Processes provided source attribute and sets up the appropriate rendering workflow * * @private * @param options Instance options from Holder.run * @param renderSettings Instance configuration * @param src Image URL * @param el Image DOM element */ function prepareImageElement(options, renderSettings, src, el) { var holderFlags = parseURL(src.substr(src.lastIndexOf(options.domain)), options); if (holderFlags) { prepareDOMElement(null, el, holderFlags, renderSettings); } } /** * Processes a Holder URL and extracts flags * * @private * @param url URL * @param options Instance options from Holder.run */ function parseURL(url, options) { var ret = { theme: extend(App.settings.themes.gray, null), stylesheets: options.stylesheets, holderURL: [] }; var render = false; var vtab = String.fromCharCode(11); var flags = url.replace(/([^\\])\//g, '$1' + vtab).split(vtab); var uriRegex = /%[0-9a-f]{2}/gi; for (var fl = flags.length, j = 0; j < fl; j++) { var flag = flags[j]; if (flag.match(uriRegex)) { try { flag = decodeURIComponent(flag); } catch (e) { flag = flags[j]; } } var push = false; if (App.flags.dimensions.match(flag)) { render = true; ret.dimensions = App.flags.dimensions.output(flag); push = true; } else if (App.flags.fluid.match(flag)) { render = true; ret.dimensions = App.flags.fluid.output(flag); ret.fluid = true; push = true; } else if (App.flags.textmode.match(flag)) { ret.textmode = App.flags.textmode.output(flag); push = true; } else if (App.flags.colors.match(flag)) { var colors = App.flags.colors.output(flag); ret.theme = extend(ret.theme, colors); //todo: convert implicit theme use to a theme: flag push = true; } else if (options.themes[flag]) { //If a theme is specified, it will override custom colors if (options.themes.hasOwnProperty(flag)) { ret.theme = extend(options.themes[flag], null); } push = true; } else if (App.flags.font.match(flag)) { ret.font = App.flags.font.output(flag); push = true; } else if (App.flags.auto.match(flag)) { ret.auto = true; push = true; } else if (App.flags.text.match(flag)) { ret.text = App.flags.text.output(flag); push = true; } else if (App.flags.random.match(flag)) { if (App.vars.cache.themeKeys == null) { App.vars.cache.themeKeys = Object.keys(options.themes); } var theme = App.vars.cache.themeKeys[0 | Math.random() * App.vars.cache.themeKeys.length]; ret.theme = extend(options.themes[theme], null); push = true; } if (push) { ret.holderURL.push(flag); } } ret.holderURL.unshift(options.domain); ret.holderURL = ret.holderURL.join('/'); return render ? ret : false; } /** * Modifies the DOM to fit placeholders and sets up resizable image callbacks (for fluid and automatically sized placeholders) * * @private * @param el Image DOM element * @param flags Placeholder-specific configuration * @param _renderSettings Instance configuration */ function prepareDOMElement(mode, el, flags, _renderSettings) { var dimensions = flags.dimensions, theme = flags.theme; var dimensionsCaption = dimensions.width + 'x' + dimensions.height; mode = mode == null ? (flags.fluid ? 'fluid' : 'image') : mode; if (flags.text != null) { theme.text = flags.text; //<object> SVG embedding doesn't parse Unicode properly if (el.nodeName.toLowerCase() === 'object') { var textLines = theme.text.split('\\n'); for (var k = 0; k < textLines.length; k++) { textLines[k] = encodeHtmlEntity(textLines[k]); } theme.text = textLines.join('\\n'); } } var holderURL = flags.holderURL; var renderSettings = extend(_renderSettings, null); if (flags.font) { theme.font = flags.font; //Only run the <canvas> webfont fallback if noFontFallback is false, if the node is not an image, and if canvas is supported if (!renderSettings.noFontFallback && el.nodeName.toLowerCase() === 'img' && App.setup.supportsCanvas && renderSettings.renderer === 'svg') { renderSettings = extend(renderSettings, { renderer: 'canvas' }); } } //Chrome and Opera require a quick 10ms re-render if web fonts are used with canvas if (flags.font && renderSettings.renderer == 'canvas') { renderSettings.reRender = true; } if (mode == 'background') { if (el.getAttribute('data-background-src') == null) { setAttr(el, { 'data-background-src': holderURL }); } } else { setAttr(el, { 'data-src': holderURL }); } flags.theme = theme; el.holderData = { flags: flags, renderSettings: renderSettings }; if (mode == 'image' || mode == 'fluid') { setAttr(el, { 'alt': (theme.text ? (theme.text.length > 16 ? theme.text.substring(0, 16) + '…' : theme.text) + ' [' + dimensionsCaption + ']' : dimensionsCaption) }); } if (mode == 'image') { if (renderSettings.renderer == 'html' || !flags.auto) { el.style.width = dimensions.width + 'px'; el.style.height = dimensions.height + 'px'; } if (renderSettings.renderer == 'html') { el.style.backgroundColor = theme.background; } else { render(mode, { dimensions: dimensions, theme: theme, flags: flags }, el, renderSettings); if (flags.textmode && flags.textmode == 'exact') { App.vars.resizableImages.push(el); updateResizableElements(el); } } } else if (mode == 'background' && renderSettings.renderer != 'html') { render(mode, { dimensions: dimensions, theme: theme, flags: flags }, el, renderSettings); } else if (mode == 'fluid') { if (dimensions.height.slice(-1) == '%') { el.style.height = dimensions.height; } else if (flags.auto == null || !flags.auto) { el.style.height = dimensions.height + 'px'; } if (dimensions.width.slice(-1) == '%') { el.style.width = dimensions.width; } else if (flags.auto == null || !flags.auto) { el.style.width = dimensions.width + 'px'; } if (el.style.display == 'inline' || el.style.display === '' || el.style.display == 'none') { el.style.display = 'block'; } setInitialDimensions(el); if (renderSettings.renderer == 'html') { el.style.backgroundColor = theme.background; } else { App.vars.resizableImages.push(el); updateResizableElements(el); } } } /** * Core function that takes output from renderers and sets it as the source or background-image of the target element * * @private * @param mode Placeholder mode, either background or image * @param params Placeholder-specific parameters * @param el Image DOM element * @param renderSettings Instance configuration */ function render(mode, params, el, renderSettings) { var image = null; switch (renderSettings.renderer) { case 'svg': if (!App.setup.supportsSVG) return; break; case 'canvas': if (!App.setup.supportsCanvas) return; break; default: return; } //todo: move generation of scene up to flag generation to reduce extra object creation var scene = { width: params.dimensions.width, height: params.dimensions.height, theme: params.theme, flags: params.flags }; var sceneGraph = buildSceneGraph(scene); var rendererParams = { text: scene.text, width: scene.width, height: scene.height, textHeight: scene.font.size, font: scene.font.family, fontWeight: scene.font.weight, template: scene.theme }; function getRenderedImage() { var image = null; switch (renderSettings.renderer) { case 'canvas': image = sgCanvasRenderer(sceneGraph); break; case 'svg': image = sgSVGRenderer(sceneGraph, renderSettings); break; default: throw 'Holder: invalid renderer: ' + renderSettings.renderer; } return image; } image = getRenderedImage(); if (image == null) { throw 'Holder: couldn\'t render placeholder'; } //todo: add <object> canvas rendering if (mode == 'background') { el.style.backgroundImage = 'url(' + image + ')'; el.style.backgroundSize = scene.width + 'px ' + scene.height + 'px'; } else { if (el.nodeName.toLowerCase() === 'img') { setAttr(el, { 'src': image }); } else if (el.nodeName.toLowerCase() === 'object') { setAttr(el, { 'data': image }); setAttr(el, { 'type': 'image/svg+xml' }); } if (renderSettings.reRender) { setTimeout(function() { var image = getRenderedImage(); if (image == null) { throw 'Holder: couldn\'t render placeholder'; } if (el.nodeName.toLowerCase() === 'img') { setAttr(el, { 'src': image }); } else if (el.nodeName.toLowerCase() === 'object') { setAttr(el, { 'data': image }); setAttr(el, { 'type': 'image/svg+xml' }); } }, 100); } } setAttr(el, { 'data-holder-rendered': true }); } /** * Core function that takes a Holder scene description and builds a scene graph * * @private * @param scene Holder scene object */ function buildSceneGraph(scene) { scene.font = { family: scene.theme.font ? scene.theme.font : 'Arial, Helvetica, Open Sans, sans-serif', size: textSize(scene.width, scene.height, scene.theme.size ? scene.theme.size : App.defaults.size), units: scene.theme.units ? scene.theme.units : App.defaults.units, weight: scene.theme.fontweight ? scene.theme.fontweight : 'bold' }; scene.text = scene.theme.text ? scene.theme.text : Math.floor(scene.width) + 'x' + Math.floor(scene.height); switch (scene.flags.textmode) { case 'literal': scene.text = scene.flags.dimensions.width + 'x' + scene.flags.dimensions.height; break; case 'exact': if (!scene.flags.exactDimensions) break; scene.text = Math.floor(scene.flags.exactDimensions.width) + 'x' + Math.floor(scene.flags.exactDimensions.height); break; } var sceneGraph = new SceneGraph({ width: scene.width, height: scene.height }); var Shape = sceneGraph.Shape; var holderBg = new Shape.Rect('holderBg', { fill: scene.theme.background }); holderBg.resize(scene.width, scene.height); sceneGraph.root.add(holderBg); var holderTextGroup = new Shape.Group('holderTextGroup', { text: scene.text, align: 'center', font: scene.font, fill: scene.theme.foreground }); holderTextGroup.moveTo(null, null, 1); sceneGraph.root.add(holderTextGroup); var tpdata = holderTextGroup.textPositionData = stagingRenderer(sceneGraph); if (!tpdata) { throw 'Holder: staging fallback not supported yet.'; } holderTextGroup.properties.leading = tpdata.boundingBox.height; //todo: alignment: TL, TC, TR, CL, CR, BL, BC, BR var textNode = null; var line = null; function finalizeLine(parent, line, width, height) { line.width = width; line.height = height; parent.width = Math.max(parent.width, line.width); parent.height += line.height; parent.add(line); } if (tpdata.lineCount > 1) { var offsetX = 0; var offsetY = 0; var maxLineWidth = scene.width * App.setup.lineWrapRatio; var lineIndex = 0; line = new Shape.Group('line' + lineIndex); for (var i = 0; i < tpdata.words.length; i++) { var word = tpdata.words[i]; textNode = new Shape.Text(word.text); var newline = word.text == '\\n'; if (offsetX + word.width >= maxLineWidth || newline === true) { finalizeLine(holderTextGroup, line, offsetX, holderTextGroup.properties.leading); offsetX = 0; offsetY += holderTextGroup.properties.leading; lineIndex += 1; line = new Shape.Group('line' + lineIndex); line.y = offsetY; } if (newline === true) { continue; } textNode.moveTo(offsetX, 0); offsetX += tpdata.spaceWidth + word.width; line.add(textNode); } finalizeLine(holderTextGroup, line, offsetX, holderTextGroup.properties.leading); for (var lineKey in holderTextGroup.children) { line = holderTextGroup.children[lineKey]; line.moveTo( (holderTextGroup.width - line.width) / 2, null, null); } holderTextGroup.moveTo( (scene.width - holderTextGroup.width) / 2, (scene.height - holderTextGroup.height) / 2, null); //If the text exceeds vertical space, move it down so the first line is visible if ((scene.height - holderTextGroup.height) / 2 < 0) { holderTextGroup.moveTo(null, 0, null); } } else { textNode = new Shape.Text(scene.text); line = new Shape.Group('line0'); line.add(textNode); holderTextGroup.add(line); holderTextGroup.moveTo( (scene.width - tpdata.boundingBox.width) / 2, (scene.height - tpdata.boundingBox.height) / 2, null); } //todo: renderlist return sceneGraph; } /** * Adaptive text sizing function * * @private * @param width Parent width * @param height Parent height * @param fontSize Requested text size */ function textSize(width, height, fontSize) { height = parseInt(height, 10); width = parseInt(width, 10); var bigSide = Math.max(height, width); var smallSide = Math.min(height, width); var scale = App.defaults.scale; var newHeight = Math.min(smallSide * 0.75, 0.75 * bigSide * scale); return Math.round(Math.max(fontSize, newHeight)); } /** * Iterates over resizable (fluid or auto) placeholders and renders them * * @private * @param element Optional element selector, specified only if a specific element needs to be re-rendered */ function updateResizableElements(element) { var images; if (element == null || element.nodeType == null) { images = App.vars.resizableImages; } else { images = [element]; } for (var i in images) { if (!images.hasOwnProperty(i)) { continue; } var el = images[i]; if (el.holderData) { var flags = el.holderData.flags; var dimensions = dimensionCheck(el, Holder.invisibleErrorFn(updateResizableElements)); if (dimensions) { if (flags.fluid && flags.auto) { var fluidConfig = el.holderData.fluidConfig; switch (fluidConfig.mode) { case 'width': dimensions.height = dimensions.width / fluidConfig.ratio; break; case 'height': dimensions.width = dimensions.height * fluidConfig.ratio; break; } } var drawParams = { dimensions: dimensions, theme: flags.theme, flags: flags }; if (flags.textmode && flags.textmode == 'exact') { flags.exactDimensions = dimensions; drawParams.dimensions = flags.dimensions; } render('image', drawParams, el, el.holderData.renderSettings); } } } } /** * Checks if an element is visible * * @private * @param el DOM element * @param callback Callback function executed if the element is invisible */ function dimensionCheck(el, callback) { var dimensions = { height: el.clientHeight, width: el.clientWidth }; if (!dimensions.height && !dimensions.width) { setAttr(el, { 'data-holder-invisible': true }); callback.call(this, el); } else { el.removeAttribute('data-holder-invisible'); return dimensions; } } /** * Sets up aspect ratio metadata for fluid placeholders, in order to preserve proportions when resizing * * @private * @param el Image DOM element */ function setInitialDimensions(el) { if (el.holderData) { var dimensions = dimensionCheck(el, Holder.invisibleErrorFn(setInitialDimensions)); if (dimensions) { var flags = el.holderData.flags; var fluidConfig = { fluidHeight: flags.dimensions.height.slice(-1) == '%', fluidWidth: flags.dimensions.width.slice(-1) == '%', mode: null, initialDimensions: dimensions }; if (fluidConfig.fluidWidth && !fluidConfig.fluidHeight) { fluidConfig.mode = 'width'; fluidConfig.ratio = fluidConfig.initialDimensions.width / parseFloat(flags.dimensions.height); } else if (!fluidConfig.fluidWidth && fluidConfig.fluidHeight) { fluidConfig.mode = 'height'; fluidConfig.ratio = parseFloat(flags.dimensions.width) / fluidConfig.initialDimensions.height; } el.holderData.fluidConfig = fluidConfig; } } } //todo: see if possible to convert stagingRenderer to use HTML only var stagingRenderer = (function() { var svg = null, stagingText = null, stagingTextNode = null; return function(graph) { var rootNode = graph.root; if (App.setup.supportsSVG) { var firstTimeSetup = false; var tnode = function(text) { return document.createTextNode(text); }; if (svg == null) { firstTimeSetup = true; } svg = initSVG(svg, rootNode.properties.width, rootNode.properties.height); if (firstTimeSetup) { stagingText = newEl('text', SVG_NS); stagingTextNode = tnode(null); setAttr(stagingText, { x: 0 }); stagingText.appendChild(stagingTextNode); svg.appendChild(stagingText); document.body.appendChild(svg); svg.style.visibility = 'hidden'; svg.style.position = 'absolute'; svg.style.top = '-100%'; svg.style.left = '-100%'; //todo: workaround for zero-dimension <svg> tag in Opera 12 //svg.setAttribute('width', 0); //svg.setAttribute('height', 0); } var holderTextGroup = rootNode.children.holderTextGroup; var htgProps = holderTextGroup.properties; setAttr(stagingText, { 'y': htgProps.font.size, 'style': cssProps({ 'font-weight': htgProps.font.weight, 'font-size': htgProps.font.size + htgProps.font.units, 'font-family': htgProps.font.family, 'dominant-baseline': 'middle' }) }); //Get bounding box for the whole string (total width and height) stagingTextNode.nodeValue = htgProps.text; var stagingTextBBox = stagingText.getBBox(); //Get line count and split the string into words var lineCount = Math.ceil(stagingTextBBox.width / (rootNode.properties.width * App.setup.lineWrapRatio)); var words = htgProps.text.split(' '); var newlines = htgProps.text.match(/\\n/g); lineCount += newlines == null ? 0 : newlines.length; //Get bounding box for the string with spaces removed stagingTextNode.nodeValue = htgProps.text.replace(/[ ]+/g, ''); var computedNoSpaceLength = stagingText.getComputedTextLength(); //Compute average space width var diffLength = stagingTextBBox.width - computedNoSpaceLength; var spaceWidth = Math.round(diffLength / Math.max(1, words.length - 1)); //Get widths for every word with space only if there is more than one line var wordWidths = []; if (lineCount > 1) { stagingTextNode.nodeValue = ''; for (var i = 0; i < words.length; i++) { if (words[i].length === 0) continue; stagingTextNode.nodeValue = decodeHtmlEntity(words[i]); var bbox = stagingText.getBBox(); wordWidths.push({ text: words[i], width: bbox.width }); } } return { spaceWidth: spaceWidth, lineCount: lineCount, boundingBox: stagingTextBBox, words: wordWidths }; } else { //todo: canvas fallback for measuring text on android 2.3 return false; } }; })(); var sgCanvasRenderer = (function() { var canvas = newEl('canvas'); var ctx = null; return function(sceneGraph) { if (ctx == null) { ctx = canvas.getContext('2d'); } var root = sceneGraph.root; canvas.width = App.dpr(root.properties.width); canvas.height = App.dpr(root.properties.height); ctx.textBaseline = 'middle'; ctx.fillStyle = root.children.holderBg.properties.fill; ctx.fillRect(0, 0, App.dpr(root.children.holderBg.width), App.dpr(root.children.holderBg.height)); var textGroup = root.children.holderTextGroup; var tgProps = textGroup.properties; ctx.font = textGroup.properties.font.weight + ' ' + App.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 = App.dpr(textGroup.x + line.x + word.x); var y = App.dpr(textGroup.y + line.y + word.y + (textGroup.properties.leading / 2)); ctx.fillText(word.properties.text, x, y); } } return canvas.toDataURL('image/png'); }; })(); var sgSVGRenderer = (function() { //Prevent IE <9 from initializing SVG renderer if (!global.XMLSerializer) return; var svg = initSVG(null, 0, 0); var bgEl = 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; 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]); } 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); svg.appendChild(textGroupEl); 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 + (textGroup.properties.leading / 2); var textEl = newEl('text', SVG_NS); var textNode = document.createTextNode(null); 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, 'dominant-baseline': 'central' }) }); textNode.nodeValue = word.properties.text; textEl.appendChild(textNode); textGroupEl.appendChild(textEl); } } var svgString = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(serializeSVG(svg, renderSettings)))); return svgString; }; })(); //Helpers /** * Generic new DOM element function * * @private * @param tag Tag to create * @param namespace Optional namespace value */ function newEl(tag, namespace) { if (namespace == null) { return document.createElement(tag); } else { return document.createElementNS(namespace, tag); } } /** * Generic setAttribute function * * @private * @param el Reference to DOM element * @param attrs Object with attribute keys and values */ function setAttr(el, attrs) { for (var a in attrs) { el.setAttribute(a, attrs[a]); } } /** * Generic SVG element creation function * * @private * @param svg SVG context, set to null if new * @param width Document width * @param height Document height */ function initSVG(svg, width, height) { if (svg == null) { svg = newEl('svg', SVG_NS); var defs = newEl('defs', SVG_NS); svg.appendChild(defs); } //IE throws an exception if this is set and Chrome requires it to be set if (svg.webkitMatchesSelector) { svg.setAttribute('xmlns', SVG_NS); } setAttr(svg, { 'width': width, 'height': height, 'viewBox': '0 0 ' + width + ' ' + height, 'preserveAspectRatio': 'none' }); return svg; } /** * Generic SVG serialization function * * @private * @param svg SVG context * @param stylesheets CSS stylesheets to include */ function serializeSVG(svg, renderSettings) { if (!global.XMLSerializer) return; var serializer = new XMLSerializer(); var svgCSS = ''; var stylesheets = renderSettings.stylesheets; var defs = svg.querySelector('defs'); //External stylesheets: Processing Instruction method if (renderSettings.svgXMLStylesheet) { var xml = new DOMParser().parseFromString('<xml />', 'application/xml'); //Add <?xml-stylesheet ?> directives for (var i = stylesheets.length - 1; i >= 0; i--) { var csspi = xml.createProcessingInstruction('xml-stylesheet', 'href="' + stylesheets[i] + '" rel="stylesheet"'); xml.insertBefore(csspi, xml.firstChild); } //Add <?xml ... ?> UTF-8 directive var xmlpi = xml.createProcessingInstruction('xml', 'version="1.0" encoding="UTF-8" standalone="yes"'); xml.insertBefore(xmlpi, xml.firstChild); xml.removeChild(xml.documentElement); svgCSS = serializer.serializeToString(xml); } /* //External stylesheets: <link> method if (renderSettings.svgLinkStylesheet) { defs.removeChild(defs.firstChild); for (i = 0; i < stylesheets.length; i++) { var link = document.createElementNS('http://www.w3.org/1999/xhtml', 'link'); link.setAttribute('href', stylesheets[i]); link.setAttribute('rel', 'stylesheet'); link.setAttribute('type', 'text/css'); defs.appendChild(link); } } //External stylesheets: <style> and @import method if (renderSettings.svgImportStylesheet) { var style = document.createElementNS(SVG_NS, 'style'); var styleText = []; for (i = 0; i < stylesheets.length; i++) { styleText.push('@import url(' + stylesheets[i] + ');'); } var styleTextNode = document.createTextNode(styleText.join('\n')); style.appendChild(styleTextNode); defs.appendChild(style); } */ var svgText = serializer.serializeToString(svg); svgText = svgText.replace(/\&(\#[0-9]{2,}\;)/g, '&$1'); return svgCSS + svgText; } /** * Shallow object clone and merge * * @param a Object A * @param b Object B * @returns {Object} New object with all of A's properties, and all of B's properties, overwriting A's properties */ function extend(a, b) { var c = {}; for (var x in a) { if (a.hasOwnProperty(x)) { c[x] = a[x]; } } if (b != null) { for (var y in b) { if (b.hasOwnProperty(y)) { c[y] = b[y]; } } } return c; } /** * Takes a k/v list of CSS properties and returns a rule * * @param props CSS properties object */ function cssProps(props) { var ret = []; for (var p in props) { if (props.hasOwnProperty(p)) { ret.push(p + ':' + props[p]); } } return ret.join(';'); } /** * Prevents a function from being called too often, waits until a timer elapses to call it again * * @param fn Function to call */ function debounce(fn) { if (!App.vars.debounceTimer) fn.call(this); if (App.vars.debounceTimer) clearTimeout(App.vars.debounceTimer); App.vars.debounceTimer = setTimeout(function() { App.vars.debounceTimer = null; fn.call(this); }, App.setup.debounce); } /** * Holder-specific resize/orientation change callback, debounced to prevent excessive execution */ function resizeEvent() { debounce(function() { updateResizableElements(null); }); } /** * Converts a value into an array of DOM nodes * * @param val A string, a NodeList, a Node, or an HTMLCollection */ function getNodeArray(val) { var retval = null; if (typeof(val) == 'string') { retval = document.querySelectorAll(val); } else if (global.NodeList && val instanceof global.NodeList) { retval = val; } else if (global.Node && val instanceof global.Node) { retval = [val]; } else if (global.HTMLCollection && val instanceof global.HTMLCollection) { retval = val; } else if (val === null) { retval = []; } return retval; } /** * Checks if an image exists * * @param params Configuration object, must specify at least a src key * @param callback Callback to call once image status has been found */ function imageExists(src, callback) { var image = new Image(); image.onerror = function() { callback.call(this, false); }; image.onload = function() { callback.call(this, true); }; image.src = src; } /** * Encodes HTML entities in a string * * @param str Input string */ function encodeHtmlEntity(str) { var buf = []; var charCode = 0; for (var i = str.length - 1; i >= 0; i--) { charCode = str.charCodeAt(i); if (charCode > 128) { buf.unshift(['&#', charCode, ';'].join('')); } else { buf.unshift(str[i]); } } return buf.join(''); } /** * Decodes HTML entities in a stirng * * @param str Input string */ function decodeHtmlEntity(str) { return str.replace(/&#(\d+);/g, function(match, dec) { return String.fromCharCode(dec); }); } // Scene graph var SceneGraph = function(sceneProperties) { var nodeCount = 1; //todo: move merge to helpers section function merge(parent, child) { for (var prop in child) { parent[prop] = child[prop]; } return parent; } var SceneNode = augment.defclass({ constructor: function(name) { nodeCount++; this.parent = null; this.children = {}; this.id = nodeCount; this.name = 'n' + nodeCount; if (name != null) { this.name = name; } this.x = 0; this.y = 0; this.z = 0; this.width = 0; this.height = 0; }, resize: function(width, height) { if (width != null) { this.width = width; } if (height != null) { this.height = height; } }, moveTo: function(x, y, z) { this.x = x != null ? x : this.x; this.y = y != null ? y : this.y; this.z = z != null ? z : this.z; }, add: function(child) { var name = child.name; if (this.children[name] == null) { this.children[name] = child; child.parent = this; } else { throw 'SceneGraph: child with that name already exists: ' + name; } } /*, // probably unnecessary in Holder remove: function(name){ if(this.children[name] == null){ throw 'SceneGraph: child with that name doesn\'t exist: '+name; } else{ child.parent = null; delete this.children[name]; } }, removeAll: function(){ for(var child in this.children){ this.remove(child); } }*/ }); var RootNode = augment(SceneNode, function(uber) { this.constructor = function() { uber.constructor.call(this, 'root'); this.properties = sceneProperties; }; }); var Shape = augment(SceneNode, function(uber) { function constructor(name, props) { uber.constructor.call(this, name); this.properties = { fill: '#000' }; if (props != null) { merge(this.properties, props); } else if (name != null && typeof name !== 'string') { throw 'SceneGraph: invalid node name'; } } this.Group = augment.extend(this, { constructor: constructor, type: 'group' }); this.Rect = augment.extend(this, { constructor: constructor, type: 'rect' }); this.Text = augment.extend(this, { constructor: function(text) { constructor.call(this); this.properties.text = text; }, type: 'text' }); }); var root = new RootNode(); this.Shape = Shape; this.root = root; return this; }; //Set up flags for (var flag in App.flags) { if (!App.flags.hasOwnProperty(flag)) continue; App.flags[flag].match = function(val) { return val.match(this.regex); }; } //Properties set once on setup App.setup = { renderer: 'html', debounce: 100, ratio: 1, supportsCanvas: false, supportsSVG: false, lineWrapRatio: 0.9, renderers: ['html', 'canvas', 'svg'] }; App.dpr = function(val) { return val * App.setup.ratio; }; //Properties modified during runtime App.vars = { preempted: false, resizableImages: [], debounceTimer: null, cache: {} }; //Pre-flight (function() { var devicePixelRatio = 1, backingStoreRatio = 1; var canvas = newEl('canvas'); var ctx = null; if (canvas.getContext) { if (canvas.toDataURL('image/png').indexOf('data:image/png') != -1) { App.setup.renderer = 'canvas'; ctx = canvas.getContext('2d'); App.setup.supportsCanvas = true; } } if (App.setup.supportsCanvas) { devicePixelRatio = global.devicePixelRatio || 1; backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1; } App.setup.ratio = devicePixelRatio / backingStoreRatio; if (!!document.createElementNS && !!document.createElementNS(SVG_NS, 'svg').createSVGRect) { App.setup.renderer = 'svg'; App.setup.supportsSVG = true; } })(); //Exposing to environment and setting up listeners register(Holder, 'Holder', global); if (global.onDomReady) { global.onDomReady(function() { if (!App.vars.preempted) { Holder.run(); } if (global.addEventListener) { global.addEventListener('resize', resizeEvent, false); global.addEventListener('orientationchange', resizeEvent, false); } else { global.attachEvent('onresize', resizeEvent); } if (typeof global.Turbolinks == 'object') { global.document.addEventListener('page:change', function() { Holder.run(); }); } }); } })(function(fn, name, global) { var isAMD = (typeof define === 'function' && define.amd); var isNode = (typeof exports === 'object'); var isWeb = !isNode; if (isAMD) { define(fn); } else { //todo: npm/browserify registration global[name] = fn; } }, this);