From b92f32dd334617e74ab931c1db1801cf1c2897ba Mon Sep 17 00:00:00 2001 From: Frédéric Buclin Date: Fri, 25 Sep 2015 18:34:42 +0200 Subject: Bug 1201266: Migrate YUI calendar to jQuery r=gerv --- docs/en/rst/administering/custom-fields.rst | 3 +- js/field.js | 123 --------------------- skins/standard/global.css | 7 -- template/en/default/bug/create/create.html.tmpl | 2 +- template/en/default/bug/field.html.tmpl | 21 +--- template/en/default/bug/show-header.html.tmpl | 1 - template/en/default/bug/summarize-time.html.tmpl | 34 ++---- template/en/default/global/calendar.js.tmpl | 33 ------ template/en/default/global/header.html.tmpl | 11 +- template/en/default/list/list.html.tmpl | 1 - template/en/default/reports/create-chart.html.tmpl | 14 ++- template/en/default/search/field.html.tmpl | 37 ++----- template/en/default/search/form.html.tmpl | 28 ++--- .../en/default/search/search-advanced.html.tmpl | 1 - .../default/search/search-create-series.html.tmpl | 1 - .../default/search/search-report-graph.html.tmpl | 1 - .../default/search/search-report-table.html.tmpl | 1 - 17 files changed, 60 insertions(+), 259 deletions(-) delete mode 100644 template/en/default/global/calendar.js.tmpl diff --git a/docs/en/rst/administering/custom-fields.rst b/docs/en/rst/administering/custom-fields.rst index 29cc72e62..b78202849 100644 --- a/docs/en/rst/administering/custom-fields.rst +++ b/docs/en/rst/administering/custom-fields.rst @@ -68,8 +68,7 @@ The following attributes must be set for each new custom field: :ref:`edit-values-list` for information about editing legal values. Date/Time: - A date field. This field appears with a - calendar widget for choosing the date. + A date field. - *Sortkey:* Integer that determines in which order Custom Fields are diff --git a/js/field.js b/js/field.js index 380901d96..2bd8868f8 100644 --- a/js/field.js +++ b/js/field.js @@ -87,129 +87,6 @@ function _errorFor(field, name) { YAHOO.util.Dom.addClass(field, 'validation_error_field'); } -/* This function is never to be called directly, but only indirectly - * using template/en/default/global/calendar.js.tmpl, so that localization - * works. For the same reason, if you modify this function's parameter list, - * you need to modify the documentation in said template as well. */ -function createCalendar(name, start_weekday, months_long, weekdays_short) { - var cal = new YAHOO.widget.Calendar('calendar_' + name, - 'con_calendar_' + name, - { START_WEEKDAY: start_weekday, - MONTHS_LONG: months_long, - WEEKDAYS_SHORT: weekdays_short - }); - YAHOO.bugzilla['calendar_' + name] = cal; - var field = document.getElementById(name); - cal.selectEvent.subscribe(setFieldFromCalendar, field, false); - updateCalendarFromField(field); - cal.render(); -} - -/* The onclick handlers for the button that shows the calendar. */ -function showCalendar(field_name) { - var calendar = YAHOO.bugzilla["calendar_" + field_name]; - var field = document.getElementById(field_name); - var button = document.getElementById('button_calendar_' + field_name); - - bz_overlayBelow(calendar.oDomContainer, field); - calendar.show(); - button.onclick = function() { hideCalendar(field_name); }; - - // Because of the way removeListener works, this has to be a function - // attached directly to this calendar. - calendar.bz_myBodyCloser = function(event) { - var container = this.oDomContainer; - var target = YAHOO.util.Event.getTarget(event); - if (target != container && target != button - && !YAHOO.util.Dom.isAncestor(container, target)) - { - hideCalendar(field_name); - } - }; - - // If somebody clicks outside the calendar, hide it. - YAHOO.util.Event.addListener(document.body, 'click', - calendar.bz_myBodyCloser, calendar, true); - - // Make Esc close the calendar. - calendar.bz_escCal = function (event) { - var key = YAHOO.util.Event.getCharCode(event); - if (key == 27) { - hideCalendar(field_name); - } - }; - YAHOO.util.Event.addListener(document.body, 'keydown', calendar.bz_escCal); -} - -function hideCalendar(field_name) { - var cal = YAHOO.bugzilla["calendar_" + field_name]; - cal.hide(); - var button = document.getElementById('button_calendar_' + field_name); - button.onclick = function() { showCalendar(field_name); }; - YAHOO.util.Event.removeListener(document.body, 'click', - cal.bz_myBodyCloser); - YAHOO.util.Event.removeListener(document.body, 'keydown', cal.bz_escCal); -} - -/* This is the selectEvent for our Calendar objects on our custom - * DateTime fields. - */ -function setFieldFromCalendar(type, args, date_field) { - var dates = args[0]; - var setDate = dates[0]; - - // We can't just write the date straight into the field, because there - // might already be a time there. - var timeRe = /\b(\d{1,2}):(\d\d)(?::(\d\d))?/; - var currentTime = timeRe.exec(date_field.value); - var d = new Date(setDate[0], setDate[1] - 1, setDate[2]); - if (currentTime) { - d.setHours(currentTime[1], currentTime[2]); - if (currentTime[3]) { - d.setSeconds(currentTime[3]); - } - } - - var year = d.getFullYear(); - // JavaScript's "Date" represents January as 0 and December as 11. - var month = d.getMonth() + 1; - if (month < 10) month = '0' + String(month); - var day = d.getDate(); - if (day < 10) day = '0' + String(day); - var dateStr = year + '-' + month + '-' + day; - - if (currentTime) { - var minutes = d.getMinutes(); - if (minutes < 10) minutes = '0' + String(minutes); - var seconds = d.getSeconds(); - if (seconds > 0 && seconds < 10) { - seconds = '0' + String(seconds); - } - - dateStr = dateStr + ' ' + d.getHours() + ':' + minutes; - if (seconds) dateStr = dateStr + ':' + seconds; - } - - date_field.value = dateStr; - hideCalendar(date_field.id); -} - -/* Sets the calendar based on the current field value. - */ -function updateCalendarFromField(date_field) { - var dateRe = /(\d\d\d\d)-(\d\d?)-(\d\d?)/; - var pieces = dateRe.exec(date_field.value); - if (pieces) { - var cal = YAHOO.bugzilla["calendar_" + date_field.id]; - cal.select(new Date(pieces[1], pieces[2] - 1, pieces[3])); - var selectedArray = cal.getSelectedDates(); - var selected = selectedArray[0]; - cal.cfg.setProperty("pagedate", (selected.getMonth() + 1) + '/' - + selected.getFullYear()); - cal.render(); - } -} - function setupEditLink(id) { var link_container = 'container_showhide_' + id; var input_container = 'container_' + id; diff --git a/skins/standard/global.css b/skins/standard/global.css index dfbf1ee92..b9148f764 100644 --- a/skins/standard/global.css +++ b/skins/standard/global.css @@ -684,13 +684,6 @@ input.required, select.required, span.required_explanation { color: #000; } -.calendar_button { - background: transparent url("global/calendar.png") no-repeat; - width: 20px; - height: 20px; - vertical-align: middle; -} -.calendar_button span { display: none } /* These classes are set by YUI. */ .yui-calcontainer { display: none; diff --git a/template/en/default/bug/create/create.html.tmpl b/template/en/default/bug/create/create.html.tmpl index 367292756..e0fdd13b9 100644 --- a/template/en/default/bug/create/create.html.tmpl +++ b/template/en/default/bug/create/create.html.tmpl @@ -12,7 +12,7 @@ [% PROCESS global/header.html.tmpl title = title generate_api_token = 1 - yui = [ 'calendar', 'datatable', 'button' ] + yui = ['datatable', 'button'] style_urls = ['skins/standard/bug.css'] javascript_urls = [ "js/attachment.js", "js/util.js", "js/field.js", "js/TUI.js", "js/bug.js" ] diff --git a/template/en/default/bug/field.html.tmpl b/template/en/default/bug/field.html.tmpl index 87725b699..fe649d50d 100644 --- a/template/en/default/bug/field.html.tmpl +++ b/template/en/default/bug/field.html.tmpl @@ -52,24 +52,15 @@ [% CASE [constants.FIELD_TYPE_DATETIME, constants.FIELD_TYPE_DATE] %] [% size = (field.type == constants.FIELD_TYPE_DATE) ? 10 : 20 %] - - -
- + [% END %]> + $(function() { + $("#[% field.name FILTER html FILTER js %]").datepicker([% "{constrainInput: false}" IF field.type == constants.FIELD_TYPE_DATETIME %]); + }); + [% CASE constants.FIELD_TYPE_BUG_ID %] Period starting: - - -
+ and : - - -
+ +
(Dates are optional, and in YYYY-MM-DD format) @@ -321,11 +315,5 @@ -
[% END %] diff --git a/template/en/default/global/calendar.js.tmpl b/template/en/default/global/calendar.js.tmpl deleted file mode 100644 index 26f3fa023..000000000 --- a/template/en/default/global/calendar.js.tmpl +++ /dev/null @@ -1,33 +0,0 @@ -[%# This Source Code Form is subject to the terms of the Mozilla Public - # License, v. 2.0. If a copy of the MPL was not distributed with this - # file, You can obtain one at http://mozilla.org/MPL/2.0/. - # - # This Source Code Form is "Incompatible With Secondary Licenses", as - # defined by the Mozilla Public License, v. 2.0. - #%] - -[%# INTERFACE: - # id: The id of the input field the calendar widget is to be assigned to. - #%] - -[%# This template exists because createCalendar accepts additional parameters - # which allow for localization. Please see the YUI documentation at - # http://developer.yahoo.com/yui/calendar/#internationalization for details. - # As an example, here's what you'd specify as additional parameters to - # localize for German calendars; replace the ellipsis ("...") by the original - # parameter (we cannot put it into the example because it'd break this - # template comment): - # - # createCalendar(... - # /* The weekday the week begins on; 0 is Sunday, - # * 1 is Monday and so on: */ - # 1, - # /* Months, full names; first must be January: */ - # ['Januar', 'Februar', 'März', 'April', - # 'Mai', 'Juni', 'Juli', 'August', - # 'September', 'Oktober', 'November', 'Dezember'], - # /* Weekdays, two-letter abbreviations; first must be - # * Sunday: */ - # ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']); - #%] -createCalendar('[% id FILTER js %]'); diff --git a/template/en/default/global/header.html.tmpl b/template/en/default/global/header.html.tmpl index af9c8b686..6a52e7840 100644 --- a/template/en/default/global/header.html.tmpl +++ b/template/en/default/global/header.html.tmpl @@ -44,7 +44,6 @@ [% IF NOT no_yui %] [% SET yui_css = { - calendar => 1, datatable => 1, button => 1, } %] @@ -182,6 +181,16 @@ } $(document).ready(unhide_language_selector); + // This sets the default parameters for all calendar fields. + $.datepicker.setDefaults({ + dateFormat: "yy-mm-dd", // this is the YYYY-MM-DD format + showButtonPanel: true, // permits to easily select "Today" + // These 3 parameters are useful for localization. + firstDay: 0, // 0 = Sunday, 1 = Monday, etc... + dayNamesMin: [ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ], + monthNames: [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ] + }); + [%# Make some Bugzilla information available to all scripts. # We don't import every parameter and constant because we # don't want to add a lot of uncached JS to every page. diff --git a/template/en/default/list/list.html.tmpl b/template/en/default/list/list.html.tmpl index 190b2193c..42af50123 100644 --- a/template/en/default/list/list.html.tmpl +++ b/template/en/default/list/list.html.tmpl @@ -61,7 +61,6 @@ title = title generate_api_token = dotweak atomlink = "buglist.cgi?$urlquerypart&title=$title&ctype=atom" - yui = [ 'calendar' ] javascript_urls = [ "js/util.js", "js/field.js", "js/TUI.js" ] style_urls = [ "skins/standard/buglist.css" ] doc_section = "using/finding.html" diff --git a/template/en/default/reports/create-chart.html.tmpl b/template/en/default/reports/create-chart.html.tmpl index 6b5fa5fe3..533c631ed 100644 --- a/template/en/default/reports/create-chart.html.tmpl +++ b/template/en/default/reports/create-chart.html.tmpl @@ -215,12 +215,10 @@ function subcatSelected() { : - + - @@ -230,6 +228,12 @@ function subcatSelected() { + [% ELSE %]

None

[% END %] diff --git a/template/en/default/search/field.html.tmpl b/template/en/default/search/field.html.tmpl index b2013eff6..765ede557 100644 --- a/template/en/default/search/field.html.tmpl +++ b/template/en/default/search/field.html.tmpl @@ -55,34 +55,21 @@ tag_name = "span" editable = 1 %] - from - - - to + to - + value="[% value.1 FILTER html %]"> (YYYY-MM-DD or relative dates) - - + + $(function() { + // do not check user input as relative dates are allowed + $("#[% field.name FILTER html FILTER js %]").datepicker({constrainInput: false}); + $("#[% field.name FILTER html FILTER js %]to").datepicker({constrainInput: false}); + }); + [% CASE [ constants.FIELD_TYPE_SINGLE_SELECT, constants.FIELD_TYPE_MULTI_SELECT ] %]
diff --git a/template/en/default/search/form.html.tmpl b/template/en/default/search/form.html.tmpl index 410bd2d20..30835b1b0 100644 --- a/template/en/default/search/form.html.tmpl +++ b/template/en/default/search/form.html.tmpl @@ -307,26 +307,18 @@ TUI_hide_default('information_query');
  • - - and -
    - - -
    + value="[% default.chfieldfrom.0 FILTER html %]"> + and + (YYYY-MM-DD or relative dates) -
    • + $(function() { + $("#chfieldfrom").datepicker(); + $("#chfieldto").datepicker(); + }); + + [%############################################################################%] diff --git a/template/en/default/search/search-advanced.html.tmpl b/template/en/default/search/search-advanced.html.tmpl index af07aa475..ae4a72812 100644 --- a/template/en/default/search/search-advanced.html.tmpl +++ b/template/en/default/search/search-advanced.html.tmpl @@ -27,7 +27,6 @@ function remove_token() { [% PROCESS global/header.html.tmpl title = "Search for $terms.bugs" generate_api_token = 1 - yui = [ 'calendar' ] javascript = javascript javascript_urls = [ "js/util.js", "js/TUI.js", "js/field.js"] style_urls = ['skins/standard/buglist.css'] diff --git a/template/en/default/search/search-create-series.html.tmpl b/template/en/default/search/search-create-series.html.tmpl index 6df1a79d3..87be44f8c 100644 --- a/template/en/default/search/search-create-series.html.tmpl +++ b/template/en/default/search/search-create-series.html.tmpl @@ -19,7 +19,6 @@ [% PROCESS global/header.html.tmpl title = "Create New Data Set" onload = "doOnSelectProduct(0);" - yui = [ 'calendar' ] javascript = js_data javascript_urls = [ "js/util.js", "js/TUI.js", "js/field.js" ] style_urls = ['skins/standard/buglist.css'] diff --git a/template/en/default/search/search-report-graph.html.tmpl b/template/en/default/search/search-report-graph.html.tmpl index 6cbafd11c..4f882ea0e 100644 --- a/template/en/default/search/search-report-graph.html.tmpl +++ b/template/en/default/search/search-report-graph.html.tmpl @@ -18,7 +18,6 @@ var queryform = "reportform" [% PROCESS global/header.html.tmpl title = "Generate Graphical Report" onload = "doOnSelectProduct(0); chartTypeChanged()" - yui = [ 'calendar' ] javascript = js_data javascript_urls = [ "js/util.js", "js/TUI.js", "js/field.js" ] style_urls = ['skins/standard/buglist.css'] diff --git a/template/en/default/search/search-report-table.html.tmpl b/template/en/default/search/search-report-table.html.tmpl index 18c871313..09a8b18b8 100644 --- a/template/en/default/search/search-report-table.html.tmpl +++ b/template/en/default/search/search-report-table.html.tmpl @@ -18,7 +18,6 @@ var queryform = "reportform" [% PROCESS global/header.html.tmpl title = "Generate Tabular Report" onload = "doOnSelectProduct(0)" - yui = [ 'calendar' ] javascript = js_data javascript_urls = [ "js/util.js", "js/TUI.js", "js/field.js" ] style_urls = ['skins/standard/buglist.css'] -- cgit v1.2.3-24-g4f1b