From 6dce0f7cb84d5c8466dff9e97cbb27360e3c3e2f Mon Sep 17 00:00:00 2001
From: root <root@rdm2.researchspaces.ca>
Date: Fri, 3 Mar 2023 15:59:42 +0000
Subject: [PATCH] tabs

---
 css-tweaks.css                                |  61 ++++++--
 js/rdm.js                                     |  35 +++--
 .../node--islandora-rdm-dataset.html.twig     | 134 ++++++++++++++++++
 3 files changed, 207 insertions(+), 23 deletions(-)
 create mode 100644 templates/content/node--islandora-rdm-dataset.html.twig

diff --git a/css-tweaks.css b/css-tweaks.css
index 89136d2..f77321c 100644
--- a/css-tweaks.css
+++ b/css-tweaks.css
@@ -7,27 +7,62 @@
 }
 div#block-homepagewelcome-2,
 #block-exposedformdataset-searchpage-1 {
-	  color: #fff !important;
-	  padding: 4rem 0;
-	    background: #789d4a; 
+	color: #fff !important;
+	padding: 4rem 0;
+	background: #789d4a; 
 }
 #block-exposedformdataset-searchpage-1 label {
 	display:none;
 }
 
 div#block-homepagewelcome-2 a {
-  color: var(--upei-red); }
+color: var(--upei-red); }
 
 div#block-homepagewelcome-2 h2,
 div#block-homepagewelcome-2 p {
-  color: #fff !important; }
+color: #fff !important; }
 
-  input#edit-search-api-fulltext--2 {
-	      width: 100%;
-	          height: 50px;
-	  }
+input#edit-search-api-fulltext--2 {
+	width: 100%;
+	height: 50px;
+}
+
+.js-form-item.form-item.js-form-type-textfield.form-item-search-api-fulltext.js-form-item-search-api-fulltext {
+	width: 600px;
+	/* height: 54px; */
+}
+/* Style the tab */
+.tab {
+  overflow: hidden;
+  border: 1px solid #ccc;
+  background-color: #f1f1f1;
+}
+
+/* Style the buttons that are used to open the tab content */
+.tab button {
+  background-color: inherit;
+  float: left;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 14px 16px;
+  transition: 0.3s;
+}
 
-	  .js-form-item.form-item.js-form-type-textfield.form-item-search-api-fulltext.js-form-item-search-api-fulltext {
-		      width: 600px;
-		          /* height: 54px; */
-	      }
+/* Change background color of buttons on hover */
+.tab button:hover {
+  background-color: #ddd;
+}
+
+/* Create an active/current tablink class */
+.tab button.active {
+  background-color: #ccc;
+}
+
+/* Style the tab content */
+.tabcontent {
+  display: none;
+  padding: 6px 12px;
+  border: 1px solid #ccc;
+  border-top: none;
+}
diff --git a/js/rdm.js b/js/rdm.js
index 331d149..627eacc 100644
--- a/js/rdm.js
+++ b/js/rdm.js
@@ -1,21 +1,36 @@
 /* Load jQuery.
 --------------------------*/
 jQuery(document).ready(function ($) {
-  // Homepage blocks
-  $(".region-content-home-top .block, .region-content-home-bottom .block").wrapInner( '<div class="container"></div>' );
 
-/*  $('.accordion_block').accordionjs({
+	Drupal.behaviors.nodeTabs = {
+		attach: function (context, settings) {
+			// your custom javascript goes inside this function...
+			function openCity(cityName) {
+				var i;
+				var x = document.getElementsByClassName("city");
+				for (i = 0; i < x.length; i++) {
+					x[i].style.display = "none";
+				}
+				document.getElementById(cityName).style.display = "block";
+			}
+		}
+	};
+
+	// Homepage blocks
+	$(".region-content-home-top .block, .region-content-home-bottom .block").wrapInner( '<div class="container"></div>' );
+
+	/*  $('.accordion_block').accordionjs({
     activeIndex: false,
   });
-*/
+  */
 	$(".views-field-search-api-rendered-item span").each(function() {
-		    var html = $(this).html();
-		    html = html.replace(". . ", ". ");
-		    $(this).html(html);
+		var html = $(this).html();
+		html = html.replace(". . ", ". ");
+		$(this).html(html);
 	});
- //$('.views-field-search-api-rendered-item:contains(". . ")').text('. '); 
+	//$('.views-field-search-api-rendered-item:contains(". . ")').text('. '); 
 	// $('p:contains("dogsss")').text('dollsss');
-	
-/* End document
+
+	/* End document
 --------------------------*/
 });
diff --git a/templates/content/node--islandora-rdm-dataset.html.twig b/templates/content/node--islandora-rdm-dataset.html.twig
new file mode 100644
index 0000000..ff20eeb
--- /dev/null
+++ b/templates/content/node--islandora-rdm-dataset.html.twig
@@ -0,0 +1,134 @@
+{%
+set node_classes = [
+  'node',
+  node.isPromoted() ? 'node-promoted',
+  node.isSticky() ? 'node-sticky',
+  not node.isPublished() ? 'node-unpublished',
+  view_mode ? 'node-view-mode-' ~ view_mode|clean_class,
+]
+%}
+<article{{ attributes.addClass(node_classes) }}>
+{{ title_prefix }}
+  {% if not page %}
+    <h2{{ title_attributes.addClass('node-title') }}>
+      <a href="{{ url }}" rel="bookmark">{{ label }}</a>
+    </h2>
+  {% endif %}
+{{ title_suffix }}
+
+{% if display_submitted %}
+  <header class="node-header clear">
+    {% if node_author_pic %}
+      <div class="author-picture">{{ author_picture }}</div>
+    {% endif %}
+    <div{{ author_attributes.addClass('node-submitted-details') }}>
+      {% set createdDate = node.getCreatedTime|date('j F Y') %}
+      {% trans %}<span><i class="ficon-user submitted-icons"></i> {{ author_name }}</span><span><i class="ficon-calendar submitted-icons"></i> {{ createdDate }}</span>{% endtrans %}
+      {% if node_tags %}
+      {% if content.field_tags %}
+        <span><i class="ficon-tag submitted-icons"></i>
+        {% for item in content.field_tags %}
+          {% if item['#title'] %}
+            <a href="{{ item['#url']}}">{{ item['#title']  }}</a>{{ ',' }}
+          {% endif %}
+        {% endfor %}
+      </span>
+      {% endif %}
+      {% endif %}
+      {{ metadata }}
+    </div>
+  </header>
+{% endif %}
+  <div{{ content_attributes.addClass('node-content clear') }}>
+<hr>
+<h3>Rob's dummy content</h3>
+<table class="metadata">
+  <tbody>
+    <tr id="row_id">
+      <th scope="row">Description</th>
+      <td>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </div>
+      </td>
+    </tr>
+    <tr id="row_id">
+      <th scope="row">Subject</th>
+      <td>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </div>
+      </td>
+    </tr>
+    <tr id="row_id">
+      <th scope="row">Keywords</th>
+      <td>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </div>
+      </td>
+    </tr>
+    <tr id="row_id">
+      <th scope="row">Related Publications</th>
+      <td>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- dummy tabs -->
+<!-- Tab links -->
+<div class="tab">
+  <button id="defaultOpen" class="tablinks" onclick="openCity(event, 'London')">London</button>
+  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
+  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
+</div>
+
+<!-- Tab content -->
+<div id="London" class="tabcontent">
+  <h3>London</h3>
+  <p>London is the capital city of England.</p>
+</div>
+
+<div id="Paris" class="tabcontent">
+  <h3>Paris</h3>
+  <p>Paris is the capital of France.</p>
+</div>
+
+<div id="Tokyo" class="tabcontent">
+  <h3>Tokyo</h3>
+  <p>Tokyo is the capital of Japan.</p>
+</div>
+<!-- /dummy tabs -->
+
+    {{ content.field_rdm_creator }}
+    {{ content.field_rdm_organization_name }}
+<hr>
+
+    {{ content }}
+  </div>
+</article>
+<script>
+
+function openCity(evt, cityName) {
+  // Declare all variables
+  var i, tabcontent, tablinks;
+
+  // Get all elements with class="tabcontent" and hide them
+  tabcontent = document.getElementsByClassName("tabcontent");
+  for (i = 0; i < tabcontent.length; i++) {
+    tabcontent[i].style.display = "none";
+  }
+
+  // Get all elements with class="tablinks" and remove the class "active"
+  tablinks = document.getElementsByClassName("tablinks");
+  for (i = 0; i < tablinks.length; i++) {
+    tablinks[i].className = tablinks[i].className.replace(" active", "");
+  }
+
+  // Show the current tab, and add an "active" class to the button that opened the tab
+  document.getElementById(cityName).style.display = "block";
+  evt.currentTarget.className += " active";
+}
+
+document.getElementById("defaultOpen").click();
+</script>