Skillnad mellan versioner av "Widget:Flipflop"

Från SignWiki
Hoppa till navigering Hoppa till sök
(Fix style)
 
(En mellanliggande version av samma användare visas inte)
Rad 1: Rad 1:
 
<style>
 
<style>
−
    article.flipflop-book-instance {
+
.flipflopButton {
−
        display: flex;
+
    color: #36b;
−
        flex-wrap: nowrap;
+
    font-weight: bold;
−
        justify-content: space-between;
+
    cursor: pointer;
−
        align-items: center;
+
}
−
        height: 150px;
+
.flipflopButton[disabled], .flipflopButton:disabled {
−
        border-bottom: 1px solid grey;
+
    color: grey;
−
        padding: 10px 0 10px 0;
+
    cursor: default;
−
        }
+
}
−
    article.flipflop-book-instance:first-of-type {
+
 
−
        border-top: 1px solid grey;
+
article.flipflop-book-instance {
−
     }
+
     display: flex;
−
    /* The Modal (background) */
+
    flex-wrap: nowrap;
−
    .modal {
+
    justify-content: space-between;
−
        display: none; /* Hidden by default */
+
    align-items: center;
−
        position: fixed; /* Stay in place */
+
    height: 150px;
−
        z-index: 1; /* Sit on top */
+
    border-bottom: 1px solid grey;
−
        left: 0;
+
    padding: 10px 0 10px 0;
−
        top: 0;
 
−
        width: 100%; /* Full width */
 
−
        height: 100%; /* Full height */
 
−
        overflow: auto; /* Enable scroll if needed */
 
−
        background-color: rgb(0,0,0); /* Fallback color */
 
−
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 
 
     }
 
     }
 +
article.flipflop-book-instance:first-of-type {
 +
    border-top: 1px solid grey;
 +
}
 +
/* The Modal (background) */
 +
.modal {
 +
    display: none; /* Hidden by default */
 +
    position: fixed; /* Stay in place */
 +
    z-index: 1; /* Sit on top */
 +
    left: 0;
 +
    top: 0;
 +
    width: 100%; /* Full width */
 +
    height: 100%; /* Full height */
 +
    overflow: auto; /* Enable scroll if needed */
 +
    background-color: rgb(0,0,0); /* Fallback color */
 +
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 +
}
  
−
    /* Modal Content/Box */
+
/* Modal Content/Box */
−
    .modal-content {
+
.modal-content {
−
        background-color: #fefefe;
+
    background-color: #fefefe;
−
        margin: 15% auto; /* 15% from the top and centered */
+
    margin: 15% auto; /* 15% from the top and centered */
−
        padding: 20px;
+
    padding: 20px;
−
        border: 1px solid #888;
+
    border: 1px solid #888;
−
        width: 80%; /* Could be more or less, depending on screen size */
+
    width: 80%; /* Could be more or less, depending on screen size */
−
    }
+
}
  
−
    /* The Close Button */
+
/* The Close Button */
−
    .close {
+
.close {
−
        color: #aaa;
+
    color: #aaa;
−
        float: right;
+
    float: right;
−
        font-size: 28px;
+
    font-size: 28px;
−
        font-weight: bold;
+
    font-weight: bold;
−
    }
+
}
  
−
    .close:hover,
+
.close:hover,
−
    .close:focus {
+
.close:focus {
−
        color: black;
+
    color: black;
−
        text-decoration: none;
+
    text-decoration: none;
−
        cursor: pointer;
+
    cursor: pointer;
−
    }
+
}
 
</style>
 
</style>
  
−
    <div id="flipflopapp">
+
<div id="flipflopapp">
−
        <!-- FlipFlop Video Modal -->
+
    <!-- FlipFlop Video Modal -->
−
        <div id="playModal" class="modal">
+
    <div id="playModal" class="modal">
−
            <!-- Video Player in Modal -->
+
        <!-- Video Player in Modal -->
−
            <div class="modal-content">
+
        <div class="modal-content">
−
                <span class="close">&times;</span>
+
            <span class="close">&times;</span>
−
                <video id="flipflop"  controls="true" style="width:100%;max-height:480px">
+
            <p id="video-title" style="text-align:center;font-size:30px;"></p>
−
                    <source src="" type="">
+
            <video id="flipflop"  controls autoplay style="width:100%;max-height:480px">
−
                    Your browser does not support the video tag.
+
                <source src="" type="">
−
                 </video>
+
                <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>  
+
         </div>
−
     </div>
+
     </div>
 +
</div>
  
 
<script type="text/javascript">
 
<script type="text/javascript">
Rad 340: Rad 358:
 
     [
 
     [
 
         {
 
         {
−
             textLeft:  "prata",
+
             textLeft:  "prata med varandra",
 
             videoUrl:  "/images/finssl_flipflop/7_1.mp4",
 
             videoUrl:  "/images/finssl_flipflop/7_1.mp4",
 
             videoType: "video/mp4",
 
             videoType: "video/mp4",
Rad 346: Rad 364:
 
         },
 
         },
 
         {
 
         {
−
             textLeft:  "tälva",
+
             textLeft:  "tävla",
 
             videoUrl:  "/images/finssl_flipflop/7_2.mp4",
 
             videoUrl:  "/images/finssl_flipflop/7_2.mp4",
 
             videoType: "video/mp4",
 
             videoType: "video/mp4",
Rad 352: Rad 370:
 
         },
 
         },
 
         {
 
         {
−
             textLeft:  "titta",
+
             textLeft:  "titta på varandra",
 
             videoUrl:  "/images/finssl_flipflop/7_3.mp4",
 
             videoUrl:  "/images/finssl_flipflop/7_3.mp4",
 
             videoType: "video/mp4",
 
             videoType: "video/mp4",
Rad 444: Rad 462:
 
function setVideo(video, bookId) {
 
function setVideo(video, bookId) {
 
     const currentBookEl = bookState[bookId].currentPageEl
 
     const currentBookEl = bookState[bookId].currentPageEl
 +
    video_title.textContent = currentBookEl.textLeft
 
     video.setAttribute("src", currentBookEl.videoUrl)
 
     video.setAttribute("src", currentBookEl.videoUrl)
 
     video.setAttribute("type", currentBookEl.videoType)
 
     video.setAttribute("type", currentBookEl.videoType)
Rad 458: Rad 477:
 
     article.classList.add("flipflop-book-instance")
 
     article.classList.add("flipflop-book-instance")
 
     const leftBtn = document.createElement("button")
 
     const leftBtn = document.createElement("button")
−
     leftBtn.textContent = "←"
+
     leftBtn.textContent = "← Föregående"
 
     leftBtn.style.cssText = "height:100%;"
 
     leftBtn.style.cssText = "height:100%;"
 +
    leftBtn.className = "flipflopButton"
 
     const rightBtn = document.createElement("button")
 
     const rightBtn = document.createElement("button")
−
     rightBtn.textContent = "→"
+
     rightBtn.textContent = "Följande →"
 
     rightBtn.style.cssText = "height:100%;"
 
     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")
 
     const leftImg = document.createElement("img")
 
     leftImg.src = page.currentPageEl.imageLeft
 
     leftImg.src = page.currentPageEl.imageLeft
−
     leftImg.style.cssText = "height:100%; width:auto; max-height:150px;"
+
     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")
 
     const playBtn = document.createElement("button")
 
     playBtn.textContent = "▶ Spela video"
 
     playBtn.textContent = "▶ Spela video"
 
     playBtn.style.cssText = "height:100%; width:auto; max-height:150px;"
 
     playBtn.style.cssText = "height:100%; width:auto; max-height:150px;"
−
     playBtn.className = "playBtn"
+
     playBtn.className = "flipflopButton playBtn"
 
     playBtn.onclick = function () {
 
     playBtn.onclick = function () {
 +
        // Reset old states of playbackRate buttons
 +
        resetSpeedButtons();
 
         setVideo(video, page.bookIndex)
 
         setVideo(video, page.bookIndex)
 
         modal.style.display = "block";
 
         modal.style.display = "block";
Rad 480: Rad 506:
  
 
     article.appendChild(leftBtn)
 
     article.appendChild(leftBtn)
−
     article.appendChild(leftImg)
+
    imgDiv.appendChild(leftImg)
−
     article.appendChild(leftText)
+
     article.appendChild(imgDiv)
 +
     article.appendChild(textDiv)
 
     article.appendChild(playBtn)
 
     article.appendChild(playBtn)
 
     article.appendChild(rightBtn)
 
     article.appendChild(rightBtn)
Rad 512: Rad 539:
 
     })
 
     })
 
}
 
}
 +
 +
// Get the video-title element from DOM
 +
const video_title = document.querySelector("p#video-title");
 +
 
// Get the video player element from DOM
 
// Get the video player element from DOM
 
const video = document.querySelector("video#flipflop");
 
const video = document.querySelector("video#flipflop");
Rad 528: Rad 559:
 
// Get the <span> element that closes the modal
 
// Get the <span> element that closes the modal
 
var span = document.getElementsByClassName("close")[0];
 
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
 
// When the user clicks on <span> (x), close the modal

Nuvarande version från 1 januari 2021 kl. 13.36

<style> .flipflopButton { 

   color: #36b;
   font-weight: bold;
   cursor: pointer;

} .flipflopButton[disabled], .flipflopButton:disabled { 

   color: grey;
   cursor: default;

}

article.flipflop-book-instance { 

   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
   height: 150px;
   border-bottom: 1px solid grey;
   padding: 10px 0 10px 0;
   }

article.flipflop-book-instance:first-of-type { 

   border-top: 1px solid grey;

} 

/* The Modal (background) */

.modal { 

   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 1; /* Sit on top */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

/* Modal Content/Box */ .modal-content { 

   background-color: #fefefe;
   margin: 15% auto; /* 15% from the top and centered */
   padding: 20px;
   border: 1px solid #888;
   width: 80%; /* Could be more or less, depending on screen size */

}

/* The Close Button */ .close { 

   color: #aaa;
   float: right;
   font-size: 28px;
   font-weight: bold;

}

.close:hover, .close:focus { 

   color: black;
   text-decoration: none;
   cursor: pointer;

} </style>

<script type="text/javascript"> var flipflopBooks = [ 

   // Flick 1
   [
       {
           textLeft:  "äng",
           videoUrl:  "/images/finssl_flipflop/1_1.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/1_1.png",
       },
       {
           textLeft:  "dal",
           videoUrl:  "/images/finssl_flipflop/1_2.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/1_2.png",
       },
       {
           textLeft:  "backe",
           videoUrl:  "/images/finssl_flipflop/1_3.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/1_3.png",
       },
       {
           textLeft:  "väg",
           videoUrl:  "/images/finssl_flipflop/1_4.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/1_4.png",
       },
       {
           textLeft:  "moln",
           videoUrl:  "/images/finssl_flipflop/1_5.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/1_5.png",
       },
       {
           textLeft:  "skog",
           videoUrl:  "/images/finssl_flipflop/1_6.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/1_6.png",
       },
       {
           textLeft:  "hav",
           videoUrl:  "/images/finssl_flipflop/1_7.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/1_7.png",
       },
   ],
   // Flick 2
   [
       {
           textLeft:  "ko",
           videoUrl:  "/images/finssl_flipflop/2_1.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/2_1.png",
       },
       {
           textLeft:  "räv",
           videoUrl:  "/images/finssl_flipflop/2_2.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/2_2.png",
       },
       {
           textLeft:  "älg",
           videoUrl:  "/images/finssl_flipflop/2_3.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/2_3.png",
       },
       {
           textLeft:  "gris",
           videoUrl:  "/images/finssl_flipflop/2_4.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/2_4.png",
       },
       {
           textLeft:  "elefant",
           videoUrl:  "/images/finssl_flipflop/2_5.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/2_5.png",
       },
       {
           textLeft:  "hare",
           videoUrl:  "/images/finssl_flipflop/2_6.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/2_6.png",
       },
       {
           textLeft:  "dinosaurie",
           videoUrl:  "/images/finssl_flipflop/2_7.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/2_7.png",
       },
   ],
   // Flick 3
   [
       {
           textLeft:  "cykla",
           videoUrl:  "/images/finssl_flipflop/3_1.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/3_1.png",
       },
       {
           textLeft:  "åka rullbräda",
           videoUrl:  "/images/finssl_flipflop/3_2.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/3_2.png",
       },
       {
           textLeft:  "åka pulka",
           videoUrl:  "/images/finssl_flipflop/3_3.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/3_3.png",
       },
       {
           textLeft:  "köra bil",
           videoUrl:  "/images/finssl_flipflop/3_4.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/3_4.png",
       },
       {
           textLeft:  "flyga",
           videoUrl:  "/images/finssl_flipflop/3_5.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/3_5.png",
       },
       {
           textLeft:  "skrinna",
           videoUrl:  "/images/finssl_flipflop/3_6.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/3_6.png",
       },
       {
           textLeft:  "köra båt",
           videoUrl:  "/images/finssl_flipflop/3_7.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/3_7.png",
       },
   ],
   // Flick 4
   [
       {
           textLeft:  "slott",
           videoUrl:  "/images/finssl_flipflop/4_1.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/4_1.png",
       },
       {
           textLeft:  "väderkvarn",
           videoUrl:  "/images/finssl_flipflop/4_2.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/4_2.png",
       },
       {
           textLeft:  "lada",
           videoUrl:  "/images/finssl_flipflop/4_3.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/4_3.png",
       },
       {
           textLeft:  "hus",
           videoUrl:  "/images/finssl_flipflop/4_4.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/4_4.png",
       },
       {
           textLeft:  "fyr",
           videoUrl:  "/images/finssl_flipflop/4_5.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/4_5.png",
       },
       {
           textLeft:  "tält",
           videoUrl:  "/images/finssl_flipflop/4_6.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/4_6.png",
       },
       {
           textLeft:  "fängelse",
           videoUrl:  "/images/finssl_flipflop/4_7.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/4_7.png",
       },
   ],
   // Flick 5
   [
       {
           textLeft:  "groda",
           videoUrl:  "/images/finssl_flipflop/5_1.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/5_1.png",
       },
       {
           textLeft:  "hund",
           videoUrl:  "/images/finssl_flipflop/5_2.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/5_2.png",
       },
       {
           textLeft:  "apa",
           videoUrl:  "/images/finssl_flipflop/5_3.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/5_3.png",
       },
       {
           textLeft:  "katt",
           videoUrl:  "/images/finssl_flipflop/5_4.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/5_4.png",
       },
       {
           textLeft:  "mus",
           videoUrl:  "/images/finssl_flipflop/5_5.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/5_5.png",
       },
       {
           textLeft:  "björn",
           videoUrl:  "/images/finssl_flipflop/5_6.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/5_6.png",
       },
       {
           textLeft:  "spindel",
           videoUrl:  "/images/finssl_flipflop/5_7.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/5_7.png",
       },
   ],
   // Flick 6
   [
       {
           textLeft:  "läsa",
           videoUrl:  "/images/finssl_flipflop/6_1.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/6_1.png",
       },
       {
           textLeft:  "diska",
           videoUrl:  "/images/finssl_flipflop/6_2.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/6_2.png",
       },
       {
           textLeft:  "måla",
           videoUrl:  "/images/finssl_flipflop/6_3.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/6_3.png",
       },
       {
           textLeft:  "baka",
           videoUrl:  "/images/finssl_flipflop/6_4.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/6_4.png",
       },
       {
           textLeft:  "sticka",
           videoUrl:  "/images/finssl_flipflop/6_5.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/6_5.png",
       },
       {
           textLeft:  "bygga",
           videoUrl:  "/images/finssl_flipflop/6_6.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/6_6.png",
       },
       {
           textLeft:  "sy",
           videoUrl:  "/images/finssl_flipflop/6_7.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/6_7.png",
       },
   ],
   // Flick 7
   [
       {
           textLeft:  "prata med varandra",
           videoUrl:  "/images/finssl_flipflop/7_1.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/7_1.png",
       },
       {
           textLeft:  "tävla",
           videoUrl:  "/images/finssl_flipflop/7_2.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/7_2.png",
       },
       {
           textLeft:  "titta på varandra",
           videoUrl:  "/images/finssl_flipflop/7_3.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/7_3.png",
       },
       {
           textLeft:  "pussas",
           videoUrl:  "/images/finssl_flipflop/7_4.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/7_4.png",
       },
       {
           textLeft:  "spela",
           videoUrl:  "/images/finssl_flipflop/7_5.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/7_5.png",
       },
       {
           textLeft:  "dansa",
           videoUrl:  "/images/finssl_flipflop/7_6.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/7_6.png",
       },
       {
           textLeft:  "bråka",
           videoUrl:  "/images/finssl_flipflop/7_7.mp4",
           videoType: "video/mp4",
           imageLeft: "/images/finssl_flipflop/7_7.png",
       },
   ]

]

/** 

* Initializes the state of the books, state holds e.g. current page
* @param {Array} books 
* @param {Array} bookState 
*/

function initState(books, bookState) { 

   books.forEach((el, i) => bookState.push({ bookIndex: i, currentPageIndex: 0, currentPageEl: el[0] }))

}

// Root element used to append other elements to const rootElement = document.querySelector("div#flipflopapp")

var bookState = []; // Initialize book state to start from zero for each book in the flipflopBook array. initState(flipflopBooks, bookState)

/** 

* Gives the next possible index in book.
* If the index is below zero, give the highest index (indicating going backwards).
* If the index is past length of book, give zero (indicating going forwards).
* @param {Integer} desiredIndex The index to switch to, if possible
* @param {Object} book The book object of pages
*/

function getNextOrPrevPageIndex(desiredIndex, book) { 

   if (book[desiredIndex]) return desiredIndex
   if (desiredIndex < 0) return book.length - 1
   if (desiredIndex >= book.length) return 0
   return 0

}

/** 

* Switches the page within the book the page belongs to
* @param {Integer} direction Indicate the direction to switch pages, 1 or -1
* @param {Object} page Page object that holds indexes and element of book
*/

function switchPage(direction = 1, page) { 

   const book = flipflopBooks[page.bookIndex]
   const desiredPageIndex = page.currentPageIndex + direction
   const newCurrentPageIndex = getNextOrPrevPageIndex(desiredPageIndex, book)
   bookState[page.bookIndex].currentPageIndex = newCurrentPageIndex
   const newCurrentPageEl = book[newCurrentPageIndex]
   bookState[page.bookIndex].currentPageEl = newCurrentPageEl
   return bookState[page.bookIndex]

}

/** 

* Replaces an article DOM Element with a new one
* @param {Object} newPage 
* @param {Element} oldArticle 
*/

function replacePageArticleDOM(newPage, oldArticle) { 

   const newArticle = getBookPageDOM(newPage)
   oldArticle.parentNode.replaceChild(newArticle, oldArticle)

}

/** 

* Set the first video in the DOM Video Element
*/

function setVideo(video, bookId) { 

   const currentBookEl = bookState[bookId].currentPageEl
   video_title.textContent = currentBookEl.textLeft
   video.setAttribute("src", currentBookEl.videoUrl)
   video.setAttribute("type", currentBookEl.videoType)

}

/** 

* Creates the DOM for a book.
* Used to initialize and to update the book page.
* @param {Object} page 
*/

function getBookPageDOM(page) { 

   const article = document.createElement("article")
   article.id = `flipflop-book-${page.bookIndex}`
   article.classList.add("flipflop-book-instance")
   const leftBtn = document.createElement("button")
   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 textDiv = document.createElement("div")
   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 = "flipflopButton playBtn"
   playBtn.onclick = function () {
       // Reset old states of playbackRate buttons
       resetSpeedButtons();
       setVideo(video, page.bookIndex)
       modal.style.display = "block";
       // Override mediawiki default style
       bodyContent.style.zIndex = "unset";
   }

   article.appendChild(leftBtn)
   imgDiv.appendChild(leftImg)
   article.appendChild(imgDiv)
   article.appendChild(textDiv)
   article.appendChild(playBtn)
   article.appendChild(rightBtn)
   leftBtn.addEventListener("click", () => {
       // Switch page backwards in state
       const newPage = switchPage(-1, page)
       // Replace old DOM element with new
       replacePageArticleDOM(newPage, article)
   })
   rightBtn.addEventListener("click", () => {
       console.log(page)
       // Switch page forwards in state
       const newPage = switchPage(1, page)
       // Replace old DOM element with new
       replacePageArticleDOM(newPage, article)
   })
   return article

}

/** 

* Appends the DOM Elements to the root DOM Element
* @param {Array} bookState 
* @param {Element} rootElement 
* @param {Element} video Video Element 
*/

function initializeElements(bookState, rootElement, video) { 

   bookState.forEach((page) => {
       const article = getBookPageDOM(page)
       rootElement.appendChild(article)
   })

}

// Get the video-title element from DOM const video_title = document.querySelector("p#video-title");

// Get the video player element from DOM const video = document.querySelector("video#flipflop");

// Fill in the DOM Elements for the App initializeElements(bookState, rootElement, video)

// Event listener on when video starts playing video.onplay = (video) => { 

   console.log("Playing a video:", video)

}

// Get the modal var modal = document.getElementById("playModal");

// Get the 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 (x), close the modal span.onclick = function () { 

   modal.style.display = "none";
   // Restore mediawiki default style
   bodyContent.style.zIndex = 0;

}

// When the user clicks anywhere outside of the modal, close it window.onclick = function (event) { 

   if (event.target == modal) {
       modal.style.display = "none";
       // Restore mediawiki default style
       bodyContent.style.zIndex = 0;
   }

} </script>

Hämtad från "https://finssl.signwiki.org/index.php?title=Widget:Flipflop&oldid=9940"