Centralize menu button coordinate logic and replace popupwindows with dropdownmenu.

modules/bar/utils.js

@@ -0,0 +1,37 @@
+export const closeAllMenus = () => {
+  App.closeWindow("bluetoothmenu");
+  App.closeWindow("audiomenu");
+  App.closeWindow("networkmenu");
+  App.closeWindow("mediamenu");
+  App.closeWindow("calendarmenu");
+};
+
+export const openMenu = (clicked, event, window) => {
+  /*
+   * NOTE: We have to make some adjustments so the menu pops up relatively
+   * to the center of the button clicked. We don't want the menu to spawn
+   * offcenter dependending on which edge of the button you click on.
+   * -------------
+   * To fix this, we take the x coordinate of the click within the icon's bounds.
+   * So if you click the left edge of a 100width button then the x axis will be 0
+   * and if you click the right edge then the x axis will be 100.
+   * -------------
+   * Then we divide the width of the button by 2 to get the center of the button and then get
+   * the offset by subtracting the clicked x coordinate. Then we can apply that offset
+   * to the x coordinate of the click relative to the screen to get the center of the
+   * icon click.
+   */
+
+  const middleOfButton = Math.floor(clicked.get_allocated_width() / 2);
+  const xAxisOfButtonClick = clicked.get_pointer()[0];
+  const middleOffset = middleOfButton - xAxisOfButtonClick;
+
+  const clickPos = event.get_root_coords();
+  const adjustedXCoord = clickPos[1] + middleOffset;
+  const coords = [adjustedXCoord, clickPos[2]];
+
+  globalMousePos.value = coords;
+
+  closeAllMenus();
+  App.toggleWindow(window);
+};