☰

Page Ruler

移植FeHelper中的栅格标尺插件

  1. // ==UserScript==
  2. // @name         Page Ruler
  3. // @namespace    http://J3n5en.com/
  4. // @version      0.1
  5. // @description  移植FeHelper中的栅格标尺插件
  6. // @author       J3n5en
  7. // @license      MIT
  8. // @require http://code.jquery.com/jquery-3.4.1.min.js
  9. // @match        *://*/*
  10. // @grant GM_registerMenuCommand
  11. // @grant GM_addStyle
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     const _styles=`
  18. #fe-helper-box {
  19.     position: fixed;
  20.     left: 1px;
  21.     bottom: 0;
  22.     right:8px;
  23.     z-index: 2147483646;
  24.     font-size:12px;
  25. }
  26. #fe-helper-grid {
  27.     position:fixed;
  28.     top:0;
  29.     left:0;
  30.     z-index:2147483647;
  31.     opacity:0.03;
  32.     overflow:hidden;
  33.     -webkit-user-select:none;
  34.     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAANElEQVQYGWP8Jij7n4EIwPnuERGqGBiYwKrQjUTnE2UURBHEQEYGBgZkQ0B8EEAWgwoRogAZUQgA7keT1AAAAABJRU5ErkJggg==) repeat;
  35. }
  36. #fe-helper-btn-close-grid {
  37.     position:fixed;
  38.     bottom:10px;
  39.     right:10px;
  40.     font-size:12px;
  41.     font-weight:bold;
  42.     color:#00f;
  43.     z-index:2147483647;
  44.     cursor:pointer;
  45. }
  46. #fe-helper-btn-close-grid:hover {
  47.     color:#f00;
  48. }
  49. #fe-helper-g-pos {
  50.     background:none;
  51.     position:absolute;
  52.     top:0;
  53.     left:0;
  54.     z-index:2147483646;
  55.     border:1px solid #0b0;
  56.     border-width:0 1px 1px 0;
  57. }
  58. #fe-helper-gp-info {
  59.     position:absolute;
  60.     z-index:2147483646;
  61.     background:#ffc;
  62.     border:1px solid #666;
  63.     font-size:12px;
  64.     text-align:left;
  65.     padding:2px 10px;
  66.     display:none;
  67.     color:#000;
  68. }
  69. #fe-helper-ruler-top {
  70.     position:fixed;
  71.     top:0;
  72.     left:0;
  73.     right:0;
  74.     height:30px;
  75.     background:#fc0;
  76.     border-bottom:1px solid #000;
  77.     z-index:2147483647;
  78.     overflow:hidden;
  79. }
  80. #fe-helper-ruler-left {
  81.     position:fixed;
  82.     top:0;
  83.     left:0;
  84.     bottom:0;
  85.     width:30px;
  86.     background:#fc0;
  87.     border-right:1px solid #000;
  88.     z-index:2147483647;
  89.     overflow:hidden;
  90. }
  91. #fe-helper-ruler-top .h-line{
  92.     position:absolute;
  93.     width:1px;
  94.     background:#000;
  95. }
  96. #fe-helper-ruler-top .h-text{
  97.     position:absolute;
  98.     top:0;
  99.     font-size:8px;
  100.     color:#000;
  101. }
  102. #fe-helper-ruler-left .v-line{
  103.     position:absolute;
  104.     height:1px;
  105.     background:#000;
  106. }
  107. #fe-helper-ruler-left .v-text{
  108.     position:absolute;
  109.     left:0;
  110.     font-size:8px;
  111.     color:#000;
  112.     -webkit-transform:rotate(90deg);
  113.     margin-top:4px;
  114. }
  115. `
  116.     let _loadCss = function () {
  117.       GM_addStyle(_styles)
  118.     }
  119.  
  120.     // 创建栅格
  121.     let _createGrid = function () {
  122.  
  123.         let box = jQuery('#fe-helper-box');
  124.         if (box[0]) {	//已经有栅格，则移除
  125.             box.remove();
  126.         }
  127.         //没有栅格，则创建
  128.         let $win = jQuery(window);
  129.         let $body = jQuery('body');
  130.         jQuery('<div id="fe-helper-box"></div>').appendTo('body').css({
  131.             position: 'static'
  132.         });
  133.         jQuery('<div id="fe-helper-grid"></div>').appendTo('#fe-helper-box').css({
  134.             width: $body.width(),
  135.             height: Math.max($win.height(), $body.height())
  136.         }).mousemove(function (e) {
  137.             let pos = {};
  138.             try {
  139.                 pos = document.getElementsByTagName('body')[0].getBoundingClientRect();
  140.             } catch (err) {
  141.                 pos = {left: 0, top: 0};
  142.             }
  143.             //虚线框
  144.             jQuery('#fe-helper-g-pos').show().css({
  145.                 width: e.pageX - pos.left,
  146.                 height: e.pageY
  147.             });
  148.  
  149.             let _t = Math.min(e.pageY, jQuery(window).height() + $body.scrollTop() - 40);
  150.             let _l = Math.min(e.pageX, jQuery(window).width() + $body.scrollLeft() - 200) + 5 - pos.left;
  151.  
  152.             //坐标tooltip
  153.             jQuery('#fe-helper-gp-info').show().css({
  154.                 top: _t,
  155.                 left: _l
  156.             }).html('top = ' + e.pageY + ' px ,left = ' + e.pageX + ' px');
  157.         }).mouseout(function (e) {
  158.             jQuery('#fe-helper-g-pos,#fe-helper-gp-info').hide();
  159.         });
  160.  
  161.         jQuery('<div id="fe-helper-g-pos"></div><div id="fe-helper-gp-info"></div>').appendTo('#fe-helper-box');
  162.         jQuery('<span id="fe-helper-btn-close-grid">Close PageRuler</span>')
  163.             .appendTo('#fe-helper-box').click(function () {
  164.             jQuery('#fe-helper-box').remove();
  165.         });
  166.     };
  167.  
  168.     // 绘制Ruler
  169.     let _drawRuler = function () {
  170.  
  171.         let _t = 0,_l = 0, _h = 30, _w = 30;
  172.         let $win = jQuery(window);
  173.         let $page = jQuery('html');
  174.         let elScroll = jQuery(document.scrollingElement || 'html');
  175.         let $width = Math.max($win.width(), $page.width(), elScroll[0].scrollWidth);
  176.         let $height = Math.max($win.height(), $page.height(), elScroll[0].scrollHeight);
  177.         let rulerTop = jQuery('#fe-helper-ruler-top').width($width);
  178.         let rulerLeft = jQuery('#fe-helper-ruler-left').height($height);
  179.  
  180.         if (!rulerTop.children().length || rulerTop.children().last().position().left < $width - 50) {
  181.             rulerTop.html('');
  182.             for (let i = 30; i <= $width; i += 10) {
  183.                 _t = (i % 50) ? 10 : 0;
  184.                 jQuery('<div class="h-line"></div>').appendTo('#fe-helper-ruler-top').css({
  185.                     left: i - 1,
  186.                     top: _t + 15,
  187.                     height: _h - _t - 5
  188.                 });
  189.                 if (_t === 0 && i !== 0) {
  190.                     jQuery('<div class="h-text">' + i + '</div>').appendTo('#fe-helper-ruler-top').css({
  191.                         left: i - (String(i).length * 4)
  192.                     });
  193.                 }
  194.             }
  195.         }
  196.  
  197.         if (!rulerLeft.children().length || rulerLeft.children().last().position().top < $height - 50) {
  198.             rulerLeft.html('');
  199.             for (let i = 0; i <= $height; i += 10) {
  200.                 _l = (i % 50) ? 10 : 0;
  201.                 jQuery('<div class="v-line"></div>').appendTo('#fe-helper-ruler-left').css({
  202.                     left: _l + 15,
  203.                     top: i - 1,
  204.                     width: _w - _l - 5
  205.                 });
  206.                 if (_l === 0) {
  207.                     jQuery('<div class="v-text">' + i + '</div>').appendTo('#fe-helper-ruler-left').css({
  208.                         top: i - (String(i).length * 4),
  209.                         left: i === 0 ? 5 : 0
  210.                     });
  211.                 }
  212.             }
  213.         }
  214.     };
  215.  
  216.     // 创建页面标尺
  217.     let _createPageRuler = function () {
  218.         if (!jQuery('#fe-helper-box')[0]) {
  219.             jQuery('<div id="fe-helper-box"></div>').appendTo('body');
  220.         }
  221.         jQuery('<div id="fe-helper-ruler-top"></div><div id="fe-helper-ruler-left"></div>').appendTo('#fe-helper-box');
  222.         _drawRuler();
  223.  
  224.     };
  225.  
  226.     // 全局事件绑定
  227.     let _bindEvent = function () {
  228.  
  229.         //为页面注册按键监听
  230.         jQuery('body').keydown(function (e) {
  231.             if (jQuery('#fe-helper-box')[0]) {
  232.                 if (e.which === 27) { //ESC
  233.                     jQuery('#fe-helper-box').remove();
  234.                 }
  235.             }
  236.         });
  237.  
  238.         //window.onresize
  239.         jQuery(window).resize(function () {
  240.             if (jQuery('#fe-helper-box')[0]) {
  241.                 let $win = jQuery(window);
  242.                 let $body = jQuery('body');
  243.                 jQuery('#fe-helper-grid').css({
  244.                     width: Math.max($win.width(), $body.width()),
  245.                     height: Math.max($win.height(), $body.height())
  246.                 });
  247.  
  248.                 _drawRuler();
  249.             }
  250.         });
  251.  
  252.         //处理scroll的时候，标尺跟着移动
  253.         jQuery(window).scroll(function (e) {
  254.             if (jQuery('#fe-helper-box')[0]) {
  255.                 let elScroll = jQuery(document.scrollingElement || 'html');
  256.                 //水平标尺定位
  257.                 jQuery('#fe-helper-ruler-top').css('left', 0 - elScroll.scrollLeft());
  258.                 //垂直标尺
  259.                 jQuery('#fe-helper-ruler-left').css('top', 0 - elScroll.scrollTop());
  260.             }
  261.         });
  262.     };
  263.     /**
  264.      * 执行栅格系统检测
  265.      */
  266.     let _detect = function (callback) {
  267.  
  268.         // 加载CSS
  269.         _loadCss();
  270.  
  271.         //创建栅格
  272.         _createGrid();
  273.  
  274.         //创建页面标尺
  275.         _createPageRuler();
  276.  
  277.         // 事件绑定
  278.         _bindEvent();
  279.  
  280.  
  281.         //执行回调
  282.         if (callback && typeof callback === "function") {
  283.             callback.call(null);
  284.         }
  285.     };
  286.     GM_registerMenuCommand("Open PageRuler", _detect, "RULER");
  287. })();