Modifying Flippy to increase theming options [#1710168]

This isn't a request as much as it's an example of how I've modified flippy to make it easier to theme.

Currently flippy.tpl.php has the following code:

<ul class="flippy">
	<?php if (!empty($first_link)): ?><li class="first"><?php print $first_link; ?></li><?php endif; ?>
	<li class="previous"><?php print $previous_link; ?></li>
	<li class="next"><?php print $next_link; ?></li>
	<?php if (!empty($last_link)): ?><li class="last"><?php print $last_link; ?></li><?php endif; ?>
</ul>

What this does is make the first and last links conditional (i.e., if you're at the first in the series, the first link won't display, and if you're at the last in the series, the last link won't display). However, this makes the entire series harder to theme, because since those links literally don't exist in those circumstances, the entire row of links will either shift to the left or expand to the right. Also, if you're in the first of the series, the previous link won't disappear, but it won't have a link, so there will be artifacts of whatever you've themed for links remaining. The same for being in the last of a series.

Here's what I mean. In a situation where there are valid links to the "right" and "left" of a node, you'll get:

< first < previous next> last >

At the first of a series, you'll get

next > last >

HOWEVER, let's say you've added CSS to make the links look more like buttons. So for example if you've made each links 100px wide and given them a border, what you actually get is this:

[_____________] [________next >_______] [______last >_______]

The empty block is the < prev link. It's not conditional, so while the link doesn't show up, css is still trying to theme something because the style is still there.

If you're trying to make the links look any fancier than text, then you'll run into the quasi-disappearing link issue. You'll also have to manage dealing with "buttons" that keep disappearing and reappearing depending on what node you're on.

What I did was add a little more php code and a few more styles in order make it possible to keep rendering non-working buttons, but allow them to appear "grayed out":

<ul class="flippy">
	<?php if (!empty($first_link)): ?><li class="first"><?php print $first_link; ?></li><?php endif; ?>
	<?php if (empty($first_link)): ?><li class="first empty">First</li><?php endif; ?>
	<?php if (!empty($previous_link)): ?><li class="previous"><?php print $previous_link; ?></li><?php endif; ?>
	<?php if (empty($previous_link)): ?><li class="previous empty">Previous</li><?php endif; ?>
	<?php if (!empty($next_link)): ?><li class="next"><?php print $next_link; ?></li><?php endif; ?>
	<?php if (empty($next_link)): ?><li class="next empty">Next</li><?php endif; ?>
	<?php if (!empty($last_link)): ?><li class="last"><?php print $last_link; ?></li><?php endif; ?>
	<?php if (empty($last_link)): ?><li class="last empty">Last</li><?php endif; ?>
</ul>

What this does is essentially create two "sets" of links: one that actually provides a link, and one that just inserts the appropriate text (First, Previous, Next, Last) of the link position. The empty tag also inserts an "empty" css class so that you can create a "non-working button" theme.

I'm sure someone can come up with a more elegant way of doing this, but I thought I'd throw it up here in case it was useful to another user.

Comment	File	Size	Author
#7	increased_theming_options-1710168-7.patch	1.96 KB	lolandese
#7

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

lolandese CreditAttribution: lolandese commented 8 December 2012 at 11:56

Status:

Active

» Reviewed & tested by the community

.
Thanks.

To make it doesn't have too much of an impact on an existing install, I've added to flippy.css:

.flippy li.first.empty, .flippy li.last.empty {
  display: none;
}

.flippy li.previous.empty, .flippy li.next.empty {
  color: LightGrey;
}

It can then be overridden with custom CSS through the theme's style.css.

Another advantage of this, even not using buttons, is that the empty previous or next text still takes up it's usual space, avoiding the regular prev/next to annoyingly shift to the center if displaying a first or last item.

Comment #2

lolandese CreditAttribution: lolandese commented 8 December 2012 at 12:37

Status:

Reviewed & tested by the community

» Needs work

Mmmm. I was a bit too quick changing the status.

It turns out that above solution doesn't take in account the settings. So, for example, if we changed the label in the node type specific settings it might result in "<Older Next>" instead of "<Older Newer>". We should instead use something like:

<ul class="flippy">
<?php if (!empty($first_link)): ?><li class="first"><?php print $first_link; ?></li><?php endif; ?>
<?php if (empty($first_link)): ?><li class="first empty"><?php print variable_get('flippy_first_label_blog','First'); ?></li><?php endif; ?>
<?php if (!empty($previous_link)): ?><li class="previous"><?php print $previous_link; ?></li><?php endif; ?>
<?php if (empty($previous_link)): ?><li class="previous empty"><?php print variable_get('flippy_prev_label_blog','Previous'); ?></li><?php endif; ?>
<?php if (!empty($next_link)): ?><li class="next"><?php print $next_link; ?></li><?php endif; ?>
<?php if (empty($next_link)): ?><li class="next empty"><?php print variable_get('flippy_next_label_blog','Next'); ?></li><?php endif; ?>
<?php if (!empty($last_link)): ?><li class="last"><?php print $last_link; ?></li><?php endif; ?>
<?php if (empty($last_link)): ?><li class="last empty"><?php print variable_get('flippy_last_label_blog','Last'); ?></li><?php endif; ?>
</ul>

Obviously this is only going to work for the node type "blog". It would probably need a patch for the function template_preprocess_flippy() in the module itself to cover the "non-link" cases.

Comment #3

lolandese CreditAttribution: lolandese commented 8 December 2012 at 19:46

Status:

Needs work

» Needs review

The below is node type "sensitive". A DEMO that also shows another custom feature, displaying a node title on MouseOver .

<ul class="flippy">
<?php
  $node = menu_get_object();
  if ($node) {
    $vars['node'] = $node;
  }
?>
<?php if (!empty($first_link)): ?><li class="first"><?php print $first_link; ?></li><?php endif; ?>
<?php if (empty($first_link)): ?><li class="first empty"><?php print variable_get('flippy_first_label_' . $vars['node']->type, NULL); ?></li><?php endif; ?>
<?php if (!empty($previous_link)): ?><li class="previous"><?php print $previous_link; ?></li><?php endif; ?>
<?php if (empty($previous_link)): ?><li class="previous empty"><?php print variable_get('flippy_prev_label_' . $vars['node']->type, NULL); ?></li><?php endif; ?>
<?php if (!empty($next_link)): ?><li class="next"><?php print $next_link; ?></li><?php endif; ?>
<?php if (empty($next_link)): ?><li class="next empty"><?php print variable_get('flippy_next_label_' . $vars['node']->type, NULL); ?></li><?php endif; ?>
<?php if (!empty($last_link)): ?><li class="last"><?php print $last_link; ?></li><?php endif; ?>
<?php if (empty($last_link)): ?><li class="last empty"><?php print variable_get('flippy_last_label_' . $vars['node']->type, NULL); ?></li><?php endif; ?>
</ul>