diff --git a/js/views_infinite_scroll.js b/js/views_infinite_scroll.js index b1d1465..a80f8f2 100644 --- a/js/views_infinite_scroll.js +++ b/js/views_infinite_scroll.js @@ -5,71 +5,80 @@ 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 = 'div.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, + onLoadItems: Drupal.behaviors.views_infinite_scroll.onLoadItems, + onRenderComplete: Drupal.behaviors.views_infinite_scroll.onRenderComplete, + customTriggerProc: Drupal.behaviors.views_infinite_scroll.customTriggerProc, + }); } } } else { - alert(Drupal.t('Autopager jquery plugin in not loaded.')); + 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) { + var settings = Drupal.settings.views_infinite_scroll[0]; + var view; + 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)) { + view = value; + use_ajax = true; + } + }); + } + + var view_selector = 'div.view-id-' + settings.view_name + '.view-display-id-' + settings.display; + + if (use_ajax) { + // Overwrite the pager url. + var pager = view_selector + " " + settings.pager_selector + " " + settings.next_selector; + var href, page, uri; + // Get the page id. + href = $(pager).attr('href'); + page = Drupal.behaviors.views_infinite_scroll.getParameterByName(href, 'page'); + + uri = '/views_infinite_scroll/ajax?' + window.location.search.substring(1) + '&page=' + page + '&view_base_path=' + view.view_base_path + '&view_display_id=' + view.view_display_id + '&view_dom_id=' + view.view_dom_id + '&view_name=' + view.view_name + '&view_path=' + view.view_path; + // Overwrite the URL. + $(pager).attr('href', uri); } } } diff --git a/theme/views_infinite_scroll_theme.inc b/theme/views_infinite_scroll_theme.inc index 3193238..36ef9f3 100644 --- a/theme/views_infinite_scroll_theme.inc +++ b/theme/views_infinite_scroll_theme.inc @@ -11,9 +11,9 @@ function theme_views_infinite_scroll_pager($variables) { $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']; $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' => $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..632b39c 100644 --- a/views_infinite_scroll.module +++ b/views_infinite_scroll.module @@ -5,6 +5,20 @@ */ /** + * Implements hook_menu(). + */ +function views_infinite_scroll_menu() { + $items['views_infinite_scroll/ajax'] = array( + 'title' => 'Views Infinite Scroll', + 'page callback' => 'views_infinite_scroll_ajax', + 'access callback' => TRUE, + 'description' => 'Ajax callback for view loading.', + 'type' => MENU_CALLBACK, + ); + return $items; +} + +/** * Implements hook_views_api(). */ function views_infinite_scroll_views_api() { @@ -35,3 +49,84 @@ function views_infinite_scroll_theme() { ); return $hooks; } + +/** + * Implements hook_views_plugin(). + */ +function views_infinite_scroll_views_plugins() { + return array( + 'module' => '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', + ), + ), + ); +} + +/** + * Menu callback to load a view using AJAX. + * + * This is a copy of views_ajax(). + * @see views_ajax() + */ +function views_infinite_scroll_ajax() { + if (isset($_REQUEST['view_name']) && isset($_REQUEST['view_display_id'])) { + $name = $_REQUEST['view_name']; + $display_id = $_REQUEST['view_display_id']; + $args = isset($_REQUEST['view_args']) && $_REQUEST['view_args'] !== '' ? explode('/', $_REQUEST['view_args']) : array(); + $path = isset($_REQUEST['view_path']) ? rawurldecode($_REQUEST['view_path']) : NULL; + $dom_id = isset($_REQUEST['view_dom_id']) ? preg_replace('/[^a-zA-Z0-9_-]+/', '-', $_REQUEST['view_dom_id']) : NULL; + $pager_element = isset($_REQUEST['pager_element']) ? intval($_REQUEST['pager_element']) : NULL; + + // Remove all of this stuff from $_GET so it doesn't end up in pagers and tablesort URLs. + foreach (array('view_name', 'view_display_id', 'view_args', 'view_path', 'view_dom_id', 'pager_element', 'view_base_path', 'ajax_html_ids', 'ajax_page_state') as $key) { + if (isset($_GET[$key])) { + unset($_GET[$key]); + } + if (isset($_REQUEST[$key])) { + unset($_REQUEST[$key]); + } + if (isset($_POST[$key])) { + unset($_POST[$key]); + } + } + + // Load the view. + $view = views_get_view($name); + if ($view && $view->access($display_id)) { + // Fix 'q' for paging. + if (!empty($path)) { + $_GET['q'] = $path; + } + + // Add all $_POST data, because AJAX is always a post and many things, + // such as tablesorts, exposed filters and paging assume $_GET. + $_GET = $_POST + $_GET; + + // Overwrite the destination. + // @see drupal_get_destination() + $origin_destination = $path; + $query = drupal_http_build_query($_REQUEST); + if ($query != '') { + $origin_destination .= '?' . $query; + } + $destination = &drupal_static('drupal_get_destination'); + $destination = array('destination' => $origin_destination); + + // Override the display's pager_element with the one actually used. + if (isset($pager_element)) { + $view->display[$display_id]->handler->set_option('pager_element', $pager_element); + } + // Reuse the same DOM id so it matches that in Drupal.settings. + $view->dom_id = $dom_id; + $view->set_display($display_id); + + print '
' . $view->preview() . '
'; + } + } +} 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); } }