rulers.js

rulers.js

$(`<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>`).appendTo('head')

$(`<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" type="text/css" />`).appendTo('head');

var createBox = () => {
  const w = 100;
  const h = 100;
  const style = `
    background: rgba(0,0,0,.4); 
    position:absolute; 
    top: 0; 
    left: 0; 
    z-index: 9999;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
  `;

  const $box = $(`<div style="${style}"><span data-size>${w}, ${h}</span></div>`).appendTo('body');
  $box.css({ width: w, height: h });
  $box.draggable().resizable({ 
    resize(event, ui) {
      $box.find('[data-size]').text(`${ui.size.width}, ${ui.size.height}`);
    }
  });
};

function createRuler(axis, options) {
  axis = axis || 'y';

  var opts = {
    color: 'red',
    background: 'rgba(0,0,0,.3)'
  };

  $.extend(opts, options);

  var dimensions = axis === 'y' ? 'width:100%; height: 40px;' : 'height: 100%;width: 40px;';
  var divStyle = `cursor:pointer; border-top:1px solid ${opts.color}; background:${opts.background};position:fixed;top:0;left:0;z-index:9999`;
  var closeStyle = 'color:#fff;position:absolute;right:10px;top:5px;font-size:13px;text-decoration:none;';
  var $ruler = $(`<div style="${dimensions}${divStyle}">
                    <a data-cmd="close" style="${closeStyle}">
                      <span>close</span>
                    </a>
                  </div>`).appendTo('body');

  $ruler.draggable({
    axis: axis
  });

  $ruler.on('click', '[data-cmd=close]', function (e) {
    $ruler.remove();
    return false;
  });
}