slicer.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. /*
  2. * This file is generated by Sencha Cmd and should NOT be edited. It will be replaced by
  3. * "sencha package upgrade".
  4. */
  5. if (document.addEventListener) {
  6. document.addEventListener('DOMContentLoaded', function () {
  7. // This is very important for getting transparency on corners.
  8. document.body.style.backgroundColor = 'transparent';
  9. });
  10. }
  11. // This variable is watched by the Slicer. Once it is set, the data is saved with the
  12. // screenshot.
  13. var slicerManifest;
  14. function generateSlicerManifest () {
  15. var elements = document.body.querySelectorAll('.x-slicer-target');
  16. var widgets = [];
  17. var slicesRe = /^'x-slicer\:(.+)'$/;
  18. function getData (el) {
  19. var data = el.getAttribute('data-slicer');
  20. if (data) {
  21. return JSON.parse(data);
  22. }
  23. return null;
  24. }
  25. function getSlices (slices, src) {
  26. var content = src && src.content;
  27. if (content) {
  28. var m = slicesRe.exec(content);
  29. if (m && m[1]) {
  30. slices.push(m[1]);
  31. }
  32. }
  33. }
  34. function forEach (it, fn) {
  35. for (var i = 0; i < it.length; ++i) {
  36. fn(it[i]);
  37. }
  38. }
  39. forEach(elements, function (el) {
  40. var view = el.ownerDocument.defaultView;
  41. var style = view.getComputedStyle(el, null);
  42. var bg = style['background-image'];
  43. var box = el.getBoundingClientRect();
  44. var entry = {
  45. box: {
  46. x: window.scrollX + box.left,
  47. y: window.scrollY + box.top,
  48. w: box.right - box.left,
  49. h: box.bottom - box.top
  50. },
  51. radius: {
  52. tl: parseInt(style['border-top-left-radius'], 10) || 0,
  53. tr: parseInt(style['border-top-right-radius'], 10) || 0,
  54. br: parseInt(style['border-bottom-right-radius'], 10) || 0,
  55. bl: parseInt(style['border-bottom-left-radius'], 10) || 0
  56. },
  57. border: {
  58. t: parseInt(style['border-top-width'], 10) || 0,
  59. r: parseInt(style['border-right-width'], 10) || 0,
  60. b: parseInt(style['border-bottom-width'], 10) || 0,
  61. l: parseInt(style['border-left-width'], 10) || 0
  62. }
  63. };
  64. if (el.id) {
  65. entry.id = el.id;
  66. }
  67. if (bg.indexOf('-gradient') !== -1) {
  68. if (bg.indexOf('50% 0') !== -1 || bg.indexOf('top') !== -1 ||
  69. bg.indexOf('bottom') !== -1) {
  70. entry.gradient = 'top';
  71. } else {
  72. entry.gradient = 'left';
  73. }
  74. }
  75. var slices = [];
  76. getSlices(slices, view.getComputedStyle(el, ':before'));
  77. getSlices(slices, view.getComputedStyle(el, ':after'));
  78. if (slices.length) {
  79. entry.slices = slices.join(', ').split(', ');
  80. }
  81. var extra = getData(el);
  82. if (extra) {
  83. entry.extra = extra;
  84. }
  85. widgets.push(entry);
  86. });
  87. slicerManifest = getData(document.body) || {};
  88. slicerManifest.widgets = widgets;
  89. if (!slicerManifest.format) {
  90. // legacy support sets format to "1.0"
  91. slicerManifest.format = '2.0';
  92. }
  93. }