Skip to content

Instantly share code, notes, and snippets.

@royriojas
Created Feb 21, 2017
Embed
What would you like to do?
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;
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment