Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
therealtimex authored Nov 30, 2024
1 parent 0f2c3bf commit ad12ae5
Showing 2 changed files with 390 additions and 0 deletions.
214 changes: 214 additions & 0 deletions css/rt-dmview-css-min.css
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 */
}
176 changes: 176 additions & 0 deletions js/mediaSlider.js
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);
}
}

0 comments on commit ad12ae5

Please sign in to comment.