From dd8de66bd357edd2ad005a641252d0a73bc88ca6 Mon Sep 17 00:00:00 2001 From: Tobias Reich Date: Tue, 28 Jan 2014 17:00:55 +0100 Subject: [PATCH] Basic Multiselect --- assets/css/modules/multiselect.css | 12 ++++ assets/js/modules/init.js | 12 ++-- assets/js/modules/multiselect.js | 110 +++++++++++++++++++++++++++++ index.html | 18 ++--- 4 files changed, 140 insertions(+), 12 deletions(-) create mode 100644 assets/css/modules/multiselect.css create mode 100644 assets/js/modules/multiselect.js diff --git a/assets/css/modules/multiselect.css b/assets/css/modules/multiselect.css new file mode 100644 index 0000000..b6eb242 --- /dev/null +++ b/assets/css/modules/multiselect.css @@ -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; +} \ No newline at end of file diff --git a/assets/js/modules/init.js b/assets/js/modules/init.js index f6e2236..2b45ed7 100755 --- a/assets/js/modules/init.js +++ b/assets/js/modules/init.js @@ -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")) }) diff --git a/assets/js/modules/multiselect.js b/assets/js/modules/multiselect.js new file mode 100644 index 0000000..12fd0ae --- /dev/null +++ b/assets/js/modules/multiselect.js @@ -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); + + } + +} \ No newline at end of file diff --git a/index.html b/index.html index 24b4913..84793b5 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@ - @@ -25,10 +25,11 @@ - --> + + - - + @@ -99,7 +100,7 @@ - @@ -114,10 +115,11 @@ - --> + + - - + \ No newline at end of file