disbable navigation prev/next buttons at borders

diff --git a/panikweb_templates/static/css/_specifics.scss b/panikweb_templates/static/css/_specifics.scss
index 8e5252521b25dbde7680d429051921ea391fe882..a0fbb13a364d74a0ec1800e4664bde0332f1bdc6 100644 (file)
--- a/panikweb_templates/static/css/_specifics.scss
+++ b/panikweb_templates/static/css/_specifics.scss
@@ -2140,6 +2140,13 @@ div.around-nav {
                button {
                        line-height: 45px;
                        color: white;
+                       width: 100%;
+                       height: 100%;
+                       transition: all linear 0.2s;
+                       &:disabled {
+                               background: #eee;
+                               color: #888;
+                       }
                }
        }
        div.around-nav-inner {

diff --git a/panikweb_templates/static/js/specifics.js b/panikweb_templates/static/js/specifics.js
index ba1d9eabeae3bb4d428e0cd61fa4caa781291b36..48c6a707648feae6fbc448696efaf6c09565310a 100644 (file)
--- a/panikweb_templates/static/js/specifics.js
+++ b/panikweb_templates/static/js/specifics.js
@@ -392,36 +392,54 @@ $(function() {
                        return false;
                });
 
+               var block_width = $('.around-block').outerWidth() + 1;
+               var $inner = $('.around-nav-inner-2');
+
                if ($('#search-form.big input#id_q').val() == '') {
                        $('#search-form.big input#id_q').focus();
                }
 
+               var go_to_program_x = $('.go-to-program').position().left;
+               function refresh_arrows() {
+                       var idx = $inner.data('idx');
+                       if ((idx * block_width) + $('.around-nav-inner').width() > go_to_program_x) {
+                               $('.around-nav-next button').attr('disabled', true);
+                       } else {
+                               $('.around-nav-next button').attr('disabled', false);
+                       }
+                       if (idx == 0) {
+                               $('.around-nav-previous button').attr('disabled', true);
+                       } else {
+                               $('.around-nav-previous button').attr('disabled', false);
+                       }
+               }
+
                $('.around-block').on('click', function () {
                        $('.around-block.highlight').removeClass('highlight');
                        $(this).addClass('highlight');
                        $('.around-details').hide();
                        var block_id = $(this).data('block');
                        $('.around-details[data-block="' + block_id + '"]').show();
-                       var $inner = $('.around-nav-inner-2');
                        var translation = block_id - 1;
                        $inner.data('idx', translation);
-                       $inner.css('transform', 'translateX(-' + (translation*245) + 'px)');
+                       $inner.css('transform', 'translateX(-' + (translation*block_width) + 'px)');
                });
 
                $('.around-nav-inner-2').data('idx', 0);
                $('.around-nav-previous button').on('click', function() {
-                       var $inner = $('.around-nav-inner-2');
                        var translation = ($inner.data('idx') - 1);
                        $inner.data('idx', translation);
-                       $inner.css('transform', 'translateX(-' + (translation*245) + 'px)');
+                       $inner.css('transform', 'translateX(-' + (translation*block_width) + 'px)');
+                       refresh_arrows();
                });
                $('.around-nav-next button').on('click', function() {
-                       var $inner = $('.around-nav-inner-2');
                        var translation = ($inner.data('idx') + 1);
                        $inner.data('idx', translation);
-                       $inner.css('transform', 'translateX(-' + (translation*245) + 'px)');
+                       $inner.css('transform', 'translateX(-' + (translation*block_width) + 'px)');
+                       refresh_arrows();
                });
                $('.around-block.highlight').click();
+               refresh_arrows();
 
                 $('#ticker li:not(:first)');
                if (ticker_interval) clearInterval(ticker_interval);