[geeklog-hg] geeklog: Added jQuery UI datepicker to make the order of day/mon...
geeklog-cvs at lists.geeklog.net
geeklog-cvs at lists.geeklog.net
Mon Jan 21 08:25:44 EST 2013
changeset 8923:d89701cc9d65
url: http://project.geeklog.net/cgi-bin/hgwebdir.cgi/geeklog/rev/d89701cc9d65
user: Kenji ITO <mystralkk at gmail.com>
date: Mon Jan 21 22:23:52 2013 +0900
description:
Added jQuery UI datepicker to make the order of day/month/year dropdowns less important in the event editor of the Calendar plugin
diffstat:
plugins/calendar/functions.inc | 17 ++-
public_html/admin/plugins/calendar/index.php | 17 ++-
public_html/admin/story.php | 26 ++-
public_html/javascript/datepicker.js | 171 +++++++++++++++++++++++++++
public_html/javascript/story_editor.js | 101 ---------------
5 files changed, 219 insertions(+), 113 deletions(-)
diffs (truncated from 383 to 300 lines):
diff -r 6385daa3fceb -r d89701cc9d65 plugins/calendar/functions.inc
--- a/plugins/calendar/functions.inc Sun Jan 20 22:27:48 2013 +0900
+++ b/plugins/calendar/functions.inc Mon Jan 21 22:23:52 2013 +0900
@@ -684,7 +684,7 @@
*/
function plugin_submit_calendar($mode = 'master')
{
- global $_CONF, $_CA_CONF, $LANG_CAL_1, $LANG12;
+ global $_CONF, $_CA_CONF, $LANG_CAL_1, $LANG12, $_SCRIPTS;
if (isset($_POST['calendar_type'])) {
$mode = $_POST['calendar_type'];
@@ -732,6 +732,21 @@
exit;
}
// otherwise non-admin or admin-personal. do personal form or public submission.
+
+ // Loads jQuery UI datepicker
+ $_SCRIPTS->setJavaScriptLibrary('jquery.ui.datepicker');
+ $_SCRIPTS->setJavaScriptFile('datepicker', '/javascript/datepicker.js');
+
+ $langCode = COM_getLangIso639Code();
+ $toolTip = 'Click and select a date'; // Should be translated
+ $imgUrl = $_CONF['site_url'] . '/images/calendar.png';
+
+ $_SCRIPTS->setJavaScript(
+ "jQuery(function () {"
+ . " geeklog.datepicker.set('start', '{$langCode}', '{$toolTip}', '{$imgUrl}');"
+ . " geeklog.datepicker.set('end', '{$langCode}', '{$toolTip}', '{$imgUrl}');"
+ . "});", TRUE, TRUE
+ );
$retval = '';
diff -r 6385daa3fceb -r d89701cc9d65 public_html/admin/plugins/calendar/index.php
--- a/public_html/admin/plugins/calendar/index.php Sun Jan 20 22:27:48 2013 +0900
+++ b/public_html/admin/plugins/calendar/index.php Mon Jan 21 22:23:52 2013 +0900
@@ -76,7 +76,22 @@
{
global $_CONF, $_GROUPS, $_TABLES, $_USER, $_CA_CONF, $LANG_CAL_1,
$LANG_CAL_ADMIN, $LANG10, $LANG12, $LANG_ACCESS, $LANG_ADMIN,
- $MESSAGE;
+ $MESSAGE, $_SCRIPTS;
+
+ // Loads jQuery UI datepicker
+ $_SCRIPTS->setJavaScriptLibrary('jquery.ui.datepicker');
+ $_SCRIPTS->setJavaScriptFile('datepicker', '/javascript/datepicker.js');
+
+ $langCode = COM_getLangIso639Code();
+ $toolTip = 'Click and select a date'; // Should be translated
+ $imgUrl = $_CONF['site_url'] . '/images/calendar.png';
+
+ $_SCRIPTS->setJavaScript(
+ "jQuery(function () {"
+ . " geeklog.datepicker.set('start', '{$langCode}', '{$toolTip}', '{$imgUrl}');"
+ . " geeklog.datepicker.set('end', '{$langCode}', '{$toolTip}', '{$imgUrl}');"
+ . "});", TRUE, TRUE
+ );
$retval = '';
diff -r 6385daa3fceb -r d89701cc9d65 public_html/admin/story.php
--- a/public_html/admin/story.php Sun Jan 20 22:27:48 2013 +0900
+++ b/public_html/admin/story.php Mon Jan 21 22:23:52 2013 +0900
@@ -719,19 +719,25 @@
}
$fileinputs .= $LANG24[28] . '<br' . XHTML . '>';
}
-
+
// Add JavaScript
+ $_SCRIPTS->setJavaScriptFile('story_editor', '/javascript/story_editor.js');
+
+ // Loads jQuery UI datepicker
+ $_SCRIPTS->setJavaScriptLibrary('jquery.ui.datepicker');
+ $_SCRIPTS->setJavaScriptFile('datepicker', '/javascript/datepicker.js');
+
+ $langCode = COM_getLangIso639Code();
+ $toolTip = 'Click and select a date'; // Should be translated
+ $imgUrl = $_CONF['site_url'] . '/images/calendar.png';
+
$_SCRIPTS->setJavaScript(
- "var geeklog = { siteUrl: '" . $_CONF['site_url'] . "', "
- . ' lang: { '
- . " calendar: '" . 'Click and select a date' . "'," // Should be translated
- . " code: '" . COM_getLangIso639Code() . "'"
- . ' }'
- . ' };',
- TRUE
+ "jQuery(function () {"
+ . " geeklog.datepicker.set('publish', '{$langCode}', '{$toolTip}', '{$imgUrl}');"
+ . " geeklog.datepicker.set('expire', '{$langCode}', '{$toolTip}', '{$imgUrl}');"
+ . " geeklog.datepicker.set('cmt_close', '{$langCode}', '{$toolTip}', '{$imgUrl}');"
+ . "});", TRUE, TRUE
);
- $_SCRIPTS->setJavaScriptFile('story_editor', '/javascript/story_editor.js');
- $_SCRIPTS->setJavaScriptLibrary('jquery.ui.datepicker');
if ($advanced_editormode) {
$_SCRIPTS->setJavaScriptFile('fckeditor','/fckeditor/fckeditor.js');
diff -r 6385daa3fceb -r d89701cc9d65 public_html/javascript/datepicker.js
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/public_html/javascript/datepicker.js Mon Jan 21 22:23:52 2013 +0900
@@ -0,0 +1,171 @@
+/* Reminder: always indent with 4 spaces (no tabs). */
+// +---------------------------------------------------------------------------+
+// | Geeklog 2.0 |
+// +---------------------------------------------------------------------------+
+// | jQuery UI datepicker utility |
+// +---------------------------------------------------------------------------+
+// | Copyright (C) 2013 by the following authors: |
+// | |
+// | Kenji ITO - mystralkk AT gmail DOT com |
+// +---------------------------------------------------------------------------+
+// | |
+// | This program is free software; you can redistribute it and/or |
+// | modify it under the terms of the GNU General Public License |
+// | as published by the Free Software Foundation; either version 2 |
+// | of the License, or (at your option) any later version. |
+// | |
+// | This program is distributed in the hope that it will be useful, |
+// | but WITHOUT ANY WARRANTY; without even the implied warranty of |
+// | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
+// | GNU General Public License for more details. |
+// | |
+// | You should have received a copy of the GNU General Public License |
+// | along with this program; if not, write to the Free Software Foundation, |
+// | Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. |
+// | |
+// +---------------------------------------------------------------------------+
+
+if (!window.jQuery) {
+ throw 'jQuery is not loaded';
+}
+
+var geeklog;
+
+geeklog = geeklog || {};
+
+geeklog.datepicker = {
+ /**
+ * Returns a date from the year/month/day dropdowns
+ *
+ * @param string selectorName the common part of dropdown names
+ * @return string the selected date ("YYYY-MM-DD")
+ */
+ getDateFromSelectors: function (selectorName) {
+ var y = $("select[name='" + selectorName + "_year']").val(),
+ m = '0' + $("select[name='" + selectorName + "_month']").val(),
+ d = '0' + $("select[name='" + selectorName + "_day']").val();
+
+ m = m.substr(m.length - 2, 2);
+ d = d.substr(d.length - 2, 2);
+
+ return y + '-' + m + '-' + d; // YYYY-MM-DD
+ },
+
+ /**
+ * Converts ISO-639-1 code to that used in jQuery UI datepicker
+ *
+ * @param string langCode language code (in ISO-639-1)
+ * @return string language code (in jQuery UI)
+ */
+ fixLangCode: function (langCode) {
+ switch (langCode) {
+ case 'en':
+ langCode = 'en-GB';
+ break;
+
+ case 'fr-ca':
+ langCode = 'fr';
+ break;
+
+ case 'nb':
+ langCode = 'no';
+ break;
+
+ case 'pt-br':
+ langCode = 'pt-BR';
+ break;
+
+ case 'zh-cn':
+ langCode = 'zh-CN';
+ break;
+
+ case 'zh':
+ langCode = 'zh-TW';
+ break;
+ }
+
+ return langCode;
+ },
+
+ /**
+ * Adds a jQuery UI datepicker to year/month/day dropdowns
+ *
+ * The dropdowns must be named like '{common_part}_year', '{common_part}_month',
+ * '{common_part}_day'.
+ *
+ * @param string selectorName the common part of dropdown names
+ * @param string langCode ISO-639-1 language code
+ * @param string toolTip a tooltip string when the mouse cursor
+ * is over the calendar icon
+ * @param string imgUrl the URL of a calendar icon
+ * @return (void)
+ */
+ set: function (selectorName, langCode, toolTip, imgUrl) {
+ var $ = jQuery, inputId;
+
+ // Checks parameters
+ if (!selectorName) {
+ throw 'Selector name must not be empty';
+ }
+
+ if (!imgUrl) {
+ throw 'Image URL must not be empty';
+ }
+
+ langCode = langCode || 'en';
+ toolTip = toolTip || 'Click to select a date';
+
+ // Fixes language code for jQuery UI
+ langCode = this.fixLangCode(langCode);
+
+ // Set default options for datepickers
+ $.datepicker.setDefaults({
+ autoSize: true,
+ buttonImage: imgUrl,
+ buttonImageOnly: true,
+ buttonText: toolTip,
+ dateFormat: 'yy-mm-dd',
+ showOn: 'button'
+ });
+
+ // Creates an invisible input field for a datepicker
+ inputId = selectorName + '_value_hidden';
+ $("select[name='" + selectorName + "_month']")
+ .before('<span> </span><input type="text" id="' + inputId + '" style="display: none;" value="' + this.getDateFromSelectors(selectorName) + '" /> ');
+
+ // Attaches a datepicker to the input field
+ $('#' + inputId).datepicker();
+
+ // Sets default locale
+ $.datepicker.setDefaults($.datepicker.regional[langCode]);
+
+ // Resets date format to 'YYYY-MM-DD'
+ $.datepicker.setDefaults({
+ dateFormat: 'yy-mm-dd'
+ });
+
+ // When a date is selected, then it is reflected back to the selectors
+ $('#' + inputId).change(function () {
+ var inputId = $(this).attr('id');
+ var selectorName = inputId.substr(0, inputId.indexOf('_value_hidden'));
+ var d = $(this).val();
+
+ $("select[name='" + selectorName + "_month']").val(parseInt(d.substr(5, 2), 10));
+ $("select[name='" + selectorName + "_year']").val(parseInt(d.substr(0, 4)), 10);
+ $("select[name='" + selectorName + "_day']").val(d.substr(8, 2));
+ });
+
+ // When the month, day or year selectors is changed, then their values
+ // are reflected back to the input field
+ $("select[name^='" + selectorName + "_']").change(function () {
+ var selectorName = $(this).attr('name'),
+ inputId, d;
+
+ selectorName = selectorName.substr(0, selectorName.lastIndexOf('_'));
+ inputId = selectorName + '_value_hidden';
+ d = geeklog.datepicker.getDateFromSelectors(selectorName);
+ $('#' + inputId).val(d);
+ $('#' + inputId).datepicker('setDate', d);
+ });
+ }
+};
diff -r 6385daa3fceb -r d89701cc9d65 public_html/javascript/story_editor.js
--- a/public_html/javascript/story_editor.js Sun Jan 20 22:27:48 2013 +0900
+++ b/public_html/javascript/story_editor.js Mon Jan 21 22:23:52 2013 +0900
@@ -160,104 +160,3 @@
editorInstance.ToolbarSet.Expand() ;
}
*/
-
-// Adds jQuery UI datepicker to year/month/day selectors
-jQuery(function () {
- var $ = jQuery,
- names = ['publish', 'expire', 'cmt_close'],
- name,
- imgUrl = geeklog.siteUrl + '/images/calendar.png',
- title = geeklog.lang.calendar,
- langCode = geeklog.lang.code,
- i, len, inputName, timeStamp;
-
- var getTimeStampFromSelectors = function (name) {
- var y = $("select[name='" + name + "_year']").val(),
- m = '0' + $("select[name='" + name + "_month']").val(),
- d = $("select[name='" + name + "_day']").val();
-
- m = m.substr(m.length - 2, 2);
-
More information about the geeklog-cvs
mailing list