domemory

domemory

by michaelschmid

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Domemory</title>

	<!--<script src="/scripts/require.js" data-main="/scripts/me/router.js"></script>-->
	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

	<link href="CSS/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">

	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-cloud/1.2.5/d3.layout.cloud.min.js"></script>

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

	<script...

CSS

/* The icons
                    -------------------------------------------------------------- */

.tree-list {
	padding-left: 0;
	list-style-type: none;
}

	.tree-list ul {
		list-style-type: none;
		border-left: 1px dashed #ddd;
		margin-left: 10px;
	}

		/* all lis */
		.tree-list ul li {
			padding-top: 0.4em;
			padding-bottom: 0.2em
		}



	/** Root items **/
	.tree-list li {
		/*
		padding-top: 0.5em;
		padding-bottom: 0.9em;
		*/
		padding-top:25px;
		line-height:25px;
		vertical-align: text-bottom;
		font-size: 20px;
	}

		/** Root items **/
		.tree-list li div {
			vertical-align: text-bottom;
			margin-top:0.3em;
			font-weight: normal;
			font-size: 16px;
		}


/* 2nd level */
ul.tree-list li ul li {
	/*
		padding-top: 0.2em;
		padding-bottom: 0.2em;
	*/
	font-weight: normal;
	font-size: 16px;
	color: black;
}

	/* 3rd level and deeper */
	ul.tree-list li ul li ul li {
		font-weight: normal;
		font-size: 16px;
	}


.tree-list-none li:before {
	margin-right: -5px;
	height: 22px;
	vertical-align: top;
	content: "";
}

.tree-list-info li:before {
	margin-right: 10px;
	height: 22px;
	vertical-align: top;
	color: gray;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f141";
}

.tree-list-directory li:before {
	margin-right: 10px;
	height: 22px;
	vertical-align: top;
	color: gray;
	font-family: "Font Awesome 5 Free";
	font-weight: 400;
	content: "\f07c";
}


.tree-list-none li.nochildren:before,
.tree-list-info li.nochildren:before,
.tree-list-directory li.nochildren:before {
	font-size: 5px;
	margin-left: -15px;4
	color: gray;
	background-repeat: no-repeat;
	font-family: "Font Awesome 5 Free";
	font-weight: 400;
	content: "\f111";
}




.tree-list > li {
	font-size: 1.5rem;
	vertical-align: middle;
	background-repeat: no-repeat;
}
	/* Root node without children : no icon and no marging shift */
	.tree-list > li.nochildren {

	}

	.tree-list > li.nochildren:before {
		padding-left: 0;
		margin-left: 0;
		content: "";
	}

JavaScript

var data = {
	"erstellen" : {
		"name": "Kreativ IT", "description":"Selbst generieren, ändern, anpassen.",
		"children": [
			{
				"name": "Blog erstellen", "open": 0, "description": "", "children": [
					{	"name": "Möglichkeiten und Überblick" },
					{	"name": "Content Management Systems" },
					{	"name": "Hosting" }
				]
			},
			{
				"name": "Web Site erstellen", "open": 0, "description": "", "children": [
					{
					"name": "HTML", "Motivation und Zielsetzung": [
						  {	"name": "Erarbeitung von Zielen" }, 
						  {	"name": "Evaluierung von Möglichkeiten" },
						  {	"name": "Durchführungsplan erstellen und starten" }
						],
						"name": "Web Design", "children": [
						  {	"name": "Gestaltung von Elementen wie Menüs" }, 
						  {	"name": "Verwenden von Web Site Templates", "children":  [
								  {	"name": "andpassen an die eigenen Bedürfnisse" }
							] },
						],
						"name": "HTML Kenntnisse anwenden", "children": [
						  {	"name": "Tabellen" }, 
						  {	"name": "Listen" },
						],
						"name": "HTML", "Publizieren": [
						  {	"name": "Hoster suchen." }, 
						  {	"name": "Upload der Source." }
						]
					}
				]
			},
			{

				"name": "Daten und Datenbanken", "open": 0, "description": "Umgang und verständnis mit verschiedenen Systemen der Datenspeicherung", "children": [
					{
						"name": "SQL", "children": [
						  { "name": "Abfragen erstelltn" }
						]
					},
				{
						"name": "Javascript", "children": [
						  { "name": "Abfragen erstelltn" }
						]
			}
				]
			},
			{
				"name": "Programmieren", "open": 0, "description": "", "children": [
					{
						"name": "Digitale ID", "children": [
						  { "name": "Digitale ID" }
						]
					}
				]
			},
				{
				"name": "Online Kompententnachweise", "open": 0, "description": "Beobachtung und Optmierung der persönlichen Arbeitsweise.", "children": [
					{ "name": "Themen Blog" }
				]
			}]
		},
				"anwenden" : {
					"name": "IT effizient(er) anwenden",...