Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Google Chrome
Gorilla Script- and Style-Loader
Commits
22a5179f
Verified
Commit
22a5179f
authored
Jan 23, 2019
by
Marco Kellershoff
🤸
Browse files
Make links clickable + all nodes draggable
parent
1bd0df53
Changes
2
Hide whitespace changes
Inline
Side-by-side
options.css
View file @
22a5179f
...
...
@@ -54,20 +54,37 @@ h1 span {
background-color
:
#de6a73
;
}
button
:focus
{
outline
:
none
;
}
.input-file-url
{
background-color
:
#222
;
border
:
5px
solid
#444
;
border-radius
:
10px
;
border
:
5px
solid
#444
;
color
:
#f2cf66
;
font-size
:
16px
;
padding
:
10px
;
width
:
350px
;
}
.input-file-url
:focus
{
outline
:
none
;
}
.clickable-url
{
cursor
:
pointer
;
text-decoration
:
underline
;
}
.select-file-type
{
background-color
:
#112233
;
}
.select-file-type
:focus
{
outline
:
none
;
}
.select-file-type
option
:checked
{
background-color
:
#051525
;
}
...
...
options.js
View file @
22a5179f
...
...
@@ -4,6 +4,10 @@
const
$
=
q
=>
document
.
querySelector
(
q
);
const
$$
=
q
=>
document
.
querySelectorAll
(
q
);
const
filesList
=
$
(
"
.files
"
);
let
ctrlKeyPressed
=
false
;
let
mouseOveredFileUrlInput
=
null
;
let
dragSrcEl
=
null
;
const
setDataStoreKey
=
function
(
key
,
value
,
cb
)
{
cb
=
cb
||
function
()
{};
const
val
=
{};
...
...
@@ -44,10 +48,63 @@
alert
(
msg
);
};
const
onDropCallback
=
function
(
evt
)
{
if
(
dragSrcEl
!==
this
)
{
dragSrcEl
.
innerHTML
=
this
.
innerHTML
;
this
.
innerHTML
=
evt
.
dataTransfer
.
getData
(
"
text/html
"
);
addEventsToListItem
(
dragSrcEl
);
addEventsToListItem
(
this
);
}
};
const
onDragOverCallback
=
(
evt
)
=>
{
if
(
evt
.
preventDefault
)
{
evt
.
preventDefault
();
}
evt
.
dataTransfer
.
dropEffect
=
"
move
"
;
return
false
;
};
const
onDragStartCallback
=
function
(
evt
)
{
dragSrcEl
=
this
;
evt
.
dataTransfer
.
effectAllowed
=
"
move
"
;
evt
.
dataTransfer
.
setData
(
"
text/html
"
,
this
.
innerHTML
);
};
const
addEventsToListItem
=
(
node
)
=>
{
const
input
=
node
.
querySelector
(
"
input
"
);
const
select
=
node
.
querySelector
(
"
select
"
);
const
btnAdd
=
node
.
querySelector
(
"
.btn-file-add
"
);
const
btnRemove
=
node
.
querySelector
(
"
.btn-file-remove
"
);
input
.
addEventListener
(
"
click
"
,
function
(
evt
)
{
if
(
evt
&&
evt
.
preventDefault
&&
ctrlKeyPressed
)
{
evt
.
preventDefault
();
window
.
open
(
this
.
value
);
}
},
{
passive
:
false
}
);
input
.
addEventListener
(
"
mouseover
"
,
function
()
{
mouseOveredFileUrlInput
=
this
;
},
{
passive
:
true
}
);
input
.
addEventListener
(
"
mouseout
"
,
function
()
{
this
.
classList
.
remove
(
"
clickable-url
"
);
mouseOveredFileUrlInput
=
null
;
},
{
passive
:
true
}
);
select
.
addEventListener
(
"
change
"
,
function
()
{
...
...
@@ -84,6 +141,16 @@
},
{
passive
:
true
}
);
node
.
addEventListener
(
"
dragstart
"
,
onDragStartCallback
,
{
passive
:
false
});
node
.
addEventListener
(
"
dragover
"
,
onDragOverCallback
,
{
passive
:
false
});
node
.
addEventListener
(
"
drop
"
,
onDropCallback
,
{
passive
:
false
});
};
const
createFileItem
=
(
file
,
refNode
)
=>
{
...
...
@@ -138,60 +205,46 @@
}
};
let
dragSrcEl
=
null
;
// load files from store and populate the list
getDataStoreKey
(
"
files
"
,
[],
(
files
)
=>
{
if
(
files
.
length
===
0
)
{
return
;
}
files
.
forEach
(
file
=>
createFileItem
(
file
));
filesList
.
querySelectorAll
(
"
li
"
).
forEach
((
listEl
)
=>
{
listEl
.
addEventListener
(
"
dragstart
"
,
function
(
evt
)
{
dragSrcEl
=
this
;
evt
.
dataTransfer
.
effectAllowed
=
"
move
"
;
evt
.
dataTransfer
.
setData
(
"
text/html
"
,
this
.
innerHTML
);
},
{
passive
:
false
}
);
listEl
.
addEventListener
(
"
dragover
"
,
(
evt
)
=>
{
if
(
evt
.
preventDefault
)
{
evt
.
preventDefault
();
}
evt
.
dataTransfer
.
dropEffect
=
"
move
"
;
return
false
;
},
{
passive
:
false
}
);
listEl
.
addEventListener
(
"
drop
"
,
function
(
evt
)
{
if
(
dragSrcEl
!==
this
)
{
dragSrcEl
.
innerHTML
=
this
.
innerHTML
;
this
.
innerHTML
=
evt
.
dataTransfer
.
getData
(
"
text/html
"
);
addEventsToListItem
(
dragSrcEl
);
addEventsToListItem
(
this
);
}
},
{
passive
:
false
}
);
});
});
let
onCtrlSCallback
=
function
(
evt
)
{
if
(
evt
.
ctrlKey
===
true
&&
evt
.
key
===
"
s
"
)
{
evt
.
preventDefault
();
save
(
"
Configuration saved.
"
);
return
false
;
let
onKeyDownCallback
=
function
(
evt
)
{
if
(
evt
.
ctrlKey
===
true
)
{
ctrlKeyPressed
=
true
;
if
(
mouseOveredFileUrlInput
)
{
mouseOveredFileUrlInput
.
classList
.
add
(
"
clickable-url
"
);
}
if
(
evt
.
key
===
"
s
"
)
{
evt
.
preventDefault
();
save
(
"
Configuration saved.
"
);
return
false
;
}
}
};
window
.
addEventListener
(
"
keydown
"
,
onCtrlSCallback
,
{
passive
:
false
});
let
onKeyUpCallback
=
function
(
evt
)
{
if
(
evt
.
ctrlKey
===
true
)
{
ctrlKeyPressed
=
true
;
}
else
{
ctrlKeyPressed
=
false
;
}
if
(
mouseOveredFileUrlInput
)
{
if
(
ctrlKeyPressed
)
{
mouseOveredFileUrlInput
.
classList
.
add
(
"
clickable-url
"
);
}
else
{
mouseOveredFileUrlInput
.
classList
.
remove
(
"
clickable-url
"
);
}
}
};
window
.
addEventListener
(
"
keydown
"
,
onKeyDownCallback
,
{
passive
:
false
});
window
.
addEventListener
(
"
keyup
"
,
onKeyUpCallback
,
{
passive
:
false
});
})();
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