ADN Open CIS
Сообщество программистов Autodesk в СНГ

27/06/2019

Иконки в таблице стилей Viewer

Во время Forge Accelerator в Бостоне, Tianmin задал вопрос, есть ли простой способ посмотреть, какие иконки есть во Viewer-е, чтобы использовать их в собственных toolbar-ах.

Есть множество встроенных иконок в таблице стилей CSS Viewer, но они закодированы в формате Base64, поэтому сложно понять, как же они выглядят.

С помощью кода, приведенного ниже Вы можете увидеть все эти иконки, кликнуть нужную и Вы увидите имя  класса и сможете применить его с собственному элементу HTML.

Просто используйте код на любом web-сайте, нужно только подключить jQuery или в консоли браузера на любой веб-странице, где загружен jQuery, например https://oss-manager.herokuapp.com

Код - JavaScript: [Выделить]
  1. var fetchCSS = function () {
  2.     $.get({
  3.         url: 'https://developer.api.autodesk.com/modelderivative/v2/viewers/6.*/style.min.css',
  4.         success: function (data) {
  5.             var styleElement = document.createElement('style');
  6.             styleElement.textContent = data;
  7.             document.body.appendChild(styleElement);
  8.  
  9.             var divElement = document.createElement('div');
  10.             divElement.style.position = 'fixed';
  11.             divElement.style.top = 0;
  12.             divElement.style.left = 0;
  13.             divElement.style.zIndex = 10000;
  14.             divElement.style.backgroundColor = 'white';
  15.             document.body.appendChild(divElement);
  16.  
  17.             var rules = styleElement.sheet.cssRules;
  18.             for (key in rules) {
  19.                 var rule = rules[key];
  20.                 if (rule.cssText && rule.cssText.startsWith('.adsk-icon')) {
  21.                     var iconClass = rule.selectorText.replace('.', '').split('::')[0];
  22.  
  23.                     (function showIcon(iconClass) {
  24.                         var container = document.createElement('div');
  25.                         container.onclick = function () {
  26.                             alert(iconClass);
  27.                         }
  28.                         container.style.width = '48px';
  29.                         container.style.height = '48px';
  30.                         container.style.padding = '10px';
  31.                         container.style.float = 'left';
  32.                         container.className = 'adsk-button-icon ' + iconClass;
  33.  
  34.                         divElement.appendChild(container);
  35.                     })(iconClass);
  36.                 }
  37.             }
  38.         }
  39.     })
  40. }
  41. fetchCSS();

То же самое можно реализовать с помощью функции fetch, поддерживаемой большинством браузеров: https://caniuse.com/#feat=fetch

В этом случае Вам не нужен jQuery:

Код - JavaScript: [Выделить]
  1. var fetchCSS = function () {
  2.     fetch('https://developer.api.autodesk.com/modelderivative/v2/viewers/6.*/style.min.css')
  3.     .then(res => res.text())
  4.     .then(data => {
  5.         var styleElement = document.createElement('style');
  6.         styleElement.textContent = data;
  7.         document.body.appendChild(styleElement);
  8.  
  9.         var divElement = document.createElement('div');
  10.         divElement.style.position = 'fixed';
  11.         divElement.style.top = 0;
  12.         divElement.style.left = 0;
  13.         divElement.style.zIndex = 10000;
  14.         divElement.style.backgroundColor = 'white';
  15.         document.body.appendChild(divElement);
  16.  
  17.         var rules = styleElement.sheet.cssRules;
  18.         for (key in rules) {
  19.             var rule = rules[key];
  20.             if (rule.cssText && rule.cssText.startsWith('.adsk-icon')) {
  21.                 var iconClass = rule.selectorText.replace('.', '').split('::')[0];
  22.  
  23.                 (function showIcon(iconClass) {
  24.                     var container = document.createElement('div');
  25.                     container.onclick = function () {
  26.                         alert(iconClass);
  27.                     }
  28.                     container.style.width = '48px';
  29.                     container.style.height = '48px';
  30.                     container.style.padding = '10px';
  31.                     container.style.float = 'left';
  32.                     container.className = 'adsk-button-icon ' + iconClass;
  33.  
  34.                     divElement.appendChild(container);
  35.                 })(iconClass);
  36.             }
  37.         }
  38.     })
  39. }
  40. fetchCSS();

Источник: https://forge.autodesk.com/blog/what-icons-are-provided-viewer-stylesheet

Автор перевода: Александр Игнатович

Обсуждение: http://adn-cis.org/forum/index.php?topic=

Опубликовано 27.06.2019