extjs/examples/classic/aria/sass/example/slicer.js

   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
  12 // This variable is watched by the Slicer. Once it is set, the data is saved with the
  13 // screenshot.
  14 var slicerManifest;
  15
  16 function generateSlicerManifest () {
  17     var elements = document.body.querySelectorAll('.x-slicer-target');
  18     var widgets = [];
  19     var slicesRe = /^'x-slicer\:(.+)'$/;
  20
  21     function getData (el) {
  22         var data = el.getAttribute('data-slicer');
  23         if (data) {
  24             return JSON.parse(data);
  25         }
  26         return null;
  27     }
  28
  29     function getSlices (slices, src) {
  30         var content = src && src.content;
  31         if (content) {
  32             var m = slicesRe.exec(content);
  33             if (m && m[1]) {
  34                 slices.push(m[1]);
  35             }
  36         }
  37     }
  38
  39     function forEach (it, fn) {
  40         for (var i = 0; i < it.length; ++i) {
  41             fn(it[i]);
  42         }
  43     }
  44
  45     forEach(elements, function (el) {
  46         var view = el.ownerDocument.defaultView;
  47         var style = view.getComputedStyle(el, null);
  48         var bg = style['background-image'];
  49         var box = el.getBoundingClientRect();
  50
  51         var entry = {
  52             box: {
  53                 x: window.scrollX + box.left,
  54                 y: window.scrollY + box.top,
  55                 w: box.right - box.left,
  56                 h: box.bottom - box.top
  57             },
  58             radius: {
  59                 tl: parseInt(style['border-top-left-radius'], 10) || 0,
  60                 tr: parseInt(style['border-top-right-radius'], 10) || 0,
  61                 br: parseInt(style['border-bottom-right-radius'], 10) || 0,
  62                 bl: parseInt(style['border-bottom-left-radius'], 10) || 0
  63             },
  64             border: {
  65                 t: parseInt(style['border-top-width'], 10) || 0,
  66                 r: parseInt(style['border-right-width'], 10) || 0,
  67                 b: parseInt(style['border-bottom-width'], 10) || 0,
  68                 l: parseInt(style['border-left-width'], 10) || 0
  69             }
  70         };
  71
  72         if (el.id) {
  73             entry.id = el.id;
  74         }
  75
  76         if (bg.indexOf('-gradient') !== -1) {
  77             if (bg.indexOf('50% 0') !== -1 || bg.indexOf('top') !== -1 ||
  78                                               bg.indexOf('bottom') !== -1) {
  79                 entry.gradient = 'top';
  80             } else {
  81                 entry.gradient = 'left';
  82             }
  83         }
  84
  85         var slices = [];
  86         getSlices(slices, view.getComputedStyle(el, ':before'));
  87         getSlices(slices, view.getComputedStyle(el, ':after'));
  88
  89         if (slices.length) {
  90             entry.slices = slices.join(', ').split(', ');
  91         }
  92         var extra = getData(el);
  93         if (extra) {
  94             entry.extra = extra;
  95         }
  96
  97         widgets.push(entry);
  98     });
  99
 100     slicerManifest = getData(document.body) || {};
 101     slicerManifest.widgets = widgets;
 102     if (!slicerManifest.format) {
 103         // legacy support sets format to "1.0"
 104         slicerManifest.format = '2.0';
 105     }
 106 }