Widget:Flipflop: Skillnad mellan sidversioner

Rad 1:

<style>

.flipflopButton {

color: #36b;

font-weight: bold;

cursor: pointer;

}

.flipflopButton[disabled], .flipflopButton:disabled {

color: grey;

cursor: default;

}

article.flipflop-book-instance {

display: flex;

Rad 62:

Rad 72:

<p>Your browser does not support the video tag.</p>

</video>

<b>Uppspelningshastighet: </b>

</div>

Rad 462:

Rad 479:

leftBtn.textContent = "← Föregående"

leftBtn.style.cssText = "height:100%;"

leftBtn.className = "flipflopButton"

const rightBtn = document.createElement("button")

rightBtn.textContent = "Följande →"

rightBtn.style.cssText = "height:100%;"

rightBtn.className = "flipflopButton"

const imgDiv = document.createElement("div")

imgDiv.style.cssText = "width:200px; text-align:center;"

const leftImg = document.createElement("img")

leftImg.src = page.currentPageEl.imageLeft

leftImg.style.cssText = "height:150px; width:auto;"

const ~~leftText~~ = document.createElement("~~span~~")

const textDiv = document.createElement("div")

~~leftText~~.textContent = page.currentPageEl.textLeft

textDiv.style.cssText = "width:200px; text-align:center;"

textDiv.textContent = page.currentPageEl.textLeft

const playBtn = document.createElement("button")

playBtn.textContent = "▶ Spela video"

playBtn.style.cssText = "height:100%; width:auto; max-height:150px;"

playBtn.className = "playBtn"

playBtn.className = "flipflopButton playBtn"

playBtn.onclick = function () {

// Reset old states of playbackRate buttons

resetSpeedButtons();

setVideo(video, page.bookIndex)

modal.style.display = "block";

Rad 482:

Rad 506:

article.appendChild(leftBtn)

article.appendChild(~~leftImg~~)

imgDiv.appendChild(leftImg)

article.appendChild(~~leftText~~)

article.appendChild(imgDiv)

article.appendChild(textDiv)

article.appendChild(playBtn)

article.appendChild(rightBtn)

Rad 534:

Rad 559:

// Get the <span> element that closes the modal

var span = document.getElementsByClassName("close")[0];

// Get all buttons that change playbackRate

var speedBtns = document.querySelectorAll('.speed-button');

// When user click speed buttons call function to change playbackRate

speedBtns.forEach(button => button.addEventListener("click", changeSpeed(button)));

function changeSpeed(button) {

return function() {

// Reset old states of playbackRate buttons

resetSpeedButtons();

video.playbackRate = button.value;

// Make button look like its pressed

button.disabled = true;

}

function resetSpeedButtons() {

speedBtns.forEach(button => button.disabled = false);

}

// When the user clicks on <span> (x), close the modal

Rad 549:

Rad 594:

bodyContent.style.zIndex = 0;

}

</script>

@@ Rad 1: / Rad 1: @@
 <style>
+.flipflopButton {
+    color: #36b;
+    font-weight: bold;
+    cursor: pointer;
+}
+.flipflopButton[disabled], .flipflopButton:disabled {
+    color: grey;
+    cursor: default;
+}
 article.flipflop-book-instance {
      display: flex;
@@ Rad 62: / Rad 72: @@
                  <p>Your browser does not support the video tag.</p>
              </video>
+            <div id="playback-speed" style="text-align: center;margin-top: 15px;">
+                <b>Uppspelningshastighet: </b>
+                <button class="flipflopButton speed-button" value=0.25>x0.25</button>
+                <button class="flipflopButton speed-button" value=0.50>x0.5</button>
+                <button class="flipflopButton speed-button" value=0.75>x0.75</button>
+                <button class="flipflopButton speed-button" value=1.00>x1</button>
+            </div>
          </div>
      </div>
@@ Rad 462: / Rad 479: @@
      leftBtn.textContent = "← Föregående"
      leftBtn.style.cssText = "height:100%;"
+    leftBtn.className = "flipflopButton"
      const rightBtn = document.createElement("button")
      rightBtn.textContent = "Följande →"
      rightBtn.style.cssText = "height:100%;"
+    rightBtn.className = "flipflopButton"
+    const imgDiv = document.createElement("div")
+    imgDiv.style.cssText = "width:200px; text-align:center;"
      const leftImg = document.createElement("img")
      leftImg.src = page.currentPageEl.imageLeft
      leftImg.style.cssText = "height:150px; width:auto;"
-     const leftText = document.createElement("span")
+     const textDiv = document.createElement("div")
-     leftText.textContent = page.currentPageEl.textLeft
+     textDiv.style.cssText = "width:200px; text-align:center;"
+    textDiv.textContent = page.currentPageEl.textLeft
      const playBtn = document.createElement("button")
      playBtn.textContent = "▶ Spela video"
      playBtn.style.cssText = "height:100%; width:auto; max-height:150px;"
-     playBtn.className = "playBtn"
+     playBtn.className = "flipflopButton playBtn"
      playBtn.onclick = function () {
+        // Reset old states of playbackRate buttons
+        resetSpeedButtons();
          setVideo(video, page.bookIndex)
          modal.style.display = "block";
@@ Rad 482: / Rad 506: @@
      article.appendChild(leftBtn)
-     article.appendChild(leftImg)
+    imgDiv.appendChild(leftImg)
-     article.appendChild(leftText)
+     article.appendChild(imgDiv)
+     article.appendChild(textDiv)
      article.appendChild(playBtn)
      article.appendChild(rightBtn)
@@ Rad 534: / Rad 559: @@
 // Get the <span> element that closes the modal
 var span = document.getElementsByClassName("close")[0];
+// Get all buttons that change playbackRate
+var speedBtns = document.querySelectorAll('.speed-button');
+// When user click speed buttons call function to change playbackRate
+speedBtns.forEach(button => button.addEventListener("click", changeSpeed(button)));
+function changeSpeed(button) {
+    return function() {
+        // Reset old states of playbackRate buttons
+        resetSpeedButtons();
+        video.playbackRate = button.value;
+        // Make button look like its pressed
+        button.disabled = true;
+    }
+}
+function resetSpeedButtons() {
+    speedBtns.forEach(button => button.disabled = false);
+}
 // When the user clicks on <span> (x), close the modal
@@ Rad 549: / Rad 594: @@
          bodyContent.style.zIndex = 0;
      }
 }
 </script>

Widget:Flipflop: Skillnad mellan sidversioner

Navigeringsmeny

Sök