Saturday, November 15, 2014

JavaScript text selection popover

Those who have read some articles on Medium.com are aware of how they can select text anywhere on a page and share it on Twitter or write a short comment about the selected text right on that page.

That's a nice popover to have, if the requirement is to select the text and show some information related to it on the same spot. I thought of posting a simple demo of it here, so that others can use it.

Here's the code 

HTML:
    
Having been in the field, most recently in India, I have seen that access to safe water is just a few dollars away for many people. A small loan can create a pathway to a household water tap. Making access to capital ubiquitous and affordable for those living in poverty would go a long way towards eliminating water stress.
CSS:
::selection{
  background: SeaGreen;
  color: White;
}
::-moz-selection{
  background: SeaGreen;
  color: White;
}
#textDescription{
  line-height:1.9em; font-size:16px; margin:10px; border:1px #333 solid; padding:5px; width: 450px;
 }
 .selectedText{
  position: relative;
  background-color: SeaGreen; color:#fff; line-height: 1.2em;
 } 
 .popDiv{
  background: ForestGreen; color: white; padding: 6px; width: 180px; height: 80px;  
  position: absolute; top: 18px; left: 0;
  border-radius: 4px; box-shadow: 2px 3px 4px #444;

  -webkit-animation: slideIn .5s;
  animation: slideIn .5s;
 }

 @-webkit-keyframes slideIn{
  from{
   top: 8px; opacity: 0; height: 40px;
  }
  to{
   top: 18px; opacity: 1; height: 80px;
  }
 }

 @-moz-keyframes slideIn{
  from{
   top: 8px; opacity: 0; height: 40px;
  }
  to{
   top: 18px; opacity: 1; height: 80px;
  }
 }

 @keyframes slideIn{
  from{
   top: 8px; opacity: 0; height: 40px;
  }
  to{
   top: 18px; opacity: 1; height: 80px;
  }
 }
JavaScript / jQuery:
 


 var parentContainerId = "textDescription"
  
 if(!window.CurrentSelection){
  CurrentSelection = {}
 }
 
 CurrentSelection.Selector = {}
 
 //get the current selection
 CurrentSelection.Selector.getSelected = function(){
  var sel = '';
  if(window.getSelection){
   sel = window.getSelection()
  }
  else if(document.getSelection){
   sel = document.getSelection()
  }
  else if(document.selection){
   sel = document.selection.createRange()
  }
  return sel
 }
 //function to be called on mouseup
 CurrentSelection.Selector.mouseup = function(){
  
  var st = CurrentSelection.Selector.getSelected()
  if(document.selection && !window.getSelection){
    var range = st
    range.pasteHTML("" + range.htmlText + "");   
  }
  else{
    var range = st.getRangeAt(0)    
    var newNode = document.createElement("span");
    newNode.setAttribute("class", "selectedText");
    range.surroundContents(newNode);
    //
    var getTitle = newNode.innerHTML;
    newNode.setAttribute("title", getTitle);

    //
    var popDiv = document.createElement('span');
    popDiv.setAttribute('class', 'popDiv');
    popDiv.innerHTML = getTitle;

    if(newNode.innerHTML.length > 0) {
     newNode.appendChild(popDiv);
    }     
    //Remove Selection: To avoid extra text selection in IE  
    if (window.getSelection) {
      window.getSelection().removeAllRanges();
    }
        else if (document.selection){ 
         document.selection.empty();
        }
        //
  }
 }
        
 $(function(){

  $("#"+parentContainerId).on('mouseup', function(){
    $('span.selectedText').contents().unwrap();
    $(this).find('span.popDiv').remove();
  });

  $("#"+parentContainerId).bind("mouseup",CurrentSelection.Selector.mouseup); 
 })        


Demo: http://jsfiddle.net/dipaks2011/uz0gsu8a/1/



Related Posts:

jQuery tab navigation:
http://dipaksblogonline.blogspot.in/2012/03/simple-jquery-tab-navigation.html

Defer third party scripts:
http://dipaksblogonline.blogspot.in/2012/06/defer-third-party-scriptsads-until.html

Using multiple iScrolls in one page:
http://dipaksblogonline.blogspot.in/2013/06/using-multiple-iscroll-in-one-page.html



1 comment:

  1. I implemented the Text Selection Popover code. Works great for what it does, but not so well for my app. I need to have a similar use but more general. Here is my situation.

    I have a back end module that is used to update a database table. Within the module I have a form with multiple tabs and textareas. On one tab I have four textareas. The input to each text area is simply numbers separated by a pipe character (e.g., 12345|54331|85214). Each number represents an index into the table. I would like to be able to select a number and then access the database and show the popover with the record name from the database (e.g., 12345 would be Joe Smith, 54331, Mary Jones, etc.)

    With the current script I can set the parentContainerId to point to one of the textareas but the box is no longer editable and the popover does not display.

    Is it possible to modify the present script to do what I need? Given the monetary(?) resources would you be able to do this?

    James A. Wilson
    msgwcc@msholmes.org

    ReplyDelete