arno/lychee
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Basic Multiselect

Browse Source
This commit is contained in:
Tobias Reich 2014-01-28 17:00:55 +01:00
parent c165722054
commit dd8de66bd3
4 changed files with 140 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
assets/css/modules/multiselect.css Normal file
View 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;
}

4
assets/js/modules/init.js
View File

@ -18,6 +18,10 @@ $(document).ready(function(){
/* 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);

110
assets/js/modules/multiselect.js Normal file
View 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
View File

@ -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>