Drag over PDF

by alanbeech

HTML

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<iframe src="https://www.noupe.com/design/7-key-principles-that-make-a-web-design-look-good.html" width="100%" height="900" ></iframe>

<div class="screen-cover"></div>
  
<div id="text-positioner">
  <div class="top">DRAG TO POSITION</div>
  <div class="bottom">SELECTED DATE</div>
  <div class="left"></div>
  <div class="right"></div>
  <div class="text-area">12/12/2017</div>
  <div class="done-button">DONE</div>
</div>

SCSS

body, html {
  font-family: Arial; 
  height: 100%;
  
   .screen-cover {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #eee;
     opacity: 0.1;
     width: 100%;
     height: 100%;
    }
 
  #text-positioner {
    position: absolute;
    display: none;
    //background-color: red;
    top: 10px;
    height: 80px;
    width: 200px;
    cursor: pointer;
    
    

    .left {
      position: absolute;
       background-color: #000;
        opacity: 0.4;
        top: 20px;
        bottom: 40px;
        left: 0;
        width: 20px;
    } 

    .right {
      position: absolute;
       background-color: #000;
        opacity: 0.4;
        top: 20px;
        bottom: 40px;
        right: 0;
        width: 20px;
    }  

    .top {
      position: absolute;
        background-color: #000;
        opacity: 0.4;
        right: 0;
        left: 0;
        height: 15px;
        color: white;
        font-size: 10px;
        text-align: center;
        padding-top: 5px;
    }

    .bottom {
      position: absolute;
       background-color: #000;
        opacity: 0.4;
        bottom:20px;
        right: 0;
        left: 0;
        height: 15px;
        color: white;
        font-size: 10px;
        text-align: center;
        padding-top: 5px;
    }
    
    .done-button {
      position: absolute;
       background-color: #000;
        bottom:0;
        right: 0;
        left: 0;
        height: 15px;
        color: white;
        font-size: 10px;
        text-align: center;
        padding-top: 5px;
    }

    .text-area {
      width: 100%;
      //text-align: center;
      margin-left: 23px;
      margin-top: 22px;
    }
    
    

  }

}

JavaScript

var textPositioner = function(){

   var textPositioner = $('#text-positioner');
   var doneButton = $('.done-button');
   var textField = $("#text-positioner .text-area");
   var textValue = '';
   
   function init(){
     textPositioner.draggable();
     handlePositionSet();
   }
   
   function show(x, y, text){
   	 textPositioner.css({top: y, left: x});
     textValue = text;
     textField.html(text);
     textPositioner.fadeIn();
   }
   
   function handlePositionSet(){
   	doneButton.on('click', function(){
      if (confirm('Are you sure you want to place the selected date here?'))
      {
        var position = textPositioner.position();

        var result = {
          fileId: 1234,
          textOverlay: [
          {
          	content: textValue,
            xPos: position.left,
            yPos: position.top,
            fontSize: 12,
            font: 'Arial'
          }
          ]
        };
        
        alert(JSON.stringify(result))
      }
    });
   }

   return {
      init: init,
      show: show
   }
}();

$(function() {
	textPositioner.init();
	textPositioner.show(10, 10, '05/02/2017');
});