diff --git a/js/views_infinite_scroll.js b/js/views_infinite_scroll.js index b1d1465..3864f0a 100644 --- a/js/views_infinite_scroll.js +++ b/js/views_infinite_scroll.js @@ -1,76 +1,56 @@ -// $Id: - (function ($) { var views_infinite_scroll_was_initialised = false; Drupal.behaviors.views_infinite_scroll = { attach:function() { // Make sure that autopager plugin is loaded - if($.autopager) { + if($.ias) { if(!views_infinite_scroll_was_initialised) { views_infinite_scroll_was_initialised = true; // There should not be multiple Infinite Scroll Views on the same page - if(Drupal.settings.views_infinite_scroll.length == 1) { - var settings = Drupal.settings.views_infinite_scroll[0]; - var use_ajax = false; - // Make sure that views ajax is disabled - if(Drupal.settings.views && Drupal.settings.views.ajaxViews) { - $.each(Drupal.settings.views.ajaxViews, function(key, value) { - if((value.view_name == settings.view_name) && (value.view_display_id == settings.display)) { - use_ajax = true; - } - }); - } - if(!use_ajax) { - var view_selector = 'div.view-id-' + settings.view_name + '.view-display-id-' + settings.display; - var content_selector = view_selector + ' > ' + settings.content_selector; - var items_selector = content_selector + ' ' + settings.items_selector; - var pager_selector = view_selector + ' > div.item-list ' + settings.pager_selector; - var next_selector = view_selector + ' ' + settings.next_selector; - var img_location = view_selector + ' > div.view-content'; - var img_path = settings.img_path; - var img = '
loading...
'; - $(pager_selector).hide(); - var handle = $.autopager({ - appendTo: content_selector, - content: items_selector, - link: next_selector, - page: 0, - start: function() { - $(img_location).after(img); - }, - load: function() { - $('div#views_infinite_scroll-ajax-loader').remove(); - Drupal.attachBehaviors(this); - } - }); + for (key in Drupal.settings.views_infinite_scroll) { + var settings = Drupal.settings.views_infinite_scroll[key]; + var view_selector = '.view-id-' + settings.view_name + '.view-display-id-' + settings.display; + var content_selector = view_selector + ' > ' + settings.content_selector; + var items_selector = settings.items_selector; + var pager_selector = settings.pager_selector; + var next_selector = settings.next_selector; + var img = '
loading...
'; - // Trigger autoload if content height is less than doc height already - var prev_content_height = $(content_selector).height(); - do { - var last = $(items_selector).filter(':last'); - if(last.offset().top + last.height() < $(document).scrollTop() + $(window).height()) { - last = $(items_selector).filter(':last'); - handle.autopager('load'); - } - else { - break; - } - } - while ($(content_selector).height() > prev_content_height); + Drupal.behaviors.views_infinite_scroll.onRenderComplete(''); - } - else { - alert(Drupal.t('Views infinite scroll pager is not compatible with Ajax Views. Please disable "Use Ajax" option.')); - } - } - else if(Drupal.settings.views_infinite_scroll.length > 1) { - alert(Drupal.t('Views Infinite Scroll module can\'t handle more than one infinite view in the same page.')); + $.ias({ + container: content_selector, + item: settings.items_selector, + pagination: settings.pager_selector, + next: settings.next_selector, + loader: img, + loaderDelay: settings.loader_delay, + triggerPageThreshold: settings.trigger_page_treshold, + thresholdMargin: parseInt(settings.threshold_margin), + history: settings.history, + trigger: settings.trigger_text, + onRenderComplete: Drupal.behaviors.views_infinite_scroll.onRenderComplete, + customTriggerProc: Drupal.behaviors.views_infinite_scroll.customTriggerProc, + }); } } } - else { - alert(Drupal.t('Autopager jquery plugin in not loaded.')); + else if (console && console.log) { + console.log(Drupal.t('IAS jquery plugin in not loaded.')); } + }, + getParameterByName: function(string, name) { + name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); + var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), + results = regex.exec(string); + return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); + }, + customTriggerProc: function(trigger) { + $(this.pagination).after(trigger); + trigger.fadeIn(); + }, + onRenderComplete: function(items) { + Drupal.attachBehaviors($(items)); } } diff --git a/theme/views_infinite_scroll_theme.inc b/theme/views_infinite_scroll_theme.inc index 3193238..0dec991 100644 --- a/theme/views_infinite_scroll_theme.inc +++ b/theme/views_infinite_scroll_theme.inc @@ -9,11 +9,11 @@ function theme_views_infinite_scroll_pager($variables) { $view_name = $variables['view_name']; $element = isset($variables['element']) ? $variables['element'] : 0; $current_display = $variables['current_display']; - $content_selector = isset($variables['content_selector']) ? $variables['content_selector'] : 'div.view-content'; - $items_selector = isset($variables['items_selector']) ? $variables['items_selector'] : 'div.view-content .views-row'; - $img_path = $variables['img_path']; + $content_selector = isset($variables['content_selector']) ? $variables['content_selector'] : '.view-content'; + $items_selector = isset($variables['items_selector']) ? $variables['items_selector'] : '.view-content .views-row'; $parameters = $variables['parameters']; $quantity = $variables['quantity']; + $ias = $variables['ias']; $PAGER_CLASS = 'pager'; global $pager_page_array, $pager_total; @@ -79,7 +79,12 @@ function theme_views_infinite_scroll_pager($variables) { 'next_selector' => 'li.pager-next a:first', 'content_selector' => $content_selector, 'items_selector' => $items_selector, - 'img_path' => $img_path, + 'img_path' => base_path() . $ias['loader'], + 'loader_delay' => $ias['loader_delay'], + 'trigger_page_treshold' => $ias['trigger_page_treshold'], + 'trigger_text' => t(filter_xss($ias['trigger_text'])), + 'history' => ($ias['history'] == 1 || $ias['history']) ? TRUE : FALSE, + 'threshold_margin' => empty($ias['threshold_margin']) ? 0 : $ias['threshold_margin'], ), ), ); @@ -88,12 +93,12 @@ function theme_views_infinite_scroll_pager($variables) { // Add Autopager jQuery plugin // If libraries module is installed, check for the plugin in libraries dir. - if (module_exists('libraries') && file_exists(libraries_get_path('autopager') .'/jquery.autopager-1.0.0.js')) { - drupal_add_js(libraries_get_path('autopager') .'/jquery.autopager-1.0.0.js'); + if (module_exists('libraries') && file_exists(libraries_get_path('infinite-ajax-scroll') .'/dist/jquery-ias.min.js')) { + drupal_add_js(libraries_get_path('infinite-ajax-scroll') .'/dist/jquery-ias.min.js'); } // else, load it from views_infinite_scroll/js dir. else { - $autopager_module_path = drupal_get_path('module', 'views_infinite_scroll') . '/js/jquery.autopager-1.0.0.js'; + $autopager_module_path = drupal_get_path('module', 'views_infinite_scroll') . '/js/jquery-ias.min.js'; drupal_add_js($autopager_module_path); } diff --git a/views_infinite_scroll.info b/views_infinite_scroll.info index ef8dc35..7d7c149 100644 --- a/views_infinite_scroll.info +++ b/views_infinite_scroll.info @@ -5,8 +5,5 @@ package = Views core = 7.x dependencies[] = views -files[] = views_infinite_scroll.module -files[] = views_infinite_scroll.views.inc files[] = views_plugin_pager_infinite_scroll.inc files[] = drush/views_infinite_scroll.drush.inc -files[] = theme/views_infinite_scroll_theme.inc diff --git a/views_infinite_scroll.module b/views_infinite_scroll.module index b79c06c..e936aa5 100644 --- a/views_infinite_scroll.module +++ b/views_infinite_scroll.module @@ -1,5 +1,4 @@ 'views_infinite_scroll', + 'pager' => array( + 'infinite_scroll' => array( + 'title' => t('Infinite Scroll'), + 'help' => t('views_infinite_scroll'), + 'handler' => 'views_plugin_pager_infinite_scroll', + 'uses options' => TRUE, + 'parent' => 'full', + ), + ), + ); +} diff --git a/views_infinite_scroll.views.inc b/views_infinite_scroll.views.inc deleted file mode 100644 index 08dcf7d..0000000 --- a/views_infinite_scroll.views.inc +++ /dev/null @@ -1,23 +0,0 @@ - 'views_infinite_scroll', - 'pager' => array( - 'infinite_scroll' => array( - 'title' => t('Infinite Scroll'), - 'help' => t('views_infinite_scroll'), - 'handler' => 'views_plugin_pager_infinite_scroll', - 'uses options' => TRUE, - 'parent' => 'full', - ), - ), - ); -} diff --git a/views_plugin_pager_infinite_scroll.inc b/views_plugin_pager_infinite_scroll.inc index 0c12eb9..dc7485a 100644 --- a/views_plugin_pager_infinite_scroll.inc +++ b/views_plugin_pager_infinite_scroll.inc @@ -18,13 +18,97 @@ class views_plugin_pager_infinite_scroll extends views_plugin_pager_full { return format_plural($this->options['items_per_page'], 'Infinite scroll pager, @count item', 'Infinite scroll pager, @count items', array('@count' => $this->options['items_per_page'])); } + function option_definition() { + $options = parent::option_definition(); + + // Add the default values for the 'ais' options. + $options['ias'] = array( + 'contains' => array( + 'loader' => array('default' => drupal_get_path('module', 'views_infinite_scroll') . '/images/ajax-loader.gif'), + 'loader_delay' => array('default' => 600), + 'trigger_page_treshold' => array('default' => 3), + 'trigger_text' => array('default' => 'Load more items', 'translatable' => TRUE,), + 'history' => array('default' => TRUE), + 'threshold_margin' => array('default', 0), + ), + ); + + return $options; + } + + /** + * Add some custom variables to the pager settings. + */ + function options_form(&$form, &$form_state) { + parent::options_form($form, $form_state); + + // Add weight to the 'tags' and 'expose' fieldsets so we can add our own + // above those. + $form['tags']['#weight'] = 10; + $form['expose']['#weight'] = 11; + + // Create a settings form for the 'Infinite Ajax Scroll'. + $form['ias'] = array( + '#type' => 'fieldset', + '#collapsible' => FALSE, + '#collapsed' => FALSE, + '#tree' => TRUE, + '#title' => t('Settings'), + '#input' => TRUE, + '#descriptin' => t('Settings for the Infinite Ajax Scroll library.'), + ); + + $form['ias']['loader'] = array( + '#type' => 'textfield', + '#title' => t('Loader image'), + '#description' => t('A relative path the the loader image. Default is provided by the module.'), + '#default_value' => $this->options['ias']['loader'], + ); + + $form['ias']['loader_delay'] = array( + '#type' => 'textfield', + '#title' => t('Loader delay'), + '#description' => t('Minimal time (in milliseconds) the loader should be displayed before rendering.'), + '#default_value' => $this->options['ias']['loader_delay'], + '#element_validate' => array('element_validate_integer_positive'), + ); + + $form['ias']['trigger_page_treshold'] = array( + '#type' => 'textfield', + '#element_validate' => array('element_validate_integer_positive'), + '#title' => t('Pages before more link'), + '#description' => t("Page number after which a 'Load more items' link is displayed. Users will manually trigger the loading of the next page by clicking this link."), + '#default_value' => $this->options['ias']['trigger_page_treshold'], + ); + + $form['ias']['trigger_text'] = array( + '#type' => 'textfield', + '#title' => t('Trigger text'), + '#description' => t('Text of the manual trigger link.'), + '#default_value' => $this->options['ias']['trigger_text'], + ); + + $form['ias']['history'] = array( + '#type' => 'checkbox', + '#title' => t('History'), + '#description' => t('Remember the last viewed page.'), + '#default_value' => $this->options['ias']['history'], + ); + + $form['ias']['threshold_margin'] = array( + '#type' => 'textfield', + '#title' => t('Threshold margin'), + '#description' => t("On default IAS starts loading new items when you scroll to the latest .item element. The thresholdMargin will be added to the items' offset, giving you the ability to load new items earlier (please note that the margin should be a negative integer for this case)."), + '#default_value' => $this->options['ias']['threshold_margin'], + ); + } + function render($input) { - global $base_url; $content_selector = ''; $style_options = $this->view->style_options; $items_selector = ''; - $img_path = $base_url . '/' . drupal_get_path('module', 'views_infinite_scroll') . '/images/ajax-loader.gif'; switch ($this->view->plugin_name) { + default: case 'default': $content_selector = 'div.view-content'; $items_selector = '.views-row'; @@ -34,12 +118,12 @@ class views_plugin_pager_infinite_scroll extends views_plugin_pager_full { $items_selector = 'tr'; break; case 'list': - if (array_key_exists('wrapper_class', $style_options) && !empty($style_options['wrapper_class'])) { - $wrapper_class = '.' . $style_options['wrapper_class']; - } else { - $wrapper_class = '.item-list'; - } - $content_selector = 'div.view-content>' . $wrapper_class . ' > *'; + if (!empty($style_options['wrapper_class'])) { + $wrapper_class = '.' . $style_options['wrapper_class']; + } else { + $wrapper_class = '.item-list'; + } + $content_selector = 'div.view-content>' . $wrapper_class . ' > *'; $items_selector = '.views-row'; break; case 'table': @@ -48,6 +132,16 @@ class views_plugin_pager_infinite_scroll extends views_plugin_pager_full { break; } $pager_theme = views_theme_functions('views_infinite_scroll_pager', $this->view, $this->display); - return theme($pager_theme, array('tags' => $input, 'quantity' => $this->options['items_per_page'], 'view_name' => $this->view->name, 'current_display' => $this->view->current_display, 'content_selector' => $content_selector, 'items_selector' => $items_selector, 'img_path' => $img_path, 'element' => $this->options['id'])); + $options = array( + 'tags' => $input, + 'quantity' => $this->options['items_per_page'], + 'view_name' => $this->view->name, + 'current_display' => $this->view->current_display, + 'content_selector' => $content_selector, + 'items_selector' => $items_selector, + 'element' => $this->options['id'], + 'ias' => $this->options['ias'], + ); + return theme($pager_theme, $options); } }