justspamjustin / ruler-marklet

A bookmarklet to add some basic lines for alignment.

ruler-marklet

A bookmarklet to add some basic lines for alignment.

[∟ Ruler](javascript:(function ($) %7B%0A var styles = '%5C%0A .horizontal-ruler %7B%5C%0A height: 20px;%5C%0A width: 100%25;%5C%0A position: fixed;%5C%0A left: 0;%5C%0A top: 10px;%5C%0A cursor: row-resize;%5C%0A z-index: 10000;%5C%0A -webkit-user-select: none;%5C%0A %7D%5C%0A .horizontal-ruler:after %7B%5C%0A display: block;%5C%0A content: "";%5C%0A border-bottom: solid 1px;%5C%0A position: relative;%5C%0A top: 5px;%5C%0A -webkit-user-select: none;%5C%0A %7D%5C%0A .vertical-ruler %7B%5C%0A width: 20px;%5C%0A height: 100%25;%5C%0A position: fixed;%5C%0A left: 10px;%5C%0A top: 0;%5C%0A cursor: col-resize;%5C%0A z-index: 10000;%5C%0A -webkit-user-select: none;%5C%0A %7D%5C%0A .vertical-ruler:after %7B%5C%0A display: block;%5C%0A content: "";%5C%0A border-right: solid 1px;%5C%0A position: relative;%5C%0A left: -5px;%5C%0A height: 100%25;%5C%0A -webkit-user-select: none;%5C%0A %7D%5C%0A body %7B-webkit-user-select: none;%7D%5C%0A ';%0A%0A var RIGHT_ARROW = 39;%0A var LEFT_ARROW = 37;%0A var DOWN_ARROW = 38;%0A var UP_ARROW = 40;%0A var ESC = 27;%0A%0A var RulerDirections = %7B%0A VERT: 'VERT',%0A HORIZ: 'HORIZ'%0A %7D;%0A%0A var RulerHandler = function(ruler, direction) %7B%0A this.ruler = ruler;%0A this.direction = direction;%0A this.dragging = false;%0A this.bindEvents();%0A %7D;%0A%0A RulerHandler.prototype.bindEvents = function () %7B%0A var self = this;%0A this.ruler.on('mousedown', function (e) %7B%0A self.onMouseDown(e);%0A %7D);%0A $(document).on('mouseup', function (e) %7B%0A self.onMouseUp(e);%0A %7D);%0A $(document).on('mousemove', function (e) %7B%0A self.onMouseMove(e);%0A %7D);%0A %7D;%0A%0A RulerHandler.prototype.onMouseDown = function (e) %7B%0A this.dragging = true;%0A this.lastX = e.clientX;%0A this.lastY = e.clientY;%0A %7D;%0A%0A RulerHandler.prototype.onMouseUp = function () %7B%0A this.dragging = false;%0A %7D;%0A%0A RulerHandler.prototype.onMouseMove = function (e) %7B%0A if (this.dragging) %7B%0A if (this.direction === RulerDirections.VERT) %7B%0A var left = parseInt(this.ruler.css('left'));%0A this.ruler.css(%7B%0A left: left + (e.clientX - this.lastX)%0A %7D);%0A %7D else if (this.direction === RulerDirections.HORIZ) %7B%0A var top = parseInt(this.ruler.css('top'));%0A this.ruler.css(%7B%0A top: top + (e.clientY - this.lastY)%0A %7D);%0A %7D%0A this.lastX = e.clientX;%0A this.lastY = e.clientY;%0A %7D%0A %7D;%0A%0A var style = document.createElement('style');%0A style.innerHTML = styles;%0A $('head').append(style);%0A%0A var hRule = $('

').appendTo('body');%0A var vRule = $('

').appendTo('body');%0A%0A%0A new RulerHandler(hRule, RulerDirections.HORIZ);%0A new RulerHandler(vRule, RulerDirections.VERT);%0A%0A $(document).on('keydown', function (e) %7B%0A var top = parseInt(hRule.css('top'));%0A var left = parseInt(vRule.css('left'));%0A switch (e.keyCode) %7B%0A case UP_ARROW:%0A top++;%0A break;%0A case DOWN_ARROW:%0A top--;%0A break;%0A case RIGHT_ARROW:%0A left++;%0A break;%0A case LEFT_ARROW:%0A left--;%0A break;%0A case ESC:%0A hRule.remove();%0A vRule.remove();%0A %7D%0A hRule.css('top', top);%0A vRule.css('left', left);%0A %7D);%0A%0A%7D)(window.jQuery);)