Add visible example

coffee/tether.coffee

@@ -16,8 +16,6 @@ transformKey = do ->
 tethers = []
 
 position = ->
-  # Let updateStyle know to batch up all the css changes we do in this
-  # block until we're done.
   for tether in tethers
     tether.position(false)
 
@@ -198,7 +196,26 @@ class _Tether
     if @targetModifier?
       switch @targetModifier
         when 'visible'
-          {top: pageYOffset, left: pageXOffset, height: innerHeight, width: innerWidth}
+          if @target is document.body
+            {top: pageYOffset, left: pageXOffset, height: innerHeight, width: innerWidth}
+          else
+            bounds = getBounds @target
+            style = getComputedStyle @target
+
+            delete bounds.right
+            delete bounds.bottom
+
+            if bounds.top < pageYOffset
+              bounds.top = pageYOffset
+            if bounds.left < 0
+              bounds.left = 0
+
+            bounds.height = Math.min(bounds.height, innerHeight + pageYOffset - bounds.top + parseFloat(style.borderTopWidth))
+            bounds.width = Math.min(bounds.width, innerWidth + pageXOffset - bounds.left + parseFloat(style.borderLeftWidth))
+            console.log bounds
+
+            bounds
+
         when 'scroll-handle'
           if @target is document.body
             {
@@ -214,6 +231,7 @@ class _Tether
             height = bounds.height - parseFloat(style.borderTopWidth) - parseFloat(style.borderBottomWidth)
 
             if @target.scrollWidth > @target.offsetWidth
+              # Bottom scroll bar
               height -= 15
 
             out =

docs/coffee/intro.coffee

@@ -49,6 +49,7 @@ setupBlock = ($block) ->
     key = uniqueId()
     $block.attr('data-example', key)
     $output.attr('data-example', key)
+    $output.find('.tether-element').attr('data-example', key)
 
   $output.html OUTPUT_HTML(key)
 

docs/css/intro.css

@@ -19,6 +19,8 @@ body {
   width: 200px;
   height: 50px;
   background-color: #44ee99; }
+  .no-green .green-box {
+    display: none; }
 
 .scroll-box {
   height: 150px;
@@ -73,15 +75,15 @@ output {
       right: 0;
       bottom: 0;
       opacity: 1;
-      content: "Click To Activate";
+      content: "Click To Show";
       background-color: #aaaaaa;
       border-left: 10px solid #eeeeee;
       color: white;
       font-size: 24px;
       font-variant: normal;
-      padding-top: 75px; }
+      padding-top: 80px; }
   output[activated]:after {
-    content: "Click To Deactivate"; }
+    content: "Click To Hide"; }
 
 .attachment-mark, .tether-marker-dot {
   position: relative; }
@@ -172,7 +174,12 @@ span.attachment-mark:after, span.tether-marker-dot:after {
 [data-example^="optimizer"] .scroll-box .tether-element:before {
   content: "I'm in my scroll parent!"; }
 
-output[data-example="window"] .scroll-box {
+output.scroll-page .scroll-box {
   overflow: hidden; }
-output[data-example="window"]:after {
+output.scroll-page:after {
   content: "↕ scroll the page ↕"; }
+
+.tether-element[data-example="scroll-visible"] {
+  height: 30px; }
+  .tether-element[data-example="scroll-visible"] .tether-marker-dot {
+    display: none; }

docs/intro.md

@@ -138,7 +138,7 @@ The syntax of the offset properties is `"vertical-offset horizontal-offset"`
 Tether offers a couple of special attachments, using the `targetModifier`
 option:
 
-<pre><code class="lang-javascript" data-example>new Tether({
+<pre class="pre-with-output"><code class="lang-javascript" data-example>new Tether({
   element: yellowBox,
   target: scrollBox,
   attachment: 'middle right',
@@ -150,9 +150,9 @@ option:
 Set the target to `document.body` to have the element follow the page's scroll bar.
 
 The `targetModifier` `visible` can be used to attach an element to the visible part
-of an element.  It only works for the body currently:
+of an element:
 
-<pre><code class="lang-javascript" data-example>new Tether({
+<pre class="pre-with-output"><code class="lang-javascript" data-example>new Tether({
   element: yellowBox,
   target: document.body,
   attachment: 'middle center',
@@ -161,6 +161,15 @@ of an element.  It only works for the body currently:
 });
 </code></pre><output deactivated></output>
 
+<pre class="pre-with-output"><code class="lang-javascript" data-example="scroll-visible">new Tether({
+  element: yellowBox,
+  <mark>target: scrollBox</mark>,
+  attachment: 'middle center',
+  targetAttachment: 'middle center',
+  targetModifier: 'visible'
+});
+</code></pre><output class="no-green scroll-page" data-example="scroll-visible"></output>
+
 Constraints
 -----------
 
@@ -315,7 +324,7 @@ make it always visible no matter where the user scrolls.
     }
   ]
 });
-</code></pre><output data-example="window"></output>
+</code></pre><output data-example="window" class="scroll-page"></output>
 
 `to` can be any of:
 

docs/sass/intro.sass

@@ -23,6 +23,9 @@ body
   height: 50px
   background-color: #4e9
 
+  .no-green &
+    display: none
+
 .scroll-box
   height: 150px
   border: 10px solid #eee
@@ -82,17 +85,17 @@ output
       right: 0
       bottom: 0
       opacity: 1
-      content: "Click To Activate"
+      content: "Click To Show"
       background-color: #AAA
       border-left: 10px solid #EEE
       color: white
       font-size: 24px
       font-variant: normal
-      padding-top: 75px
+      padding-top: 80px
 
   &[activated]
     &:after
-      content: "Click To Deactivate"
+      content: "Click To Hide"
 
 .attachment-mark
   position: relative
@@ -181,9 +184,15 @@ span.attachment-mark
   .scroll-box .tether-element:before
     content: "I'm in my scroll parent!"
 
-output[data-example="window"]
+output.scroll-page
   .scroll-box
     overflow: hidden
 
   &:after
     content: "↕ scroll the page ↕"
+
+.tether-element[data-example="scroll-visible"]
+  height: 30px
+
+  .tether-marker-dot
+    display: none

examples/simple/index.html

@@ -23,9 +23,9 @@
         <script>
             new Tether({
                 element: '.element',
-                attachment: 'middle right',
-                targetAttachment: 'middle left',
-                targetModifier: 'scroll-handle',
+                attachment: 'middle center',
+                targetAttachment: 'middle center',
+                targetModifier: 'visible',
                 target: '.container'
             });
         </script>

examples/simple/style.css

@@ -20,8 +20,9 @@ body {
 .container {
     height: 1000px;
     overflow: scroll;
-    width: 30%;
+    width: 600px;
     border: 20px solid #CCC;
+    margin-top: 200px;
 }
 
 body {

tether.js

@@ -538,12 +538,30 @@
       if (this.targetModifier != null) {
         switch (this.targetModifier) {
           case 'visible':
-            return {
-              top: pageYOffset,
-              left: pageXOffset,
-              height: innerHeight,
-              width: innerWidth
-            };
+            if (this.target === document.body) {
+              return {
+                top: pageYOffset,
+                left: pageXOffset,
+                height: innerHeight,
+                width: innerWidth
+              };
+            } else {
+              bounds = getBounds(this.target);
+              style = getComputedStyle(this.target);
+              delete bounds.right;
+              delete bounds.bottom;
+              if (bounds.top < pageYOffset) {
+                bounds.top = pageYOffset;
+              }
+              if (bounds.left < 0) {
+                bounds.left = 0;
+              }
+              bounds.height = Math.min(bounds.height, innerHeight + pageYOffset - bounds.top + parseFloat(style.borderTopWidth));
+              bounds.width = Math.min(bounds.width, innerWidth + pageXOffset - bounds.left + parseFloat(style.borderLeftWidth));
+              console.log(bounds);
+              return bounds;
+            }
+            break;
           case 'scroll-handle':
             if (this.target === document.body) {
               return {