move css to js file, add readme, demo.gif and license

peey · Mar 14, 2017 · 3fe3d78 · 3fe3d78
1 parent 228eaea
commit 3fe3d78
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 31 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2017 Peeyush Kushwaha
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,47 @@
+# Where Are You Now
+
+This is a useful UI debugging library to discover all the faded (`display:none`) elements on your page. 
+
+![Demo GIF](demo.gif)
+
+## Usage
+
+### In your own code
+Make sure you've included jquery on your page. Simply download where-are-you-now.js and add it via the following snippet
+
+```html
+<script src="path/to/where-are-you-now.js"></script>
+```
+
+Open up console and type in `whereAreYouNow()` to get the yellow dialogs that point to where the elements' positions would be were they not hidden.
+
+To remove all the dialogs, just execute `$(".where-are-you-now").remove()` from the console. 
+
+Note that all the pointers point to top and left of the hidden element, except when element's top is less than 15px from top in which case it points to 15px from the top so that the dialog doesn't get cut off.
+
+The library is also a jquery plugin, so if you want to see the dialogs for only a subset of your page, you can try
+
+`$(".my-selector").whereAreYouNow()` and it'd reveal locations of all elements within `.my-selector`.
+
+### On other pages
+
+Include the following snippet on the page you want to debug but whose source you don't want to tinker around with:
+
+```js
+	// if page has jquery
+	fetch('<insert rawgit here>')
+		.then(response => response.text())
+		.then(text => eval(text))
+
+	// if the page doesn't have jquery
+	fetch('https://code.jquery.com/jquery-3.1.1.min.js')
+		.then(response => response.text())
+		.then(text => eval(text))
+		.then(x => fetch('<insert rawgit here>'))
+		.then(response => response.text())
+		.then(text => eval(text))
+```
+
+## License
+
+MIT License
diff --git a/demo.gif b/demo.gif
diff --git a/example.html b/example.html
@@ -4,43 +4,23 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>Where are you now</title>
-  <style>
-    .where-are-you-now {
-      background: #ffffc1;
-      padding: 5px 10px;
-      border-radius: 5px;
-      position: absolute;
-    }
-
-    .where-are-you-now:after {
-      content: "";
-      position: absolute;
-      width: 0;
-      height: 0;
-      border-width: 10px;
-      border-style: solid;
-      border-color: transparent #ffffc1 transparent transparent;
-      top: 5px;
-      left: -20px;
-    }
-  </style>
   <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
 </head>
 <body>
   <div></div>
-  <section style="display:none">Hi There   
-    <div>big</div>
+  <section>Hi There   
+    <div>This is section one</div>
     <span>lolwhat</span>
     <div style="display:none">Hi There</div>
   </section>
-  <br>
-  <br>
-  Howdy
-  <br>
-  <br>
-  <section id="id" class="class1 class2" style="display:none">Hi There   
+  <br/>
+  <br/>
+  Howdy, just a text snippet
+  <br/>
+  <br/>
+  <section id="id" class="class1 class2">Hi There   
     <aside stye="display:none">
-    <div>big</div>
+    <div>This is section two</div>
     <br>
     <span>lolwhat</span>
     <br>
@@ -50,5 +30,15 @@
     <div style="display:none">Hi There</div>
     </aside>
   </section>
+  <script src="where-are-you-now.js"></script>
+  <script type="text/javascript">
+    /* Tests:
+    $("section").fadeOut();
+
+    whereAreYouNow();
+    $("section").whereAreYouNow();
+    $("aside").whereAreYouNow();
+    */
+  </script>
 </body>
 </html>
diff --git a/where-are-you-now.js b/where-are-you-now.js
@@ -39,8 +39,8 @@ function whereAreYouNow() {
     hiddenParents.hide();
 
     pos = {
-      "left": pos.left += 10, //adjust for border width of pointer
-      "top": pos.top -= 15 // so that pointer points to the exact location
+      "left": pos.left + 10, //adjust for border width of pointer
+      "top": Math.max(0, pos.top - 15) // so that pointer points to the exact location
     }
     $("body").append($("<span class='where-are-you-now' style='display:none'>I'm faded (" + getQSFromElement(e) + ")</span>").css(pos));
   })
@@ -49,4 +49,29 @@ function whereAreYouNow() {
   return $(filtered);
 }
 
+$(document).ready(function () {
+  var style = `
+    .where-are-you-now {
+      background: #ffffc1;
+      padding: 5px 10px;
+      border-radius: 5px;
+      position: absolute;
+    }
+    
+    .where-are-you-now:after {
+      content: "";
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-width: 10px;
+      border-style: solid;
+      border-color: transparent #ffffc1 transparent transparent;
+      top: 5px;
+      left: -20px;
+    }
+  `;
+
+  $("body").append(`<style>${style}</style>`);
+})
+
 $.fn.whereAreYouNow = whereAreYouNow;