|
|
@@ -0,0 +1,1533 @@
|
|
|
+/*
|
|
|
+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);
|
