mobile/android/docs/assets/js/icon-js.js

   1 /**
   2  * @param html {String} HTML representing a single element
   3  * @return {Element}
   4  */
   5 function htmlToElement(html) {
   6     let template = document.createElement('template');
   7     html = html.trim(); // Never return a text node of whitespace as the result
   8     template.innerHTML = html;
   9     //firstChild may be a comment so we must use firstElementChild to avoid picking it
  10     return template.content.firstElementChild;
  11 }
  12
  13 /**
  14  * Converts an Android Vector Drawable to a standard SVG by striping off or renaming some elements
  15  *
  16  * @param s {String} String of an Android Vector Drawable
  17  * @returns {String} The same string but in the standard SVG representation
  18  */
  19 function androidSVGtoNormalSVG(s) {
  20     s = s.replace(/<\?xml version="1\.0" encoding="utf-8"\?>/g, '');
  21     s = s.replace(/<vector xmlns:android="http:\/\/schemas.android.com\/apk\/res\/android"/g, '<svg xmlns="http://www.w3.org/2000/svg"');
  22     s = s.replace(/<\/vector>/g, '</svg>');
  23     s = s.replace(/android:(height|width)="(\d+)dp"/g, '');
  24     s = s.replace(/android:viewportHeight="(\d+\.?\d+)"/g, 'height="$1"');
  25     s = s.replace(/android:viewportWidth="(\d+\.?\d+)"/g, 'width="$1"');
  26     s = s.replace(/android:fillColor=/g, 'fill=');
  27     s = s.replace(/android:pathData=/g, 'd=');
  28     //s = s.replace(/android:/g, '');
  29     return s;
  30 }
  31
  32 function addToTable(name, svg) {
  33     let table = document.querySelector("#preview_table > tbody");
  34     let row = htmlToElement("<tr></tr>");
  35     row.appendChild(htmlToElement("<td>" + name + "</td>"));
  36     let td = htmlToElement("<td></td>");
  37     td.appendChild(svg);
  38     row.appendChild(td);
  39     table.appendChild(row);
  40 }
  41
  42 function addSingleItemToTable(str) {
  43     let table = document.querySelector("#preview_table > tbody");
  44     table.append(htmlToElement("<tr><td colspan='2'>" + str + "</td></tr>"))
  45 }
  46
  47 function getFile(iconName, downloadUrl) {
  48     return new Promise((resolve, reject) => {
  49         let request = new XMLHttpRequest();
  50         request.open('GET', downloadUrl, true);
  51         request.onreadystatechange = function () {
  52             if (request.readyState === 4 && request.status === 200) {
  53                 let androidXmlText = request.responseText;
  54                 androidXmlText = androidSVGtoNormalSVG(androidXmlText);
  55                 resolve([iconName, androidXmlText]);
  56             } else if (request.readyState === 4) {
  57                 //Request completed with an error
  58                 resolve([iconName, "<span>Error during download</span>"]);
  59             }
  60         };
  61         request.send(null);
  62     });
  63
  64 }
  65
  66 // This function recovers all icons inside the drawable folder via github API
  67 (function getIcons() {
  68     let request = new XMLHttpRequest();
  69     request.open("GET", "https://api.github.com/repos/mozilla-mobile/android-components/contents/components/ui/icons/src/main/res/drawable", true);
  70     //Explicit request of the V3 version of the API
  71     request.setRequestHeader("Accept", "application/vnd.github.v3+json");
  72     request.onreadystatechange = function () {
  73         if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
  74             let response = JSON.parse(request.response);
  75             if (response.message) {
  76                 //Something went wrong
  77                 addSingleItemToTable("Error: " + response.message);
  78                 return;
  79             }
  80             addSingleItemToTable("Loading");
  81             let promises = [];
  82             for (let i = 0; i < response.length; i++) {
  83                 let iconName = response[i]['name'].substr(0, response[i]['name'].length - 4);
  84                 promises.push(getFile(iconName, response[i]['download_url']));
  85             }
  86             Promise.all(promises).then((values) => {
  87                 document.querySelector("#preview_table > tbody").innerHTML = "";
  88                 for (let i = 0; i < values.length; i++) {
  89                     let name = values[i][0], svg = values[i][1];
  90                     addToTable(name, htmlToElement(svg));
  91                 }
  92             });
  93         }
  94     };
  95     request.send(null);
  96 })();
  97