jonmaim · May 14, 2014 13:21 · May 14, 2014
diff --git a/inspect_element.js b/inspect_element.js
@@ -0,0 +1,72 @@
+'use strict';
+
+angular.module('cafeApp')
+.directive('inspect', function($timeout, $http) {
+
+  Element.prototype.serializeWithStyles = (function () {
+
+    var defaultStylesByTagName = {};
+
+    var noStyleTags = {'BASE':true,'HEAD':true,'HTML':true,'META':true,'NOFRAME':true,'NOSCRIPT':true,'PARAM':true,'SCRIPT':true,'STYLE':true,'TITLE':true};
+
+    var tagNames = ['A','ABBR','ADDRESS','AREA','ARTICLE','ASIDE','AUDIO','B','BASE','BDI','BDO','BLOCKQUOTE','BODY','BR','BUTTON','CANVAS','CAPTION','CENTER','CITE','CODE','COL','COLGROUP','COMMAND','DATALIST','DD','DEL','DETAILS','DFN','DIV','DL','DT','EM','EMBED','FIELDSET','FIGCAPTION','FIGURE','FONT','FOOTER','FORM','H1','H2','H3','H4','H5','H6','HEAD','HEADER','HGROUP','HR','HTML','I','IFRAME','IMG','INPUT','INS','KBD','KEYGEN','LABEL','LEGEND','LI','LINK','MAP','MARK','MATH','MENU','META','METER','NAV','NOBR','NOSCRIPT','OBJECT','OL','OPTION','OPTGROUP','OUTPUT','P','PARAM','PRE','PROGRESS','Q','RP','RT','RUBY','S','SAMP','SCRIPT','SECTION','SELECT','SMALL','SOURCE','SPAN','STRONG','STYLE','SUB','SUMMARY','SUP','SVG','TABLE','TBODY','TD','TEXTAREA','TFOOT','TH','THEAD','TIME','TITLE','TR','TRACK','U','UL','VAR','VIDEO','WBR'];
+
+    function computeDefaultStyleByTagName(tagName) {
+      var defaultStyle = {};
+      var element = document.body.appendChild(document.createElement(tagName));
+      var computedStyle = getComputedStyle(element);
+      for (var i = 0; i < computedStyle.length; i++) {
+        defaultStyle[computedStyle[i]] = computedStyle[computedStyle[i]];
+      }
+      document.body.removeChild(element);
+      return defaultStyle;
+    }
+
+    for (var i = 0; i < tagNames.length; i++) {
+      if(!noStyleTags[tagNames[i]]) {
+        defaultStylesByTagName[tagNames[i]] = computeDefaultStyleByTagName(tagNames[i]);
+      }
+    }
+
+    return function serializeWithStyles(clone) {
+      if (this.nodeType !== Node.ELEMENT_NODE) { throw new TypeError(); }
+      var cssTexts = [];
+      var elements = Array.prototype.slice.call(this.querySelectorAll('*'));
+      var clones = Array.prototype.slice.call(clone.querySelectorAll('*'));
+      elements.unshift(this);
+      clones.unshift(clone);
+      for ( var i = 0; i < elements.length; i++ ) {
+        var e = elements[i];
+        if (!noStyleTags[e.tagName]) {
+          var computedStyle = getComputedStyle(e);
+          cssTexts[i] = e.style.cssText;
+          for (var ii = 0; ii < computedStyle.length; ii++) {
+            var cssPropName = computedStyle[ii];
+            clones[i].style[cssPropName] = computedStyle[cssPropName];
+          }
+        }
+      }
+      var result = clone.outerHTML;
+      for ( i = 0; i < elements.length; i++ ) {
+        clones[i].style.cssText += cssTexts[i];
+      }
+      return result;
+    };
+  })();
+
+  return {
+    restrict : 'A',
+    link: function(scope, element) {
+      setInterval(function() {
+        // console.log('inspect', element[0]);
+        var elem = element.clone(true);
+        $http.post('http://192.168.0.106:8124', {data: element[0].serializeWithStyles(elem[0])})
+        .success(function(data) {
+          // console.log(element[0]);
+          console.log(data);
+          element.css(data);
+        });
+      }, 5000);
+    }
+  };
+});
diff --git a/inspect_server.js b/inspect_server.js
@@ -0,0 +1,59 @@
+'use strict';
+
+var restify = require('restify'),
+    fs = require('fs');
+
+var server = module.exports = restify.createServer();
+
+server.use(restify.acceptParser(server.acceptable));
+server.use(restify.queryParser());
+server.use(restify.bodyParser());
+server.use(restify.gzipResponse());
+server.use(restify.fullResponse());
+
+/* CORS */
+server.opts('.*', function(req, res, next) {
+  res.header('Access-Control-Allow-Origin', req.headers.origin || '*');
+  res.header('Access-Control-Allow-Methods', req.headers['access-control-request-method'] || 'POST, GET, PUT, DELETE, OPTIONS');
+  res.header('Access-Control-Allow-Headers', req.headers['access-control-request-headers'] || 'Content-Type');
+  res.header('Access-Control-Max-Age', 60 * 60 * 24 * 365);
+  res.header('Access-Control-Allow-Credentials', 'true');
+  res.send(200);
+  next();
+});
+
+// Retrieve the port from the --port command line parameter.
+// If --port is not specified, return the default port.
+function getPort() {
+  var argv = process.argv;
+  for (var i = 0; i < argv.length; i++) {
+    if (argv[i] === '--port') {
+      return parseInt(argv[i+1], 10);
+    }
+  }
+  return 8124;
+}
+
+// Retrieve the css from the --css command line parameter.
+function getCss() {
+  var argv = process.argv;
+  for (var i = 0; i < argv.length; i++) {
+    if (argv[i] === '--css') {
+      return argv[i+1];
+    }
+  }
+  return {};
+}
+
+server.post('/', function(req, res, next) {
+  console.log('got data');
+  var fd = fs.openSync(__dirname + '/junk/' + Date.now() + '.html', 'w');
+  fs.writeSync(fd, req.body.data);
+  fs.closeSync(fd);
+  res.send(201, JSON.parse(getCss()));
+  next();
+});
+
+server.listen(getPort(), function() {
+  console.log('server up :)');
+});
diff --git a/package.json b/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "Angular element inspector",
+  "version": "0.0.0",
+  "description": "",
+  "main": "inspect_server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "restify": "~2.7.0"
+  }
+}