-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
1 parent
0f2c3bf
commit ad12ae5
Showing
2 changed files
with
390 additions
and
0 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,214 @@ | ||
body { | ||
padding: 5px; | ||
} | ||
|
||
/* Center Item Styles */ | ||
.dmitem-center { | ||
margin: auto; | ||
width: 90%; | ||
padding: 10px; | ||
text-align: center; | ||
} | ||
|
||
/* Chip Styles */ | ||
.dmitem-chip { | ||
border-radius: 25px; | ||
border: 2px solid var(--color_theme_neutral_medium); | ||
padding: 10px; | ||
} | ||
|
||
.dmitem-chip-fill { | ||
padding: 10px; | ||
border-radius: 25px; | ||
} | ||
|
||
.dmitem-grey { | ||
background-color: var(--color_theme_neutral_medium); | ||
padding: 10px; | ||
} | ||
|
||
/* Box Sizing Reset */ | ||
*, *:before, *:after { | ||
-webkit-box-sizing: border-box; | ||
-moz-box-sizing: border-box; | ||
box-sizing: border-box; | ||
} | ||
|
||
/* View Container Styles */ | ||
.dmview-inner { | ||
max-width: 1000px; | ||
margin: auto; | ||
padding-left: 2px; | ||
padding-right: 2px; | ||
text-align: center; | ||
} | ||
|
||
/* Status Styles */ | ||
.dmview-failure { | ||
color: var(--color_theme_danger); | ||
} | ||
|
||
.dmview-success { | ||
color: var(--color_theme_success); | ||
} | ||
|
||
/* Scroll Container Styles */ | ||
.dmview-scroll-container { | ||
-webkit-overflow-scrolling: touch; | ||
position: relative; | ||
overflow-x: auto; | ||
overflow-y: hidden; | ||
white-space: nowrap; | ||
width: 100%; | ||
height: 600px; | ||
scroll-snap-type: mandatory; | ||
scroll-behavior: smooth; | ||
background: var(--color_theme_neutral_light); | ||
border: solid 2px var(--color_theme_neutral_medium); | ||
font-size: 0; | ||
margin-bottom: 50px; | ||
} | ||
|
||
.dmview-scroll-container .dmview-scroll-section { | ||
-webkit-overflow-scrolling: touch; | ||
display: inline-block; | ||
vertical-align: middle; | ||
background: transparent; | ||
border: solid 2px var(--color_theme_neutral_medium); | ||
white-space: nowrap; | ||
} | ||
|
||
/* Different Size Scroll Container */ | ||
.dmview-scroll-container.dmview-diff-size { | ||
-webkit-overflow-scrolling: touch; | ||
scroll-snap-destination: 50% 0%; | ||
padding: 10px 0; | ||
} | ||
|
||
.dmview-scroll-container.dmview-diff-size .dmview-scroll-section { | ||
width: auto; | ||
height: 100%; | ||
margin-right: 10px; | ||
scroll-snap-coordinate: 50% 0%; | ||
} | ||
|
||
.dmview-scroll-container.dmview-diff-size .dmview-scroll-section:first-child { | ||
scroll-snap-coordinate: 0% 0%, 50% 0%; | ||
margin-left: 10px; | ||
} | ||
|
||
.dmview-scroll-container.dmview-diff-size .dmview-scroll-section:last-child { | ||
scroll-snap-coordinate: 50% 0%, 100% 0%; | ||
} | ||
|
||
/* Tab Pill Styles */ | ||
#dm-tab-pill .nav-pills > li > a { | ||
border-radius: 6px 6px 0 0; | ||
} | ||
|
||
#dm-tab-pill .tab-content { | ||
background-color: var(--color_theme_background); | ||
padding: 0 0; | ||
} | ||
|
||
#dm-tab-pill .nav-pills > li > a { | ||
border-radius: 6px 6px 0 0; | ||
background-color: var(__color_theme_surface); /* Inactive tab background */ | ||
color: var(__color_theme_link); /* Inactive tab text */ | ||
} | ||
|
||
#dm-tab-pill .nav-pills > li.active > a, | ||
#dm-tab-pill .nav-pills > li.active > a:focus, | ||
#dm-tab-pill .nav-pills > li.active > a:hover { | ||
background-color: var(__color_theme_accent); /* Active tab background */ | ||
color: var(__color_theme_text_primary); /* Active tab text */ | ||
} | ||
|
||
#dm-tab-pill .nav-pills > li > a:hover { | ||
background-color: var(__color_theme_surface); /* Hover tab background */ | ||
color: var(__color_theme_accent); /* Hover tab text */ | ||
} | ||
|
||
|
||
/* Input and Label Styles */ | ||
input { | ||
display: none; | ||
visibility: hidden; | ||
} | ||
|
||
label { | ||
display: block; | ||
padding: .5em; | ||
text-align: center; | ||
border-bottom: 1px solid var(--color_theme_neutral_medium); | ||
color: var(--color_theme_primary); | ||
} | ||
|
||
label:hover { | ||
color: var(--color_theme_text_primary); | ||
} | ||
|
||
label::before { | ||
font-family: Consolas, monaco, monospace; | ||
font-weight: bold; | ||
font-size: 15px; | ||
content: "+"; | ||
vertical-align: text-top; | ||
display: inline-block; | ||
width: 20px; | ||
height: 20px; | ||
margin-right: 3px; | ||
background: var(--color_theme_background); | ||
} | ||
|
||
|
||
/* Tab Navigation Styles */ | ||
.nav-pills .nav-link { | ||
background-color: var(--color_theme_surface); /* Inactive tabs use secondary color */ | ||
color: var(--color_theme_primary); /* White text for contrast */ | ||
/* margin-right: 0.5rem; /* Space between tabs */ | ||
/* transition: all 0.2s ease-in-out; /* Smooth transition for interactions */ | ||
} | ||
|
||
.nav-pills .nav-link.active { | ||
background-color: var(--color_theme_primary); /* Active tab uses primary red */ | ||
color: var(--color_theme_text_primary); /* White text for contrast */ | ||
} | ||
|
||
/* Hover states */ | ||
.nav-pills .nav-link:hover { | ||
opacity: 0.9; /* Subtle hover effect */ | ||
transform: translateY(-1px); /* Slight lift effect */ | ||
} | ||
|
||
/* Focus visible styles */ | ||
.nav-pills .nav-link:focus-visible { | ||
outline: 2px solid var(--color_theme_primary); | ||
outline-offset: 2px; | ||
box-shadow: 0 0 0 4px var(--color_theme_focus); | ||
} | ||
|
||
/* Active state enhancements */ | ||
/*.nav-pills .nav-link.active:hover { | ||
background-color: #c82333; /* Darker red for hover */ | ||
/*} | ||
/* Additional styles to maintain visual hierarchy */ | ||
.task-id { | ||
color: var(--color_theme_primary); | ||
} | ||
|
||
.content-scroll { | ||
border: 1px solid var(--color_theme_border); | ||
box-shadow: 0 2px 4px rgba(0,0,0,0.05); | ||
} | ||
|
||
/* Ensure proper spacing for tab container */ | ||
.tab-container { | ||
margin-top: 2rem; | ||
} | ||
|
||
.nav-pills { | ||
margin-bottom: 1rem; | ||
gap: 0.5rem; /* Consistent spacing between tabs */ | ||
} |
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 |
---|---|---|
@@ -0,0 +1,176 @@ | ||
class MediaSlider { | ||
constructor(containerId, mediaUrls) { | ||
this.containerId = containerId; | ||
this.mediaUrls = Array.isArray(mediaUrls) ? mediaUrls : []; // Ensure mediaUrls is an array | ||
this.init(); | ||
} | ||
|
||
init() { | ||
this.injectStyles(); | ||
this.createSlider(); | ||
this.initializeSwiper(); | ||
} | ||
|
||
injectStyles() { | ||
const styles = ` | ||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"> | ||
<style> | ||
.swiper { | ||
width: 100%; | ||
height: 100%; | ||
margin: auto; | ||
border-radius: 10px; | ||
box-shadow: 0 0 2px var(--color_theme_shadow); | ||
} | ||
.swiper-slide { | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
background: var(--color_theme_surface); | ||
} | ||
.swiper-slide img { | ||
max-width: 100%; | ||
max-height: 100%; | ||
object-fit: contain; | ||
} | ||
.swiper-slide audio, | ||
.swiper-slide video { | ||
max-width: 100%; | ||
} | ||
.swiper-slide iframe { | ||
width: 100%; | ||
height: 100%; | ||
border: none; | ||
} | ||
.document-viewer { | ||
width: 100%; | ||
height: 100%; | ||
overflow: auto; | ||
} | ||
.swiper-button-next, | ||
.swiper-button-prev { | ||
background: var(--color_theme_background); | ||
padding: 10px; | ||
border-radius: 50%; | ||
color: var(--color_theme_text_primary); | ||
width: 25px; | ||
height: 25px; | ||
transition: all 0.3s ease; | ||
} | ||
.swiper-button-next:hover, | ||
.swiper-button-prev:hover { | ||
background: var(--color_theme_surface); | ||
transform: scale(1.1); | ||
} | ||
.swiper-button-next::after, | ||
.swiper-button-prev::after { | ||
font-size: 20px; | ||
font-weight: 700; | ||
} | ||
</style> | ||
`; | ||
document.head.insertAdjacentHTML('beforeend', styles); | ||
} | ||
|
||
detectMediaType(url) { | ||
const extension = url.split('.').pop().toLowerCase(); | ||
const mediaTypes = { | ||
'jpg': 'image', | ||
'jpeg': 'image', | ||
'png': 'image', | ||
'gif': 'image', | ||
'webp': 'image', | ||
'avif': 'image', | ||
'mp3': 'audio', | ||
'm4a': 'audio', | ||
'wav': 'audio', | ||
'ogg': 'audio', | ||
'mp4': 'video', | ||
'webm': 'video', | ||
'ogv': 'video', | ||
'pdf': 'pdf', | ||
'docx': 'office', | ||
'xlsx': 'office', | ||
'pptx': 'office' | ||
}; | ||
return mediaTypes[extension] || 'unknown'; | ||
} | ||
|
||
createMediaElement(url) { | ||
const mediaType = this.detectMediaType(url); | ||
const fallbackMessage = ` | ||
<div class="media-error"> | ||
<h2>404</h2> | ||
<p>Media file unavailable</p> | ||
<small>Please check your internet connection</small> | ||
</div>`; | ||
switch(mediaType) { | ||
case 'image': | ||
return `<img src="${url}" alt="Slider Image" class="swiper-lazy" onerror="this.outerHTML='${fallbackMessage}'">`; | ||
case 'audio': | ||
return `<audio controls onerror="this.outerHTML='${fallbackMessage}'"><source src="${url}" type="audio/${url.split('.').pop()}"></audio>`; | ||
case 'video': | ||
return `<video controls width="100%" onerror="this.outerHTML='${fallbackMessage}'"><source src="${url}" type="video/${url.split('.').pop()}"></video>`; | ||
case 'pdf': | ||
return `<iframe src="https://docs.google.com/viewer?url=${encodeURIComponent(url)}&embedded=true" class="pdf-frame" onerror="this.outerHTML='${fallbackMessage}'"></iframe>`; | ||
case 'office': | ||
return `<iframe src="https://docs.google.com/viewer?url=${encodeURIComponent(url)}&embedded=true" class="office-frame" | ||
onerror="this.outerHTML='${fallbackMessage}'"></iframe>`; | ||
default: | ||
return `<div>Unsupported media type</div>`; | ||
} | ||
} | ||
|
||
createSlider() { | ||
if (this.mediaUrls.length === 0) { | ||
document.getElementById(this.containerId).innerHTML = '<div>No media available</div>'; | ||
return; // Exit if there are no media URLs | ||
} | ||
|
||
const sliderHtml = ` | ||
<div class="swiper"> | ||
<div class="swiper-wrapper"> | ||
${this.mediaUrls.map(url => ` | ||
<div class="swiper-slide"> | ||
${this.createMediaElement(url)} | ||
</div> | ||
`).join('')} | ||
</div> | ||
<div class="swiper-button-next"></div> | ||
<div class="swiper-button-prev"></div> | ||
</div> | ||
`; | ||
document.getElementById(this.containerId).innerHTML = sliderHtml; | ||
} | ||
|
||
initializeSwiper() { | ||
const script = document.createElement('script'); | ||
script.src = 'https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js'; | ||
script.onload = () => { | ||
new Swiper('.swiper', { | ||
loop: true, | ||
autoplay: false, | ||
navigation: { | ||
nextEl: '.swiper-button-next', | ||
prevEl: '.swiper-button-prev', | ||
}, | ||
effect: 'fade', | ||
fadeEffect: { | ||
crossFade: true | ||
}, | ||
speed: 900, | ||
preloadImages: true, | ||
watchSlidesProgress: true | ||
}); | ||
}; | ||
document.body.appendChild(script); | ||
} | ||
} |