add bookmarklet, resolves #4

mobz · Sep 23, 2019 · 4b2249c · 4b2249c
1 parent cac0715
commit 4b2249c
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -1,11 +1,12 @@
 # LagRadar
 
-> It's a sexy little lag radar for demonstrating performance - or lack of.
+> It's a sexy little component for demonstrating performance - or lack of in your javascript application.
 
 Add this to any javascript application and you can see when the app drops below
 60fps as the radar sweep changes colour and gets janky.
 
-[Demo](https://mobz.github.io/lag-radar/)
+[Get your live demo](https://mobz.github.io/lag-radar/)
+[Extra awesome as Bookmarklet](https://mobz.github.io/lag-radar/bookmarklet.html)
 
 ## Usage
 

diff --git a/bookmarklet.html b/bookmarklet.html
@@ -25,6 +25,9 @@
         font-size: 75%;
         color: #aaa;
       }
+      VIDEO {
+        margin: 40px auto;
+      }
     </style>
   </head>
   <body>
@@ -48,7 +51,7 @@ <h1>Lag Radar - Bookmarklet</h1>
 document.querySelector('#bookmarklet').setAttribute('href', linkSource());
 
     </script>
-
+    <video width="532" height="458" autoplay="true" loop="true" src="bookmarklet.mp4"></video>
 
 
   </body>

diff --git a/bookmarklet.mp4 b/bookmarklet.mp4
diff --git a/index.css b/index.css
@@ -21,3 +21,11 @@ BODY {
   text-align: right;
   width: 3em;
 }
+
+#link {
+  margin: 6em auto;
+}
+
+A {
+  color: #42f;
+}
diff --git a/index.html b/index.html
@@ -12,12 +12,17 @@ <h1>Lag Radar</h1>
       <input id="lag" type="range" min="0" max="1000" value="0">
       <span id="val">0</span>ms
     </div>
-
+    <div id="radar"></div>
+    <div id="link">
+      Install the <a href="./bookmarklet.html">lag-radar as a bookmarklet</a> and use it on any page.
+    </div>
     <script type="module">
 
 import lagRadar from './lag-radar.js';
 
-const destroy = lagRadar();
+const destroy = lagRadar({
+  parent: document.querySelector('#radar')
+});
 
 // document.body.addEventListener('click', destroy );
 

diff --git a/lag-radar-ui.js b/lag-radar-ui.js
@@ -11,28 +11,28 @@ export default function lagRadarUI() {
   }
   const $style = document.createElement('style');
   $style.appendChild(document.createTextNode(`
-    BODY #lagRadarBM.lagRadarBM-radar {
+    BODY #lagRadarUI.lagRadarUI-radar {
       font-family: Futura, "Trebuchet MS", sans-serif;
       font-style: normal;
       text-align: center;
       font-size: 16px;
     }
-    .lagRadarBM-radar {
+    .lagRadarUI-radar {
       position: fixed;
       z-index: 999999;
       top: 100px;
       left: 100px;
       user-select: none;
     }
-    .lagRadarBM-radar.active {
+    .lagRadarUI-radar.active {
       outline: 3px dotted rgba(100,100,100,0.5);
       cursor: ns-resize;
     }
-    .lagRadarBM-radar.active .lagRadarBM-title,
-    .lagRadarBM-radar:hover .lagRadarBM-title {
+    .lagRadarUI-radar.active .lagRadarUI-title,
+    .lagRadarUI-radar:hover .lagRadarUI-title {
       visibility: visible;
     }
-    .lagRadarBM-title {
+    .lagRadarUI-title {
       position: absolute;
       display: flex;
       width: 210px;
@@ -48,43 +48,43 @@ export default function lagRadarUI() {
       border-radius: 10px;
       opacity: 0.85;
     }
-    .lagRadarBM-title > * {
+    .lagRadarUI-title > * {
       padding: 0 10px;
     }
-    .lagRadarBM-title > .active,
-    .lagRadarBM-title > *:hover {
+    .lagRadarUI-title > .active,
+    .lagRadarUI-title > *:hover {
       background: #4a0;
       color: #efd;
     }
-    .lagRadarBM-title > *:first-child {
+    .lagRadarUI-title > *:first-child {
       border-radius: 8px 0 0 8px;
     }
-    .lagRadarBM-title > *:last-child {
+    .lagRadarUI-title > *:last-child {
       border-radius: 0 8px 8px 0;
     }
-    .lagRadarBM-close {
+    .lagRadarUI-close {
       cursor: pointer;
     }
-    .lagRadarBM-label {
+    .lagRadarUI-label {
       flex-grow: 1;
       cursor: -webkit-grab;
       cursor: grab;
     }
-    .lagRadarBM-label.active {
+    .lagRadarUI-label.active {
       cursor: -webkit-grabbing;
       cursor: grabbing;
     }
-    .lagRadarBM-rsize {
+    .lagRadarUI-rsize {
       line-height: 19px;
       cursor: ns-resize;
     }
-    .lagRadarBM-sweep {
+    .lagRadarUI-sweep {
       pointer-events: none;
     }
   `));
   function $e(cls, children = []) {
     const el = document.createElement('div');
-    el.className = 'lagRadarBM-' + cls;
+    el.className = 'lagRadarUI-' + cls;
     children.forEach( child => el.appendChild( child ) );
     return el;
   }
@@ -96,7 +96,7 @@ export default function lagRadarUI() {
   const $sweep = $e('sweep');
   const $radar = $e('radar', [ $style, $title, $sweep ] );
 
-  $radar.id = 'lagRadarBM';
+  $radar.id = 'lagRadarUI';
   const RESIZE = 1, MOVE = 2;
   let mode = null, origSize = 300, size = 300, offsetX, offsetY;
   const mouseDown = ev => {