client-js.js 3.4 KB

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