Widget:Zeitleiste: Unterschied zwischen den Versionen
Simon (Diskussion | Beiträge) (Markierung: 2017-Quelltext-Bearbeitung) |
Simon (Diskussion | Beiträge) (Markierung: 2017-Quelltext-Bearbeitung) |
||
(16 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
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; | ||
+ | } | ||
+ | |||
+ | .ak-timeline-article-content { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .ak-timeline-widget_article-focussed .ak-timeline-article-content { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .ak-timeline-widget_article-focussed .ak-timeline-explanation { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .ak-timeline-article h3, | ||
+ | .ak-timeline-article h4 { | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .ak-timeline-article-date-range { | ||
+ | font-style: italic; | ||
+ | } | ||
+ | |||
+ | .ak-timeline-article-details { | ||
+ | margin-top: 1em; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
<script> | <script> | ||
function parseDate(date) { | function parseDate(date) { | ||
Zeile 29: | Zeile 79: | ||
return null; | return null; | ||
} | } | ||
+ | } | ||
+ | |||
+ | function renderDate(date) { | ||
+ | if (date.precision === Histropedia.PRECISION_DAY) { | ||
+ | return '' + date.day + '.' + date.month + '.' + date.year; | ||
+ | } else if (date.precision === Histropedia.PRECISION_MONTH) { | ||
+ | return '' + date.month + '.' + date.year; | ||
+ | } else if (date.precision === Histropedia.PRECISION_YEAR) { | ||
+ | return '' + date.year; | ||
+ | } else { | ||
+ | return ''; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function applyArticleToArticleElement(article, timelineArticleElement) { | ||
+ | var titleElement = timelineArticleElement.getElementsByClassName('ak-timeline-article-title')[0]; | ||
+ | if (article.title) { | ||
+ | titleElement.textContent = article.title; | ||
+ | } else { | ||
+ | titleElement.textContent = ''; | ||
+ | } | ||
+ | var subtitleElement = timelineArticleElement.getElementsByClassName('ak-timeline-article-subtitle')[0]; | ||
+ | if (article.subtitle) { | ||
+ | subtitleElement.textContent = article.subtitle; | ||
+ | } else { | ||
+ | subtitleElement.textContent = ''; | ||
+ | } | ||
+ | |||
+ | var dateRangeElement = timelineArticleElement.getElementsByClassName('ak-timeline-article-date-range')[0]; | ||
+ | var dateString = renderDate(article.from); | ||
+ | if (article.isToPresent) { | ||
+ | dateString += ' - heute'; | ||
+ | } else if (article.to) { | ||
+ | dateString += ' - ' + renderDate(article.to); | ||
+ | } | ||
+ | dateRangeElement.textContent = dateString; | ||
+ | |||
+ | var detailsElement = timelineArticleElement.getElementsByClassName('ak-timeline-article-details')[0]; | ||
+ | detailsElement.innerHTML = ''; | ||
+ | if (article.details) { | ||
+ | for (var i = 0; i < article.details.length; i++) { | ||
+ | var dt = document.createElement('dt'); | ||
+ | dt.textContent = article.details[i].label; | ||
+ | detailsElement.insertAdjacentElement('beforeend', dt); | ||
+ | var dd = document.createElement('dd'); | ||
+ | dd.innerHTML = article.details[i].value; | ||
+ | detailsElement.insertAdjacentElement('beforeend', dd); | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function getOuterWidth(element) { | ||
+ | var style = window.getComputedStyle ? getComputedStyle(element, null) : element.currentStyle; | ||
+ | return element.offsetWidth + (parseInt(style.marginLeft) || 0) + (parseInt(style.marginRight) || 0); | ||
+ | } | ||
+ | |||
+ | function getHeaderNames(tableElement) { | ||
+ | var headerElements = tableElement.querySelectorAll('tbody tr th'); | ||
+ | var headerNames = []; | ||
+ | for (var i = 0; i < headerElements.length; i++) { | ||
+ | headerNames.push(headerElements[i].innerText.trim()); | ||
+ | } | ||
+ | return headerNames; | ||
+ | } | ||
+ | |||
+ | // Polyfill "Element.closest" | ||
+ | if (!Element.prototype.matches) { | ||
+ | Element.prototype.matches = | ||
+ | Element.prototype.msMatchesSelector || | ||
+ | Element.prototype.webkitMatchesSelector; | ||
+ | } | ||
+ | if (!Element.prototype.closest) { | ||
+ | Element.prototype.closest = function(s) { | ||
+ | var el = this; | ||
+ | |||
+ | do { | ||
+ | if (Element.prototype.matches.call(el, s)) { | ||
+ | return el; | ||
+ | } | ||
+ | el = el.parentElement || el.parentNode; | ||
+ | } while (el !== null && el.nodeType === 1); | ||
+ | return null; | ||
+ | }; | ||
} | } | ||
document.addEventListener('DOMContentLoaded', function(event) { | document.addEventListener('DOMContentLoaded', function(event) { | ||
− | |||
var timelineDataTables = document.getElementsByClassName('ak-timeline-datatable'); | var timelineDataTables = document.getElementsByClassName('ak-timeline-datatable'); | ||
var articles = []; | var articles = []; | ||
Zeile 39: | Zeile 171: | ||
var dataTable = timelineDataTables.item(i); | var dataTable = timelineDataTables.item(i); | ||
var rows = dataTable.querySelectorAll('tbody tr'); | var rows = dataTable.querySelectorAll('tbody tr'); | ||
+ | var headerNames = getHeaderNames(dataTable); | ||
for (var j = 0; j < rows.length; j++) { | for (var j = 0; j < rows.length; j++) { | ||
var row = rows.item(j); | var row = rows.item(j); | ||
var cells = row.children; | var cells = row.children; | ||
if (cells.length) { | if (cells.length) { | ||
− | if (cells | + | if (cells[0].tagName.toLowerCase() === 'th') { |
continue; | continue; | ||
} | } | ||
var article = { | var article = { | ||
− | id: cells | + | id: cells[0].innerText, |
starred: false | starred: false | ||
}; | }; | ||
− | if (cells | + | |
− | article.title = cells | + | if (cells[1].innerText.trim() !== '') { |
+ | article.title = cells[1].innerText; | ||
} | } | ||
− | if (cells | + | |
− | article.subtitle = cells | + | if (cells[2].innerText.trim() !== '') { |
+ | article.subtitle = cells[2].innerText; | ||
} | } | ||
− | var from = parseDate(cells | + | |
+ | var from = parseDate(cells[3].innerText); | ||
if (from.year < earliestYear) { | if (from.year < earliestYear) { | ||
earliestYear = from.year; | earliestYear = from.year; | ||
} | } | ||
article.from = from; | article.from = from; | ||
− | var | + | |
− | + | var toText = cells[4].innerText; | |
− | + | if (toText.trim() === 'heute') { | |
+ | article.isToPresent = true; | ||
+ | } else { | ||
+ | var to = parseDate(toText); | ||
+ | if (to != null) { | ||
+ | article.to = to; | ||
+ | } | ||
} | } | ||
− | if (cells | + | |
− | article.imageUrl = cells | + | if (cells[5].innerText.trim() !== '') { |
+ | article.imageUrl = cells[5].innerText; | ||
} | } | ||
− | if (cells | + | |
− | article.rank = cells | + | if (cells[6].innerText.trim() !== '') { |
+ | article.rank = cells[6].innerText; | ||
} | } | ||
− | if (cells. | + | |
− | + | if (cells.length > 7) { | |
+ | article.details = []; | ||
+ | for (var k = 7; k < cells.length; k++) { | ||
+ | if (k < headerNames.length) { | ||
+ | article.details.push({ | ||
+ | label: headerNames[k], | ||
+ | value: cells[k].innerHTML | ||
+ | }); | ||
+ | } | ||
+ | } | ||
} | } | ||
+ | |||
articles.push(article); | articles.push(article); | ||
} | } | ||
Zeile 80: | Zeile 234: | ||
} | } | ||
− | var akTimeline = new Histropedia.Timeline( | + | var timelineContainerElement = document.getElementsByClassName('ak-timeline-container')[0]; |
+ | var timelineWidgetElement = timelineContainerElement.parentElement; | ||
+ | var timelineArticleElement = timelineWidgetElement.getElementsByClassName('ak-timeline-article')[0]; | ||
+ | |||
+ | var timelineWidth = 800; | ||
+ | var mainGridElement = timelineContainerElement.closest('ak-main-grid'); | ||
+ | if (mainGridElement) { | ||
+ | timelineWidth = mainGridElement.clientWidth - getOuterWidth(timelineArticleElement); | ||
+ | } | ||
+ | |||
+ | var zoom = timelineContainerElement.dataset.zoom; | ||
+ | if (zoom === '') { | ||
+ | zoom = 34; | ||
+ | } else { | ||
+ | zoom = parseInt(zoom, 10); | ||
+ | } | ||
+ | |||
+ | var akTimeline = new Histropedia.Timeline(timelineContainerElement, { | ||
+ | width: timelineWidth, | ||
+ | height: 500, | ||
initialDate: { | initialDate: { | ||
year: earliestYear - 5, | year: earliestYear - 5, | ||
month: 1, | month: 1, | ||
day: 1 | day: 1 | ||
+ | }, | ||
+ | zoom: { | ||
+ | initial: zoom | ||
}, | }, | ||
onArticleClick: function(article) { | onArticleClick: function(article) { | ||
− | + | applyArticleToArticleElement(article.data, timelineArticleElement); | |
− | + | timelineWidgetElement.classList.add('ak-timeline-widget_article-focussed'); | |
− | |||
} | } | ||
}); | }); | ||
Zeile 95: | Zeile 270: | ||
}); | }); | ||
</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"> | ||
+ | <div class="ak-timeline-article-content"> | ||
+ | <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 class="ak-timeline-explanation"> | ||
+ | <p>Klicken Sie ein Element an, um hier Details darüber zu lesen oder es verschieben zu können.</p> | ||
+ | <p>Mit dem Mausrad können Sie in der Zeitleiste zoomen, durch Drag&Drop können Sie die Zeitleiste verschieben.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> |
Aktuelle Version vom 13. November 2020, 20:11 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; }
.ak-timeline-article-content { display: none; }
.ak-timeline-widget_article-focussed .ak-timeline-article-content { display: block; }
.ak-timeline-widget_article-focussed .ak-timeline-explanation { display: none; }
.ak-timeline-article h3, .ak-timeline-article h4 { padding: 0; }
.ak-timeline-article-date-range { font-style: italic; }
.ak-timeline-article-details { margin-top: 1em; }
</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 renderDate(date) { if (date.precision === Histropedia.PRECISION_DAY) { return + date.day + '.' + date.month + '.' + date.year; } else if (date.precision === Histropedia.PRECISION_MONTH) { return + date.month + '.' + date.year; } else if (date.precision === Histropedia.PRECISION_YEAR) { return + date.year; } else { return ; } }
function applyArticleToArticleElement(article, timelineArticleElement) { var titleElement = timelineArticleElement.getElementsByClassName('ak-timeline-article-title')[0]; if (article.title) { titleElement.textContent = article.title; } else { titleElement.textContent = ; } var subtitleElement = timelineArticleElement.getElementsByClassName('ak-timeline-article-subtitle')[0]; if (article.subtitle) { subtitleElement.textContent = article.subtitle; } else { subtitleElement.textContent = ; }
var dateRangeElement = timelineArticleElement.getElementsByClassName('ak-timeline-article-date-range')[0]; var dateString = renderDate(article.from); if (article.isToPresent) { dateString += ' - heute'; } else if (article.to) { dateString += ' - ' + renderDate(article.to); } dateRangeElement.textContent = dateString;
var detailsElement = timelineArticleElement.getElementsByClassName('ak-timeline-article-details')[0]; detailsElement.innerHTML = ; if (article.details) { for (var i = 0; i < article.details.length; i++) { var dt = document.createElement('dt'); dt.textContent = article.details[i].label; detailsElement.insertAdjacentElement('beforeend', dt); var dd = document.createElement('dd'); dd.innerHTML = article.details[i].value; detailsElement.insertAdjacentElement('beforeend', dd); } } }
function getOuterWidth(element) { var style = window.getComputedStyle ? getComputedStyle(element, null) : element.currentStyle; return element.offsetWidth + (parseInt(style.marginLeft) || 0) + (parseInt(style.marginRight) || 0); }
function getHeaderNames(tableElement) { var headerElements = tableElement.querySelectorAll('tbody tr th'); var headerNames = []; for (var i = 0; i < headerElements.length; i++) { headerNames.push(headerElements[i].innerText.trim()); } return headerNames; }
// Polyfill "Element.closest" if (!Element.prototype.matches) { Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; } if (!Element.prototype.closest) { Element.prototype.closest = function(s) { var el = this;
do { if (Element.prototype.matches.call(el, s)) { return el; } el = el.parentElement || el.parentNode; } while (el !== null && el.nodeType === 1); return null; }; }
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'); var headerNames = getHeaderNames(dataTable); for (var j = 0; j < rows.length; j++) { var row = rows.item(j); var cells = row.children; if (cells.length) { if (cells[0].tagName.toLowerCase() === 'th') { continue; }
var article = { id: cells[0].innerText, starred: false };
if (cells[1].innerText.trim() !== ) { article.title = cells[1].innerText; }
if (cells[2].innerText.trim() !== ) { article.subtitle = cells[2].innerText; }
var from = parseDate(cells[3].innerText); if (from.year < earliestYear) { earliestYear = from.year; } article.from = from;
var toText = cells[4].innerText; if (toText.trim() === 'heute') { article.isToPresent = true; } else { var to = parseDate(toText); if (to != null) { article.to = to; } }
if (cells[5].innerText.trim() !== ) { article.imageUrl = cells[5].innerText; }
if (cells[6].innerText.trim() !== ) { article.rank = cells[6].innerText; }
if (cells.length > 7) { article.details = []; for (var k = 7; k < cells.length; k++) { if (k < headerNames.length) { article.details.push({ label: headerNames[k], value: cells[k].innerHTML }); } } }
articles.push(article); } } }
var timelineContainerElement = document.getElementsByClassName('ak-timeline-container')[0]; var timelineWidgetElement = timelineContainerElement.parentElement; var timelineArticleElement = timelineWidgetElement.getElementsByClassName('ak-timeline-article')[0];
var timelineWidth = 800; var mainGridElement = timelineContainerElement.closest('ak-main-grid'); if (mainGridElement) { timelineWidth = mainGridElement.clientWidth - getOuterWidth(timelineArticleElement); }
var zoom = timelineContainerElement.dataset.zoom; if (zoom === ) { zoom = 34; } else { zoom = parseInt(zoom, 10); }
var akTimeline = new Histropedia.Timeline(timelineContainerElement, { width: timelineWidth, height: 500, 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'); } }); akTimeline.load(articles); }); </script>