forked from rDrama/rDrama
make js file for expanded_image_modal
parent
b34322c52f
commit
9590db0ddc
|
@ -170,34 +170,6 @@ bs_trigger(document);
|
||||||
|
|
||||||
const negative_awards = document.querySelectorAll("[data-positive=False]")
|
const negative_awards = document.querySelectorAll("[data-positive=False]")
|
||||||
|
|
||||||
let all_images
|
|
||||||
let position
|
|
||||||
let last_img_index
|
|
||||||
|
|
||||||
const imgnav_next = document.getElementById('imgnav-next')
|
|
||||||
const imgnav_prev = document.getElementById('imgnav-prev')
|
|
||||||
|
|
||||||
document.addEventListener('keydown', (e) => {
|
|
||||||
if (['ArrowRight', 'd'].includes(e.key) && imgnav_next && !imgnav_next.classList.contains('d-none')) {
|
|
||||||
imgnav_next.click()
|
|
||||||
}
|
|
||||||
else if (['ArrowLeft', 'a'].includes(e.key) && imgnav_prev && !imgnav_prev.classList.contains('d-none')) {
|
|
||||||
imgnav_prev.click()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
function handle_navigation(delta) {
|
|
||||||
position += delta
|
|
||||||
if (position < last_img_index) {
|
|
||||||
imgnav_next.classList.remove('d-none')
|
|
||||||
imgnav_next.href = all_images[position+1].dataset.src
|
|
||||||
}
|
|
||||||
if (position > 0) {
|
|
||||||
imgnav_prev.classList.remove('d-none')
|
|
||||||
imgnav_prev.href = all_images[position-1].dataset.src
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener("click", function (e) {
|
document.addEventListener("click", function (e) {
|
||||||
let element = e.target
|
let element = e.target
|
||||||
if (element.tagName == "I")
|
if (element.tagName == "I")
|
||||||
|
@ -205,15 +177,7 @@ document.addEventListener("click", function (e) {
|
||||||
|
|
||||||
if (!element) return
|
if (!element) return
|
||||||
|
|
||||||
if (element == imgnav_next) {
|
if (element instanceof HTMLImageElement && (element.alt.startsWith('![](') || element.classList.contains('img'))) {
|
||||||
expandImage(element.href)
|
|
||||||
handle_navigation(1)
|
|
||||||
}
|
|
||||||
else if (element == imgnav_prev) {
|
|
||||||
expandImage(element.href)
|
|
||||||
handle_navigation(-1)
|
|
||||||
}
|
|
||||||
else if (element instanceof HTMLImageElement && (element.alt.startsWith('![](') || element.classList.contains('img'))) {
|
|
||||||
expandImage()
|
expandImage()
|
||||||
all_images = element.parentElement.parentElement.parentElement.getElementsByClassName('img')
|
all_images = element.parentElement.parentElement.parentElement.getElementsByClassName('img')
|
||||||
if (all_images.length != 0) {
|
if (all_images.length != 0) {
|
||||||
|
|
|
@ -186,31 +186,6 @@ function formkey() {
|
||||||
else return null;
|
else return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const expandImageModal = document.getElementById('expandImageModal')
|
|
||||||
|
|
||||||
function expandImage(url) {
|
|
||||||
document.getElementById('imgnav-next').classList.add('d-none')
|
|
||||||
document.getElementById('imgnav-prev').classList.add('d-none')
|
|
||||||
|
|
||||||
const e = this.event
|
|
||||||
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey)
|
|
||||||
return;
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
document.getElementById("expanded-image").src = '';
|
|
||||||
document.getElementById("expanded-image-wrap-link").href = '';
|
|
||||||
|
|
||||||
if (!url)
|
|
||||||
{
|
|
||||||
url = e.target.dataset.src
|
|
||||||
if (!url) url = e.target.src
|
|
||||||
}
|
|
||||||
document.getElementById("expanded-image").src = url.replace("200w.webp", "giphy.webp");
|
|
||||||
document.getElementById("expanded-image-wrap-link").href = url.replace("200w.webp", "giphy.webp");
|
|
||||||
|
|
||||||
bootstrap.Modal.getOrCreateInstance(expandImageModal).show();
|
|
||||||
};
|
|
||||||
|
|
||||||
function bs_trigger(e) {
|
function bs_trigger(e) {
|
||||||
let tooltipTriggerList = [].slice.call(e.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
let tooltipTriggerList = [].slice.call(e.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||||
tooltipTriggerList.map(function(element){
|
tooltipTriggerList.map(function(element){
|
||||||
|
@ -685,8 +660,12 @@ function handleUploadProgress(e, upload_prog) {
|
||||||
|
|
||||||
if (screen_width < 768) {
|
if (screen_width < 768) {
|
||||||
let object
|
let object
|
||||||
|
|
||||||
|
const expandImageModal = document.getElementById('expandImageModal')
|
||||||
|
|
||||||
if (gbrowser == 'iphone' && expandImageModal)
|
if (gbrowser == 'iphone' && expandImageModal)
|
||||||
object = expandImageModal
|
object = expandImageModal
|
||||||
|
|
||||||
if (gbrowser != 'iphone')
|
if (gbrowser != 'iphone')
|
||||||
object = document
|
object = document
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,63 @@
|
||||||
|
let all_images
|
||||||
|
let position
|
||||||
|
let last_img_index
|
||||||
|
|
||||||
|
const imgnav_next = document.getElementById('imgnav-next')
|
||||||
|
const imgnav_prev = document.getElementById('imgnav-prev')
|
||||||
|
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (['ArrowRight', 'd'].includes(e.key) && imgnav_next && !imgnav_next.classList.contains('d-none')) {
|
||||||
|
imgnav_next.click()
|
||||||
|
}
|
||||||
|
else if (['ArrowLeft', 'a'].includes(e.key) && imgnav_prev && !imgnav_prev.classList.contains('d-none')) {
|
||||||
|
imgnav_prev.click()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function handle_navigation(delta) {
|
||||||
|
position += delta
|
||||||
|
if (position < last_img_index) {
|
||||||
|
imgnav_next.classList.remove('d-none')
|
||||||
|
imgnav_next.href = all_images[position+1].dataset.src
|
||||||
|
}
|
||||||
|
if (position > 0) {
|
||||||
|
imgnav_prev.classList.remove('d-none')
|
||||||
|
imgnav_prev.href = all_images[position-1].dataset.src
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const expandImageModal = document.getElementById('expandImageModal')
|
||||||
|
|
||||||
|
function expandImage(url) {
|
||||||
|
document.getElementById('imgnav-next').classList.add('d-none')
|
||||||
|
document.getElementById('imgnav-prev').classList.add('d-none')
|
||||||
|
|
||||||
|
const e = this.event
|
||||||
|
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey)
|
||||||
|
return;
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
document.getElementById("expanded-image").src = '';
|
||||||
|
document.getElementById("expanded-image-wrap-link").href = '';
|
||||||
|
|
||||||
|
if (!url)
|
||||||
|
{
|
||||||
|
url = e.target.dataset.src
|
||||||
|
if (!url) url = e.target.src
|
||||||
|
}
|
||||||
|
document.getElementById("expanded-image").src = url.replace("200w.webp", "giphy.webp");
|
||||||
|
document.getElementById("expanded-image-wrap-link").href = url.replace("200w.webp", "giphy.webp");
|
||||||
|
|
||||||
|
bootstrap.Modal.getOrCreateInstance(expandImageModal).show();
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
imgnav_next.onclick = () => {
|
||||||
|
expandImage(imgnav_next.href)
|
||||||
|
handle_navigation(1)
|
||||||
|
}
|
||||||
|
|
||||||
|
imgnav_prev.onclick = () => {
|
||||||
|
expandImage(imgnav_prev.href)
|
||||||
|
handle_navigation(-1)
|
||||||
|
}
|
|
@ -9,3 +9,5 @@
|
||||||
<a id="imgnav-next" class="fas fa-arrow-right px-5 py-3 px-md-4 py-md-5 d-none"></a>
|
<a id="imgnav-next" class="fas fa-arrow-right px-5 py-3 px-md-4 py-md-5 d-none"></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script defer src="{{'js/expanded_image_modal.js' | asset}}"></script>
|
||||||
|
|
Loading…
Reference in New Issue