-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
readded changes to youtube.blade.php, containers.scss, ModerateEvent.…
…vue, and Pagination.vue
- Loading branch information
1 parent
611425b
commit d9e7b35
Showing
4 changed files
with
264 additions
and
79 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,87 +1,89 @@ | ||
| <template> | ||
| <nav class="codeweek-pagination" role="navigation" aria-label="pagination"> | ||
| <ul> | ||
| <li> | ||
| <a | ||
| class="back" | ||
| @click.prevent="changePage(pagination.current_page - 1)" | ||
| :disabled="pagination.current_page <= 1" | ||
| > | ||
| {{ $t('pagination.previous') }} | ||
| </a> | ||
| </li> | ||
| <li v-for="page in pages"> | ||
| <a | ||
| v-if="pagination.current_page != page" | ||
| class="page" | ||
| @click.prevent="changePage(page)" | ||
| > | ||
| {{ page }} | ||
| </a> | ||
| <a v-else class="page current"> | ||
| {{ page }} | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a | ||
| class="next" | ||
| @click.prevent="changePage(pagination.current_page + 1)" | ||
| :disabled="pagination.current_page >= pagination.last_page" | ||
| > | ||
| {{ $t('pagination.next') }} | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
|
|
||
| <nav class="codeweek-pagination" role="navigation" aria-label="pagination"> | ||
| <ul> | ||
| <li> | ||
| <a class="back" | ||
| @click.prevent="changePage(pagination.current_page - 1)" | ||
| :disabled="pagination.current_page <= 1"> | ||
| {{$t('pagination.previous')}} | ||
| </a> | ||
| </li> | ||
| <li v-for="page in pages"> | ||
| <a v-if="pagination.current_page != page" | ||
| class="page" | ||
| @click.prevent="changePage(page)"> | ||
| {{ page }} | ||
| </a> | ||
| <a v-else | ||
| class="page current"> | ||
| {{ page }} | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a class="next" | ||
| @click.prevent="changePage(pagination.current_page + 1)" | ||
| :disabled="pagination.current_page >= pagination.last_page"> | ||
| {{$t('pagination.next')}} | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
|
|
||
| </template> | ||
|
|
||
| <style> | ||
| .pagination { | ||
| margin-top: 40px; | ||
| } | ||
| .pagination { | ||
| margin-top: 40px; | ||
| } | ||
| </style> | ||
|
|
||
| <script> | ||
| export default { | ||
| props: ['pagination', 'offset'], | ||
| export default { | ||
| props: ['pagination', 'offset'], | ||
| methods: { | ||
| isCurrentPage(page) { | ||
| return this.pagination.current_page === page; | ||
| }, | ||
| methods: { | ||
| isCurrentPage(page) { | ||
| return this.pagination.current_page === page; | ||
| }, | ||
| changePage(page) { | ||
| if (page < 1 || page > this.pagination.last_page) { | ||
| return; | ||
| } | ||
| this.pagination.current_page = page; | ||
| this.$emit('paginate', page); // Emit the event with the new page number | ||
| } | ||
| }, | ||
| changePage(page) { | ||
| if (page === 0 || (page > this.pagination.last_page)){ | ||
| return; | ||
| } | ||
| if (page > this.pagination.last_page) { | ||
| page = this.pagination.last_page; | ||
| } | ||
| this.pagination.current_page = page; | ||
| this.$dispatch('paginate'); | ||
| } | ||
| }, | ||
| computed: { | ||
| pages() { | ||
| let pages = []; | ||
| computed: { | ||
| pages() { | ||
| let pages = []; | ||
| let from = this.pagination.current_page - Math.floor(this.offset / 2); | ||
| let from = this.pagination.current_page - Math.floor(this.offset / 2); | ||
| if (from < 1) { | ||
| from = 1; | ||
| } | ||
| if (from < 1) { | ||
| from = 1; | ||
| } | ||
| let to = from + this.offset - 1; | ||
| let to = from + this.offset - 1; | ||
| if (to > this.pagination.last_page) { | ||
| to = this.pagination.last_page; | ||
| } | ||
| if (to > this.pagination.last_page) { | ||
| to = this.pagination.last_page; | ||
| } | ||
| while (from <= to) { | ||
| pages.push(from); | ||
| from++; | ||
| } | ||
| while (from <= to) { | ||
| pages.push(from); | ||
| from++; | ||
| } | ||
| return pages; | ||
| return pages; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| </script> | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,97 @@ | ||
| <!-- YouTube Video Embed with Conditional Locale --> | ||
| <div class="codeweek-youtube-container"> | ||
| @if(App::getLocale() == 'en') | ||
| <iframe | ||
| src="https://www.youtube.com/embed/{{$video_id}}"></iframe> | ||
| @else | ||
| <iframe | ||
| src="https://www.youtube.com/embed/{{$video_id}}?cc_load_policy=1&cc_lang_pref={{App::getLocale()}}"></iframe> | ||
| @endif | ||
| </div> | ||
| @if(App::getLocale() == 'en') | ||
| <iframe | ||
| src="https://www.youtube.com/embed/{{$video_id}}" style="display:none;"></iframe> | ||
| @else | ||
| <iframe | ||
| src="https://www.youtube.com/embed/{{$video_id}}?cc_load_policy=1&cc_lang_pref={{App::getLocale()}}" style="display:none;"></iframe> | ||
| @endif | ||
|
|
||
| <!-- Custom Banner to Display Over the Video --> | ||
| <div class="background" data-nosnippet=""> | ||
| <div class="container"> | ||
| <div class="content"> | ||
| <div class="info"> | ||
| <p>This content is hosted by a third party. By showing the external content you accept the | ||
| <a href="https://www.youtube.com/t/terms" title="Terms and conditions" target="_blank">terms and conditions</a> of youtube.com.</p> | ||
|
|
||
| <p class="remember"> | ||
| <input type="checkbox" id="remember" name="rememberMe"> | ||
| <label for="remember">Remember my choice. | ||
| <span>Your choice will be saved in a cookie managed by europa.eu until you've closed your browser.</span> | ||
| </label> | ||
| </p> | ||
|
|
||
| <p class="button"> | ||
| <button type="button" title="Show external content" class="show-content"> | ||
| <svg fill="currentColor" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> | ||
| <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3 17v-10l9 5.146-9 4.854z"></path> | ||
| </svg> | ||
| <span>Show external content</span> | ||
| </button> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <script> | ||
| document.addEventListener("DOMContentLoaded", function() { | ||
| // Check if cookies are already consented for third-party content | ||
| if (!getCookie('third_party_content_accepted')) { | ||
| showBanner(); // Show the banner if consent has not been given | ||
| } else { | ||
| showYoutubeVideos(); // Show the videos immediately if consent has been given | ||
| } | ||
| // Function to show the YouTube video and hide the banner | ||
| function showYoutubeVideos() { | ||
| var videoContainers = document.querySelectorAll('.codeweek-youtube-container'); | ||
| videoContainers.forEach(function(container) { | ||
| container.querySelector('iframe').style.display = 'block'; // Show the iframe | ||
| container.querySelector('.background').style.display = 'none'; // Hide the banner | ||
| }); | ||
| } | ||
| // Function to show the banner | ||
| function showBanner() { | ||
| var banners = document.querySelectorAll('.codeweek-youtube-container .background'); | ||
| banners.forEach(function(banner) { | ||
| banner.style.display = 'flex'; // Display the banner | ||
| }); | ||
| } | ||
| // Event listener for the "Show external content" button | ||
| document.querySelectorAll('.show-content').forEach(function(button) { | ||
| button.addEventListener('click', function() { | ||
| if (document.getElementById('remember').checked) { | ||
| // If "Remember my choice" is checked, save in a cookie | ||
| setCookie('third_party_content_accepted', 'true', 365); | ||
| } | ||
| showYoutubeVideos(); // Show video and hide banner | ||
| }); | ||
| }); | ||
| function setCookie(name, value, days) { | ||
| var expires = ""; | ||
| if (days) { | ||
| var date = new Date(); | ||
| date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); | ||
| expires = "; expires=" + date.toUTCString(); | ||
| } | ||
| document.cookie = name + "=" + (value || "") + expires + "; path=/"; | ||
| } | ||
| function getCookie(name) { | ||
| var nameEQ = name + "="; | ||
| var ca = document.cookie.split(';'); | ||
| for (var i = 0; i < ca.length; i++) { | ||
| var c = ca[i]; | ||
| while (c.charAt(0) == ' ') c = c.substring(1, c.length); | ||
| if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); | ||
| } | ||
| return null; | ||
| } | ||
| }); | ||
| </script> |