Basic Multiselect
This commit is contained in:
Tobias Reich
parent
c165722054
commit
dd8de66bd3
12
assets/css/modules/multiselect.css
Normal file
12
assets/css/modules/multiselect.css
Normal file
@ -0,0 +1,12 @@
|
||||
/**
|
||||
* @name multiselect.css
|
||||
* @author Tobias Reich
|
||||
* @copyright 2014 by Tobias Reich
|
||||
*/
|
||||
|
||||
#multiselect {
|
||||
position: absolute;
|
||||
background-color: RGBA(0, 94, 204, .4);
|
||||
border: 1px solid RGBA(0, 94, 204, 1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
@ -11,13 +11,17 @@ $(document).ready(function(){
|
||||
|
||||
/* Notifications */
|
||||
if (window.webkitNotifications) window.webkitNotifications.requestPermission();
|
||||
|
||||
|
||||
/* Disable ContextMenu */
|
||||
$(document).bind("contextmenu", function(e) { e.preventDefault() });
|
||||
|
||||
/* Tooltips */
|
||||
if (!mobileBrowser()) $(".tools").tipsy({gravity: 'n', fade: false, delayIn: 0, opacity: 1});
|
||||
|
||||
/* Multiselect */
|
||||
$("#content").on("mousedown", multiselect.show);
|
||||
$(document).on("mouseup", multiselect.close);
|
||||
|
||||
/* Header */
|
||||
$("#hostedwith").on(event_name, function() { window.open(lychee.website,"_newtab") });
|
||||
$("#button_signin").on(event_name, lychee.loginDialog);
|
||||
@ -41,9 +45,9 @@ $(document).ready(function(){
|
||||
|
||||
/* Search */
|
||||
$("#search").on("keyup click", function() { search.find($(this).val()) });
|
||||
|
||||
|
||||
/* Clear Search */
|
||||
$("#clearSearch").on(event_name, function () {
|
||||
$("#clearSearch").on(event_name, function () {
|
||||
$("#search").focus();
|
||||
search.reset();
|
||||
});
|
||||
@ -106,7 +110,7 @@ $(document).ready(function(){
|
||||
if (visible.photo()) photo.setTitle(photo.getID());
|
||||
else album.setTitle(album.getID());
|
||||
})
|
||||
|
||||
|
||||
/* Navigation */
|
||||
.on("click", ".album", function() { lychee.goto($(this).attr("data-id")) })
|
||||
.on("click", ".photo", function() { lychee.goto(album.getID() + "/" + $(this).attr("data-id")) })
|
||||
|
||||
110
assets/js/modules/multiselect.js
Normal file
110
assets/js/modules/multiselect.js
Normal file
@ -0,0 +1,110 @@
|
||||
/**
|
||||
* @name Multiselect Module
|
||||
* @description Select multiple albums or photos.
|
||||
* @author Tobias Reich
|
||||
* @copyright 2014 by Tobias Reich
|
||||
*/
|
||||
|
||||
multiselect = {
|
||||
|
||||
position: {
|
||||
|
||||
top: null,
|
||||
right: null,
|
||||
bottom: null,
|
||||
left: null
|
||||
|
||||
},
|
||||
|
||||
show: function(e) {
|
||||
|
||||
if ($('.album:hover, .photo:hover').length!=0) return false;
|
||||
if (visible.multiselect()) $('#multiselect').remove();
|
||||
|
||||
multiselect.position.top = e.pageY;
|
||||
multiselect.position.right = -1 * (e.pageX - $(document).width());
|
||||
multiselect.position.bottom = -1 * (multiselect.position.top - $(window).height());
|
||||
multiselect.position.left = e.pageX;
|
||||
|
||||
$('body').append(build.multiselect(multiselect.position.top, multiselect.position.left));
|
||||
$(document).on('mousemove', multiselect.resize);
|
||||
|
||||
},
|
||||
|
||||
resize: function(e) {
|
||||
|
||||
var mouse_x = e.pageX,
|
||||
mouse_y = e.pageY,
|
||||
newHeight,
|
||||
newWidth;
|
||||
|
||||
if (multiselect.position.top===null||
|
||||
multiselect.position.right===null||
|
||||
multiselect.position.bottom===null||
|
||||
multiselect.position.left===null) return false;
|
||||
|
||||
if (mouse_y>=multiselect.position.top) {
|
||||
|
||||
// Do not leave the screen
|
||||
newHeight = e.pageY - multiselect.position.top;
|
||||
if ((multiselect.position.top+newHeight)>=$(document).height())
|
||||
newHeight -= (multiselect.position.top + newHeight) - $(document).height() + 2;
|
||||
|
||||
$('#multiselect').css({
|
||||
top: multiselect.position.top,
|
||||
bottom: 'inherit',
|
||||
height: newHeight
|
||||
});
|
||||
|
||||
} else {
|
||||
|
||||
$('#multiselect').css({
|
||||
top: 'inherit',
|
||||
bottom: multiselect.position.bottom,
|
||||
height: multiselect.position.top - e.pageY
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
if (mouse_x>=multiselect.position.left) {
|
||||
|
||||
// Do not leave the screen
|
||||
newWidth = e.pageX - multiselect.position.left;
|
||||
if ((multiselect.position.left+newWidth)>=$(document).width())
|
||||
newWidth -= (multiselect.position.left + newWidth) - $(document).width() + 2;
|
||||
|
||||
$('#multiselect').css({
|
||||
right: 'inherit',
|
||||
left: multiselect.position.left,
|
||||
width: newWidth
|
||||
});
|
||||
|
||||
} else {
|
||||
|
||||
$('#multiselect').css({
|
||||
right: multiselect.position.right,
|
||||
left: 'inherit',
|
||||
width: multiselect.position.left - e.pageX
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
close: function() {
|
||||
|
||||
$(document).off('mousemove');
|
||||
|
||||
multiselect.position.top = null;
|
||||
multiselect.position.right = null;
|
||||
multiselect.position.bottom = null;
|
||||
multiselect.position.left = null;
|
||||
|
||||
lychee.animate('#multiselect', "fadeOut");
|
||||
setTimeout(function() {
|
||||
$('#multiselect').remove();
|
||||
}, 300);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
18
index.html
18
index.html
@ -12,7 +12,7 @@
|
||||
<!-- CSS -->
|
||||
<link type="text/css" rel="stylesheet" href="assets/css/min/reset.css">
|
||||
|
||||
<!-- Development
|
||||
<!-- Development -->
|
||||
<link type="text/css" rel="stylesheet" href="assets/css/modules/upload.css">
|
||||
<link type="text/css" rel="stylesheet" href="assets/css/modules/tooltip.css">
|
||||
<link type="text/css" rel="stylesheet" href="assets/css/modules/misc.css">
|
||||
@ -25,10 +25,11 @@
|
||||
<link type="text/css" rel="stylesheet" href="assets/css/modules/font.css">
|
||||
<link type="text/css" rel="stylesheet" href="assets/css/modules/contextmenu.css">
|
||||
<link type="text/css" rel="stylesheet" href="assets/css/modules/content.css">
|
||||
<link type="text/css" rel="stylesheet" href="assets/css/modules/animations.css"> -->
|
||||
<link type="text/css" rel="stylesheet" href="assets/css/modules/animations.css">
|
||||
<link type="text/css" rel="stylesheet" href="assets/css/modules/multiselect.css">
|
||||
|
||||
<!-- Production -->
|
||||
<link type="text/css" rel="stylesheet" href="assets/css/min/main.css">
|
||||
<!-- Production
|
||||
<link type="text/css" rel="stylesheet" href="assets/css/min/main.css"> -->
|
||||
|
||||
<link rel="shortcut icon" href="assets/img/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="assets/img/apple-touch-icon-iphone.png" sizes="120x120">
|
||||
@ -99,7 +100,7 @@
|
||||
<!-- JS -->
|
||||
<script defer type="text/javascript" src="assets/js/min/frameworks.js"></script>
|
||||
|
||||
<!-- Development
|
||||
<!-- Development -->
|
||||
<script defer type="text/javascript" src="assets/js/modules/init.js"></script>
|
||||
<script defer type="text/javascript" src="assets/js/modules/lychee.js"></script>
|
||||
<script defer type="text/javascript" src="assets/js/modules/build.js"></script>
|
||||
@ -114,10 +115,11 @@
|
||||
<script defer type="text/javascript" src="assets/js/modules/visible.js"></script>
|
||||
<script defer type="text/javascript" src="assets/js/modules/loadingBar.js"></script>
|
||||
<script defer type="text/javascript" src="assets/js/modules/contextMenu.js"></script>
|
||||
<script defer type="text/javascript" src="assets/js/modules/search.js"></script> -->
|
||||
<script defer type="text/javascript" src="assets/js/modules/search.js"></script>
|
||||
<script defer type="text/javascript" src="assets/js/modules/multiselect.js"></script>
|
||||
|
||||
<!-- Production -->
|
||||
<script defer type="text/javascript" src="assets/js/min/main.js"></script>
|
||||
<!-- Production
|
||||
<script defer type="text/javascript" src="assets/js/min/main.js"></script> -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user