From f5c5154ddf39edd7882ee7aa8f751e08fe1ab7fb Mon Sep 17 00:00:00 2001
From: rub <rub@piwigo.org>
Date: Tue, 7 Oct 2008 19:18:55 +0000
Subject: jQuery Datepicker:   o use id for selector   o check radio button on
 change date

git-svn-id: http://piwigo.org/svn/trunk@2680 68402e56-0260-453c-a942-63ccdbb3a9ee
---
 admin/template/goto/element_set_global.tpl     | 10 +++++-----
 admin/template/goto/element_set_unit.tpl       | 10 +++++-----
 admin/template/goto/history.tpl                | 20 ++++++++++----------
 admin/template/goto/include/datepicker.inc.tpl | 18 +++++++++++++++---
 admin/template/goto/picture_modify.tpl         | 10 +++++-----
 5 files changed, 40 insertions(+), 28 deletions(-)

(limited to 'admin/template')

diff --git a/admin/template/goto/element_set_global.tpl b/admin/template/goto/element_set_global.tpl
index 7e3e64643..56218a5ae 100644
--- a/admin/template/goto/element_set_global.tpl
+++ b/admin/template/goto/element_set_global.tpl
@@ -4,7 +4,7 @@
 
 {literal}
 <script type="text/javascript">
-  pwg_initialization_datepicker("select[name=date_creation_day]", "select[name=date_creation_month]", "input[name=date_creation_year]", "input[name=date_creation_linked_date]");
+  pwg_initialization_datepicker("#date_creation_day", "#date_creation_month", "#date_creation_year", "#date_creation_linked_date", "#date_creation_action_set");
 </script>
 {/literal}
 
@@ -145,22 +145,22 @@
           <label><input type="radio" name="date_creation_action" value="leave" checked="checked" /> {'leave'|@translate}</label>
           <label><input type="radio" name="date_creation_action" value="unset" /> {'unset'|@translate}</label>
           <label><input type="radio" name="date_creation_action" value="set" id="date_creation_action_set" /> {'set to'|@translate}</label>
-          <select onchange="document.getElementById('date_creation_action_set').checked = true;" name="date_creation_day">
+          <select id="date_creation_day" name="date_creation_day">
              <option value="0">--</option>
             {section name=day start=1 loop=32}
               <option value="{$smarty.section.day.index}" {if $smarty.section.day.index==$DATE_CREATION_DAY}selected="selected"{/if}>{$smarty.section.day.index}</option>
             {/section}
           </select>
-          <select onchange="document.getElementById('date_creation_action_set').checked = true;" name="date_creation_month">
+          <select id="date_creation_month" name="date_creation_month">
             {html_options options=$month_list selected=$DATE_CREATION_MONTH}
           </select>
-          <input onchange="document.getElementById('date_creation_action_set').checked = true;"
+          <input id="date_creation_year"
                  name="date_creation_year"
                  type="text"
                  size="4"
                  maxlength="4"
                  value="{$DATE_CREATION_YEAR}" />
-          <input name="date_creation_linked_date" type="hidden" size="10" disabled="disabled"/>
+          <input id="date_creation_linked_date" name="date_creation_linked_date" type="hidden" size="10" disabled="disabled"/>
         </td>
       </tr>
 
diff --git a/admin/template/goto/element_set_unit.tpl b/admin/template/goto/element_set_unit.tpl
index c2b38a00d..a5690885b 100644
--- a/admin/template/goto/element_set_unit.tpl
+++ b/admin/template/goto/element_set_unit.tpl
@@ -54,24 +54,24 @@
         <label><input type="radio" name="date_creation_action-{$element.ID}" value="unset" /> {'unset'|@translate}</label>
         <label><input type="radio" name="date_creation_action-{$element.ID}" value="set" id="date_creation_action_set-{$element.ID}" /> {'set to'|@translate}</label>
 
-        <select onmousedown="document.getElementById('date_creation_action_set-{$element.ID}').checked = true;" name="date_creation_day-{$element.ID}">
+        <select id="date_creation_day-{$element.ID}" name="date_creation_day-{$element.ID}">
          	<option value="0">--</option>
            {section name=day start=1 loop=32}
              <option value="{$smarty.section.day.index}" {if $smarty.section.day.index==$element.DATE_CREATION_DAY}selected="selected"{/if}>{$smarty.section.day.index}</option>
            {/section}
         </select>
-        <select onmousedown="document.getElementById('date_creation_action_set-{$element.ID}').checked = true;" name="date_creation_month-{$element.ID}">
+        <select id="date_creation_month-{$element.ID}" name="date_creation_month-{$element.ID}">
           {html_options options=$month_list selected=$element.DATE_CREATION_MONTH}
         </select>
-        <input onmousedown="document.getElementById('date_creation_action_set-{$element.ID}').checked = true;"
+        <input id="date_creation_year-{$element.ID}"
                name="date_creation_year-{$element.ID}"
                type="text"
                size="4"
                maxlength="4"
                value="{$element.DATE_CREATION_YEAR}" />
-        <input name="date_creation_linked_date-{$element.ID}" type="hidden" size="10" disabled="disabled"/>
+        <input id="date_creation_linked_date-{$element.ID}" name="date_creation_linked_date-{$element.ID}" type="hidden" size="10" disabled="disabled"/>
         <script type="text/javascript">
-          pwg_initialization_datepicker("select[name=date_creation_day-{$element.ID}]", "select[name=date_creation_month-{$element.ID}]", "input[name=date_creation_year-{$element.ID}]", "input[name=date_creation_linked_date-{$element.ID}]");
+          pwg_initialization_datepicker("#date_creation_day-{$element.ID}", "#date_creation_month-{$element.ID}", "#date_creation_year-{$element.ID}", "#date_creation_linked_date-{$element.ID}", "#date_creation_action_set-{$element.ID}");
         </script>
       </td>
     </tr>
diff --git a/admin/template/goto/history.tpl b/admin/template/goto/history.tpl
index ffbf0994d..6e0804a6c 100644
--- a/admin/template/goto/history.tpl
+++ b/admin/template/goto/history.tpl
@@ -4,8 +4,8 @@
 
 {literal}
 <script type="text/javascript">
-  pwg_initialization_datepicker("select[name=start_day]", "select[name=start_month]", "input[name=start_year]", "input[name=start_linked_date]", null, "input[name=end_linked_date]");
-  pwg_initialization_datepicker("select[name=end_day]", "select[name=end_month]", "input[name=end_year]", "input[name=end_linked_date]", "input[name=start_linked_date]", null);
+  pwg_initialization_datepicker("#start_day", "#start_month", "#start_year", "#start_linked_date", null, null, "#end_linked_date");
+  pwg_initialization_datepicker("#end_day", "#end_month", "#end_year", "#end_linked_date", null, "#start_linked_date", null);
 </script>
 {/literal}
 
@@ -19,33 +19,33 @@
   <ul>
     <li><label>{'search_date_from'|@translate}</label></li>
     <li>
-      <select name="start_day">
+      <select id="start_day" name="start_day">
         <option value="0">--</option>
         {section name=day start=1 loop=32}
         <option value="{$smarty.section.day.index}" {if $smarty.section.day.index==$START_DAY_SELECTED}selected="selected"{/if}>{$smarty.section.day.index}</option>
         {/section}
       </select>
-      <select name="start_month">
+      <select id="start_month" name="start_month">
       {html_options options=$month_list selected=$START_MONTH_SELECTED}
       </select>
-      <input name="start_year" value="{$START_YEAR}" type="text" size="4" maxlength="4" >
-      <input name="start_linked_date" type="hidden" size="10" disabled="disabled"/>
+      <input id="start_year" name="start_year" value="{$START_YEAR}" type="text" size="4" maxlength="4" >
+      <input id="start_linked_date" name="start_linked_date" type="hidden" size="10" disabled="disabled"/>
     </li>
   </ul>
   <ul>
     <li><label>{'search_date_to'|@translate}</label></li>
     <li>
-      <select name="end_day">
+      <select id="end_day" name="end_day">
         <option value="0">--</option>
         {section name=day start=1 loop=32}
         <option value="{$smarty.section.day.index}" {if $smarty.section.day.index==$END_DAY_SELECTED}selected="selected"{/if}>{$smarty.section.day.index}</option>
         {/section}
       </select>
-      <select name="end_month">
+      <select id="end_month" name="end_month">
       {html_options options=$month_list selected=$END_MONTH_SELECTED}
       </select>
-      <input name="end_year" value="{$END_YEAR}" type="text" size="4" maxlength="4" >
-      <input name="end_linked_date" type="hidden" size="10" disabled="disabled"/>
+      <input id="end_year" name="end_year" value="{$END_YEAR}" type="text" size="4" maxlength="4" >
+      <input id="end_linked_date" name="end_linked_date" type="hidden" size="10" disabled="disabled"/>
     </li>
   </ul>
 
diff --git a/admin/template/goto/include/datepicker.inc.tpl b/admin/template/goto/include/datepicker.inc.tpl
index 2b3baa095..ef6829382 100644
--- a/admin/template/goto/include/datepicker.inc.tpl
+++ b/admin/template/goto/include/datepicker.inc.tpl
@@ -20,10 +20,21 @@ function pwg_get_fmt_datepicker(day, month, year)
 // initialize controls
 // day, month, year: selectors of visible date controls
 // linked_date: selector of hidden linked dates control
+// checked_on_change: selector of control to change "checked" attribut
 // min_linked_date: selector of hidden linked date control witch give min value
 // max_linked_date: selector of hidden linked date control witch give max value
-function pwg_initialization_datepicker(day, month, year, linked_date, min_linked_date, max_linked_date)
+function pwg_initialization_datepicker(day, month, year, linked_date, checked_on_change, min_linked_date, max_linked_date)
 {
+  // Action on change date value
+  function pwg_on_date_change()
+  {
+    pwg_check_date();
+    if (checked_on_change != null)
+    {
+      $(checked_on_change).attr("checked", "true");
+    }
+  }
+
   // Prevent selection of invalid dates through the select controls 
   function pwg_check_date()
   {
@@ -103,7 +114,7 @@ function pwg_initialization_datepicker(day, month, year, linked_date, min_linked
               $(month).val(array_date[1]);
               $(day).val(array_date[2]);
             }
-            pwg_check_date();
+            pwg_on_date_change();
         },
       showOn: "both",
 {/literal}
@@ -117,10 +128,11 @@ function pwg_initialization_datepicker(day, month, year, linked_date, min_linked
     jQuery(day + ", " + month + ", " + year).change(
       function ()
       {
-        pwg_check_date();
+        pwg_on_date_change();
       });
 
     // In order to desable element of list
+    // In order to init linked input
     pwg_check_date();
    });
 
diff --git a/admin/template/goto/picture_modify.tpl b/admin/template/goto/picture_modify.tpl
index ddf4e3fc4..a35f07436 100644
--- a/admin/template/goto/picture_modify.tpl
+++ b/admin/template/goto/picture_modify.tpl
@@ -5,7 +5,7 @@
 
 {literal}
 <script type="text/javascript">
-  pwg_initialization_datepicker("select[name=date_creation_day]", "select[name=date_creation_month]", "input[name=date_creation_year]", "input[name=date_creation_linked_date]");
+  pwg_initialization_datepicker("#date_creation_day", "#date_creation_month", "#date_creation_year", "#date_creation_linked_date", "#date_creation_action_set");
 </script>
 {/literal}
 
@@ -96,22 +96,22 @@
         <td>
           <label><input type="radio" name="date_creation_action" value="unset" /> {'unset'|@translate}</label>
           <input type="radio" name="date_creation_action" value="set" id="date_creation_action_set" /> {'set to'|@translate}
-          <select onmousedown="document.getElementById('date_creation_action_set').checked = true;" name="date_creation_day">
+          <select id="date_creation_day" name="date_creation_day">
             <option value="0">--</option>
             {section name=day start=1 loop=32}
               <option value="{$smarty.section.day.index}" {if $smarty.section.day.index==$DATE_CREATION_DAY_VALUE}selected="selected"{/if}>{$smarty.section.day.index}</option>
             {/section}
           </select>
-          <select onmousedown="document.getElementById('date_creation_action_set').checked = true;" name="date_creation_month">
+          <select id="date_creation_month" name="date_creation_month">
             {html_options options=$month_list selected=$DATE_CREATION_MONTH_VALUE}
           </select>
-          <input onmousedown="document.getElementById('date_creation_action_set').checked = true;"
+          <input id="date_creation_year"
                  name="date_creation_year"
                  type="text"
                  size="4"
                  maxlength="4"
                  value="{$DATE_CREATION_YEAR_VALUE}" />
-          <input name="date_creation_linked_date" type="hidden" size="10" disabled="disabled"/>
+          <input id="date_creation_linked_date" name="date_creation_linked_date" type="hidden" size="10" disabled="disabled"/>
         </td>
       </tr>
 
-- 
cgit v1.2.3