From 4c1561a9a541161c3d12ba2305a0056ceebf56a0 Mon Sep 17 00:00:00 2001 From: Jehanzeb Khan Date: Thu, 10 Oct 2013 15:00:53 +1100 Subject: [PATCH 1/6] Show message if there are no items to display, reusing loading ; Allow custom links to trigger table load using a.osom-tables and a data attribute osom-tables-for, with the ID of the table to load into (no # at start of ID in the data attribute) --- lib/osom_tables/helper.rb | 9 +++++++-- vendor/assets/javascripts/osom-tables.js | 5 +++++ vendor/assets/stylesheets/osom-tables.css.scss | 10 ++++++++++ 3 files changed, 22 insertions(+), 2 deletions(-) diff --git a/lib/osom_tables/helper.rb b/lib/osom_tables/helper.rb index 9d288c2..0e7c31e 100644 --- a/lib/osom_tables/helper.rb +++ b/lib/osom_tables/helper.rb @@ -11,11 +11,16 @@ def osom_table_for(items, options={}, &block) options[:data][:url] = url options[:data][:push] = true if push - content_tag :div, class: 'osom-table' do + content_tag :div, class: "osom-table #{"loading" if items.empty?}" do osom_tables_search(url, search) + content_tag(:table, options) { - content_tag(:caption, image_tag('osom-tables-spinner.gif', alt: nil), class: 'locker') + + caption = if items.empty? + content_tag(:span) { "No items to display here!" } + else + image_tag('osom-tables-spinner.gif', alt: nil) + end + content_tag(:caption, caption, class: 'locker') + capture(Table.new(self, items), &block) } + diff --git a/vendor/assets/javascripts/osom-tables.js b/vendor/assets/javascripts/osom-tables.js index ace9d91..05a5eb3 100644 --- a/vendor/assets/javascripts/osom-tables.js +++ b/vendor/assets/javascripts/osom-tables.js @@ -12,6 +12,11 @@ load_table($(this).closest('.osom-table'), this.getAttribute('href')); }); + $(document).on('click', 'a.osom-tables', function(e) { + e.preventDefault(); + load_table($("#" + $(this).data('osom-table-for')).closest('.osom-table'), this.getAttribute('href')); + }); + $(document).on('click', '.osom-table th[data-order]', function(e) { var order = $(this).data('order'), asc = $(this).hasClass('asc'); diff --git a/vendor/assets/stylesheets/osom-tables.css.scss b/vendor/assets/stylesheets/osom-tables.css.scss index 6dd21d4..ee2f268 100644 --- a/vendor/assets/stylesheets/osom-tables.css.scss +++ b/vendor/assets/stylesheets/osom-tables.css.scss @@ -34,6 +34,16 @@ background-color: #fff; border-radius: 1em; } + + span { + position: relative; + top: 5px; + max-height: 5em; + max-width: 5em; + padding: 1em; + background-color: #fff; + border-radius: 1em; + } } thead th.sortable { From c11c869aa180505c6339de31a94eea3b3c9f5f46 Mon Sep 17 00:00:00 2001 From: Jehanzeb Khan Date: Thu, 10 Oct 2013 17:26:07 +1100 Subject: [PATCH 2/6] Move load_table to a public $.osom_table method, so it can be called from outside osom tables itself; Remove custom link trigger as users can now do that themselves, now we have public osom tables --- vendor/assets/javascripts/osom-tables.js | 101 +++++++++++------------ 1 file changed, 48 insertions(+), 53 deletions(-) diff --git a/vendor/assets/javascripts/osom-tables.js b/vendor/assets/javascripts/osom-tables.js index 05a5eb3..968a0d6 100644 --- a/vendor/assets/javascripts/osom-tables.js +++ b/vendor/assets/javascripts/osom-tables.js @@ -7,61 +7,8 @@ if (!$) { return console.log("No jQuery? Osom!"); } - $(document).on('click', '.osom-table .pagination a', function(e) { - e.preventDefault(); - load_table($(this).closest('.osom-table'), this.getAttribute('href')); - }); - - $(document).on('click', 'a.osom-tables', function(e) { - e.preventDefault(); - load_table($("#" + $(this).data('osom-table-for')).closest('.osom-table'), this.getAttribute('href')); - }); - - $(document).on('click', '.osom-table th[data-order]', function(e) { - var order = $(this).data('order'), asc = $(this).hasClass('asc'); - - load_table($(this).closest('.osom-table'), build_url( - $(this).closest('table').data('url'), { - order: order + (asc ? '_desc' : ''), page: 1 - } - )); - }); - - $(window).on('popstate', function(e) { - var state = e.originalEvent.state; - if (state && state.url) { - if (current_table && current_table.find('table').data('push')) { - load_table(current_table, state.url, true); - } else { - document.location.href = state.url; - } - } - }); - var current_table = null; - function load_table(container, url, no_push) { - current_table = container.addClass('loading'); - actual_table = container.find('table'); - - actual_table.trigger('osom-table:request'); - - if (history.pushState && !no_push && actual_table.data('push')) { - history.pushState({url: url}, 'osom-table', url); - url = build_url(url, {osom_tables_cache_killa: true}); - } - - $.ajax(url, { - success: function(new_content) { - container.replaceWith(new_content); - }, - complete: function() { - container.removeClass('loading'); - actual_table.trigger('osom-table:loaded'); - } - }); - }; - /** * Rebuilds the url with the extra prams */ @@ -106,4 +53,52 @@ return [path, args]; } + var osom_table = $.fn.osom_table = $.osom_table = function(container, url, no_push) { + current_table = container.addClass('loading'); + actual_table = container.find('table'); + + actual_table.trigger('osom-table:request'); + + if (history.pushState && !no_push && actual_table.data('push')) { + history.pushState({url: url}, 'osom-table', url); + url = build_url(url, {osom_tables_cache_killa: true}); + } + + $.ajax(url, { + success: function(new_content) { + container.replaceWith(new_content); + }, + complete: function() { + container.removeClass('loading'); + actual_table.trigger('osom-table:loaded'); + } + }); + }; + + $(document).on('click', '.osom-table .pagination a', function(e) { + e.preventDefault(); + $.osom_table($(this).closest('.osom-table'), this.getAttribute('href')); + }); + + $(document).on('click', '.osom-table th[data-order]', function(e) { + var order = $(this).data('order'), asc = $(this).hasClass('asc'); + + $.osom_table($(this).closest('.osom-table'), build_url( + $(this).closest('table').data('url'), { + order: order + (asc ? '_desc' : ''), page: 1 + } + )); + }); + + $(window).on('popstate', function(e) { + var state = e.originalEvent.state; + if (state && state.url) { + if (current_table && current_table.find('table').data('push')) { + $.osom_table(current_table, state.url, true); + } else { + document.location.href = state.url; + } + } + }); + })(jQuery); From a8ff2e2744492a4dd1f91fe5cdb8ce566b12e1d1 Mon Sep 17 00:00:00 2001 From: Jehanzeb Khan Date: Fri, 11 Oct 2013 10:19:44 +1100 Subject: [PATCH 3/6] Tweak z-index of loading so that it will appear behind bootstrap modals --- vendor/assets/stylesheets/osom-tables.css.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vendor/assets/stylesheets/osom-tables.css.scss b/vendor/assets/stylesheets/osom-tables.css.scss index ee2f268..01b4ce3 100644 --- a/vendor/assets/stylesheets/osom-tables.css.scss +++ b/vendor/assets/stylesheets/osom-tables.css.scss @@ -13,7 +13,7 @@ .locker { display: none; position: absolute; - z-index: 9999; + z-index: 999; left: 0; top: 0; width: 100%; From 7e3d07e7a26cf47adca0fb69ec9976486d4baf39 Mon Sep 17 00:00:00 2001 From: Jehanzeb Khan Date: Fri, 11 Oct 2013 13:52:13 +1100 Subject: [PATCH 4/6] Use empty class for empty tables instead of loading --- lib/osom_tables/helper.rb | 2 +- vendor/assets/stylesheets/osom-tables.css.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/osom_tables/helper.rb b/lib/osom_tables/helper.rb index 0e7c31e..3146131 100644 --- a/lib/osom_tables/helper.rb +++ b/lib/osom_tables/helper.rb @@ -11,7 +11,7 @@ def osom_table_for(items, options={}, &block) options[:data][:url] = url options[:data][:push] = true if push - content_tag :div, class: "osom-table #{"loading" if items.empty?}" do + content_tag :div, class: "osom-table #{"empty" if items.empty?}" do osom_tables_search(url, search) + content_tag(:table, options) { diff --git a/vendor/assets/stylesheets/osom-tables.css.scss b/vendor/assets/stylesheets/osom-tables.css.scss index 01b4ce3..7eec193 100644 --- a/vendor/assets/stylesheets/osom-tables.css.scss +++ b/vendor/assets/stylesheets/osom-tables.css.scss @@ -80,7 +80,7 @@ } } - &.loading { + &.loading, &.empty { table { th, td { -webkit-filter: blur(1.5px); From 614ca1c73265f4f10e61f08d07baaeec7aa00028 Mon Sep 17 00:00:00 2001 From: Jehanzeb Khan Date: Fri, 11 Oct 2013 15:11:46 +1100 Subject: [PATCH 5/6] Try tweaking z-index again --- vendor/assets/stylesheets/osom-tables.css.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vendor/assets/stylesheets/osom-tables.css.scss b/vendor/assets/stylesheets/osom-tables.css.scss index 7eec193..f3ca6d3 100644 --- a/vendor/assets/stylesheets/osom-tables.css.scss +++ b/vendor/assets/stylesheets/osom-tables.css.scss @@ -13,7 +13,7 @@ .locker { display: none; position: absolute; - z-index: 999; + z-index: 100; left: 0; top: 0; width: 100%; From 1a8f394f0144cdce66925714e98d01a1178ce341 Mon Sep 17 00:00:00 2001 From: Dan Draper Date: Fri, 14 Feb 2014 12:26:59 +1100 Subject: [PATCH 6/6] Allow for aync loading of data --- lib/osom_tables/helper.rb | 16 +++++++++++++++- vendor/assets/javascripts/osom-tables.js | 8 ++++++++ 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/lib/osom_tables/helper.rb b/lib/osom_tables/helper.rb index 3146131..898a4c0 100644 --- a/lib/osom_tables/helper.rb +++ b/lib/osom_tables/helper.rb @@ -1,12 +1,25 @@ module OsomTables::Helper - def osom_table_for(items, options={}, &block) + # @param [Object] items items to be displayed, not needed if the async option is set + # @param [Hash] options + # @option opts [Boolean] :async Load the table content asynchronously on dom ready + # + # TODO: Fill all these in + def osom_table_for(*args, &block) + options = args.extract_options! + items = args.first || [] push = options[:push] == true and options.delete(:push) url = options[:url] || request.fullpath and options.delete(:url) search = options[:search] == true and options.delete(:search) paginate = options[:paginate] || {} and options.delete(:paginate) url = url.gsub(/(\?|&)osom_tables_cache_killa=[^&]*?/, '') + # Allow the table to be loaded asynchronously + if options[:async] + options[:class] ||= [] + options[:class] << 'async' + end + options[:data] ||= {} options[:data][:url] = url options[:data][:push] = true if push @@ -33,6 +46,7 @@ def osom_tables_search(url, search) end def osom_tables_pagination(items, url, options) + return ''.html_safe if items.empty? if respond_to?(:paginate) # kaminari options[:params] = Rails.application.routes.recognize_path(url, method: :get).merge(options[:params] || {}) paginate(items, options) diff --git a/vendor/assets/javascripts/osom-tables.js b/vendor/assets/javascripts/osom-tables.js index 968a0d6..2f352d2 100644 --- a/vendor/assets/javascripts/osom-tables.js +++ b/vendor/assets/javascripts/osom-tables.js @@ -90,6 +90,14 @@ )); }); + /* Load async tables */ + $(document).ready(function() { + $('.osom-table .async').each(function(index, element) { + var table = $(element); + return $.osom_table(table.closest('.osom-table'), table.data('url')); + }); + }); + $(window).on('popstate', function(e) { var state = e.originalEvent.state; if (state && state.url) {