Сообщество программистов Autodesk в СНГ :: Иконки в таблице стилей Viewer

Сообщество программистов Autodesk в СНГ
Forge: Viewer
Иконки в таблице стилей Viewer

27/06/2019

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

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

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

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

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

Код - JavaScript: [Выделить]

var fetchCSS = function () {
    $.get({
        url: 'https://developer.api.autodesk.com/modelderivative/v2/viewers/6.*/style.min.css',
        success: function (data) {
            var styleElement = document.createElement('style');
            styleElement.textContent = data;
            document.body.appendChild(styleElement);
 
            var divElement = document.createElement('div');
            divElement.style.position = 'fixed';
            divElement.style.top = 0;
            divElement.style.left = 0;
            divElement.style.zIndex = 10000;
            divElement.style.backgroundColor = 'white';
            document.body.appendChild(divElement);
 
            var rules = styleElement.sheet.cssRules;
            for (key in rules) {
                var rule = rules[key];
                if (rule.cssText && rule.cssText.startsWith('.adsk-icon')) {
                    var iconClass = rule.selectorText.replace('.', '').split('::')[0];
 
                    (function showIcon(iconClass) {
                        var container = document.createElement('div');
                        container.onclick = function () {
                            alert(iconClass);
                        }
                        container.style.width = '48px';
                        container.style.height = '48px';
                        container.style.padding = '10px';
                        container.style.float = 'left';
                        container.className = 'adsk-button-icon ' + iconClass;
 
                        divElement.appendChild(container);
                    })(iconClass);
                }
            }
        }
    })
}
fetchCSS();

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

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

Код - JavaScript: [Выделить]

var fetchCSS = function () {
    fetch('https://developer.api.autodesk.com/modelderivative/v2/viewers/6.*/style.min.css')
    .then(res => res.text())
    .then(data => {
        var styleElement = document.createElement('style');
        styleElement.textContent = data;
        document.body.appendChild(styleElement);
 
        var divElement = document.createElement('div');
        divElement.style.position = 'fixed';
        divElement.style.top = 0;
        divElement.style.left = 0;
        divElement.style.zIndex = 10000;
        divElement.style.backgroundColor = 'white';
        document.body.appendChild(divElement);
 
        var rules = styleElement.sheet.cssRules;
        for (key in rules) {
            var rule = rules[key];
            if (rule.cssText && rule.cssText.startsWith('.adsk-icon')) {
                var iconClass = rule.selectorText.replace('.', '').split('::')[0];
 
                (function showIcon(iconClass) {
                    var container = document.createElement('div');
                    container.onclick = function () {
                        alert(iconClass);
                    }
                    container.style.width = '48px';
                    container.style.height = '48px';
                    container.style.padding = '10px';
                    container.style.float = 'left';
                    container.className = 'adsk-button-icon ' + iconClass;
 
                    divElement.appendChild(container);
                })(iconClass);
            }
        }
    })
}
fetchCSS();