holder-1.js 87 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050
  1. /*!
  2. Holder - client side image placeholders
  3. Version 2.9.3+5jpuk
  4. © 2016 Ivan Malopinsky - http://imsky.co
  5. Site: http://holderjs.com
  6. Issues: https://github.com/imsky/holder/issues
  7. License: MIT
  8. */
  9. (function (window) {
  10. if (!window.document) return;
  11. var document = window.document;
  12. //https://github.com/inexorabletash/polyfill/blob/master/web.js
  13. if (!document.querySelectorAll) {
  14. document.querySelectorAll = function (selectors) {
  15. var style = document.createElement('style'), elements = [], element;
  16. document.documentElement.firstChild.appendChild(style);
  17. document._qsa = [];
  18. style.styleSheet.cssText = selectors + '{x-qsa:expression(document._qsa && document._qsa.push(this))}';
  19. window.scrollBy(0, 0);
  20. style.parentNode.removeChild(style);
  21. while (document._qsa.length) {
  22. element = document._qsa.shift();
  23. element.style.removeAttribute('x-qsa');
  24. elements.push(element);
  25. }
  26. document._qsa = null;
  27. return elements;
  28. };
  29. }
  30. if (!document.querySelector) {
  31. document.querySelector = function (selectors) {
  32. var elements = document.querySelectorAll(selectors);
  33. return (elements.length) ? elements[0] : null;
  34. };
  35. }
  36. if (!document.getElementsByClassName) {
  37. document.getElementsByClassName = function (classNames) {
  38. classNames = String(classNames).replace(/^|\s+/g, '.');
  39. return document.querySelectorAll(classNames);
  40. };
  41. }
  42. //https://github.com/inexorabletash/polyfill
  43. // ES5 15.2.3.14 Object.keys ( O )
  44. // https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/keys
  45. if (!Object.keys) {
  46. Object.keys = function (o) {
  47. if (o !== Object(o)) { throw TypeError('Object.keys called on non-object'); }
  48. var ret = [], p;
  49. for (p in o) {
  50. if (Object.prototype.hasOwnProperty.call(o, p)) {
  51. ret.push(p);
  52. }
  53. }
  54. return ret;
  55. };
  56. }
  57. // ES5 15.4.4.18 Array.prototype.forEach ( callbackfn [ , thisArg ] )
  58. // From https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach
  59. if (!Array.prototype.forEach) {
  60. Array.prototype.forEach = function (fun /*, thisp */) {
  61. if (this === void 0 || this === null) { throw TypeError(); }
  62. var t = Object(this);
  63. var len = t.length >>> 0;
  64. if (typeof fun !== "function") { throw TypeError(); }
  65. var thisp = arguments[1], i;
  66. for (i = 0; i < len; i++) {
  67. if (i in t) {
  68. fun.call(thisp, t[i], i, t);
  69. }
  70. }
  71. };
  72. }
  73. //https://github.com/inexorabletash/polyfill/blob/master/web.js
  74. (function (global) {
  75. var B64_ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
  76. global.atob = global.atob || function (input) {
  77. input = String(input);
  78. var position = 0,
  79. output = [],
  80. buffer = 0, bits = 0, n;
  81. input = input.replace(/\s/g, '');
  82. if ((input.length % 4) === 0) { input = input.replace(/=+$/, ''); }
  83. if ((input.length % 4) === 1) { throw Error('InvalidCharacterError'); }
  84. if (/[^+/0-9A-Za-z]/.test(input)) { throw Error('InvalidCharacterError'); }
  85. while (position < input.length) {
  86. n = B64_ALPHABET.indexOf(input.charAt(position));
  87. buffer = (buffer << 6) | n;
  88. bits += 6;
  89. if (bits === 24) {
  90. output.push(String.fromCharCode((buffer >> 16) & 0xFF));
  91. output.push(String.fromCharCode((buffer >> 8) & 0xFF));
  92. output.push(String.fromCharCode(buffer & 0xFF));
  93. bits = 0;
  94. buffer = 0;
  95. }
  96. position += 1;
  97. }
  98. if (bits === 12) {
  99. buffer = buffer >> 4;
  100. output.push(String.fromCharCode(buffer & 0xFF));
  101. } else if (bits === 18) {
  102. buffer = buffer >> 2;
  103. output.push(String.fromCharCode((buffer >> 8) & 0xFF));
  104. output.push(String.fromCharCode(buffer & 0xFF));
  105. }
  106. return output.join('');
  107. };
  108. global.btoa = global.btoa || function (input) {
  109. input = String(input);
  110. var position = 0,
  111. out = [],
  112. o1, o2, o3,
  113. e1, e2, e3, e4;
  114. if (/[^\x00-\xFF]/.test(input)) { throw Error('InvalidCharacterError'); }
  115. while (position < input.length) {
  116. o1 = input.charCodeAt(position++);
  117. o2 = input.charCodeAt(position++);
  118. o3 = input.charCodeAt(position++);
  119. // 111111 112222 222233 333333
  120. e1 = o1 >> 2;
  121. e2 = ((o1 & 0x3) << 4) | (o2 >> 4);
  122. e3 = ((o2 & 0xf) << 2) | (o3 >> 6);
  123. e4 = o3 & 0x3f;
  124. if (position === input.length + 2) {
  125. e3 = 64; e4 = 64;
  126. }
  127. else if (position === input.length + 1) {
  128. e4 = 64;
  129. }
  130. out.push(B64_ALPHABET.charAt(e1),
  131. B64_ALPHABET.charAt(e2),
  132. B64_ALPHABET.charAt(e3),
  133. B64_ALPHABET.charAt(e4));
  134. }
  135. return out.join('');
  136. };
  137. }(window));
  138. //https://gist.github.com/jimeh/332357
  139. if (!Object.prototype.hasOwnProperty){
  140. /*jshint -W001, -W103 */
  141. Object.prototype.hasOwnProperty = function(prop) {
  142. var proto = this.__proto__ || this.constructor.prototype;
  143. return (prop in this) && (!(prop in proto) || proto[prop] !== this[prop]);
  144. };
  145. /*jshint +W001, +W103 */
  146. }
  147. // @license http://opensource.org/licenses/MIT
  148. // copyright Paul Irish 2015
  149. // Date.now() is supported everywhere except IE8. For IE8 we use the Date.now polyfill
  150. // github.com/Financial-Times/polyfill-service/blob/master/polyfills/Date.now/polyfill.js
  151. // as Safari 6 doesn't have support for NavigationTiming, we use a Date.now() timestamp for relative values
  152. // if you want values similar to what you'd get with real perf.now, place this towards the head of the page
  153. // but in reality, you're just getting the delta between now() calls, so it's not terribly important where it's placed
  154. (function(){
  155. if ('performance' in window === false) {
  156. window.performance = {};
  157. }
  158. Date.now = (Date.now || function () { // thanks IE8
  159. return new Date().getTime();
  160. });
  161. if ('now' in window.performance === false){
  162. var nowOffset = Date.now();
  163. if (performance.timing && performance.timing.navigationStart){
  164. nowOffset = performance.timing.navigationStart;
  165. }
  166. window.performance.now = function now(){
  167. return Date.now() - nowOffset;
  168. };
  169. }
  170. })();
  171. //requestAnimationFrame polyfill for older Firefox/Chrome versions
  172. if (!window.requestAnimationFrame) {
  173. if (window.webkitRequestAnimationFrame && window.webkitCancelAnimationFrame) {
  174. //https://github.com/Financial-Times/polyfill-service/blob/master/polyfills/requestAnimationFrame/polyfill-webkit.js
  175. (function (global) {
  176. global.requestAnimationFrame = function (callback) {
  177. return webkitRequestAnimationFrame(function () {
  178. callback(global.performance.now());
  179. });
  180. };
  181. global.cancelAnimationFrame = global.webkitCancelAnimationFrame;
  182. }(window));
  183. } else if (window.mozRequestAnimationFrame && window.mozCancelAnimationFrame) {
  184. //https://github.com/Financial-Times/polyfill-service/blob/master/polyfills/requestAnimationFrame/polyfill-moz.js
  185. (function (global) {
  186. global.requestAnimationFrame = function (callback) {
  187. return mozRequestAnimationFrame(function () {
  188. callback(global.performance.now());
  189. });
  190. };
  191. global.cancelAnimationFrame = global.mozCancelAnimationFrame;
  192. }(window));
  193. } else {
  194. (function (global) {
  195. global.requestAnimationFrame = function (callback) {
  196. return global.setTimeout(callback, 1000 / 60);
  197. };
  198. global.cancelAnimationFrame = global.clearTimeout;
  199. })(window);
  200. }
  201. }
  202. })(this);
  203. (function webpackUniversalModuleDefinition(root, factory) {
  204. if(typeof exports === 'object' && typeof module === 'object')
  205. module.exports = factory();
  206. else if(typeof define === 'function' && define.amd)
  207. define([], factory);
  208. else if(typeof exports === 'object')
  209. exports["Holder"] = factory();
  210. else
  211. root["Holder"] = factory();
  212. })(this, function() {
  213. return /******/ (function(modules) { // webpackBootstrap
  214. /******/ // The module cache
  215. /******/ var installedModules = {};
  216. /******/ // The require function
  217. /******/ function __webpack_require__(moduleId) {
  218. /******/ // Check if module is in cache
  219. /******/ if(installedModules[moduleId])
  220. /******/ return installedModules[moduleId].exports;
  221. /******/ // Create a new module (and put it into the cache)
  222. /******/ var module = installedModules[moduleId] = {
  223. /******/ exports: {},
  224. /******/ id: moduleId,
  225. /******/ loaded: false
  226. /******/ };
  227. /******/ // Execute the module function
  228. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  229. /******/ // Flag the module as loaded
  230. /******/ module.loaded = true;
  231. /******/ // Return the exports of the module
  232. /******/ return module.exports;
  233. /******/ }
  234. /******/ // expose the modules object (__webpack_modules__)
  235. /******/ __webpack_require__.m = modules;
  236. /******/ // expose the module cache
  237. /******/ __webpack_require__.c = installedModules;
  238. /******/ // __webpack_public_path__
  239. /******/ __webpack_require__.p = "";
  240. /******/ // Load entry module and return exports
  241. /******/ return __webpack_require__(0);
  242. /******/ })
  243. /************************************************************************/
  244. /******/ ([
  245. /* 0 */
  246. /***/ function(module, exports, __webpack_require__) {
  247. /*
  248. Holder.js - client side image placeholders
  249. (c) 2012-2015 Ivan Malopinsky - http://imsky.co
  250. */
  251. module.exports = __webpack_require__(1);
  252. /***/ },
  253. /* 1 */
  254. /***/ function(module, exports, __webpack_require__) {
  255. /* WEBPACK VAR INJECTION */(function(global) {/*
  256. Holder.js - client side image placeholders
  257. (c) 2012-2016 Ivan Malopinsky - http://imsky.co
  258. */
  259. //Libraries and functions
  260. var onDomReady = __webpack_require__(2);
  261. var querystring = __webpack_require__(3);
  262. var SceneGraph = __webpack_require__(6);
  263. var utils = __webpack_require__(7);
  264. var SVG = __webpack_require__(8);
  265. var DOM = __webpack_require__(9);
  266. var Color = __webpack_require__(10);
  267. var constants = __webpack_require__(11);
  268. var svgRenderer = __webpack_require__(12);
  269. var sgCanvasRenderer = __webpack_require__(15);
  270. var extend = utils.extend;
  271. var dimensionCheck = utils.dimensionCheck;
  272. //Constants and definitions
  273. var SVG_NS = constants.svg_ns;
  274. var Holder = {
  275. version: constants.version,
  276. /**
  277. * Adds a theme to default settings
  278. *
  279. * @param {string} name Theme name
  280. * @param {Object} theme Theme object, with foreground, background, size, font, and fontweight properties.
  281. */
  282. addTheme: function(name, theme) {
  283. name != null && theme != null && (App.settings.themes[name] = theme);
  284. delete App.vars.cache.themeKeys;
  285. return this;
  286. },
  287. /**
  288. * Appends a placeholder to an element
  289. *
  290. * @param {string} src Placeholder URL string
  291. * @param el A selector or a reference to a DOM node
  292. */
  293. addImage: function(src, el) {
  294. //todo: use jquery fallback if available for all QSA references
  295. var nodes = DOM.getNodeArray(el);
  296. nodes.forEach(function (node) {
  297. var img = DOM.newEl('img');
  298. var domProps = {};
  299. domProps[App.setup.dataAttr] = src;
  300. DOM.setAttr(img, domProps);
  301. node.appendChild(img);
  302. });
  303. return this;
  304. },
  305. /**
  306. * Sets whether or not an image is updated on resize.
  307. * If an image is set to be updated, it is immediately rendered.
  308. *
  309. * @param {Object} el Image DOM element
  310. * @param {Boolean} value Resizable update flag value
  311. */
  312. setResizeUpdate: function(el, value) {
  313. if (el.holderData) {
  314. el.holderData.resizeUpdate = !!value;
  315. if (el.holderData.resizeUpdate) {
  316. updateResizableElements(el);
  317. }
  318. }
  319. },
  320. /**
  321. * Runs Holder with options. By default runs Holder on all images with "holder.js" in their source attributes.
  322. *
  323. * @param {Object} userOptions Options object, can contain domain, themes, images, and bgnodes properties
  324. */
  325. run: function(userOptions) {
  326. console.log(userOptions)
  327. //todo: split processing into separate queues
  328. userOptions = userOptions || {};
  329. var engineSettings = {};
  330. var options = extend(App.settings, userOptions);
  331. App.vars.preempted = true;
  332. App.vars.dataAttr = options.dataAttr || App.setup.dataAttr;
  333. engineSettings.renderer = options.renderer ? options.renderer : App.setup.renderer;
  334. if (App.setup.renderers.join(',').indexOf(engineSettings.renderer) === -1) {
  335. engineSettings.renderer = App.setup.supportsSVG ? 'svg' : (App.setup.supportsCanvas ? 'canvas' : 'html');
  336. }
  337. var images = DOM.getNodeArray(options.images);
  338. var bgnodes = DOM.getNodeArray(options.bgnodes);
  339. var stylenodes = DOM.getNodeArray(options.stylenodes);
  340. var objects = DOM.getNodeArray(options.objects);
  341. engineSettings.stylesheets = [];
  342. engineSettings.svgXMLStylesheet = true;
  343. engineSettings.noFontFallback = !!options.noFontFallback;
  344. engineSettings.noBackgroundSize = !!options.noBackgroundSize;
  345. stylenodes.forEach(function (styleNode) {
  346. if (styleNode.attributes.rel && styleNode.attributes.href && styleNode.attributes.rel.value == 'stylesheet') {
  347. var href = styleNode.attributes.href.value;
  348. //todo: write isomorphic relative-to-absolute URL function
  349. var proxyLink = DOM.newEl('a');
  350. proxyLink.href = href;
  351. var stylesheetURL = proxyLink.protocol + '//' + proxyLink.host + proxyLink.pathname + proxyLink.search;
  352. engineSettings.stylesheets.push(stylesheetURL);
  353. }
  354. });
  355. bgnodes.forEach(function (bgNode) {
  356. //Skip processing background nodes if getComputedStyle is unavailable, since only modern browsers would be able to use canvas or SVG to render to background
  357. if (!global.getComputedStyle) return;
  358. var backgroundImage = global.getComputedStyle(bgNode, null).getPropertyValue('background-image');
  359. var dataBackgroundImage = bgNode.getAttribute('data-background-src');
  360. var rawURL = dataBackgroundImage || backgroundImage;
  361. var holderURL = null;
  362. var holderString = options.domain + '/';
  363. var holderStringIndex = rawURL.indexOf(holderString);
  364. if (holderStringIndex === 0) {
  365. holderURL = rawURL;
  366. } else if (holderStringIndex === 1 && rawURL[0] === '?') {
  367. holderURL = rawURL.slice(1);
  368. } else {
  369. var fragment = rawURL.substr(holderStringIndex).match(/([^\"]*)"?\)/);
  370. if (fragment !== null) {
  371. holderURL = fragment[1];
  372. } else if (rawURL.indexOf('url(') === 0) {
  373. throw 'Holder: unable to parse background URL: ' + rawURL;
  374. }
  375. }
  376. if (holderURL) {
  377. var holderFlags = parseURL(holderURL, options);
  378. if (holderFlags) {
  379. prepareDOMElement({
  380. mode: 'background',
  381. el: bgNode,
  382. flags: holderFlags,
  383. engineSettings: engineSettings
  384. });
  385. }
  386. }
  387. });
  388. objects.forEach(function (object) {
  389. var objectAttr = {};
  390. try {
  391. objectAttr.data = object.getAttribute('data');
  392. objectAttr.dataSrc = object.getAttribute(App.vars.dataAttr);
  393. } catch (e) {}
  394. var objectHasSrcURL = objectAttr.data != null && objectAttr.data.indexOf(options.domain) === 0;
  395. var objectHasDataSrcURL = objectAttr.dataSrc != null && objectAttr.dataSrc.indexOf(options.domain) === 0;
  396. if (objectHasSrcURL) {
  397. prepareImageElement(options, engineSettings, objectAttr.data, object);
  398. } else if (objectHasDataSrcURL) {
  399. prepareImageElement(options, engineSettings, objectAttr.dataSrc, object);
  400. }
  401. });
  402. images.forEach(function (image) {
  403. var imageAttr = {};
  404. try {
  405. imageAttr.src = image.getAttribute('src');
  406. imageAttr.dataSrc = image.getAttribute(App.vars.dataAttr);
  407. imageAttr.rendered = image.getAttribute('data-holder-rendered');
  408. } catch (e) {}
  409. var imageHasSrc = imageAttr.src != null;
  410. var imageHasDataSrcURL = imageAttr.dataSrc != null && imageAttr.dataSrc.indexOf(options.domain) === 0;
  411. var imageRendered = imageAttr.rendered != null && imageAttr.rendered == 'true';
  412. if (imageHasSrc) {
  413. if (imageAttr.src.indexOf(options.domain) === 0) {
  414. prepareImageElement(options, engineSettings, imageAttr.src, image);
  415. } else if (imageHasDataSrcURL) {
  416. //Image has a valid data-src and an invalid src
  417. if (imageRendered) {
  418. //If the placeholder has already been render, re-render it
  419. prepareImageElement(options, engineSettings, imageAttr.dataSrc, image);
  420. } else {
  421. //If the placeholder has not been rendered, check if the image exists and render a fallback if it doesn't
  422. (function(src, options, engineSettings, dataSrc, image) {
  423. utils.imageExists(src, function(exists) {
  424. if (!exists) {
  425. prepareImageElement(options, engineSettings, dataSrc, image);
  426. }
  427. });
  428. })(imageAttr.src, options, engineSettings, imageAttr.dataSrc, image);
  429. }
  430. }
  431. } else if (imageHasDataSrcURL) {
  432. prepareImageElement(options, engineSettings, imageAttr.dataSrc, image);
  433. }
  434. });
  435. return this;
  436. }
  437. };
  438. var App = {
  439. settings: {
  440. domain: 'holder.js',
  441. images: 'img',
  442. objects: 'object',
  443. bgnodes: 'body .holderjs',
  444. stylenodes: 'head link.holderjs',
  445. themes: {
  446. 'gray': {
  447. bg: '#EEEEEE',
  448. fg: '#AAAAAA'
  449. },
  450. 'social': {
  451. bg: '#3a5a97',
  452. fg: '#FFFFFF'
  453. },
  454. 'industrial': {
  455. bg: '#434A52',
  456. fg: '#C2F200'
  457. },
  458. 'sky': {
  459. bg: '#0D8FDB',
  460. fg: '#FFFFFF'
  461. },
  462. 'vine': {
  463. bg: '#39DBAC',
  464. fg: '#1E292C'
  465. },
  466. 'lava': {
  467. bg: '#F8591A',
  468. fg: '#1C2846'
  469. }
  470. }
  471. },
  472. defaults: {
  473. size: 10,
  474. units: 'pt',
  475. scale: 1 / 16
  476. }
  477. };
  478. /**
  479. * Processes provided source attribute and sets up the appropriate rendering workflow
  480. *
  481. * @private
  482. * @param options Instance options from Holder.run
  483. * @param renderSettings Instance configuration
  484. * @param src Image URL
  485. * @param el Image DOM element
  486. */
  487. function prepareImageElement(options, engineSettings, src, el) {
  488. var holderFlags = parseURL(src.substr(src.lastIndexOf(options.domain)), options);
  489. if (holderFlags) {
  490. prepareDOMElement({
  491. mode: null,
  492. el: el,
  493. flags: holderFlags,
  494. engineSettings: engineSettings
  495. });
  496. }
  497. }
  498. /**
  499. * Processes a Holder URL and extracts configuration from query string
  500. *
  501. * @private
  502. * @param url URL
  503. * @param instanceOptions Instance options from Holder.run
  504. */
  505. function parseURL(url, instanceOptions) {
  506. var holder = {
  507. theme: extend(App.settings.themes.gray, null),
  508. stylesheets: instanceOptions.stylesheets,
  509. instanceOptions: instanceOptions
  510. };
  511. var firstQuestionMark = url.indexOf('?');
  512. var parts = [url];
  513. if (firstQuestionMark !== -1) {
  514. parts = [url.slice(0, firstQuestionMark), url.slice(firstQuestionMark + 1)];
  515. }
  516. var basics = parts[0].split('/');
  517. holder.holderURL = url;
  518. var dimensions = basics[1];
  519. var dimensionData = dimensions.match(/([\d]+p?)x([\d]+p?)/);
  520. if (!dimensionData) return false;
  521. holder.fluid = dimensions.indexOf('p') !== -1;
  522. holder.dimensions = {
  523. width: dimensionData[1].replace('p', '%'),
  524. height: dimensionData[2].replace('p', '%')
  525. };
  526. if (parts.length === 2) {
  527. var options = querystring.parse(parts[1]);
  528. // Colors
  529. if (options.bg) {
  530. holder.theme.bg = utils.parseColor(options.bg);
  531. }
  532. if (options.fg) {
  533. holder.theme.fg = utils.parseColor(options.fg);
  534. }
  535. //todo: add automatic foreground to themes without foreground
  536. if (options.bg && !options.fg) {
  537. holder.autoFg = true;
  538. }
  539. if (options.theme && holder.instanceOptions.themes.hasOwnProperty(options.theme)) {
  540. holder.theme = extend(holder.instanceOptions.themes[options.theme], null);
  541. }
  542. // Text
  543. if (options.text) {
  544. holder.text = options.text;
  545. }
  546. if (options.textmode) {
  547. holder.textmode = options.textmode;
  548. }
  549. if (options.size) {
  550. holder.size = options.size;
  551. }
  552. if (options.font) {
  553. holder.font = options.font;
  554. }
  555. if (options.align) {
  556. holder.align = options.align;
  557. }
  558. if (options.lineWrap) {
  559. holder.lineWrap = options.lineWrap;
  560. }
  561. holder.nowrap = utils.truthy(options.nowrap);
  562. // Miscellaneous
  563. holder.auto = utils.truthy(options.auto);
  564. holder.outline = utils.truthy(options.outline);
  565. if (utils.truthy(options.random)) {
  566. App.vars.cache.themeKeys = App.vars.cache.themeKeys || Object.keys(holder.instanceOptions.themes);
  567. var _theme = App.vars.cache.themeKeys[0 | Math.random() * App.vars.cache.themeKeys.length];
  568. holder.theme = extend(holder.instanceOptions.themes[_theme], null);
  569. }
  570. }
  571. return holder;
  572. }
  573. /**
  574. * Modifies the DOM to fit placeholders and sets up resizable image callbacks (for fluid and automatically sized placeholders)
  575. *
  576. * @private
  577. * @param settings DOM prep settings
  578. */
  579. function prepareDOMElement(prepSettings) {
  580. var mode = prepSettings.mode;
  581. var el = prepSettings.el;
  582. var flags = prepSettings.flags;
  583. var _engineSettings = prepSettings.engineSettings;
  584. var dimensions = flags.dimensions,
  585. theme = flags.theme;
  586. var dimensionsCaption = dimensions.width + 'x' + dimensions.height;
  587. mode = mode == null ? (flags.fluid ? 'fluid' : 'image') : mode;
  588. var holderTemplateRe = /holder_([a-z]+)/g;
  589. var dimensionsInText = false;
  590. if (flags.text != null) {
  591. theme.text = flags.text;
  592. //<object> SVG embedding doesn't parse Unicode properly
  593. if (el.nodeName.toLowerCase() === 'object') {
  594. var textLines = theme.text.split('\\n');
  595. for (var k = 0; k < textLines.length; k++) {
  596. textLines[k] = utils.encodeHtmlEntity(textLines[k]);
  597. }
  598. theme.text = textLines.join('\\n');
  599. }
  600. }
  601. if (theme.text) {
  602. var holderTemplateMatches = theme.text.match(holderTemplateRe);
  603. if (holderTemplateMatches !== null) {
  604. //todo: optimize template replacement
  605. holderTemplateMatches.forEach(function (match) {
  606. if (match === 'holder_dimensions') {
  607. theme.text = theme.text.replace(match, dimensionsCaption);
  608. }
  609. });
  610. }
  611. }
  612. var holderURL = flags.holderURL;
  613. var engineSettings = extend(_engineSettings, null);
  614. if (flags.font) {
  615. /*
  616. If external fonts are used in a <img> placeholder rendered with SVG, Holder falls back to canvas.
  617. This is done because Firefox and Chrome disallow embedded SVGs from referencing external assets.
  618. The workaround is either to change the placeholder tag from <img> to <object> or to use the canvas renderer.
  619. */
  620. theme.font = flags.font;
  621. if (!engineSettings.noFontFallback && el.nodeName.toLowerCase() === 'img' && App.setup.supportsCanvas && engineSettings.renderer === 'svg') {
  622. engineSettings = extend(engineSettings, {
  623. renderer: 'canvas'
  624. });
  625. }
  626. }
  627. //Chrome and Opera require a quick 10ms re-render if web fonts are used with canvas
  628. if (flags.font && engineSettings.renderer == 'canvas') {
  629. engineSettings.reRender = true;
  630. }
  631. if (mode == 'background') {
  632. if (el.getAttribute('data-background-src') == null) {
  633. DOM.setAttr(el, {
  634. 'data-background-src': holderURL
  635. });
  636. }
  637. } else {
  638. var domProps = {};
  639. domProps[App.vars.dataAttr] = holderURL;
  640. DOM.setAttr(el, domProps);
  641. }
  642. flags.theme = theme;
  643. //todo consider using all renderSettings in holderData
  644. el.holderData = {
  645. flags: flags,
  646. engineSettings: engineSettings
  647. };
  648. if (mode == 'image' || mode == 'fluid') {
  649. DOM.setAttr(el, {
  650. 'alt': theme.text ? (dimensionsInText ? theme.text : theme.text + ' [' + dimensionsCaption + ']') : dimensionsCaption
  651. });
  652. }
  653. var renderSettings = {
  654. mode: mode,
  655. el: el,
  656. holderSettings: {
  657. dimensions: dimensions,
  658. theme: theme,
  659. flags: flags
  660. },
  661. engineSettings: engineSettings
  662. };
  663. if (mode == 'image') {
  664. if (!flags.auto) {
  665. el.style.width = dimensions.width + 'px';
  666. el.style.height = dimensions.height + 'px';
  667. }
  668. if (engineSettings.renderer == 'html') {
  669. el.style.backgroundColor = theme.bg;
  670. } else {
  671. render(renderSettings);
  672. if (flags.textmode == 'exact') {
  673. el.holderData.resizeUpdate = true;
  674. App.vars.resizableImages.push(el);
  675. updateResizableElements(el);
  676. }
  677. }
  678. } else if (mode == 'background' && engineSettings.renderer != 'html') {
  679. render(renderSettings);
  680. } else if (mode == 'fluid') {
  681. el.holderData.resizeUpdate = true;
  682. if (dimensions.height.slice(-1) == '%') {
  683. el.style.height = dimensions.height;
  684. } else if (flags.auto == null || !flags.auto) {
  685. el.style.height = dimensions.height + 'px';
  686. }
  687. if (dimensions.width.slice(-1) == '%') {
  688. el.style.width = dimensions.width;
  689. } else if (flags.auto == null || !flags.auto) {
  690. el.style.width = dimensions.width + 'px';
  691. }
  692. if (el.style.display == 'inline' || el.style.display === '' || el.style.display == 'none') {
  693. el.style.display = 'block';
  694. }
  695. setInitialDimensions(el);
  696. if (engineSettings.renderer == 'html') {
  697. el.style.backgroundColor = theme.bg;
  698. } else {
  699. App.vars.resizableImages.push(el);
  700. updateResizableElements(el);
  701. }
  702. }
  703. }
  704. /**
  705. * Core function that takes output from renderers and sets it as the source or background-image of the target element
  706. *
  707. * @private
  708. * @param renderSettings Renderer settings
  709. */
  710. function render(renderSettings) {
  711. var image = null;
  712. var mode = renderSettings.mode;
  713. var el = renderSettings.el;
  714. var holderSettings = renderSettings.holderSettings;
  715. var engineSettings = renderSettings.engineSettings;
  716. switch (engineSettings.renderer) {
  717. case 'svg':
  718. if (!App.setup.supportsSVG) return;
  719. break;
  720. case 'canvas':
  721. if (!App.setup.supportsCanvas) return;
  722. break;
  723. default:
  724. return;
  725. }
  726. //todo: move generation of scene up to flag generation to reduce extra object creation
  727. var scene = {
  728. width: holderSettings.dimensions.width,
  729. height: holderSettings.dimensions.height,
  730. theme: holderSettings.theme,
  731. flags: holderSettings.flags
  732. };
  733. var sceneGraph = buildSceneGraph(scene);
  734. function getRenderedImage() {
  735. var image = null;
  736. switch (engineSettings.renderer) {
  737. case 'canvas':
  738. image = sgCanvasRenderer(sceneGraph, renderSettings);
  739. break;
  740. case 'svg':
  741. image = svgRenderer(sceneGraph, renderSettings);
  742. break;
  743. default:
  744. throw 'Holder: invalid renderer: ' + engineSettings.renderer;
  745. }
  746. return image;
  747. }
  748. image = getRenderedImage();
  749. if (image == null) {
  750. throw 'Holder: couldn\'t render placeholder';
  751. }
  752. //todo: add <object> canvas rendering
  753. if (mode == 'background') {
  754. el.style.backgroundImage = 'url(' + image + ')';
  755. if (!engineSettings.noBackgroundSize) {
  756. el.style.backgroundSize = scene.width + 'px ' + scene.height + 'px';
  757. }
  758. } else {
  759. if (el.nodeName.toLowerCase() === 'img') {
  760. DOM.setAttr(el, {
  761. 'src': image
  762. });
  763. } else if (el.nodeName.toLowerCase() === 'object') {
  764. DOM.setAttr(el, {
  765. 'data': image,
  766. 'type': 'image/svg+xml'
  767. });
  768. }
  769. if (engineSettings.reRender) {
  770. global.setTimeout(function () {
  771. var image = getRenderedImage();
  772. if (image == null) {
  773. throw 'Holder: couldn\'t render placeholder';
  774. }
  775. //todo: refactor this code into a function
  776. if (el.nodeName.toLowerCase() === 'img') {
  777. DOM.setAttr(el, {
  778. 'src': image
  779. });
  780. } else if (el.nodeName.toLowerCase() === 'object') {
  781. DOM.setAttr(el, {
  782. 'data': image,
  783. 'type': 'image/svg+xml'
  784. });
  785. }
  786. }, 150);
  787. }
  788. }
  789. //todo: account for re-rendering
  790. DOM.setAttr(el, {
  791. 'data-holder-rendered': true
  792. });
  793. }
  794. /**
  795. * Core function that takes a Holder scene description and builds a scene graph
  796. *
  797. * @private
  798. * @param scene Holder scene object
  799. */
  800. //todo: make this function reusable
  801. //todo: merge app defaults and setup properties into the scene argument
  802. function buildSceneGraph(scene) {
  803. var fontSize = App.defaults.size;
  804. if (parseFloat(scene.theme.size)) {
  805. fontSize = scene.theme.size;
  806. } else if (parseFloat(scene.flags.size)) {
  807. fontSize = scene.flags.size;
  808. }
  809. scene.font = {
  810. family: scene.theme.font ? scene.theme.font : 'Arial, Helvetica, Open Sans, sans-serif',
  811. size: textSize(scene.width, scene.height, fontSize, App.defaults.scale),
  812. units: scene.theme.units ? scene.theme.units : App.defaults.units,
  813. weight: scene.theme.fontweight ? scene.theme.fontweight : 'bold'
  814. };
  815. scene.text = scene.theme.text || Math.floor(scene.width) + 'x' + Math.floor(scene.height);
  816. scene.noWrap = scene.theme.nowrap || scene.flags.nowrap;
  817. scene.align = scene.theme.align || scene.flags.align || 'center';
  818. switch (scene.flags.textmode) {
  819. case 'literal':
  820. scene.text = scene.flags.dimensions.width + 'x' + scene.flags.dimensions.height;
  821. break;
  822. case 'exact':
  823. if (!scene.flags.exactDimensions) break;
  824. scene.text = Math.floor(scene.flags.exactDimensions.width) + 'x' + Math.floor(scene.flags.exactDimensions.height);
  825. break;
  826. }
  827. var lineWrap = scene.flags.lineWrap || App.setup.lineWrapRatio;
  828. var sceneMargin = scene.width * lineWrap;
  829. var maxLineWidth = sceneMargin;
  830. var sceneGraph = new SceneGraph({
  831. width: scene.width,
  832. height: scene.height
  833. });
  834. var Shape = sceneGraph.Shape;
  835. var holderBg = new Shape.Rect('holderBg', {
  836. fill: scene.theme.bg
  837. });
  838. holderBg.resize(scene.width, scene.height);
  839. sceneGraph.root.add(holderBg);
  840. if (scene.flags.outline) {
  841. var outlineColor = new Color(holderBg.properties.fill);
  842. outlineColor = outlineColor.lighten(outlineColor.lighterThan('7f7f7f') ? -0.1 : 0.1);
  843. holderBg.properties.outline = {
  844. fill: outlineColor.toHex(true),
  845. width: 2
  846. };
  847. }
  848. var holderTextColor = scene.theme.fg;
  849. if (scene.flags.autoFg) {
  850. var holderBgColor = new Color(holderBg.properties.fill);
  851. var lightColor = new Color('fff');
  852. var darkColor = new Color('000', {
  853. 'alpha': 0.285714
  854. });
  855. holderTextColor = holderBgColor.blendAlpha(holderBgColor.lighterThan('7f7f7f') ? darkColor : lightColor).toHex(true);
  856. }
  857. var holderTextGroup = new Shape.Group('holderTextGroup', {
  858. text: scene.text,
  859. align: scene.align,
  860. font: scene.font,
  861. fill: holderTextColor
  862. });
  863. holderTextGroup.moveTo(null, null, 1);
  864. sceneGraph.root.add(holderTextGroup);
  865. var tpdata = holderTextGroup.textPositionData = stagingRenderer(sceneGraph);
  866. if (!tpdata) {
  867. throw 'Holder: staging fallback not supported yet.';
  868. }
  869. holderTextGroup.properties.leading = tpdata.boundingBox.height;
  870. var textNode = null;
  871. var line = null;
  872. function finalizeLine(parent, line, width, height) {
  873. line.width = width;
  874. line.height = height;
  875. parent.width = Math.max(parent.width, line.width);
  876. parent.height += line.height;
  877. }
  878. if (tpdata.lineCount > 1) {
  879. var offsetX = 0;
  880. var offsetY = 0;
  881. var lineIndex = 0;
  882. var lineKey;
  883. line = new Shape.Group('line' + lineIndex);
  884. //Double margin so that left/right-aligned next is not flush with edge of image
  885. if (scene.align === 'left' || scene.align === 'right') {
  886. maxLineWidth = scene.width * (1 - (1 - lineWrap) * 2);
  887. }
  888. for (var i = 0; i < tpdata.words.length; i++) {
  889. var word = tpdata.words[i];
  890. textNode = new Shape.Text(word.text);
  891. var newline = word.text == '\\n';
  892. if (!scene.noWrap && (offsetX + word.width >= maxLineWidth || newline === true)) {
  893. finalizeLine(holderTextGroup, line, offsetX, holderTextGroup.properties.leading);
  894. holderTextGroup.add(line);
  895. offsetX = 0;
  896. offsetY += holderTextGroup.properties.leading;
  897. lineIndex += 1;
  898. line = new Shape.Group('line' + lineIndex);
  899. line.y = offsetY;
  900. }
  901. if (newline === true) {
  902. continue;
  903. }
  904. textNode.moveTo(offsetX, 0);
  905. offsetX += tpdata.spaceWidth + word.width;
  906. line.add(textNode);
  907. }
  908. finalizeLine(holderTextGroup, line, offsetX, holderTextGroup.properties.leading);
  909. holderTextGroup.add(line);
  910. if (scene.align === 'left') {
  911. holderTextGroup.moveTo(scene.width - sceneMargin, null, null);
  912. } else if (scene.align === 'right') {
  913. for (lineKey in holderTextGroup.children) {
  914. line = holderTextGroup.children[lineKey];
  915. line.moveTo(scene.width - line.width, null, null);
  916. }
  917. holderTextGroup.moveTo(0 - (scene.width - sceneMargin), null, null);
  918. } else {
  919. for (lineKey in holderTextGroup.children) {
  920. line = holderTextGroup.children[lineKey];
  921. line.moveTo((holderTextGroup.width - line.width) / 2, null, null);
  922. }
  923. holderTextGroup.moveTo((scene.width - holderTextGroup.width) / 2, null, null);
  924. }
  925. holderTextGroup.moveTo(null, (scene.height - holderTextGroup.height) / 2, null);
  926. //If the text exceeds vertical space, move it down so the first line is visible
  927. if ((scene.height - holderTextGroup.height) / 2 < 0) {
  928. holderTextGroup.moveTo(null, 0, null);
  929. }
  930. } else {
  931. textNode = new Shape.Text(scene.text);
  932. line = new Shape.Group('line0');
  933. line.add(textNode);
  934. holderTextGroup.add(line);
  935. if (scene.align === 'left') {
  936. holderTextGroup.moveTo(scene.width - sceneMargin, null, null);
  937. } else if (scene.align === 'right') {
  938. holderTextGroup.moveTo(0 - (scene.width - sceneMargin), null, null);
  939. } else {
  940. holderTextGroup.moveTo((scene.width - tpdata.boundingBox.width) / 2, null, null);
  941. }
  942. holderTextGroup.moveTo(null, (scene.height - tpdata.boundingBox.height) / 2, null);
  943. }
  944. //todo: renderlist
  945. return sceneGraph;
  946. }
  947. /**
  948. * Adaptive text sizing function
  949. *
  950. * @private
  951. * @param width Parent width
  952. * @param height Parent height
  953. * @param fontSize Requested text size
  954. * @param scale Proportional scale of text
  955. */
  956. function textSize(width, height, fontSize, scale) {
  957. var stageWidth = parseInt(width, 10);
  958. var stageHeight = parseInt(height, 10);
  959. var bigSide = Math.max(stageWidth, stageHeight);
  960. var smallSide = Math.min(stageWidth, stageHeight);
  961. var newHeight = 0.8 * Math.min(smallSide, bigSide * scale);
  962. return Math.round(Math.max(fontSize, newHeight));
  963. }
  964. /**
  965. * Iterates over resizable (fluid or auto) placeholders and renders them
  966. *
  967. * @private
  968. * @param element Optional element selector, specified only if a specific element needs to be re-rendered
  969. */
  970. function updateResizableElements(element) {
  971. var images;
  972. if (element == null || element.nodeType == null) {
  973. images = App.vars.resizableImages;
  974. } else {
  975. images = [element];
  976. }
  977. for (var i = 0, l = images.length; i < l; i++) {
  978. var el = images[i];
  979. if (el.holderData) {
  980. var flags = el.holderData.flags;
  981. var dimensions = dimensionCheck(el);
  982. if (dimensions) {
  983. if (!el.holderData.resizeUpdate) {
  984. continue;
  985. }
  986. if (flags.fluid && flags.auto) {
  987. var fluidConfig = el.holderData.fluidConfig;
  988. switch (fluidConfig.mode) {
  989. case 'width':
  990. dimensions.height = dimensions.width / fluidConfig.ratio;
  991. break;
  992. case 'height':
  993. dimensions.width = dimensions.height * fluidConfig.ratio;
  994. break;
  995. }
  996. }
  997. var settings = {
  998. mode: 'image',
  999. holderSettings: {
  1000. dimensions: dimensions,
  1001. theme: flags.theme,
  1002. flags: flags
  1003. },
  1004. el: el,
  1005. engineSettings: el.holderData.engineSettings
  1006. };
  1007. if (flags.textmode == 'exact') {
  1008. flags.exactDimensions = dimensions;
  1009. settings.holderSettings.dimensions = flags.dimensions;
  1010. }
  1011. render(settings);
  1012. } else {
  1013. setInvisible(el);
  1014. }
  1015. }
  1016. }
  1017. }
  1018. /**
  1019. * Sets up aspect ratio metadata for fluid placeholders, in order to preserve proportions when resizing
  1020. *
  1021. * @private
  1022. * @param el Image DOM element
  1023. */
  1024. function setInitialDimensions(el) {
  1025. if (el.holderData) {
  1026. var dimensions = dimensionCheck(el);
  1027. if (dimensions) {
  1028. var flags = el.holderData.flags;
  1029. var fluidConfig = {
  1030. fluidHeight: flags.dimensions.height.slice(-1) == '%',
  1031. fluidWidth: flags.dimensions.width.slice(-1) == '%',
  1032. mode: null,
  1033. initialDimensions: dimensions
  1034. };
  1035. if (fluidConfig.fluidWidth && !fluidConfig.fluidHeight) {
  1036. fluidConfig.mode = 'width';
  1037. fluidConfig.ratio = fluidConfig.initialDimensions.width / parseFloat(flags.dimensions.height);
  1038. } else if (!fluidConfig.fluidWidth && fluidConfig.fluidHeight) {
  1039. fluidConfig.mode = 'height';
  1040. fluidConfig.ratio = parseFloat(flags.dimensions.width) / fluidConfig.initialDimensions.height;
  1041. }
  1042. el.holderData.fluidConfig = fluidConfig;
  1043. } else {
  1044. setInvisible(el);
  1045. }
  1046. }
  1047. }
  1048. /**
  1049. * Iterates through all current invisible images, and if they're visible, renders them and removes them from further checks. Runs every animation frame.
  1050. *
  1051. * @private
  1052. */
  1053. function visibilityCheck() {
  1054. var renderableImages = [];
  1055. var keys = Object.keys(App.vars.invisibleImages);
  1056. var el;
  1057. keys.forEach(function (key) {
  1058. el = App.vars.invisibleImages[key];
  1059. if (dimensionCheck(el) && el.nodeName.toLowerCase() == 'img') {
  1060. renderableImages.push(el);
  1061. delete App.vars.invisibleImages[key];
  1062. }
  1063. });
  1064. if (renderableImages.length) {
  1065. Holder.run({
  1066. images: renderableImages
  1067. });
  1068. }
  1069. // Done to prevent 100% CPU usage via aggressive calling of requestAnimationFrame
  1070. setTimeout(function () {
  1071. global.requestAnimationFrame(visibilityCheck);
  1072. }, 10);
  1073. }
  1074. /**
  1075. * Starts checking for invisible placeholders if not doing so yet. Does nothing otherwise.
  1076. *
  1077. * @private
  1078. */
  1079. function startVisibilityCheck() {
  1080. if (!App.vars.visibilityCheckStarted) {
  1081. global.requestAnimationFrame(visibilityCheck);
  1082. App.vars.visibilityCheckStarted = true;
  1083. }
  1084. }
  1085. /**
  1086. * Sets a unique ID for an image detected to be invisible and adds it to the map of invisible images checked by visibilityCheck
  1087. *
  1088. * @private
  1089. * @param el Invisible DOM element
  1090. */
  1091. function setInvisible(el) {
  1092. if (!el.holderData.invisibleId) {
  1093. App.vars.invisibleId += 1;
  1094. App.vars.invisibleImages['i' + App.vars.invisibleId] = el;
  1095. el.holderData.invisibleId = App.vars.invisibleId;
  1096. }
  1097. }
  1098. //todo: see if possible to convert stagingRenderer to use HTML only
  1099. var stagingRenderer = (function() {
  1100. var svg = null,
  1101. stagingText = null,
  1102. stagingTextNode = null;
  1103. return function(graph) {
  1104. var rootNode = graph.root;
  1105. if (App.setup.supportsSVG) {
  1106. var firstTimeSetup = false;
  1107. var tnode = function(text) {
  1108. return document.createTextNode(text);
  1109. };
  1110. if (svg == null || svg.parentNode !== document.body) {
  1111. firstTimeSetup = true;
  1112. }
  1113. svg = SVG.initSVG(svg, rootNode.properties.width, rootNode.properties.height);
  1114. //Show staging element before staging
  1115. svg.style.display = 'block';
  1116. if (firstTimeSetup) {
  1117. stagingText = DOM.newEl('text', SVG_NS);
  1118. stagingTextNode = tnode(null);
  1119. DOM.setAttr(stagingText, {
  1120. x: 0
  1121. });
  1122. stagingText.appendChild(stagingTextNode);
  1123. svg.appendChild(stagingText);
  1124. document.body.appendChild(svg);
  1125. svg.style.visibility = 'hidden';
  1126. svg.style.position = 'absolute';
  1127. svg.style.top = '-100%';
  1128. svg.style.left = '-100%';
  1129. //todo: workaround for zero-dimension <svg> tag in Opera 12
  1130. //svg.setAttribute('width', 0);
  1131. //svg.setAttribute('height', 0);
  1132. }
  1133. var holderTextGroup = rootNode.children.holderTextGroup;
  1134. var htgProps = holderTextGroup.properties;
  1135. DOM.setAttr(stagingText, {
  1136. 'y': htgProps.font.size,
  1137. 'style': utils.cssProps({
  1138. 'font-weight': htgProps.font.weight,
  1139. 'font-size': htgProps.font.size + htgProps.font.units,
  1140. 'font-family': htgProps.font.family
  1141. })
  1142. });
  1143. //Get bounding box for the whole string (total width and height)
  1144. stagingTextNode.nodeValue = htgProps.text;
  1145. var stagingTextBBox = stagingText.getBBox();
  1146. //Get line count and split the string into words
  1147. var lineCount = Math.ceil(stagingTextBBox.width / rootNode.properties.width);
  1148. var words = htgProps.text.split(' ');
  1149. var newlines = htgProps.text.match(/\\n/g);
  1150. lineCount += newlines == null ? 0 : newlines.length;
  1151. //Get bounding box for the string with spaces removed
  1152. stagingTextNode.nodeValue = htgProps.text.replace(/[ ]+/g, '');
  1153. var computedNoSpaceLength = stagingText.getComputedTextLength();
  1154. //Compute average space width
  1155. var diffLength = stagingTextBBox.width - computedNoSpaceLength;
  1156. var spaceWidth = Math.round(diffLength / Math.max(1, words.length - 1));
  1157. //Get widths for every word with space only if there is more than one line
  1158. var wordWidths = [];
  1159. if (lineCount > 1) {
  1160. stagingTextNode.nodeValue = '';
  1161. for (var i = 0; i < words.length; i++) {
  1162. if (words[i].length === 0) continue;
  1163. stagingTextNode.nodeValue = utils.decodeHtmlEntity(words[i]);
  1164. var bbox = stagingText.getBBox();
  1165. wordWidths.push({
  1166. text: words[i],
  1167. width: bbox.width
  1168. });
  1169. }
  1170. }
  1171. //Hide staging element after staging
  1172. svg.style.display = 'none';
  1173. return {
  1174. spaceWidth: spaceWidth,
  1175. lineCount: lineCount,
  1176. boundingBox: stagingTextBBox,
  1177. words: wordWidths
  1178. };
  1179. } else {
  1180. //todo: canvas fallback for measuring text on android 2.3
  1181. return false;
  1182. }
  1183. };
  1184. })();
  1185. //Helpers
  1186. /**
  1187. * Prevents a function from being called too often, waits until a timer elapses to call it again
  1188. *
  1189. * @param fn Function to call
  1190. */
  1191. function debounce(fn) {
  1192. if (!App.vars.debounceTimer) fn.call(this);
  1193. if (App.vars.debounceTimer) global.clearTimeout(App.vars.debounceTimer);
  1194. App.vars.debounceTimer = global.setTimeout(function() {
  1195. App.vars.debounceTimer = null;
  1196. fn.call(this);
  1197. }, App.setup.debounce);
  1198. }
  1199. /**
  1200. * Holder-specific resize/orientation change callback, debounced to prevent excessive execution
  1201. */
  1202. function resizeEvent() {
  1203. debounce(function() {
  1204. updateResizableElements(null);
  1205. });
  1206. }
  1207. //Set up flags
  1208. for (var flag in App.flags) {
  1209. if (!App.flags.hasOwnProperty(flag)) continue;
  1210. App.flags[flag].match = function(val) {
  1211. return val.match(this.regex);
  1212. };
  1213. }
  1214. //Properties set once on setup
  1215. App.setup = {
  1216. renderer: 'html',
  1217. debounce: 100,
  1218. ratio: 1,
  1219. supportsCanvas: false,
  1220. supportsSVG: false,
  1221. lineWrapRatio: 0.9,
  1222. dataAttr: 'data-src',
  1223. renderers: ['html', 'canvas', 'svg']
  1224. };
  1225. //Properties modified during runtime
  1226. App.vars = {
  1227. preempted: false,
  1228. resizableImages: [],
  1229. invisibleImages: {},
  1230. invisibleId: 0,
  1231. visibilityCheckStarted: false,
  1232. debounceTimer: null,
  1233. cache: {}
  1234. };
  1235. //Pre-flight
  1236. (function() {
  1237. var canvas = DOM.newEl('canvas');
  1238. if (canvas.getContext) {
  1239. if (canvas.toDataURL('image/png').indexOf('data:image/png') != -1) {
  1240. App.setup.renderer = 'canvas';
  1241. App.setup.supportsCanvas = true;
  1242. }
  1243. }
  1244. if (!!document.createElementNS && !!document.createElementNS(SVG_NS, 'svg').createSVGRect) {
  1245. App.setup.renderer = 'svg';
  1246. App.setup.supportsSVG = true;
  1247. }
  1248. })();
  1249. //Starts checking for invisible placeholders
  1250. startVisibilityCheck();
  1251. if (onDomReady) {
  1252. onDomReady(function() {
  1253. if (!App.vars.preempted) {
  1254. Holder.run();
  1255. }
  1256. if (global.addEventListener) {
  1257. global.addEventListener('resize', resizeEvent, false);
  1258. global.addEventListener('orientationchange', resizeEvent, false);
  1259. } else {
  1260. global.attachEvent('onresize', resizeEvent);
  1261. }
  1262. if (typeof global.Turbolinks == 'object') {
  1263. global.document.addEventListener('page:change', function() {
  1264. Holder.run();
  1265. });
  1266. }
  1267. });
  1268. }
  1269. module.exports = Holder;
  1270. /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
  1271. /***/ },
  1272. /* 2 */
  1273. /***/ function(module, exports) {
  1274. /*!
  1275. * onDomReady.js 1.4.0 (c) 2013 Tubal Martin - MIT license
  1276. *
  1277. * Specially modified to work with Holder.js
  1278. */
  1279. function _onDomReady(win) {
  1280. //Lazy loading fix for Firefox < 3.6
  1281. //http://webreflection.blogspot.com/2009/11/195-chars-to-help-lazy-loading.html
  1282. if (document.readyState == null && document.addEventListener) {
  1283. document.addEventListener("DOMContentLoaded", function DOMContentLoaded() {
  1284. document.removeEventListener("DOMContentLoaded", DOMContentLoaded, false);
  1285. document.readyState = "complete";
  1286. }, false);
  1287. document.readyState = "loading";
  1288. }
  1289. var doc = win.document,
  1290. docElem = doc.documentElement,
  1291. LOAD = "load",
  1292. FALSE = false,
  1293. ONLOAD = "on"+LOAD,
  1294. COMPLETE = "complete",
  1295. READYSTATE = "readyState",
  1296. ATTACHEVENT = "attachEvent",
  1297. DETACHEVENT = "detachEvent",
  1298. ADDEVENTLISTENER = "addEventListener",
  1299. DOMCONTENTLOADED = "DOMContentLoaded",
  1300. ONREADYSTATECHANGE = "onreadystatechange",
  1301. REMOVEEVENTLISTENER = "removeEventListener",
  1302. // W3C Event model
  1303. w3c = ADDEVENTLISTENER in doc,
  1304. _top = FALSE,
  1305. // isReady: Is the DOM ready to be used? Set to true once it occurs.
  1306. isReady = FALSE,
  1307. // Callbacks pending execution until DOM is ready
  1308. callbacks = [];
  1309. // Handle when the DOM is ready
  1310. function ready( fn ) {
  1311. if ( !isReady ) {
  1312. // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
  1313. if ( !doc.body ) {
  1314. return defer( ready );
  1315. }
  1316. // Remember that the DOM is ready
  1317. isReady = true;
  1318. // Execute all callbacks
  1319. while ( fn = callbacks.shift() ) {
  1320. defer( fn );
  1321. }
  1322. }
  1323. }
  1324. // The ready event handler
  1325. function completed( event ) {
  1326. // readyState === "complete" is good enough for us to call the dom ready in oldIE
  1327. if ( w3c || event.type === LOAD || doc[READYSTATE] === COMPLETE ) {
  1328. detach();
  1329. ready();
  1330. }
  1331. }
  1332. // Clean-up method for dom ready events
  1333. function detach() {
  1334. if ( w3c ) {
  1335. doc[REMOVEEVENTLISTENER]( DOMCONTENTLOADED, completed, FALSE );
  1336. win[REMOVEEVENTLISTENER]( LOAD, completed, FALSE );
  1337. } else {
  1338. doc[DETACHEVENT]( ONREADYSTATECHANGE, completed );
  1339. win[DETACHEVENT]( ONLOAD, completed );
  1340. }
  1341. }
  1342. // Defers a function, scheduling it to run after the current call stack has cleared.
  1343. function defer( fn, wait ) {
  1344. // Allow 0 to be passed
  1345. setTimeout( fn, +wait >= 0 ? wait : 1 );
  1346. }
  1347. // Attach the listeners:
  1348. // Catch cases where onDomReady is called after the browser event has already occurred.
  1349. // we once tried to use readyState "interactive" here, but it caused issues like the one
  1350. // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
  1351. if ( doc[READYSTATE] === COMPLETE ) {
  1352. // Handle it asynchronously to allow scripts the opportunity to delay ready
  1353. defer( ready );
  1354. // Standards-based browsers support DOMContentLoaded
  1355. } else if ( w3c ) {
  1356. // Use the handy event callback
  1357. doc[ADDEVENTLISTENER]( DOMCONTENTLOADED, completed, FALSE );
  1358. // A fallback to window.onload, that will always work
  1359. win[ADDEVENTLISTENER]( LOAD, completed, FALSE );
  1360. // If IE event model is used
  1361. } else {
  1362. // Ensure firing before onload, maybe late but safe also for iframes
  1363. doc[ATTACHEVENT]( ONREADYSTATECHANGE, completed );
  1364. // A fallback to window.onload, that will always work
  1365. win[ATTACHEVENT]( ONLOAD, completed );
  1366. // If IE and not a frame
  1367. // continually check to see if the document is ready
  1368. try {
  1369. _top = win.frameElement == null && docElem;
  1370. } catch(e) {}
  1371. if ( _top && _top.doScroll ) {
  1372. (function doScrollCheck() {
  1373. if ( !isReady ) {
  1374. try {
  1375. // Use the trick by Diego Perini
  1376. // http://javascript.nwbox.com/IEContentLoaded/
  1377. _top.doScroll("left");
  1378. } catch(e) {
  1379. return defer( doScrollCheck, 50 );
  1380. }
  1381. // detach all dom ready events
  1382. detach();
  1383. // and execute any waiting functions
  1384. ready();
  1385. }
  1386. })();
  1387. }
  1388. }
  1389. function onDomReady( fn ) {
  1390. // If DOM is ready, execute the function (async), otherwise wait
  1391. isReady ? defer( fn ) : callbacks.push( fn );
  1392. }
  1393. // Add version
  1394. onDomReady.version = "1.4.0";
  1395. // Add method to check if DOM is ready
  1396. onDomReady.isReady = function(){
  1397. return isReady;
  1398. };
  1399. return onDomReady;
  1400. }
  1401. module.exports = typeof window !== "undefined" && _onDomReady(window);
  1402. /***/ },
  1403. /* 3 */
  1404. /***/ function(module, exports, __webpack_require__) {
  1405. //Modified version of component/querystring
  1406. //Changes: updated dependencies, dot notation parsing, JSHint fixes
  1407. //Fork at https://github.com/imsky/querystring
  1408. /**
  1409. * Module dependencies.
  1410. */
  1411. var encode = encodeURIComponent;
  1412. var decode = decodeURIComponent;
  1413. var trim = __webpack_require__(4);
  1414. var type = __webpack_require__(5);
  1415. var arrayRegex = /(\w+)\[(\d+)\]/;
  1416. var objectRegex = /\w+\.\w+/;
  1417. /**
  1418. * Parse the given query `str`.
  1419. *
  1420. * @param {String} str
  1421. * @return {Object}
  1422. * @api public
  1423. */
  1424. exports.parse = function(str){
  1425. if ('string' !== typeof str) return {};
  1426. str = trim(str);
  1427. if ('' === str) return {};
  1428. if ('?' === str.charAt(0)) str = str.slice(1);
  1429. var obj = {};
  1430. var pairs = str.split('&');
  1431. for (var i = 0; i < pairs.length; i++) {
  1432. var parts = pairs[i].split('=');
  1433. var key = decode(parts[0]);
  1434. var m, ctx, prop;
  1435. if (m = arrayRegex.exec(key)) {
  1436. obj[m[1]] = obj[m[1]] || [];
  1437. obj[m[1]][m[2]] = decode(parts[1]);
  1438. continue;
  1439. }
  1440. if (m = objectRegex.test(key)) {
  1441. m = key.split('.');
  1442. ctx = obj;
  1443. while (m.length) {
  1444. prop = m.shift();
  1445. if (!prop.length) continue;
  1446. if (!ctx[prop]) {
  1447. ctx[prop] = {};
  1448. } else if (ctx[prop] && typeof ctx[prop] !== 'object') {
  1449. break;
  1450. }
  1451. if (!m.length) {
  1452. ctx[prop] = decode(parts[1]);
  1453. }
  1454. ctx = ctx[prop];
  1455. }
  1456. continue;
  1457. }
  1458. obj[parts[0]] = null == parts[1] ? '' : decode(parts[1]);
  1459. }
  1460. return obj;
  1461. };
  1462. /**
  1463. * Stringify the given `obj`.
  1464. *
  1465. * @param {Object} obj
  1466. * @return {String}
  1467. * @api public
  1468. */
  1469. exports.stringify = function(obj){
  1470. if (!obj) return '';
  1471. var pairs = [];
  1472. for (var key in obj) {
  1473. var value = obj[key];
  1474. if ('array' == type(value)) {
  1475. for (var i = 0; i < value.length; ++i) {
  1476. pairs.push(encode(key + '[' + i + ']') + '=' + encode(value[i]));
  1477. }
  1478. continue;
  1479. }
  1480. pairs.push(encode(key) + '=' + encode(obj[key]));
  1481. }
  1482. return pairs.join('&');
  1483. };
  1484. /***/ },
  1485. /* 4 */
  1486. /***/ function(module, exports) {
  1487. exports = module.exports = trim;
  1488. function trim(str){
  1489. return str.replace(/^\s*|\s*$/g, '');
  1490. }
  1491. exports.left = function(str){
  1492. return str.replace(/^\s*/, '');
  1493. };
  1494. exports.right = function(str){
  1495. return str.replace(/\s*$/, '');
  1496. };
  1497. /***/ },
  1498. /* 5 */
  1499. /***/ function(module, exports) {
  1500. /**
  1501. * toString ref.
  1502. */
  1503. var toString = Object.prototype.toString;
  1504. /**
  1505. * Return the type of `val`.
  1506. *
  1507. * @param {Mixed} val
  1508. * @return {String}
  1509. * @api public
  1510. */
  1511. module.exports = function(val){
  1512. switch (toString.call(val)) {
  1513. case '[object Date]': return 'date';
  1514. case '[object RegExp]': return 'regexp';
  1515. case '[object Arguments]': return 'arguments';
  1516. case '[object Array]': return 'array';
  1517. case '[object Error]': return 'error';
  1518. }
  1519. if (val === null) return 'null';
  1520. if (val === undefined) return 'undefined';
  1521. if (val !== val) return 'nan';
  1522. if (val && val.nodeType === 1) return 'element';
  1523. if (isBuffer(val)) return 'buffer';
  1524. val = val.valueOf
  1525. ? val.valueOf()
  1526. : Object.prototype.valueOf.apply(val);
  1527. return typeof val;
  1528. };
  1529. // code borrowed from https://github.com/feross/is-buffer/blob/master/index.js
  1530. function isBuffer(obj) {
  1531. return !!(obj != null &&
  1532. (obj._isBuffer || // For Safari 5-7 (missing Object.prototype.constructor)
  1533. (obj.constructor &&
  1534. typeof obj.constructor.isBuffer === 'function' &&
  1535. obj.constructor.isBuffer(obj))
  1536. ))
  1537. }
  1538. /***/ },
  1539. /* 6 */
  1540. /***/ function(module, exports) {
  1541. var SceneGraph = function(sceneProperties) {
  1542. var nodeCount = 1;
  1543. //todo: move merge to helpers section
  1544. function merge(parent, child) {
  1545. for (var prop in child) {
  1546. parent[prop] = child[prop];
  1547. }
  1548. return parent;
  1549. }
  1550. var SceneNode = function(name) {
  1551. nodeCount++;
  1552. this.parent = null;
  1553. this.children = {};
  1554. this.id = nodeCount;
  1555. this.name = 'n' + nodeCount;
  1556. if (typeof name !== 'undefined') {
  1557. this.name = name;
  1558. }
  1559. this.x = this.y = this.z = 0;
  1560. this.width = this.height = 0;
  1561. };
  1562. SceneNode.prototype.resize = function(width, height) {
  1563. if (width != null) {
  1564. this.width = width;
  1565. }
  1566. if (height != null) {
  1567. this.height = height;
  1568. }
  1569. };
  1570. SceneNode.prototype.moveTo = function(x, y, z) {
  1571. this.x = x != null ? x : this.x;
  1572. this.y = y != null ? y : this.y;
  1573. this.z = z != null ? z : this.z;
  1574. };
  1575. SceneNode.prototype.add = function(child) {
  1576. var name = child.name;
  1577. if (typeof this.children[name] === 'undefined') {
  1578. this.children[name] = child;
  1579. child.parent = this;
  1580. } else {
  1581. throw 'SceneGraph: child already exists: ' + name;
  1582. }
  1583. };
  1584. var RootNode = function() {
  1585. SceneNode.call(this, 'root');
  1586. this.properties = sceneProperties;
  1587. };
  1588. RootNode.prototype = new SceneNode();
  1589. var Shape = function(name, props) {
  1590. SceneNode.call(this, name);
  1591. this.properties = {
  1592. 'fill': '#000000'
  1593. };
  1594. if (typeof props !== 'undefined') {
  1595. merge(this.properties, props);
  1596. } else if (typeof name !== 'undefined' && typeof name !== 'string') {
  1597. throw 'SceneGraph: invalid node name';
  1598. }
  1599. };
  1600. Shape.prototype = new SceneNode();
  1601. var Group = function() {
  1602. Shape.apply(this, arguments);
  1603. this.type = 'group';
  1604. };
  1605. Group.prototype = new Shape();
  1606. var Rect = function() {
  1607. Shape.apply(this, arguments);
  1608. this.type = 'rect';
  1609. };
  1610. Rect.prototype = new Shape();
  1611. var Text = function(text) {
  1612. Shape.call(this);
  1613. this.type = 'text';
  1614. this.properties.text = text;
  1615. };
  1616. Text.prototype = new Shape();
  1617. var root = new RootNode();
  1618. this.Shape = {
  1619. 'Rect': Rect,
  1620. 'Text': Text,
  1621. 'Group': Group
  1622. };
  1623. this.root = root;
  1624. return this;
  1625. };
  1626. module.exports = SceneGraph;
  1627. /***/ },
  1628. /* 7 */
  1629. /***/ function(module, exports) {
  1630. /* WEBPACK VAR INJECTION */(function(global) {/**
  1631. * Shallow object clone and merge
  1632. *
  1633. * @param a Object A
  1634. * @param b Object B
  1635. * @returns {Object} New object with all of A's properties, and all of B's properties, overwriting A's properties
  1636. */
  1637. exports.extend = function(a, b) {
  1638. var c = {};
  1639. for (var x in a) {
  1640. if (a.hasOwnProperty(x)) {
  1641. c[x] = a[x];
  1642. }
  1643. }
  1644. if (b != null) {
  1645. for (var y in b) {
  1646. if (b.hasOwnProperty(y)) {
  1647. c[y] = b[y];
  1648. }
  1649. }
  1650. }
  1651. return c;
  1652. };
  1653. /**
  1654. * Takes a k/v list of CSS properties and returns a rule
  1655. *
  1656. * @param props CSS properties object
  1657. */
  1658. exports.cssProps = function(props) {
  1659. var ret = [];
  1660. for (var p in props) {
  1661. if (props.hasOwnProperty(p)) {
  1662. ret.push(p + ':' + props[p]);
  1663. }
  1664. }
  1665. return ret.join(';');
  1666. };
  1667. /**
  1668. * Encodes HTML entities in a string
  1669. *
  1670. * @param str Input string
  1671. */
  1672. exports.encodeHtmlEntity = function(str) {
  1673. var buf = [];
  1674. var charCode = 0;
  1675. for (var i = str.length - 1; i >= 0; i--) {
  1676. charCode = str.charCodeAt(i);
  1677. if (charCode > 128) {
  1678. buf.unshift(['&#', charCode, ';'].join(''));
  1679. } else {
  1680. buf.unshift(str[i]);
  1681. }
  1682. }
  1683. return buf.join('');
  1684. };
  1685. /**
  1686. * Checks if an image exists
  1687. *
  1688. * @param src URL of image
  1689. * @param callback Callback to call once image status has been found
  1690. */
  1691. exports.imageExists = function(src, callback) {
  1692. var image = new Image();
  1693. image.onerror = function() {
  1694. callback.call(this, false);
  1695. };
  1696. image.onload = function() {
  1697. callback.call(this, true);
  1698. };
  1699. image.src = src;
  1700. };
  1701. /**
  1702. * Decodes HTML entities in a string
  1703. *
  1704. * @param str Input string
  1705. */
  1706. exports.decodeHtmlEntity = function(str) {
  1707. return str.replace(/&#(\d+);/g, function(match, dec) {
  1708. return String.fromCharCode(dec);
  1709. });
  1710. };
  1711. /**
  1712. * Returns an element's dimensions if it's visible, `false` otherwise.
  1713. *
  1714. * @param el DOM element
  1715. */
  1716. exports.dimensionCheck = function(el) {
  1717. var dimensions = {
  1718. height: el.clientHeight,
  1719. width: el.clientWidth
  1720. };
  1721. if (dimensions.height && dimensions.width) {
  1722. return dimensions;
  1723. } else {
  1724. return false;
  1725. }
  1726. };
  1727. /**
  1728. * Returns true if value is truthy or if it is "semantically truthy"
  1729. * @param val
  1730. */
  1731. exports.truthy = function(val) {
  1732. if (typeof val === 'string') {
  1733. return val === 'true' || val === 'yes' || val === '1' || val === 'on' || val === '✓';
  1734. }
  1735. return !!val;
  1736. };
  1737. /**
  1738. * Parses input into a well-formed CSS color
  1739. * @param val
  1740. */
  1741. exports.parseColor = function(val) {
  1742. var hexre = /(^(?:#?)[0-9a-f]{6}$)|(^(?:#?)[0-9a-f]{3}$)/i;
  1743. var rgbre = /^rgb\((\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/;
  1744. var rgbare = /^rgba\((\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(0\.\d{1,}|1)\)$/;
  1745. var match = val.match(hexre);
  1746. var retval;
  1747. if (match !== null) {
  1748. retval = match[1] || match[2];
  1749. if (retval[0] !== '#') {
  1750. return '#' + retval;
  1751. } else {
  1752. return retval;
  1753. }
  1754. }
  1755. match = val.match(rgbre);
  1756. if (match !== null) {
  1757. retval = 'rgb(' + match.slice(1).join(',') + ')';
  1758. return retval;
  1759. }
  1760. match = val.match(rgbare);
  1761. if (match !== null) {
  1762. retval = 'rgba(' + match.slice(1).join(',') + ')';
  1763. return retval;
  1764. }
  1765. return null;
  1766. };
  1767. /**
  1768. * Provides the correct scaling ratio for canvas drawing operations on HiDPI screens (e.g. Retina displays)
  1769. */
  1770. exports.canvasRatio = function () {
  1771. var devicePixelRatio = 1;
  1772. var backingStoreRatio = 1;
  1773. if (global.document) {
  1774. var canvas = global.document.createElement('canvas');
  1775. if (canvas.getContext) {
  1776. var ctx = canvas.getContext('2d');
  1777. devicePixelRatio = global.devicePixelRatio || 1;
  1778. backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
  1779. }
  1780. }
  1781. return devicePixelRatio / backingStoreRatio;
  1782. };
  1783. /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
  1784. /***/ },
  1785. /* 8 */
  1786. /***/ function(module, exports, __webpack_require__) {
  1787. /* WEBPACK VAR INJECTION */(function(global) {var DOM = __webpack_require__(9);
  1788. var SVG_NS = 'http://www.w3.org/2000/svg';
  1789. var NODE_TYPE_COMMENT = 8;
  1790. /**
  1791. * Generic SVG element creation function
  1792. *
  1793. * @param svg SVG context, set to null if new
  1794. * @param width Document width
  1795. * @param height Document height
  1796. */
  1797. exports.initSVG = function(svg, width, height) {
  1798. var defs, style, initialize = false;
  1799. if (svg && svg.querySelector) {
  1800. style = svg.querySelector('style');
  1801. if (style === null) {
  1802. initialize = true;
  1803. }
  1804. } else {
  1805. svg = DOM.newEl('svg', SVG_NS);
  1806. initialize = true;
  1807. }
  1808. if (initialize) {
  1809. defs = DOM.newEl('defs', SVG_NS);
  1810. style = DOM.newEl('style', SVG_NS);
  1811. DOM.setAttr(style, {
  1812. 'type': 'text/css'
  1813. });
  1814. defs.appendChild(style);
  1815. svg.appendChild(defs);
  1816. }
  1817. //IE throws an exception if this is set and Chrome requires it to be set
  1818. if (svg.webkitMatchesSelector) {
  1819. svg.setAttribute('xmlns', SVG_NS);
  1820. }
  1821. //Remove comment nodes
  1822. for (var i = 0; i < svg.childNodes.length; i++) {
  1823. if (svg.childNodes[i].nodeType === NODE_TYPE_COMMENT) {
  1824. svg.removeChild(svg.childNodes[i]);
  1825. }
  1826. }
  1827. //Remove CSS
  1828. while (style.childNodes.length) {
  1829. style.removeChild(style.childNodes[0]);
  1830. }
  1831. DOM.setAttr(svg, {
  1832. 'width': width,
  1833. 'height': height,
  1834. 'viewBox': '0 0 ' + width + ' ' + height,
  1835. 'preserveAspectRatio': 'none'
  1836. });
  1837. return svg;
  1838. };
  1839. /**
  1840. * Converts serialized SVG to a string suitable for data URI use
  1841. * @param svgString Serialized SVG string
  1842. * @param [base64] Use base64 encoding for data URI
  1843. */
  1844. exports.svgStringToDataURI = function() {
  1845. var rawPrefix = 'data:image/svg+xml;charset=UTF-8,';
  1846. var base64Prefix = 'data:image/svg+xml;charset=UTF-8;base64,';
  1847. return function(svgString, base64) {
  1848. if (base64) {
  1849. return base64Prefix + btoa(global.unescape(encodeURIComponent(svgString)));
  1850. } else {
  1851. return rawPrefix + encodeURIComponent(svgString);
  1852. }
  1853. };
  1854. }();
  1855. /**
  1856. * Returns serialized SVG with XML processing instructions
  1857. *
  1858. * @param svg SVG context
  1859. * @param stylesheets CSS stylesheets to include
  1860. */
  1861. exports.serializeSVG = function(svg, engineSettings) {
  1862. if (!global.XMLSerializer) return;
  1863. var serializer = new XMLSerializer();
  1864. var svgCSS = '';
  1865. var stylesheets = engineSettings.stylesheets;
  1866. //External stylesheets: Processing Instruction method
  1867. if (engineSettings.svgXMLStylesheet) {
  1868. var xml = DOM.createXML();
  1869. //Add <?xml-stylesheet ?> directives
  1870. for (var i = stylesheets.length - 1; i >= 0; i--) {
  1871. var csspi = xml.createProcessingInstruction('xml-stylesheet', 'href="' + stylesheets[i] + '" rel="stylesheet"');
  1872. xml.insertBefore(csspi, xml.firstChild);
  1873. }
  1874. xml.removeChild(xml.documentElement);
  1875. svgCSS = serializer.serializeToString(xml);
  1876. }
  1877. var svgText = serializer.serializeToString(svg);
  1878. svgText = svgText.replace(/\&amp;(\#[0-9]{2,}\;)/g, '&$1');
  1879. return svgCSS + svgText;
  1880. };
  1881. /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
  1882. /***/ },
  1883. /* 9 */
  1884. /***/ function(module, exports) {
  1885. /* WEBPACK VAR INJECTION */(function(global) {/**
  1886. * Generic new DOM element function
  1887. *
  1888. * @param tag Tag to create
  1889. * @param namespace Optional namespace value
  1890. */
  1891. exports.newEl = function(tag, namespace) {
  1892. if (!global.document) return;
  1893. if (namespace == null) {
  1894. return global.document.createElement(tag);
  1895. } else {
  1896. return global.document.createElementNS(namespace, tag);
  1897. }
  1898. };
  1899. /**
  1900. * Generic setAttribute function
  1901. *
  1902. * @param el Reference to DOM element
  1903. * @param attrs Object with attribute keys and values
  1904. */
  1905. exports.setAttr = function (el, attrs) {
  1906. for (var a in attrs) {
  1907. el.setAttribute(a, attrs[a]);
  1908. }
  1909. };
  1910. /**
  1911. * Creates a XML document
  1912. * @private
  1913. */
  1914. exports.createXML = function() {
  1915. if (!global.DOMParser) return;
  1916. return new DOMParser().parseFromString('<xml />', 'application/xml');
  1917. };
  1918. /**
  1919. * Converts a value into an array of DOM nodes
  1920. *
  1921. * @param val A string, a NodeList, a Node, or an HTMLCollection
  1922. */
  1923. exports.getNodeArray = function(val) {
  1924. var retval = null;
  1925. if (typeof(val) == 'string') {
  1926. retval = document.querySelectorAll(val);
  1927. } else if (global.NodeList && val instanceof global.NodeList) {
  1928. retval = val;
  1929. } else if (global.Node && val instanceof global.Node) {
  1930. retval = [val];
  1931. } else if (global.HTMLCollection && val instanceof global.HTMLCollection) {
  1932. retval = val;
  1933. } else if (val instanceof Array) {
  1934. retval = val;
  1935. } else if (val === null) {
  1936. retval = [];
  1937. }
  1938. retval = Array.prototype.slice.call(retval);
  1939. return retval;
  1940. };
  1941. /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
  1942. /***/ },
  1943. /* 10 */
  1944. /***/ function(module, exports) {
  1945. var Color = function(color, options) {
  1946. //todo: support rgba, hsla, and rrggbbaa notation
  1947. //todo: use CIELAB internally
  1948. //todo: add clamp function (with sign)
  1949. if (typeof color !== 'string') return;
  1950. this.original = color;
  1951. if (color.charAt(0) === '#') {
  1952. color = color.slice(1);
  1953. }
  1954. if (/[^a-f0-9]+/i.test(color)) return;
  1955. if (color.length === 3) {
  1956. color = color.replace(/./g, '$&$&');
  1957. }
  1958. if (color.length !== 6) return;
  1959. this.alpha = 1;
  1960. if (options && options.alpha) {
  1961. this.alpha = options.alpha;
  1962. }
  1963. this.set(parseInt(color, 16));
  1964. };
  1965. //todo: jsdocs
  1966. Color.rgb2hex = function(r, g, b) {
  1967. function format (decimal) {
  1968. var hex = (decimal | 0).toString(16);
  1969. if (decimal < 16) {
  1970. hex = '0' + hex;
  1971. }
  1972. return hex;
  1973. }
  1974. return [r, g, b].map(format).join('');
  1975. };
  1976. //todo: jsdocs
  1977. Color.hsl2rgb = function (h, s, l) {
  1978. var H = h / 60;
  1979. var C = (1 - Math.abs(2 * l - 1)) * s;
  1980. var X = C * (1 - Math.abs(parseInt(H) % 2 - 1));
  1981. var m = l - (C / 2);
  1982. var r = 0, g = 0, b = 0;
  1983. if (H >= 0 && H < 1) {
  1984. r = C;
  1985. g = X;
  1986. } else if (H >= 1 && H < 2) {
  1987. r = X;
  1988. g = C;
  1989. } else if (H >= 2 && H < 3) {
  1990. g = C;
  1991. b = X;
  1992. } else if (H >= 3 && H < 4) {
  1993. g = X;
  1994. b = C;
  1995. } else if (H >= 4 && H < 5) {
  1996. r = X;
  1997. b = C;
  1998. } else if (H >= 5 && H < 6) {
  1999. r = C;
  2000. b = X;
  2001. }
  2002. r += m;
  2003. g += m;
  2004. b += m;
  2005. r = parseInt(r * 255);
  2006. g = parseInt(g * 255);
  2007. b = parseInt(b * 255);
  2008. return [r, g, b];
  2009. };
  2010. /**
  2011. * Sets the color from a raw RGB888 integer
  2012. * @param raw RGB888 representation of color
  2013. */
  2014. //todo: refactor into a static method
  2015. //todo: factor out individual color spaces
  2016. //todo: add HSL, CIELAB, and CIELUV
  2017. Color.prototype.set = function (val) {
  2018. this.raw = val;
  2019. var r = (this.raw & 0xFF0000) >> 16;
  2020. var g = (this.raw & 0x00FF00) >> 8;
  2021. var b = (this.raw & 0x0000FF);
  2022. // BT.709
  2023. var y = 0.2126 * r + 0.7152 * g + 0.0722 * b;
  2024. var u = -0.09991 * r - 0.33609 * g + 0.436 * b;
  2025. var v = 0.615 * r - 0.55861 * g - 0.05639 * b;
  2026. this.rgb = {
  2027. r: r,
  2028. g: g,
  2029. b: b
  2030. };
  2031. this.yuv = {
  2032. y: y,
  2033. u: u,
  2034. v: v
  2035. };
  2036. return this;
  2037. };
  2038. /**
  2039. * Lighten or darken a color
  2040. * @param multiplier Amount to lighten or darken (-1 to 1)
  2041. */
  2042. Color.prototype.lighten = function(multiplier) {
  2043. var cm = Math.min(1, Math.max(0, Math.abs(multiplier))) * (multiplier < 0 ? -1 : 1);
  2044. var bm = (255 * cm) | 0;
  2045. var cr = Math.min(255, Math.max(0, this.rgb.r + bm));
  2046. var cg = Math.min(255, Math.max(0, this.rgb.g + bm));
  2047. var cb = Math.min(255, Math.max(0, this.rgb.b + bm));
  2048. var hex = Color.rgb2hex(cr, cg, cb);
  2049. return new Color(hex);
  2050. };
  2051. /**
  2052. * Output color in hex format
  2053. * @param addHash Add a hash character to the beginning of the output
  2054. */
  2055. Color.prototype.toHex = function(addHash) {
  2056. return (addHash ? '#' : '') + this.raw.toString(16);
  2057. };
  2058. /**
  2059. * Returns whether or not current color is lighter than another color
  2060. * @param color Color to compare against
  2061. */
  2062. Color.prototype.lighterThan = function(color) {
  2063. if (!(color instanceof Color)) {
  2064. color = new Color(color);
  2065. }
  2066. return this.yuv.y > color.yuv.y;
  2067. };
  2068. /**
  2069. * Returns the result of mixing current color with another color
  2070. * @param color Color to mix with
  2071. * @param multiplier How much to mix with the other color
  2072. */
  2073. /*
  2074. Color.prototype.mix = function (color, multiplier) {
  2075. if (!(color instanceof Color)) {
  2076. color = new Color(color);
  2077. }
  2078. var r = this.rgb.r;
  2079. var g = this.rgb.g;
  2080. var b = this.rgb.b;
  2081. var a = this.alpha;
  2082. var m = typeof multiplier !== 'undefined' ? multiplier : 0.5;
  2083. //todo: write a lerp function
  2084. r = r + m * (color.rgb.r - r);
  2085. g = g + m * (color.rgb.g - g);
  2086. b = b + m * (color.rgb.b - b);
  2087. a = a + m * (color.alpha - a);
  2088. return new Color(Color.rgbToHex(r, g, b), {
  2089. 'alpha': a
  2090. });
  2091. };
  2092. */
  2093. /**
  2094. * Returns the result of blending another color on top of current color with alpha
  2095. * @param color Color to blend on top of current color, i.e. "Ca"
  2096. */
  2097. //todo: see if .blendAlpha can be merged into .mix
  2098. Color.prototype.blendAlpha = function(color) {
  2099. if (!(color instanceof Color)) {
  2100. color = new Color(color);
  2101. }
  2102. var Ca = color;
  2103. var Cb = this;
  2104. //todo: write alpha blending function
  2105. var r = Ca.alpha * Ca.rgb.r + (1 - Ca.alpha) * Cb.rgb.r;
  2106. var g = Ca.alpha * Ca.rgb.g + (1 - Ca.alpha) * Cb.rgb.g;
  2107. var b = Ca.alpha * Ca.rgb.b + (1 - Ca.alpha) * Cb.rgb.b;
  2108. return new Color(Color.rgb2hex(r, g, b));
  2109. };
  2110. module.exports = Color;
  2111. /***/ },
  2112. /* 11 */
  2113. /***/ function(module, exports) {
  2114. module.exports = {
  2115. 'version': '2.9.3',
  2116. 'svg_ns': 'http://www.w3.org/2000/svg'
  2117. };
  2118. /***/ },
  2119. /* 12 */
  2120. /***/ function(module, exports, __webpack_require__) {
  2121. var shaven = __webpack_require__(13);
  2122. var SVG = __webpack_require__(8);
  2123. var constants = __webpack_require__(11);
  2124. var utils = __webpack_require__(7);
  2125. var SVG_NS = constants.svg_ns;
  2126. var templates = {
  2127. 'element': function (options) {
  2128. var tag = options.tag;
  2129. var content = options.content || '';
  2130. delete options.tag;
  2131. delete options.content;
  2132. return [tag, content, options];
  2133. }
  2134. };
  2135. //todo: deprecate tag arg, infer tag from shape object
  2136. function convertShape (shape, tag) {
  2137. return templates.element({
  2138. 'tag': tag,
  2139. 'width': shape.width,
  2140. 'height': shape.height,
  2141. 'fill': shape.properties.fill
  2142. });
  2143. }
  2144. function textCss (properties) {
  2145. return utils.cssProps({
  2146. 'fill': properties.fill,
  2147. 'font-weight': properties.font.weight,
  2148. 'font-family': properties.font.family + ', monospace',
  2149. 'font-size': properties.font.size + properties.font.units
  2150. });
  2151. }
  2152. function outlinePath (bgWidth, bgHeight, outlineWidth) {
  2153. var outlineOffsetWidth = outlineWidth / 2;
  2154. return [
  2155. 'M', outlineOffsetWidth, outlineOffsetWidth,
  2156. 'H', bgWidth - outlineOffsetWidth,
  2157. 'V', bgHeight - outlineOffsetWidth,
  2158. 'H', outlineOffsetWidth,
  2159. 'V', 0,
  2160. 'M', 0, outlineOffsetWidth,
  2161. 'L', bgWidth, bgHeight - outlineOffsetWidth,
  2162. 'M', 0, bgHeight - outlineOffsetWidth,
  2163. 'L', bgWidth, outlineOffsetWidth
  2164. ].join(' ');
  2165. }
  2166. module.exports = function (sceneGraph, renderSettings) {
  2167. var engineSettings = renderSettings.engineSettings;
  2168. var stylesheets = engineSettings.stylesheets;
  2169. var stylesheetXml = stylesheets.map(function (stylesheet) {
  2170. return '<?xml-stylesheet rel="stylesheet" href="' + stylesheet + '"?>';
  2171. }).join('\n');
  2172. var holderId = 'holder_' + Number(new Date()).toString(16);
  2173. var root = sceneGraph.root;
  2174. var textGroup = root.children.holderTextGroup;
  2175. var css = '#' + holderId + ' text { ' + textCss(textGroup.properties) + ' } ';
  2176. // push text down to be equally vertically aligned with canvas renderer
  2177. textGroup.y += textGroup.textPositionData.boundingBox.height * 0.8;
  2178. var wordTags = [];
  2179. Object.keys(textGroup.children).forEach(function (lineKey) {
  2180. var line = textGroup.children[lineKey];
  2181. Object.keys(line.children).forEach(function (wordKey) {
  2182. var word = line.children[wordKey];
  2183. var x = textGroup.x + line.x + word.x;
  2184. var y = textGroup.y + line.y + word.y;
  2185. var wordTag = templates.element({
  2186. 'tag': 'text',
  2187. 'content': word.properties.text,
  2188. 'x': x,
  2189. 'y': y
  2190. });
  2191. wordTags.push(wordTag);
  2192. });
  2193. });
  2194. var text = templates.element({
  2195. 'tag': 'g',
  2196. 'content': wordTags
  2197. });
  2198. var outline = null;
  2199. if (root.children.holderBg.properties.outline) {
  2200. var outlineProperties = root.children.holderBg.properties.outline;
  2201. outline = templates.element({
  2202. 'tag': 'path',
  2203. 'd': outlinePath(root.children.holderBg.width, root.children.holderBg.height, outlineProperties.width),
  2204. 'stroke-width': outlineProperties.width,
  2205. 'stroke': outlineProperties.fill,
  2206. 'fill': 'none'
  2207. });
  2208. }
  2209. var bg = convertShape(root.children.holderBg, 'rect');
  2210. var sceneContent = [];
  2211. sceneContent.push(bg);
  2212. if (outlineProperties) {
  2213. sceneContent.push(outline);
  2214. }
  2215. sceneContent.push(text);
  2216. var scene = templates.element({
  2217. 'tag': 'g',
  2218. 'id': holderId,
  2219. 'content': sceneContent
  2220. });
  2221. var style = templates.element({
  2222. 'tag': 'style',
  2223. //todo: figure out how to add CDATA directive
  2224. 'content': css,
  2225. 'type': 'text/css'
  2226. });
  2227. var defs = templates.element({
  2228. 'tag': 'defs',
  2229. 'content': style
  2230. });
  2231. var svg = templates.element({
  2232. 'tag': 'svg',
  2233. 'content': [defs, scene],
  2234. 'width': root.properties.width,
  2235. 'height': root.properties.height,
  2236. 'xmlns': SVG_NS,
  2237. 'viewBox': [0, 0, root.properties.width, root.properties.height].join(' '),
  2238. 'preserveAspectRatio': 'none'
  2239. });
  2240. var output = shaven(svg);
  2241. output = stylesheetXml + output[0];
  2242. var svgString = SVG.svgStringToDataURI(output, renderSettings.mode === 'background');
  2243. return svgString;
  2244. };
  2245. /***/ },
  2246. /* 13 */
  2247. /***/ function(module, exports, __webpack_require__) {
  2248. var escape = __webpack_require__(14)
  2249. // TODO: remove namespace
  2250. module.exports = function shaven (array, namespace, returnObject) {
  2251. 'use strict'
  2252. var i = 1
  2253. var doesEscape = true
  2254. var HTMLString
  2255. var attributeKey
  2256. var callback
  2257. var key
  2258. returnObject = returnObject || {}
  2259. function createElement (sugarString) {
  2260. var tags = sugarString.match(/^[\w-]+/)
  2261. var element = {
  2262. tag: tags ? tags[0] : 'div',
  2263. attr: {},
  2264. children: []
  2265. }
  2266. var id = sugarString.match(/#([\w-]+)/)
  2267. var reference = sugarString.match(/\$([\w-]+)/)
  2268. var classNames = sugarString.match(/\.[\w-]+/g)
  2269. // Assign id if is set
  2270. if (id) {
  2271. element.attr.id = id[1]
  2272. // Add element to the return object
  2273. returnObject[id[1]] = element
  2274. }
  2275. if (reference)
  2276. returnObject[reference[1]] = element
  2277. if (classNames)
  2278. element.attr.class = classNames.join(' ').replace(/\./g, '')
  2279. if (sugarString.match(/&$/g))
  2280. doesEscape = false
  2281. return element
  2282. }
  2283. function replacer (key, value) {
  2284. if (value === null || value === false || value === undefined)
  2285. return
  2286. if (typeof value !== 'string' && typeof value !== 'object')
  2287. return String(value)
  2288. return value
  2289. }
  2290. function escapeAttribute (string) {
  2291. return (string || string === 0) ?
  2292. String(string)
  2293. .replace(/&/g, '&amp;')
  2294. .replace(/"/g, '&quot;') :
  2295. ''
  2296. }
  2297. function escapeHTML (string) {
  2298. return String(string)
  2299. .replace(/&/g, '&amp;')
  2300. .replace(/"/g, '&quot;')
  2301. .replace(/'/g, '&apos;')
  2302. .replace(/</g, '&lt;')
  2303. .replace(/>/g, '&gt;')
  2304. }
  2305. if (typeof array[0] === 'string')
  2306. array[0] = createElement(array[0])
  2307. else if (Array.isArray(array[0]))
  2308. i = 0
  2309. else
  2310. throw new Error(
  2311. 'First element of array must be a string, ' +
  2312. 'or an array and not ' + JSON.stringify(array[0])
  2313. )
  2314. for (; i < array.length; i++) {
  2315. // Don't render element if value is false or null
  2316. if (array[i] === false || array[i] === null) {
  2317. array[0] = false
  2318. break
  2319. }
  2320. // Continue with next array value if current value is undefined or true
  2321. else if (array[i] === undefined || array[i] === true) {
  2322. continue
  2323. }
  2324. else if (typeof array[i] === 'string') {
  2325. if (doesEscape)
  2326. array[i] = escapeHTML(array[i])
  2327. array[0].children.push(array[i])
  2328. }
  2329. else if (typeof array[i] === 'number') {
  2330. array[0].children.push(array[i])
  2331. }
  2332. else if (Array.isArray(array[i])) {
  2333. if (Array.isArray(array[i][0])) {
  2334. array[i].reverse().forEach(function (subArray) {
  2335. array.splice(i + 1, 0, subArray)
  2336. })
  2337. if (i !== 0)
  2338. continue
  2339. i++
  2340. }
  2341. shaven(array[i], namespace, returnObject)
  2342. if (array[i][0])
  2343. array[0].children.push(array[i][0])
  2344. }
  2345. else if (typeof array[i] === 'function')
  2346. callback = array[i]
  2347. else if (typeof array[i] === 'object') {
  2348. for (attributeKey in array[i])
  2349. if (array[i].hasOwnProperty(attributeKey))
  2350. if (array[i][attributeKey] !== null &&
  2351. array[i][attributeKey] !== false)
  2352. if (attributeKey === 'style' &&
  2353. typeof array[i][attributeKey] === 'object')
  2354. array[0].attr[attributeKey] = JSON
  2355. .stringify(array[i][attributeKey], replacer)
  2356. .slice(2, -2)
  2357. .replace(/","/g, ';')
  2358. .replace(/":"/g, ':')
  2359. .replace(/\\"/g, '\'')
  2360. else
  2361. array[0].attr[attributeKey] = array[i][attributeKey]
  2362. }
  2363. else
  2364. throw new TypeError('"' + array[i] + '" is not allowed as a value.')
  2365. }
  2366. if (array[0] !== false) {
  2367. HTMLString = '<' + array[0].tag
  2368. for (key in array[0].attr)
  2369. if (array[0].attr.hasOwnProperty(key))
  2370. HTMLString += ' ' + key + '="' +
  2371. escapeAttribute(array[0].attr[key]) + '"'
  2372. HTMLString += '>'
  2373. array[0].children.forEach(function (child) {
  2374. HTMLString += child
  2375. })
  2376. HTMLString += '</' + array[0].tag + '>'
  2377. array[0] = HTMLString
  2378. }
  2379. // Return root element on index 0
  2380. returnObject[0] = array[0]
  2381. if (callback)
  2382. callback(array[0])
  2383. // returns object containing all elements with an id and the root element
  2384. return returnObject
  2385. }
  2386. /***/ },
  2387. /* 14 */
  2388. /***/ function(module, exports) {
  2389. /*!
  2390. * escape-html
  2391. * Copyright(c) 2012-2013 TJ Holowaychuk
  2392. * Copyright(c) 2015 Andreas Lubbe
  2393. * Copyright(c) 2015 Tiancheng "Timothy" Gu
  2394. * MIT Licensed
  2395. */
  2396. 'use strict';
  2397. /**
  2398. * Module variables.
  2399. * @private
  2400. */
  2401. var matchHtmlRegExp = /["'&<>]/;
  2402. /**
  2403. * Module exports.
  2404. * @public
  2405. */
  2406. module.exports = escapeHtml;
  2407. /**
  2408. * Escape special characters in the given string of html.
  2409. *
  2410. * @param {string} string The string to escape for inserting into HTML
  2411. * @return {string}
  2412. * @public
  2413. */
  2414. function escapeHtml(string) {
  2415. var str = '' + string;
  2416. var match = matchHtmlRegExp.exec(str);
  2417. if (!match) {
  2418. return str;
  2419. }
  2420. var escape;
  2421. var html = '';
  2422. var index = 0;
  2423. var lastIndex = 0;
  2424. for (index = match.index; index < str.length; index++) {
  2425. switch (str.charCodeAt(index)) {
  2426. case 34: // "
  2427. escape = '&quot;';
  2428. break;
  2429. case 38: // &
  2430. escape = '&amp;';
  2431. break;
  2432. case 39: // '
  2433. escape = '&#39;';
  2434. break;
  2435. case 60: // <
  2436. escape = '&lt;';
  2437. break;
  2438. case 62: // >
  2439. escape = '&gt;';
  2440. break;
  2441. default:
  2442. continue;
  2443. }
  2444. if (lastIndex !== index) {
  2445. html += str.substring(lastIndex, index);
  2446. }
  2447. lastIndex = index + 1;
  2448. html += escape;
  2449. }
  2450. return lastIndex !== index
  2451. ? html + str.substring(lastIndex, index)
  2452. : html;
  2453. }
  2454. /***/ },
  2455. /* 15 */
  2456. /***/ function(module, exports, __webpack_require__) {
  2457. var DOM = __webpack_require__(9);
  2458. var utils = __webpack_require__(7);
  2459. module.exports = (function() {
  2460. var canvas = DOM.newEl('canvas');
  2461. var ctx = null;
  2462. return function(sceneGraph) {
  2463. if (ctx == null) {
  2464. ctx = canvas.getContext('2d');
  2465. }
  2466. var dpr = utils.canvasRatio();
  2467. var root = sceneGraph.root;
  2468. canvas.width = dpr * root.properties.width;
  2469. canvas.height = dpr * root.properties.height ;
  2470. ctx.textBaseline = 'middle';
  2471. var bg = root.children.holderBg;
  2472. var bgWidth = dpr * bg.width;
  2473. var bgHeight = dpr * bg.height;
  2474. //todo: parametrize outline width (e.g. in scene object)
  2475. var outlineWidth = 2;
  2476. var outlineOffsetWidth = outlineWidth / 2;
  2477. ctx.fillStyle = bg.properties.fill;
  2478. ctx.fillRect(0, 0, bgWidth, bgHeight);
  2479. if (bg.properties.outline) {
  2480. //todo: abstract this into a method
  2481. ctx.strokeStyle = bg.properties.outline.fill;
  2482. ctx.lineWidth = bg.properties.outline.width;
  2483. ctx.moveTo(outlineOffsetWidth, outlineOffsetWidth);
  2484. // TL, TR, BR, BL
  2485. ctx.lineTo(bgWidth - outlineOffsetWidth, outlineOffsetWidth);
  2486. ctx.lineTo(bgWidth - outlineOffsetWidth, bgHeight - outlineOffsetWidth);
  2487. ctx.lineTo(outlineOffsetWidth, bgHeight - outlineOffsetWidth);
  2488. ctx.lineTo(outlineOffsetWidth, outlineOffsetWidth);
  2489. // Diagonals
  2490. ctx.moveTo(0, outlineOffsetWidth);
  2491. ctx.lineTo(bgWidth, bgHeight - outlineOffsetWidth);
  2492. ctx.moveTo(0, bgHeight - outlineOffsetWidth);
  2493. ctx.lineTo(bgWidth, outlineOffsetWidth);
  2494. ctx.stroke();
  2495. }
  2496. var textGroup = root.children.holderTextGroup;
  2497. ctx.font = textGroup.properties.font.weight + ' ' + (dpr * textGroup.properties.font.size) + textGroup.properties.font.units + ' ' + textGroup.properties.font.family + ', monospace';
  2498. ctx.fillStyle = textGroup.properties.fill;
  2499. for (var lineKey in textGroup.children) {
  2500. var line = textGroup.children[lineKey];
  2501. for (var wordKey in line.children) {
  2502. var word = line.children[wordKey];
  2503. var x = dpr * (textGroup.x + line.x + word.x);
  2504. var y = dpr * (textGroup.y + line.y + word.y + (textGroup.properties.leading / 2));
  2505. ctx.fillText(word.properties.text, x, y);
  2506. }
  2507. }
  2508. return canvas.toDataURL('image/png');
  2509. };
  2510. })();
  2511. /***/ }
  2512. /******/ ])
  2513. });
  2514. ;
  2515. (function(ctx, isMeteorPackage) {
  2516. if (isMeteorPackage) {
  2517. Holder = ctx.Holder;
  2518. }
  2519. })(this, typeof Meteor !== 'undefined' && typeof Package !== 'undefined');