Byråkrater, Gränssnittsadministratörer, Administratörer (Semantic MediaWiki), Administratörer, Widget-redigerare
32
redigeringar
Ändringar
Hoppa till navigering
Hoppa till sök
Rad 1:
Rad 1: − 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;+ − }+ − <div id="flipflopapp">+ − <!-- FlipFlop Video Modal -->+ − <div id="playModal" class="modal">+ − <!-- Video Player in Modal -->+ − <div class="modal-content">+ − <span class="close">×</span>+ − <video id="flipflop" controls="true" style="width:100%;max-height:480px">+ − <source src="" type="">+ − Your browser does not support the video tag.+ − </video>+ − </div>+ − </div> + − </div>+ + Rad 340:
Rad 341: − + Rad 346:
Rad 347: − + Rad 352:
Rad 353: − + Rad 444:
Rad 445: + Rad 458:
Rad 460: − + − + − + Rad 512:
Rad 514: + + + + Rad 543:
Rad 549: − +
Widget:Flipflop (visa wikitext)
Versionen från 30 december 2020 kl. 16.52
, 30 december 2020 kl. 16.52typos, autoplay and text for buttons
<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">
[
[
{
{
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",
},
},
{
{
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",
},
},
{
{
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",
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)
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:100%; width:auto; max-height:150px;"
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
})
})
}
}
// 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");
bodyContent.style.zIndex = 0;
bodyContent.style.zIndex = 0;
}
}
}
}
</script>
</script>