Ticket #10809 (closed PLIP: fixed)

Opened 4 years ago

Last modified 3 years ago

Table sort internationalization

Reported by: thomasdesvenain Owned by:
Priority: minor Milestone: 4.1
Component: JavaScript Version:
Keywords: dates, sort, table, listing Cc: vincentfretin, plip-advisories@…

Description (last modified by thomasdesvenain) (diff)

Proposer: Thomas Desvenain
Seconder: Vincent Fretin

Motivation

table_sorter.js sort algorithm makes sort by dates working only with english format dates. Project that uses non-english-format dates (french one for example, where dates are in a dd/mm/yyyy format) needs to customize each time table_sorter.js

This improvement should also provide a solution for making data sortable by dates in any format (such as "Monday 1st, June, 2010") without any javascript customization, and through a standard way.

There are many other contexts where we can't sort using simple generic javascript sort, and we want it without having to sort on server side :

  • texts with 'special' characters (accents, non ascii characters)
  • number formats (as 1,000 for 1000, etc, etc) and units (1 Giga > 1 Mega)

Assumptions

This is only about sortable tables with "listing" class binded with table_sorter.js code.

Proposal & Implementation

User that develops table code may add an information into the html code of the cell (a class on td for example) that contains the value in a sortable format (for dates, probably like iso YYYY-MM-DDThh:mm:ss, YYYY-MM-DD, etc) and the sort machinery (table_sorter.js code) should use this information if it exists. I suggest developper can add a class prefixed by "sort-" : <td class="sort-sortablevalue"> as for example : <td class="sort-2010-03-04">Le 4 mai 2010</td>, <td class="sort-aepfel">äpfel</td> <td class="sort-1000">1,000 times</td> <td class="sort-1000">1 MB</td> <td class="sort-1000000">1 GB</td>

for dates, using iso format :  http://www.iso.org/iso/fr/support/faqs/faqs_widely_used_standards/widely_used_standards_other/date_and_time_format.htm

Deliverables

What code and documentation needs to be produced? Standard items:

  • Unit tests
  • Documentation

Risks

columns with new html content have to work with old table_sorter.js columns with new html content have to work with kss server side sort

Participants

Thomas Desvenain

Progress

No

Change History

comment:1 Changed 4 years ago by thomasdesvenain

  • Cc vincentfretin added

comment:2 Changed 4 years ago by thomasdesvenain

  • Description modified (diff)

comment:3 Changed 4 years ago by hannosch

This sounds great, we wanted this for a long time ;)

One suggestion, though: I'd make the class attribute inside the HTML a bit more generic. Instead of the "datetime-" prefix, I'd use something like "sort-". That way the JavaScript code should be able to do a simple sort on this for other types of data.

For example: 1,000 ("sort-00001000"), 101 ("sort-00000101"), äpfel ("sort-aepfel", tønsberg ("tonsberg"). The PLIP doesn't have to handle the server side code for producing those representations for things other than dates. But it'd be nice if the same JavaScript code could be used for it.

comment:4 Changed 4 years ago by thomasdesvenain

i think you're totally right, i update the plip

comment:5 Changed 4 years ago by thomasdesvenain

  • Description modified (diff)

i generalized it as you suggested and added your examples, plus sort by sizes example.

comment:6 Changed 4 years ago by ldr

HTML5's  custom data attribute provides for this sort of thing. Instead of setting it on a class, we'd use a data-sortorder="00001000" attribute. This should be fully backwards compatible.

(There's also HTML5's  time element datetime attribute but I think we're better off sticking to sorting here)

comment:7 Changed 4 years ago by rossp

  • Summary changed from PLIP : table sort internationalization to Table sort internationalization

Fix the title

comment:8 Changed 4 years ago by esteele

Your PLIP has been accepted for consideration for Plone 4.1.

Framework Team voting on this PLIP was: Alec +1 Craig +1 Elizabeth +1 Laurence -- Martijn +1 Matthew +1 Rob +1 Ross --

The initial implementation deadline for your PLIP is October 1st, 2010. The Framework Team would certainly appreciate you finishing beforehand so that they may begin evaluating it as soon as possible. Announce its readiness here once your implementation is ready for review.

comment:9 Changed 4 years ago by cah190

  • Cc plip-advisories@… added

comment:10 Changed 4 years ago by thomasdesvenain

  • Status changed from new to closed
  • Resolution set to fixed

I implemented the feature and a fix in  https://svn.plone.org/svn/plone/Plone/branches/plip10809-improve-tablesorter (use  https://svn.plone.org/svn/plone/buildouts/plone-coredev/branches/4.1/plips/plip10809-improve-tablesorter.cfg buildout conf)

I used sortabledata-xxx for naming.

I could'nt write unit tests (using test_ecmascripts) because of general architecture of table_sorter.js. i don't know how to run javascript initialization (using coding style : (function($) {code})(jQuery) in ecmascript tests environment... If you can help.

I tried this code using this example page template in custom : <html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="en-US"

lang="en-US" metal:use-macro="here/main_template/macros/master" i18n:domain="plone">

<body>

<metal:content-core fill-slot="content-core"> <table class="listing">

<thead>

<tr>

<th>Title</th> <th>Number</th> <th>Date</th> <th>Size</th> <th>Author</th> <th>Old number</th>

<th>Old name</th>

</tr>

</thead> <tbody>

<tr>

<td class="sortabledata-mytitle1">my title 1</td> <td class="sortabledata-3">Trois</td> <td class="sortabledata-2011-01-09">4th setpember, 2011</td> <td class="sortabledata-1000">1 Kb</td> <td class="emphasize sortabledata-soren">Jørgen</td> <td>5</td> <td>bleu</td>

</tr> <tr>

<td class="sortabledata-mytitle3">MY TITLE 3</td> <td class="sortabledata-12">12</td>

<td class="sortabledata-2010-05-09">5 septembre 2010</td>

<td class="emphasize sortabledata-1000000">1 Gb</td> <td class="sortabledata-elise">Élise</td> <td>21</td> <td>blanc</td>

</tr> <tr>

<td class="emphasize sortabledata-mytitle2">My Title 2</td> <td class="sortabledata-7">VII</td>

<td class="sortabledata-2010-05-12">05/12/2010</td>

<td class="sortabledata-10">10 bytes</td> <td class="sortabledata-jose">José</td> <td>8</td> <td>rouge</td>

</tr>

</tbody>

</table> </metal:content-core>

</body>

</html>

comment:11 Changed 4 years ago by thomasdesvenain

  • Status changed from closed to reopened
  • Resolution fixed deleted

comment:12 Changed 4 years ago by thomasdesvenain

Implementation done, ready for review

comment:14 Changed 3 years ago by eleddy

(In [46192]) table sort internationalization review. refs #10809

comment:15 Changed 3 years ago by esteele

  • Status changed from reopened to closed
  • Resolution set to fixed

(In [46257]) Merge PLIP #10809. Closes #10809

Note: See TracTickets for help on using tickets.