Skillnad mellan versioner av "Widget:Flipflop"
Harri (diskussion | bidrag) (Fix style) |
Harri (diskussion | bidrag) (typos, autoplay and text for buttons) |
||
Rad 1: | Rad 1: | ||
<style> | <style> | ||
− | + | 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> | </style> | ||
− | + | <div id="flipflopapp"> | |
− | + | <!-- FlipFlop Video Modal --> | |
− | + | <div id="playModal" class="modal"> | |
− | + | <!-- Video Player in Modal --> | |
− | + | <div class="modal-content"> | |
− | + | <span class="close">×</span> | |
− | + | <p id="video-title" style="text-align:center;font-size:30px;"></p> | |
− | + | <video id="flipflop" controls autoplay style="width:100%;max-height:480px"> | |
− | + | <source src="" type=""> | |
− | + | <p>Your browser does not support the video tag.</p> | |
− | + | </video> | |
− | + | </div> | |
− | + | </div> | |
+ | </div> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
Rad 340: | Rad 341: | ||
[ | [ | ||
{ | { | ||
− | 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 347: | ||
}, | }, | ||
{ | { | ||
− | textLeft: " | + | 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 353: | ||
}, | }, | ||
{ | { | ||
− | 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 445: | ||
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 460: | ||
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%;" | ||
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%;" | ||
const leftImg = document.createElement("img") | const leftImg = document.createElement("img") | ||
leftImg.src = page.currentPageEl.imageLeft | leftImg.src = page.currentPageEl.imageLeft | ||
− | leftImg.style.cssText = "height: | + | leftImg.style.cssText = "height:150px; width:auto;" |
const leftText = document.createElement("span") | const leftText = document.createElement("span") | ||
leftText.textContent = page.currentPageEl.textLeft | leftText.textContent = page.currentPageEl.textLeft | ||
Rad 512: | Rad 514: | ||
}) | }) | ||
} | } | ||
+ | |||
+ | // 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 543: | Rad 549: | ||
bodyContent.style.zIndex = 0; | bodyContent.style.zIndex = 0; | ||
} | } | ||
− | } | + | } |
</script> | </script> |
Versionen från 30 december 2020 kl. 15.52
<style> 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%;" const rightBtn = document.createElement("button") rightBtn.textContent = "Följande →" rightBtn.style.cssText = "height:100%;" const leftImg = document.createElement("img") leftImg.src = page.currentPageEl.imageLeft leftImg.style.cssText = "height:150px; width:auto;" const leftText = document.createElement("span") leftText.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.onclick = function () { setVideo(video, page.bookIndex) modal.style.display = "block"; // Override mediawiki default style bodyContent.style.zIndex = "unset"; }
article.appendChild(leftBtn) article.appendChild(leftImg) article.appendChild(leftText) 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];
// 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>