From b398264a7c88aeb3e5330b24eab2d773cf31788b Mon Sep 17 00:00:00 2001 From: Mikhail Titov Date: Thu, 29 Dec 2016 18:02:45 -0600 Subject: [PATCH] Delegate JS events to play nice with Turbolinks This closes #48 --- Gemfile | 1 + app/assets/javascripts/tabulatr/_events.js | 171 +++++++----------- app/assets/javascripts/tabulatr/_tabulatr.js | 9 +- .../_tabulatr_batch_actions_menu.html.slim | 1 + .../app/assets/javascripts/application.js | 1 + 5 files changed, 68 insertions(+), 115 deletions(-) diff --git a/Gemfile b/Gemfile index f072b0f..29bceac 100644 --- a/Gemfile +++ b/Gemfile @@ -3,6 +3,7 @@ source 'https://rubygems.org' gemspec gem 'jquery-rails' +gem 'turbolinks' gem 'tzinfo-data', platforms: %i[mingw mswin x64_mingw jruby] group :development, :test do diff --git a/app/assets/javascripts/tabulatr/_events.js b/app/assets/javascripts/tabulatr/_events.js index 0103593..65978db 100644 --- a/app/assets/javascripts/tabulatr/_events.js +++ b/app/assets/javascripts/tabulatr/_events.js @@ -1,18 +1,12 @@ -function tabulatrInitialize() { - tabulatr_tables = []; +(function($, window, document, undefined) { - $('th.tabulatr-sortable').click(function(){ + $(document).on('click', 'th.tabulatr-sortable', function(){ var th = $(this); var sort_by = th.data('tabulatr-column-name'); var dir = th.attr('data-sorted'); var table = th.parents('table'); var tableId = table.attr('id'); - var table_obj; - for(var i = 0; i < tabulatr_tables.length; i++){ - if(tabulatr_tables[i].id === tableId){ - table_obj = tabulatr_tables[i]; - } - } + var table_obj = table.data('tabulatr'); var tableName = table_obj.id.split('_')[0]; table.find('th.tabulatr-sortable.sorted').removeClass('sorted').removeAttr('data-sorted'); dir = (dir === 'asc') ? 'desc' : 'asc'; @@ -30,14 +24,7 @@ function tabulatrInitialize() { table_obj.updateTable({}); }); - - $('.tabulatr_table').each(function(ix, el){ - if($('.pagination[data-table="'+ $(el).attr('id') +'"]').length === 0){ - $('.pagination_trigger[data-table="'+ $(el).attr('id') +'"]').bind('inview', cbfn); - } - }); - - $('.batch-action-inputs').click(function(){ + $(document).on('click', '.batch-action-inputs', function(){ var a = $(this); var name = a.data('do-batch-action-name'); var key = a.data('do-batch-action'); @@ -53,12 +40,7 @@ function tabulatrInitialize() { if(confirmation){ $('.tabulatr_mark_all[data-table='+ tableId +']').prop('indeterminate', false).prop('checked', false); $('#'+ tableId +' .tabulatr-wrench').addClass('disabled'); - var table_obj; - for(var i = 0; i < tabulatr_tables.length; i++){ - if(tabulatr_tables[i].id === tableId){ - table_obj = tabulatr_tables[i]; - } - } + var table_obj = $('table#'+tableId).data('tabulatr'); if (use_ajax) table_obj.updateTable(params, true); else @@ -66,14 +48,9 @@ function tabulatrInitialize() { } }); - $('form.tabulatr-fuzzy-search').submit(function(){ + $(document).on('submit', 'form.tabulatr-fuzzy-search', function(){ var tableId = $(this).data('table'); - var table_obj; - for(var i = 0; i < tabulatr_tables.length; i++){ - if(tabulatr_tables[i].id === tableId){ - table_obj = tabulatr_tables[i]; - } - } + var table_obj = $('table#'+tableId).data('tabulatr'); if(table_obj.hasInfiniteScrolling){ $('.pagination_trigger[data-table='+ tableId +']').unbind('inview', cbfn); $('.pagination_trigger[data-table='+ tableId +']').bind('inview', cbfn); @@ -82,30 +59,20 @@ function tabulatrInitialize() { return false; }); - $('form.tabulatr_filter_form input, form.tabulatr_filter_form select').change(function(){ + $(document).on('change', 'form.tabulatr_filter_form input, form.tabulatr_filter_form select', function(){ $(this).parents('form.tabulatr_filter_form').submit(); }); - $('form.tabulatr_filter_form').submit(function(){ + $(document).on('submit', 'form.tabulatr_filter_form', function(){ var tableId = $(this).data('table'); - var table_obj; - for(var i = 0; i < tabulatr_tables.length; i++){ - if(tabulatr_tables[i].id === tableId){ - table_obj = tabulatr_tables[i]; - } - } + var table_obj = $('table#'+tableId).data('tabulatr'); table_obj.submitFilterForm(); return false; }); - $('.tabulatr_mark_all').click(function(){ + $(document).on('click', '.tabulatr_mark_all', function(){ var tableId = $(this).parents('table').prop('id'); - var table_obj; - for(var i = 0; i < tabulatr_tables.length; i++){ - if(tabulatr_tables[i].id === tableId){ - table_obj = tabulatr_tables[i]; - } - } + var table_obj = $('table#'+tableId).data('tabulatr'); if($(this).is(':checked')){ $('#'+ tableId +' tr[data-page]:visible input[type=checkbox]').prop('checked', true); $('#'+ tableId +' .tabulatr-wrench').removeClass('disabled'); @@ -119,16 +86,11 @@ function tabulatrInitialize() { } }); - $('.tabulatr_table').on('click', 'input.tabulatr-checkbox', function(){ + $(document).on('click', '.tabulatr_table input.tabulatr-checkbox', function(){ var $table = $(this).closest('.tabulatr_table'); var tableId = $table.attr('id'); var $markAllCheckbox = $table.find('.tabulatr_mark_all'); - var table_obj; - for(var i = 0; i < tabulatr_tables.length; i++){ - if(tabulatr_tables[i].id === tableId){ - table_obj = tabulatr_tables[i]; - } - } + var table_obj = $table.data('tabulatr'); if($(this).is(':checked')){ if($('#'+ tableId +' tr[data-page]:visible input[type=checkbox]').not(':checked').length > 0){ $markAllCheckbox.prop("indeterminate", true); @@ -153,17 +115,12 @@ function tabulatrInitialize() { } }); - $('.tabulatr-per-page a').click(function(){ + $(document).on('click', '.tabulatr-per-page a', function(){ if($(this).hasClass('active')){ return false; } $(this).closest('div').find('a').removeClass('active'); $(this).addClass('active'); var tableId = $(this).closest('div').data('table'); - var table_obj; - for(var i = 0; i < tabulatr_tables.length; i++){ - if(tabulatr_tables[i].id === tableId){ - table_obj = tabulatr_tables[i]; - } - } + var table_obj = $('table#'+tableId).data('tabulatr'); table_obj.moreResults = true; if(table_obj.hasInfiniteScrolling){ $('.pagination_trigger[data-table='+ tableId +']').bind('inview', cbfn); @@ -178,61 +135,65 @@ function tabulatrInitialize() { $(document).on('click', 'a[data-tabulatr-reset]',function(){ var a = $(this); - var tableObj; var tableId = a.data('tabulatrReset'); a.parents('.tabulatr-outer-wrapper').removeClass('filtered'); - for(var i = 0; i < tabulatr_tables.length; i++){ - if(tabulatr_tables[i].id === tableId){ - tableObj = tabulatr_tables[i]; - tableObj.resetTable(); - return false; - } - } + var table_obj = $('table#'+tableId).data('tabulatr'); + table_obj.resetTable(); + return false; }); - if($('.tabulatr_table:not(".tabulatr_static_table")').length > 0){ - if(typeof(Storage) !== undefined){ - try { - var count = localStorage.tabulatr_page_display_count; - if(count !== undefined){ - $('.tabulatr-per-page a').removeClass('active'); - $('.tabulatr-per-page a[data-items-per-page='+ count +']'). - addClass('active'); - } - } catch(e) {} - } - var tableObj, tableId, tabulatrTable; - $('.tabulatr_table:not(".tabulatr_static_table")').each(function(ix, el){ - tableId = $(el).attr('id'); - tabulatrTable = new Tabulatr(tableId); - if($(el).data('persistent')){ + $(document).on('change', '.tabulatr_count > select', function(event){ + var tableId = $(event.target).parent().data('table'); + var tbl = $('table#' + tableId); + tbl.data('pagesize', event.target.value); + var table_obj = tbl.data('tabulatr'); + table_obj.resetTable(); + }); + + $(document).on('ready page:load turbolinks:load', function(event){ + $('.tabulatr_table').each(function(ix, el){ + if($('.pagination[data-table="'+ $(el).attr('id') +'"]').length === 0){ + $('.pagination_trigger[data-table="'+ $(el).attr('id') +'"]').bind('inview', cbfn); + } + }); + + if($('.tabulatr_table:not(".tabulatr_static_table")').length > 0){ + if(typeof(Storage) !== undefined){ try { - localStorage._tabulatr_test = 1; - tabulatrTable.isAPersistedTable = true; + var count = localStorage.tabulatr_page_display_count; + if(count !== undefined){ + $('.tabulatr-per-page a').removeClass('active'); + $('.tabulatr-per-page a[data-items-per-page='+ count +']'). + addClass('active'); + } } catch(e) {} } - if($('.pagination[data-table='+ tableId +']').length === 0){ - tabulatrTable.hasInfiniteScrolling = true; - } - tabulatr_tables.push(tabulatrTable); - for(var i = 0; i < tabulatr_tables.length; i++){ - if(tabulatr_tables[i].id === tableId){ - tableObj = tabulatr_tables[i]; + var tableObj, tableId, tabulatrTable; + $('.tabulatr_table:not(".tabulatr_static_table")').each(function(ix, el){ + if ($(el).data('tabulatr')) return; // can't figure out selector for above // mlt 20180926 + tableId = $(el).attr('id'); + tabulatrTable = new Tabulatr(tableId); + if($(el).data('persistent')){ + try { + localStorage._tabulatr_test = 1; + tabulatrTable.isAPersistedTable = true; + } catch(e) {} } - } - tableObj.updateTable({}, false); - }); - } + if($('.pagination[data-table='+ tableId +']').length === 0){ + tabulatrTable.hasInfiniteScrolling = true; + } + $(el).data('tabulatr', tabulatrTable); + tabulatrTable.updateTable({}, false); + }); + } + }); $(document).on('click', 'a[data-show-filters-for]', function(){ var a = $(this); a.parents('.tabulatr-outer-wrapper').addClass('filtered'); + return false; }); -} - -$(tabulatrInitialize); -$(document).on('page:load', tabulatrInitialize); $(document).on('click', '.pagination a[data-page]', function(){ var a = $(this); @@ -243,17 +204,11 @@ $(document).on('click', '.pagination a[data-page]', function(){ var tableId = $(a).closest('.pagination').data('table'); $('.tabulatr_mark_all[data-table='+ tableId +']').prop('checked', false); $('.tabulatr_mark_all[data-table='+ tableId +']').prop('indeterminate', false); - var table_obj; - for(var i = 0; i < tabulatr_tables.length; i++){ - if(tabulatr_tables[i].id === tableId){ - table_obj = tabulatr_tables[i]; - } - } + var table_obj = $('table#'+tableId).data('tabulatr'); table_obj.updateTable({append: false, page: a.data('page')}); return false; }); - $(document).on('change', 'select[data-tabulatr-date-filter]', function() { var select = $(this); var option = select.find('option:selected'); @@ -264,3 +219,5 @@ $(document).on('change', 'select[data-tabulatr-date-filter]', function() { select.parents('.tabulatr-filter-row').find(".from_to").hide().val(''); } }); + +})(jQuery, window, document); diff --git a/app/assets/javascripts/tabulatr/_tabulatr.js b/app/assets/javascripts/tabulatr/_tabulatr.js index 77a33bc..7672ade 100644 --- a/app/assets/javascripts/tabulatr/_tabulatr.js +++ b/app/assets/javascripts/tabulatr/_tabulatr.js @@ -9,17 +9,10 @@ function Tabulatr(id){ this.hasInfiniteScrolling = false; } -var tabulatr_tables; - var cbfn = function(event, isInView, visiblePartX, visiblePartY) { if (isInView && visiblePartY !== 'top' && visiblePartY !== 'bottom') { var tableId = $(event.currentTarget).data('table'); - var table_obj; - for(var i = 0; i < tabulatr_tables.length; i++){ - if(tabulatr_tables[i].id === tableId){ - table_obj = tabulatr_tables[i]; - } - } + var table_obj = $('table#'+tableId).data('tabulatr'); table_obj.updateTable({append: true}); } }; diff --git a/app/views/tabulatr/_tabulatr_batch_actions_menu.html.slim b/app/views/tabulatr/_tabulatr_batch_actions_menu.html.slim index 39742c4..001cd27 100644 --- a/app/views/tabulatr/_tabulatr_batch_actions_menu.html.slim +++ b/app/views/tabulatr/_tabulatr_batch_actions_menu.html.slim @@ -37,6 +37,7 @@ - extension = data[:extension] li = link_to label, '#', class: "batch-action-inputs", data: { \ + "turbolinks" => false, \ "do-batch-action-name" => iname, \ "do-batch-action" => key, \ "table-id" => table_id, \ diff --git a/spec/dummy/app/assets/javascripts/application.js b/spec/dummy/app/assets/javascripts/application.js index bc651e3..04fe57d 100644 --- a/spec/dummy/app/assets/javascripts/application.js +++ b/spec/dummy/app/assets/javascripts/application.js @@ -13,4 +13,5 @@ //= require jquery_ujs //= require bootstrap //= require tabulatr +//= require turbolinks //= require_tree .