Widget:Zeitleiste - Versionsgeschichte

Simon am 13. November 2020 um 18:11 Uhr

2020-11-13T18:11:57Z

← Nächstältere Version		Version vom 13. November 2020, 18:11 Uhr
Zeile 265:		Zeile 265:
	applyArticleToArticleElement(article.data, timelineArticleElement);		applyArticleToArticleElement(article.data, timelineArticleElement);
	timelineWidgetElement.classList.add('ak-timeline-widget_article-focussed');		timelineWidgetElement.classList.add('ak-timeline-widget_article-focussed');
	},
	~~onArticleDoubleClick: function(article) {~~
	~~if (article.data.targetUrl) {~~
	~~window.open(article.data.targetUrl, '_blank');~~
	}
	}		}
	});		});

Simon am 13. November 2020 um 18:08 Uhr

2020-11-13T18:08:55Z

← Nächstältere Version		Version vom 13. November 2020, 18:08 Uhr
Zeile 44:		Zeile 44:
	.ak-timeline-article-date-range {		.ak-timeline-article-date-range {
	font-style: italic;		font-style: italic;
			}

			.ak-timeline-article-details {
			margin-top: 1em;
	}		}

Simon am 13. November 2020 um 18:07 Uhr

2020-11-13T18:07:07Z

← Nächstältere Version		Version vom 13. November 2020, 18:07 Uhr
Zeile 170:		Zeile 170:
	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.~~childNodes~~;		var cells = row.children;
	if (cells.length) {		if (cells.length) {
	if (cells[0].tagName.toLowerCase() === 'th') {		if (cells[0].tagName.toLowerCase() === 'th') {

Simon am 13. November 2020 um 18:05 Uhr

2020-11-13T18:05:58Z

← Nächstältere Version		Version vom 13. November 2020, 18:05 Uhr
Zeile 219:		Zeile 219:
	article.details.push({		article.details.push({
	label: headerNames[k],		label: headerNames[k],
	value: cells[k].innerHTML;		value: cells[k].innerHTML
	});		});
	}		}

Simon am 13. November 2020 um 18:05 Uhr

2020-11-13T18:05:11Z

← Nächstältere Version		Version vom 13. November 2020, 18:05 Uhr
Zeile 90:		Zeile 90:

	function applyArticleToArticleElement(article, timelineArticleElement) {		function applyArticleToArticleElement(article, timelineArticleElement) {
	var titleElement = timelineArticleElement.getElementsByClassName('ak-timeline-article-title')~~.item(~~0);		var titleElement = timelineArticleElement.getElementsByClassName('ak-timeline-article-title')[0];
	if (article.title) {		if (article.title) {
	titleElement.textContent = article.title;		titleElement.textContent = article.title;
Zeile 96:		Zeile 96:
	titleElement.textContent = '';		titleElement.textContent = '';
	}		}
	var subtitleElement = timelineArticleElement.getElementsByClassName('ak-timeline-article-subtitle')~~.item(~~0);		var subtitleElement = timelineArticleElement.getElementsByClassName('ak-timeline-article-subtitle')[0];
	if (article.subtitle) {		if (article.subtitle) {
	subtitleElement.textContent = article.subtitle;		subtitleElement.textContent = article.subtitle;
Zeile 103:		Zeile 103:
	}		}

	var dateRangeElement = timelineArticleElement.getElementsByClassName('ak-timeline-article-date-range')~~.item(~~0);		var dateRangeElement = timelineArticleElement.getElementsByClassName('ak-timeline-article-date-range')[0];
	var dateString = renderDate(article.from);		var dateString = renderDate(article.from);
	if (article.isToPresent) {		if (article.isToPresent) {
Zeile 112:		Zeile 112:
	dateRangeElement.textContent = dateString;		dateRangeElement.textContent = dateString;

	~~// TODO~~		var detailsElement = timelineArticleElement.getElementsByClassName('ak-timeline-article-details')[0];
	var detailsElement = timelineArticleElement.getElementsByClassName('ak-timeline-article-details').~~item~~(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);
			}
			}
	}		}

Zeile 119:		Zeile 129:
	var style = window.getComputedStyle ? getComputedStyle(element, null) : element.currentStyle;		var style = window.getComputedStyle ? getComputedStyle(element, null) : element.currentStyle;
	return element.offsetWidth + (parseInt(style.marginLeft) \|\| 0) + (parseInt(style.marginRight) \|\| 0);		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;
	}		}

Zeile 148:		Zeile 167:
	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.childNodes;
	if (cells.length) {		if (cells.length) {
	if (cells~~.item(~~0).tagName.toLowerCase() === 'th') {		if (cells[0].tagName.toLowerCase() === 'th') {
	continue;		continue;
	}		}

	var article = {		var article = {
	id: cells~~.item(~~0).innerText,		id: cells[0].innerText,
	starred: false		starred: false
	};		};

	if (cells~~.item(~~1).innerText.trim() !== '') {		if (cells[1].innerText.trim() !== '') {
	article.title = cells~~.item(~~1).innerText;		article.title = cells[1].innerText;
	}		}

	if (cells~~.item(~~2).innerText.trim() !== '') {		if (cells[2].innerText.trim() !== '') {
	article.subtitle = cells~~.item(~~2).innerText;		article.subtitle = cells[2].innerText;
	}		}

	var from = parseDate(cells~~.item(~~3).innerText);		var from = parseDate(cells[3].innerText);
	if (from.year < earliestYear) {		if (from.year < earliestYear) {
	earliestYear = from.year;		earliestYear = from.year;
Zeile 175:		Zeile 195:
	article.from = from;		article.from = from;

	var toText = cells~~.item(~~4).innerText;		var toText = cells[4].innerText;
	if (toText.trim() === 'heute') {		if (toText.trim() === 'heute') {
	article.isToPresent = true;		article.isToPresent = true;
Zeile 185:		Zeile 205:
	}		}

	if (cells~~.item(~~5).innerText.trim() !== '') {		if (cells[5].innerText.trim() !== '') {
	article.imageUrl = cells~~.item(~~5).innerText;		article.imageUrl = cells[5].innerText;
	}		}

	if (cells~~.item(~~6).innerText.trim() !== '') {		if (cells[6].innerText.trim() !== '') {
	article.rank = cells~~.item(~~6).innerText;		article.rank = cells[6].innerText;
	}		}

	if (cells.~~item(~~7).~~innerText~~.~~trim~~(~~) !== ''~~) {		if (cells.length > 7) {
	article.~~targetUrl =~~ cells.~~item(7~~)~~.innerText~~;		article.details = [];
			for (var k = 7; k < cells.length; k++) {
			if (k < headerNames.length) {
			article.details.push({
			label: headerNames[k],
			value: cells[k].innerHTML;
			});
			}
			}
	}		}

Zeile 202:		Zeile 230:
	}		}

	var timelineContainerElement = document.getElementsByClassName('ak-timeline-container')~~.item(~~0);		var timelineContainerElement = document.getElementsByClassName('ak-timeline-container')[0];
	var timelineWidgetElement = timelineContainerElement.parentElement;		var timelineWidgetElement = timelineContainerElement.parentElement;
	var timelineArticleElement = timelineWidgetElement.getElementsByClassName('ak-timeline-article')~~.item(~~0);		var timelineArticleElement = timelineWidgetElement.getElementsByClassName('ak-timeline-article')[0];

	var timelineWidth = 800;		var timelineWidth = 800;

Simon am 13. November 2020 um 17:30 Uhr

2020-11-13T17:30:58Z

← Nächstältere Version		Version vom 13. November 2020, 17:30 Uhr
Zeile 160:		Zeile 160:
	starred: false		starred: false
	};		};

	if (cells.item(1).innerText.trim() !== '') {		if (cells.item(1).innerText.trim() !== '') {
	article.title = cells.item(1).innerText;		article.title = cells.item(1).innerText;
	}		}

	if (cells.item(2).innerText.trim() !== '') {		if (cells.item(2).innerText.trim() !== '') {
	article.subtitle = cells.item(2).innerText;		article.subtitle = cells.item(2).innerText;
	}		}

	var from = parseDate(cells.item(3).innerText);		var from = parseDate(cells.item(3).innerText);
	if (from.year < earliestYear) {		if (from.year < earliestYear) {
Zeile 171:		Zeile 174:
	}		}
	article.from = from;		article.from = from;
	var to = ~~parseDate(~~cells.item(4).innerText);
	if (to != null) {		var toText = cells.item(4).innerText;
	article.to = to;		if (toText.trim() === 'heute') {
			article.isToPresent = true;
			} else {
			var to = parseDate(toText);
			if (to != null) {
			article.to = to;
			}
	}		}

	if (cells.item(5).innerText.trim() !== '') {		if (cells.item(5).innerText.trim() !== '') {
	article.imageUrl = cells.item(5).innerText;		article.imageUrl = cells.item(5).innerText;
	}		}

	if (cells.item(6).innerText.trim() !== '') {		if (cells.item(6).innerText.trim() !== '') {
	article.rank = cells.item(6).innerText;		article.rank = cells.item(6).innerText;
	}		}

	if (cells.item(7).innerText.trim() !== '') {		if (cells.item(7).innerText.trim() !== '') {
	article.targetUrl = cells.item(7).innerText;		article.targetUrl = cells.item(7).innerText;
	}		}

	articles.push(article);		articles.push(article);
	}		}

Simon am 12. November 2020 um 23:31 Uhr

2020-11-12T23:31:11Z

← Nächstältere Version		Version vom 12. November 2020, 23:31 Uhr
Zeile 12:		Zeile 12:
	width: 20vw;		width: 20vw;
	min-width: 300px;		min-width: 300px;
	height: ~~600px~~;		height: 500px;
	margin: 0 0 0 2em;		margin: 0 0 0 2em;
	padding: 1em;		padding: 1em;
Zeile 208:		Zeile 208:
	var akTimeline = new Histropedia.Timeline(timelineContainerElement, {		var akTimeline = new Histropedia.Timeline(timelineContainerElement, {
	width: timelineWidth,		width: timelineWidth,
	height: ~~600~~,		height: 500,
	initialDate: {		initialDate: {
	year: earliestYear - 5,		year: earliestYear - 5,

Simon am 12. November 2020 um 23:30 Uhr

2020-11-12T23:30:02Z

@@ Zeile 12: / Zeile 12: @@
 	width: 20vw;
 	min-width: 300px;
-	height: 500px;
+	height: 600px;
 	margin: 0 0 0 2em;
 	padding: 1em;
@@ Zeile 114: / Zeile 114: @@
 		// TODO
 		var detailsElement = timelineArticleElement.getElementsByClassName('ak-timeline-article-details').item(0);
+	}
@@ Zeile 167: / Zeile 192: @@
 		var timelineWidgetElement = timelineContainerElement.parentElement;
 		var timelineArticleElement = timelineWidgetElement.getElementsByClassName('ak-timeline-article').item(0);
 		var zoom = timelineContainerElement.dataset.zoom;
 		if (zoom === '') {
@@ Zeile 173: / Zeile 205: @@
 			zoom = parseInt(zoom, 10);
+		}
 		var akTimeline = new Histropedia.Timeline(timelineContainerElement, {
 			initialDate: {
 				year: earliestYear - 5,

Simon am 12. November 2020 um 23:06 Uhr

2020-11-12T23:06:55Z

← Nächstältere Version		Version vom 12. November 2020, 23:06 Uhr
Zeile 23:		Zeile 23:
	font-size: 16px;		font-size: 16px;
	color: #495057;		color: #495057;
			}

			.ak-timeline-article-content {
	display: none;		display: none;
	}		}

	.ak-timeline-widget_article-focussed .ak-timeline-article {		.ak-timeline-widget_article-focussed .ak-timeline-article-content {
	display: block;		display: block;
			}

			.ak-timeline-widget_article-focussed .ak-timeline-explanation {
			display: none;
	}		}

Zeile 193:		Zeile 199:
	<div class="ak-timeline-container" data-zoom="<!--{$zoom\|escape:'html'}-->"></div>		<div class="ak-timeline-container" data-zoom="<!--{$zoom\|escape:'html'}-->"></div>
	<div class="ak-timeline-article">		<div class="ak-timeline-article">
	<h3 class="ak-timeline-article-title"></h3>		<div class="ak-timeline-article-content">
	<h4 class="ak-timeline-article-subtitle"></h4>		<h3 class="ak-timeline-article-title"></h3>
	<div class="ak-timeline-article-date-range"></div>		<h4 class="ak-timeline-article-subtitle"></h4>
	<dl class="ak-timeline-article-details"></dl>		<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>
	</div>		</div>

Simon am 12. November 2020 um 21:49 Uhr

2020-11-12T21:49:19Z

← Nächstältere Version		Version vom 12. November 2020, 21:49 Uhr
Zeile 29:		Zeile 29:
	.ak-timeline-widget_article-focussed .ak-timeline-article {		.ak-timeline-widget_article-focussed .ak-timeline-article {
	display: block;		display: block;
			}

			.ak-timeline-article h3,
			.ak-timeline-article h4 {
			padding: 0;
	}		}