Allow center-attached elements to be repositioned

shipshapecode · Apr 9, 2015 · d9c1507 · d9c1507
1 parent df8cd44
commit d9c1507
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 7 deletions.
diff --git a/coffee/constraint.coffee b/coffee/constraint.coffee
@@ -188,19 +188,28 @@ getBoundingRect = (tether, to) ->
           eAttachment.top = 'bottom'
 
       if changeAttachX in ['element', 'both']
-        if (left < bounds[0] and eAttachment.left is 'right')
-          left += width
-          eAttachment.left = 'left'
+        if left < bounds[0]
+          if eAttachment.left is 'right'
+            left += width
+            eAttachment.left = 'left'
+          else if eAttachment.left is 'center'
+            left += (width / 2)
+            eAttachment.left = 'left'
+
 
-        if (left + width > bounds[2] and eAttachment.left is 'left')
-          left -= width
-          eAttachment.left = 'right'
+        if left + width > bounds[2]
+          if eAttachment.left is 'left'
+            left -= width
+            eAttachment.left = 'right'
+          else if eAttachment.left is 'center'
+            left -= (width / 2)
+            eAttachment.left = 'right'
 
       if typeof pin is 'string'
         pin = (p.trim() for p in pin.split ',')
       else if pin is true
         pin = ['top', 'left', 'right', 'bottom']
-      
+
       pin or= []
 
       pinned = []

diff --git a/sass/helpers/_tether-theme-arrows.sass b/sass/helpers/_tether-theme-arrows.sass
@@ -67,6 +67,46 @@
                 margin-top: - $arrowSize
                 border-right-color: $backgroundColor
 
+        // Target middle/center, element corner
+
+        &.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-center .#{ $themePrefix }-content
+            left: - $arrowSize * 2
+
+        &.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-center .#{ $themePrefix }-content
+            left: $arrowSize * 2
+
+        &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content
+            margin-top: $arrowSize
+
+            &:before
+                bottom: 100%
+                left: $arrowSize
+                border-bottom-color: $backgroundColor
+
+        &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content
+            margin-top: $arrowSize
+
+            &:before
+                bottom: 100%
+                right: $arrowSize
+                border-bottom-color: $backgroundColor
+
+        &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content
+            margin-bottom: $arrowSize
+
+            &:before
+                top: 100%
+                left: $arrowSize
+                border-top-color: $backgroundColor
+
+        &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content
+            margin-bottom: $arrowSize
+
+            &:before
+                top: 100%
+                right: $arrowSize
+                border-top-color: $backgroundColor
+
         // Top and bottom corners
 
         &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-bottom .#{ $themePrefix }-content