diff --git a/_includes/index/objects.html b/_includes/index/objects.html index 77b87393..5cbacb38 100644 --- a/_includes/index/objects.html +++ b/_includes/index/objects.html @@ -1,5 +1,5 @@ {%- assign templates = site.data[site.metadata] | where_exp: 'item','item.parentid == nil ' | map: "display_template" -%} -{%- assign types = "image;audio;video;pdf;panorama;record;compound_object;multiple" | split: ";" -%} +{%- assign types = "image;audio;video;pdf;panorama;record;compound_object;multiple;transcript" | split: ";" -%}

Objects

@@ -25,6 +25,8 @@

Objects

Compound Object{% if count > 1 %}s{% endif %}
{% when 'multiple' %} Multiple{% if count > 1 %}s{% endif %}
+ {% when 'transcript' %} + Transcript{% if count > 1 %}s{% endif %}
{% else %} File{% if count > 1 %}s{% endif %}
{%- endcase -%} diff --git a/_includes/transcript/index/viz-overview.html b/_includes/transcript/index/viz-overview.html new file mode 100644 index 00000000..14ff88d2 --- /dev/null +++ b/_includes/transcript/index/viz-overview.html @@ -0,0 +1,21 @@ +{% assign viz-height = include.height | default: '400px' %} +
+ {% for transcript in site.data.transcripts %} + {% assign height_integer = forloop.length %} + {% assign height_float = height_integer | times: 1.0 %} + {% if viz-height contains "%" %}{% assign viz-integer = viz-height | replace: "%","" %}{% assign viz-height-measure = "%" %} + {% elsif viz-height contains "px" %}{% assign viz-integer = viz-height | replace: "px","" %}{% assign viz-height-measure = "px" %} + {% else %}{% assign viz-integer = viz-height %}{% assign viz-height-measure = "px" %}{% endif %} + {% assign rect-height = 100 | divided_by: height_float %} + {%assign transcript-name = transcript[0] %} + {% assign transcript_item = items | where_exp: 'item', 'item.objectid == transcript-name' | first %} + {%endfor%} +
\ No newline at end of file diff --git a/_includes/transcript/item/transcript.html b/_includes/transcript/item/transcript.html new file mode 100644 index 00000000..49372acf --- /dev/null +++ b/_includes/transcript/item/transcript.html @@ -0,0 +1,84 @@ +
+
+
+

Transcript

+

Topics: + + {% 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 %} + + + + {%endfor%} +

+
+ {% include /transcript/style/visualization-filter-legend.html %} +
+ + +
+ {% 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 %} +
+

+ {% unless item.speaker == prev_speaker %}{%if item.speaker %}{{item.speaker | + remove: ":"}}: {% endif %}{% endunless %}{{item.words}} +

+
{%if item.timestamp%}{% if av %}{% capture avlink %}transcript/timestamp/{{av | downcase }}.html{% endcapture %}{{item.timestamp}}{% else %}{{item.timestamp}}{% endif %}{% endif %} +
+
+ {% endfor %} +
+
+
\ No newline at end of file diff --git a/_includes/transcript/js/docready-js.html b/_includes/transcript/js/docready-js.html deleted file mode 100644 index e89c1565..00000000 --- a/_includes/transcript/js/docready-js.html +++ /dev/null @@ -1,39 +0,0 @@ - \ No newline at end of file diff --git a/_includes/transcript/js/docready-viz-js.html b/_includes/transcript/js/docready-viz-js.html index 30bce1f3..e69de29b 100644 --- a/_includes/transcript/js/docready-viz-js.html +++ b/_includes/transcript/js/docready-viz-js.html @@ -1,20 +0,0 @@ - \ No newline at end of file diff --git a/_includes/transcript/js/scroll-to-top-js.html b/_includes/transcript/js/scroll-to-top-js.html index 2a7cb262..624e7358 100644 --- a/_includes/transcript/js/scroll-to-top-js.html +++ b/_includes/transcript/js/scroll-to-top-js.html @@ -9,33 +9,16 @@ console.log("height is" + topheight); document.getElementById("scroll-to-top").style.display = "block"; triggerElement.setAttribute('style', 'margin-top:' + topheight + 'px'); - document.getElementById('object-meta').classList.add('iframe-wrapper'); } //BOTTOM else { document.getElementById("scroll-to-top").style.display = "none"; - document.getElementById('object-meta').classList.remove('iframe-wrapper'); triggerElement.removeAttribute('style'); } } - // When the user scrolls down from the top of the document, show the button - /* window.onscroll = function () { - if (document.body.scrollTop > 1000 || document.documentElement.scrollTop > 500) { - document.getElementById("scroll-to-top").style.display = "block"; - document.getElementById('object-meta').classList.add('iframe-wrapper'); - - - - } else { - document.getElementById("scroll-to-top").style.display = "none"; - document.getElementById('object-meta').classList.remove('iframe-wrapper'); - - - } - }*/ // scroll to top function function scrollToTop() { window.scroll({ diff --git a/_includes/transcript/js/transcript-js.html b/_includes/transcript/js/transcript-js.html index 03499d58..152b9b9f 100644 --- a/_includes/transcript/js/transcript-js.html +++ b/_includes/transcript/js/transcript-js.html @@ -1,177 +1,281 @@ \ No newline at end of file diff --git a/_includes/transcript/js/visualization-js.html b/_includes/transcript/js/visualization-js.html index 15f9e96b..dfc5e6e2 100644 --- a/_includes/transcript/js/visualization-js.html +++ b/_includes/transcript/js/visualization-js.html @@ -1,35 +1,159 @@ \ No newline at end of file +document.getElementById("reset").addEventListener('click', function() { + document.querySelectorAll("rect, circle, tr, table, svg, h3, div, section").forEach(el => { + el.classList.remove("black", "hidden", "dark"); + el.removeAttribute("aria-hidden"); + }); + params.set('id', ''); + params.set('filter', ''); + window.history.replaceState({}, '', location.pathname); +}); + +document.addEventListener('DOMContentLoaded', function() { + var svgButtons = document.querySelectorAll('svg[role="button"]'); + svgButtons.forEach(svg => { + svg.addEventListener('keydown', function(event) { + if (event.keyCode === 13 || event.keyCode === 32) { + event.preventDefault(); + var clickEvent = new MouseEvent('click', { + view: window, + bubbles: true, + cancelable: true + }); + this.dispatchEvent(clickEvent); + } + }); + }); +}); + +(function(){ + // init bootstrap tooltips + var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) + var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { + return new bootstrap.Tooltip(tooltipTriggerEl) + }) + + if(urlCodeFilter && urlPeepFilter) { + // code to be executed if a filter is contained in the url + codeFilter(urlCodeFilter); + interviewFilter(urlPeepFilter); + } + else if (urlCodeFilter){ + codeFilter(urlCodeFilter); +} + else if (urlPeepFilter){ + interviewFilter(urlPeepFilter); + }; +})(); + + \ No newline at end of file diff --git a/_includes/transcript/style/filter-style.html b/_includes/transcript/style/filter-style.html index 950a95af..f5e2cdda 100644 --- a/_includes/transcript/style/filter-style.html +++ b/_includes/transcript/style/filter-style.html @@ -4,7 +4,7 @@ {% capture color %}{% cycle '#e6194b','#3cb44b','#ffe119','#4363d8','#f58231','#911eb4','#46f0f0','#f032e6','#bcf60c','#fabebe','#008080','#e6beff','#9a6324','#fffac8','#800000','#aaffc3','#808000','#ffd8b1','#000075','#808080','#ffffff'%}{% endcapture %} .{{ n.tag | slugify }} { fill: {{color}}; - border-color: {{color}} !important; + border-color: {{color}}; } .{{ n.tag | slugify }}.primary-{{ n.tag | slugify }}{ diff --git a/_includes/transcript/style/visualization-filter-legend.html b/_includes/transcript/style/visualization-filter-legend.html new file mode 100644 index 00000000..38be4700 --- /dev/null +++ b/_includes/transcript/style/visualization-filter-legend.html @@ -0,0 +1,12 @@ +
+ {% for n in site.data.filters %} + {% if uniqueSubjects contains n.tag %} +
+ + {{n.tag}} + +
+ {% endif %} + {%endfor%} + +
\ No newline at end of file diff --git a/_layouts/cover.html b/_layouts/cover.html new file mode 100644 index 00000000..faf5824e --- /dev/null +++ b/_layouts/cover.html @@ -0,0 +1,11 @@ + + + + {% include head/head.html %} + + + + {{ content }} + {% include foot.html %} + + \ No newline at end of file diff --git a/_layouts/item/transcript.html b/_layouts/item/transcript.html index eb186cd9..6de401e2 100644 --- a/_layouts/item/transcript.html +++ b/_layouts/item/transcript.html @@ -2,10 +2,17 @@ # generic fallback item page layout # displays image or icon depending on "image_thumb" layout: item/item-page-base -custom-foot: transcript/js/transcript-js.html;/transcript/js/docready-js.html +custom-foot: transcript/js/transcript-js.html --- {% assign children = site.data[site.metadata] | where_exp: 'item','item.parentid == page.objectid' %} +{% if page.object-transcript contains ".csv"%} +{% assign transcript = page.object-transcript | remove: ".csv" %} +{% assign items = site.data.transcripts[transcript] %} +{% elsif page.object-transcript %} +{% assign items = site.data.transcripts[page.object-transcript] %} +{% else %} {% assign items = site.data.transcripts[page.objectid] %} +{% endif %} {%- comment -%} find all words used in the subject metadata {%- endcomment -%} {%- assign min-count = 1 -%} {%- assign raw-subjects = items | map: "tags" | compact | join: ";" | split: ";" -%} @@ -62,75 +69,6 @@ {% endif %}
+ {% include transcript/item/transcript.html %} -
-

Topics:

- - {% 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 %} - - - {%endfor%} -
-
-
- - - -
- {% for item in items %} - {% assign prev_index = forloop.index0 | times: 1 | minus: 1 %} - {% assign prev_speaker = items[prev_index].speaker %} - {% assign mod = forloop.index | plus: 1 | modulo: 5 %} -
-

- {% unless item.speaker == prev_speaker %}{%if item.speaker %}{{item.speaker | remove: ":"}}:{% endif %}{% endunless %}{{item.words}} -

-
{%if item.timestamp%}{% if av %}{% capture avlink %}transcript/timestamp/{{av | downcase }}.html{% endcapture %}{{item.timestamp}}{% else %}{{item.timestamp}}{% endif %}{% endif %} -
-
- {% endfor %} -
-
\ No newline at end of file + diff --git a/_layouts/visualization.html b/_layouts/visualization.html index 1c559889..75bf6b96 100644 --- a/_layouts/visualization.html +++ b/_layouts/visualization.html @@ -1,69 +1,72 @@ --- layout: default -custom-foot: transcript/js/visualization-js.html;/transcript/js/docready-viz-js.html +custom-foot: transcript/js/visualization-js.html --- - -{% assign transcripts = site.data.transcripts | sort %} -{%- assign items = site.data[site.metadata] %} {% include transcript/style/filter-style.html %} - +{% assign transcripts = site.data.transcripts | sort %} +{% assign items = site.data[site.metadata] %}
- {{ content }} +

Color-coded Subject Visualization

-
- {%for n in site.data.filters %} -
- - {{n.tag}} +

Click a colored circle/subject to see corresponding sections. You can also filter by subject and view/print related contents below.

+ + +
+ + {% for n in site.data.filters %} +
+ + Filter by {{ n.tag }} - {{ n.description }} + + {{ n.tag }}
- {%endfor%} - + {% endfor %}

-
- -
-
- {% for transcript in transcripts %}{%assign transcript-name = transcript[0] %} + +

+ {% for transcript in transcripts %} + {%assign transcript-name = transcript[0] %} {% assign transcript_item = items | where_exp: 'item', 'item.objectid == transcript-name' | first %} -
-

{{transcript_item.title}}

- +
+

{{ transcript_item.interviewee | default: transcript_item.title }} Click to filter

+ {% for item in transcript[1] %} {% assign my_integer = forloop.length %} {% assign my_float = my_integer | times: 1.0 %} {% assign rect-width = 100 | divided_by: my_float %} - - - {%endfor%} -
{%endfor%} + + + + {{ item.words }}{% if item.tags %}(Subjects: {{ item.tags | replace: ';', ', ' }}){%endif%} + {%endfor%} + {%endfor%}

+

-
+

Contents

- {% for transcript in site.data.transcripts %}{%assign transcript-name = transcript[0] %} - {%capture audiovideo-id %}{%for item in site.transcripts%}{%if item.objectid == transcript-name %}{{item.audiovideo-id}}{%endif%}{%endfor%}{% endcapture %} - {%capture avlink %}{%for item in site.transcripts%}{%if item.objectid == transcript-name %}timestamp/{{item.av_source}}.html{%endif%}{%endfor%}{% endcapture %} + {% for transcript in site.data.transcripts %} + {%assign transcript-name = transcript[0] %} + {% assign transcript_item = items | where_exp: 'item', 'item.objectid == transcript-name' | first %} {% for item in transcript[1] %} {% if forloop.first %} -
-

{{transcript-name | capitalize}}

-
{%endif%} -
-
{{transcript-name}}-{{ forloop.index }}
-
+
+

{{ transcript_item.interviewee | default: transcript_item.title }}

+ {%endif%} + + + + - {% if forloop.last%} - {%endif%} + {% if forloop.last%}
Line {{ forloop.index0 }}
{%if item.speaker%}{{item.speaker | remove: ":"}}: {%endif%}{{item.words}}
- -
{%if item.timestamp%} - {{item.timestamp}}{% endif %}
{{item.tags | replace: ";", "
"}}
- +
+
{%endif%} {% endfor %}{% endfor %} diff --git a/_sass/_ohd.scss b/_sass/_ohd.scss index bd5ac66c..d520132d 100644 --- a/_sass/_ohd.scss +++ b/_sass/_ohd.scss @@ -2,90 +2,12 @@ SCSS from the Oral History as Data project */ - -.grey { - color: grey; -} - -.grey-small { - color: grey; - height: 3px; - line-height: 2px; - overflow: hidden; -} - -.line.grey-small { - - .timestamp, - .linenum { - display: none; - } - - .words { - display: inline; - font-size: 3px; - padding: 0px 5px; - } -} - -.iframe-wrapper { - position: fixed; - right: 10px; - height: 200px; - width: 370px; - transition: all 1s linear; - - .meta { - display: none; - } - - @media screen and (max-width: 576px) { - bottom: 0px; - left: 0px; - height: auto; - width: 300px; - - .meta { - display: none; - } - - .vizdiv, #colorViz, .title { - display: none; - } - } -} - -.anchored-highlight p.words { - background: aquamarine; -} - -.featured { - - float: none; - clear: both; -} - -.linenum { - font-size: 11px; - float: left; - width: auto; -} - .words { @media screen and (max-width: 576px) { min-width: 250px; } } -.filteroptions, -.searchinput { - font-size: 24px; - - @media screen and (max-width: 576px) { - font-size: 18px; - } -} - .toggle_int:hover { color: pink } @@ -94,19 +16,60 @@ font-size: 12px; } -.darklink:hover{ - text-decoration: underline; -} - .featured { - background-color: #dbf1fd !important; + background-color: aquamarine !important; color: black !important; } +.border-featured { + border-left: 1px solid black !important; + border-left-width: thick !important; + background-color: aquamarine !important; +} + .btn-outline-dark:hover { background-color: #212529 !important; } +// tab to show/hide filters options for transcripts + +.filter-tab { + position: absolute; + bottom:-17px; + right: 0%; + transform: translateY(50%); + border-radius: 0 0 5px 5px; + cursor: pointer; + transition: all 0.5s ease; + } + + .filter-tab:hover { + background-color: #0056b3; + } + + #filters-search.retracted { + transform: translateY(-100%); + transition: all 0.5s ease; + #show-filters-text{ + display:block; + } + #hide-filters-text{ + display:none; + } + } + + #filters-search { + transition: transform 0.5s ease; + #show-filters-text{ + display:none; + } + #hide-filters-text{ + display:block; + } +} + + + @media print { @@ -128,7 +91,3 @@ } } - -html { - scroll-padding-top: 130px; /* height of sticky header */ - } \ No newline at end of file diff --git a/assets/css/cb.scss b/assets/css/cb.scss index 0557cc35..5c6e0170 100644 --- a/assets/css/cb.scss +++ b/assets/css/cb.scss @@ -30,4 +30,4 @@ $theme-colors: map-merge( @import "theme-colors", "theme-utilities"; {% endif %} -@import "base", "pages", "custom"; +@import "base", "pages", "ohd", "custom";