diff --git a/wp-hyperaudio/hyperaudio-admin.php b/wp-hyperaudio/hyperaudio-admin.php index 50c1a58..f8715be 100644 --- a/wp-hyperaudio/hyperaudio-admin.php +++ b/wp-hyperaudio/hyperaudio-admin.php @@ -199,6 +199,7 @@ function hyperaudio_options_page() media-height640pxset the height of the audio or video font-familyArial, Helvetica, sans-serif;set the font family of the transcript idmytranscriptsets the id of the trancript for sharing purposes + show-activetruehighlights the word being played in a different colour. (false by default) webmonetizationtrueenables Web Monetization (false by default)

diff --git a/wp-hyperaudio/hyperaudio.php b/wp-hyperaudio/hyperaudio.php index fac47dd..76b93ab 100644 --- a/wp-hyperaudio/hyperaudio.php +++ b/wp-hyperaudio/hyperaudio.php @@ -32,6 +32,7 @@ function hyperaudio_shortcode_handler($atts, $transcript, $tag) $language = "en"; $trackLabel = "English"; $webmonetization = false; + $showActive = false; if (isset($atts['src'])) $src = esc_html__($atts['src']); if (isset($atts['width'])) $width = $atts['width']; @@ -48,6 +49,8 @@ function hyperaudio_shortcode_handler($atts, $transcript, $tag) if (isset($atts['track-label'])) $trackLabel = $atts['track-label']; if (isset($atts['webmonetization'])) $webmonetization = $atts['webmonetization']; + if (isset($atts['show-active'])) $showActive = $atts['show-active']; + $transcript = preg_replace( "/\r|\n/", "", $transcript); @@ -120,7 +123,7 @@ function hyperaudio_shortcode_handler($atts, $transcript, $tag) .speaker { font-weight: bold; } - + .hyperaudio-transcript a { text-decoration:none !important; }'; @@ -131,6 +134,13 @@ function hyperaudio_shortcode_handler($atts, $transcript, $tag) }'; } + if ($showActive == true) { + $o .=' .hyperaudio-transcript .active { + color: #0000cc !important; + }'; + } + + $o .=' .share-this-popover{max-width:8em;pointer-events:none;-webkit-filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));-webkit-animation:a .3s;animation:a .3s}.share-this-popover:before{content:"";position:absolute;bottom:100%;left:50%;width:0;height:0;margin:.25em -.5em;border-width:.5em .5em 0;border-style:solid;border-color:#333 transparent}.share-this-popover>ul{pointer-events:auto;list-style:none;padding:0;margin:-.75em 0 0;white-space:nowrap;background:#333;color:#fff;border-radius:.25em;position:absolute;left:50%;-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}.share-this-popover>ul>li{display:inline-block;width:2em;height:2em;line-height:2em;text-align:center}.share-this-popover>ul>li>a{display:inline-block;width:100%;height:100%;color:inherit;box-sizing:border-box;padding:.35em}.share-this-popover>ul>li>a:focus,.share-this-popover>ul>li>a:hover{background:hsla(0,0%,100%,.25)}@media (pointer:coarse){.share-this-popover{font-size:150%}.share-this-popover:before{bottom:auto;top:100%;border-width:0 .5em .5em;margin-top:0}.share-this-popover>ul{top:100%;transform:translateX(-50%);margin:.5em 0 0}}@media (max-width:575px){.share-this-popover{left:0!important;right:0!important;width:auto!important;max-width:none}.share-this-popover:before{bottom:auto;top:100%;border-width:0 .5em .5em;margin-top:0}.share-this-popover>ul{top:100%;transform:translateX(-50%);margin:.5em 0 0;left:0;width:100%;transform:none;border-radius:0;text-align:center}}@-webkit-keyframes a{0%{-webkit-transform:translateY(-3em);opacity:0}80%{-webkit-transform:translateY(.5em);opacity:1}to{-webkit-transform:translateY(0)}}@keyframes a{0%{transform:translateY(-3em);opacity:0}80%{transform:translateY(.5em);opacity:1}to{transform:translateY(0)}}'; diff --git a/wp-hyperaudio/js/hyperaudio-lite.js b/wp-hyperaudio/js/hyperaudio-lite.js index 30c515f..5bf9733 100644 --- a/wp-hyperaudio/js/hyperaudio-lite.js +++ b/wp-hyperaudio/js/hyperaudio-lite.js @@ -1,5 +1,5 @@ /*! (C) The Hyperaudio Project. MIT @license: en.wikipedia.org/wiki/MIT_License. */ -/*! Version 2.0.11 */ +/*! Version 2.0.13 */ 'use strict'; @@ -45,6 +45,7 @@ class HyperaudioLite { this.webMonetization = w; this.highlightedText = false; this.start = null; + if (this.autoscroll === true) { this.scroller = window.Velocity || window.jQuery.Velocity; @@ -56,7 +57,9 @@ class HyperaudioLite { this.wordArr = this.createWordArray(words); - this.paras = this.transcript.getElementsByTagName('p'); + this.parentTag = words[0].parentElement.tagName; + this.parentElements = this.transcript.getElementsByTagName(this.parentTag); + this.player = document.getElementById(mediaElementId); @@ -109,10 +112,10 @@ class HyperaudioLite { }; } - this.paraIndex = 0; + this.parentElementIndex = 0; words[0].classList.add('active'); - this.paras[0].classList.add('active'); + this.parentElements[0].classList.add('active'); let playHeadEvent = 'click'; @@ -132,7 +135,7 @@ class HyperaudioLite { let index = indices.currentWordIndex; if (index > 0) { - this.scrollToParagraph(indices.currentParaIndex, index); + this.scrollToParagraph(indices.currentParentElementIndex, index); } } @@ -321,7 +324,7 @@ class HyperaudioLite { } } - scrollToParagraph = (currentParaIndex, index) => { + scrollToParagraph = (currentParentElementIndex, index) => { let newPara = false; let scrollNode = this.wordArr[index - 1].n.parentNode; @@ -330,7 +333,7 @@ class HyperaudioLite { scrollNode = this.wordArr[index - 1].n; } - if (currentParaIndex != this.paraIndex) { + if (currentParentElementIndex != this.parentElementIndex) { if (typeof this.scroller !== 'undefined' && this.autoscroll === true) { if (scrollNode !== null) { @@ -352,13 +355,13 @@ class HyperaudioLite { // the wordlst needs refreshing let words = this.transcript.querySelectorAll('[data-m]'); this.wordArr = this.createWordArray(words); - this.paras = this.transcript.getElementsByTagName('p'); + this.parentElements = this.transcript.getElementsByTagName(this.parentTag); } } newPara = true; - this.paraIndex = currentParaIndex; + this.parentElementIndex = currentParentElementIndex; } return(newPara); } @@ -384,7 +387,7 @@ class HyperaudioLite { let index = indices.currentWordIndex; if (index > 0) { - newPara = this.scrollToParagraph(indices.currentParaIndex, index); + newPara = this.scrollToParagraph(indices.currentParentElementIndex, index); } //minimizedMode is still experimental - it changes document.title upon every new word @@ -500,13 +503,13 @@ class HyperaudioLite { } }); - this.paras = this.transcript.getElementsByTagName('p'); + this.parentElements = this.transcript.getElementsByTagName(this.parentTag); //remove active class from all paras - Array.from(this.paras).forEach(para => { - if (para.classList.contains('active')) { - para.classList.remove('active'); + Array.from(this.parentElements).forEach(el => { + if (el.classList.contains('active')) { + el.classList.remove('active'); } }); @@ -514,6 +517,7 @@ class HyperaudioLite { if (index > 0) { this.wordArr[index - 1].n.classList.add('active'); + if (this.wordArr[index - 1].n.parentNode !== null) { this.wordArr[index - 1].n.parentNode.classList.add('active'); } @@ -521,11 +525,11 @@ class HyperaudioLite { // Establish current paragraph index - let currentParaIndex; + let currentParentElementIndex; - Array.from(this.paras).every((para, i) => { - if (para.classList.contains('active')) { - currentParaIndex = i; + Array.from(this.parentElements).every((el, i) => { + if (el.classList.contains('active')) { + currentParentElementIndex = i; return false; } return true; @@ -533,7 +537,7 @@ class HyperaudioLite { let indices = { currentWordIndex: index, - currentParaIndex: currentParaIndex, + currentParentElementIndex: currentParentElementIndex, }; return indices; @@ -560,4 +564,4 @@ if (typeof module !== 'undefined' && module.exports) { module.exports = { HyperaudioLite }; } -//export default HyperaudioLite; \ No newline at end of file +//export default HyperaudioLite;