Calculating menu position

Posted by Calvin on April 24, 2023 at 2:14 PM

Categories: cloud javascript css

I came across a front-end challenge last week that I found interesting. One of the features of the cloud storage app I am building at work is a drop-down menu that appears when clicking on a triangle in the top right of a folder or file icon:

The issue was that if the element clicked is too close to the left or right edge of it's container, the dropdown menu would either be covering the sidebar (left side) or cutoff by the viewport (right side).

To solve this, I had to use some math to calculate the available space and position of the clicked element and then set the position of the dropdown based on these factors.

I decided to use the total width of the container and compare it to the center of the clicked element and then position the dropdown a percentage to the left or right of the clicked element based on these datapoints.

I first calculated the center of the clicked element compared to it's contaner and the center of the container itself (I had to subtract 250 from both due to the left sidebar having a width of 250px and a fixed position):

var parentCenter = $(this).parent().offset().left + 60 - 250;
var windowCenter = ($(window).width() - 250) / 2;

Then I calculated the offset of the clicked element's center from the window center, and then used that number to calculate the offset I needed from the parent element's center (I needed the dropdown container to be offset left or right relative to the clicked element the same percentage that the parent container is offset from the total width of their parent container):

var percentageFromCenter = (parentCenter / windowCenter);
var offset = 120 - (120 * percentageFromCenter);

Last step was setting the margin-left of the dropdown container to that offset before toggling it's display:

$(this).parent().find('.file-icon-dropdown').css('margin-left', offset);

The result can be seen here (apologies for the text url, apparently imgur converts all gifs to mp4 files now and my WYSIWYG editor doesn't allow embedded video files):

https://i.imgur.com/gHKf7OE.mp4

Creating a cloud storage app

Posted by Calvin on April 21, 2023 at 1:02 PM

Categories: cloud javascript css

My current task at work is to build out a cloud storage app with a PHP backend, which will be used for sharing documents both internally and with externally. Necessary features:

• User registration, authentication
  • User roles: Admin User, Internal User, External User
• Folder creation, copy, share, delete
• File upload, download, coopy, share, delete
  • File previews
  • File details
• Search functionality

I started out by creating a DB diagram for the mysql database:

There will likely be additions to the database structure as the app gets more fleshed out, but this will be a good initial design and will allow me to start fleshing out the most critical front end and back end features.