When I insert a JavaScript embed snippet to the end of the <div class="file-wrapper clearfix"></div> container within item-view.xsl of the Mirage theme, for some reason <div id="ds-options-wrapper"></div> found in page-navigation.xsl is generated outside of <div id="ds-body"></div>.
I wrote additional XSL within <div class="file-wrapper clearfix"></div> to include the JavaScript embed only when an item has DOI available in mets.xml. Whenever DOI is available, the embed appears but will cause <div id="ds-options-wrapper"></div> to become a child of <div id="ds-body"></div>, instead of a sibling as it should be. Whenever there is no embed, <div id="ds-options-wrapper"></div> is a sibling of and directly follows <div id="ds-body"></div> as in the default Mirage template.
Why is this happening? I would like <div id="ds-options-wrapper"></div> to stay a sibling of <div id="ds-body"></div>
Here is a rough outline of what the generated DOM looks like with and without the embed:
With Embed (psuedocode)
<!-- id=" and class=" omitted -->
<div ds-content>
<div ds-body>
<div aspect_..._div_item-view>
<div item-summary-view-metadata>
</div>
<div file-list>
<div file-wrapper clearfix>
thumbnail-wrapper
file metadata
<!-- EMBED APPEARS HERE -->
<div embed> </div>
</div>
<div item-summary-view-metadata>
URI
Date
etc...
</div>
<h2> appears in... </h2>
<ul> referenceSet-list </ul>
</div>
</div>
<!-- ds-options-wrapper nested WITHIN ds-body for some reason -->
<div ds-options-wrapper>
.....
</div>
</div>
</div>
Without Embed
<!-- id=" and class=" omitted -->
<div ds-content>
<div ds-body>
<div aspect_..._div_item-view>
<div item-summary-view-metadata>
</div>
<div file-list>
<div file-wrapper clearfix>
thumbnail-wrapper
file metadata
<!-- NO EMBED HERE -->
</div>
</div> <!-- file-list ends here ?? -->
<div item-summary-view-metadata>
URI
Date
etc...
</div>
<h2> appears in... </h2>
<ul referenceSet-list> </ul>
</div>
</div>
<!-- ds-options-wrapper nested OUTSIDE ds-body like normal -->
<div ds-options-wrapper>
.....
</div>
</div>
Although it doesn't seem like it should matter,
here is the code I've inserted into item-view.xsl
<xsl:template match="mets:file">
<xsl:param name="context" select="."/>
<div class="file-wrapper clearfix">
<div class="thumbnail-wrapper">
....
</div>
<div class="file-metadata">
....
</div>
<!-- INSERTED CODE TO GENERATE JS EMBED HERE -->
<!-- Only output is either .... -->
<xsl:variable name="quoteChar">"</xsl:variable>
<xsl:choose>
<xsl:when test="//dim:field[@element='identifier'][@qualifier='doi']">
<xsl:variable name="doiVar" select="//dim:field[@element='identifier'][@qualifier='doi']"></xsl:variable>
<!-- HERE -->
<div data-badge-type='medium-donut' class='altmetric-embed' data-badge-details='right' data-doi='{$doiVar}'></div>
</xsl:when>
<xsl:otherwise>
<xsl:if test="contains(//dim:field[@element='identifier'][@qualifier='citation'],'doi')">
<xsl:variable name="parseThis" select="//dim:field[@element='identifier'][@qualifier='citation']"></xsl:variable>
<xsl:variable name="tokenized" select="str:split($parseThis, 'doi:')" />
<xsl:for-each select="$tokenized">
<xsl:variable name="curtoken" select="."/>
<xsl:if test="contains($curtoken, '10.') and contains($curtoken, '/')">
<xsl:variable name="newtext">
<xsl:call-template name="string-trim">
<xsl:with-param name="string" select="$curtoken" />
</xsl:call-template>
</xsl:variable>
<!-- OR HERE -->
<div data-badge-type='medium-donut' class='altmetric-embed' data-badge-details='right' data-doi='{$newtext}'></div>
</xsl:if>
</xsl:for-each>
</xsl:if>
</xsl:otherwise>
</xsl:choose>
<!-- End Code -->
</div> <!-- end .file-wrapper clearfix-->
</xsl:template>
Note that when an embed exists then for some reason <div class="file-list> will also encapsulate nodes containing URI and Date, etc., but it does not do so when no embed exists.
What does the context parameter do? I see it called from within the template generating <div class="file-list">. In fact I don't have a clear idea at all what goes on inside the this template:
<div class="file-list">
<xsl:choose>
<xsl:when test="...">
...
<!-- what goes on here? -->
</xsl:when>
<xsl:otherwise>
<xsl:apply-templates select="mets:file">
<!-- what goes on here? -->
<xsl:with-param name="context" select="$context"/>
</xsl:apply-templates>
</xsl:otherwise>
</xsl:choose>
</div>
The problem are the empty div elements. It's a known issue that empty XHTML elements break the XHTML structure in older DSpace themes. You can fix this by adding a non-breaking space in the div:
<div data-badge-type='medium-donut' class='altmetric-embed' data-badge-details='right' data-doi='{$doiVar}'> </div>
If you search for   in the Mirage code you will see there are quite a lot of occurrences.
This issue is solved in Mirage 2.