Changeset 1061

Timestamp:

Mar 1, 2006, 5:33:52 AM (18 years ago)

Author:

rvelices

Message:

calendar improvement: month calendar view a la flickr

fix: html 4.01 compliant in rating.tpl

fix: issue with IE from version 1052 (redirect on access denied)

Location:

trunk

Files:

• identification.php (modified) (2 diffs)
• include/calendar_monthly.class.php (modified) (6 diffs)
• include/config_default.inc.php (modified) (1 diff)
• include/functions_category.inc.php (modified) (1 diff)
• template/yoga/admin/rating.tpl (modified) (2 diffs, 1 prop)
• template/yoga/category.tpl (modified) (1 diff)
• template/yoga/content.css (modified) (4 diffs)
• template/yoga/month_calendar.tpl (added)
• template/yoga/theme/clear/theme.css (modified) (1 diff, 1 prop)
• template/yoga/theme/dark/theme.css (modified) (1 diff)

trunk/identification.php

@@ -36 +36 @@
 if ( !empty($_GET['redirect']) )
 {
-  $redirect_to = $_GET['redirect'];
+  $redirect_to = urldecode($_GET['redirect']);
   if ( $user['is_the_guest'] )
   {
@@ -99 +99 @@
     'U_HOME' => PHPWG_ROOT_PATH.'category.php',
     'U_REDIRECT' => $redirect_to,
-    
+
     'F_LOGIN_ACTION' => PHPWG_ROOT_PATH.'identification.php'
     ));

trunk/include/calendar_monthly.class.php

@@ -114 +114 @@
       $this->build_nav_bar(
           CDAY,
-          $this->get_all_days_in_month(
-              $this->date_components[CYEAR] ,$this->date_components[CMONTH]
-            )
+          range( 1, $this->get_all_days_in_month(
+              $this->date_components[CYEAR] ,$this->date_components[CMONTH] )
+              )
         ); // days
     }
@@ -212 +212 @@
     $nb_days = 31;
   }
-  return range(1, $nb_days);
+  return $nb_days;
 }
 
@@ -325 +325 @@
 function build_month_calendar()
 {
-  $query='SELECT DISTINCT(DATE_FORMAT('.$this->date_field.',"%d")) as period,
-            COUNT(id) as count';
+  $query='SELECT DISTINCT(DAYOFMONTH('.$this->date_field.')) as period,
+            COUNT( DISTINCT(id) ) as count';
   $query.= $this->inner_sql;
   $query.= $this->get_date_where($this->date_components);
@@ -335 +335 @@
   while ($row = mysql_fetch_array($result))
   {
-    $d = $row['period'];
+    $d = (int)$row['period'];
     $items[$d] = array('nb_images'=>$row['count']);
   }
@@ -343 +343 @@
     $this->date_components[CDAY]=$day;
     $query = '
-SELECT file,tn_ext,path, DAYOFWEEK('.$this->date_field.')-1 as dw';
+SELECT file,tn_ext,path, width, height, DAYOFWEEK('.$this->date_field.')-1 as dow';
     $query.= $this->inner_sql;
     $query.= $this->get_date_where();
@@ -354 +354 @@
     $items[$day]['tn_path'] = get_thumbnail_src($row['path'], @$row['tn_ext']);
     $items[$day]['tn_file'] = $row['file'];
-    $items[$day]['tn_dw'] = $row['dw'];
-  }
-
-  global $lang, $template;
-  $template->assign_block_vars('thumbnails', array());
-  $template->assign_block_vars('thumbnails.line', array());
-  foreach ( $items as $day=>$data)
-  {
-    $url_base = $this->url_base.
-          $this->date_components[CYEAR].'-'.
-          $this->date_components[CMONTH].'-'.$day;
-
-    $thumbnail_title = $lang['day'][$data['tn_dw']] . ' ' . $day;
-    $name = $thumbnail_title .' ('.$data['nb_images'].')';
-
-    $template->assign_block_vars(
-        'thumbnails.line.thumbnail',
+    $items[$day]['width'] = $row['width'];
+    $items[$day]['height'] = $row['height'];
+    $items[$day]['dow'] = $row['dow'];
+  }
+
+  global $lang, $template, $conf;
+
+  if ( !empty($items)
+      and $conf['calendar_month_cell_width']>0
+      and $conf['calendar_month_cell_height']>0)
+  {
+    list($known_day) = array_keys($items);
+    $known_dow = $items[$known_day]['dow'];
+    $first_day_dow = ($known_dow-($known_day-1))%7;
+    if ($first_day_dow<0)
+    {
+      $first_day_dow += 7;
+    }
+    //first_day_dow = week day corresponding to the first day of this month
+    $wday_labels = $lang['day'];
+
+    // BEGIN - pass now in week starting Monday
+    if ($first_day_dow==0)
+    {
+      $first_day_dow = 6;
+    }
+    else
+    {
+      $first_day_dow -= 1;
+    }
+    array_push( $wday_labels, array_shift($wday_labels) );
+    // END - pass now in week starting Monday
+
+    $cell_width = $conf['calendar_month_cell_width'];
+    $cell_height = $conf['calendar_month_cell_height'];
+
+    $template->set_filenames(
+      array(
+        'month_calendar'=>'month_calendar.tpl',
+        )
+      );
+
+    $template->assign_block_vars('calendar.thumbnails',
         array(
-          'IMAGE'=>$data['tn_path'],
-          'IMAGE_ALT'=>$data['tn_file'],
-          'IMAGE_TITLE'=>$thumbnail_title,
-          'U_IMG_LINK'=>$url_base
-         )
-        );
-    $template->assign_block_vars(
-        'thumbnails.line.thumbnail.category_name',
-        array(
-          'NAME' => $name
+           'WIDTH'=>$cell_width,
+           'HEIGHT'=>$cell_height,
           )
-        );
+      );
+
+    //fill the heading with day names
+    $template->assign_block_vars('calendar.thumbnails.head', array());
+    foreach( $wday_labels as $d => $label)
+    {
+      $template->assign_block_vars('calendar.thumbnails.head.col',
+                    array('LABEL'=>$label)
+                  );
+    }
+
+    $template->assign_block_vars('calendar.thumbnails.row', array());
+
+    //fill the empty days in the week before first day of this month
+    for ($i=0; $i<$first_day_dow; $i++)
+    {
+      $template->assign_block_vars('calendar.thumbnails.row.col', array());
+      $template->assign_block_vars('calendar.thumbnails.row.col.blank', array());
+    }
+    for ($day=1; $day<=$this->get_all_days_in_month(
+              $this->date_components[CYEAR] ,$this->date_components[CMONTH]); $day++)
+    {
+      $dow = ($first_day_dow + $day-1)%7;
+      if ($dow==0)
+      {
+        $template->assign_block_vars('calendar.thumbnails.row', array());
+      }
+      $template->assign_block_vars('calendar.thumbnails.row.col', array());
+      if ( !isset($items[$day]) )
+      {
+        $template->assign_block_vars('calendar.thumbnails.row.col.empty',
+              array('LABEL'=>$day));
+      }
+      else
+      {
+        // first try to guess thumbnail size
+        if ( !empty($items[$day]['width']) )
+        {
+          $tn_size = get_picture_size(
+                 $items[$day]['width'], $items[$day]['height'],
+                 $conf['tn_width'], $conf['tn_height'] );
+        }
+        else
+        {// item not an image (tn is either mime type or an image)
+          $tn_size = @getimagesize($items[$day]['tn_path']);
+        }
+        $tn_width = $tn_size[0];
+        $tn_height = $tn_size[1];
+
+        // now need to fit the thumbnail of size tn_size within
+        // a cell of size cell_size by playing with CSS position (left/top)
+        // and the width and height of <img>.
+        $ratio_w = $tn_width/$cell_width;
+        $ratio_h = $tn_height/$cell_height;
+
+        $pos_top=$pos_left=0;
+        $img_width=$img_height='';
+        if ( $ratio_w>1 and $ratio_h>1)
+        {// cell completely smaller than the thumbnail so we will let the browser
+         // resize the thumbnail
+          if ($ratio_w > $ratio_h )
+          {// thumbnail ratio compared to cell -> wide format
+            $img_height = 'height="'.$cell_height.'"';
+            $browser_img_width = $cell_height*$tn_width/$tn_height;
+            $pos_left = ($tn_width-$browser_img_width)/2;
+          }
+          else
+          {
+            $img_width = 'width="'.$cell_width.'"';
+            $browser_img_height = $cell_width*$tn_height/$tn_width;
+            $pos_top = ($tn_height-$browser_img_height)/2;
+          }
+        }
+        else
+        {
+          $pos_left = ($tn_width-$cell_width)/2;
+          $pos_top = ($tn_height-$cell_height)/2;
+        }
+
+        $css_style = '';
+        if ( round($pos_left)!=0)
+        {
+          $css_style.='left:'.round(-$pos_left).'px;';
+        }
+        if ( round($pos_top)!=0)
+        {
+          $css_style.='top:'.round(-$pos_top).'px;';
+        }
+        $url = $this->url_base.
+              $this->date_components[CYEAR].'-'.
+              $this->date_components[CMONTH].'-'.$day;
+        $alt = $wday_labels[$dow] . ' ' . $day.
+               ' ('.$items[$day]['nb_images'].')';
+        $template->assign_block_vars('calendar.thumbnails.row.col.full',
+              array(
+                'LABEL'     => $day,
+                'IMAGE'     => $items[$day]['tn_path'],
+                'U_IMG_LINK'=> $url,
+                'STYLE'     => $css_style,
+                'IMG_WIDTH' => $img_width,
+                'IMG_HEIGHT'=> $img_height,
+                'IMAGE_ALT' => $alt,
+              )
+            );
+      }
+    }
+    //fill the empty days in the week after the last day of this month
+    while ( $dow<6 )
+    {
+      $template->assign_block_vars('calendar.thumbnails.row.col', array());
+      $template->assign_block_vars('calendar.thumbnails.row.col.blank', array());
+      $dow++;
+    }
+    $template->assign_var_from_handle('MONTH_CALENDAR', 'month_calendar');
+  }
+  else
+  {
+    $template->assign_block_vars('thumbnails', array());
+    $template->assign_block_vars('thumbnails.line', array());
+    foreach ( $items as $day=>$data)
+    {
+      $url = $this->url_base.
+            $this->date_components[CYEAR].'-'.
+            $this->date_components[CMONTH].'-'.$day;
+
+      $thumbnail_title = $lang['day'][$data['dow']] . ' ' . $day;
+      $name = $thumbnail_title .' ('.$data['nb_images'].')';
+
+      $template->assign_block_vars(
+          'thumbnails.line.thumbnail',
+          array(
+            'IMAGE'=>$data['tn_path'],
+            'IMAGE_ALT'=>$data['tn_file'],
+            'IMAGE_TITLE'=>$thumbnail_title,
+            'U_IMG_LINK'=>$url
+           )
+          );
+      $template->assign_block_vars(
+          'thumbnails.line.thumbnail.category_name',
+          array(
+            'NAME' => $name
+            )
+          );
+    }
   }
 

trunk/include/config_default.inc.php

@@ -103 +103 @@
 $conf['calendar_show_empty'] = true;
 
+// calendar_month_cell_width, calendar_month_cell_height : define the
+// width and the height of a cell in the monthly calendar when viewing a
+// given month. a value of 0 means that the pretty view is not shown.
+// a good suggestion would be to have the width and the height equal
+// and smaller than tn_width and tn_height. NOTE THAT tn_width AND tn_height
+// MUST CORRESPOND APPROXIMATIVELY TO YOUR REAL THUMBNAIL SIZE, OTHERWISE
+// THE IMAGES WILL NOT SHOW CORRECTLY
+$conf['calendar_month_cell_width'] =80;
+$conf['calendar_month_cell_height']=80;
+
 // newcat_default_commentable : at creation, must a category be commentable
 // or not ?

trunk/include/functions_category.inc.php

@@ -48 +48 @@
   {
     $login_url = './identification.php?redirect='.
-                  htmlentities(htmlentities($_SERVER['REQUEST_URI']));
+                  urlencode(urlencode($_SERVER['REQUEST_URI']));
     if ( ! $user['is_the_guest'] )
     {

trunk/template/yoga/admin/rating.tpl

@@ -2 +2 @@
 
 <form action="" method="GET" id="update">
+<fieldset>
+<legend></legend>
 <input type="hidden" name="page" value="rating" />
-<fieldset>
-
 <ul>
 
@@ -40 +40 @@
 </p>
 </form>
-
 <div class="navigationBar">{NAVBAR}</div>
-
 <table width="100%">
 <tr class="throw">

trunk/template/yoga/category.tpl

@@ -168 +168 @@
 <!-- END calbar -->
 <!-- END calendar -->
+
+{MONTH_CALENDAR}
 
 <!-- BEGIN thumbnails -->

trunk/template/yoga/content.css

@@ -180 +180 @@
 
 
+/* begin chronology/calendar elements*/
 #content DIV.calendarViews {
   display: block;
@@ -200 +201 @@
   margin: 0 2px;
   border: 1px solid gray;
-  color: dark-gray;
 }
 
@@ -207 +207 @@
   margin: 0 2px;
   border: 1px solid gray;
-  color: lightgray;
 }
 
@@ -225 +224 @@
 }
 
+/* nice looking month calendar*/
+.calMonth { border: none; border-collapse: collapse; }
+
+TD.calDayCellFull, TD.calDayCellEmpty, TD.calDayCellBlank
+{
+  text-align:left;
+  vertical-align: top;
+  font: bold 18px Arial, Helvetica, sans-serif;
+}
+
+TD.calDayHead { font: bold 12px Arial, Helvetica, sans-serif; }
+
+DIV.calImg
+{
+  overflow: hidden;
+  vertical-align: bottom;
+  z-index: 1;
+  position: relative; /*<- this required by IE*/
+}
+
+.calImg img
+{
+  position: relative;
+  border: 0;
+}
+
+.calBackDate {
+  padding-left: 4px;
+  padding-top: 0px;
+  z-index: 2;
+  position: absolute;
+  text-align: left;
+  vertical-align: top;
+}
+
+.calForeDate {
+  padding-left: 5px;
+  padding-top: 1px;
+  z-index: 3;
+  position: absolute;
+  text-align: left;
+  vertical-align: top;
+}

trunk/template/yoga/theme/clear/theme.css

@@ -78 +78 @@
 }
 
+/*calendar elements*/
+SPAN.calItemSel { color: dark-gray; }
+
+SPAN.calItemEmpty { color: lightgray; }
+
+
+/* nice looking month calendar*/
+TD.calDayCellEmpty, TD.calDayCellFull { border: 1px solid #7E7262;}
+
+TD.calDayCellEmpty { color: lightgray; }
+
+.calBackDate { color: #000; }
+.calForeDate { color: #fff; }

trunk/template/yoga/theme/dark/theme.css

@@ -115 +115 @@
 }
 
-SPAN.calItemSel {
-  color: #fff48e;
-}
+/*calendar elements*/
+SPAN.calItemSel { color: #fff48e; }
 
-SPAN.calItemEmpty {
-  color: darkgray;
-}
+SPAN.calItemEmpty { color: darkgray; }
+
+/* nice looking month calendar*/
+TD.calDayCellEmpty, TD.calDayCellFull { border: 1px solid gray;}
+
+TD.calDayCellEmpty { color: lightgray; }
+
+.calBackDate { color: #000; }
+.calForeDate { color: #fff; }