From 275e810c5f062721d8477a484cd2e4a0c2358da9 Mon Sep 17 00:00:00 2001 From: mistic100 Date: Sun, 22 Jun 2014 12:44:43 +0000 Subject: feature 3080: add cancel button, one minute granularity, fix missing css git-svn-id: http://piwigo.org/svn/trunk@28765 68402e56-0260-453c-a942-63ccdbb3a9ee --- admin/themes/default/js/datepicker.js | 64 ++++++++++++++++------ .../default/template/batch_manager_global.tpl | 5 +- .../themes/default/template/batch_manager_unit.tpl | 5 +- .../default/template/include/datepicker.inc.tpl | 1 + admin/themes/default/template/picture_modify.tpl | 5 +- 5 files changed, 59 insertions(+), 21 deletions(-) (limited to 'admin/themes/default') diff --git a/admin/themes/default/js/datepicker.js b/admin/themes/default/js/datepicker.js index 2a421c967..0b898a291 100644 --- a/admin/themes/default/js/datepicker.js +++ b/admin/themes/default/js/datepicker.js @@ -1,25 +1,32 @@ jQuery.timepicker.log = jQuery.noop; // that's ugly, but the timepicker is acting weird and throws parsing errors -jQuery.fn.pwgDatepicker = function(options) { - options = options || {}; - +jQuery.fn.pwgDatepicker = function(settings) { + var options = jQuery.extend(true, { + showTimepicker: false, + cancelButton: false, + }, settings || {}); + return this.each(function() { var $this = jQuery(this), - $target = jQuery('[name="'+ jQuery(this).data('datepicker') +'"]'), - linked = !!$target.length; + originalValue = $this.val(), + originalDate, + $target = jQuery('[name="'+ $this.data('datepicker') +'"]'), + linked = !!$target.length, + $start, $end; - if (linked) { // get value before init - var value = $target.val().split(' '); + if (linked) { + originalValue = $target.val(); } // custom setter function set(date, init) { + if (date === '') date = null; $this.datetimepicker('setDate', date); - if ($this.data('datepicker-start')) { + if ($this.data('datepicker-start') && $start) { $start.datetimepicker('option', 'maxDate', date); } - else if ($this.data('datepicker-end')) { + else if ($this.data('datepicker-end') && $end) { if (!init) { // on init, "end" is not initialized yet (assuming "start" is before "end" in the DOM) $end.datetimepicker('option', 'minDate', date); } @@ -30,6 +37,26 @@ jQuery.fn.pwgDatepicker = function(options) { } } + // and custom cancel button + if (options.cancelButton) { + options.beforeShow = options.onChangeMonthYear = function() { + setTimeout(function() { + var buttonPane = $this.datepicker('widget') + .find('.ui-datepicker-buttonpane'); + + if (buttonPane.find('.pwg-datepicker-cancel').length == 0) { + $('') + .on('click', function() { + set(originalDate, false); + $this.datepicker('hide').blur(); + }) + .addClass('pwg-datepicker-cancel ui-state-error ui-corner-all') + .appendTo(buttonPane); + } + }, 1); + }; + } + // init picker $this.datetimepicker(jQuery.extend({ dateFormat: linked ? 'DD d MM yy' : 'yy-mm-dd', @@ -42,16 +69,14 @@ jQuery.fn.pwgDatepicker = function(options) { autoSize: true, changeMonth : true, changeYear: true, - showTimepicker: false, altFieldTimeOnly: false, showSecond: false, - alwaysSetTime: false, - stepMinute: 5 + alwaysSetTime: false }, options)); // attach range pickers if ($this.data('datepicker-start')) { - var $start = jQuery('[data-datepicker="'+ jQuery(this).data('datepicker-start') +'"]'); + $start = jQuery('[data-datepicker="'+ $this.data('datepicker-start') +'"]'); $this.datetimepicker('option', 'onClose', function(date) { $start.datetimepicker('option', 'maxDate', date); @@ -60,7 +85,7 @@ jQuery.fn.pwgDatepicker = function(options) { $this.datetimepicker('option', 'minDate', $start.datetimepicker('getDate')); } else if ($this.data('datepicker-end')) { - var $end = jQuery('[data-datepicker="'+ jQuery(this).data('datepicker-end') +'"]'); + $end = jQuery('[data-datepicker="'+ $this.data('datepicker-end') +'"]'); $this.datetimepicker('option', 'onClose', function(date) { $end.datetimepicker('option', 'minDate', date); @@ -77,17 +102,20 @@ jQuery.fn.pwgDatepicker = function(options) { // set value from linked input if (linked) { - if (value[0].length == 10 && (!options.showTimepicker || value.length==1)) { - set(jQuery.datepicker.parseDate('yy-mm-dd', value[0]), true); + var splitted = originalValue.split(' '); + if (splitted.length == 2 && options.showTimepicker) { + set(jQuery.datepicker.parseDateTime('yy-mm-dd', 'HH:mm:ss', originalValue), true); } - else if (value.length == 2 && options.showTimepicker) { - set(jQuery.datepicker.parseDateTime('yy-mm-dd', 'HH:mm:ss', value.join(' ')), true); + else if (splitted[0].length == 10) { + set(jQuery.datepicker.parseDate('yy-mm-dd', splitted[0]), true); } else { set(null, true); } } + originalDate = $this.datetimepicker('getDate'); + // autoSize not handled by timepicker if (options.showTimepicker) { $this.attr('size', parseInt($this.attr('size'))+6); diff --git a/admin/themes/default/template/batch_manager_global.tpl b/admin/themes/default/template/batch_manager_global.tpl index c484144e1..6425f49e9 100644 --- a/admin/themes/default/template/batch_manager_global.tpl +++ b/admin/themes/default/template/batch_manager_global.tpl @@ -64,7 +64,10 @@ jQuery(document).ready(function() { {/literal} jQuery(document).ready(function() {ldelim} - jQuery('[data-datepicker]').pwgDatepicker({ showTimepicker: true }); + jQuery('[data-datepicker]').pwgDatepicker({ + showTimepicker: true, + cancelButton: '{'Cancel'|translate}' + }); jQuery("a.preview-box").colorbox(); diff --git a/admin/themes/default/template/batch_manager_unit.tpl b/admin/themes/default/template/batch_manager_unit.tpl index e2a51b5e4..18671242b 100644 --- a/admin/themes/default/template/batch_manager_unit.tpl +++ b/admin/themes/default/template/batch_manager_unit.tpl @@ -23,7 +23,10 @@ tagsCache.selectize(jQuery('[data-selectize=tags]'), { lang: { {* *} jQuery(function(){ {* *} - jQuery('[data-datepicker]').pwgDatepicker({ showTimepicker: true }); + jQuery('[data-datepicker]').pwgDatepicker({ + showTimepicker: true, + cancelButton: '{'Cancel'|translate}' + }); }); {* *} diff --git a/admin/themes/default/template/include/datepicker.inc.tpl b/admin/themes/default/template/include/datepicker.inc.tpl index 92e40aa3a..2b4d20179 100644 --- a/admin/themes/default/template/include/datepicker.inc.tpl +++ b/admin/themes/default/template/include/datepicker.inc.tpl @@ -11,6 +11,7 @@ {combine_script id="jquery.ui.timepicker-$lang_info.code" load='footer' require='jquery.ui.timepicker-addon' path=$timepicker_language} {/if} +{combine_css path="themes/default/js/ui/theme/jquery.ui.theme.css"} {combine_css path="themes/default/js/ui/theme/jquery.ui.slider.css"} {combine_css path="themes/default/js/ui/theme/jquery.ui.datepicker.css"} {combine_css path="themes/default/js/ui/theme/jquery.ui.timepicker-addon.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 cea48e28d..20891a2d2 100644 --- a/admin/themes/default/template/picture_modify.tpl +++ b/admin/themes/default/template/picture_modify.tpl @@ -32,7 +32,10 @@ tagsCache.selectize(jQuery('[data-selectize=tags]'), { lang: { {* *} jQuery(function(){ {* *} - jQuery('[data-datepicker]').pwgDatepicker({ showTimepicker: true }); + jQuery('[data-datepicker]').pwgDatepicker({ + showTimepicker: true, + cancelButton: '{'Cancel'|translate}' + }); }); }()); {/footer_script} -- cgit v1.2.3