feature 828 added: display tags by letters. Users can switch from "cloud" to

"letters" with a button in the top bar.


git-svn-id: http://piwigo.org/svn/trunk@2362 68402e56-0260-453c-a942-63ccdbb3a9ee

include/config_default.inc.php

@@ -567,6 +567,13 @@ $conf['content_tag_cloud_items_number'] = 12;
 // CSS class tagLevelX.
 $conf['tags_levels'] = 5;
 
+// tags_default_display_mode: group tags by letter or display a tag cloud by
+// default? 'letters' or 'cloud'.
+$conf['tags_default_display_mode'] = 'cloud';
+
+// tag_letters_column_number: how many columns to display tags by letter
+$conf['tag_letters_column_number'] = 4;
+
 // +-----------------------------------------------------------------------+
 // | Notification by mail                                                  |
 // +-----------------------------------------------------------------------+

tags.php

@@ -58,13 +58,107 @@ $page['body_id'] = 'theTagsPage';
 
 $template->set_filenames(array('tags'=>'tags.tpl'));
 
-// +-----------------------------------------------------------------------+
-// |                        tag cloud construction                         |
-// +-----------------------------------------------------------------------+
+$page['display_mode'] = $conf['tags_default_display_mode'];
+if (isset($_GET['display_mode']))
+{
+  if (in_array($_GET['display_mode'], array('cloud', 'letters')))
+  {
+    $page['display_mode'] = $_GET['display_mode'];
+  }
+}
+
+$template->assign(
+  array(
+    'U_CLOUD' => get_root_url().'tags.php?display_mode=cloud',
+    'U_LETTERS' => get_root_url().'tags.php?display_mode=letters',
+    'display_mode' => $page['display_mode'],
+    )
+  );
 
 // find all tags available for the current user
 $tags = get_available_tags();
 
+// +-----------------------------------------------------------------------+
+// |                       letter groups construction                      |
+// +-----------------------------------------------------------------------+
+
+if ($page['display_mode'] == 'letters') {
+  // we want tags diplayed in alphabetic order
+  usort($tags, 'name_compare');
+
+  $current_letter = null;
+  $is_first_tag = true;
+  $nb_tags = count($tags);
+  $current_column_tags = 0;
+
+  $letter = array(
+    'tags' => array()
+    );
+
+  foreach ($tags as $tag)
+  {
+    $tag_letter = strtoupper(substr($tag['name'], 0, 1));
+
+    if ($is_first_tag) {
+      $current_letter = $tag_letter;
+      $letter['TITLE'] = $tag_letter;
+      $is_first_tag = false;
+    }
+
+    //lettre precedente differente de la lettre suivante
+    if ($tag_letter !== $current_letter)
+    {
+      if ($current_column_tags > $nb_tags/$conf['tag_letters_column_number'])
+      {
+        $letter['CHANGE_COLUMN'] = true;
+        $current_column_tags = 0;
+      }
+
+      $letter['TITLE'] = $current_letter;
+
+      $template->append(
+        'letters',
+        $letter
+        );
+      
+      $current_letter = $tag_letter;
+      $letter = array(
+        'tags' => array()
+        );
+    }
+
+    array_push(
+      $letter['tags'],
+      array(
+        'URL' => make_index_url(
+          array(
+            'tags' => array($tag),
+            )
+          ),
+        'NAME' => $tag['name'],
+        'COUNTER' => $tag['counter'],
+        )
+      );
+    
+    $current_column_tags++;
+  }
+
+  // flush last letter
+  if (count($letter['tags']) > 0)
+  {
+    $letter['CHANGE_COLUMN'] = false;
+    $letter['TITLE'] = $current_letter;
+    $template->append(
+      'letters',
+      $letter
+      );
+  }
+}
+
+// +-----------------------------------------------------------------------+
+// |                        tag cloud construction                         |
+// +-----------------------------------------------------------------------+
+
 // we want only the first most represented tags, so we sort them by counter
 // and take the first tags
 usort($tags, 'counter_compare');

template/yoga/default-layout.css

@@ -268,3 +268,38 @@ BODY#thePopuphelpPage .content UL LI
 BODY#thePopuphelpPage P#pageBottomActions A {
   border: none;
 }
+
+TR.tagLine {
+  border-bottom: 1px solid #ddd;
+  text-align: left;
+}
+TR.tagLine:hover {
+  background-color: #fff;
+}
+TD.nbEntries {
+  text-align: right;
+  font-style: italic;
+  font-size: 90%;
+}
+
+FIELDSET.tagLetter {
+  border: 1px solid #d3d3d3;
+  width: 200px;
+  margin: 0.5em;
+  padding: 10px;
+}
+
+LEGEND.tagLetterLegend {
+  border: 1px solid #d3d3d3;
+  font-size:120%;
+  font-weight: bold;
+  padding: 0 5px;
+  color: #555;
+  font-style: normal;
+}
+
+TABLE.tagLetterContent {
+  width:100%;
+  font-size:80%;
+  border-collapse : collapse;
+}

template/yoga/tags.tpl

@@ -3,12 +3,21 @@
 
   <div class="titrePage">
     <ul class="categoryActions">
+{if $display_mode == 'letters'}
+      <li><a href="{$U_CLOUD}" title="{'show tag cloud'|@translate}"><img src="{$themeconf.icon_dir}/tag_cloud.png" class="button" alt="{'cloud'|@translate}"/></a></li>
+{/if}
+
+{if $display_mode == 'cloud'}
+      <li><a href="{$U_LETTERS}" title="{'group by letters'|@translate}"><img src="{$themeconf.icon_dir}/tag_letters.png" class="button" alt="{'letters'|@translate}"/></a></li>
+{/if}
+
       <li><a href="{$U_HOME}" title="{'return to homepage'|@translate}"><img src="{$themeconf.icon_dir}/home.png" class="button" alt="{'home'|@translate}"/></a></li>
     </ul>
     <h2>{'Tags'|@translate}</h2>
   </div>
 
-  {if isset($tags)}
+{if isset($tags)}
+  {if $display_mode == 'cloud'}
   <ul id="fullTagCloud">
     {foreach from=$tags item=tag}
     <li><a href="{$tag.URL}" class="{$tag.CLASS}" title="{$tag.TITLE}">{$tag.NAME}</a></li>
@@ -16,4 +25,31 @@
   </ul>
   {/if}
 
+  {if $display_mode == 'letters'}
+  <table>
+    <tr>
+      <td valign="top">
+    {foreach from=$letters item=letter}
+  <fieldset class="tagLetter">
+    <legend class="tagLetterLegend">{$letter.TITLE}</legend>
+    <table class="tagLetterContent">
+      {foreach from=$letter.tags item=tag}
+      <tr class="tagLine">
+        <td><a href="{$tag.URL}">{$tag.NAME}</a></td>
+        <td class="nbEntries"><strong>{$tag.COUNTER}</strong> {'photos'|@translate}</td>
+      </tr>
+      {/foreach}
+    </table>
+  </fieldset>
+      {if $letter.CHANGE_COLUMN}
+      </td>
+      <td valign="top">
+      {/if}
+    {/foreach}
+      </td>
+    </tr>
+  </table>
+  {/if}
+{/if}
+
 </div> <!-- content -->