This commit is contained in:
tatianamac
2019-11-26 14:50:43 -08:00
parent 8a55660ed0
commit 6d5445ecc5
13894 changed files with 2233957 additions and 0 deletions

View File

@ -0,0 +1,16 @@
{{selector}}:after {
position: absolute;
width: auto;
height: auto;
z-index: 9999;
content: '';
display: block;
pointer-events: none;
top: {{offsetY}};
right: 0;
bottom: 0;
left: {{offsetX}};
background-color: transparent;
background-image: linear-gradient({{color}} 1px, transparent 1px);
background-size: 100% {{size}};
}

View File

@ -0,0 +1,16 @@
{{selector}}:before {
position: absolute;
width: auto;
height: auto;
z-index: 9999;
content: '';
display: block;
pointer-events: none;
top: {{offsetY}};
right: 0;
bottom: 0;
left: {{offsetX}};
background-color: transparent;
background-image: linear-gradient(90deg, {{color}} 1px, transparent 1px);
background-size: {{size}} 100%;
}

View File

@ -0,0 +1,18 @@
(function (window, bs, undefined) {
var styleElem = bs.addDomNode({
placement: "head",
attrs: {
"type": "text/css",
id: "__bs_overlay-grid-styles__"
},
tagName: "style"
});
bs.socket.on("ui:remote-debug:css-overlay-grid", function (data) {
styleElem.innerHTML = data.innerHTML;
});
bs.socket.emit("ui:remote-debug:css-overlay-grid:ready");
}(window, window.___browserSync___));

View File

@ -0,0 +1,56 @@
(function (angular) {
const SECTION_NAME = "remote-debug";
/**
* Display the snippet when in snippet mode
*/
angular
.module("BrowserSync")
.directive("cssGrid", function () {
return {
restrict: "E",
replace: true,
scope: {
"options": "="
},
templateUrl: "overlay-grid.html",
controller: ["$scope", "Socket", overlayGridDirectiveControlller],
controllerAs: "ctrl"
};
});
/**
* @param $scope
* @param Socket
*/
function overlayGridDirectiveControlller($scope, Socket) {
var ctrl = this;
ctrl.overlayGrid = $scope.options[SECTION_NAME]["overlay-grid"];
ctrl.size = ctrl.overlayGrid.size;
var ns = SECTION_NAME + ":overlay-grid";
ctrl.alter = function (value) {
Socket.emit("ui", {
namespace: ns,
event: "adjust",
data: value
});
};
ctrl.toggleAxis = function (axis, value) {
Socket.emit("ui", {
namespace: ns,
event: "toggle:axis",
data: {
axis: axis,
value: value
}
});
};
}
})(angular);

View File

@ -0,0 +1,106 @@
<div ng-show="ctrl.overlayGrid.active" bs-panel-content>
<div bs-inputs bs-grid="wide-4 desk-2">
<div bs-grid-item>
<div bs-input="text">
<label for="grid-size" bs-input-label>Grid Size</label>
<div bs-input>
<input type="text"
max="100"
min="0"
step="1"
id="grid-size"
size="20"
ng-change="ctrl.alter(ctrl.overlayGrid)"
ng-model="ctrl.overlayGrid.size"/>
</div>
</div>
</div>
<div bs-grid-item>
<div bs-input="text">
<label for="grid-color" bs-input-label>Grid Colour</label>
<div bs-input>
<input type="text"
max="100"
min="0"
step="1"
id="grid-color"
size="20"
ng-change="ctrl.alter(ctrl.overlayGrid)"
ng-model="ctrl.overlayGrid.color"/>
</div>
</div>
</div>
<div bs-grid-item>
<div bs-input="text">
<label for="grid-selector" bs-input-label>CSS Selector</label>
<div bs-input>
<input type="text"
max="100"
min="0"
step="1"
id="grid-selector"
size="20"
ng-change="ctrl.alter(ctrl.overlayGrid)"
ng-model="ctrl.overlayGrid.selector"/>
</div>
</div>
</div>
</div>
<div bs-inputs bs-grid="wide-4 desk-2">
<div bs-grid-item>
<div bs-input="text">
<label for="grid-offsetY" bs-input-label>Offset Top</label>
<div bs-input>
<input type="text"
id="grid-offsetY"
size="20"
ng-change="ctrl.alter(ctrl.overlayGrid)"
ng-model="ctrl.overlayGrid.offsetY"/>
</div>
</div>
</div>
<div bs-grid-item>
<div bs-input="text">
<label for="grid-offsetX" bs-input-label>Offset Left</label>
<div bs-input>
<input type="text"
id="grid-offsetX"
size="20"
ng-change="ctrl.alter(ctrl.overlayGrid)"
ng-model="ctrl.overlayGrid.offsetX"/>
</div>
</div>
</div>
</div>
<div bs-inputs bs-grid="wide-4 desk-2">
<div bs-grid-item>
<div bs-input="inline">
<input
type="checkbox"
id="grid-axis-y"
ng-model="ctrl.overlayGrid.vertical"
ng-change="ctrl.toggleAxis('vertical', ctrl.overlayGrid.vertical)"/>
<label for="grid-axis-y" bs-input-label>Vertical Axis</label>
</div>
</div>
<div bs-grid-item>
<div bs-input="inline">
<input
type="checkbox"
id="grid-axis-x"
ng-model="ctrl.overlayGrid.horizontal"
ng-change="ctrl.toggleAxis('horizontal', ctrl.overlayGrid.horizontal)"/>
<label for="grid-axis-x" bs-input-label>Horizontal Axis</label>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,101 @@
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;
};