FeHelper/apps/grid-ruler/content-script.js

/**
 * 栅格相关处理
 * @author zhaoxianlie
 */
window.gridrulerContentScript = function () {

    // 创建栅格
    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">关闭栅格层</span>')
            .appendTo('#fe-helper-box').click(function () {
            jQuery('#fe-helper-box').remove();
        });
    };

    // 绘制Ruler
    let _drawRuler = function () {

        let _t = 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 cssInjected = false;
    /**
     * 执行栅格系统检测
     */
    window.gridrulerNoPage = function (tabInfo) {

        // 提前注入css
        if(!cssInjected) {
            chrome.runtime.sendMessage({
                type: 'fh-dynamic-any-thing',
                thing:'inject-content-css',
                tool: 'grid-ruler'
            });
        }

        //创建栅格
        _createGrid();

        //创建页面标尺
        _createPageRuler();

        // 事件绑定
        _bindEvent();
    };

};