aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorrub <rub@piwigo.org>2008-10-10 21:41:07 +0000
committerrub <rub@piwigo.org>2008-10-10 21:41:07 +0000
commit5f8b608b54699429dcbc21dd45a0d2ee6d9b5584 (patch)
tree2a89d1aae58e18c5f8daa62d756e0a5e1f894fb1
parent547a85d56bb4f3cc8f4412407054f2cd81e637e4 (diff)
jQuery Datepicker:
Move code source to template-common in order to use datepicker on version after butterfly git-svn-id: http://piwigo.org/svn/trunk@2704 68402e56-0260-453c-a942-63ccdbb3a9ee
-rw-r--r--admin/template/goto/include/datepicker.inc.tpl187
-rw-r--r--template-common/datepicker.js191
-rw-r--r--template/yoga/default-layout.css7
-rw-r--r--template/yoga/icon/datepicker.pngbin0 -> 1047 bytes
-rw-r--r--template/yoga/include/datepicker.inc.tpl19
-rw-r--r--template/yoga/search.tpl17
-rw-r--r--template/yoga/theme/Sylvia/icon/datepicker.pngbin0 -> 430 bytes
7 files changed, 236 insertions, 185 deletions
diff --git a/admin/template/goto/include/datepicker.inc.tpl b/admin/template/goto/include/datepicker.inc.tpl
index 4b3f4214c..812bf9632 100644
--- a/admin/template/goto/include/datepicker.inc.tpl
+++ b/admin/template/goto/include/datepicker.inc.tpl
@@ -3,194 +3,17 @@
{known_script id="jquery.ui" src=$ROOT_URL|@cat:"template-common/lib/ui/ui.core.packed.js"}
{known_script id="jquery.ui.datepicker" src=$ROOT_URL|@cat:"template-common/lib/ui/ui.datepicker.packed.js"}
{known_script id="jquery.ui.datepicker-$lang_info.code" src=$ROOT_URL|@cat:"template-common/lib/ui/i18n/ui.datepicker-"|@cat:$lang_info.code|@cat:".js"}
+{known_script id="datepicker.js" src=$ROOT_URL|@cat:"template-common/datepicker.js"}
{html_head}
<link rel="stylesheet" type="text/css" href="{$ROOT_URL}template-common/lib/ui/ui.datepicker.css">
{/html_head}
-{literal}
<script type="text/javascript">
-// return formated date with control values
-// day, month, year: selectors of visible date controls
-function pwg_get_fmt_datepicker(day, month, year)
-{
- return $(year).val() + "-" + $(month).val() + "-" + $(day).val();
-}
-
-// 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, 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");
- }
- }
-
- // In order to desable element of list
- function pwg_disabled_selection()
- {
- array_date = $(linked_date).val().split('-');
- y = array_date[0];
- m = array_date[1];
-
- // Init list
- $(day + " option").attr("disabled", "");
- $(month + " option").attr("disabled", "");
-
- var daysInMonth = 32 - new Date(y, m - 1, 32).getDate();
- $(day + " option:gt(" + (daysInMonth) +")").attr("disabled", "disabled");
-
- if ((min_linked_date != null) && ($(min_linked_date).datepicker("getDate") != null))
- {
- date_cmp = min_linked_date;
- op_cmp = "lt";
- }
- else if ((max_linked_date != null) && ($(max_linked_date).datepicker("getDate") != null))
- {
- date_cmp = max_linked_date;
- op_cmp = "gt";
- }
- else
- {
- date_cmp = null;
- op_cmp = null;
- }
-
- if (op_cmp != null)
- {
- array_date = $(date_cmp).val().split('-');
- y_cmp = array_date[0];
- m_cmp = array_date[1];
- d_cmp = array_date[2];
-
- if (y == y_cmp)
- {
- $(month + " option:" + op_cmp + "(" + (m_cmp) +")").attr("disabled", "disabled");
- if (op_cmp == "lt")
- {
- $(month + " option:eq(" + (0) +")").attr("disabled", "");
- }
-
- if (m == m_cmp)
- {
- $(day + " option:" + op_cmp + "(" + (d_cmp) +")").attr("disabled", "disabled");
- if (op_cmp == "lt")
- {
- $(day + " option:eq(" + (0) +")").attr("disabled", "");
- }
- }
- }
- }
- }
-
- // Prevent selection of invalid dates through the select controls
- function pwg_check_date()
- {
- last_date = $(linked_date).val();
-
- $(linked_date).val(pwg_get_fmt_datepicker(day, month, year));
-
- if ((min_linked_date != null) && ($(min_linked_date).datepicker("getDate") != null))
- {
- cancel = ($(min_linked_date).datepicker("getDate") > $(linked_date).datepicker("getDate"));
- }
- else if ((max_linked_date != null) && ($(max_linked_date).datepicker("getDate") != null))
- {
- cancel = ($(max_linked_date).datepicker("getDate") < $(linked_date).datepicker("getDate"));
- }
- else
- {
- cancel = false;
- }
-
- if (cancel)
- {
- array_date = last_date.split('-');
- $(year).val(array_date[0]);
- $(month).val(array_date[1]);
- $(day).val(array_date[2]);
- // check again
- pwg_check_date();
- }
- }
-
- jQuery().ready(function(){
- // Init hidden value
- $(linked_date).val(pwg_get_fmt_datepicker(day, month, year));
-
- // Init Datepicker
- jQuery(linked_date).datepicker({
- dateFormat:'yy-m-d',
- beforeShow:
- // Prepare to show a date picker linked to three select controls
- function readLinked(input) {
- //$(linked_date).val(pwg_get_fmt_datepicker(day, month, year));
- if (min_linked_date != null)
- {
- return {minDate: $(min_linked_date).datepicker("getDate")};
- }
- else if (max_linked_date != null)
- {
- return {maxDate: $(max_linked_date).datepicker("getDate")};
- }
- else
- {
- return {};
- }
- },
- onSelect:
- // Update three select controls to match a date picker selection
- function updateLinked(date) {
- if (date.length == 0)
- {
- $(year).val("");
- $(month).val("0");
- $(day).val("0");
- }
- else
- {
- array_date = date.split('-');
- $(year).val(array_date[0]);
- $(month).val(array_date[1]);
- $(day).val(array_date[2]);
- }
- pwg_on_date_change();
- },
- showOn: "both",
-{/literal}
- buttonImage: "{$ROOT_URL}admin/template/{$themeconf.template}/icon/datepicker.png",
-{literal}
- buttonImageOnly: true,
- buttonText: ""
- });
-
- // Check showed controls
- jQuery(day + ", " + month + ", " + year).change(
- function ()
- {
- pwg_on_date_change();
- });
-
- // Check showed controls
- jQuery(day + ", " + month + ", " + year).focus(
- function ()
- {
- pwg_disabled_selection();
- });
-
- // In order to init linked input
- pwg_check_date();
- });
-
+{ldelim}
+ return pwg_common_initialization_datepicker(
+ "{$ROOT_URL}admin/template/{$themeconf.template}/icon/datepicker.png",
+ day, month, year, linked_date, checked_on_change, min_linked_date, max_linked_date);
}
</script>
-{/literal}
diff --git a/template-common/datepicker.js b/template-common/datepicker.js
new file mode 100644
index 000000000..743cf65cd
--- /dev/null
+++ b/template-common/datepicker.js
@@ -0,0 +1,191 @@
+// initialize controls
+// buttonImageName: Directory and name of calendar picture
+// 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_common_initialization_datepicker(buttonImageName, day, month, year, linked_date, checked_on_change, min_linked_date, max_linked_date)
+{
+ // return formated date with control values
+ function pwg_get_fmt_from_ctrls()
+ {
+ return $(year).val() + "-" + $(month).val() + "-" + $(day).val();
+ }
+
+ // return if linked_date is valid date
+ function is_valid_linked_value(linked_date_name)
+ {
+ array_date = $(linked_date_name).val().split('-');
+ return (
+ (array_date.length == 3) &&
+ (array_date[0] != "") &&
+ (array_date[1] != "") && (array_date[1] != "0") &&
+ (array_date[2] != "") && (array_date[2] != "0")
+ )
+ }
+
+ // Action on change date value
+ function pwg_on_date_change()
+ {
+ pwg_check_date();
+ if (checked_on_change != null)
+ {
+ $(checked_on_change).attr("checked", "true");
+ }
+ }
+
+ // In order to desable element of list
+ function pwg_disabled_selection()
+ {
+ array_date = $(linked_date).val().split('-');
+ y = array_date[0];
+ m = array_date[1];
+
+ // Init list
+ $(day + " option").attr("disabled", "");
+ $(month + " option").attr("disabled", "");
+
+ var daysInMonth = 32 - new Date(y, m - 1, 32).getDate();
+ $(day + " option:gt(" + (daysInMonth) +")").attr("disabled", "disabled");
+
+ if ((min_linked_date != null) && (is_valid_linked_value(min_linked_date) == true))
+ {
+ date_cmp = min_linked_date;
+ op_cmp = "lt";
+ }
+ else if ((max_linked_date != null) && (is_valid_linked_value(max_linked_date) == true))
+ {
+ date_cmp = max_linked_date;
+ op_cmp = "gt";
+ }
+ else
+ {
+ date_cmp = null;
+ op_cmp = null;
+ }
+
+ if (op_cmp != null)
+ {
+ array_date = $(date_cmp).val().split('-');
+ y_cmp = array_date[0];
+ m_cmp = array_date[1];
+ d_cmp = array_date[2];
+
+ if (y == y_cmp)
+ {
+ $(month + " option:" + op_cmp + "(" + (m_cmp) +")").attr("disabled", "disabled");
+ if (op_cmp == "lt")
+ {
+ $(month + " option:eq(" + (0) +")").attr("disabled", "");
+ }
+
+ if (m == m_cmp)
+ {
+ $(day + " option:" + op_cmp + "(" + (d_cmp) +")").attr("disabled", "disabled");
+ if (op_cmp == "lt")
+ {
+ $(day + " option:eq(" + (0) +")").attr("disabled", "");
+ }
+ }
+ }
+ }
+ }
+
+ // Prevent selection of invalid dates through the select controls
+ function pwg_check_date()
+ {
+ last_date = $(linked_date).val();
+
+ $(linked_date).val(pwg_get_fmt_from_ctrls());
+
+ if ((min_linked_date != null) && (is_valid_linked_value(min_linked_date)))
+ {
+ cancel = ($(min_linked_date).datepicker("getDate") > $(linked_date).datepicker("getDate"));
+ }
+ else if ((max_linked_date != null) && (is_valid_linked_value(max_linked_date)))
+ {
+ cancel = ($(max_linked_date).datepicker("getDate") < $(linked_date).datepicker("getDate"));
+ }
+ else
+ {
+ cancel = false;
+ }
+
+ if (cancel)
+ {
+ array_date = last_date.split('-');
+ $(year).val(array_date[0]);
+ $(month).val(array_date[1]);
+ $(day).val(array_date[2]);
+ // check again
+ pwg_check_date();
+ }
+ }
+
+ jQuery().ready(function(){
+ // Init hidden value
+ $(linked_date).val(pwg_get_fmt_from_ctrls());
+
+ // Init Datepicker
+ jQuery(linked_date).datepicker({
+ dateFormat:'yy-m-d',
+ beforeShow:
+ // Prepare to show a date picker linked to three select controls
+ function readLinked(input) {
+ if (min_linked_date != null)
+ {
+ return {minDate: $(min_linked_date).datepicker("getDate")};
+ }
+ else if (max_linked_date != null)
+ {
+ return {maxDate: $(max_linked_date).datepicker("getDate")};
+ }
+ else
+ {
+ return {};
+ }
+ },
+ onSelect:
+ // Update three select controls to match a date picker selection
+ function updateLinked(date) {
+ if (date.length == 0)
+ {
+ $(year).val("");
+ $(month).val("0");
+ $(day).val("0");
+ }
+ else
+ {
+ array_date = date.split('-');
+ $(year).val(array_date[0]);
+ $(month).val(array_date[1]);
+ $(day).val(array_date[2]);
+ }
+ pwg_on_date_change();
+ },
+ showOn: "both",
+ buttonImage: buttonImageName,
+ buttonImageOnly: true,
+ buttonText: ""
+ });
+
+ // Check showed controls
+ jQuery(day + ", " + month + ", " + year).change(
+ function ()
+ {
+ pwg_on_date_change();
+ });
+
+ // Check showed controls
+ jQuery(day + ", " + month + ", " + year).focus(
+ function ()
+ {
+ pwg_disabled_selection();
+ });
+
+ // In order to init linked input
+ pwg_check_date();
+ });
+
+}
diff --git a/template/yoga/default-layout.css b/template/yoga/default-layout.css
index 924e901c9..f7b102a96 100644
--- a/template/yoga/default-layout.css
+++ b/template/yoga/default-layout.css
@@ -275,4 +275,9 @@ TABLE.tagLetterContent {
#theHeader {text-align: center;}
#theNotificationPage dl,
-#thePopuphelpPage dl { margin: 0 25px 25px; } \ No newline at end of file
+#thePopuphelpPage dl { margin: 0 25px 25px; }
+
+/* jQuery datepicker */
+img.ui-datepicker-trigger {
+ cursor : pointer;
+}
diff --git a/template/yoga/icon/datepicker.png b/template/yoga/icon/datepicker.png
new file mode 100644
index 000000000..bbb299207
--- /dev/null
+++ b/template/yoga/icon/datepicker.png
Binary files differ
diff --git a/template/yoga/include/datepicker.inc.tpl b/template/yoga/include/datepicker.inc.tpl
new file mode 100644
index 000000000..871be0ea6
--- /dev/null
+++ b/template/yoga/include/datepicker.inc.tpl
@@ -0,0 +1,19 @@
+{* $Id$ *}
+{known_script id="jquery" src=$ROOT_URL|@cat:"template-common/lib/jquery.packed.js"}
+{known_script id="jquery.ui" src=$ROOT_URL|@cat:"template-common/lib/ui/ui.core.packed.js"}
+{known_script id="jquery.ui.datepicker" src=$ROOT_URL|@cat:"template-common/lib/ui/ui.datepicker.packed.js"}
+{known_script id="jquery.ui.datepicker-$lang_info.code" src=$ROOT_URL|@cat:"template-common/lib/ui/i18n/ui.datepicker-"|@cat:$lang_info.code|@cat:".js"}
+{known_script id="datepicker.js" src=$ROOT_URL|@cat:"template-common/datepicker.js"}
+
+{html_head}
+<link rel="stylesheet" type="text/css" href="{$ROOT_URL}template-common/lib/ui/ui.datepicker.css">
+{/html_head}
+
+<script type="text/javascript">
+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.icon_dir}/datepicker.png",
+ day, month, year, linked_date, checked_on_change, min_linked_date, max_linked_date);
+}
+</script>
diff --git a/template/yoga/search.tpl b/template/yoga/search.tpl
index 4f6ba4455..8562cac3d 100644
--- a/template/yoga/search.tpl
+++ b/template/yoga/search.tpl
@@ -1,4 +1,17 @@
{* $Id$ *}
+
+{* Example of datepicker
+{include file='include/datepicker.inc.tpl'}
+
+{literal}
+<script type="text/javascript">
+ 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);
+ jQuery().ready(function(){ $(".date_today").hide(); });
+</script>
+{/literal}
+*}
+
<div id="content" class="content">
<div class="titrePage">
@@ -74,7 +87,7 @@
<input id="start_linked_date" name="start_linked_date" type="hidden" size="10" disabled="disabled"/>
</li>
<li>
- <a href="#" onClick="document.search.start_day.value={$smarty.now|date_format:"%d"};document.search.start_month.value={$smarty.now|date_format:"%m"};document.search.start_year.value={$smarty.now|date_format:"%Y"};return false;">{'today'|@translate}</a>
+ <a class="date_today" href="#" onClick="document.search.start_day.value={$smarty.now|date_format:"%d"};document.search.start_month.value={$smarty.now|date_format:"%m"};document.search.start_year.value={$smarty.now|date_format:"%Y"};return false;">{'today'|@translate}</a>
</li>
</ul>
<ul>
@@ -93,7 +106,7 @@
<input id="end_linked_date" name="end_linked_date" type="hidden" size="10" disabled="disabled"/>
</li>
<li>
- <a href="#" onClick="document.search.end_day.value={$smarty.now|date_format:"%d"};document.search.end_month.value={$smarty.now|date_format:"%m"};document.search.end_year.value={$smarty.now|date_format:"%Y"};return false;">{'today'|@translate}</a>
+ <a class="date_today" href="#" onClick="document.search.end_day.value={$smarty.now|date_format:"%d"};document.search.end_month.value={$smarty.now|date_format:"%m"};document.search.end_year.value={$smarty.now|date_format:"%Y"};return false;">{'today'|@translate}</a>
</li>
</ul>
</fieldset>
diff --git a/template/yoga/theme/Sylvia/icon/datepicker.png b/template/yoga/theme/Sylvia/icon/datepicker.png
new file mode 100644
index 000000000..3d0e015f6
--- /dev/null
+++ b/template/yoga/theme/Sylvia/icon/datepicker.png
Binary files differ