[yelp-xsl] Moved ui:thumb stuff to mal2html-ui
- From: Shaun McCance <shaunm src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [yelp-xsl] Moved ui:thumb stuff to mal2html-ui
- Date: Sun, 26 Feb 2012 18:02:11 +0000 (UTC)
commit ae2708c4e8d38dff45461488fe3356bfc0403055
Author: Shaun McCance <shaunm gnome org>
Date: Sun Feb 26 13:01:30 2012 -0500
Moved ui:thumb stuff to mal2html-ui
xslt/mallard/html/mal2html-api.xsl | 2 +-
xslt/mallard/html/mal2html-links.xsl | 261 +---------------------------
xslt/mallard/html/mal2html-page.xsl | 23 ++--
xslt/mallard/html/mal2html-ui.xsl | 324 +++++++++++++++++++++++++++++++++-
4 files changed, 340 insertions(+), 270 deletions(-)
---
diff --git a/xslt/mallard/html/mal2html-api.xsl b/xslt/mallard/html/mal2html-api.xsl
index 6a89fea..9b67e52 100644
--- a/xslt/mallard/html/mal2html-api.xsl
+++ b/xslt/mallard/html/mal2html-api.xsl
@@ -29,7 +29,7 @@ Free Software Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA
version="1.0">
<!--!!==========================================================================
-Mallard to HTML - UI Extension
+Mallard to HTML - API Extension
Support for Mallard API extension elements.
This stylesheet contains templates to support features from the Mallard API
diff --git a/xslt/mallard/html/mal2html-links.xsl b/xslt/mallard/html/mal2html-links.xsl
index 8727fc9..23cfc56 100644
--- a/xslt/mallard/html/mal2html-links.xsl
+++ b/xslt/mallard/html/mal2html-links.xsl
@@ -57,7 +57,7 @@ extension attributes on ${node}. This template (or the templates it calls)
will pass through #{class} and #{data-*} attributes found on the #{link}
elements to the top-level container element of each output link.
-This template will handle sorting of the links.
+This template handles link sorting.
If ${node} is a #{links} element with a #{title} element, that #{title}
element will be processed as the title. Otherwise, the optional ${title}
@@ -130,8 +130,8 @@ parameter will be used if provided.
<xsl:with-param name="role" select="$role"/>
</xsl:call-template>
</xsl:when>
- <xsl:when test="$node/self::mal:links/@ui:thumbs = 'mouseovers'">
- <xsl:call-template name="mal2html.ui.links.mouseovers">
+ <xsl:when test="$node/self::mal:links/@ui:thumbs = 'hover'">
+ <xsl:call-template name="mal2html.ui.links.hover">
<xsl:with-param name="node" select="$node"/>
<xsl:with-param name="links" select="$links"/>
<xsl:with-param name="role" select="$role"/>
@@ -217,7 +217,7 @@ This is a common formatting template used by some #{links} element handlers.
It outputs an HTML #{ul} element and calls *{mal2html.links.ul.li} on each
link to output a list item with a link.
-This template will handle sorting of the links.
+This template handles link sorting.
-->
<xsl:template name="mal2html.links.ul">
<xsl:param name="links" select="/false"/>
@@ -330,7 +330,6 @@ the links itself. They must be passed in with the ${links} parameter.
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
- <xsl:variable name="expander" select="$node/self::mal:links/@ui:expanded"/>
<xsl:if test="$links">
<xsl:call-template name="mal2html.links.links">
<xsl:with-param name="node" select="$node"/>
@@ -925,256 +924,4 @@ when determining which links to output.
<xsl:apply-templates mode="_mal2html.links.divs.nolink.mode" select="node()"/>
</xsl:template>
-
-<!-- UI -->
-<xsl:template name="mal2html.ui.links.grid">
- <xsl:param name="node" select="."/>
- <xsl:param name="links"/>
- <xsl:param name="role"/>
- <xsl:variable name="width">
- <xsl:choose>
- <xsl:when test="$node/@ui:width">
- <xsl:value-of select="$node/@ui:width"/>
- </xsl:when>
- <xsl:otherwise>
- <xsl:text>200</xsl:text>
- </xsl:otherwise>
- </xsl:choose>
- </xsl:variable>
- <xsl:variable name="height">
- <xsl:choose>
- <xsl:when test="$node/@ui:height">
- <xsl:value-of select="$node/@ui:height"/>
- </xsl:when>
- <xsl:otherwise>
- <xsl:text>200</xsl:text>
- </xsl:otherwise>
- </xsl:choose>
- </xsl:variable>
- <xsl:for-each select="$links">
- <xsl:sort data-type="number" select="@groupsort"/>
- <xsl:sort select="mal:title[ type = 'sort']"/>
- <xsl:variable name="link" select="."/>
- <xsl:for-each select="$mal.cache">
- <xsl:variable name="target" select="key('mal.cache.key', $link/@xref)"/>
- <div class="links-ui-grid {$link/@class}">
- <xsl:for-each select="$link/@*">
- <xsl:if test="starts-with(name(.), 'data-')">
- <xsl:copy-of select="."/>
- </xsl:if>
- </xsl:for-each>
- <xsl:variable name="thumbs" select="$target/mal:info/ui:thumb"/>
- <a>
- <xsl:attribute name="href">
- <xsl:call-template name="mal.link.target">
- <xsl:with-param name="node" select="$node"/>
- <xsl:with-param name="xref" select="$link/@xref"/>
- </xsl:call-template>
- </xsl:attribute>
- <xsl:attribute name="title">
- <xsl:call-template name="mal.link.tooltip">
- <xsl:with-param name="node" select="$node"/>
- <xsl:with-param name="xref" select="$link/@xref"/>
- </xsl:call-template>
- </xsl:attribute>
- <span class="links-ui-grid-img" style="width: {$width}px; height: {$height}px;">
- <xsl:call-template name="mal2html.ui.links.img">
- <xsl:with-param name="links" select="$node"/>
- <xsl:with-param name="thumbs" select="$thumbs"/>
- <xsl:with-param name="width" select="$width"/>
- <xsl:with-param name="height" select="$height"/>
- </xsl:call-template>
- </span>
- <span class="title" style="width: {$width}px; max-height: {number($height) div 2}px;">
- <xsl:call-template name="mal.link.content">
- <xsl:with-param name="node" select="$node"/>
- <xsl:with-param name="xref" select="$link/@xref"/>
- <xsl:with-param name="role" select="$role"/>
- </xsl:call-template>
- </span>
- <xsl:if test="not(contains(concat(' ', $node/@style, ' '), ' nodesc '))">
- <xsl:if test="$target/mal:info/mal:desc">
- <span class="desc" style="width: {$width}px; max-height: {number($height) div 2}px;">
- <xsl:apply-templates select="$target/mal:info/mal:desc/node()"/>
- </span>
- </xsl:if>
- </xsl:if>
- </a>
- </div>
- </xsl:for-each>
- </xsl:for-each>
-</xsl:template>
-
-<xsl:template name="mal2html.ui.links.mouseovers">
- <xsl:param name="node"/>
- <xsl:param name="links"/>
- <xsl:param name="role"/>
- <xsl:variable name="width">
- <xsl:choose>
- <xsl:when test="$node/@ui:width">
- <xsl:value-of select="$node/@ui:width"/>
- </xsl:when>
- <xsl:otherwise>
- <xsl:text>250</xsl:text>
- </xsl:otherwise>
- </xsl:choose>
- </xsl:variable>
- <xsl:variable name="height">
- <xsl:choose>
- <xsl:when test="$node/@ui:height">
- <xsl:value-of select="$node/@ui:height"/>
- </xsl:when>
- <xsl:otherwise>
- <xsl:text>200</xsl:text>
- </xsl:otherwise>
- </xsl:choose>
- </xsl:variable>
- <div class="links-ui-mouseovers" style="width: {$width}px; height: {$height}px;">
- <xsl:for-each select="$node/ui:thumb[1]">
- <img>
- <xsl:copy-of select="@src | @width | @height"/>
- <xsl:call-template name="mal2html.ui.links.img.attrs">
- <xsl:with-param name="links" select="$node"/>
- <xsl:with-param name="thumb" select="."/>
- <xsl:with-param name="width" select="$width"/>
- <xsl:with-param name="height" select="$height"/>
- </xsl:call-template>
- </img>
- </xsl:for-each>
- </div>
- <ul class="links-ui-mouseovers">
- <xsl:for-each select="$links">
- <xsl:sort data-type="number" select="@groupsort"/>
- <xsl:sort select="mal:title[ type = 'sort']"/>
- <xsl:variable name="link" select="."/>
- <xsl:variable name="xref" select="@xref"/>
- <xsl:for-each select="$mal.cache">
- <xsl:variable name="target" select="key('mal.cache.key', $xref)"/>
- <xsl:variable name="thumbs" select="$target/mal:info/ui:thumb"/>
- <li class="links {$link/@class}">
- <xsl:for-each select="$link/@*">
- <xsl:if test="starts-with(name(.), 'data-')">
- <xsl:copy-of select="."/>
- </xsl:if>
- </xsl:for-each>
- <a class="bold">
- <xsl:attribute name="href">
- <xsl:call-template name="mal.link.target">
- <xsl:with-param name="xref" select="$xref"/>
- </xsl:call-template>
- </xsl:attribute>
- <xsl:attribute name="title">
- <xsl:call-template name="mal.link.tooltip">
- <xsl:with-param name="xref" select="$xref"/>
- <xsl:with-param name="role" select="$role"/>
- </xsl:call-template>
- </xsl:attribute>
- <span style="width: {$width}px; height: {$height}px;">
- <xsl:call-template name="mal2html.ui.links.img">
- <xsl:with-param name="links" select="$node"/>
- <xsl:with-param name="thumbs" select="$thumbs"/>
- <xsl:with-param name="width" select="$width"/>
- <xsl:with-param name="height" select="$height"/>
- </xsl:call-template>
- </span>
- <xsl:call-template name="mal.link.content">
- <xsl:with-param name="node" select="."/>
- <xsl:with-param name="xref" select="$xref"/>
- <xsl:with-param name="role" select="$role"/>
- </xsl:call-template>
- </a>
- </li>
- </xsl:for-each>
- </xsl:for-each>
- </ul>
- <div class="clear"/>
-</xsl:template>
-
-<xsl:template name="mal2html.ui.links.img">
- <xsl:param name="links"/>
- <xsl:param name="thumbs"/>
- <xsl:param name="width" select="$links/@ui:width"/>
- <xsl:param name="height" select="$links/@ui:height"/>
- <xsl:if test="$thumbs">
- <img>
- <xsl:for-each select="$thumbs">
- <xsl:sort data-type="number" select="number(not(@width))"/>
- <xsl:sort data-type="number" select="number(not(@height))"/>
- <xsl:sort data-type="number" select="($width div $height) div (@width div @height)"/>
- <xsl:sort data-type="number" select="math:abs($width - @width)"/>
- <xsl:sort data-type="number" select="math:abs($height - @height)"/>
- <xsl:if test="position() = 1">
- <xsl:attribute name="src">
- <xsl:value-of select="@src"/>
- </xsl:attribute>
- <xsl:call-template name="mal2html.ui.links.img.attrs">
- <xsl:with-param name="links" select="$links"/>
- <xsl:with-param name="thumb" select="."/>
- <xsl:with-param name="width" select="$width"/>
- <xsl:with-param name="height" select="$height"/>
- </xsl:call-template>
- </xsl:if>
- </xsl:for-each>
- </img>
- </xsl:if>
-</xsl:template>
-
-<xsl:template name="mal2html.ui.links.img.attrs">
- <xsl:param name="links"/>
- <xsl:param name="thumb"/>
- <xsl:param name="width" select="$links/@ui:width"/>
- <xsl:param name="height" select="$links/@ui:height"/>
- <xsl:choose>
- <xsl:when test="$links/@ui:overflow = 'crop'"/>
- <xsl:when test="$links/@ui:overflow = 'width'">
- <xsl:attribute name="width">
- <xsl:value-of select="$width"/>
- </xsl:attribute>
- </xsl:when>
- <xsl:when test="$links/@ui:overflow = 'height'">
- <xsl:attribute name="height">
- <xsl:value-of select="$height"/>
- </xsl:attribute>
- </xsl:when>
- <xsl:when test="$links/@ui:overflow = 'scale'">
- <xsl:attribute name="width">
- <xsl:value-of select="$width"/>
- </xsl:attribute>
- <xsl:attribute name="height">
- <xsl:value-of select="$height"/>
- </xsl:attribute>
- </xsl:when>
- <xsl:when test="$thumb/@width and $thumb/@height">
- <xsl:variable name="ratio" select="$width div $height"/>
- <xsl:variable name="tratio" select="$thumb/@width div $thumb/@height"/>
- <xsl:choose>
- <xsl:when test="$ratio < $tratio">
- <xsl:attribute name="width">
- <xsl:value-of select="$width"/>
- </xsl:attribute>
- <xsl:attribute name="height">
- <xsl:value-of select="round($width * ($thumb/@height div $thumb/@width))"/>
- </xsl:attribute>
- </xsl:when>
- <xsl:otherwise>
- <xsl:attribute name="width">
- <xsl:value-of select="round($height * ($thumb/@width div $thumb/@height))"/>
- </xsl:attribute>
- <xsl:attribute name="height">
- <xsl:value-of select="$height"/>
- </xsl:attribute>
- </xsl:otherwise>
- </xsl:choose>
- </xsl:when>
- <xsl:otherwise>
- <xsl:attribute name="width">
- <xsl:value-of select="$width"/>
- </xsl:attribute>
- <xsl:attribute name="height">
- <xsl:value-of select="$height"/>
- </xsl:attribute>
- </xsl:otherwise>
- </xsl:choose>
-</xsl:template>
-
</xsl:stylesheet>
diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index f28b5bd..b9b044e 100644
--- a/xslt/mallard/html/mal2html-page.xsl
+++ b/xslt/mallard/html/mal2html-page.xsl
@@ -938,23 +938,24 @@ div.links-ui-grid > a > span.title {
font-weight: bold;
}
-div.links-ui-mouseovers {
+div.links-ui-hover {
text-align: center;
margin: 0;
float: </xsl:text><xsl:value-of select="$left"/><xsl:text>;
+ margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 1.2em;
overflow: hidden;
}
-ul.links-ui-mouseovers li { margin: 0; }
-ul.links-ui-mouseovers a {
- display: inline-block;
+ul.links-ui-hover li { margin: 0; }
+ul.links-ui-hover a {
+ display: block;
padding: 4px 1.2em 4px 1.2em;
border-bottom: none;
}
-ul.links-ui-mouseovers a:hover {
+ul.links-ui-hover a:hover {
text-decoration: none;
background: </xsl:text><xsl:value-of select="$color.blue_background"/><xsl:text>;
}
-ul.links-ui-mouseovers a > span {
+span.links-ui-hover-img {
display: none;
position: absolute;
margin: 0; padding: 0;
@@ -963,13 +964,13 @@ ul.links-ui-mouseovers a > span {
text-align: center;
}
@media only screen and (max-width: 400px) {
- ul.links-ui-mouseovers a {
+ ul.links-ui-hover a {
display: block;
padding: 12px;
margin-left: -12px;
margin-right: -12px;
}
- div.links-ui-mouseovers { display: none; }
+ div.links-ui-hover { display: none; }
}
div.links-grid {
@@ -1234,7 +1235,7 @@ $(document).ready(function () {
);
});
});
- $('div.links-ui-mouseovers').each(function () {
+ $('div.links-ui-hover').each(function () {
var contdiv = $(this);
var width = 0;
var height = 0;
@@ -1245,11 +1246,11 @@ $(document).ready(function () {
if (contdiv.is(':visible')) {
var offset = contdiv.offset();
mlink.find('img').parent('span').css({left: offset.left, top: offset.top, zIndex: 10});
- mlink.find('img').parent('span').fadeIn('slow');
+ mlink.find('img').parent('span').show();
}
},
function () {
- mlink.find('img').parent('span').fadeOut('slow');
+ mlink.find('img').parent('span').hide();
}
);
});
diff --git a/xslt/mallard/html/mal2html-ui.xsl b/xslt/mallard/html/mal2html-ui.xsl
index 268f47a..a98f8f2 100644
--- a/xslt/mallard/html/mal2html-ui.xsl
+++ b/xslt/mallard/html/mal2html-ui.xsl
@@ -35,7 +35,7 @@ extension.
<!--**==========================================================================
mal2html.ui.expander.data
Output data for an expander.
-:Revision:version="1.0" date="2011-06-14" status="final"
+:Revision:version="3.4" date="2012-02-25" status="final"
$node: The source element to output data for.
$expander: Whether ${node} is actually an expander.
@@ -87,4 +87,326 @@ for blocks that produce automatic titles.
</xsl:if>
</xsl:template>
+
+<!--**==========================================================================
+mal2html.ui.links.grid
+Output links as a grid of thumbnails.
+:Revision:version="3.4" date="2012-02-25" status="final"
+$node: A #{links} element to link from.
+$links: A list of links, as from a template in !{mal-link}.
+$role: A link role, used to select the appropriate title.
+
+This template outputs links as a grid of thumbnails, as per the UI extension.
+For each link, it outputs an inline-block #{div} element with a thumbnail,
+title, and desc (unless the #{nodesc} style hint is used). This template calls
+*{mal2html.ui.links.img} to find the best-match thumbnail and output the HTML
+#{img} element for each link.
+
+This template handles link sorting.
+-->
+<xsl:template name="mal2html.ui.links.grid">
+ <xsl:param name="node" select="."/>
+ <xsl:param name="links"/>
+ <xsl:param name="role"/>
+ <xsl:variable name="width">
+ <xsl:choose>
+ <xsl:when test="$node/@ui:width">
+ <xsl:value-of select="$node/@ui:width"/>
+ </xsl:when>
+ <xsl:otherwise>
+ <xsl:text>200</xsl:text>
+ </xsl:otherwise>
+ </xsl:choose>
+ </xsl:variable>
+ <xsl:variable name="height">
+ <xsl:choose>
+ <xsl:when test="$node/@ui:height">
+ <xsl:value-of select="$node/@ui:height"/>
+ </xsl:when>
+ <xsl:otherwise>
+ <xsl:text>200</xsl:text>
+ </xsl:otherwise>
+ </xsl:choose>
+ </xsl:variable>
+ <xsl:for-each select="$links">
+ <xsl:sort data-type="number" select="@groupsort"/>
+ <xsl:sort select="mal:title[ type = 'sort']"/>
+ <xsl:variable name="link" select="."/>
+ <xsl:for-each select="$mal.cache">
+ <xsl:variable name="target" select="key('mal.cache.key', $link/@xref)"/>
+ <div class="links-ui-grid {$link/@class}">
+ <xsl:for-each select="$link/@*">
+ <xsl:if test="starts-with(name(.), 'data-')">
+ <xsl:copy-of select="."/>
+ </xsl:if>
+ </xsl:for-each>
+ <xsl:variable name="thumbs" select="$target/mal:info/ui:thumb"/>
+ <a>
+ <xsl:attribute name="href">
+ <xsl:call-template name="mal.link.target">
+ <xsl:with-param name="node" select="$node"/>
+ <xsl:with-param name="xref" select="$link/@xref"/>
+ </xsl:call-template>
+ </xsl:attribute>
+ <xsl:attribute name="title">
+ <xsl:call-template name="mal.link.tooltip">
+ <xsl:with-param name="node" select="$node"/>
+ <xsl:with-param name="xref" select="$link/@xref"/>
+ </xsl:call-template>
+ </xsl:attribute>
+ <span class="links-ui-grid-img" style="width: {$width}px; height: {$height}px;">
+ <xsl:call-template name="mal2html.ui.links.img">
+ <xsl:with-param name="node" select="$node"/>
+ <xsl:with-param name="thumbs" select="$thumbs"/>
+ <xsl:with-param name="width" select="$width"/>
+ <xsl:with-param name="height" select="$height"/>
+ </xsl:call-template>
+ </span>
+ <span class="title" style="width: {$width}px; max-height: {number($height) div 2}px;">
+ <xsl:call-template name="mal.link.content">
+ <xsl:with-param name="node" select="$node"/>
+ <xsl:with-param name="xref" select="$link/@xref"/>
+ <xsl:with-param name="role" select="$role"/>
+ </xsl:call-template>
+ </span>
+ <xsl:if test="not(contains(concat(' ', $node/@style, ' '), ' nodesc '))">
+ <xsl:if test="$target/mal:info/mal:desc">
+ <span class="desc" style="width: {$width}px; max-height: {number($height) div 2}px;">
+ <xsl:apply-templates select="$target/mal:info/mal:desc/node()"/>
+ </span>
+ </xsl:if>
+ </xsl:if>
+ </a>
+ </div>
+ </xsl:for-each>
+ </xsl:for-each>
+</xsl:template>
+
+
+<!--**==========================================================================
+mal2html.ui.links.hover
+Output links with thumbnails shown on hover.
+:Revision:version="3.4" date="2012-02-26" status="final"
+$node: A #{links} element to link from.
+$links: A list of links, as from a template in !{mal-link}.
+$role: A link role, used to select the appropriate title.
+
+This template outputs links alongside thumbnail images, using the UI extension.
+The thumbnail image for each link is shown when the user hovers over that link.
+This template calls *{mal2html.ui.links.img} to find the best-match thumbnail
+and output the HTML #{img} element for each link.
+
+If ${node} contains a #{ui:thumb} element, that image is used when no links
+are hovered.
+
+This template handles link sorting.
+-->
+<xsl:template name="mal2html.ui.links.hover">
+ <xsl:param name="node"/>
+ <xsl:param name="links"/>
+ <xsl:param name="role"/>
+ <xsl:variable name="width">
+ <xsl:choose>
+ <xsl:when test="$node/@ui:width">
+ <xsl:value-of select="$node/@ui:width"/>
+ </xsl:when>
+ <xsl:otherwise>
+ <xsl:text>250</xsl:text>
+ </xsl:otherwise>
+ </xsl:choose>
+ </xsl:variable>
+ <xsl:variable name="height">
+ <xsl:choose>
+ <xsl:when test="$node/@ui:height">
+ <xsl:value-of select="$node/@ui:height"/>
+ </xsl:when>
+ <xsl:otherwise>
+ <xsl:text>200</xsl:text>
+ </xsl:otherwise>
+ </xsl:choose>
+ </xsl:variable>
+ <div class="links-ui-hover" style="width: {$width}px; height: {$height}px;">
+ <xsl:for-each select="$node/ui:thumb[1]">
+ <img>
+ <xsl:copy-of select="@src"/>
+ <xsl:call-template name="mal2html.ui.links.img.attrs">
+ <xsl:with-param name="node" select="$node"/>
+ <xsl:with-param name="thumb" select="."/>
+ <xsl:with-param name="width" select="$width"/>
+ <xsl:with-param name="height" select="$height"/>
+ </xsl:call-template>
+ </img>
+ </xsl:for-each>
+ </div>
+ <ul class="links-ui-hover">
+ <xsl:for-each select="$links">
+ <xsl:sort data-type="number" select="@groupsort"/>
+ <xsl:sort select="mal:title[ type = 'sort']"/>
+ <xsl:variable name="link" select="."/>
+ <xsl:variable name="xref" select="@xref"/>
+ <xsl:for-each select="$mal.cache">
+ <xsl:variable name="target" select="key('mal.cache.key', $xref)"/>
+ <xsl:variable name="thumbs" select="$target/mal:info/ui:thumb"/>
+ <li class="links {$link/@class}">
+ <xsl:for-each select="$link/@*">
+ <xsl:if test="starts-with(name(.), 'data-')">
+ <xsl:copy-of select="."/>
+ </xsl:if>
+ </xsl:for-each>
+ <a class="bold">
+ <xsl:attribute name="href">
+ <xsl:call-template name="mal.link.target">
+ <xsl:with-param name="xref" select="$xref"/>
+ </xsl:call-template>
+ </xsl:attribute>
+ <xsl:attribute name="title">
+ <xsl:call-template name="mal.link.tooltip">
+ <xsl:with-param name="xref" select="$xref"/>
+ <xsl:with-param name="role" select="$role"/>
+ </xsl:call-template>
+ </xsl:attribute>
+ <span class="links-ui-hover-img" style="width: {$width}px; height: {$height}px;">
+ <xsl:call-template name="mal2html.ui.links.img">
+ <xsl:with-param name="node" select="$node"/>
+ <xsl:with-param name="thumbs" select="$thumbs"/>
+ <xsl:with-param name="width" select="$width"/>
+ <xsl:with-param name="height" select="$height"/>
+ </xsl:call-template>
+ </span>
+ <span class="title">
+ <xsl:call-template name="mal.link.content">
+ <xsl:with-param name="node" select="."/>
+ <xsl:with-param name="xref" select="$xref"/>
+ <xsl:with-param name="role" select="$role"/>
+ </xsl:call-template>
+ </span>
+ </a>
+ </li>
+ </xsl:for-each>
+ </xsl:for-each>
+ </ul>
+ <div class="clear"/>
+</xsl:template>
+
+
+<!--**==========================================================================
+mal2html.ui.links.img
+Output an image for a link using UI thumbnails.
+:Revision:version="3.4" date="2012-02-25" status="final"
+$node: A #{links} element to link from.
+$thumbs: A list of candidate #{ui:thumb} elements.
+$width: The width to fit thumbnails into.
+$height: The height to fit thumbnails into.
+
+This template selects the best-fit thumbnail from ${thumbs}, based on how well
+the aspect ratio and dimensions of each image matches the ${width} and ${height}
+parameters. It outputs an HTML #{img} element for the best-fit thumbnail and
+calls ${mal2html.ui.links.img.attrs} to output #{width} and #{height}
+attributes.
+
+The ${width} and ${height} parameters can be computed automatically from the
+${node} element.
+-->
+<xsl:template name="mal2html.ui.links.img">
+ <xsl:param name="node"/>
+ <xsl:param name="thumbs"/>
+ <xsl:param name="width" select="$node/@ui:width"/>
+ <xsl:param name="height" select="$node/@ui:height"/>
+ <xsl:if test="$thumbs">
+ <img>
+ <xsl:for-each select="$thumbs">
+ <xsl:sort data-type="number" select="number(not(@width))"/>
+ <xsl:sort data-type="number" select="number(not(@height))"/>
+ <xsl:sort data-type="number" select="($width div $height) div (@width div @height)"/>
+ <xsl:sort data-type="number" select="math:abs($width - @width)"/>
+ <xsl:sort data-type="number" select="math:abs($height - @height)"/>
+ <xsl:if test="position() = 1">
+ <xsl:attribute name="src">
+ <xsl:value-of select="@src"/>
+ </xsl:attribute>
+ <xsl:call-template name="mal2html.ui.links.img.attrs">
+ <xsl:with-param name="node" select="$node"/>
+ <xsl:with-param name="thumb" select="."/>
+ <xsl:with-param name="width" select="$width"/>
+ <xsl:with-param name="height" select="$height"/>
+ </xsl:call-template>
+ </xsl:if>
+ </xsl:for-each>
+ </img>
+ </xsl:if>
+</xsl:template>
+
+
+<!--**==========================================================================
+mal2html.ui.links.img.attrs
+Output the #{width} and #{height} attributes for a thumbnail image.
+:Revision:version="3.4" date="2012-02-25" status="final"
+$node: A #{links} element to link from.
+$thumbs: A list of candidate #{ui:thumb} elements.
+$width: The width to fit thumbnails into.
+$height: The height to fit thumbnails into.
+
+This template outputs #{width} and #{height} attributes for the HTML #{img}
+element created from ${thumb}, based on the #{ui:overflow} attribute on ${node}.
+The ${width} and ${height} parameters can be computed automatically from the
+${node} element.
+-->
+<xsl:template name="mal2html.ui.links.img.attrs">
+ <xsl:param name="node"/>
+ <xsl:param name="thumb"/>
+ <xsl:param name="width" select="$node/@ui:width"/>
+ <xsl:param name="height" select="$node/@ui:height"/>
+ <xsl:choose>
+ <xsl:when test="$node/@ui:overflow = 'crop'"/>
+ <xsl:when test="$node/@ui:overflow = 'width'">
+ <xsl:attribute name="width">
+ <xsl:value-of select="$width"/>
+ </xsl:attribute>
+ </xsl:when>
+ <xsl:when test="$node/@ui:overflow = 'height'">
+ <xsl:attribute name="height">
+ <xsl:value-of select="$height"/>
+ </xsl:attribute>
+ </xsl:when>
+ <xsl:when test="$node/@ui:overflow = 'scale'">
+ <xsl:attribute name="width">
+ <xsl:value-of select="$width"/>
+ </xsl:attribute>
+ <xsl:attribute name="height">
+ <xsl:value-of select="$height"/>
+ </xsl:attribute>
+ </xsl:when>
+ <xsl:when test="$thumb/@width and $thumb/@height">
+ <xsl:variable name="ratio" select="$width div $height"/>
+ <xsl:variable name="tratio" select="$thumb/@width div $thumb/@height"/>
+ <xsl:choose>
+ <xsl:when test="$ratio < $tratio">
+ <xsl:attribute name="width">
+ <xsl:value-of select="$width"/>
+ </xsl:attribute>
+ <xsl:attribute name="height">
+ <xsl:value-of select="round($width * ($thumb/@height div $thumb/@width))"/>
+ </xsl:attribute>
+ </xsl:when>
+ <xsl:otherwise>
+ <xsl:attribute name="width">
+ <xsl:value-of select="round($height * ($thumb/@width div $thumb/@height))"/>
+ </xsl:attribute>
+ <xsl:attribute name="height">
+ <xsl:value-of select="$height"/>
+ </xsl:attribute>
+ </xsl:otherwise>
+ </xsl:choose>
+ </xsl:when>
+ <xsl:otherwise>
+ <xsl:attribute name="width">
+ <xsl:value-of select="$width"/>
+ </xsl:attribute>
+ <xsl:attribute name="height">
+ <xsl:value-of select="$height"/>
+ </xsl:attribute>
+ </xsl:otherwise>
+ </xsl:choose>
+</xsl:template>
+
</xsl:stylesheet>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
