feature 3080 : simpler date inputs (one input + fontello + picker selects)

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

5 files changed, 59 insertions, 108 deletions

diff --git a/admin/themes/default/template/batch_manager_global.tpl b/admin/themes/default/template/batch_manager_global.tpl
index 7fa0ae473..148f48735 100644
--- a/admin/themes/default/template/batch_manager_global.tpl
+++ b/admin/themes/default/template/batch_manager_global.tpl
@@ -8,10 +8,6 @@
 {combine_css path="themes/default/js/ui/theme/jquery.ui.slider.css"}
 
 {footer_script}{literal}
-  pwg_initialization_datepicker("#date_creation_day", "#date_creation_month", "#date_creation_year", "#date_creation_linked_date", "#date_creation_action_set");
-{/literal}{/footer_script}
-
-{footer_script}{literal}
 /* Shift-click: select all photos between the click and the shift+click */
 jQuery(document).ready(function() {
   var last_clicked=0;
@@ -64,6 +60,8 @@ jQuery(document).ready(function() {
 
 {footer_script require='jquery.tokeninput'}
 jQuery(document).ready(function() {ldelim}
+  jQuery('[data-datepicker]').pwgDatepicker();
+
   jQuery("a.preview-box").colorbox();
   
 	var tag_src = [{foreach from=$tags item=tag name=tags}{ldelim}name:"{$tag.name|@escape:'javascript'}",id:"{$tag.id}"{rdelim}{if !$smarty.foreach.tags.last},{/if}{/foreach}];
@@ -865,22 +863,11 @@ UL.thumbnails SPAN.wrap2 {ldelim}
     <div id="action_date_creation" class="bulkAction">
       <label><input type="checkbox" name="remove_date_creation"> {'remove creation date'|@translate}</label><br>
       <div id="set_date_creation">
-          <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 id="date_creation_month" name="date_creation_month">
-            {html_options options=$month_list selected=$DATE_CREATION_MONTH}
-          </select>
-          <input id="date_creation_year"
-                 name="date_creation_year"
-                 type="text"
-                 size="4"
-                 maxlength="4"
-                 value="{$DATE_CREATION_YEAR}">
-          <input id="date_creation_linked_date" name="date_creation_linked_date" type="hidden" size="10" disabled="disabled">
+        <input type="hidden" name="date_creation" value="{$DATE_CREATION}">
+        <label>
+          <i class="icon-calendar"></i>
+          <input type="text" data-datepicker="date_creation" readonly>
+        </label>
       </div>
     </div>
 
diff --git a/admin/themes/default/template/batch_manager_unit.tpl b/admin/themes/default/template/batch_manager_unit.tpl
index c2137bead..e282a5e0b 100644
--- a/admin/themes/default/template/batch_manager_unit.tpl
+++ b/admin/themes/default/template/batch_manager_unit.tpl
@@ -48,6 +48,20 @@ tagsCache.get(function(tags) {
     }, this));
   });
 });
+
+{* <!-- DATEPICKER --> *}
+jQuery(function(){ {* <!-- onLoad needed to wait localization loads --> *}
+  jQuery('[data-datepicker]').pwgDatepicker();
+});
+
+{* <!-- THUMBNAILS --> *}
+$(".elementEdit img")
+  .css("opacity", 0.6) // Opacity on page load
+  .hover(function(){
+    $(this).fadeTo("slow", 1.0); // Opacity on hover
+  },function(){
+    $(this).fadeTo("slow", 0.6); // Opacity on mouseout
+  });
 }());
 {/footer_script}
 
@@ -94,28 +108,12 @@ tagsCache.get(function(tags) {
     <tr>
       <td><strong>{'Creation date'|@translate}</strong></td>
       <td>
-        <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 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 id="date_creation_month-{$element.id}" name="date_creation_month-{$element.id}">
-          {html_options options=$month_list selected=$element.DATE_CREATION_MONTH}
-        </select>
-        <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 id="date_creation_linked_date-{$element.id}" name="date_creation_linked_date-{$element.id}" type="hidden" size="10" disabled="disabled">
-        {footer_script}
-          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}");
-        {/footer_script}
+        <input type="hidden" name="date_creation-{$element.id}" value="{$element.DATE_CREATION}">
+        <label>
+          <i class="icon-calendar"></i>
+          <input type="text" data-datepicker="date_creation-{$element.id}" data-datepicker-unset="date_creation_unset-{$element.id}" readonly>
+        </label>
+        <a href="#" class="icon-cancel-circled" id="date_creation_unset-{$element.id}">{'unset'|translate}</a>
       </td>
     </tr>
     <tr>
@@ -153,16 +151,4 @@ tagsCache.get(function(tags) {
 </p>
 {/if}
 
-</form>
-
-{footer_script}
-{literal}$(document).ready(function() {
-	$(".elementEdit img")
-		.fadeTo("slow", 0.6) // Opacity on page load
-		.hover(function(){
-			$(this).fadeTo("slow", 1.0); // Opacity on hover
-		},function(){
-   		$(this).fadeTo("slow", 0.6); // Opacity on mouseout
-		});
-});{/literal}
-{/footer_script}
+</form>
\ No newline at end of file
diff --git a/admin/themes/default/template/history.tpl b/admin/themes/default/template/history.tpl
index 3fe4e738d..fcdc67d8b 100644
--- a/admin/themes/default/template/history.tpl
+++ b/admin/themes/default/template/history.tpl
@@ -1,10 +1,11 @@
 
 {include file='include/datepicker.inc.tpl'}
 
-{footer_script}{literal}
-	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);
-{/literal}{/footer_script}
+{footer_script}
+jQuery(function(){ {* <!-- onLoad needed to wait localization loads --> *}
+  jQuery('[data-datepicker]').pwgDatepicker();
+});
+{/footer_script}
 
 <h2>{'History'|@translate} {$TABSHEET_TITLE}</h2>
 
@@ -14,33 +15,25 @@
   <ul>
     <li><label>{'Date'|@translate}</label></li>
     <li>
-      <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 id="start_month" name="start_month">
-      {html_options options=$month_list selected=$START_MONTH_SELECTED}
-      </select>
-      <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">
+      <input type="hidden" name="start" value="{$START}">
+      <label>
+        <i class="icon-calendar"></i>
+        <input type="text" data-datepicker="start" data-datepicker-end="end" data-datepicker-unset="start_unset" readonly>
+      </label>
+      <br>
+      <a href="#" class="icon-cancel-circled" id="start_unset">{'unset'|translate}</a>
     </li>
   </ul>
   <ul>
     <li><label>{'End-Date'|@translate}</label></li>
     <li>
-      <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 id="end_month" name="end_month">
-      {html_options options=$month_list selected=$END_MONTH_SELECTED}
-      </select>
-      <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">
+      <input type="hidden" name="end" value="{$END}">
+      <label>
+        <i class="icon-calendar"></i>
+        <input type="text" data-datepicker="end" data-datepicker-start="start" data-datepicker-unset="end_unset" readonly>
+      </label>
+      <br>
+      <a href="#" class="icon-cancel-circled" id="end_unset">{'unset'|translate}</a>
     </li>
   </ul>
 
diff --git a/admin/themes/default/template/include/datepicker.inc.tpl b/admin/themes/default/template/include/datepicker.inc.tpl
index d34994d3b..d8202703d 100644
--- a/admin/themes/default/template/include/datepicker.inc.tpl
+++ b/admin/themes/default/template/include/datepicker.inc.tpl
@@ -1,4 +1,4 @@
-{combine_script id='datepicker.js' load='footer' require='jquery.ui.datepicker' path='themes/default/js/datepicker.js'}
+{combine_script id='datepicker.js' load='footer' require='jquery.ui.datepicker' path='admin/themes/default/js/datepicker.js'}
 
 {assign var="datepicker_language" value="themes/default/js/ui/i18n/jquery.ui.datepicker-`$lang_info.code`.js"}
 
@@ -6,13 +6,4 @@
 {combine_script id="jquery.ui.datepicker-$lang_info.code" load='footer' path=$datepicker_language}
 {/if}
 
-{combine_css path="themes/default/js/ui/theme/jquery.ui.datepicker.css"}
-
-{footer_script require='jquery.ui.datepicker,datepicker.js'}
-function pwg_initialization_datepicker(day, month, year, linked_date, checked_on_change, min_linked_date, max_linked_date)
-{ldelim}
-  return pwg_common_initialization_datepicker(
-    "{$ROOT_URL}{$themeconf.admin_icon_dir}/datepicker.png",
-    day, month, year, linked_date, checked_on_change, min_linked_date, max_linked_date);
-};
-{/footer_script}
+{combine_css path="themes/default/js/ui/theme/jquery.ui.datepicker.css"}
\ No newline at end of file
diff --git a/admin/themes/default/template/picture_modify.tpl b/admin/themes/default/template/picture_modify.tpl
index 50392f7ab..99a53b247 100644
--- a/admin/themes/default/template/picture_modify.tpl
+++ b/admin/themes/default/template/picture_modify.tpl
@@ -76,7 +76,9 @@ tagsCache.get(function(tags) {
 });
 
 {* <!-- DATEPICKER --> *}
-pwg_initialization_datepicker("#date_creation_day", "#date_creation_month", "#date_creation_year", "#date_creation_linked_date", "#date_creation_action_set");
+jQuery(function(){ {* <!-- onLoad needed to wait localization loads --> *}
+  jQuery('[data-datepicker]').pwgDatepicker();
+});
 }());
 {/footer_script}
 
@@ -138,21 +140,13 @@ pwg_initialization_datepicker("#date_creation_day", "#date_creation_month", "#da
     <p>
       <strong>{'Creation date'|@translate}</strong>
       <br>
-      <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 id="date_creation_month" name="date_creation_month">
-        {html_options options=$month_list selected=$DATE_CREATION_MONTH_VALUE}
-      </select>
-
-      <input id="date_creation_year" name="date_creation_year" type="text" size="4" maxlength="4" value="{$DATE_CREATION_YEAR_VALUE}">
-      <input id="date_creation_linked_date" name="date_creation_linked_date" type="hidden" size="10" disabled="disabled">
-      <input name="date_creation_time" type="hidden" value="{$DATE_CREATION_TIME_VALUE}">
-      <a href="#" id="unset_date_creation" style="display:none">unset</a>
+      <input type="hidden" name="date_creation_time" value="{$DATE_CREATION_TIME}">
+      <input type="hidden" name="date_creation" value="{$DATE_CREATION}">
+      <label>
+        <i class="icon-calendar"></i>
+        <input type="text" data-datepicker="date_creation" data-datepicker-unset="date_creation_unset" readonly>
+      </label>
+      <a href="#" class="icon-cancel-circled" id="date_creation_unset">{'unset'|translate}</a>
     </p>
 
     <p>