diff options
author | Shaun McCance <shaunm@gnome.org> | 2016-01-11 18:56:54 -0500 |
---|---|---|
committer | Shaun McCance <shaunm@gnome.org> | 2016-01-11 18:58:36 -0500 |
commit | 999f06dfb1c5cdd541adb24bff82a73d076969f1 (patch) | |
tree | ab296a6961accb0e0af99a1db0bddc478591e6fa /xslt | |
parent | 1c456b64f4d4219c041b2854c3ce4f23e67ac63c (diff) | |
download | yelp-xsl-999f06dfb1c5cdd541adb24bff82a73d076969f1.tar.gz |
common/html.xsl: New location.hash highlighting code
Changing the effect to a slight bounce instead of a color fade.
More importantly, it no longer uses jQuery, as I'm slowly fasing
it out.
Diffstat (limited to 'xslt')
-rw-r--r-- | xslt/common/html.xsl | 55 |
1 files changed, 32 insertions, 23 deletions
diff --git a/xslt/common/html.xsl b/xslt/common/html.xsl index 24e6ebc2..ed16d245 100644 --- a/xslt/common/html.xsl +++ b/xslt/common/html.xsl @@ -785,6 +785,18 @@ section { section section { margin-top: 1.44em; } +.yelp-hash-highlight { + animation-name: yelp-hash-highlight; + animation-duration: 0.5s; + animation-fill-mode: forwards; +} +@keyframes yelp-hash-highlight { + from { transform: translateY(0px) } + 25% { transform: translateY(20px); } + 50% { transform: translateY(0); } + 75% { transform: translateY(10px); } + to { transform: translateY(0px); } +} div.trails { margin: 0; padding: 0.2em 10px; @@ -1816,31 +1828,20 @@ Currently, it outputs code to highlight a section when #{location.hash} is set. <xsl:template name="html.js.core"> <xsl:param name="node" select="."/> <xsl:text> -var __yelp_generate_id_counter__ = 0; -function yelp_generate_id () { - var ret = 'yelp--' + (++__yelp_generate_id_counter__).toString(); - if ($('#' + ret).length != 0) - return yelp_generate_id(); - else - return ret; -}; -$(document).ready (function () { - var highlight_hash = function () { +document.addEventListener('DOMContentLoaded', function() { + var yelp_hash_highlight = function () { if (location.hash != '') { - var sect = $(location.hash); - sect.css('background-color', '</xsl:text><xsl:value-of select="$color.bg.yellow"/><xsl:text>'); - window.setTimeout(function () { - sect.css({ - '-webkit-transition': 'background-color 2s linear', - '-moz-transition': 'background-color 2s linear', - 'transition': 'background-color 2s linear', - 'background-color': 'rgba(1, 1, 1, 0)' - }); - }, 200); + var sect = document.querySelector(location.hash); + if (sect != null) { + sect.classList.add('yelp-hash-highlight'); + window.setTimeout(function () { + sect.classList.remove('yelp-hash-highlight'); + }, 500); + } } - }; - $(window).bind('hashchange', highlight_hash); - highlight_hash(); + } + window.addEventListener('hashchange', yelp_hash_highlight, false); + yelp_hash_highlight(); }); </xsl:text> </xsl:template> @@ -1884,6 +1885,14 @@ $.fn.yelp_ui_expander_toggle = function (onlyopen, callback) { title.html(yelpdata.children('div.yelp-title-expanded').html()); } }; +var __yelp_generate_id_counter__ = 0; +function yelp_generate_id () { + var ret = 'yelp--' + (++__yelp_generate_id_counter__).toString(); + if ($('#' + ret).length != 0) + return yelp_generate_id(); + else + return ret; +}; $(document).ready(function () { $('.ui-expander').each(function () { var expander = $(this); |