移植FeHelper中的栅格标尺插件
// ==UserScript==
// @name Page Ruler
// @namespace http://J3n5en.com/
// @version 0.1
// @description 移植FeHelper中的栅格标尺插件
// @author J3n5en
// @license MIT
// @require http://code.jquery.com/jquery-3.4.1.min.js
// @match *://*/*
// @grant GM_registerMenuCommand
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
const _styles=`
#fe-helper-box {
position: fixed;
left: 1px;
bottom: 0;
right:8px;
z-index: 2147483646;
font-size:12px;
}
#fe-helper-grid {
position:fixed;
top:0;
left:0;
z-index:2147483647;
opacity:0.03;
overflow:hidden;
-webkit-user-select:none;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAANElEQVQYGWP8Jij7n4EIwPnuERGqGBiYwKrQjUTnE2UURBHEQEYGBgZkQ0B8EEAWgwoRogAZUQgA7keT1AAAAABJRU5ErkJggg==) repeat;
}
#fe-helper-btn-close-grid {
position:fixed;
bottom:10px;
right:10px;
font-size:12px;
font-weight:bold;
color:#00f;
z-index:2147483647;
cursor:pointer;
}
#fe-helper-btn-close-grid:hover {
color:#f00;
}
#fe-helper-g-pos {
background:none;
position:absolute;
top:0;
left:0;
z-index:2147483646;
border:1px solid #0b0;
border-width:0 1px 1px 0;
}
#fe-helper-gp-info {
position:absolute;
z-index:2147483646;
background:#ffc;
border:1px solid #666;
font-size:12px;
text-align:left;
padding:2px 10px;
display:none;
color:#000;
}
#fe-helper-ruler-top {
position:fixed;
top:0;
left:0;
right:0;
height:30px;
background:#fc0;
border-bottom:1px solid #000;
z-index:2147483647;
overflow:hidden;
}
#fe-helper-ruler-left {
position:fixed;
top:0;
left:0;
bottom:0;
width:30px;
background:#fc0;
border-right:1px solid #000;
z-index:2147483647;
overflow:hidden;
}
#fe-helper-ruler-top .h-line{
position:absolute;
width:1px;
background:#000;
}
#fe-helper-ruler-top .h-text{
position:absolute;
top:0;
font-size:8px;
color:#000;
}
#fe-helper-ruler-left .v-line{
position:absolute;
height:1px;
background:#000;
}
#fe-helper-ruler-left .v-text{
position:absolute;
left:0;
font-size:8px;
color:#000;
-webkit-transform:rotate(90deg);
margin-top:4px;
}
`
let _loadCss = function () {
GM_addStyle(_styles)
}
// 创建栅格
let _createGrid = function () {
let box = jQuery('#fe-helper-box');
if (box[0]) { //已经有栅格，则移除
box.remove();
}
//没有栅格，则创建
let $win = jQuery(window);
let $body = jQuery('body');
jQuery('<div id="fe-helper-box"></div>').appendTo('body').css({
position: 'static'
});
jQuery('<div id="fe-helper-grid"></div>').appendTo('#fe-helper-box').css({
width: $body.width(),
height: Math.max($win.height(), $body.height())
}).mousemove(function (e) {
let pos = {};
try {
pos = document.getElementsByTagName('body')[0].getBoundingClientRect();
} catch (err) {
pos = {left: 0, top: 0};
}
//虚线框
jQuery('#fe-helper-g-pos').show().css({
width: e.pageX - pos.left,
height: e.pageY
});
let _t = Math.min(e.pageY, jQuery(window).height() + $body.scrollTop() - 40);
let _l = Math.min(e.pageX, jQuery(window).width() + $body.scrollLeft() - 200) + 5 - pos.left;
//坐标tooltip
jQuery('#fe-helper-gp-info').show().css({
top: _t,
left: _l
}).html('top = ' + e.pageY + ' px ,left = ' + e.pageX + ' px');
}).mouseout(function (e) {
jQuery('#fe-helper-g-pos,#fe-helper-gp-info').hide();
});
jQuery('<div id="fe-helper-g-pos"></div><div id="fe-helper-gp-info"></div>').appendTo('#fe-helper-box');
jQuery('<span id="fe-helper-btn-close-grid">Close PageRuler</span>')
.appendTo('#fe-helper-box').click(function () {
jQuery('#fe-helper-box').remove();
});
};
// 绘制Ruler
let _drawRuler = function () {
let _t = 0,_l = 0, _h = 30, _w = 30;
let $win = jQuery(window);
let $page = jQuery('html');
let elScroll = jQuery(document.scrollingElement || 'html');
let $width = Math.max($win.width(), $page.width(), elScroll[0].scrollWidth);
let $height = Math.max($win.height(), $page.height(), elScroll[0].scrollHeight);
let rulerTop = jQuery('#fe-helper-ruler-top').width($width);
let rulerLeft = jQuery('#fe-helper-ruler-left').height($height);
if (!rulerTop.children().length || rulerTop.children().last().position().left < $width - 50) {
rulerTop.html('');
for (let i = 30; i <= $width; i += 10) {
_t = (i % 50) ? 10 : 0;
jQuery('<div class="h-line"></div>').appendTo('#fe-helper-ruler-top').css({
left: i - 1,
top: _t + 15,
height: _h - _t - 5
});
if (_t === 0 && i !== 0) {
jQuery('<div class="h-text">' + i + '</div>').appendTo('#fe-helper-ruler-top').css({
left: i - (String(i).length * 4)
});
}
}
}
if (!rulerLeft.children().length || rulerLeft.children().last().position().top < $height - 50) {
rulerLeft.html('');
for (let i = 0; i <= $height; i += 10) {
_l = (i % 50) ? 10 : 0;
jQuery('<div class="v-line"></div>').appendTo('#fe-helper-ruler-left').css({
left: _l + 15,
top: i - 1,
width: _w - _l - 5
});
if (_l === 0) {
jQuery('<div class="v-text">' + i + '</div>').appendTo('#fe-helper-ruler-left').css({
top: i - (String(i).length * 4),
left: i === 0 ? 5 : 0
});
}
}
}
};
// 创建页面标尺
let _createPageRuler = function () {
if (!jQuery('#fe-helper-box')[0]) {
jQuery('<div id="fe-helper-box"></div>').appendTo('body');
}
jQuery('<div id="fe-helper-ruler-top"></div><div id="fe-helper-ruler-left"></div>').appendTo('#fe-helper-box');
_drawRuler();
};
// 全局事件绑定
let _bindEvent = function () {
//为页面注册按键监听
jQuery('body').keydown(function (e) {
if (jQuery('#fe-helper-box')[0]) {
if (e.which === 27) { //ESC
jQuery('#fe-helper-box').remove();
}
}
});
//window.onresize
jQuery(window).resize(function () {
if (jQuery('#fe-helper-box')[0]) {
let $win = jQuery(window);
let $body = jQuery('body');
jQuery('#fe-helper-grid').css({
width: Math.max($win.width(), $body.width()),
height: Math.max($win.height(), $body.height())
});
_drawRuler();
}
});
//处理scroll的时候，标尺跟着移动
jQuery(window).scroll(function (e) {
if (jQuery('#fe-helper-box')[0]) {
let elScroll = jQuery(document.scrollingElement || 'html');
//水平标尺定位
jQuery('#fe-helper-ruler-top').css('left', 0 - elScroll.scrollLeft());
//垂直标尺
jQuery('#fe-helper-ruler-left').css('top', 0 - elScroll.scrollTop());
}
});
};
/**
* 执行栅格系统检测
*/
let _detect = function (callback) {
// 加载CSS
_loadCss();
//创建栅格
_createGrid();
//创建页面标尺
_createPageRuler();
// 事件绑定
_bindEvent();
//执行回调
if (callback && typeof callback === "function") {
callback.call(null);
}
};
GM_registerMenuCommand("Open PageRuler", _detect, "RULER");
})();