splitting up transcript components

uidaholib · Aug 27, 2024 · 4f2520d · 4f2520d
1 parent da08609
commit 4f2520d
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 116 deletions.
diff --git a/_includes/transcript/item/av.html b/_includes/transcript/item/av.html
@@ -0,0 +1,4 @@
+<div class="interview-object mt-3 px-0">
+  {% include
+  transcript/player/{{av}}.html %}
+</div>
diff --git a/_includes/transcript/item/filters.html b/_includes/transcript/item/filters.html
@@ -0,0 +1,45 @@
+<div class="row my-3 sticky-top bg-white border-bottom border-left border-right d-print-none py-3 w-md-75" id="filters-search" style="z-index: 0;">
+    <div class="col {% unless site.data.filters %}d-none{% endunless %}">
+      <select id="filters" title="Filter by Topic" aria-label="Topic filtering dropdown select option" class="filters py-1 form-select border border-primary" onchange="filterLines(this.value)">
+        <option value="all" class="reset" selected="selected reset">Filter by Topic</option>
+        {% assign filters = site.data.filters %}
+        {% for filter in filters %}
+        {% assign tag = filter.tag | slugify %}
+        {%if uniqueSubjects contains tag %}<option value="{{ tag }}">{{filter.description | capitalize}}
+          ({{filter.tag}})</option>{%endif%}
+        {% endfor %}
+      </select>
+    </div>
+    <div class="col">
+      <div id="transcriptsearch" class="bg-lightr">
+        <div class="row">
+          <div class="col-md-6">
+            <div class="input-group fs-5 mt-0 mt-md-0">
+              <input type="text" class="form-control border border-primary py-1" placeholder="Search..." aria-label="Search"
+                aria-describedby="goButton" id="quicksearch">
+              <div class="input-group-append">
+                <button class=" rounded-right border border-primary btn btn-primary p-1" type="submit"
+                  title="Search" alt="Search" id="goButton"
+                  onclick="var searchval = document.getElementById('quicksearch').value; searchLines(searchval);">Go</button>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-6">
+            <button class="reset btn btn-sm btn-primary input-group-text float-end float-md-none mt-2 mt-md-0" onclick="vizFilter('all');">Reset
+              Filters</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="filtersearch" class="col-12 d-none mt-3">
+      <h5 id="linecount" class="d-none small ms-3"><span id="numberof"></span></h5>
+
+      <select class="w-100 col-md-8 mb-2 form-select p-2 border border-primary" id="searchResults" onchange="scrollToLine(this.value);">
+
+      </select>
+    </div>
+    <div id="filter-tab" class="d-none filter-tab col-4 col-lg-2 text-center justify-content-end bg-primary text-white small px-1 py-1">
+      <span id="hide-filters-text">Hide Filters &#9650;</span>
+      <span id="show-filters-text">Show Filters &#9660;</span>
+    </div>
+  </div>
diff --git a/_includes/transcript/item/transcript-metadata.html b/_includes/transcript/item/transcript-metadata.html
@@ -0,0 +1,22 @@
+<div class="my-2 row px-3 mt-4 meta">
+    <div class="col">
+      <p><span class="me-3">
+        {%if page.bio and site.data.theme.transcript-fields contains 'bio'%}<b>Bio:</b>  <span class="me-3">{{page.bio}}</span> <br/>{%endif%}
+        {%if page.description and site.data.theme.transcript-fields contains 'description'%}<b>Description:</b>  <span class="me-3">{{page.description}}</span>{%endif%}{%if
+        page.date and site.data.theme.transcript-fields contains 'date'%}<br><b>Date:</b> <span class="me-3">{{page.date | date: "%B %d, %Y" }}</span>{%endif%} {%if
+          page.location and site.data.theme.transcript-fields contains 'location' %}<b>Location:</b> {{page.location }}{%endif%}
+        {%if page.interviewer and site.data.theme.transcript-fields contains 'interviewer' %} <br><b>Interviewer:</b> {{page.interviewer}}{%endif%}
+        {%if page.interviewer and site.data.theme.transcript-fields contains 'interviewee' %} <br><b>Interviewee:</b> {{page.interviewee}}{%endif%}
+       </p>
+      {% include transcript/item/download-buttons.html %}
+      {% include transcript/item/metadata-modal.html %}
+
+   </div>
+    {% if site.data.theme.transcript-fields contains 'image'  %}
+    {% if page.image_small or page.image_thumb %}
+    <div class="col-md-3 {% if av == 'vimeo' or av == 'youtube'%}d-none d-md-block{% endif %}">
+      <img class="img-thumbnail timeline-thumb" src="{{page.image_small | default: page.image_thumb | relative_url }}" alt="{{page.title}}"> 
+    </div>
+    {% endif %}
+    {% endif %}
+  </div>
diff --git a/_includes/transcript/item/transcript-viz.html b/_includes/transcript/item/transcript-viz.html
@@ -0,0 +1,18 @@
+<div class="my-2 row px-3 mt-2" id="viz">
+  <h4 class="mt-2 mb-0 meta">Topics:</h4>
+    <div class="vizdiv w-100">
+      <svg id="colorViz" class="chart" width="100%" height="100px" style="overflow: visible">
+        {% for item in items %}
+        {% assign my_integer = forloop.length %}
+        {% assign my_float = my_integer | times: 1.0 %}
+        {% assign rect-width = 100 | divided_by: my_float %}
+        <a onclick="scrollToLine('{{page.objectid}}{{ forloop.index0 }}');" style="cursor:pointer">
+          <rect id="rect{{-forloop.index0-}}" x="{{forloop.index0 | times: rect-width }}%" y="20" width="{{rect-width}}%"
+            height="50" data-bs-toggle="tooltip" data-bs-placement="top" class="{%- assign tags = item.tags | split: ";" |
+            compact | where_exp: 'item' , 'item != " "' %}{% for tag in tags %}{{tag | slugify }} {% endfor %}"
+            title="{{ item.words | default: '...' }}{% if item.tags %} (Subjects: {{ item.tags | replace: ';', ', ' }}){%endif%}">
+          </rect>
+        </a>{%endfor%}</svg>
+    </div>
+  </div>
+  {% include /transcript/style/visualization-filter-legend.html %}
diff --git a/_includes/transcript/item/transcript.html b/_includes/transcript/item/transcript.html
@@ -1,85 +1,20 @@
-<div id="transcript">
-  <div class="my-2 row px-3 mt-4">
-    <div class="vizdiv w-100">
-      <p class="my-2 meta ">Topics:</h4>
-      <svg id="colorViz" class="chart" width="100%" height="100px" style="overflow: visible">
-        {% for item in items %}
-        {% assign my_integer = forloop.length %}
-        {% assign my_float = my_integer | times: 1.0 %}
-        {% assign rect-width = 100 | divided_by: my_float %}
-        <a onclick="scrollToLine('{{page.objectid}}{{ forloop.index0 }}');" style="cursor:pointer">
-          <rect id="rect{{-forloop.index0-}}" x="{{forloop.index0 | times: rect-width }}%" y="20" width="{{rect-width}}%"
-            height="50" data-bs-toggle="tooltip" data-bs-placement="top" class="{%- assign tags = item.tags | split: ";" |
-            compact | where_exp: 'item' , 'item != " "' %}{% for tag in tags %}{{tag | slugify }} {% endfor %}"
-            title="{{ item.words | default: '...' }}{% if item.tags %} (Subjects: {{ item.tags | replace: ';', ', ' }}){%endif%}">
-          </rect>
-        </a>{%endfor%}</svg>
-    </div>
-  </div>
-  {% include /transcript/style/visualization-filter-legend.html %}
-  <div class="pe-md-5">
-    <div id="filters-search" class="row my-3 sticky-top bg-white border-bottom border-left border-right d-print-none py-3 w-md-75" style="z-index: 0;">
-      <div id="filters-container" class="row">
-        <div class="col {% unless site.data.filters %}d-none{% endunless %}">
-        <select id="filters" title="Filter by Topic" aria-label="Topic filtering dropdown select option" class="filters py-1 form-select border border-primary" onchange="filterLines(this.value)">
-          <option value="all" class="reset" selected="selected reset">Filter by Topic</option>
-          {% assign filters = site.data.filters %}
-          {% for filter in filters %}
-          {% assign tag = filter.tag | slugify %}
-          {%if uniqueSubjects contains tag %}<option value="{{ tag }}">{{filter.description | capitalize}}
-            ({{filter.tag}})</option>{%endif%}
-          {% endfor %}
-        </select>
-      </div>
-      <div class="col">
-        <div id="transcriptsearch" class="bg-lightr">
-          <div class="row">
-            <div class="col-md-6">
-              <div class="input-group fs-5 mt-0 mt-md-0">
-                <input type="text" class="form-control border border-primary py-1" placeholder="Search..." aria-label="Search"
-                  aria-describedby="goButton" id="quicksearch">
-                <div class="input-group-append">
-                  <button class=" rounded-right border border-primary btn btn-primary p-1" type="submit"
-                    title="Search" alt="Search" id="goButton"
-                    onclick="var searchval = document.getElementById('quicksearch').value; searchLines(searchval);">Go</button>
-                </div>
-              </div>
-            </div>
-            <div class="col-md-6">
-              <button class="reset btn btn-sm btn-primary input-group-text float-end float-md-none mt-2 mt-md-0" onclick="vizFilter('all');">Reset
-                Filters</button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div id="filtersearch" class="col-12 d-none mt-3">
-        <h5 id="linecount" class="d-none small ms-3"><span id="numberof"></span></h5>
-
-        <select class="w-100 col-md-8 mb-2 form-select p-2 border border-primary" id="searchResults" onchange="scrollToLine(this.value);">
-
-        </select>
-      </div>
-      </div>
-      <div id="filter-tab" class="d-none filter-tab col-4 col-lg-2 text-center justify-content-end bg-primary text-white small px-1 py-1">
-        <span id="hide-filters-text">Hide Filters &#9650;</span>
-        <span id="show-filters-text">Show Filters &#9660;</span>
-      </div>
-    </div>
+{% include transcript/item/filters.html %}
 
-    <div id="contents-container" class="pe-5">
-      {% for item in items %}
-      {% assign prev_index = forloop.index0 | times: 1 | minus: 1 %}
-      {% assign prev_speaker = items[prev_index].speaker %}
-      {% assign mod = forloop.index0 | plus: 1 | modulo: 5 %}
-      <div id="{{page.objectid}}{{ forloop.index0 }}" class="{%- assign tags = item.tags | split: ";" | compact | where_exp: 'item' , 'item != " "' %}{% for tag in tags %}{{tag | slugify }} {% endfor %}row line py-1">
-        <p class="words col-md-10 col-lg-8 col-print-12 pr-0">
-          {% unless item.speaker == prev_speaker %}{%if item.speaker %}<span class="fw-bold pe-3 pb-3">{{item.speaker |
-            remove: ":"}}: </span>{% endif %}{% endunless %}{{item.words}}
-        </p>
-        <div class="col-12 col-md-2 timestamp mb-3 small text-center">{%if item.timestamp%}{% if av %}{% capture avlink %}transcript/timestamp/{{av | downcase }}.html{% endcapture %}<a href="{% include {{avlink}} %}">{{item.timestamp}}</a>{% else %}{{item.timestamp}}{% endif %}{% endif %}
-        </div>
-      </div>
-      {% endfor %}
+<div id="contents-container" class="pe-5 pb-5 mb-5 border-bottom">
+  {% for item in items %}
+  {% assign prev_index = forloop.index0 | times: 1 | minus: 1 %}
+  {% assign prev_speaker = items[prev_index].speaker %}
+  {% assign mod = forloop.index0 | plus: 1 | modulo: 5 %}
+  <div id="{{page.objectid}}{{ forloop.index0 }}" class="{%- assign tags = item.tags | split: " ;" | compact |
+    where_exp: 'item' , 'item != " "' %}{% for tag in tags %}{{tag | slugify }} {% endfor %}row line py-1">
+    <p class="words col-md-10 col-lg-8 col-print-12 pr-0">
+      {% unless item.speaker == prev_speaker %}{%if item.speaker %}<span class="fw-bold pe-3 pb-3">{{item.speaker |
+        remove: ":"}}: </span>{% endif %}{% endunless %}{{item.words}}
+    </p>
+    <div class="col-12 col-md-2 timestamp mb-3 small text-center">{%if item.timestamp%}{% if av %}{% capture avlink
+      %}transcript/timestamp/{{av | downcase }}.html{% endcapture %}<a
+        href="{% include {{avlink}} %}">{{item.timestamp}}</a>{% else %}{{item.timestamp}}{% endif %}{% endif %}
     </div>
   </div>
-</div>
+  {% endfor %}
+</div>
diff --git a/_layouts/item/transcript.html b/_layouts/item/transcript.html
@@ -4,7 +4,7 @@
 layout: item/item-page-base
 custom-foot: transcript/js/transcript-js.html
 ---
-{% assign children = site.data[site.metadata] | where_exp: 'item','item.parentid == page.objectid' %}
+{%- comment -%} Determine if transcript filename is the objectid of the item or if it is determined by the metadata's object-transcript field {%- endcomment -%}
 {% if page.object-transcript contains ".csv"%}
 {% assign transcript = page.object-transcript | remove: ".csv" %}
 {% assign items = site.data.transcripts[transcript] %}
@@ -13,15 +13,20 @@
 {% else %}
 {% assign items = site.data.transcripts[page.objectid] %}
 {% endif %}
-{%- comment -%} find all words used in the subject metadata {%- endcomment -%}
+
+{%- comment -%} if using color-coded visualization find all words used in the subject metadata {%- endcomment -%}
+{% if site.data.filters %}
+{% include transcript/style/filter-style.html %}
 {%- assign min-count = 1 -%}
 {%- assign raw-subjects = items | map: "tags" | compact | join: ";" | split: ";" -%}
 {%- capture subjects -%}{% for s in raw-subjects %}{% if s != "" %}{{- s | strip | downcase -}};{% endif %}{%- endfor
 -%}{%-
 endcapture -%}
 {%- assign subjects = subjects | split: ";" -%}
 {%- assign uniqueSubjects = subjects | uniq | sort -%}
+{% endif %}
 
+{%- comment -%} determine AV component (if there is one) {%- endcomment -%}
 {% if page.object_location contains 'vimeo' %}
 {% assign av = "vimeo" %}
 {% assign vimeo_id = page.object_location | split: '/' | last %}
@@ -36,39 +41,21 @@
 {% assign av = "soundcloud" %}
 {% assign soundcloud_id = page.object_location | split: '.com/' | last %}
 {%endif%}
-
-
-{% include transcript/style/filter-style.html %}
+<div id="upper-content">
+{% if site.data.theme.media-scroll == true %}
+{% include transcript/style/media-scroll-wrapper.html %}
+{% endif %}
 {% if av %}
-<div class="interview-object mt-3 px-0">
-  {% include
-  transcript/player/{{av}}.html %}
-</div>{% endif %}
-<div id="object-meta">
-  <div class="my-2 row px-3 mt-4">
-    <div class="col">
-      <p class="meta"><span class="me-3">
-        {%if page.bio and site.data.theme.transcript-fields contains 'bio'%}<b>Bio:</b>  <span class="me-3">{{page.bio}}</span> <br/>{%endif%}
-        {%if page.description and site.data.theme.transcript-fields contains 'description'%}<b>Description:</b>  <span class="me-3">{{page.description}}</span>{%endif%}{%if
-        page.date and site.data.theme.transcript-fields contains 'date'%}<br><b>Date:</b> <span class="me-3">{{page.date | date: "%B %d, %Y" }}</span>{%endif%} {%if
-          page.location and site.data.theme.transcript-fields contains 'location' %}<b>Location:</b> {{page.location }}{%endif%}
-        {%if page.interviewer and site.data.theme.transcript-fields contains 'interviewer' %} <br><b>Interviewer:</b> {{page.interviewer}}{%endif%}
-        {%if page.interviewer and site.data.theme.transcript-fields contains 'interviewee' %} <br><b>Interviewee:</b> {{page.interviewee}}{%endif%}
-       </p>
-      {% include transcript/item/download-buttons.html %}
-      {% include transcript/item/metadata-modal.html %}
-
-    </div>
-    {% if site.data.theme.transcript-fields contains 'image'  %}
-    {% if page.image_small or page.image_thumb %}
-    <div class="col-md-3 meta{% if av == 'vimeo' or av == 'youtube'%} d-none d-md-block{% endif %}">
-      <img class="img-thumbnail timeline-thumb" src="{{page.image_small | default: page.image_thumb | relative_url }}" alt="{{page.title}}"> 
-
-    </div>
-    {% endif %}
-    {% endif %}
-  </div>
+{% include transcript/item/av.html %}
+{% endif %}
+<div id="transcript-metadata">
+  {% include transcript/item/transcript-metadata.html %}
+</div>
+{% if site.data.filters %}
+{% include transcript/item/transcript-viz.html %}
+{% endif %}
+</div>
 
-  {% include transcript/item/transcript.html %}
+{% include transcript/item/transcript.html %}