oldie.src.js 48 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231
  1. /* *
  2. *
  3. * (c) 2010-2019 Torstein Honsi
  4. *
  5. * License: www.highcharts.com/license
  6. *
  7. * Support for old IE browsers (6, 7 and 8) in Highcharts v6+.
  8. *
  9. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  10. *
  11. * */
  12. 'use strict';
  13. import H from '../parts/Globals.js';
  14. import U from '../parts/Utilities.js';
  15. var defined = U.defined, discardElement = U.discardElement, erase = U.erase, extend = U.extend, extendClass = U.extendClass, isArray = U.isArray, isNumber = U.isNumber, isObject = U.isObject, offset = U.offset, pick = U.pick, pInt = U.pInt;
  16. import '../parts/SvgRenderer.js';
  17. var VMLRenderer, VMLRendererExtension, VMLElement, Chart = H.Chart, createElement = H.createElement, css = H.css, deg2rad = H.deg2rad, doc = H.doc, merge = H.merge, noop = H.noop, svg = H.svg, SVGElement = H.SVGElement, SVGRenderer = H.SVGRenderer, win = H.win;
  18. /**
  19. * Path to the pattern image required by VML browsers in order to
  20. * draw radial gradients.
  21. *
  22. * @type {string}
  23. * @default http://code.highcharts.com/{version}/gfx/vml-radial-gradient.png
  24. * @since 2.3.0
  25. * @requires modules/oldie
  26. * @apioption global.VMLRadialGradientURL
  27. */
  28. H.getOptions().global.VMLRadialGradientURL =
  29. 'http://code.highcharts.com/8.0.0/gfx/vml-radial-gradient.png';
  30. // Utilites
  31. if (doc && !doc.defaultView) {
  32. H.getStyle = function (el, prop) {
  33. var val, alias = {
  34. width: 'clientWidth',
  35. height: 'clientHeight'
  36. }[prop];
  37. if (el.style[prop]) {
  38. return pInt(el.style[prop]);
  39. }
  40. if (prop === 'opacity') {
  41. prop = 'filter';
  42. }
  43. // Getting the rendered width and height
  44. if (alias) {
  45. el.style.zoom = 1;
  46. return Math.max(el[alias] - 2 * H.getStyle(el, 'padding'), 0);
  47. }
  48. val = el.currentStyle[prop.replace(/\-(\w)/g, function (a, b) {
  49. return b.toUpperCase();
  50. })];
  51. if (prop === 'filter') {
  52. val = val.replace(/alpha\(opacity=([0-9]+)\)/, function (a, b) {
  53. return (b / 100);
  54. });
  55. }
  56. return val === '' ? 1 : pInt(val);
  57. };
  58. }
  59. /* eslint-disable no-invalid-this, valid-jsdoc */
  60. if (!svg) {
  61. // Prevent wrapping from creating false offsetWidths in export in legacy IE.
  62. // This applies only to charts for export, where IE runs the SVGRenderer
  63. // instead of the VMLRenderer
  64. // (#1079, #1063)
  65. H.addEvent(SVGElement, 'afterInit', function () {
  66. if (this.element.nodeName === 'text') {
  67. this.css({
  68. position: 'absolute'
  69. });
  70. }
  71. });
  72. /**
  73. * Old IE override for pointer normalize, adds chartX and chartY to event
  74. * arguments.
  75. *
  76. * @ignore
  77. * @function Highcharts.Pointer#normalize
  78. * @param {global.PointerEvent} e
  79. * @param {boolean} [chartPosition=false]
  80. * @return {Highcharts.PointerEventObject}
  81. */
  82. H.Pointer.prototype.normalize = function (e, chartPosition) {
  83. e = e || win.event;
  84. if (!e.target) {
  85. e.target = e.srcElement;
  86. }
  87. // Get mouse position
  88. if (!chartPosition) {
  89. this.chartPosition = chartPosition = offset(this.chart.container);
  90. }
  91. return extend(e, {
  92. // #2005, #2129: the second case is for IE10 quirks mode within
  93. // framesets
  94. chartX: Math.round(Math.max(e.x, e.clientX - chartPosition.left)),
  95. chartY: Math.round(e.y)
  96. });
  97. };
  98. /**
  99. * Further sanitize the mock-SVG that is generated when exporting charts in
  100. * oldIE.
  101. *
  102. * @private
  103. * @function Highcharts.Chart#ieSanitizeSVG
  104. */
  105. Chart.prototype.ieSanitizeSVG = function (svg) {
  106. svg = svg
  107. .replace(/<IMG /g, '<image ')
  108. .replace(/<(\/?)TITLE>/g, '<$1title>')
  109. .replace(/height=([^" ]+)/g, 'height="$1"')
  110. .replace(/width=([^" ]+)/g, 'width="$1"')
  111. .replace(/hc-svg-href="([^"]+)">/g, 'xlink:href="$1"/>')
  112. .replace(/ id=([^" >]+)/g, ' id="$1"') // #4003
  113. .replace(/class=([^" >]+)/g, 'class="$1"')
  114. .replace(/ transform /g, ' ')
  115. .replace(/:(path|rect)/g, '$1')
  116. .replace(/style="([^"]+)"/g, function (s) {
  117. return s.toLowerCase();
  118. });
  119. return svg;
  120. };
  121. /**
  122. * VML namespaces can't be added until after complete. Listening
  123. * for Perini's doScroll hack is not enough.
  124. *
  125. * @private
  126. * @function Highcharts.Chart#isReadyToRender
  127. */
  128. Chart.prototype.isReadyToRender = function () {
  129. var chart = this;
  130. // Note: win == win.top is required
  131. if (!svg &&
  132. (win == win.top && // eslint-disable-line eqeqeq
  133. doc.readyState !== 'complete')) {
  134. doc.attachEvent('onreadystatechange', function () {
  135. doc.detachEvent('onreadystatechange', chart.firstRender);
  136. if (doc.readyState === 'complete') {
  137. chart.firstRender();
  138. }
  139. });
  140. return false;
  141. }
  142. return true;
  143. };
  144. // IE compatibility hack for generating SVG content that it doesn't really
  145. // understand. Used by the exporting module.
  146. if (!doc.createElementNS) {
  147. doc.createElementNS = function (ns, tagName) {
  148. return doc.createElement(tagName);
  149. };
  150. }
  151. /**
  152. * Old IE polyfill for addEventListener, called from inside the addEvent
  153. * function.
  154. *
  155. * @private
  156. * @function Highcharts.addEventListenerPolyfill<T>
  157. * @param {string} type
  158. * @param {Highcharts.EventCallbackFunction<T>} fn
  159. * @return {void}
  160. */
  161. H.addEventListenerPolyfill = function (type, fn) {
  162. var el = this;
  163. /**
  164. * @private
  165. */
  166. function wrappedFn(e) {
  167. e.target = e.srcElement || win; // #2820
  168. fn.call(el, e);
  169. }
  170. if (el.attachEvent) {
  171. if (!el.hcEventsIE) {
  172. el.hcEventsIE = {};
  173. }
  174. // unique function string (#6746)
  175. if (!fn.hcKey) {
  176. fn.hcKey = H.uniqueKey();
  177. }
  178. // Link wrapped fn with original fn, so we can get this in
  179. // removeEvent
  180. el.hcEventsIE[fn.hcKey] = wrappedFn;
  181. el.attachEvent('on' + type, wrappedFn);
  182. }
  183. };
  184. /**
  185. * @private
  186. * @function Highcharts.removeEventListenerPolyfill<T>
  187. * @param {string} type
  188. * @param {Highcharts.EventCallbackFunction<T>} fn
  189. * @return {void}
  190. */
  191. H.removeEventListenerPolyfill = function (type, fn) {
  192. if (this.detachEvent) {
  193. fn = this.hcEventsIE[fn.hcKey];
  194. this.detachEvent('on' + type, fn);
  195. }
  196. };
  197. /**
  198. * The VML element wrapper.
  199. *
  200. * @private
  201. * @class
  202. * @name Highcharts.VMLElement
  203. *
  204. * @augments Highcharts.SVGElement
  205. */
  206. VMLElement = {
  207. docMode8: doc && doc.documentMode === 8,
  208. /**
  209. * Initialize a new VML element wrapper. It builds the markup as a
  210. * string to minimize DOM traffic.
  211. *
  212. * @function Highcharts.VMLElement#init
  213. * @param {Highcharts.VMLRenderer} renderer
  214. * @param {string} nodeName
  215. */
  216. init: function (renderer, nodeName) {
  217. var wrapper = this, markup = ['<', nodeName, ' filled="f" stroked="f"'], style = ['position: ', 'absolute', ';'], isDiv = nodeName === 'div';
  218. // divs and shapes need size
  219. if (nodeName === 'shape' || isDiv) {
  220. style.push('left:0;top:0;width:1px;height:1px;');
  221. }
  222. style.push('visibility: ', isDiv ? 'hidden' : 'visible');
  223. markup.push(' style="', style.join(''), '"/>');
  224. // create element with default attributes and style
  225. if (nodeName) {
  226. markup = isDiv || nodeName === 'span' || nodeName === 'img' ?
  227. markup.join('') :
  228. renderer.prepVML(markup);
  229. wrapper.element = createElement(markup);
  230. }
  231. wrapper.renderer = renderer;
  232. },
  233. /**
  234. * Add the node to the given parent
  235. *
  236. * @function Highcharts.VMLElement
  237. * @param {Highcharts.VMLElement} parent
  238. * @return {Highcharts.VMLElement}
  239. */
  240. add: function (parent) {
  241. var wrapper = this, renderer = wrapper.renderer, element = wrapper.element, box = renderer.box, inverted = parent && parent.inverted,
  242. // get the parent node
  243. parentNode = parent ?
  244. parent.element || parent :
  245. box;
  246. if (parent) {
  247. this.parentGroup = parent;
  248. }
  249. // if the parent group is inverted, apply inversion on all children
  250. if (inverted) { // only on groups
  251. renderer.invertChild(element, parentNode);
  252. }
  253. // append it
  254. parentNode.appendChild(element);
  255. // align text after adding to be able to read offset
  256. wrapper.added = true;
  257. if (wrapper.alignOnAdd && !wrapper.deferUpdateTransform) {
  258. wrapper.updateTransform();
  259. }
  260. // fire an event for internal hooks
  261. if (wrapper.onAdd) {
  262. wrapper.onAdd();
  263. }
  264. // IE8 Standards can't set the class name before the element is
  265. // appended
  266. if (this.className) {
  267. this.attr('class', this.className);
  268. }
  269. return wrapper;
  270. },
  271. /**
  272. * VML always uses htmlUpdateTransform
  273. *
  274. * @function Highcharts.VMLElement#updateTransform
  275. */
  276. updateTransform: SVGElement.prototype.htmlUpdateTransform,
  277. /**
  278. * Set the rotation of a span with oldIE's filter
  279. *
  280. * @function Highcharts.VMLElement#setSpanRotation
  281. * @return {void}
  282. */
  283. setSpanRotation: function () {
  284. // Adjust for alignment and rotation. Rotation of useHTML content is
  285. // not yet implemented but it can probably be implemented for
  286. // Firefox 3.5+ on user request. FF3.5+ has support for CSS3
  287. // transform. The getBBox method also needs to be updated to
  288. // compensate for the rotation, like it currently does for SVG.
  289. // Test case: https://jsfiddle.net/highcharts/Ybt44/
  290. var rotation = this.rotation, costheta = Math.cos(rotation * deg2rad), sintheta = Math.sin(rotation * deg2rad);
  291. css(this.element, {
  292. filter: rotation ? [
  293. 'progid:DXImageTransform.Microsoft.Matrix(M11=', costheta,
  294. ', M12=', -sintheta, ', M21=', sintheta, ', M22=', costheta,
  295. ', sizingMethod=\'auto expand\')'
  296. ].join('') : 'none'
  297. });
  298. },
  299. /**
  300. * Get the positioning correction for the span after rotating.
  301. *
  302. * @function Highcharts.VMLElement#getSpanCorrection
  303. */
  304. getSpanCorrection: function (width, baseline, alignCorrection, rotation, align) {
  305. var costheta = rotation ? Math.cos(rotation * deg2rad) : 1, sintheta = rotation ? Math.sin(rotation * deg2rad) : 0, height = pick(this.elemHeight, this.element.offsetHeight), quad, nonLeft = align && align !== 'left';
  306. // correct x and y
  307. this.xCorr = (costheta < 0 && -width);
  308. this.yCorr = (sintheta < 0 && -height);
  309. // correct for baseline and corners spilling out after rotation
  310. quad = costheta * sintheta < 0;
  311. this.xCorr += (sintheta *
  312. baseline *
  313. (quad ? 1 - alignCorrection : alignCorrection));
  314. this.yCorr -= (costheta *
  315. baseline *
  316. (rotation ? (quad ? alignCorrection : 1 - alignCorrection) : 1));
  317. // correct for the length/height of the text
  318. if (nonLeft) {
  319. this.xCorr -=
  320. width * alignCorrection * (costheta < 0 ? -1 : 1);
  321. if (rotation) {
  322. this.yCorr -= (height *
  323. alignCorrection *
  324. (sintheta < 0 ? -1 : 1));
  325. }
  326. css(this.element, {
  327. textAlign: align
  328. });
  329. }
  330. },
  331. /**
  332. * Converts a subset of an SVG path definition to its VML counterpart.
  333. * Takes an array as the parameter and returns a string.
  334. *
  335. * @function Highcharts.VMLElement#pathToVML
  336. */
  337. pathToVML: function (value) {
  338. // convert paths
  339. var i = value.length, path = [];
  340. while (i--) {
  341. // Multiply by 10 to allow subpixel precision.
  342. // Substracting half a pixel seems to make the coordinates
  343. // align with SVG, but this hasn't been tested thoroughly
  344. if (isNumber(value[i])) {
  345. path[i] = Math.round(value[i] * 10) - 5;
  346. }
  347. else if (value[i] === 'Z') { // close the path
  348. path[i] = 'x';
  349. }
  350. else {
  351. path[i] = value[i];
  352. // When the start X and end X coordinates of an arc are too
  353. // close, they are rounded to the same value above. In this
  354. // case, substract or add 1 from the end X and Y positions.
  355. // #186, #760, #1371, #1410.
  356. if (value.isArc &&
  357. (value[i] === 'wa' || value[i] === 'at')) {
  358. // Start and end X
  359. if (path[i + 5] === path[i + 7]) {
  360. path[i + 7] +=
  361. value[i + 7] > value[i + 5] ? 1 : -1;
  362. }
  363. // Start and end Y
  364. if (path[i + 6] === path[i + 8]) {
  365. path[i + 8] +=
  366. value[i + 8] > value[i + 6] ? 1 : -1;
  367. }
  368. }
  369. }
  370. }
  371. return path.join(' ') || 'x';
  372. },
  373. /**
  374. * Set the element's clipping to a predefined rectangle
  375. *
  376. * @function Highcharts.VMLElement#clip
  377. * @param {Highcharts.VMLClipRectObject} clipRect
  378. * @return {Highcharts.VMLElement}
  379. */
  380. clip: function (clipRect) {
  381. var wrapper = this, clipMembers, cssRet;
  382. if (clipRect) {
  383. clipMembers = clipRect.members;
  384. // Ensure unique list of elements (#1258)
  385. erase(clipMembers, wrapper);
  386. clipMembers.push(wrapper);
  387. wrapper.destroyClip = function () {
  388. erase(clipMembers, wrapper);
  389. };
  390. cssRet = clipRect.getCSS(wrapper);
  391. }
  392. else {
  393. if (wrapper.destroyClip) {
  394. wrapper.destroyClip();
  395. }
  396. cssRet = {
  397. clip: wrapper.docMode8 ? 'inherit' : 'rect(auto)'
  398. }; // #1214
  399. }
  400. return wrapper.css(cssRet);
  401. },
  402. /**
  403. * Set styles for the element
  404. *
  405. * @function Highcharts.VMLElement#css
  406. * @param {Highcharts.CSSObject} styles
  407. * @return {Highcharts.VMLElement}
  408. */
  409. css: SVGElement.prototype.htmlCss,
  410. /**
  411. * Removes a child either by removeChild or move to garbageBin.
  412. * Issue 490; in VML removeChild results in Orphaned nodes according to
  413. * sIEve, discardElement does not.
  414. *
  415. * @function Highcharts.VMLElement#safeRemoveChild
  416. * @param {Highcharts.HTMLDOMElement} element
  417. * @return {void}
  418. */
  419. safeRemoveChild: function (element) {
  420. // discardElement will detach the node from its parent before
  421. // attaching it to the garbage bin. Therefore it is important that
  422. // the node is attached and have parent.
  423. if (element.parentNode) {
  424. discardElement(element);
  425. }
  426. },
  427. /**
  428. * Extend element.destroy by removing it from the clip members array
  429. *
  430. * @function Highcharts.VMLElement#destroy
  431. */
  432. destroy: function () {
  433. if (this.destroyClip) {
  434. this.destroyClip();
  435. }
  436. return SVGElement.prototype.destroy.apply(this);
  437. },
  438. /**
  439. * Add an event listener. VML override for normalizing event parameters.
  440. *
  441. * @function Highcharts.VMLElement#on
  442. * @param {string} eventType
  443. * @param {Function} handler
  444. * @return {Highcharts.VMLElement}
  445. */
  446. on: function (eventType, handler) {
  447. // simplest possible event model for internal use
  448. this.element['on' + eventType] = function () {
  449. var evt = win.event;
  450. evt.target = evt.srcElement;
  451. handler(evt);
  452. };
  453. return this;
  454. },
  455. /**
  456. * In stacked columns, cut off the shadows so that they don't overlap
  457. *
  458. * @function Highcharts.VMLElement#cutOffPath
  459. * @param {string} path
  460. * @param {number} length
  461. * @return {string}
  462. */
  463. cutOffPath: function (path, length) {
  464. var len;
  465. // The extra comma tricks the trailing comma remover in
  466. // "gulp scripts" task
  467. path = path.split(/[ ,]/);
  468. len = path.length;
  469. if (len === 9 || len === 11) {
  470. path[len - 4] = path[len - 2] =
  471. pInt(path[len - 2]) - 10 * length;
  472. }
  473. return path.join(' ');
  474. },
  475. /**
  476. * Apply a drop shadow by copying elements and giving them different
  477. * strokes.
  478. *
  479. * @function Highcharts.VMLElement#shadow
  480. * @param {Highcharts.ShadowOptionsObject} shadowOptions
  481. * @param {Highcharts.VMLElement} group
  482. * @param {boolean} cutOff
  483. * @return {Highcharts.VMLElement}
  484. */
  485. shadow: function (shadowOptions, group, cutOff) {
  486. var shadows = [], i, element = this.element, renderer = this.renderer, shadow, elemStyle = element.style, markup, path = element.path, strokeWidth, modifiedPath, shadowWidth, shadowElementOpacity;
  487. // some times empty paths are not strings
  488. if (path && typeof path.value !== 'string') {
  489. path = 'x';
  490. }
  491. modifiedPath = path;
  492. if (shadowOptions) {
  493. shadowWidth = pick(shadowOptions.width, 3);
  494. shadowElementOpacity =
  495. (shadowOptions.opacity || 0.15) / shadowWidth;
  496. for (i = 1; i <= 3; i++) {
  497. strokeWidth = (shadowWidth * 2) + 1 - (2 * i);
  498. // Cut off shadows for stacked column items
  499. if (cutOff) {
  500. modifiedPath = this.cutOffPath(path.value, strokeWidth + 0.5);
  501. }
  502. markup = [
  503. '<shape isShadow="true" strokeweight="', strokeWidth,
  504. '" filled="false" path="', modifiedPath,
  505. '" coordsize="10 10" style="', element.style.cssText,
  506. '" />'
  507. ];
  508. shadow = createElement(renderer.prepVML(markup), null, {
  509. left: pInt(elemStyle.left) +
  510. pick(shadowOptions.offsetX, 1),
  511. top: pInt(elemStyle.top) +
  512. pick(shadowOptions.offsetY, 1)
  513. });
  514. if (cutOff) {
  515. shadow.cutOff = strokeWidth + 1;
  516. }
  517. // apply the opacity
  518. markup = [
  519. '<stroke color="',
  520. shadowOptions.color || '#000000',
  521. '" opacity="', shadowElementOpacity * i, '"/>'
  522. ];
  523. createElement(renderer.prepVML(markup), null, null, shadow);
  524. // insert it
  525. if (group) {
  526. group.element.appendChild(shadow);
  527. }
  528. else {
  529. element.parentNode
  530. .insertBefore(shadow, element);
  531. }
  532. // record it
  533. shadows.push(shadow);
  534. }
  535. this.shadows = shadows;
  536. }
  537. return this;
  538. },
  539. updateShadows: noop,
  540. setAttr: function (key, value) {
  541. if (this.docMode8) { // IE8 setAttribute bug
  542. this.element[key] = value;
  543. }
  544. else {
  545. this.element.setAttribute(key, value);
  546. }
  547. },
  548. getAttr: function (key) {
  549. if (this.docMode8) { // IE8 setAttribute bug
  550. return this.element[key];
  551. }
  552. return this.element.getAttribute(key);
  553. },
  554. classSetter: function (value) {
  555. // IE8 Standards mode has problems retrieving the className unless
  556. // set like this. IE8 Standards can't set the class name before the
  557. // element is appended.
  558. (this.added ? this.element : this).className = value;
  559. },
  560. dashstyleSetter: function (value, key, element) {
  561. var strokeElem = element.getElementsByTagName('stroke')[0] ||
  562. createElement(this.renderer.prepVML(['<stroke/>']), null, null, element);
  563. strokeElem[key] = value || 'solid';
  564. // Because changing stroke-width will change the dash length and
  565. // cause an epileptic effect
  566. this[key] = value;
  567. },
  568. dSetter: function (value, key, element) {
  569. var i, shadows = this.shadows;
  570. value = value || [];
  571. // Used in getter for animation
  572. this.d = value.join && value.join(' ');
  573. element.path = value = this.pathToVML(value);
  574. // update shadows
  575. if (shadows) {
  576. i = shadows.length;
  577. while (i--) {
  578. shadows[i].path = shadows[i].cutOff ?
  579. this.cutOffPath(value, shadows[i].cutOff) :
  580. value;
  581. }
  582. }
  583. this.setAttr(key, value);
  584. },
  585. fillSetter: function (value, key, element) {
  586. var nodeName = element.nodeName;
  587. if (nodeName === 'SPAN') { // text color
  588. element.style.color = value;
  589. }
  590. else if (nodeName !== 'IMG') { // #1336
  591. element.filled = value !== 'none';
  592. this.setAttr('fillcolor', this.renderer.color(value, element, key, this));
  593. }
  594. },
  595. 'fill-opacitySetter': function (value, key, element) {
  596. createElement(this.renderer.prepVML(['<', key.split('-')[0], ' opacity="', value, '"/>']), null, null, element);
  597. },
  598. // Don't bother - animation is too slow and filters introduce artifacts
  599. opacitySetter: noop,
  600. rotationSetter: function (value, key, element) {
  601. var style = element.style;
  602. // style is for #1873:
  603. this[key] = style[key] = value;
  604. // Correction for the 1x1 size of the shape container. Used in gauge
  605. // needles.
  606. style.left =
  607. -Math.round(Math.sin(value * deg2rad) + 1) + 'px';
  608. style.top =
  609. Math.round(Math.cos(value * deg2rad)) + 'px';
  610. },
  611. strokeSetter: function (value, key, element) {
  612. this.setAttr('strokecolor', this.renderer.color(value, element, key, this));
  613. },
  614. 'stroke-widthSetter': function (value, key, element) {
  615. element.stroked = !!value; // VML "stroked" attribute
  616. this[key] = value; // used in getter, issue #113
  617. if (isNumber(value)) {
  618. value += 'px';
  619. }
  620. this.setAttr('strokeweight', value);
  621. },
  622. titleSetter: function (value, key) {
  623. this.setAttr(key, value);
  624. },
  625. visibilitySetter: function (value, key, element) {
  626. // Handle inherited visibility
  627. if (value === 'inherit') {
  628. value = 'visible';
  629. }
  630. // Let the shadow follow the main element
  631. if (this.shadows) {
  632. this.shadows.forEach(function (shadow) {
  633. shadow.style[key] = value;
  634. });
  635. }
  636. // Instead of toggling the visibility CSS property, move the div out
  637. // of the viewport. This works around #61 and #586
  638. if (element.nodeName === 'DIV') {
  639. value = value === 'hidden' ? '-999em' : 0;
  640. // In order to redraw, IE7 needs the div to be visible when
  641. // tucked away outside the viewport. So the visibility is
  642. // actually opposite of the expected value. This applies to the
  643. // tooltip only.
  644. if (!this.docMode8) {
  645. element.style[key] = value ? 'visible' : 'hidden';
  646. }
  647. key = 'top';
  648. }
  649. element.style[key] = value;
  650. },
  651. xSetter: function (value, key, element) {
  652. this[key] = value; // used in getter
  653. if (key === 'x') {
  654. key = 'left';
  655. }
  656. else if (key === 'y') {
  657. key = 'top';
  658. }
  659. // clipping rectangle special
  660. if (this.updateClipping) {
  661. // the key is now 'left' or 'top' for 'x' and 'y'
  662. this[key] = value;
  663. this.updateClipping();
  664. }
  665. else {
  666. // normal
  667. element.style[key] = value;
  668. }
  669. },
  670. zIndexSetter: function (value, key, element) {
  671. element.style[key] = value;
  672. },
  673. fillGetter: function () {
  674. return this.getAttr('fillcolor') || '';
  675. },
  676. strokeGetter: function () {
  677. return this.getAttr('strokecolor') || '';
  678. },
  679. // #7850
  680. classGetter: function () {
  681. return this.getAttr('className') || '';
  682. }
  683. };
  684. VMLElement['stroke-opacitySetter'] =
  685. VMLElement['fill-opacitySetter'];
  686. H.VMLElement = VMLElement = extendClass(SVGElement, VMLElement);
  687. // Some shared setters
  688. VMLElement.prototype.ySetter =
  689. VMLElement.prototype.widthSetter =
  690. VMLElement.prototype.heightSetter =
  691. VMLElement.prototype.xSetter;
  692. /**
  693. * The VML renderer
  694. *
  695. * @private
  696. * @class
  697. * @name Highcharts.VMLRenderer
  698. *
  699. * @augments Highcharts.SVGRenderer
  700. */
  701. VMLRendererExtension = {
  702. Element: VMLElement,
  703. isIE8: win.navigator.userAgent.indexOf('MSIE 8.0') > -1,
  704. /**
  705. * Initialize the VMLRenderer.
  706. *
  707. * @function Highcharts.VMLRenderer#init
  708. * @param {Highcharts.HTMLDOMElement} container
  709. * @param {number} width
  710. * @param {number} height
  711. * @return {void}
  712. */
  713. init: function (container, width, height) {
  714. var renderer = this, boxWrapper, box, css;
  715. renderer.alignedObjects = [];
  716. boxWrapper = renderer.createElement('div')
  717. .css({ position: 'relative' });
  718. box = boxWrapper.element;
  719. container.appendChild(boxWrapper.element);
  720. // generate the containing box
  721. renderer.isVML = true;
  722. renderer.box = box;
  723. renderer.boxWrapper = boxWrapper;
  724. renderer.gradients = {};
  725. renderer.cache = {}; // Cache for numerical bounding boxes
  726. renderer.cacheKeys = [];
  727. renderer.imgCount = 0;
  728. renderer.setSize(width, height, false);
  729. // The only way to make IE6 and IE7 print is to use a global
  730. // namespace. However, with IE8 the only way to make the dynamic
  731. // shapes visible in screen and print mode seems to be to add the
  732. // xmlns attribute and the behaviour style inline.
  733. if (!doc.namespaces.hcv) {
  734. doc.namespaces.add('hcv', 'urn:schemas-microsoft-com:vml');
  735. // Setup default CSS (#2153, #2368, #2384)
  736. css = 'hcv\\:fill, hcv\\:path, hcv\\:shape, hcv\\:stroke' +
  737. '{ behavior:url(#default#VML); display: inline-block; } ';
  738. try {
  739. doc.createStyleSheet().cssText = css;
  740. }
  741. catch (e) {
  742. doc.styleSheets[0].cssText += css;
  743. }
  744. }
  745. },
  746. /**
  747. * Detect whether the renderer is hidden. This happens when one of the
  748. * parent elements has display: none
  749. *
  750. * @function Highcharts.VMLRenderer#isHidden
  751. */
  752. isHidden: function () {
  753. return !this.box.offsetWidth;
  754. },
  755. /**
  756. * Define a clipping rectangle. In VML it is accomplished by storing the
  757. * values for setting the CSS style to all associated members.
  758. *
  759. * @function Highcharts.VMLRenderer#clipRect
  760. * @param {number|Highcharts.SizeObject} x
  761. * @param {number} y
  762. * @param {number} width
  763. * @param {number} height
  764. * @return {Highcharts.VMLElement}
  765. */
  766. clipRect: function (x, y, width, height) {
  767. // create a dummy element
  768. var clipRect = this.createElement(), isObj = isObject(x);
  769. // mimic a rectangle with its style object for automatic updating in
  770. // attr
  771. return extend(clipRect, {
  772. members: [],
  773. count: 0,
  774. left: (isObj ? x.x : x) + 1,
  775. top: (isObj ? x.y : y) + 1,
  776. width: (isObj ? x.width : width) - 1,
  777. height: (isObj ? x.height : height) - 1,
  778. getCSS: function (wrapper) {
  779. var element = wrapper.element, nodeName = element.nodeName, isShape = nodeName === 'shape', inverted = wrapper.inverted, rect = this, top = rect.top - (isShape ? element.offsetTop : 0), left = rect.left, right = left + rect.width, bottom = top + rect.height, ret = {
  780. clip: 'rect(' +
  781. Math.round(inverted ? left : top) + 'px,' +
  782. Math.round(inverted ? bottom : right) + 'px,' +
  783. Math.round(inverted ? right : bottom) + 'px,' +
  784. Math.round(inverted ? top : left) + 'px)'
  785. };
  786. // issue 74 workaround
  787. if (!inverted && wrapper.docMode8 && nodeName === 'DIV') {
  788. extend(ret, {
  789. width: right + 'px',
  790. height: bottom + 'px'
  791. });
  792. }
  793. return ret;
  794. },
  795. // used in attr and animation to update the clipping of all
  796. // members
  797. updateClipping: function () {
  798. clipRect.members.forEach(function (member) {
  799. // Member.element is falsy on deleted series, like in
  800. // stock/members/series-remove demo. Should be removed
  801. // from members, but this will do.
  802. if (member.element) {
  803. member.css(clipRect.getCSS(member));
  804. }
  805. });
  806. }
  807. });
  808. },
  809. /**
  810. * Take a color and return it if it's a string, make it a gradient if
  811. * it's a gradient configuration object, and apply opacity.
  812. *
  813. * @function Highcharts.VMLRenderer#color<T>
  814. *
  815. * @param {T} color
  816. * The color or config object
  817. *
  818. * @return {T}
  819. */
  820. color: function (color, elem, prop, wrapper) {
  821. var renderer = this, colorObject, regexRgba = /^rgba/, markup, fillType, ret = 'none';
  822. // Check for linear or radial gradient
  823. if (color &&
  824. color.linearGradient) {
  825. fillType = 'gradient';
  826. }
  827. else if (color &&
  828. color.radialGradient) {
  829. fillType = 'pattern';
  830. }
  831. if (fillType) {
  832. var stopColor, stopOpacity, gradient = (color.linearGradient ||
  833. color.radialGradient), x1, y1, x2, y2, opacity1, opacity2, color1, color2, fillAttr = '', stops = color.stops, firstStop, lastStop, colors = [], addFillNode = function () {
  834. // Add the fill subnode. When colors attribute is used,
  835. // the meanings of opacity and o:opacity2 are reversed.
  836. markup = ['<fill colors="' + colors.join(',') +
  837. '" opacity="', opacity2, '" o:opacity2="',
  838. opacity1, '" type="', fillType, '" ', fillAttr,
  839. 'focus="100%" method="any" />'];
  840. createElement(renderer.prepVML(markup), null, null, elem);
  841. };
  842. // Extend from 0 to 1
  843. firstStop = stops[0];
  844. lastStop = stops[stops.length - 1];
  845. if (firstStop[0] > 0) {
  846. stops.unshift([
  847. 0,
  848. firstStop[1]
  849. ]);
  850. }
  851. if (lastStop[0] < 1) {
  852. stops.push([
  853. 1,
  854. lastStop[1]
  855. ]);
  856. }
  857. // Compute the stops
  858. stops.forEach(function (stop, i) {
  859. if (regexRgba.test(stop[1])) {
  860. colorObject = H.color(stop[1]);
  861. stopColor = colorObject.get('rgb');
  862. stopOpacity = colorObject.get('a');
  863. }
  864. else {
  865. stopColor = stop[1];
  866. stopOpacity = 1;
  867. }
  868. // Build the color attribute
  869. colors.push((stop[0] * 100) + '% ' + stopColor);
  870. // Only start and end opacities are allowed, so we use the
  871. // first and the last
  872. if (!i) {
  873. opacity1 = stopOpacity;
  874. color2 = stopColor;
  875. }
  876. else {
  877. opacity2 = stopOpacity;
  878. color1 = stopColor;
  879. }
  880. });
  881. // Apply the gradient to fills only.
  882. if (prop === 'fill') {
  883. // Handle linear gradient angle
  884. if (fillType === 'gradient') {
  885. x1 = gradient.x1 || gradient[0] || 0;
  886. y1 = gradient.y1 || gradient[1] || 0;
  887. x2 = gradient.x2 || gradient[2] || 0;
  888. y2 = gradient.y2 || gradient[3] || 0;
  889. fillAttr = 'angle="' + (90 - Math.atan((y2 - y1) / // y vector
  890. (x2 - x1) // x vector
  891. ) * 180 / Math.PI) + '"';
  892. addFillNode();
  893. // Radial (circular) gradient
  894. }
  895. else {
  896. var r = gradient.r, sizex = r * 2, sizey = r * 2, cx = gradient.cx, cy = gradient.cy, radialReference = elem.radialReference, bBox, applyRadialGradient = function () {
  897. if (radialReference) {
  898. bBox = wrapper.getBBox();
  899. cx += (radialReference[0] - bBox.x) /
  900. bBox.width - 0.5;
  901. cy += (radialReference[1] - bBox.y) /
  902. bBox.height - 0.5;
  903. sizex *= radialReference[2] / bBox.width;
  904. sizey *= radialReference[2] / bBox.height;
  905. }
  906. fillAttr =
  907. 'src="' + H.getOptions().global.VMLRadialGradientURL +
  908. '" ' +
  909. 'size="' + sizex + ',' + sizey + '" ' +
  910. 'origin="0.5,0.5" ' +
  911. 'position="' + cx + ',' + cy + '" ' +
  912. 'color2="' + color2 + '" ';
  913. addFillNode();
  914. };
  915. // Apply radial gradient
  916. if (wrapper.added) {
  917. applyRadialGradient();
  918. }
  919. else {
  920. // We need to know the bounding box to get the size
  921. // and position right
  922. wrapper.onAdd = applyRadialGradient;
  923. }
  924. // The fill element's color attribute is broken in IE8
  925. // standards mode, so we need to set the parent shape's
  926. // fillcolor attribute instead.
  927. ret = color1;
  928. }
  929. // Gradients are not supported for VML stroke, return the first
  930. // color. #722.
  931. }
  932. else {
  933. ret = stopColor;
  934. }
  935. // If the color is an rgba color, split it and add a fill node
  936. // to hold the opacity component
  937. }
  938. else if (regexRgba.test(color) && elem.tagName !== 'IMG') {
  939. colorObject = H.color(color);
  940. wrapper[prop + '-opacitySetter'](colorObject.get('a'), prop, elem);
  941. ret = colorObject.get('rgb');
  942. }
  943. else {
  944. // 'stroke' or 'fill' node
  945. var propNodes = elem.getElementsByTagName(prop);
  946. if (propNodes.length) {
  947. propNodes[0].opacity = 1;
  948. propNodes[0].type = 'solid';
  949. }
  950. ret = color;
  951. }
  952. return ret;
  953. },
  954. /**
  955. * Take a VML string and prepare it for either IE8 or IE6/IE7.
  956. *
  957. * @function Highcharts.VMLRenderer#prepVML
  958. *
  959. * @param {Array<(number|string)>} markup
  960. * A string array of the VML markup to prepare
  961. *
  962. * @return {string}
  963. */
  964. prepVML: function (markup) {
  965. var vmlStyle = 'display:inline-block;behavior:url(#default#VML);', isIE8 = this.isIE8;
  966. markup = markup.join('');
  967. if (isIE8) { // add xmlns and style inline
  968. markup = markup.replace('/>', ' xmlns="urn:schemas-microsoft-com:vml" />');
  969. if (markup.indexOf('style="') === -1) {
  970. markup = markup.replace('/>', ' style="' + vmlStyle + '" />');
  971. }
  972. else {
  973. markup = markup.replace('style="', 'style="' + vmlStyle);
  974. }
  975. }
  976. else { // add namespace
  977. markup = markup.replace('<', '<hcv:');
  978. }
  979. return markup;
  980. },
  981. /**
  982. * Create rotated and aligned text
  983. *
  984. * @function Highcharts.VMLRenderer#text
  985. *
  986. * @param {string} str
  987. *
  988. * @param {number} x
  989. *
  990. * @param {number} y
  991. */
  992. text: SVGRenderer.prototype.html,
  993. /**
  994. * Create and return a path element
  995. *
  996. * @function Highcharts.VMLRenderer#path
  997. *
  998. * @param {Highcharts.VMLAttributes|Highcharts.VMLPathArray} [path]
  999. */
  1000. path: function (path) {
  1001. var attr = {
  1002. // subpixel precision down to 0.1 (width and height = 1px)
  1003. coordsize: '10 10'
  1004. };
  1005. if (isArray(path)) {
  1006. attr.d = path;
  1007. }
  1008. else if (isObject(path)) { // attributes
  1009. extend(attr, path);
  1010. }
  1011. // create the shape
  1012. return this.createElement('shape').attr(attr);
  1013. },
  1014. /**
  1015. * Create and return a circle element. In VML circles are implemented as
  1016. * shapes, which is faster than v:oval
  1017. *
  1018. * @function Highcharts.VMLRenderer#circle
  1019. * @param {number|Highcharts.Dictionary<number>} x
  1020. * @param {number} [y]
  1021. * @param {number} [r]
  1022. * @return {Highcharts.VMLElement}
  1023. */
  1024. circle: function (x, y, r) {
  1025. var circle = this.symbol('circle');
  1026. if (isObject(x)) {
  1027. r = x.r;
  1028. y = x.y;
  1029. x = x.x;
  1030. }
  1031. circle.isCircle = true; // Causes x and y to mean center (#1682)
  1032. circle.r = r;
  1033. return circle.attr({ x: x, y: y });
  1034. },
  1035. /**
  1036. * Create a group using an outer div and an inner v:group to allow
  1037. * rotating and flipping. A simple v:group would have problems with
  1038. * positioning child HTML elements and CSS clip.
  1039. *
  1040. * @function Highcharts.VMLRenderer#g
  1041. *
  1042. * @param {string} name
  1043. * The name of the group
  1044. *
  1045. * @return {Highcharts.VMLElement}
  1046. */
  1047. g: function (name) {
  1048. var wrapper, attribs;
  1049. // set the class name
  1050. if (name) {
  1051. attribs = {
  1052. 'className': 'highcharts-' + name,
  1053. 'class': 'highcharts-' + name
  1054. };
  1055. }
  1056. // the div to hold HTML and clipping
  1057. wrapper = this.createElement('div').attr(attribs);
  1058. return wrapper;
  1059. },
  1060. /**
  1061. * VML override to create a regular HTML image.
  1062. *
  1063. * @function Highcharts.VMLRenderer#image
  1064. *
  1065. * @param {string} src
  1066. *
  1067. * @param {number} x
  1068. *
  1069. * @param {number} y
  1070. *
  1071. * @param {number} width
  1072. *
  1073. * @param {number} height
  1074. * @return {Highcharts.VMLElement}
  1075. */
  1076. image: function (src, x, y, width, height) {
  1077. var obj = this.createElement('img').attr({ src: src });
  1078. if (arguments.length > 1) {
  1079. obj.attr({
  1080. x: x,
  1081. y: y,
  1082. width: width,
  1083. height: height
  1084. });
  1085. }
  1086. return obj;
  1087. },
  1088. /**
  1089. * For rectangles, VML uses a shape for rect to overcome bugs and
  1090. * rotation problems
  1091. *
  1092. * @function Highcharts.VMLRenderer#createElement
  1093. * @param {string} nodeName
  1094. * @return {Highcharts.VMLElement}
  1095. */
  1096. createElement: function (nodeName) {
  1097. return nodeName === 'rect' ?
  1098. this.symbol(nodeName) :
  1099. SVGRenderer.prototype.createElement.call(this, nodeName);
  1100. },
  1101. /**
  1102. * In the VML renderer, each child of an inverted div (group) is
  1103. * inverted
  1104. *
  1105. * @function Highcharts.VMLRenderer#invertChild
  1106. *
  1107. * @param {Highcharts.HTMLDOMElement} element
  1108. *
  1109. * @param {Highcharts.HTMLDOMElement} parentNode
  1110. */
  1111. invertChild: function (element, parentNode) {
  1112. var ren = this, parentStyle = parentNode.style, imgStyle = element.tagName === 'IMG' && element.style; // #1111
  1113. css(element, {
  1114. flip: 'x',
  1115. left: pInt(parentStyle.width) -
  1116. (imgStyle ? pInt(imgStyle.top) : 1),
  1117. top: pInt(parentStyle.height) -
  1118. (imgStyle ? pInt(imgStyle.left) : 1),
  1119. rotation: -90
  1120. });
  1121. // Recursively invert child elements, needed for nested composite
  1122. // shapes like box plots and error bars. #1680, #1806.
  1123. [].forEach.call(element.childNodes, function (child) {
  1124. ren.invertChild(child, element);
  1125. });
  1126. },
  1127. /**
  1128. * Symbol definitions that override the parent SVG renderer's symbols
  1129. *
  1130. * @name Highcharts.VMLRenderer#symbols
  1131. * @type {Highcharts.Dictionary<Function>}
  1132. */
  1133. symbols: {
  1134. // VML specific arc function
  1135. arc: function (x, y, w, h, options) {
  1136. var start = options.start, end = options.end, radius = options.r || w || h, innerRadius = options.innerR, cosStart = Math.cos(start), sinStart = Math.sin(start), cosEnd = Math.cos(end), sinEnd = Math.sin(end), ret;
  1137. if (end - start === 0) { // no angle, don't show it.
  1138. return ['x'];
  1139. }
  1140. ret = [
  1141. 'wa',
  1142. x - radius,
  1143. y - radius,
  1144. x + radius,
  1145. y + radius,
  1146. x + radius * cosStart,
  1147. y + radius * sinStart,
  1148. x + radius * cosEnd,
  1149. y + radius * sinEnd // end y
  1150. ];
  1151. if (options.open && !innerRadius) {
  1152. ret.push('e', 'M', x, // - innerRadius,
  1153. y // - innerRadius
  1154. );
  1155. }
  1156. ret.push('at', // anti clockwise arc to
  1157. x - innerRadius, // left
  1158. y - innerRadius, // top
  1159. x + innerRadius, // right
  1160. y + innerRadius, // bottom
  1161. x + innerRadius * cosEnd, // start x
  1162. y + innerRadius * sinEnd, // start y
  1163. x + innerRadius * cosStart, // end x
  1164. y + innerRadius * sinStart, // end y
  1165. 'x', // finish path
  1166. 'e' // close
  1167. );
  1168. ret.isArc = true;
  1169. return ret;
  1170. },
  1171. // Add circle symbol path. This performs significantly faster than
  1172. // v:oval.
  1173. circle: function (x, y, w, h, wrapper) {
  1174. if (wrapper && defined(wrapper.r)) {
  1175. w = h = 2 * wrapper.r;
  1176. }
  1177. // Center correction, #1682
  1178. if (wrapper && wrapper.isCircle) {
  1179. x -= w / 2;
  1180. y -= h / 2;
  1181. }
  1182. // Return the path
  1183. return [
  1184. 'wa',
  1185. x,
  1186. y,
  1187. x + w,
  1188. y + h,
  1189. x + w,
  1190. y + h / 2,
  1191. x + w,
  1192. y + h / 2,
  1193. 'e' // close
  1194. ];
  1195. },
  1196. /**
  1197. * Add rectangle symbol path which eases rotation and omits arcsize
  1198. * problems compared to the built-in VML roundrect shape. When
  1199. * borders are not rounded, use the simpler square path, else use
  1200. * the callout path without the arrow.
  1201. */
  1202. rect: function (x, y, w, h, options) {
  1203. return SVGRenderer.prototype.symbols[!defined(options) || !options.r ? 'square' : 'callout'].call(0, x, y, w, h, options);
  1204. }
  1205. }
  1206. };
  1207. H.VMLRenderer = VMLRenderer = function () {
  1208. this.init.apply(this, arguments);
  1209. };
  1210. VMLRenderer.prototype = merge(SVGRenderer.prototype, VMLRendererExtension);
  1211. // general renderer
  1212. H.Renderer = VMLRenderer;
  1213. }
  1214. SVGRenderer.prototype.getSpanWidth = function (wrapper, tspan) {
  1215. var renderer = this, bBox = wrapper.getBBox(true), actualWidth = bBox.width;
  1216. // Old IE cannot measure the actualWidth for SVG elements (#2314)
  1217. if (!svg && renderer.forExport) {
  1218. actualWidth = renderer.measureSpanWidth(tspan.firstChild.data, wrapper.styles);
  1219. }
  1220. return actualWidth;
  1221. };
  1222. // This method is used with exporting in old IE, when emulating SVG (see #2314)
  1223. SVGRenderer.prototype.measureSpanWidth = function (text, styles) {
  1224. var measuringSpan = doc.createElement('span'), offsetWidth, textNode = doc.createTextNode(text);
  1225. measuringSpan.appendChild(textNode);
  1226. css(measuringSpan, styles);
  1227. this.box.appendChild(measuringSpan);
  1228. offsetWidth = measuringSpan.offsetWidth;
  1229. discardElement(measuringSpan); // #2463
  1230. return offsetWidth;
  1231. };