| var charts = []; |
| |
| $(document).ready(function() { |
| |
| // chart type as category |
| var $container = $('#explore-container .chart-list-panel'); |
| for (var type in CHART_TYPES) { |
| $container |
| .append( |
| '<div id="chart-type-' + type + '">' |
| + '<h3 class="chart-type-head">' + CHART_TYPES[type] + '</h3>' |
| + '<div class="row" id="chart-row-' + type + '"></div>' |
| + '</div>'); |
| } |
| |
| // load charts |
| for (var eid = 0, elen = EXAMPLES.length; eid < elen; ++eid) { |
| // show title if exists |
| var title = EXAMPLES[eid].title || '未命名图表'; |
| var subtitle = EXAMPLES[eid].subtitle || '点击查看详情'; |
| |
| // append dom element |
| var $row = $('<div class="col-lg-3 col-md-4 col-sm-6"></div>'); |
| var $chart = $('<div class="chart"></div>'); |
| $('#chart-row-' + EXAMPLES[eid].type).append($row.append($chart)); |
| |
| $link = $('<a class="chart-link" href="demo.html#' |
| + EXAMPLES[eid].id + '"></a>'); |
| $chart.append($link); |
| $link.append('<h4 class="chart-title">' + title + '</h4>') |
| |
| // load chart image |
| $chartArea = $('<img class="chart-area" data-original="' + GALLERY_THUMB_PATH |
| + EXAMPLES[eid].id + '.png" />'); |
| $link.append($chartArea); |
| } |
| |
| window.addEventListener('hashchange', function () { |
| // move window down at the height of navbar so that title will not |
| // be hidden when goes to hash tag |
| scrollBy(0, -80); |
| |
| // changes highlighting as hash tag changes |
| var names = location.hash.split('-'); |
| if (names.length === 3) { |
| $('#left-chart-nav li').removeClass('active'); |
| $('#left-chart-nav-' + names[2]).parent('li').addClass('active'); |
| } |
| }); |
| |
| // highlight the first chart in chart navbar |
| $('#left-chart-nav li').first().addClass('active'); |
| |
| // Lazy load |
| $('.chart-area').lazyload(); |
| }); |