work.suroh.tk/node_modules/browser-sync-ui/lib/plugins/remote-debug/overlay-grid/overlay-grid.js

101 lines
2.8 KiB
JavaScript
Raw Normal View History

2019-12-02 12:22:45 +00:00
var Immutable = require("immutable");
var fs = require("fs");
var path = require("path");
var baseHorizontal = fs.readFileSync(path.resolve(__dirname, "css/grid-overlay-horizontal.css"), "utf8");
var baseVertical = fs.readFileSync(path.resolve(__dirname, "css/grid-overlay-vertical.css"), "utf8");
function template (string, obj) {
obj = obj || {};
return string.replace(/\{\{(.+?)\}\}/g, function () {
if (obj[arguments[1]]) {
return obj[arguments[1]];
}
return "";
});
}
function getCss(opts) {
var base = opts.selector + " {position:relative;}";
if (opts.horizontal) {
base += baseHorizontal;
}
if (opts.vertical) {
base += baseVertical;
}
return template(base, opts);
}
module.exports.init = function (ui) {
const TRANSMIT_EVENT = "ui:remote-debug:css-overlay-grid";
const READY_EVENT = "ui:remote-debug:css-overlay-grid:ready";
const OPT_PATH = ["remote-debug", "overlay-grid"];
var defaults = {
offsetY: "0",
offsetX: "0",
size: "16px",
selector: "body",
color: "rgba(0, 0, 0, .2)",
horizontal: true,
vertical: true
};
ui.clients.on("connection", function (client) {
client.on(READY_EVENT, function () {
client.emit(TRANSMIT_EVENT, {
innerHTML: getCss(ui.options.getIn(OPT_PATH).toJS())
});
});
});
ui.setOptionIn(OPT_PATH, Immutable.Map({
name: "overlay-grid",
title: "Overlay CSS Grid",
active: false,
tagline: "Add an adjustable CSS overlay grid to your webpage",
innerHTML: ""
}).merge(defaults));
var methods = {
toggle: function (value) {
if (value !== true) {
value = false;
}
if (value) {
ui.setOptionIn(OPT_PATH.concat("active"), true);
ui.enableElement({name: "overlay-grid-js"});
} else {
ui.setOptionIn(OPT_PATH.concat("active"), false);
ui.disableElement({name: "overlay-grid-js"});
ui.clients.emit("ui:element:remove", {id: "__bs_overlay-grid-styles__"});
}
},
adjust: function (data) {
ui.setOptionIn(OPT_PATH, ui.getOptionIn(OPT_PATH).merge(data));
ui.clients.emit(TRANSMIT_EVENT, {
innerHTML: getCss(ui.options.getIn(OPT_PATH).toJS())
});
},
"toggle:axis": function (item) {
ui.setOptionIn(OPT_PATH.concat([item.axis]), item.value);
ui.clients.emit(TRANSMIT_EVENT, {
innerHTML: getCss(ui.options.getIn(OPT_PATH).toJS())
});
},
event: function (event) {
methods[event.event](event.data);
}
};
return methods;
};