client-js.js
3.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
"use strict";
(function (window, document, bs, undefined) {
var socket = bs.socket;
var uiOptions = {
bs: {}
};
socket.on("ui:connection", function (options) {
uiOptions = options;
bs.socket.emit("ui:history:connected", {
href: window.location.href
});
});
socket.on("ui:element:remove", function (data) {
if (data.id) {
var elem = document.getElementById(data.id);
if (elem) {
removeElement(elem);
}
}
});
socket.on("highlight", function () {
var id = "__browser-sync-highlight__";
var elem = document.getElementById(id);
if (elem) {
return removeElement(elem);
}
(function (e) {
e.style.position = "fixed";
e.style.zIndex = "1000";
e.style.width = "100%";
e.style.height = "100%";
e.style.borderWidth = "5px";
e.style.borderColor = "red";
e.style.borderStyle = "solid";
e.style.top = "0";
e.style.left = "0";
e.setAttribute("id", id);
document.getElementsByTagName("body")[0].appendChild(e);
})(document.createElement("div"));
});
socket.on("ui:element:add", function (data) {
var elem = document.getElementById(data.id);
if (!elem) {
if (data.type === "css") {
return addCss(data);
}
if (data.type === "js") {
return addJs(data);
}
if (data.type === "dom") {
return addDomNode(data);
}
}
});
bs.addDomNode = addDomNode;
bs.addJs = addJs;
bs.addCss = addJs;
function addJs(data) {
(function (e) {
e.setAttribute("src", getAbsoluteUrl(data.src));
e.setAttribute("id", data.id);
document.getElementsByTagName("body")[0].appendChild(e);
})(document.createElement("script"));
}
function addCss(data) {
(function (e) {
e.setAttribute("rel", "stylesheet");
e.setAttribute("type", "text/css");
e.setAttribute("id", data.id);
e.setAttribute("media", "all");
e.setAttribute("href", getAbsoluteUrl(data.src));
document.getElementsByTagName("head")[0].appendChild(e);
})(document.createElement("link"));
}
function addDomNode(data) {
var elem = document.createElement(data.tagName);
for (var attr in data.attrs) {
elem.setAttribute(attr, data.attrs[attr]);
}
if (data.placement) {
document.getElementsByTagName(data.placement)[0].appendChild(elem);
} else {
document.getElementsByTagName("body")[0].appendChild(elem);
}
return elem;
}
function removeElement(element) {
if (element && element.parentNode) {
element.parentNode.removeChild(element);
}
}
function getAbsoluteUrl(path) {
if (path.match(/^h/)) {
return path;
}
return [window.location.protocol, "//", getHost(), path].join("");
}
function getHost () {
return uiOptions.bs.mode === "snippet" ? window.location.hostname + ":" + uiOptions.bs.port : window.location.host;
}
})(window, document, ___browserSync___);