TimeToggle django custom filter

 Uncategorized  No Responses »
Apr 212009
 

It’s always good to keep web pages clean and free of clutter to focus the user experience on what really is important.  For this matter, it’s nice to be shown the difference between the time now and the time something was posted in a informal way such as below:

timetoggle-normal

So if you still wanted this uncluttered view but still desired to allow the user to see the exact moment that was, then maybe you’d have to let the user check a checkbox in their user settings are show an exact time when the view of that object is more detailed.  However I’ve come up with the idea that on mouseover the nice and informal ‘time since’ can be replaced with an exact time of the post in an easy custom filter.

Here’s the same chirp as shown above but with the mouse hovering over the time.

timetoggle-mouseover

When the mouse is rolled back out, the informal time since is displayed again.

Seamless user experience showing more detail when the user wants it :) 

from django.utils import timesince, dateformat

@register.filter
def timetoggle(time, id):
link = "<span id=\""+str(id) + "timesince\"> about <a href=\"#\" onmouseover=\"document.getElementById('"+str(id)+"timeactual').style.display=''; document.getElementById('"+str(id)+"timesince').style.display='none';return false;\">"
link += timesince.timesince(time)
link += " ago</a> </span><span id=\""+str(id)+"timeactual\" style='display:none'> at <a href=\"#\" onmouseout=\"document.getElementById('"+str(id)+"timeactual').style.display='none'; document.getElementById('"+str(id)+"timesince').style.display='';return false;\">"
link += dateformat.DateFormat(time).format("g:ia o\\n l jS N Y")
link += "</a></span>"
return mark_safe(link)

Use in the following way: {{ time_object|timetoggle:unique_identifier }}   Here’s an example: {{ post.pub_date|timetoggle:post.id }}

 Posted by Dan Cooper at 6:21 pm  Tagged with: , , , , , , , , , , ,

wordbreak filter

 Uncategorized  1 Response »
Apr 162009
 

I wrote my own wordbreak filter for django :)

I realised quickly that when I wrote a long unbroken piece of text in one of my chirps, the div would expand (not good).  I did experiment with the overflow:auto CSS property to make the div scrollable horizontally when required but wanted a different method.  Facebook uses a <wbr> tag in long words to break them up but in my research I found that &shy; was the most commonly supported amongst most browsers.

The filter works at the template level and uses a single int to determine the number of spaces to insert the break lines.  Here’s an example: {{ object.content|wordbreak:”10″ }}

At every nth character of a word that is more than n characters long, a string of the datetime now plus a custom string plus the datetime again is placed.  The string is then conditionally escaped to make the string safe to render and then the custom string is replaced with &shy;.

from django.utils.html import conditional_escape
from django.utils.safestring import mark_safe
from datetime import datetime
import re

from django import template
register = template.Library()

@register.filter
def wordbreak (string, arg):
    search = '([^ ]{' + arg + '})'
    t = datetime.now()
    wbr = t.strftime("%A%d%B%Y%f") + 'wbr_here' + t.strftime("%A%d%B%Y%f")
    saferesult = conditional_escape(re.sub( search, '\\1' + wbr, string ))
    result = saferesult.replace(wbr,'&shy;')
    return mark_safe(result)

source code also available at http://www.djangosnippets.org/snippets/1432/

 Posted by Dan Cooper at 11:03 pm  Tagged with: , , , , ,
© 2011 athe.la blog Suffusion theme by Sayontan Sinha