From 29130f37ad15bf5aa4ac2cf62d0ea8249218dcd6 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 13 Jun 2016 15:58:09 +0100
Subject: Hides the fade right unless required

---
 app/assets/javascripts/layout_nav.js.coffee | 44 ++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 14 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/layout_nav.js.coffee b/app/assets/javascripts/layout_nav.js.coffee
index 6adac6dac97..f02292dd4f3 100644
--- a/app/assets/javascripts/layout_nav.js.coffee
+++ b/app/assets/javascripts/layout_nav.js.coffee
@@ -1,14 +1,30 @@
-class @LayoutNav
-  $ ->
-    $('.fade-left').addClass('end-scroll')
-    $('.scrolling-tabs').on 'scroll', (event) ->
-      $this = $(this)
-      $el = $(event.target)
-      currentPosition = $this.scrollLeft()
-      size = bp.getBreakpointSize()
-      controlBtnWidth = $('.controls').width()
-      maxPosition = $this.get(0).scrollWidth - $this.parent().width()
-      maxPosition += controlBtnWidth if size isnt 'xs' and $('.nav-control').length
-
-      $el.find('.fade-left').toggleClass('end-scroll', currentPosition is 0)
-      $el.find('.fade-right').toggleClass('end-scroll', currentPosition is maxPosition)
+hideEndFade = ($scrollingTabs) ->
+  $scrollingTabs.each ->
+    $this = $(@)
+
+    $this
+      .find('.fade-right')
+      .toggleClass('end-scroll', $this.width() is $this.prop('scrollWidth'))
+
+$ ->
+  $('.fade-left').addClass('end-scroll')
+
+  hideEndFade($('.scrolling-tabs'))
+
+  $(window)
+    .off 'resize.nav'
+    .on 'resize.nav', ->
+      hideEndFade($('.scrolling-tabs'))
+
+  $('.scrolling-tabs').on 'scroll', (event) ->
+    $this = $(this)
+    $el = $(event.target)
+    currentPosition = $this.scrollLeft()
+    size = bp.getBreakpointSize()
+    controlBtnWidth = $('.controls').width()
+    maxPosition = ($this.get(0).scrollWidth - $this.parent().width()) - 1
+    # maxPosition += controlBtnWidth if size isnt 'xs' and $('.nav-control').length
+    console.log maxPosition, currentPosition
+
+    $el.find('.fade-left').toggleClass('end-scroll', currentPosition is 0)
+    $el.find('.fade-right').toggleClass('end-scroll', currentPosition is maxPosition)
-- 
cgit v1.2.3


From 0b1eea8f970e170cd4314ec75aba9707ffa98127 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 14 Jun 2016 17:53:26 +0100
Subject: Removed console.log Uses outerWidth instead of width

---
 app/assets/javascripts/layout_nav.js.coffee | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/layout_nav.js.coffee b/app/assets/javascripts/layout_nav.js.coffee
index f02292dd4f3..f8f0aea427e 100644
--- a/app/assets/javascripts/layout_nav.js.coffee
+++ b/app/assets/javascripts/layout_nav.js.coffee
@@ -18,13 +18,8 @@ $ ->
 
   $('.scrolling-tabs').on 'scroll', (event) ->
     $this = $(this)
-    $el = $(event.target)
     currentPosition = $this.scrollLeft()
-    size = bp.getBreakpointSize()
-    controlBtnWidth = $('.controls').width()
-    maxPosition = ($this.get(0).scrollWidth - $this.parent().width()) - 1
-    # maxPosition += controlBtnWidth if size isnt 'xs' and $('.nav-control').length
-    console.log maxPosition, currentPosition
+    maxPosition = $this.prop('scrollWidth') - $this.outerWidth()
 
-    $el.find('.fade-left').toggleClass('end-scroll', currentPosition is 0)
-    $el.find('.fade-right').toggleClass('end-scroll', currentPosition is maxPosition)
+    $this.find('.fade-left').toggleClass('end-scroll', currentPosition is 0)
+    $this.find('.fade-right').toggleClass('end-scroll', currentPosition is maxPosition)
-- 
cgit v1.2.3