Skip to content

GitLab

Commit c95292be authored by i❤computers's avatar i❤computers
Browse files
Options

Replace class with data-cue-position

parent 1a427b32
Hide whitespace changes
Inline Side-by-side
Showing with 121 additions and 121 deletions
index.html
View file @ c95292be
......@@ -64,136 +64,136 @@
<div>
<article>
<p>
<span class="cue-position-0">This </span>
<span class="cue-position-1">is </span>
<span class="cue-position-2">99% </span>
<span class="cue-position-3">invisible, </span>
<span class="cue-position-4">I&#39;m </span>
<span class="cue-position-5">Roman </span>
<span class="cue-position-6">Mars. </span>
<span data-cue-position="0">This </span>
<span data-cue-position="1">is </span>
<span data-cue-position="2">99% </span>
<span data-cue-position="3">invisible, </span>
<span data-cue-position="4">I&#39;m </span>
<span data-cue-position="5">Roman </span>
<span data-cue-position="6">Mars. </span>
</p>
<h1>
<span class="cue-position-7">The </span>
<span class="cue-position-8">five </span>
<span class="cue-position-9">basic </span>
<span class="cue-position-10">principles </span>
<span class="cue-position-11">of </span>
<span class="cue-position-12">flag </span>
<span class="cue-position-13">design </span>
<span data-cue-position="7">The </span>
<span data-cue-position="8">five </span>
<span data-cue-position="9">basic </span>
<span data-cue-position="10">principles </span>
<span data-cue-position="11">of </span>
<span data-cue-position="12">flag </span>
<span data-cue-position="13">design </span>
</h1>
<p>
<span class="cue-position-7">The </span>
<span class="cue-position-8">five </span>
<span class="cue-position-9">basic </span>
<span class="cue-position-10">principles </span>
<span class="cue-position-11">of </span>
<span class="cue-position-12">flag </span>
<span class="cue-position-13">design </span>
<span class="cue-position-14">according </span>
<span class="cue-position-15">to the </span>
<span class="cue-position-16">North American </span>
<span class="cue-position-17">Vexillological </span>
<span class="cue-position-19">(Vex-</span><span class="cue-position-20">illo-</span><span
class="cue-position-21">logical. </span>
<span class="cue-position-26">It&#39;s the </span>
<span class="cue-position-27">extra </span>
<span class="cue-position-28">&#39;lol&#39; </span>
<span class="cue-position-29">that makes </span>
<span class="cue-position-30">it sound </span>
<span class="cue-position-31">weird) </span>
<span class="cue-position-18">Association. </span>
<span class="cue-position-22">Vexillology </span>
<span class="cue-position-23">is the </span>
<span class="cue-position-24">study of </span>
<span class="cue-position-25">flags. </span>
<span data-cue-position="7">The </span>
<span data-cue-position="8">five </span>
<span data-cue-position="9">basic </span>
<span data-cue-position="10">principles </span>
<span data-cue-position="11">of </span>
<span data-cue-position="12">flag </span>
<span data-cue-position="13">design </span>
<span data-cue-position="14">according </span>
<span data-cue-position="15">to the </span>
<span data-cue-position="16">North American </span>
<span data-cue-position="17">Vexillological </span>
<span data-cue-position="19">(Vex-</span><span data-cue-position="20">illo-</span><span
data-cue-position="21">logical. </span>
<span data-cue-position="26">It&#39;s the </span>
<span data-cue-position="27">extra </span>
<span data-cue-position="28">&#39;lol&#39; </span>
<span data-cue-position="29">that makes </span>
<span data-cue-position="30">it sound </span>
<span data-cue-position="31">weird) </span>
<span data-cue-position="18">Association. </span>
<span data-cue-position="22">Vexillology </span>
<span data-cue-position="23">is the </span>
<span data-cue-position="24">study of </span>
<span data-cue-position="25">flags. </span>
</p>
<h1>
<span class="cue-position-32">Number </span>
<span class="cue-position-33">one: </span>
<span class="cue-position-34">Keep </span>
<span class="cue-position-35">it simple. </span>
<span data-cue-position="32">Number </span>
<span data-cue-position="33">one: </span>
<span data-cue-position="34">Keep </span>
<span data-cue-position="35">it simple. </span>
</h1>
<p>
<span class="cue-position-36">The flag </span>
<span class="cue-position-37">should be </span>
<span class="cue-position-38">so simple </span>
<span class="cue-position-39">that a </span>
<span class="cue-position-40">child </span>
<span class="cue-position-41">can draw it </span>
<span class="cue-position-42">from memory. </span>
<span class="cue-position-43">Before I </span>
<span class="cue-position-44">moved to </span>
<span class="cue-position-45">Chicago, </span>
<span class="cue-position-46">in 2005, </span>
<span class="cue-position-47">I didn&#39;t </span>
<span class="cue-position-48">even </span>
<span class="cue-position-49">know cities </span>
<span class="cue-position-50">had </span>
<span class="cue-position-51">their own </span>
<span class="cue-position-52">flags. </span>
<span class="cue-position-53">&quot;Most </span>
<span class="cue-position-54">larger </span>
<span class="cue-position-55">cities </span>
<span class="cue-position-56">have </span>
<span class="cue-position-57">flags.&quot; </span>
<span class="cue-position-60">That&#39;s Ted K., </span>
<span class="cue-position-62">flag expert, </span>
<span class="cue-position-63">totally awesome </span>
<span class="cue-position-64">guy. </span>
<span class="cue-position-65">&quot;I&#39;m </span>
<span class="cue-position-66">the editor </span>
<span class="cue-position-67">of </span>
<span class="cue-position-68">a </span>
<span class="cue-position-69">scholarly </span>
<span class="cue-position-70">journal </span>
<span class="cue-position-71">on </span>
<span class="cue-position-72">flags </span>
<span class="cue-position-73">called </span>
<span class="cue-position-74">&#39;Raven: </span>
<span class="cue-position-75">A </span>
<span class="cue-position-76">Journal </span>
<span class="cue-position-77">of Vexillology.&#39;&quot; </span>
<span class="cue-position-78">And that </span>
<span class="cue-position-79">first city flag </span>
<span class="cue-position-80">I discovered in Chicago </span>
<span class="cue-position-81">is a beaut: </span>
<span class="cue-position-82">a white </span>
<span class="cue-position-83">field, </span>
<span class="cue-position-84">two light </span>
<span class="cue-position-85">blue </span>
<span class="cue-position-86">horizontal </span>
<span class="cue-position-87">stripes, </span>
<span class="cue-position-88">and </span>
<span class="cue-position-89">four </span>
<span class="cue-position-90">six-pointed </span>
<span class="cue-position-91">red </span>
<span class="cue-position-92">stars </span>
<span class="cue-position-93">across </span>
<span class="cue-position-94">the middle. </span>
<span data-cue-position="36">The flag </span>
<span data-cue-position="37">should be </span>
<span data-cue-position="38">so simple </span>
<span data-cue-position="39">that a </span>
<span data-cue-position="40">child </span>
<span data-cue-position="41">can draw it </span>
<span data-cue-position="42">from memory. </span>
<span data-cue-position="43">Before I </span>
<span data-cue-position="44">moved to </span>
<span data-cue-position="45">Chicago, </span>
<span data-cue-position="46">in 2005, </span>
<span data-cue-position="47">I didn&#39;t </span>
<span data-cue-position="48">even </span>
<span data-cue-position="49">know cities </span>
<span data-cue-position="50">had </span>
<span data-cue-position="51">their own </span>
<span data-cue-position="52">flags. </span>
<span data-cue-position="53">&quot;Most </span>
<span data-cue-position="54">larger </span>
<span data-cue-position="55">cities </span>
<span data-cue-position="56">have </span>
<span data-cue-position="57">flags.&quot; </span>
<span data-cue-position="60">That&#39;s Ted K., </span>
<span data-cue-position="62">flag expert, </span>
<span data-cue-position="63">totally awesome </span>
<span data-cue-position="64">guy. </span>
<span data-cue-position="65">&quot;I&#39;m </span>
<span data-cue-position="66">the editor </span>
<span data-cue-position="67">of </span>
<span data-cue-position="68">a </span>
<span data-cue-position="69">scholarly </span>
<span data-cue-position="70">journal </span>
<span data-cue-position="71">on </span>
<span data-cue-position="72">flags </span>
<span data-cue-position="73">called </span>
<span data-cue-position="74">&#39;Raven: </span>
<span data-cue-position="75">A </span>
<span data-cue-position="76">Journal </span>
<span data-cue-position="77">of Vexillology.&#39;&quot; </span>
<span data-cue-position="78">And that </span>
<span data-cue-position="79">first city flag </span>
<span data-cue-position="80">I discovered in Chicago </span>
<span data-cue-position="81">is a beaut: </span>
<span data-cue-position="82">a white </span>
<span data-cue-position="83">field, </span>
<span data-cue-position="84">two light </span>
<span data-cue-position="85">blue </span>
<span data-cue-position="86">horizontal </span>
<span data-cue-position="87">stripes, </span>
<span data-cue-position="88">and </span>
<span data-cue-position="89">four </span>
<span data-cue-position="90">six-pointed </span>
<span data-cue-position="91">red </span>
<span data-cue-position="92">stars </span>
<span data-cue-position="93">across </span>
<span data-cue-position="94">the middle. </span>
</p>
<h1>
<span class="cue-position-95">Number </span>
<span class="cue-position-96">two: </span>
<span class="cue-position-103">Use </span>
<span class="cue-position-104">meaningful </span>
<span class="cue-position-105">symbolism. </span>
<span data-cue-position="95">Number </span>
<span data-cue-position="96">two: </span>
<span data-cue-position="103">Use </span>
<span data-cue-position="104">meaningful </span>
<span data-cue-position="105">symbolism. </span>
</h1>
<p>
<span class="cue-position-97">The </span>
<span class="cue-position-98">blue </span>
<span class="cue-position-99">stripes </span>
<span class="cue-position-100">represent </span>
<span class="cue-position-101">the water, </span>
<span class="cue-position-102">the lake, and the rivers. </span>
<span class="cue-position-106">The </span>
<span class="cue-position-107">red </span>
<span class="cue-position-108">stars </span>
<span class="cue-position-109">represent </span>
<span class="cue-position-110">significant </span>
<span class="cue-position-111">events </span>
<span class="cue-position-112">in </span>
<span class="cue-position-113">Chicago&#39;s </span>
<span class="cue-position-114">history. </span>
<span data-cue-position="97">The </span>
<span data-cue-position="98">blue </span>
<span data-cue-position="99">stripes </span>
<span data-cue-position="100">represent </span>
<span data-cue-position="101">the water, </span>
<span data-cue-position="102">the lake, and the rivers. </span>
<span data-cue-position="106">The </span>
<span data-cue-position="107">red </span>
<span data-cue-position="108">stars </span>
<span data-cue-position="109">represent </span>
<span data-cue-position="110">significant </span>
<span data-cue-position="111">events </span>
<span data-cue-position="112">in </span>
<span data-cue-position="113">Chicago&#39;s </span>
<span data-cue-position="114">history. </span>
</p>
</article>
</div>
......
script.js
View file @ c95292be
......@@ -5,14 +5,14 @@ document.addEventListener('DOMContentLoaded', function initializePage() {
var cues = [0.33, 0.57, 0.71, 1.38, 2.17, 2.36, 2.64, 3.88, 4.02, 4.32, 4.65, 5.1, 5.27, 5.52, 5.92, 6.28, 6.55, 7.37, 8.62, 9.48, 10.09, 10.36, 11.01, 11.82, 12.32, 13.15, 13.72, 14.01, 14.19, 14.65, 15.03, 15.37, 15.72, 16.14, 16.44, 16.74, 17.53, 17.91, 18.23, 18.9, 19.16, 19.52, 20.02, 21.29, 21.65, 21.94, 22.46, 23.28, 23.63, 23.88, 24.46, 24.75, 25.09, 25.59, 26.0, 26.48, 26.96, 27.26, 27.77, 28.21, 28.74, 29.58, 30.8, 31.58, 32.4, 32.77, 33.09, 33.82, 34.44, 34.68, 35.39, 35.89, 36.28, 37.03, 37.47, 37.97, 38.23, 38.63, 39.92, 40.18, 41.08, 42.11, 43.16, 43.64, 44.27, 45.1, 45.45, 46.09, 46.6, 46.87, 47.23, 48.06, 48.37, 48.91, 49.32, 49.76, 50.16, 50.52, 50.76, 51.04, 51.7, 52.44, 53.38, 54.3, 54.58, 55.04, 55.71, 56.16, 56.49, 57.02, 57.88, 58.46, 59.02, 59.45, 60.02];
var MAX_TRANSITION_TIME = 0.4; //make sure transition time matches in index.html's styling
var CUE_POSITION_PREFIX = '.cue-position-';
var cue_position_selector = function(index) { return "[data-cue-position='" + index + "']"};
cues.forEach(function setTransitionTimes(cue, index) {
if (index + 1 === cues.length){
return;
}
var cueDuration = cues[index + 1] - cue;
if (cueDuration < MAX_TRANSITION_TIME) {
$(CUE_POSITION_PREFIX + index).forEach(function (cueElement) {
$(cue_position_selector(index)).forEach(function (cueElement) {
cueElement.style.transitionDuration = cueDuration + "s";
});
}
......@@ -39,7 +39,7 @@ document.addEventListener('DOMContentLoaded', function initializePage() {
}
if (audio.currentTime >= cues[currentIndex]) {
$(CUE_POSITION_PREFIX + currentIndex).forEach(function (cueElement) {
$(cue_position_selector(currentIndex)).forEach(function (cueElement) {
cueElement.classList.add(HIGHLIGHTED_CLASS);
});
currentIndex++;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment