Basic Multiselect

pull/91/head
Tobias Reich 10 years ago
parent c165722054
commit dd8de66bd3

@ -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")) })

@ -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);
}
}

@ -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…
Cancel
Save