Merge pull request #50 from DigitalMitford/webDesign

Web design

1819-1823MRMJournal.xml

@@ -17,6 +17,8 @@ schematypens="http://purl.oclc.org/dsdl/schematron"?>
  <title>Mary Russell Mitford's Notebook of 1819 to 1823</title>
  <author ref="#MRM">Mary Russell Mitford</author>
  <editor ref="#rjp">Rebecca J. Parker</editor>
+ <editor ref="#srr">Savannah Ricks</editor>
+ <editor ref="#tsa">Tyler Akam</editor>
  <editor ref="#ebb">Elisa Beshero-Bondar</editor>
  <editor ref="#lmw">Lisa M. Wilson</editor>
  <!-- LMW where to credit Coles? -->
@@ -28,6 +30,8 @@ schematypens="http://purl.oclc.org/dsdl/schematron"?>
  <respStmt>
  <resp>Transcription and coding by</resp>
  <persName ref="#rjp">Rebecca J. Parker</persName>
+ <persName ref="#srr">Savannah Ricks</persName>
+ <persName ref="#tsa">Tyler Akam</persName>
  <persName ref="#ebb">Elisa Beshero-Bondar</persName>
  <persName ref="#lmw">Lisa M. Wilson</persName>
  </respStmt>
@@ -51,11 +55,11 @@ schematypens="http://purl.oclc.org/dsdl/schematron"?>
  <licence>Distributed under a Creative Commons Attribution-ShareAlike 3.0 Unported
  License</licence>
  </availability>
-
+ 
  </publicationStmt>
  <sourceDesc>
-
-
+ 
+ 
  <msDesc>
  <msIdentifier>
  <repository ref="#ReadingCL">Reading Central Library</repository>
@@ -68,7 +72,7 @@ schematypens="http://purl.oclc.org/dsdl/schematron"?>
  transcript of which this is a copy is in the possession of the Public Library,
  Reading, Berks, England. A photostat copy of the MS is also available at that
  library.</q> Copyright presumably rests with the British Museum. <date
- when="1955-07">July 1955</date>.
+  when="1955-07">July 1955</date>.
  <!--ebb: Check with British Library (now housing the British Museum manuscripts) re copyright permissions before posting an html view of this file.--></p>
  </msDesc>
  </sourceDesc>
@@ -111,6 +115,16 @@ schematypens="http://purl.oclc.org/dsdl/schematron"?>
  spelling and the regular international standard of Oxford English spelling, following
  the first listed spelling in the Oxford English Dictionary. The long s and ligatured
  forms are not encoded.</p>
+ <p>In this journal, after 1819 (when she no longer has print indications of the date
+ from the published journal), Mitford usually indicates the month and year at the top
+ of her pages. Mitford began adding the location where she wrote her entries around
+ October 1820 to the top of each page near the date. When she had no room towrite the
+ place name after the date, e.g. <q>Three Mile Cross</q>, she the split the place name
+ so part of it appears before the date, and part after the date, for example: <q>Three
+ Mile October 1820 Cross</q>. We have decided to represent these form headings in
+ meaningful order, so as to clearly distinguish the place from the date. Because they
+ were added afterwards, we chose to position these place names after the date
+ information.</p>
  </editorialDecl>
  </encodingDesc>
  </teiHeader>

docs/journal.css

@@ -161,14 +161,17 @@ div a:hover {
 /* Gloss styling */
 
 div.si {
+ display:none;
+
+
+}
+div.si.on { 
+ display: block;
  background-color: #F8F8FF;
  padding: 10px;
  border: black;
  border-radius: 20px;
- border-width: 10px;
-
-}
-
+ border-width: 10px;}
 
 
 span.date {

docs/journal.js

@@ -0,0 +1,49 @@
+/* 2023-06-22 ebb with srr and tsa 
+ * This JS is to show and hide gloss entries on user interaction with highlighted named entities
+ * 
+ * SI gloss entries are coded in div element like this with @class="si" and id attributes
+ * <div class="si on" id="Burney_SH">
+ * 
+ * We need to match on the @id attribute in order to show (unhide) the gloss entry.
+ * 
+ * Elements with glosses to reveal are coded like this: 
+ * <span class="persName gloss" data-gloss="#Burney_SH"><a href="#Burney_SH">Miss
+ Burney</a></span>
+ 
+ * On mouse-enter (or click) of the span, JS will read the @data-gloss attribute, and cut the string after the '#" to 
+ * locate its matching si entry. It will then add a class 'on' to the si entry to display.
+ * 
+ * A toggle-off function will be necessary to hide the element again. This can simply look for any si entries wtih a class "on"
+ * and remove the class. 
+ * Our JS is adapted from Piper Baron's Poems project.
+ * */
+
+ window.onload = init;
+const highlights = document.getElementsByClassName("gloss");
+const entries = document.getElementsByClassName("si");
+
+function init() {
+ for (var i = 0; i < highlights.length; i++) {
+ highlights[i].addEventListener('mouseover', toggle, false);
+ /* highlights[i].addEventListener('mouseleave', toggleOff, false);*/
+ highlights[i].addEventListener('click', toggle, false);
+ highlights[i].addEventListener('touchenter', toggle, false);
+ }
+
+}
+
+function toggle() {
+/*toggleOff()*/
+/* Show the gloss entry associated with "this", which is literally the highlighted element
+ * the user clicked on or visited */
+ var idVal = this.getAttribute("data-gloss").split("#")[1];
+ /* test whether the id matches THIS substring after # */
+ var entry = document.getElementById(idVal)
+ entry.classList.toggle("on");
+}
+
+
+
+
+
+

xslt-to-html/mitfordJournal-to-HTML.xsl

@@ -31,6 +31,7 @@
  </title>
  <link rel="stylesheet" type="text/css" href="../journal.css"/>
  <link href="https://fonts.googleapis.com/css?family=Alice" rel="stylesheet" />
+ <script type="text/javascript" src="../journal.js"></script>
  </head>
  <body>
  <div id="nav_wide"> <!--<h1>Digital Mitford:
@@ -314,7 +315,7 @@
  </xsl:when>
 
 
- <xsl:otherwise><span class="{current() ! name()}" data-gloss="{@ref}"><a href="{@ref ! tokenize(., '\s+')[1]}"><xsl:apply-templates/></a></span></xsl:otherwise>
+ <xsl:otherwise><span class="{current() ! name()} gloss" data-gloss="{@ref}"><a href="{@ref ! tokenize(., '\s+')[1]}"><xsl:apply-templates/></a></span></xsl:otherwise>
 
 
  </xsl:choose>
@@ -329,7 +330,7 @@
  <xsl:template match="body//bibl">
  <xsl:choose> 
  <xsl:when test="@corresp">
- <span class="title" data-gloss="{@corresp}"><a href="{@corresp ! tokenize(., '\s+')[1]}"><xsl:apply-templates/></a></span>
+ <span class="title gloss" data-gloss="{@corresp}"><a href="{@corresp ! tokenize(., '\s+')[1]}"><xsl:apply-templates/></a></span>
  </xsl:when>
  <xsl:otherwise>
  <span class="title"><xsl:apply-templates/></span>