[TASK] PCCoE-Hacktoberfest-21#32 timeline

Implement timeline component first start with js for some helper functions
Juan-A-Jimenez · Oct 7, 2021 · cade656 · cade656
1 parent d610a05
commit cade656
Show file tree

Hide file tree

Showing 4 changed files with 206 additions and 0 deletions.
diff --git a/Timeline/timeline.css b/Timeline/timeline.css
@@ -0,0 +1,88 @@
+.timeline {
+	position: relative;
+	width: 100%;
+	background: whitesmoke;
+	height: 525px;
+	overflow: hidden;
+}
+
+.timeline-wrapper {
+	box-sizing: content-box;
+	height: 100%;
+	overflow-y: scroll;
+	padding-top: 30px;
+}
+
+.timeline:after {
+	content: '';
+	position: absolute;
+	background-color: black;
+	width: 1px;
+	height: 100%;
+	/* minus scrollbar */
+	left: calc(50% - 7px);
+	top: 0;
+}
+
+.timeline__row {
+	position: relative;
+	display: block;
+	height: 100px;
+	margin-bottom: 20px;
+}
+
+.timeline__row:after {
+	content: '';
+	position: absolute;
+	background-color: black;
+	display: block;
+	width: 20px;
+	height: 20px;
+	border-radius: 25px;
+	top: calc(50% - 10px);
+	left: calc(50% - 10px);
+}
+
+.timeline__box {
+	position: absolute;
+	border: solid 1px black;
+	width: 35%;
+	height: 100%;
+	padding: 10px;
+}
+
+.timeline__row:nth-child(odd) .timeline__box {
+	left: 5%;
+}
+
+.timeline__row:nth-child(even) .timeline__box {
+	right: 5%;
+}
+
+.timeline__row:nth-child(even) .timeline__box:after,
+.timeline__row:nth-child(odd) .timeline__box:after {
+	content: '';
+	position: absolute;
+	display: block;
+	background: black;
+	width: 30%;
+	height: 1px;
+	top: 50%;
+}
+
+.timeline__row:nth-child(odd) .timeline__box:after {
+	left: 100%;
+}
+
+.timeline__row:nth-child(even) .timeline__box:after {
+	right: 100%;
+}
+
+.timeline__year {
+	background: darkkhaki;
+	position: absolute;
+	top: -20px;
+	left: 20px;
+	padding: 2px 3px;
+	border-radius: 5px;
+}
diff --git a/Timeline/timeline.html b/Timeline/timeline.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<title></title>
+		<meta name="description" content="" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="stylesheet" type="text/css" href="./timeline.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 your css stylesheets below  -->
+	</head>
+	<body>
+
+		<h1>Timeline sample</h1>
+
+		<div class="timeline">
+			<div class="timeline-wrapper">
+				<!-- Example of structure. THe content is created in JavaScript
+				<div class="timeline__row">
+					<div class="timeline__box">
+						<div class="timeline__year">
+							1990
+						</div>
+						<div class="timeline__content">
+							Lorem ipsum
+						</div>
+					</div>
+				</div>
+				-->
+			</div>
+		</div>
+
+
+		<script
+			src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+			integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
+			crossorigin="anonymous"
+		></script>
+
+		<!--   Link your js files below   -->
+		<script src="timeline.js"></script>
+	</body>
+</html>
diff --git a/Timeline/timeline.js b/Timeline/timeline.js
@@ -0,0 +1,59 @@
+init();
+
+function init() {
+    const timelineElement = document.querySelector('.timeline');
+    const timelineWrapper = timelineElement.querySelector('.timeline-wrapper');
+    fillTestData(timelineWrapper);
+
+    getAllElements(timelineWrapper).forEach(function(value) {
+        if (isElementFullyVisible(timelineElement, value)) {
+            return;
+        }
+        value.style.visibility = 'hidden';
+    });
+
+    timelineElement.addEventListener('scroll', function(e) {
+        getAllElements(timelineWrapper).forEach(function(value) {
+            console.log(isElementFullyVisible(timelineElement, value));
+        });
+    });
+}
+
+function fillTestData(timelineWrapper) {
+    const testData = new Map();
+
+    testData.set('1900', 'In the Year 1900 lorem ipsum...')
+    testData.set('1910', 'In the Year 1910 lorem ipsum...')
+    testData.set('1915', 'In the Year 1915 lorem ipsum...')
+    testData.set('1925', 'In the Year 1925 lorem ipsum...')
+    testData.set('1930', 'In the Year 1930 lorem ipsum...')
+    testData.set('1945', 'In the Year 1945 lorem ipsum...')
+
+    testData.forEach(function(value, key) {
+        timelineWrapper.insertAdjacentHTML('beforeend', `
+            <div class="timeline__row">
+                <div class="timeline__box">
+                    <div class="timeline__year">
+                        ` + key + `
+                    </div>
+                    <div class="timeline__content">
+                        ` + value + `
+                    </div>
+                </div>
+            </div>
+        `);
+    });
+}
+
+function getAllElements(timeline) {
+    return timeline.querySelectorAll('.timeline__row');
+}
+
+function isElementFullyVisible(timeline, timelineElement) {
+    const rect = timelineElement.getBoundingClientRect();
+    const elemTop = rect.top;
+    const elemBottom = rect.bottom;
+
+    return elemTop >= 0 && elemBottom <= timeline.offsetHeight;
+
+}
diff --git a/index.html b/index.html
@@ -156,6 +156,14 @@ <h5 class="card-title text-dark">Gallery</h5>
           <a href="/animated-components/Gallery/PhotoGallery.html" class="card-link text-warning"><strong>Photo Gallery</strong></a>
         </div>
       </div>
+      <!--    Timeline  -->
+      <div class="card" style="width: 18rem;">
+        <div class="card-body">
+          <h5 class="card-title text-dark">Timeline</h5>
+          <p class="card-text">Name: <br />Juan Jimenez</p>
+          <a href="/animated-components/Timeline/timeline.html" class="card-link text-warning"><strong>Timeline</strong></a><br>
+        </div>
+      </div>
 
     </div>