Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in / Register
Toggle navigation
S
stable-diffusion-webui
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Administrator
stable-diffusion-webui
Commits
23a0ec04
Unverified
Commit
23a0ec04
authored
Sep 17, 2022
by
AUTOMATIC1111
Committed by
GitHub
Sep 17, 2022
Browse files
Options
Browse Files
Download
Plain Diff
Merge pull request #616 from dfaker/patch-3
Block event propagation when lightbox is triggered
parents
1dd721d1
f9cae046
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
104 additions
and
7 deletions
+104
-7
script.js
script.js
+78
-7
style.css
style.css
+26
-0
No files found.
script.js
View file @
23a0ec04
...
@@ -80,9 +80,57 @@ function closeModal() {
...
@@ -80,9 +80,57 @@ function closeModal() {
gradioApp
().
getElementById
(
"lightboxModal"
).
style
.
display
=
"none"
;
gradioApp
().
getElementById
(
"lightboxModal"
).
style
.
display
=
"none"
;
}
}
function
showModal
(
elem
)
{
function
showModal
(
event
)
{
gradioApp
().
getElementById
(
"modalImage"
).
src
=
elem
.
src
var
source
=
event
.
target
||
event
.
srcElement
;
gradioApp
().
getElementById
(
"lightboxModal"
).
style
.
display
=
"block"
;
gradioApp
().
getElementById
(
"modalImage"
).
src
=
source
.
src
var
lb
=
gradioApp
().
getElementById
(
"lightboxModal"
)
lb
.
style
.
display
=
"block"
;
lb
.
focus
()
event
.
stopPropagation
()
}
function
negmod
(
n
,
m
)
{
return
((
n
%
m
)
+
m
)
%
m
;
}
function
modalImageSwitch
(
offset
){
var
galleryButtons
=
gradioApp
().
querySelectorAll
(
".gallery-item.transition-all"
)
if
(
galleryButtons
.
length
>
1
){
var
currentButton
=
gradioApp
().
querySelector
(
".gallery-item.transition-all.
\\
!ring-2"
)
var
result
=
-
1
galleryButtons
.
forEach
(
function
(
v
,
i
){
if
(
v
==
currentButton
)
{
result
=
i
}
})
if
(
result
!=
-
1
){
nextButton
=
galleryButtons
[
negmod
((
result
+
offset
),
galleryButtons
.
length
)]
nextButton
.
click
()
gradioApp
().
getElementById
(
"modalImage"
).
src
=
nextButton
.
children
[
0
].
src
setTimeout
(
function
(){
gradioApp
().
getElementById
(
"lightboxModal"
).
focus
()},
10
)
}
}
}
function
modalNextImage
(
event
){
modalImageSwitch
(
1
)
event
.
stopPropagation
()
}
function
modalPrevImage
(
event
){
modalImageSwitch
(
-
1
)
event
.
stopPropagation
()
}
function
modalKeyHandler
(
event
){
switch
(
event
.
key
)
{
case
"ArrowLeft"
:
modalPrevImage
(
event
)
break
;
case
"ArrowRight"
:
modalNextImage
(
event
)
break
;
}
}
}
function
showGalleryImage
(){
function
showGalleryImage
(){
...
@@ -92,12 +140,13 @@ function showGalleryImage(){
...
@@ -92,12 +140,13 @@ function showGalleryImage(){
if
(
fullImg_preview
!=
null
){
if
(
fullImg_preview
!=
null
){
fullImg_preview
.
forEach
(
function
function_name
(
e
)
{
fullImg_preview
.
forEach
(
function
function_name
(
e
)
{
if
(
e
&&
e
.
parentElement
.
tagName
==
'DIV'
){
if
(
e
&&
e
.
parentElement
.
tagName
==
'DIV'
){
e
.
style
.
cursor
=
'pointer'
e
.
style
.
cursor
=
'pointer'
e
lemfunc
=
function
(
elem
)
{
e
.
addEventListener
(
'click'
,
function
(
evt
)
{
elem
.
onclick
=
function
(){
showModal
(
elem
)};
showModal
(
evt
)
}
elemfunc
(
e
)
},
true
);
}
}
});
});
}
}
...
@@ -181,13 +230,35 @@ document.addEventListener("DOMContentLoaded", function() {
...
@@ -181,13 +230,35 @@ document.addEventListener("DOMContentLoaded", function() {
modalClose
.
innerHTML
=
'×'
modalClose
.
innerHTML
=
'×'
modalClose
.
onclick
=
closeModal
;
modalClose
.
onclick
=
closeModal
;
modal
.
id
=
"lightboxModal"
;
modal
.
id
=
"lightboxModal"
;
modal
.
tabIndex
=
0
modal
.
addEventListener
(
'keydown'
,
modalKeyHandler
,
true
)
modal
.
appendChild
(
modalClose
)
modal
.
appendChild
(
modalClose
)
const
modalImage
=
document
.
createElement
(
'img'
)
const
modalImage
=
document
.
createElement
(
'img'
)
modalImage
.
id
=
'modalImage'
;
modalImage
.
id
=
'modalImage'
;
modalImage
.
onclick
=
closeModal
;
modalImage
.
onclick
=
closeModal
;
modalImage
.
tabIndex
=
0
modalImage
.
addEventListener
(
'keydown'
,
modalKeyHandler
,
true
)
modal
.
appendChild
(
modalImage
)
modal
.
appendChild
(
modalImage
)
const
modalPrev
=
document
.
createElement
(
'a'
)
modalPrev
.
className
=
'modalPrev'
;
modalPrev
.
innerHTML
=
'❮'
modalPrev
.
tabIndex
=
0
modalPrev
.
addEventListener
(
'click'
,
modalPrevImage
,
true
);
modalPrev
.
addEventListener
(
'keydown'
,
modalKeyHandler
,
true
)
modal
.
appendChild
(
modalPrev
)
const
modalNext
=
document
.
createElement
(
'a'
)
modalNext
.
className
=
'modalNext'
;
modalNext
.
innerHTML
=
'❯'
modalNext
.
tabIndex
=
0
modalNext
.
addEventListener
(
'click'
,
modalNextImage
,
true
);
modalNext
.
addEventListener
(
'keydown'
,
modalKeyHandler
,
true
)
modal
.
appendChild
(
modalNext
)
gradioApp
().
getRootNode
().
appendChild
(
modal
)
gradioApp
().
getRootNode
().
appendChild
(
modal
)
document
.
body
.
appendChild
(
modalFragment
);
document
.
body
.
appendChild
(
modalFragment
);
...
...
style.css
View file @
23a0ec04
...
@@ -248,3 +248,29 @@ input[type="range"]{
...
@@ -248,3 +248,29 @@ input[type="range"]{
width
:
auto
;
width
:
auto
;
}
}
.modalPrev
,
.modalNext
{
cursor
:
pointer
;
position
:
absolute
;
top
:
50%
;
width
:
auto
;
padding
:
16px
;
margin-top
:
-50px
;
color
:
white
;
font-weight
:
bold
;
font-size
:
20px
;
transition
:
0.6s
ease
;
border-radius
:
0
3px
3px
0
;
user-select
:
none
;
-webkit-user-select
:
none
;
}
.modalNext
{
right
:
0
;
border-radius
:
3px
0
0
3px
;
}
.modalPrev
:hover
,
.modalNext
:hover
{
background-color
:
rgba
(
0
,
0
,
0
,
0.8
);
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment