We recently uncovered some problems between Views Ticker and AdvAgg. Whenever we tried to enable JS compression and aggregation, Views Ticker was breaking our site.

After some investigation, we realized Views Ticker's use of inline JavaScript was probably the cause. However, solving this problem would not be an easy, since it's tied into how many things are done in the module.

To generate the best results, we decided to follow some of the ideas posted on other threads about a possible Views Ticker 7.x-3.x. We've created a patch that refactors the module, and might be a good candidate to become a starting point for the next version.

We included the following features in our patch:

  • Use of Libraries API for jQuery plugins (when possible)
  • Separate Views plugin styles and templates for each jQuery plugin
  • Separate template preprocess functions for each jQuery plugin
  • Notification when attempting to create a Views Ticker without jQuery libraries installed
  • Use of Drupal.settings to pass values into JavaScript (and avoid inline code)
  • Extensive use of Views $display_id values, allowing for the possibility of more than one ticker on a page
  • Proper organization of classes, first extending views_plugin_style, and then each plugin having its own class
  • New and expanded options for each Views Ticker type
  • Addition of new Views Ticker types, most notably jQuery.Marquee
  • Upgrade of older jQuery plugins that had newer versions available

The liScroll and Fade plugins are still in the module (in a new "libraries" directory), while all others need to be downloaded as typical with jQuery libraries. The liScroll with Views Ticker 2.x has clearly been modified and no longer matches the original (even though they are marked with the same version numbers), while Fade is something that must have been written for the module.

Applying this patch will require Libraries API and jQuery Update to be installed, and any view that has been previously created will need to be reconfigured. Maybe there is a way to "port" old views, but this approach is so different than the old one, I'm not sure it would be worthwhile.

I'll post the patch in just a bit, and I look forward to everyone's feedback. Thanks for your time and consideration.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

ron_s created an issue. See original summary.

ron_s’s picture

Attached is the patch for review. You'll want to make sure to apply this against 7.x-2.x-dev.

Quite a few files will be replaced and moved to different locations once the patch has been applied. The directory structure should look like this if it is successful:

libraries
-- jquery.li-scroller
---- jquery.li-scroller.js
---- li-scroller.css
-- views_ticker.fade
---- views_ticker.fade.js
theme
-- views-ticker-fade.tpl.php
-- views-ticker-li-scroller.tpl.php
-- views-ticker-marquee.tpl.php
-- views-ticker-newsticker.tpl.php
-- views-ticker-vticker.tpl.php
-- views-ticker-webticker.tpl.php
-- views_ticker_theme.inc
views
-- views_ticker.views.inc
-- views_ticker_plugin_style.inc
-- views_ticker_plugin_style_fade.inc
-- views_ticker_plugin_style_li_scroller.inc
-- views_ticker_plugin_style_marquee.inc
-- views_ticker_plugin_style_newsticker.inc
-- views_ticker_plugin_style_vticker.inc
-- views_ticker_plugin_style_webticker.inc
INSTALL.txt
LICENSE.txt
README.txt
views.ticker.css
views.ticker.js
views_ticker.info
views_ticker.install
views_ticker.module
ron_s’s picture

Status: Active » Needs review
FileSize
113.18 KB

There is a new version of the patch for review. We identified a couple of minor bugs that needed to be fixed.

We also reviewed the row classes functionality, per the issue in this thread: https://www.drupal.org/node/1825654 There are now options for each style plugin to add a custom row class, and enable/disable row classes for first/last and odd/even.

Reviewing this functionality was quite beneficial, since it allowed us to see that there were still some improvements we could make to the Views templates. They are now very straightforward (and actually they are the same for every plugin):

<div id="<?php print $container_id; ?>"<?php if ($container_class) { print ' class="'. $container_class . '"'; } ?>>
  <ul id="<?php print $list_id; ?>">
    <?php foreach ($rows as $id => $row): ?>
      <li class="<?php print $row_classes[$id]; ?>">
        <?php if ($row_span): ?>
          <span class="<?php print $span_class; ?>">
        <?php endif; ?>
        <?php print $row; ?>
        <?php if ($row_span): ?>
          </span>
        <?php endif; ?>
      </li>
    <?php endforeach; ?>
  </ul>
</div>

Status: Needs review » Needs work

The last submitted patch, 3: views_ticker-refactor_module-2704723-3.patch, failed testing.

ron_s’s picture

Status: Needs work » Needs review
FileSize
170.75 KB
2.08 KB

We found a couple of additional issues and created a new patch. Everything seems to be working fairly well now. This version also adds support for a different news ticker.

One point worth noting: the news ticker comes with an image used to display controls (play/pause/next/previous). The patch has been created with full index and binary settings, so the image is included. However, for those who are testing, the patch will not create the image file unless it's being run on a server that has Git installed.

See these threads:

How to apply git diff --binary patches without git installed?
http://stackoverflow.com/questions/1910615/how-to-apply-git-diff-binary-...

Applying patches
https://www.drupal.org/patch/apply

I'll attach the image directly to this post in case anyone is having trouble and wants to add it manually. It will need to be put in the following directory (within sites/all/modules, or wherever modules are stored for your site):

/sites/all/modules/views_ticker/libraries/jquery_news_ticker/images/controls.png

Status: Needs review » Needs work

The last submitted patch, 5: views_ticker-refactor_module-2704723-5.patch, failed testing.

ron_s’s picture

Status: Needs work » Needs review
FileSize
1.79 KB
170.95 KB

When installing patch #5 on a new site, we identified a couple of changes that needed to be made to hook_requirements. See attached.

Status: Needs review » Needs work

The last submitted patch, 7: views_ticker-refactor_module-2704723-7.patch, failed testing.

Daniel Schaefer’s picture

Status: Needs work » Reviewed & tested by the community

Applied the patch locally and updated the module. New Ticker tape (formerly BBC ticker) working fine for us after adding new library and flushing caches. Let's go ahead and make it a release!

rschwab’s picture

For anyone looking to use this, here's what I needed to do in order to get this patch to apply cleanly:

1. Clone the git repo: git clone --branch 7.x-2.x https://git.drupal.org/project/views_ticker.git
2. Download this patch (#7), place it into the same directory with the module files, ie /views_ticker
3. Use git to apply the patch git apply -v views_ticker-refactor_module-2704723-7.patch

So far so good. It has successfully addressed several layout problems I was running into with the original horizontal scroll library. I'm not prepared to added my vote to RTBC yet, but will come back later if able.

NWOM’s picture

Priority: Major » Normal
Status: Reviewed & tested by the community » Needs review
FileSize
165.8 KB

#7 worked great! Thank you! However, the following is shown when attempting to apply the patch:

views_ticker-refactor_module-2704723-7.patch:2155: trailing whitespace.
views_ticker-refactor_module-2704723-7.patch:2288: trailing whitespace.
views_ticker-refactor_module-2704723-7.patch:2446: trailing whitespace.
 * Add common template variables to the $vars array. Leveraged from
views_ticker-refactor_module-2704723-7.patch:2453: trailing whitespace.
 *   are 'container' or 'list'. The value 'container' is the <div> that wraps
views_ticker-refactor_module-2704723-7.patch:2464: trailing whitespace.

warning: squelched 24 whitespace errors
warning: 29 lines add whitespace errors.

I have managed to fix the whitespace errors. In addition to this the marquee style only had a "Scroller speed" of 15 seconds max that could be set. I changed it to allow 100 seconds as the max to provide more options.

The patch works against 7.x-2.x-dev HEAD. Please review.

NWOM’s picture

Status: Needs review » Needs work

Sadly there appears to be an incompatibility with the jQuery.Marquee plugin style (provided by this patch) and the Colorbox module. Every time a colorbox overlay is opened three problems are caused:

  1. The views ticker starts over from the starting position.
  2. The views ticker increases speed. After opening it up 5x, it's 5x as fast.
  3. The views ticker repeat interval stops after the first repeat. If colorbox is not opened, the view ticker can repeat endlessly.

Any idea on how we can fix these issues as well?

Edit: This was a byproduct of https://www.drupal.org/project/colorbox/issues/1057418#comment-12487470. After configuring colorbox correctly none of the aforementioned issues occur.

NWOM’s picture

Status: Needs work » Needs review

Back to Needs Review.

elaman’s picture

I strongly recommend using $view->dom_id for id attribute, since it will provide uniqueness in case there are multiple instances of the same view. Currently, only first view has working ticker.

Here are related issues:
#1454732: Use multiple views of one style on one page
#2951649: Doesn't work with multiple views on the same page
Marking them as duplicates.

Attached patch do that.

Status: Needs review » Needs work

The last submitted patch, 14: views_ticker-refactor_module-2704723-14.patch, failed testing. View results

elaman’s picture

Status: Needs work » Needs review
FileSize
163.02 KB

Fix failed test

NWOM’s picture

Status: Needs review » Reviewed & tested by the community

#16 fixed the problem with Views Ticker views not working that were embedded within parent Views Ticker views (Views Field View module). It also applied cleanly.

Thank you!

aubergine2010’s picture

#16 patch failed:
error: patch failed: views_ticker.info:2
error: views_ticker.info: patch does not apply