initial commit

cou929 · Mar 22, 2015 · d8de07f · d8de07f
1 parent b9969eb
commit d8de07f
Show file tree

Hide file tree

Showing 7 changed files with 336 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,29 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+
+espowered
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -0,0 +1,56 @@
+module.exports = function (grunt) {
+    'use strict';
+    grunt.initConfig({
+        jshint: {
+            options: {
+                indent: 4,
+                undef: true,
+                trailing: true,
+                laxbreak: true,
+                funcscope: false,
+                node: true,
+                jquery: true,
+                browser: true,
+                es3: true,
+                eqeqeq: true,
+                forin: true,
+                freeze: true,
+                latedef: true,
+                newcap: true,
+                noarg: true,
+                noempty: true,
+                unused: true,
+                strict: true
+            },
+            files: [
+                'Gruntfile.js',
+                'src/**/*.js'
+            ]
+        },
+        espower: {
+            test: {
+                files: [
+                    {
+                        expand: true,
+                        cwd: 'test/',
+                        src: ['**/*.spec.js'],
+                        dest: 'espowered/',
+                        ext: '.js'
+                    }
+                ]
+            }
+        },
+        karma: {
+            unit: {
+                configFile: 'karma.conf.js',
+                singleRun: true
+            }
+        }
+    });
+
+    grunt.loadNpmTasks('grunt-contrib-jshint');
+    grunt.loadNpmTasks("grunt-karma");
+    grunt.loadNpmTasks("grunt-espower");
+
+    grunt.registerTask('test', ['jshint', 'espower', 'karma']);
+};
diff --git a/example/demo.html b/example/demo.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset='utf-8'>
+    <script src="../src/element-inspector.js"></script>
+  </head>
+  <body>
+    <h1>Demo of element-inspector.js</h1>
+    <div>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+    </div>
+    <div>
+      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+      <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </div>
+
+    <div>
+      <h2>Captured html</h2>
+      <textarea style="width: 400px; height: 200px"></textarea>
+    </div>
+
+    <script>
+      var captured;
+      var ei = new ElementInspector({
+        targetSelector: 'body',
+        onMousemove: function(e) {
+          captured = e.target.outerHTML;
+        },
+        onOverlayClicked: function() {
+          document.querySelector('textarea').value = captured;
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/karma.conf.js b/karma.conf.js
@@ -0,0 +1,23 @@
+module.exports = function(config) {
+    config.set({
+        basePath: '',
+        frameworks: ['mocha-debug', 'mocha'],
+        files: [
+            'node_modules/power-assert/build/power-assert.js',
+            'src/**/*.js',
+            'test/fixture/**/*.fixture.html',
+            'espowered/**/*.js',
+        ],
+        exclude: [],
+        preprocessors: {
+            'test/fixture/**/*.html': ['html2js'],
+        },
+        reporters: ['mocha'],
+        port: 9876,
+        colors: true,
+        logLevel: config.LOG_INFO,
+        autoWatch: true,
+        browsers: ['PhantomJS'],
+        singleRun: false
+    });
+};
diff --git a/package.json b/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "element-inspector",
+  "version": "0.0.1",
+  "description": "Inspect DOM elements like developer tools of browser",
+  "main": "src/element-inspector.js",
+  "scripts": {
+    "test": "grunt test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:cou929/element-inspector.git"
+  },
+  "author": "Kosei Moriyama <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/cou929/element-inspector/issues"
+  },
+  "homepage": "https://github.com/cou929/element-inspector",
+  "devDependencies": {
+    "karma-mocha": "^0.1.10",
+    "karma-html2js-preprocessor": "^0.1.0",
+    "karma-mocha-debug": "^0.1.2",
+    "karma-mocha-reporter": "^1.0.2",
+    "grunt-karma": "^0.10.1",
+    "mocha": "^2.2.1",
+    "espowerify": "^0.10.0",
+    "grunt": "^0.4.5",
+    "power-assert": "^0.10.2",
+    "grunt-contrib-jshint": "^0.11.1",
+    "karma": "^0.12.31",
+    "karma-chrome-launcher": "^0.1.7",
+    "karma-phantomjs-launcher": "^0.1.4",
+    "grunt-espower": "^0.10.0"
+  }
+}
diff --git a/src/element-inspector.js b/src/element-inspector.js
@@ -0,0 +1,132 @@
+(function(global) {
+    'use strict';
+
+    function ElementInspector(options) {
+        this.el = document.querySelector(options.targetSelector);
+        this.doc = options.doc || document;
+        this.onMousemove = options.onMousemove;
+        this.onOverlayClicked = options.onOverlayClicked;
+        this.overlayBackgroundColor = options.overlayBackgroundColor || 'rgba(102, 204, 255, 0.5)';
+        this.clicked = false;
+        this.overlay = null;
+
+        this._init();
+    }
+
+    ElementInspector.prototype._init = function() {
+        var that = this;
+
+        that.appendOverlay();
+
+        var ignore = [that.doc.body, that.doc.documentElement, that.doc];
+        that.el.addEventListener('mousemove', function(e) {
+            if (that.clicked) {
+                return;
+            }
+
+            if (e.target === that.overlay) {
+                return;
+            }
+
+            if (ignore.indexOf(e.target) > -1) {
+                that.hideOverlay();
+                return;
+            }
+
+            var offset = that._getOffset(e.target);
+            var width = that._getOuterSize(e.target, 'Width');
+            var height = that._getOuterSize(e.target, 'Height');
+
+            if (that._isFunction(that.onMousemove)) {
+                that.onMousemove(e);
+            }
+
+            that.setOverlayStyle(offset.top, offset.left, width, height);
+            that.showOverlay();
+        });
+    };
+
+    ElementInspector.prototype._isWindow = function(elem) {
+        return elem !== null && elem !== undefined && elem === elem.window;  
+    };
+
+    ElementInspector.prototype._getOffset = function(elem) {
+        var doc_elem = this.doc.documentElement;
+        var box = {
+            top: 0,
+            left: 0
+        };
+        if (typeof elem.getBoundingClientRect !== typeof undefined) {
+            box = elem.getBoundingClientRect();
+        }
+        var win = this._getWindow(this.doc);
+
+        return {
+            top: box.top + win.pageYOffset - doc_elem.clientTop,
+            left: box.left + win.pageXOffset - doc_elem.clientLeft
+        };
+    };
+
+    ElementInspector.prototype._getOuterSize = function(elem, name) {
+        if (this._isWindow(elem)) {
+            return elem.document.documentElement['client' + name];
+        }
+
+        if (elem.nodeType === 9) {
+            var doc = elem.documentElement;
+            return Math.max(
+                elem.body[ "scroll" + name ], doc[ "scroll" + name ],
+                elem.body[ "offset" + name ], doc[ "offset" + name ],
+                doc[ "client" + name ]
+            );
+        }
+
+        return elem['offset' + name];
+    };
+
+    ElementInspector.prototype._getWindow = function(elem) {
+        if (this._isWindow(elem)) {
+            return elem;
+        } else {
+            return elem.nodeType === 9 && elem.defaultView;
+        }
+    };
+
+    ElementInspector.prototype._isFunction = function(obj) {
+        return Object.prototype.toString.call(obj) === '[object Function]';  
+    };
+
+    ElementInspector.prototype.showOverlay = function() {
+        this.overlay.style.display = 'block';
+    };
+
+    ElementInspector.prototype.hideOverlay = function() {
+        this.overlay.style.display = 'none';
+    };
+
+    ElementInspector.prototype.setOverlayStyle = function(top, left, width, height) {
+        this.overlay.style.top = top + 'px';
+        this.overlay.style.left = left + 'px';
+        this.overlay.style.width = width + 'px';
+        this.overlay.style.height = height + 'px';
+    };
+
+    ElementInspector.prototype.appendOverlay = function() {
+        var overlay = this.doc.createElement('div');
+        overlay.setAttribute('id', 'element-inspector-overlay');
+        overlay.setAttribute('style', 'position: absolute; z-index: 1000000; background-color: ' + this.overlayBackgroundColor + ';');
+        this.doc.body.appendChild(overlay);
+
+        this.overlay = this.doc.querySelector('#element-inspector-overlay');
+
+        var that = this;
+        this.overlay.addEventListener('click', function(e) {
+            that.clicked = !that.clicked;
+            if (that._isFunction(that.onOverlayClicked)) {
+                that.onOverlayClicked(e);
+            }
+        });
+    };
+
+    global.ElementInspector = ElementInspector;
+})(this);
diff --git a/test/spec/element-inspector.spec.js b/test/spec/element-inspector.spec.js
@@ -0,0 +1,25 @@
+describe('_isFunction', function() {
+    beforeEach(function() {
+        this.instance = new ElementInspector({targetSelector: 'body'});
+    });
+
+    it('does not detect undefined as function', function() {
+        assert(this.instance._isFunction(undefined) === false);
+    });
+
+    it('does not detect arrays as function', function() {
+        assert(this.instance._isFunction([1, 2, 3]) === false);
+    });
+
+    it('does not detect string as function', function() {
+        assert(this.instance._isFunction('string') === false);
+    });
+
+    it('detects function as function', function() {
+        assert(this.instance._isFunction(this.instance._isFunction) === true);
+    });
+
+    it('detects anonymouse function as function', function() {
+        assert(this.instance._isFunction(function() {}) === true);
+    });
+});