Javascript/HTML: How to make a small UI pop out on select

Question

I am making a chrome extension that interacts with the current page when the user selects some text.

What we want it to do is to make a small window pop up to let the user select within different options.

Something along the lines of this:

http://img-ipad.lisisoft.com/img/1/5/1526-1-pdf-highlighter.jpg

What we have so far is the following:

document.addEventListener('mouseup',boxOption)


function boxOption(){
   var yourSelection = window.getSelection();
   if (yourSelection!=""){
       /* insert popup here */
   }
}

Any help would be greatly appreciated

Answer 1

You can implement the popup by inserting an element into the DOM (or revealing an existing element within the DOM) which simply has a "z-index" property that puts it above the other elements. Ex:

// Create a class that encapsulates the menu element
// This particular implementation constructs a new element
// and adds it to the DOM, but you could instead take the
// element as a parameter or have it retrieve an existing element
var PopupMenu = function() {
  this.element = document.createElement('div');
  this.element.className = 'popup-menu';
  document.body.appendChild(this.element);
  // ...
  // set up event listeners for this element
  // ...
};

// The menu is hidden unless it also has the 'enabled' class
PopupMenu.prototype.setVisible = function(isVisible) {
   if (isVisible) {
     this.element.classList.add('enabled');
   } else {
     this.elemnt.classlist.remove('enabled');
   }
};

And then in your CSS, you could do:

.popup-menu {
  display: none;
}
.popup-menu.enabled {
  display: block;
  /* this just needs to be larger than the z-index of the items it covers */
  z-index: 100;
}

I'll leave the rest of the styling/handlers of the menu up to you.