Calendar Picker: Support RTL layout
authortkent@chromium.org <tkent@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 17 Apr 2012 07:30:46 +0000 (07:30 +0000)
committertkent@chromium.org <tkent@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 17 Apr 2012 07:30:46 +0000 (07:30 +0000)
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@114356 268f45cc-cd09-0410-ab3c-d52691b4dbfc

ChangeLog
ManualTests/forms/calendar-picker.html
Source/WebCore/ChangeLog
Source/WebCore/Resources/calendarPicker.js
Source/WebCore/html/shadow/CalendarPickerElement.cpp

index c81e788..179d303 100644 (file)
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,14 @@
+2012-04-17  Kent Tamura  <tkent@chromium.org>
+
+        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.
+
 2012-04-16  Dave Tu  <dtu@chromium.org>
 
         Re-add GPU DEPS builders to flakiness dashboard.
index 1425e88..c4a7b5b 100644 (file)
@@ -19,6 +19,11 @@ iframe {
 <body>
 
 <p>This is a testbed for a calendar picker.</p>
+<select onchange="selected(this)">
+ <option>English</option>
+ <option>Japanese</option>
+ <option>Arabic</option>
+</select>
 
 <div><input type="text" id="date"></div>
 <iframe></iframe>
@@ -27,17 +32,6 @@ iframe {
 </ol>
 
 <script>
-var frame = document.getElementsByTagName('iframe')[0];
-var doc = frame.contentDocument;
-doc.documentElement.innerHTML = '<head></head><body><div id=main>Loading...</div></body>';
-var link = doc.createElement('link');
-link.rel = 'stylesheet';
-link.href = '../../Source/WebCore/Resources/calendarPicker.css?' + (new Date()).getTime();
-doc.head.appendChild(link);
-var script = doc.createElement('script');
-script.src = '../../Source/WebCore/Resources/calendarPicker.js?' + (new Date()).getTime();
-doc.body.appendChild(script);
-
 var englishArguments = {
     locale: 'en-US',
     monthLabels : ['January', 'February', 'March', 'April', 'May', 'June',
@@ -62,21 +56,61 @@ var japaneseArguments = {
     step : 1,
     max : '2099-03-15',
 };
-setTimeout(function() {
-    frame.contentWindow.postMessage(JSON.stringify(englishArguments), "*");
-    frame.contentWindow.setValueAndClosePopup = function(numValue, stringValue) {
-        window.log('number=' + numValue + ', string="' + stringValue + '"');
-        if (numValue == 0)
-            window.document.getElementById('date').value = stringValue;
-    };
-}, 100);
+var arabicArguments = {
+    locale: 'ar',
+    monthLabels : ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+                   'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'],
+    dayLabels : ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+    todayLabel : 'اليوم',
+    clearLabel : 'مسح',
+    weekStartDay : 5,
+    step : 1,
+    max : '2020-05-15',
+};
+
+function openCalendar(args) {
+    var frame = document.getElementsByTagName('iframe')[0];
+    var doc = frame.contentDocument;
+    doc.documentElement.innerHTML = '<head></head><body><div id=main>Loading...</div></body>';
+    var link = doc.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = '../../Source/WebCore/Resources/calendarPicker.css?' + (new Date()).getTime();
+    doc.head.appendChild(link);
+    var script = doc.createElement('script');
+    script.src = '../../Source/WebCore/Resources/calendarPicker.js?' + (new Date()).getTime();
+    doc.body.appendChild(script);
 
+    setTimeout(function() {
+        frame.contentWindow.postMessage(JSON.stringify(args), "*");
+        frame.contentWindow.setValueAndClosePopup = function(numValue, stringValue) {
+            window.log('number=' + numValue + ', string="' + stringValue + '"');
+            if (numValue == 0)
+                window.document.getElementById('date').value = stringValue;
+        };
+    }, 100);
+}
+
+function selected(select) {
+    switch (select.selectedIndex) {
+    case 0:
+        openCalendar(englishArguments);
+        break;
+    case 1:
+        openCalendar(japaneseArguments);
+        break;
+    case 2:
+        openCalendar(arabicArguments);
+        break;
+    }
+}
 
 function log(str) {
     var entry = document.createElement('li');
     entry.innerText = str;
     document.getElementById('console').appendChild(entry);
 }
+
+openCalendar(englishArguments);
 </script>
 </body>
 </html>
index 55b4a37..9b1e06a 100644 (file)
@@ -1,3 +1,21 @@
+2012-04-17  Kent Tamura  <tkent@chromium.org>
+
+        Calendar Picker: Support RTL layout
+        https://bugs.webkit.org/show_bug.cgi?id=83668
+
+        Reviewed by Hajime Morita.
+
+        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.
+
 2012-04-16  Carlos Garcia Campos  <cgarcia@igalia.com>
 
         Unreviewed. Fix make distcheck issues.
index c300b8c..621545f 100644 (file)
@@ -30,7 +30,6 @@
  */
 
 // FIXME:
-//  - RTL
 //  - Touch event
 
 /**
@@ -316,6 +315,8 @@ function checkLimits() {
 }
 
 function layout() {
+    if (global.params.isRTL)
+        document.body.dir = "rtl";
     var main = $("main");
     var params = global.params;
     main.removeChild(main.firstChild);
@@ -925,7 +926,7 @@ DaysTable.prototype._handleKey = function(event) {
         return;
     }
 
-    if (key == "Left") {
+    if (key == (global.params.isRTL ? "Right" : "Left")) {
         if (x == 0) {
             if (y == 0) {
                 if (!this._maybeSetPreviousMonth())
@@ -947,7 +948,7 @@ DaysTable.prototype._handleKey = function(event) {
             y--;
         this.updateSelection(event, x, y);
 
-    } else if (key == "Right") {
+    } else if (key == (global.params.isRTL ? "Left" : "Right")) {
         if (x == 6) {
             if (y == DaysTable._Weeks - 1) {
                 if (!this._maybeSetNextMonth())
index 2106132..a5d7f0b 100644 (file)
@@ -49,6 +49,8 @@
 #include "RenderDetailsMarker.h"
 #include <wtf/text/StringBuilder.h>
 
+using namespace WTF::Unicode;
+
 namespace WebCore {
 
 using namespace HTMLNames;
@@ -168,6 +170,17 @@ static void addProperty(const char* name, unsigned value, DocumentWriter& writer
     addLiteral(",\n", writer);
 }
 
+static void addProperty(const char* name, bool value, DocumentWriter& writer)
+{
+    writer.addData(name, strlen(name));
+    addLiteral(": ", writer);
+    if (value)
+        addLiteral("true", writer);
+    else
+        addLiteral("false", writer);
+    addLiteral(",\n", writer);
+}
+
 static void addProperty(const char* name, const Vector<String>& values, DocumentWriter& writer)
 {
     writer.addData(name, strlen(name));
@@ -200,7 +213,7 @@ void CalendarPickerElement::writeDocument(DocumentWriter& writer)
     addProperty("min", minString, writer);
     addProperty("max", maxString, writer);
     addProperty("step", stepString, writer);
-    addProperty("required", input->required() ? "true" : "false", writer);
+    addProperty("required", input->required(), writer);
     addProperty("currentValue", input->value(), writer);
     addProperty("locale", defaultLanguage(), writer);
     addProperty("todayLabel", calendarTodayText(), writer);
@@ -208,6 +221,8 @@ void CalendarPickerElement::writeDocument(DocumentWriter& writer)
     addProperty("weekStartDay", firstDayOfWeek(), writer);
     addProperty("monthLabels", monthLabels(), writer);
     addProperty("dayLabels", weekDayShortLabels(), writer);
+    Direction dir = direction(monthLabels()[0][0]);
+    addProperty("isRTL", dir == RightToLeft || dir == RightToLeftArabic, writer);
     addLiteral("}\n", writer);
 
     writer.addData(calendarPickerJs, sizeof(calendarPickerJs));