mirror of
https://github.com/fooflington/selfdefined.git
synced 2025-06-13 05:55:26 +00:00
update
This commit is contained in:
16
node_modules/browser-sync-ui/lib/plugins/remote-debug/overlay-grid/css/grid-overlay-horizontal.css
generated
vendored
Executable file
16
node_modules/browser-sync-ui/lib/plugins/remote-debug/overlay-grid/css/grid-overlay-horizontal.css
generated
vendored
Executable 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}};
|
||||
}
|
16
node_modules/browser-sync-ui/lib/plugins/remote-debug/overlay-grid/css/grid-overlay-vertical.css
generated
vendored
Executable file
16
node_modules/browser-sync-ui/lib/plugins/remote-debug/overlay-grid/css/grid-overlay-vertical.css
generated
vendored
Executable 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%;
|
||||
}
|
18
node_modules/browser-sync-ui/lib/plugins/remote-debug/overlay-grid/js/grid-overlay.js
generated
vendored
Normal file
18
node_modules/browser-sync-ui/lib/plugins/remote-debug/overlay-grid/js/grid-overlay.js
generated
vendored
Normal 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___));
|
56
node_modules/browser-sync-ui/lib/plugins/remote-debug/overlay-grid/overlay-grid.client.js
generated
vendored
Normal file
56
node_modules/browser-sync-ui/lib/plugins/remote-debug/overlay-grid/overlay-grid.client.js
generated
vendored
Normal 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);
|
106
node_modules/browser-sync-ui/lib/plugins/remote-debug/overlay-grid/overlay-grid.html
generated
vendored
Normal file
106
node_modules/browser-sync-ui/lib/plugins/remote-debug/overlay-grid/overlay-grid.html
generated
vendored
Normal 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>
|
101
node_modules/browser-sync-ui/lib/plugins/remote-debug/overlay-grid/overlay-grid.js
generated
vendored
Normal file
101
node_modules/browser-sync-ui/lib/plugins/remote-debug/overlay-grid/overlay-grid.js
generated
vendored
Normal 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;
|
||||
};
|
Reference in New Issue
Block a user