[Rt-commit] rt branch, 4.4/ticket-history-infinite-scroll, repushed

Dustin Graves dustin at bestpractical.com
Thu Oct 8 17:50:35 EDT 2015


The branch 4.4/ticket-history-infinite-scroll was deleted and repushed:
       was f17a6a1836bcd82a436bbb4459d0168001dc6fba
       now f6596c4047af1366672b6cdc5581d1a1dc89e318

1:  f17a6a1 ! 1:  f6596c4 add infinite scrolling and infinite scroll with gradual link to load page
    @@ -12,7 +12,7 @@
              WidgetArguments => {
                  Description => 'Show history',                #loc
     -            Values      => [qw(delay click always)],
    -+            Values      => [qw(delay click always continuous gradual)],
    ++            Values      => [qw(delay click always continuous)],
                  ValuesLabel => {
     -                delay   => "after the rest of the page loads",  #loc
     -                click   => "after clicking a link",             #loc
    @@ -20,8 +20,7 @@
     +                delay       => "after the rest of the page loads",  #loc
     +                click       => "after clicking a link",             #loc
     +                always      => "immediately",                       #loc
    -+                continuous  => "as you scroll",                 #loc
    -+                gradual     => "after clicking to load one page",  #loc
    ++                continuous  => "as you scroll",                     #loc
                  },
              },
          },
    @@ -85,8 +84,6 @@
     +$AttachmentContent => $Object->TextAttachments
     +$ShowHeaders       => 0
     +$PathPrefix        => ''
    -+$Page              => 1
    -+$Rows              => 10
     +</%ARGS>
     +<%INIT>
     +my $trans_content = {};
    @@ -127,10 +124,7 @@
     +$m->callback( %ARGS, Object => $Object, CallbackName => 'BeforeTransactions' );
     +
     +# Properly set starting index
    -+my $i = ($Page - 1) * $Rows;
    -+
    -+$Transactions->RowsPerPage( $Rows );
    -+$Transactions->GotoPage( $Page - 1 );
    ++my $i = 0;
     +
     +my $Transaction;
     +
    @@ -146,7 +140,7 @@
     +    # skip the Set transactions.  This complication is necessary to avoid
     +    # creating backdated transactions on upgrade which normalize to one type or
     +    # another.
    -+    # 
    ++    #
     +    # These conditions assumes ticket Owner is a single-member denormalized
     +    # role group, which is safe since that is unlikely to ever change in the
     +    # future.
    @@ -192,6 +186,19 @@
     +</%perl>
     +<script type="text/javascript">ReplaceUserReferences()</script>
     
    +diff --git a/share/html/Elements/ShowTransaction b/share/html/Elements/ShowTransaction
    +--- a/share/html/Elements/ShowTransaction
    ++++ b/share/html/Elements/ShowTransaction
    +@@
    + %# those contributions and any derivatives thereof.
    + %#
    + %# END BPS TAGGED BLOCK }}}
    +-<div class="<% join ' ', @classes %>">
    ++<div class="<% join ' ', @classes %>" data-transaction-id="<% $Transaction->id %>">
    +   <div class="metadata">
    +     <span class="type">
    +       <a name="txn-<% $Transaction->id %>" \
    +
     diff --git a/share/html/Helpers/TicketHistoryPage b/share/html/Helpers/TicketHistoryPage
     new file mode 100644
     --- /dev/null
    @@ -246,7 +253,9 @@
     +%# END BPS TAGGED BLOCK }}}
     +<%ARGS>
     +$id
    -+$page => 1
    ++$oldestTransactionsFirst
    ++$lastTransactionId => undef
    ++$transactionId => undef
     +</%ARGS>
     +<%INIT>
     +my $TicketObj = RT::Ticket->new($session{'CurrentUser'});
    @@ -256,13 +265,37 @@
     +my $attachment_content = $TicketObj->TextAttachments;
     +my %extra_args;
     +$m->callback( CallbackName => 'ExtraShowHistoryArguments', Ticket => $TicketObj, ExtraArgs => \%extra_args );
    ++
    ++my $transactions  = $TicketObj->Transactions;
    ++my $order = $oldestTransactionsFirst ? 'ASC' : 'DESC';
    ++if ($lastTransactionId) {
    ++    $transactions->Limit(
    ++        FIELD    => 'id',
    ++        OPERATOR => $oldestTransactionsFirst ? '>' : '<',
    ++        VALUE    => $lastTransactionId
    ++    );
    ++}
    ++$transactions->OrderByCols(
    ++    { FIELD => 'Created',   ORDER => $order },
    ++    { FIELD => 'id',        ORDER => $order },
    ++);
    ++if ($transactionId) {
    ++    $transactions->Limit(
    ++        FIELD    => 'id',
    ++        OPERATOR => $oldestTransactionsFirst ? '<=' : '>=',
    ++        VALUE    => $transactionId
    ++    );
    ++} else {
    ++    $transactions->RowsPerPage(10);
    ++    $transactions->FirstPage();
    ++}
     +</%INIT>
     +<& /Elements/ShowHistoryPage,
     +    Object => $TicketObj,
     +    ShowHeaders => $ARGS{'ShowHeaders'},
     +    Attachments => $attachments,
     +    AttachmentContent => $attachment_content,
    -+    Page => $page,
    ++    Transactions => $transactions,
     +    %extra_args,
     +    &>
     +% $m->abort();
    @@ -279,11 +312,6 @@
     +    <& /Ticket/Elements/ContinuousShowHistory,
     +        Ticket => $TicketObj
     +    &>
    -+% } elsif ($ShowHistory eq "gradual") {
    -+    <& /Ticket/Elements/ContinuousShowHistory,
    -+        Ticket => $TicketObj,
    -+        Gradual => '1'
    -+    &>
     +% } elsif ($ShowHistory eq "delay") {
          <& /Ticket/Elements/DelayShowHistory,
              Ticket => $TicketObj,
    @@ -343,12 +371,10 @@
     +%# END BPS TAGGED BLOCK }}}
     +<%ARGS>
     +$Ticket
    -+$Gradual => 0
     +</%ARGS>
     +<%INIT>
     +my %params = %ARGS;
     +delete $params{Ticket};
    -+delete $params{Gradual};
     +
     +my $url = RT->Config->Get('WebPath') . "/Helpers/TicketHistoryPage?" .
     +        $m->comp('/Elements/QueryString', %params, id => $Ticket->id );
    @@ -362,6 +388,8 @@
     +
     +my $record_type = $Ticket->RecordType;
     +my $histid      = "\L$record_type\E-" . $Ticket->id . "-history";
    ++
    ++my $oldestTransactionsFirst = RT->Config->Get("OldestTransactionsFirst", $session{CurrentUser});
     +</%INIT>
     +<div id="delayed_ticket_history">
     +<div class="history <% lc $record_type %>" id="<% $histid %>">
    @@ -400,10 +428,6 @@
     +
     +<div class="history-container">
     +
    -+% if ($Gradual) {
    -+    <a href="#" class="load-history-page"><% loc('Show ticket history') %></a>
    -+% }
    -+
     +% if ($ShowDisplayModes or $ShowTitle) {
     +    <& /Widgets/TitleBoxEnd &>
     +% }
    @@ -414,73 +438,117 @@
     +
     +<script type="text/javascript">
     +jQuery(function(){
    -+    var page = 1,
    -+        loading = false, // prevent multiple simultaneous load events
    -+        gradual = false;
    -+
    -+% if ($Gradual) {
    -+    gradual = true;
    -+% }
    -+
    -+    function removeLoadingMessage() {
    ++    var isLoading = false, // prevent multiple simultaneous load events
    ++        disableLoading = false, // prevent repeated fruitless attempts
    ++        loadDistanceFromBottom = 600, // to load before bottom of page is reached
    ++        lastTransactionId = null,
    ++        hash = window.location.hash,
    ++        hashTransactionId = null;
    ++
    ++    var oldestTransactionsFirst = <% $oldestTransactionsFirst || 0 %>;
    ++
    ++    var removeLoadingMessage = function() {
     +        var loadingMessages = jQuery('.loading-message');
     +        if (loadingMessages.length) loadingMessages.remove();
    -+    }
    -+
    -+    function showLoadingMessage() {
    -+        var placeholder = jQuery('#history-placeholder');
    -+        if (!placeholder.length) {
    -+            removeLoadingMessage();
    -+            var loadingMessage = jQuery('<span class="loading-message"><&|/l&>Loading...</&></span>');
    -+            jQuery(".history-container").append(loadingMessage);
    ++    };
    ++
    ++    var removeLoadLink = function() {
    ++        var loadLink = jQuery('.error-load-history');
    ++        if (loadLink.length) loadLink.remove();
    ++    };
    ++
    ++    var showLoadingMessage = function() {
    ++        removeLoadingMessage();
    ++        var loadingMessage = jQuery('<span class="loading-message"><&|/l&>Loading...</&></span>');
    ++        jQuery(".history-container").append(loadingMessage);
    ++    };
    ++
    ++    var loadingError = function(reason) {
    ++        removeLoadingMessage();
    ++        disableLoading = true;
    ++        removeLoadLink();
    ++        var loadLink = jQuery('<div class="error-load-history"><&|/l&>Could not load ticket history. Reason: </&>' + reason + '.<br/><a href="#"><&|/l&>Try again</&></a></div>');
    ++        jQuery(".history-container").append(loadLink);
    ++    };
    ++
    ++    var loadHistoryPage = function() {
    ++        if (isLoading || disableLoading) return;
    ++
    ++        isLoading = true;
    ++        showLoadingMessage();
    ++
    ++        var queryString = '&oldestTransactionsFirst=' + oldestTransactionsFirst;
    ++        if (lastTransactionId) queryString += '&lastTransactionId=' + lastTransactionId;
    ++
    ++        // check for link to specific transaction and make sure we load enough to view it
    ++        if (hash && !lastTransactionId) {
    ++            var matches = hash.match(/^#txn-(\d+)$/);
    ++            if (matches) {
    ++                hashTransactionId = matches[1];
    ++                queryString += '&transactionId=' + hashTransactionId;
    ++            }
     +        }
    -+    }
    -+
    -+    function addLoadPageLink() {
    -+        var loadPageLink = jQuery('<a href="#" class="load-history-page"><% loc('Load more') %></a>');
    -+        jQuery(".history-container").append(loadPageLink);
    -+    }
    -+
    -+    var loadHistoryPage = function() {
    -+        if (loading) return;
    -+
    -+        loading = true;
    -+        showLoadingMessage();
     +
     +        jQuery.ajax({
    -+            url: "<% $url %>" + '&page=' + page,
    ++            url: "<% $url %>" + queryString,
     +            success: function(html) {
     +                if(html) {
    ++                    lastTransactionId = jQuery(html).filter('div.transaction').last().data('transactionId');
     +                    jQuery(".history-container").append(html);
    -+                    page += 1;
    ++
    ++                    if (hashTransactionId) { // focus transaction if we are following a link to it
    ++                        hashTransactionId = null;
    ++                        location.href = hash;
    ++                    }
    ++                } else {
    ++                    disableLoading = true;
     +                }
    -+                loading = false;
    -+
    ++
    ++                isLoading = false;
     +                removeLoadingMessage();
    -+                if (gradual) addLoadPageLink();
     +            },
     +            error: function(xhr, reason) {
    -+                alert('<&|/l&>Could not load ticket history. Reason: </&>' + reason);
    -+                loading = false;
    -+
    -+                removeLoadingMessage();
    -+                if (gradual) addLoadPageLink();
    ++                isLoading = false;
    ++                loadingError(reason);
     +            }
     +        });
     +    };
     +
    -+    if (gradual) {
    -+        jQuery('.load-history-page').click(function(e) {
    -+            jQuery('.load-history-page').remove();
    ++    jQuery(window).scroll(function() {
    ++        if(jQuery(window).scrollTop() >= jQuery(document).height() - jQuery(window).height() - loadDistanceFromBottom) {
     +            loadHistoryPage();
    -+            e.preventDefault();
    -+        });
    -+    } else {
    -+        jQuery(window).scroll(function() {
    -+            if(jQuery(window).scrollTop() >= jQuery(document).height() - jQuery(window).height()) {
    -+                loadHistoryPage();
    -+            }
    -+        });
    -+    }
    ++        }
    ++    });
    ++
    ++    jQuery('.history-container').on('click', '.error-load-history a', function(e) {
    ++        e.preventDefault();
    ++        removeLoadLink();
    ++        disableLoading = false;
    ++        loadHistoryPage();
    ++    });
    ++
    ++    loadHistoryPage();
     +});
     +</script>
    +
    +diff --git a/share/static/css/base/misc.css b/share/static/css/base/misc.css
    +--- a/share/static/css/base/misc.css
    ++++ b/share/static/css/base/misc.css
    +@@
    + .dashboard-subscription tr.frequency .value input {
    +     margin-bottom: 0.75em;
    + }
    ++
    ++/* infinite history error message */
    ++
    ++.error-load-history {
    ++    background-color: #b32;
    ++    padding: 10px;
    ++    border-radius: 5px;
    ++    color: white;
    ++}
    ++
    ++.error-load-history a {
    ++    text-decoration: underline !important;
    ++    color: white !important;
    ++}



More information about the rt-commit mailing list