_jade/en/download-theme.jade

extends ../layouts/basic

block variablesLang
    include ./_variablesLang.jade

block extra_head
    title Download Themes - Apache ECharts
    link(rel='stylesheet', type='text/css', href='#{cdnPayRoot}/#{ecWWWLang}/vendors/prettify/prettify.css?_v_=#{cdnPayVersion}')

block content
    nav(class='navbar navbar-default navbar-fixed-top')
        include ./nav

    .page-main
        .page-info
            #themes.container
                h1 Download Themes
                p Change the look of your charts.
                p You can also make your own theme along with using the themes we provide.
                p.page-info-echarts Apache ECharts<sup>TM</sup>

        .page-content.container#themes
            .row
                each themeName, idx in theme
                    .col-sm-4.theme
                        a(class="download-theme" href="https://fastly.jsdelivr.net/npm/echarts/theme/#{themeName}.js?_v_=#{cdnPayVersion}" download="#{themeName}.js" target="_blank")
                            img(src="#{cdnPayRoot}/#{ecWWWLang}/asset/theme/thumb/#{themeName}.png?_v_=#{cdnPayVersion}" alt="")
                        p #{themeName}

        section.section-bg#theme-configure-section
            .container
                #theme-builder
                    a.btn.btn-main.btn-thirdary.more-btn(href="#{host}/#{ecWWWLang}/theme-builder.html") Theme Builder
                    p Make a custom theme and use it for your charts.

        section
            .container
                #theme-example
                    h4 An example of using a theme
                    pre(class="html").
                        &lt;script src="echarts.js"&gt;&lt;/script&gt;
                        &lt;!-- import vintage theme --&gt;
                        &lt;script src="theme/vintage.js"&gt;&lt;/script&gt;
                        &lt;script&gt;
                        // The second parameter is the name of the theme imported
                        var chart = echarts.init(document.getElementById('main'), 'vintage');
                        chart.setOption({
                            ...
                        });
                        &lt;/script&gt;

        include ./footer

block extra_js
    script(src="#{cdnThirdParty.prettifyJS}")
    script(src="#{cdnThirdParty.prettifyCSSHandlerJS}")
    script.
        document.getElementById('nav-download').className = 'active';

        $('pre').addClass('prettyprint');
        prettyPrint();

        $('.download-theme').click(function (e) {
            typeof _hmt === 'object' && _hmt && _hmt.push(['_trackEvent', 'download-theme', 'download-theme', '']);
            var ctx = this;
            if (ctx.origin === location.origin) {
                return;
            }
            // cross origin
            e.preventDefault();
            function onload(res) {
                var download = ctx.getAttribute('download');
                var url;
                if (res && res instanceof Blob) {
                    if (window.navigator.msSaveOrOpenBlob) {
                        if (window.navigator.msSaveOrOpenBlob(res, download)) {
                            return;
                        }
                    } else {
                        url = URL.createObjectURL(res);
                    }
                }
                var a = document.createElement('a');
                a.href = url || ctx.href;
                a.target = ctx.target;
                a.setAttribute('download', download);
                a.style.display = 'none';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                url && URL.revokeObjectURL(url);
            }
            if ((typeof URL !== 'undefined' && typeof URL.createObjectURL === 'function') || window.navigator.msSaveOrOpenBlob) {
                var xhr = new XMLHttpRequest();
                xhr.open('GET', ctx.href);
                xhr.responseType = 'blob';
                xhr.onload = function () {
                    onload(this.status === 200 && this.response);
                };
                xhr.onerror = function (e) {
                    console.error('failed to download theme', e);
                };
                xhr.send();
            } else {
                onload();
            }
            _hmt.push(['_trackEvent', 'download-theme', 'download-theme', '']);
        });