horizontal and vertical guides

ilyashubin · Nov 30, 2014 · bb0cc0d · bb0cc0d
1 parent bc01cbf
commit bb0cc0d
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 38 deletions.
diff --git a/app/inject.coffee b/app/inject.coffee
@@ -6,23 +6,30 @@ injected = injected or do ->
 
     createNodes: ->
       do appendOverlay = =>
-        $overlay = document.createElement 'div'
-        $overlay.classList.add 'tl-overlay'
+        overlayTemplate = "
+          <div class='tl-overlayWrap'>
+            <div class='tl-overlayW'></div>
+            <div class='tl-overlayH'></div>
+            <div class='tl-overlay'></div>
+          </div>
+          "
+        $overlayFrag = @fragmentFromString overlayTemplate
 
-        document.body.appendChild $overlay
+        document.body.appendChild $overlayFrag
 
       do appendLogger = =>
-        $logg = document.createElement 'div'
-        $logg.classList.add 'tl-loggerWrap'
+        logTemplate = "
+          <div class='tl-loggerWrap'>
+            <code class='language-markup'>&lt;html&gt;</code>
+          </div>
+          "
+        $logFrag = @fragmentFromString logTemplate
 
-        $code = document.createElement 'code'
-        $code.classList.add 'language-markup'
-        $code.appendChild document.createTextNode '<html>'
-        $logg.appendChild $code
-
-        document.body.appendChild $logg
+        document.body.appendChild $logFrag
 
 
+      @$overlayW = document.querySelector '.tl-overlayW'
+      @$overlayH = document.querySelector '.tl-overlayH'
       @$overlay = document.querySelector '.tl-overlay'
       @$wrap = document.querySelector '.tl-loggerWrap'
       @$code = document.querySelector '.tl-loggerWrap code'
@@ -42,13 +49,32 @@ injected = injected or do ->
     logg: (e)=>
       $target = e.target
       targetRect = $target.getBoundingClientRect()
-      overlayStyleString = "
-        width: #{targetRect.width}px;
-        height: #{targetRect.height}px;
-        top: #{targetRect.top + window.pageYOffset}px;
-        left: #{targetRect.left + window.pageXOffset}px;
+      targetWidth = targetRect.width
+      targetHeight = targetRect.height
+      targetTop = targetRect.top + window.pageYOffset
+      targetLeft = targetRect.left + window.pageXOffset
+
+      overlayWStyle = "
+        top: #{targetTop}px;
+        height: #{targetHeight}px;
+        "
+
+      overlayHStyle = "
+        top: #{window.pageYOffset}px;
+        left: #{targetLeft}px;
+        width: #{targetWidth}px;
         "
-      @$overlay.style.cssText = overlayStyleString
+
+      overlayStyle = "
+        top: #{targetTop}px;
+        left: #{targetLeft}px;
+        width: #{targetWidth}px;
+        height: #{targetHeight}px;
+        "
+
+      @$overlayW.style.cssText = overlayWStyle
+      @$overlayH.style.cssText = overlayHStyle
+      @$overlay.style.cssText = overlayStyle
 
       $clone = $target.cloneNode()
 
@@ -64,6 +90,11 @@ injected = injected or do ->
     highlight: =>
       Prism.highlightElement @$code
 
+    fragmentFromString: (strHTML)->
+      temp = document.createElement 'template'
+      temp.innerHTML = strHTML
+      return temp.content
+
 
 
   inspector = new TinyInspect()

diff --git a/app/inject.js b/app/inject.js
diff --git a/app/style.css b/app/style.css
@@ -54,19 +54,38 @@
   visibility: hidden;
 }
 
-.tl-overlay {
+.tl-overlayWrap {
+  pointer-events: none;
+}
+
+.tl-overlay,
+.tl-overlayW,
+.tl-overlayH {
   position: absolute;
   z-index: 10000;
   top: 0;
   left: 0;
-  width: 0;
-  height: 0;
-  background: rgba(52,152,219,0.08);
-  border: 1px solid rgba(52,152,219,0.18);
-  pointer-events: none;
   box-sizing: border-box;
 }
 
+.tl-overlay {
+  background: rgba(52,152,219,0.08);
+}
+
+.tl-overlayW {
+  right: 0;
+  background: rgba(0,0,0,0.01);
+  border-top: 1px dashed rgba(52,152,219,0.4);
+  border-bottom: 1px dashed rgba(52,152,219,0.4);
+}
+
+.tl-overlayH {
+  height: 100vh;
+  background: rgba(0,0,0,0.01);
+  border-left: 1px dashed rgba(52,152,219,0.4);
+  border-right: 1px dashed rgba(52,152,219,0.4);
+}
+
 @keyframes tl-show {
   0% {
     transform: translateY(-100%);