Changeset 114356 in webkit


Ignore:
Timestamp:
Apr 17, 2012 12:30:46 AM (12 years ago)
Author:
tkent@chromium.org
Message:

Calendar Picker: Support RTL layout
​https://bugs.webkit.org/show_bug.cgi?id=83668

Reviewed by Hajime Morita.

.:

  • ManualTests/forms/calendar-picker.html:

Add Arabic parameters.
Add <select> to select a locale.

Source/WebCore:

Manual test: ManualTests/forms/calendar-picker.html

  • Resources/calendarPicker.js:

(layout): If params.isRTL, add dir=rtl to the body.
(DaysTable.prototype._handleKey): Reverse Left and Right cursor keys if RTL.

  • html/shadow/CalendarPickerElement.cpp:

(WebCore::addProperty): Add addProperty() with a bool value.
(WebCore::CalendarPickerElement::writeDocument):
Check the direction of the first character of localized January label,
and pass it as isRTL property.

Location:
trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/ChangeLog

    r114304 r114356  
     12012-04-17  Kent Tamura  <tkent@chromium.org>
     2
     3        Calendar Picker: Support RTL layout
     4        https://bugs.webkit.org/show_bug.cgi?id=83668
     5
     6        Reviewed by Hajime Morita.
     7
     8        * ManualTests/forms/calendar-picker.html:
     9        Add Arabic parameters.
     10        Add <select> to select a locale.
     11
    1122012-04-16  Dave Tu  <dtu@chromium.org>
    213

  • trunk/ManualTests/forms/calendar-picker.html

    r113298 r114356  
    2020
    2121<p>This is a testbed for a calendar picker.</p>
     22<select onchange="selected(this)">
     23 <option>English</option>
     24 <option>Japanese</option>
     25 <option>Arabic</option>
     26</select>
    2227
    2328<div><input type="text" id="date"></div>
    … …  
    2833
    2934<script>
    30 var frame = document.getElementsByTagName('iframe')[0];
    31 var doc = frame.contentDocument;
    32 doc.documentElement.innerHTML = '<head></head><body><div id=main>Loading...</div></body>';
    33 var link = doc.createElement('link');
    34 link.rel = 'stylesheet';
    35 link.href = '../../Source/WebCore/Resources/calendarPicker.css?' + (new Date()).getTime();
    36 doc.head.appendChild(link);
    37 var script = doc.createElement('script');
    38 script.src = '../../Source/WebCore/Resources/calendarPicker.js?' + (new Date()).getTime();
    39 doc.body.appendChild(script);
    40 
    4135var englishArguments = {
    4236    locale: 'en-US',
    … …  
    6357    max : '2099-03-15',
    6458};
    65 setTimeout(function() {
    66     frame.contentWindow.postMessage(JSON.stringify(englishArguments), "*");
    67     frame.contentWindow.setValueAndClosePopup = function(numValue, stringValue) {
    68         window.log('number=' + numValue + ', string="' + stringValue + '"');
    69         if (numValue == 0)
    70             window.document.getElementById('date').value = stringValue;
    71     };
    72 }, 100);
     59var arabicArguments = {
     60    locale: 'ar',
     61    monthLabels : ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
     62                   'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'],
     63    dayLabels : ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
     64    todayLabel : 'اليوم',
     65    clearLabel : 'مسح',
     66    weekStartDay : 5,
     67    step : 1,
     68    max : '2020-05-15',
     69};
    7370
     71function openCalendar(args) {
     72    var frame = document.getElementsByTagName('iframe')[0];
     73    var doc = frame.contentDocument;
     74    doc.documentElement.innerHTML = '<head></head><body><div id=main>Loading...</div></body>';
     75    var link = doc.createElement('link');
     76    link.rel = 'stylesheet';
     77    link.href = '../../Source/WebCore/Resources/calendarPicker.css?' + (new Date()).getTime();
     78    doc.head.appendChild(link);
     79    var script = doc.createElement('script');
     80    script.src = '../../Source/WebCore/Resources/calendarPicker.js?' + (new Date()).getTime();
     81    doc.body.appendChild(script);
     82
     83    setTimeout(function() {
     84        frame.contentWindow.postMessage(JSON.stringify(args), "*");
     85        frame.contentWindow.setValueAndClosePopup = function(numValue, stringValue) {
     86            window.log('number=' + numValue + ', string="' + stringValue + '"');
     87            if (numValue == 0)
     88                window.document.getElementById('date').value = stringValue;
     89        };
     90    }, 100);
     91}
     92
     93function selected(select) {
     94    switch (select.selectedIndex) {
     95    case 0:
     96        openCalendar(englishArguments);
     97        break;
     98    case 1:
     99        openCalendar(japaneseArguments);
     100        break;
     101    case 2:
     102        openCalendar(arabicArguments);
     103        break;
     104    }
     105}
    74106
    75107function log(str) {
    … …  
    78110    document.getElementById('console').appendChild(entry);
    79111}
     112
     113openCalendar(englishArguments);
    80114</script>
    81115</body>

  • trunk/Source/WebCore/ChangeLog

    r114352 r114356  
     12012-04-17  Kent Tamura  <tkent@chromium.org>
     2
     3        Calendar Picker: Support RTL layout
     4        https://bugs.webkit.org/show_bug.cgi?id=83668
     5
     6        Reviewed by Hajime Morita.
     7
     8        Manual test: ManualTests/forms/calendar-picker.html
     9
     10        * Resources/calendarPicker.js:
     11        (layout): If params.isRTL, add dir=rtl to the body.
     12        (DaysTable.prototype._handleKey): Reverse Left and Right cursor keys if RTL.
     13        * html/shadow/CalendarPickerElement.cpp:
     14        (WebCore::addProperty): Add addProperty() with a bool value.
     15        (WebCore::CalendarPickerElement::writeDocument):
     16        Check the direction of the first character of localized January label,
     17        and pass it as isRTL property.
     18
    1192012-04-16  Carlos Garcia Campos  <cgarcia@igalia.com>
    220

  • trunk/Source/WebCore/Resources/calendarPicker.js

    r113298 r114356  
    3131
    3232// FIXME:
    33 //  - RTL
    3433//  - Touch event
    3534
    … …  
    317316
    318317function layout() {
     318    if (global.params.isRTL)
     319        document.body.dir = "rtl";
    319320    var main = $("main");
    320321    var params = global.params;
    … …  
    926927    }
    927928
    928     if (key == "Left") {
     929    if (key == (global.params.isRTL ? "Right" : "Left")) {
    929930        if (x == 0) {
    930931            if (y == 0) {
    … …  
    948949        this.updateSelection(event, x, y);
    949950
    950     } else if (key == "Right") {
     951    } else if (key == (global.params.isRTL ? "Left" : "Right")) {
    951952        if (x == 6) {
    952953            if (y == DaysTable._Weeks - 1) {

  • trunk/Source/WebCore/html/shadow/CalendarPickerElement.cpp

    r114211 r114356  
    5050#include <wtf/text/StringBuilder.h>
    5151
     52using namespace WTF::Unicode;
     53
    5254namespace WebCore {
    5355
    … …  
    169171}
    170172
     173static void addProperty(const char* name, bool value, DocumentWriter& writer)
     174{
     175    writer.addData(name, strlen(name));
     176    addLiteral(": ", writer);
     177    if (value)
     178        addLiteral("true", writer);
     179    else
     180        addLiteral("false", writer);
     181    addLiteral(",\n", writer);
     182}
     183
    171184static void addProperty(const char* name, const Vector<String>& values, DocumentWriter& writer)
    172185{
    … …  
    201214    addProperty("max", maxString, writer);
    202215    addProperty("step", stepString, writer);
    203     addProperty("required", input->required() ? "true" : "false", writer);
     216    addProperty("required", input->required(), writer);
    204217    addProperty("currentValue", input->value(), writer);
    205218    addProperty("locale", defaultLanguage(), writer);
    … …  
    209222    addProperty("monthLabels", monthLabels(), writer);
    210223    addProperty("dayLabels", weekDayShortLabels(), writer);
     224    Direction dir = direction(monthLabels()[0][0]);
     225    addProperty("isRTL", dir == RightToLeft || dir == RightToLeftArabic, writer);
    211226    addLiteral("}\n", writer);
    212227
Note: See TracChangeset for help on using the changeset viewer.