Widget:Zeitleiste: Unterschied zwischen den Versionen
Simon (Diskussion | Beiträge) (Markierung: 2017-Quelltext-Bearbeitung) |
Simon (Diskussion | Beiträge) (Markierung: 2017-Quelltext-Bearbeitung) |
||
Zeile 2: | Zeile 2: | ||
<script type="text/javascript" src="/alteskoeln/jquery.mousewheel-3.1.13.min.js"></script> | <script type="text/javascript" src="/alteskoeln/jquery.mousewheel-3.1.13.min.js"></script> | ||
<script type="text/javascript" src="https://cdn.histropedia.com/histropedia-1.2.0.min.js"></script> | <script type="text/javascript" src="https://cdn.histropedia.com/histropedia-1.2.0.min.js"></script> | ||
+ | |||
+ | <style type="text/css"> | ||
+ | .ak-timeline-widget { | ||
+ | display: flex; | ||
+ | } | ||
+ | |||
+ | .ak-timeline-article { | ||
+ | box-sizing: border-box; | ||
+ | width: 20vw; | ||
+ | min-width: 300px; | ||
+ | height: 500px; | ||
+ | margin: 0 0 0 2em; | ||
+ | padding: 1em; | ||
+ | border: 1px solid #ced4da; | ||
+ | border-radius: 4px; | ||
+ | box-shadow: 0px 3px 12px rgba(0,0,0,0.1); | ||
+ | overflow-y: auto; | ||
+ | |||
+ | font-family: Arial, sans-serif; | ||
+ | font-size: 16px; | ||
+ | color: #495057; | ||
+ | |||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .ak-timeline-widget_article-focussed .ak-timeline-article { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
<script> | <script> | ||
function parseDate(date) { | function parseDate(date) { | ||
Zeile 29: | Zeile 60: | ||
return null; | return null; | ||
} | } | ||
+ | } | ||
+ | |||
+ | function applyArticleToArticleElement(article, timelineArticleElement) { | ||
+ | timelineArticleElement.getElementsByClassName('ak-timeline-article-title').item(0).textContent = article.title; | ||
+ | timelineArticleElement.getElementsByClassName('ak-timeline-article-subtitle').item(0).textContent = article.subtitle; | ||
+ | |||
+ | // TODO | ||
+ | var dateRangeElement = timelineArticleElement.getElementsByClassName('ak-timeline-article-date-range').item(0); | ||
+ | //var fromDate = new Date(); | ||
+ | if (article.isToPresent) { | ||
+ | // TODO | ||
+ | } | ||
+ | |||
+ | // TODO | ||
+ | var detailsElement = timelineArticleElement.getElementsByClassName('ak-timeline-article-details').item(0); | ||
} | } | ||
Zeile 79: | Zeile 125: | ||
} | } | ||
− | var timelineContainerElement = document.getElementsByClassName('ak-timeline').item(0); | + | var timelineContainerElement = document.getElementsByClassName('ak-timeline-container').item(0); |
+ | var timelineWidgetElement = timelineContainerElement.parentElement; | ||
+ | var timelineArticleElement = timelineWidget.getElementsByClassName('ak-timeline-article').item(0); | ||
var zoom = timelineContainerElement.dataset.zoom; | var zoom = timelineContainerElement.dataset.zoom; | ||
if (zoom === '') { | if (zoom === '') { | ||
Zeile 94: | Zeile 142: | ||
zoom: { | zoom: { | ||
initial: zoom | initial: zoom | ||
+ | }, | ||
+ | onArticleClick: function(article) { | ||
+ | applyArticleToArticleElement(article.data, timelineArticleElement); | ||
+ | timelineWidgetElement.classList.add('ak-timeline-widget_article-focussed'); | ||
}, | }, | ||
onArticleDoubleClick: function(article) { | onArticleDoubleClick: function(article) { | ||
Zeile 104: | Zeile 156: | ||
}); | }); | ||
</script> | </script> | ||
− | <div class="ak-timeline" data-zoom="<!--{$zoom|escape:'html'}-->"></div> | + | |
+ | <div class="ak-timeline-widget"> | ||
+ | <div class="ak-timeline-container" data-zoom="<!--{$zoom|escape:'html'}-->"></div> | ||
+ | <div class="ak-timeline-article"> | ||
+ | <h3 class="ak-timeline-article-title"></h3> | ||
+ | <h4 class="ak-timeline-article-subtitle"></h4> | ||
+ | <div class="ak-timeline-article-date-range"></div> | ||
+ | <dl class="ak-timeline-article-details"></dl> | ||
+ | </div> | ||
+ | </div> |
Version vom 12. November 2020, 23:27 Uhr
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script type="text/javascript" src="/alteskoeln/jquery.mousewheel-3.1.13.min.js"></script> <script type="text/javascript" src="https://cdn.histropedia.com/histropedia-1.2.0.min.js"></script>
<style type="text/css"> .ak-timeline-widget { display: flex; }
.ak-timeline-article { box-sizing: border-box; width: 20vw; min-width: 300px; height: 500px; margin: 0 0 0 2em; padding: 1em; border: 1px solid #ced4da; border-radius: 4px; box-shadow: 0px 3px 12px rgba(0,0,0,0.1); overflow-y: auto;
font-family: Arial, sans-serif; font-size: 16px; color: #495057;
display: none; }
.ak-timeline-widget_article-focussed .ak-timeline-article { display: block; }
</style>
<script> function parseDate(date) { if (date.trim() === ) { return null; } var dateParts = date.split('-'); if (dateParts.length === 1) { return { year: parseInt(dateParts[0], 10), precision: Histropedia.PRECISION_YEAR } } else if (dateParts.length === 2) { return { year: parseInt(dateParts[0], 10), month: parseInt(dateParts[1], 10), precision: Histropedia.PRECISION_MONTH } } else if (dateParts.length === 3) { return { year: parseInt(dateParts[0], 10), month: parseInt(dateParts[1], 10), day: parseInt(dateParts[2], 10), precision: Histropedia.PRECISION_DAY } } else { return null; } }
function applyArticleToArticleElement(article, timelineArticleElement) { timelineArticleElement.getElementsByClassName('ak-timeline-article-title').item(0).textContent = article.title; timelineArticleElement.getElementsByClassName('ak-timeline-article-subtitle').item(0).textContent = article.subtitle;
// TODO var dateRangeElement = timelineArticleElement.getElementsByClassName('ak-timeline-article-date-range').item(0); //var fromDate = new Date(); if (article.isToPresent) { // TODO }
// TODO var detailsElement = timelineArticleElement.getElementsByClassName('ak-timeline-article-details').item(0); }
document.addEventListener('DOMContentLoaded', function(event) { var timelineDataTables = document.getElementsByClassName('ak-timeline-datatable'); var articles = []; var earliestYear = 2000; for (var i = 0; i < timelineDataTables.length; i++) { var dataTable = timelineDataTables.item(i); var rows = dataTable.querySelectorAll('tbody tr'); for (var j = 0; j < rows.length; j++) { var row = rows.item(j); var cells = row.children; if (cells.length) { if (cells.item(0).tagName.toLowerCase() === 'th') { continue; }
var article = { id: cells.item(0).innerText, starred: false }; if (cells.item(1).innerText.trim() !== ) { article.title = cells.item(1).innerText; } if (cells.item(2).innerText.trim() !== ) { article.subtitle = cells.item(2).innerText; } var from = parseDate(cells.item(3).innerText); if (from.year < earliestYear) { earliestYear = from.year; } article.from = from; var to = parseDate(cells.item(4).innerText); if (to != null) { article.to = to; } if (cells.item(5).innerText.trim() !== ) { article.imageUrl = cells.item(5).innerText; } if (cells.item(6).innerText.trim() !== ) { article.rank = cells.item(6).innerText; } if (cells.item(7).innerText.trim() !== ) { article.targetUrl = cells.item(7).innerText; } articles.push(article); } } }
var timelineContainerElement = document.getElementsByClassName('ak-timeline-container').item(0); var timelineWidgetElement = timelineContainerElement.parentElement; var timelineArticleElement = timelineWidget.getElementsByClassName('ak-timeline-article').item(0); var zoom = timelineContainerElement.dataset.zoom; if (zoom === ) { zoom = 34; } else { zoom = parseInt(zoom, 10); } var akTimeline = new Histropedia.Timeline(timelineContainerElement, { initialDate: { year: earliestYear - 5, month: 1, day: 1 }, zoom: { initial: zoom }, onArticleClick: function(article) { applyArticleToArticleElement(article.data, timelineArticleElement); timelineWidgetElement.classList.add('ak-timeline-widget_article-focussed'); }, onArticleDoubleClick: function(article) { if (article.data.targetUrl) { window.open(article.data.targetUrl, '_blank'); } } }); akTimeline.load(articles); }); </script>