Update docs

SnitchRUS66 · Jun 17, 2015 · ea1f68b · ea1f68b
1 parent b5f7149
commit ea1f68b
Show file tree

Hide file tree

Showing 16 changed files with 89 additions and 38 deletions.
diff --git a/.hsdoc b/.hsdoc
@@ -1,6 +1,6 @@
 name: "Tether"
 description: "Marrying DOM elements for life"
+domain: "tether.io"
 source: "coffee/*.coffee"
 examples: "**/*.md"
-assets: "{deps/*,*.js,*.coffee,css/*.css,docs/css/*.css,docs/js/*,js,docs/welcome/*,examples/*}"
-domain: "tether.io"
+assets: "{dist/js/*.js,dist/css/*.css,docs/css/*.css,docs/js/*,js,docs/welcome/*,examples/*}"
diff --git a/docs/intro.md b/docs/intro.md
@@ -1,5 +1,5 @@
-<script src="tether.js"></script>
-<script src="js/markAttachment.js"></script>
+<script src="dist/js/tether.js"></script>
+<script src="docs/js/markAttachment.js"></script>
 <script src="docs/js/intro.js"></script>
 <link rel="stylesheet" href="docs/css/intro.css"></link>
 

diff --git a/docs/js/markAttachment.js b/docs/js/markAttachment.js
@@ -0,0 +1,51 @@
+/* globals Tether */
+
+'use strict';
+
+Tether.modules.push({
+  initialize: function initialize() {
+    var _this = this;
+
+    this.markers = {};
+
+    ['target', 'element'].forEach(function (type) {
+      var el = document.createElement('div');
+      el.className = _this.getClass('' + type + '-marker');
+
+      var dot = document.createElement('div');
+      dot.className = _this.getClass('marker-dot');
+      el.appendChild(dot);
+
+      _this[type].appendChild(el);
+
+      _this.markers[type] = { dot: dot, el: el };
+    });
+  },
+
+  position: function position(_ref) {
+    var manualOffset = _ref.manualOffset;
+    var manualTargetOffset = _ref.manualTargetOffset;
+
+    var offsets = {
+      element: manualOffset,
+      target: manualTargetOffset
+    };
+
+    for (var type in offsets) {
+      var offset = offsets[type];
+      for (var side in offset) {
+        var val = offset[side];
+        var notString = typeof val !== 'string';
+        if (notString || val.indexOf('%') === -1 && val.indexOf('px') === -1) {
+          val += 'px';
+        }
+
+        if (this.markers[type].dot.style[side] !== val) {
+          this.markers[type].dot.style[side] = val;
+        }
+      }
+    }
+
+    return true;
+  }
+});
diff --git a/docs/welcome/browser-demo.html b/docs/welcome/browser-demo.html
@@ -10,10 +10,10 @@
     <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
 
     <!-- Drop themes -->
-    <link rel="stylesheet" href="/tether/css/tether-theme-arrows-dark.css" />
+    <link rel="stylesheet" href="/dist/css/tether-theme-arrows-dark.css" />
 
     <!-- Browser demo styles -->
-    <link rel="stylesheet" href="/tether/docs/welcome/css/browser-demo.css" />
+    <link rel="stylesheet" href="/docs/welcome/css/browser-demo.css" />
 </head>
 <body>
     <div class="browser-demo">
@@ -66,11 +66,11 @@
     </div>
 
     <!-- Tether javascript -->
-    <script src="/tether/tether.min.js"></script>
+    <script src="/dist/js/tether.min.js"></script>
 
     <!-- Welcome docs javascript -->
-    <script src="/tether/docs/welcome/js/log.js"></script>
-    <script src="/tether/docs/welcome/js/jquery.js"></script>
-    <script src="/tether/docs/welcome/js/drop.js"></script>
+    <script src="/docs/welcome/js/log.js"></script>
+    <script src="/docs/welcome/js/jquery.js"></script>
+    <script src="/docs/welcome/js/drop.js"></script>
 </body>
 </html>
diff --git a/docs/welcome/index.html b/docs/welcome/index.html
@@ -10,11 +10,11 @@
     <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
 
     <!-- Tether themes -->
-    <link rel="stylesheet" href="/tether/css/tether-theme-arrows-dark.css" />
+    <link rel="stylesheet" href="/dist/css/tether-theme-arrows-dark.css" />
 
     <!-- Welcome docs styles -->
-    <link rel="stylesheet" href="/tether/docs/welcome/css/prism.css" />
-    <link rel="stylesheet" href="/tether/docs/welcome/css/welcome.css" />
+    <link rel="stylesheet" href="/docs/welcome/css/prism.css" />
+    <link rel="stylesheet" href="/docs/welcome/css/welcome.css" />
 
     <!-- OS icons -->
     <link rel="stylesheet" href="http://github.hubspot.com/os-icons/os-icons.css" />
@@ -105,7 +105,7 @@ <h2>Play with Tether</h2>
             <div class="section-scroll-copy-inner">
                 <p class="example-paragraph">Interact with this demo.</p>
                 <p>&nbsp;</p>
-                <p>To learn more, check out our <a href="/tether">documentation</a>.</p>
+                <p>To learn more, check out our <a href="/">documentation</a>.</p>
             </div>
         </div>
     </td></tr></table>
@@ -119,22 +119,22 @@ <h2>Play with Tether</h2>
             <h1>Tether Family</h1>
             <h2>These projects are all powered by Tether's positioning engine.</h2>
             <div class="projects-list">
-                <a href="/drop/docs/welcome" class="project">
+                <a href="//github.hubspot.com/drop/docs/welcome" class="project">
                     <h1>Drop</h1>
                     <span class="os-icon drop-icon"></span>
                     <p>Create dropdowns, popovers, and more.</p>
                 </a>
-                <a href="/tooltip/docs/welcome" class="project">
+                <a href="//github.hubspot.com/tooltip/docs/welcome" class="project">
                     <h1>Tooltip</h1>
                     <span class="os-icon tooltip-icon"></span>
                     <p>Stylable tooltips built on Tether.</p>
                 </a>
-                <a href="/select/docs/welcome" class="project">
+                <a href="//github.hubspot.com/select/docs/welcome" class="project">
                     <h1>Select</h1>
                     <span class="os-icon select-icon"></span>
                     <p>Stylable select elements built on Tether.</p>
                 </a>
-                <a href="/shepherd/docs/welcome" class="project">
+                <a href="//github.hubspot.com/shepherd/docs/welcome" class="project">
                     <h1>Shepherd</h1>
                     <span class="os-icon shepherd-icon"></span>
                     <p>Guide your users through a tour of your app.</p>
@@ -194,13 +194,13 @@ <h2>Help us spread the word.</h2>
     </td></tr></table>
 
     <!-- Tether javascript -->
-    <script src="/tether/tether.min.js"></script>
+    <script src="/dist/js/tether.min.js"></script>
 
     <!-- Welcome docs javascript -->
-    <script src="/tether/docs/welcome/js/log.js"></script>
-    <script src="/tether/docs/welcome/js/jquery.js"></script>
-    <script src="/tether/docs/welcome/js/drop.js"></script>
-    <script src="/tether/docs/welcome/js/welcome.js"></script>
+    <script src="/docs/welcome/js/log.js"></script>
+    <script src="/docs/welcome/js/jquery.js"></script>
+    <script src="/docs/welcome/js/drop.js"></script>
+    <script src="/docs/welcome/js/welcome.js"></script>
 
     <!-- HubSpot analytics -->
     <script type="text/javascript">

diff --git a/examples/content-visible/index.html b/examples/content-visible/index.html
@@ -50,7 +50,7 @@
       </div>
     </div>
 
-    <script src="../../tether.js"></script>
+    <script src="/dist/js/tether.js"></script>
     <script>
       new Tether({
         element: '.element',

diff --git a/examples/dolls/index.html b/examples/dolls/index.html
@@ -1,5 +1,5 @@
 <link rel="stylesheet" href="./dolls.css" />
-<script src="../../tether.js"></script>
+<script src="/dist/js/tether.js"></script>
 <script src="./dolls.js"></script>
 <body>
   <div class="scroll">

diff --git a/examples/element-scroll/index.html b/examples/element-scroll/index.html
@@ -441,7 +441,7 @@
       }
     </style>
 
-    <script src="../../tether.js"></script>
+    <script src="/dist/js/tether.js"></script>
     <script>
       var pointer = document.querySelector('.pointer');
       var scroll = document.querySelector('.scroll');

diff --git a/examples/enable-disable/index.html b/examples/enable-disable/index.html
@@ -17,7 +17,7 @@
             <div class="pad"></div>
         </div>
 
-        <script src="../../tether.js"></script>
+        <script src="/dist/js/tether.js"></script>
         <script>
             var tether = new Tether({
                 element: '.element',

diff --git a/examples/out-of-bounds/index.html b/examples/out-of-bounds/index.html
@@ -18,7 +18,7 @@
         <div class="element"></div>
         <div class="target"></div>
 
-        <script src="../../tether.js"></script>
+        <script src="/dist/js/tether.js"></script>
         <script>
             new Tether({
                 element: '.element',

diff --git a/examples/pin/index.html b/examples/pin/index.html
@@ -13,7 +13,7 @@
         <div class="element"></div>
         <div class="target"></div>
 
-        <script src="../../tether.js"></script>
+        <script src="/dist/js/tether.js"></script>
         <script>
             new Tether({
                 element: '.element',

diff --git a/examples/scroll/index.html b/examples/scroll/index.html
@@ -877,7 +877,7 @@ <h3>Chapter IV</h3>
 
       <div class="pointer"></div>
 
-      <script src="../../tether.js"></script>
+      <script src="/dist/js/tether.js"></script>
       <script>
         new Tether({
           element: '.pointer',

diff --git a/examples/simple/index.html b/examples/simple/index.html
@@ -13,7 +13,7 @@
         <div class="element"></div>
         <div class="target"></div>
 
-        <script src="../../tether.js"></script>
+        <script src="/dist/js/tether.js"></script>
         <script>
             new Tether({
                 element: '.element',

diff --git a/examples/testbed/index.html b/examples/testbed/index.html
@@ -19,7 +19,7 @@
             <div class="pad"></div>
         </div>
 
-        <script src="../../tether.js"></script>
+        <script src="/dist/js/tether.js"></script>
         <script>
             new Tether({
                 element: '.element',

diff --git a/examples/viewport/index.html b/examples/viewport/index.html
@@ -38,7 +38,7 @@
       to use <code>position: fixed</code>.</p>
     </div>
 
-    <script src="../../tether.js"></script>
+    <script src="/dist/js/tether.js"></script>
     <script>
       new Tether({
         element: '.element',

diff --git a/src/js/markAttachment.js b/src/js/markAttachment.js
@@ -1,6 +1,6 @@
-/* globals TetherBase */
+/* globals Tether */
 
-TetherBase.modules.push({
+Tether.modules.push({
   initialize() {
     this.markers = {};
 
@@ -29,9 +29,9 @@ TetherBase.modules.push({
       for (let side in offset) {
         let val = offset[side];
         const notString = typeof val !== 'string';
-        const notPercent = val.indexOf('%') === -1;
-        const notPixel = val.indexOf('px') === -1;
-        if (notString || (notPercent && notPixel)) {
+        if (notString ||
+            val.indexOf('%') === -1 &&
+            val.indexOf('px') === -1) {
           val += 'px';
         }