Changeset 127727 in webkit


Ignore:
Timestamp:
Sep 6, 2012 4:05:27 AM (12 years ago)
Author:
keishi@webkit.org
Message:

Refactor CalendarPicker to not use global variables.
https://bugs.webkit.org/show_bug.cgi?id=95830

Reviewed by Kent Tamura.

Source/WebCore:

Introduce CalendarPicker so we can have multiple Pickers in one page
popup in the future.

No new tests. No behavior change.

  • Resources/pagepopups/calendarPicker.js:

(initialize):
(resetMain):
(openCalendarPicker):
(CalendarPicker):
(CalendarPicker.prototype._layout):
(CalendarPicker.prototype.handleToday):
(CalendarPicker.prototype.handleClear):
(CalendarPicker.prototype.fixWindowSize):
(CalendarPicker.prototype._layoutButtons):
(YearMonthController):
(YearMonthController.prototype.attachTo):
(YearMonthController.prototype._redraw):
(YearMonthController.prototype._handleYearMonthChange):
(YearMonthController.prototype.moveRelatively):
(DaysTable):
(DaysTable.prototype.attachTo):
(CalendarPicker.prototype.stepMismatch):
(CalendarPicker.prototype.outOfRange):
(CalendarPicker.prototype.isValidDate):
(DaysTable.prototype._renderMonth):
(DaysTable.prototype._navigateToMonth):
(DaysTable.prototype._maybeSetPreviousMonth):
(DaysTable.prototype._maybeSetNextMonth):
(DaysTable.prototype._handleDayClick):
(DaysTable.prototype._handleKey):
(CalendarPicker.prototype._handleBodyKeyDown):

  • Resources/pagepopups/colorSuggestionPicker.js:

(ColorPicker):
(ColorPicker.prototype._layout):
(ColorPicker.prototype._handleKeyDown):
(ColorPicker.prototype._handleSwatchClick):

  • Resources/pagepopups/pickerCommon.js:

(Picker):
(Picker.prototype.submitValue):
(Picker.prototype.handleCancel):
(Picker.prototype.chooseOtherColor):

LayoutTests:

  • fast/forms/date/calendar-picker-appearance-pre-100.html:
Location:
trunk
Files:
6 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r127722 r127727  
     12012-09-06  Keishi Hattori  <keishi@webkit.org>
     2
     3        Refactor CalendarPicker to not use global variables.
     4        https://bugs.webkit.org/show_bug.cgi?id=95830
     5
     6        Reviewed by Kent Tamura.
     7
     8        * fast/forms/date/calendar-picker-appearance-pre-100.html:
     9
    1102012-09-06  Mikhail Pozdnyakov  <mikhail.pozdnyakov@intel.com>
    211
  • trunk/LayoutTests/fast/forms/date/calendar-picker-appearance-pre-100.html

    r125962 r127727  
    99<input type=date id=date value="0002-02-02">
    1010<script>
    11 function sendKey(input, keyName) {
     11function sendKey(element, keyName) {
    1212    var event = document.createEvent('KeyboardEvent');
    1313    event.initKeyboardEvent('keydown', true, true, document.defaultView, keyName);
    14     input.dispatchEvent(event);
     14    element.dispatchEvent(event);
    1515}
    1616
    1717function finishTest() {
    1818    pickerWindow.removeEventListener('resize', finishTest);
    19     sendKey(pickerWindow.global.daysTable._daysContainer, 'Right');
    20     sendKey(pickerWindow.global.daysTable._daysContainer, 'Enter');
     19    var daysContainer = pickerWindow.document.getElementsByClassName("days-area")[0];
     20    sendKey(daysContainer, 'Right');
     21    sendKey(daysContainer, 'Enter');
    2122    shouldBe('document.getElementById("date").value', '"0002-02-03"');
    2223    setTimeout(function() { finishJSTest(); }, 0);
  • trunk/Source/WebCore/ChangeLog

    r127724 r127727  
     12012-09-06  Keishi Hattori  <keishi@webkit.org>
     2
     3        Refactor CalendarPicker to not use global variables.
     4        https://bugs.webkit.org/show_bug.cgi?id=95830
     5
     6        Reviewed by Kent Tamura.
     7
     8        Introduce CalendarPicker so we can have multiple Pickers in one page
     9        popup in the future.
     10
     11        No new tests. No behavior change.
     12
     13        * Resources/pagepopups/calendarPicker.js:
     14        (initialize):
     15        (resetMain):
     16        (openCalendarPicker):
     17        (CalendarPicker):
     18        (CalendarPicker.prototype._layout):
     19        (CalendarPicker.prototype.handleToday):
     20        (CalendarPicker.prototype.handleClear):
     21        (CalendarPicker.prototype.fixWindowSize):
     22        (CalendarPicker.prototype._layoutButtons):
     23        (YearMonthController):
     24        (YearMonthController.prototype.attachTo):
     25        (YearMonthController.prototype._redraw):
     26        (YearMonthController.prototype._handleYearMonthChange):
     27        (YearMonthController.prototype.moveRelatively):
     28        (DaysTable):
     29        (DaysTable.prototype.attachTo):
     30        (CalendarPicker.prototype.stepMismatch):
     31        (CalendarPicker.prototype.outOfRange):
     32        (CalendarPicker.prototype.isValidDate):
     33        (DaysTable.prototype._renderMonth):
     34        (DaysTable.prototype._navigateToMonth):
     35        (DaysTable.prototype._maybeSetPreviousMonth):
     36        (DaysTable.prototype._maybeSetNextMonth):
     37        (DaysTable.prototype._handleDayClick):
     38        (DaysTable.prototype._handleKey):
     39        (CalendarPicker.prototype._handleBodyKeyDown):
     40        * Resources/pagepopups/colorSuggestionPicker.js:
     41        (ColorPicker):
     42        (ColorPicker.prototype._layout):
     43        (ColorPicker.prototype._handleKeyDown):
     44        (ColorPicker.prototype._handleSwatchClick):
     45        * Resources/pagepopups/pickerCommon.js:
     46        (Picker):
     47        (Picker.prototype.submitValue):
     48        (Picker.prototype.handleCancel):
     49        (Picker.prototype.chooseOtherColor):
     50
    1512012-09-06  Simon Hausmann  <simon.hausmann@nokia.com>
    252
  • trunk/Source/WebCore/Resources/pagepopups/calendarPicker.js

    r125962 r127727  
    277277    } else {
    278278        global.params = args;
    279         checkLimits();
    280         layout();
    281 
    282         var initialDate = parseDateString(args.currentValue);
    283         if (initialDate < global.minimumDate)
    284             initialDate = global.minimumDate;
    285         else if (initialDate > global.maximumDate)
    286             initialDate = global.maximumDate;
    287         global.daysTable.selectDate(initialDate);
    288 
    289         setTimeout(fixWindowSize, 0);
    290     }
    291 }
    292 
    293 function fixWindowSize() {
    294     var yearMonthRightElement = document.getElementsByClassName(ClassNames.YearMonthButtonRight)[0];
    295     var daysAreaElement = document.getElementsByClassName(ClassNames.DaysArea)[0];
     279        openCalendarPicker();
     280    }
     281}
     282
     283function resetMain() {
     284    var main = $("main");
     285    main.innerHTML = "";
     286    main.className = "";
     287};
     288
     289function openCalendarPicker() {
     290    resetMain();
     291    new CalendarPicker($("main"), global.params);
     292};
     293
     294/**
     295 * @constructor
     296 * @param {!Element} element
     297 * @param {!Object} config
     298 */
     299function CalendarPicker(element, config) {
     300    Picker.call(this, element, config);
     301    // We assume this._config.min is a valid date.
     302    this.minimumDate = (typeof this._config.min !== "undefined") ? parseDateString(this._config.min) : CalendarPicker.MinimumPossibleDate;
     303    // We assume this._config.max is a valid date.
     304    this.maximumDate = (typeof this._config.max !== "undefined") ? parseDateString(this._config.max) : CalendarPicker.MaximumPossibleDate;
     305    this.step = (typeof this._config.step !== undefined) ? this._config.step * CalendarPicker.BaseStep : CalendarPicker.BaseStep;
     306    this.yearMonthController = new YearMonthController(this);
     307    this.daysTable = new DaysTable(this);
     308    this._layout();
     309    var initialDate = parseDateString(this._config.currentValue);
     310    if (initialDate < this.minimumDate)
     311        initialDate = this.minimumDate;
     312    else if (initialDate > this.maximumDate)
     313        initialDate = this.maximumDate;
     314    this.daysTable.selectDate(initialDate);
     315    this.fixWindowSize();
     316    document.body.addEventListener("keydown", bind(this._handleBodyKeyDown, this), false);
     317}
     318CalendarPicker.prototype = Object.create(Picker.prototype);
     319
     320// Hard limits of type=date. See WebCore/platform/DateComponents.h.
     321CalendarPicker.MinimumPossibleDate = new Date(-62135596800000.0);
     322CalendarPicker.MaximumPossibleDate = new Date(8640000000000000.0);
     323// See WebCore/html/DateInputType.cpp.
     324CalendarPicker.BaseStep = 86400000;
     325
     326CalendarPicker.prototype._layout = function() {
     327    this._element.style.direction = global.params.isRTL ? "rtl" : "ltr";
     328    this.yearMonthController.attachTo(this._element);
     329    this.daysTable.attachTo(this._element);
     330    this._layoutButtons();
     331};
     332
     333CalendarPicker.prototype.handleToday = function() {
     334    var date = new Date();
     335    this.daysTable.selectDate(date);
     336    this.submitValue(serializeDate(date.getFullYear(), date.getMonth(), date.getDate()));
     337};
     338
     339CalendarPicker.prototype.handleClear = function() {
     340    this.submitValue("");
     341};
     342
     343CalendarPicker.prototype.fixWindowSize = function() {
     344    var yearMonthRightElement = this._element.getElementsByClassName(ClassNames.YearMonthButtonRight)[0];
     345    var daysAreaElement = this._element.getElementsByClassName(ClassNames.DaysArea)[0];
    296346    var headers = daysAreaElement.getElementsByClassName(ClassNames.DayLabel);
    297347    var maxCellWidth = 0;
     
    301351    }
    302352    var DaysAreaContainerBorder = 1;
    303     var main = $("main");
    304353    var yearMonthEnd;
    305354    var daysAreaEnd;
    306355    if (global.params.isRTL) {
    307         var startOffset = main.offsetLeft + main.offsetWidth;
     356        var startOffset = this._element.offsetLeft + this._element.offsetWidth;
    308357        yearMonthEnd = startOffset - yearMonthRightElement.offsetLeft;
    309358        daysAreaEnd = startOffset - (daysAreaElement.offsetLeft + daysAreaElement.offsetWidth) + maxCellWidth * 7 + DaysAreaContainerBorder;
     
    312361        daysAreaEnd = daysAreaElement.offsetLeft + maxCellWidth * 7 + DaysAreaContainerBorder;
    313362    }
    314 
    315363    var maxEnd = Math.max(yearMonthEnd, daysAreaEnd);
    316     var MainPadding = 6;
     364    var MainPadding = 6; // FIXME: Fix name.
    317365    var MainBorder = 1;
    318366    var desiredBodyWidth = maxEnd + MainPadding + MainBorder;
    319367
    320     var mainHeight = main.offsetHeight;
    321     main.style.width = "auto";
     368    var elementHeight = this._element.offsetHeight;
     369    this._element.style.width = "auto";
    322370    daysAreaElement.style.width = "100%";
    323371    daysAreaElement.style.tableLayout = "fixed";
    324     document.getElementsByClassName(ClassNames.YearMonthUpper)[0].style.display = "-webkit-box";
    325     document.getElementsByClassName(ClassNames.MonthSelectorBox)[0].style.display = "block";
    326     resizeWindow(desiredBodyWidth, mainHeight);
    327 }
    328 
    329 function checkLimits() {
    330     // Hard limits of type=date. See WebCore/platform/DateComponents.h.
    331     global.minimumDate = new Date(-62135596800000.0);
    332     global.maximumDate = new Date(8640000000000000.0);
    333     // See WebCore/html/DateInputType.cpp.
    334     global.step = 86400000;
    335 
    336     if (global.params.min) {
    337         // We assume params.min is a valid date.
    338         global.minimumDate = parseDateString(global.params.min);
    339     }
    340     if (global.params.max) {
    341         // We assume params.max is a valid date.
    342         global.maximumDate = parseDateString(global.params.max);
    343     }
    344     if (global.params.step)
    345         global.step *= global.params.step;
    346 }
    347 
    348 function layout() {
    349     if (global.params.isRTL)
    350         document.body.dir = "rtl";
    351     else
    352         document.body.dir = "ltr";
    353     var main = $("main");
    354     var params = global.params;
    355     main.removeChild(main.firstChild);
    356     document.body.addEventListener("keydown", handleGlobalKey, false);
    357 
    358     global.yearMonthController = new YearMonthController();
    359     global.yearMonthController.attachTo(main);
    360     global.daysTable = new DaysTable();
    361     global.daysTable.attachTo(main);
    362     layoutButtons(main);
    363 }
    364 
    365 /**
    366  * @param {Element} main
    367  */
    368 function layoutButtons(main) {
     372    this._element.getElementsByClassName(ClassNames.YearMonthUpper)[0].style.display = "-webkit-box";
     373    this._element.getElementsByClassName(ClassNames.MonthSelectorBox)[0].style.display = "block";
     374    resizeWindow(desiredBodyWidth, elementHeight);
     375};
     376
     377CalendarPicker.prototype._layoutButtons = function() {
    369378    var container = createElement("div", ClassNames.TodayClearArea);
    370     global.today = createElement("input", ClassNames.TodayButton);
    371     global.today.type = "button";
    372     global.today.value = global.params.todayLabel;
    373     global.today.addEventListener("click", handleToday, false);
    374     container.appendChild(global.today);
    375     global.clear = null;
    376     if (!global.params.required) {
    377         global.clear = createElement("input", ClassNames.ClearButton);
    378         global.clear.type = "button";
    379         global.clear.value = global.params.clearLabel;
    380         global.clear.addEventListener("click", handleClear, false);
    381         container.appendChild(global.clear);
    382     }
    383     main.appendChild(container);
    384 
    385     global.lastFocusableControl = global.clear || global.today;
    386 }
     379    this.today = createElement("input", ClassNames.TodayButton);
     380    this.today.type = "button";
     381    this.today.value = this._config.todayLabel;
     382    this.today.addEventListener("click", bind(this.handleToday, this), false);
     383    container.appendChild(this.today);
     384    this.clear = null;
     385    if (!this._config.required) {
     386        this.clear = createElement("input", ClassNames.ClearButton);
     387        this.clear.type = "button";
     388        this.clear.value = this._config.clearLabel;
     389        this.clear.addEventListener("click", bind(this.handleClear, this), false);
     390        container.appendChild(this.clear);
     391    }
     392    this._element.appendChild(container);
     393
     394    this.lastFocusableControl = this.clear || this.today;
     395};
    387396
    388397// ----------------------------------------------------------------
     
    390399/**
    391400 * @constructor
    392  */
    393 function YearMonthController() {
     401 * @param {!CalendarPicker} picker
     402 */
     403function YearMonthController(picker) {
     404    this.picker = picker;
    394405    /**
    395406     * @type {!number}
     
    403414
    404415/**
    405  * @param {!Element} main
    406  */
    407 YearMonthController.prototype.attachTo = function(main) {
     416 * @param {!Element} element
     417 */
     418YearMonthController.prototype.attachTo = function(element) {
    408419    var outerContainer = createElement("div", ClassNames.YearMonthArea);
    409420
     
    430441
    431442    this._attachRightButtonsTo(innerContainer);
    432     main.appendChild(outerContainer);
     443    element.appendChild(outerContainer);
    433444
    434445    this._wall = createElement("div", ClassNames.MonthSelectorWall);
    435446    this._wall.addEventListener("click", bind(this._closePopup, this), false);
    436     main.appendChild(this._wall);
    437 
    438     var maximumYear = global.maximumDate.getUTCFullYear();
     447    element.appendChild(this._wall);
     448
     449    var maximumYear = this.picker.maximumDate.getUTCFullYear();
    439450    var maxWidth = 0;
    440451    for (var m = 0; m < 12; ++m) {
     
    535546
    536547YearMonthController.prototype._redraw = function() {
    537     var min = global.minimumDate.getUTCFullYear() * 12 + global.minimumDate.getUTCMonth();
    538     var max = global.maximumDate.getUTCFullYear() * 12 + global.maximumDate.getUTCMonth();
     548    var min = this.picker.minimumDate.getUTCFullYear() * 12 + this.picker.minimumDate.getUTCMonth();
     549    var max = this.picker.maximumDate.getUTCFullYear() * 12 + this.picker.maximumDate.getUTCMonth();
    539550    var current = this._currentYear * 12 + this._currentMonth;
    540551    if (this._left3)
     
    681692    var newYear = Number(result[1]);
    682693    var newMonth = Number(result[2]);
    683     global.daysTable.navigateToMonthAndKeepSelectionPosition(newYear, newMonth);
     694    this.picker.daysTable.navigateToMonthAndKeepSelectionPosition(newYear, newMonth);
    684695};
    685696
     
    739750 */
    740751YearMonthController.prototype.moveRelatively = function(amount) {
    741     var min = global.minimumDate.getUTCFullYear() * 12 + global.minimumDate.getUTCMonth();
    742     var max = global.maximumDate.getUTCFullYear() * 12 + global.maximumDate.getUTCMonth();
     752    var min = this.picker.minimumDate.getUTCFullYear() * 12 + this.picker.minimumDate.getUTCMonth();
     753    var max = this.picker.maximumDate.getUTCFullYear() * 12 + this.picker.maximumDate.getUTCMonth();
    743754    var current = this._currentYear * 12 + this._currentMonth;
    744755    var updated = current;
     
    749760    if (updated == current)
    750761        return;
    751     global.daysTable.navigateToMonthAndKeepSelectionPosition(Math.floor(updated / 12), updated % 12);
     762    this.picker.daysTable.navigateToMonthAndKeepSelectionPosition(Math.floor(updated / 12), updated % 12);
    752763};
    753764
     
    756767/**
    757768 * @constructor
    758  */
    759 function DaysTable() {
     769 * @param {!CalendarPicker} picker
     770 */
     771function DaysTable(picker) {
     772    this.picker = picker;
    760773    /**
    761774     * @type {!number}
     
    791804
    792805/**
    793  * @param {!Element} main
    794  */
    795 DaysTable.prototype.attachTo = function(main) {
     806 * @param {!Element} element
     807 */
     808DaysTable.prototype.attachTo = function(element) {
    796809    this._daysContainer = createElement("table", ClassNames.DaysArea);
    797810    this._daysContainer.addEventListener("click", bind(this._handleDayClick, this), false);
     
    822835    container.tabIndex = 0;
    823836    container.addEventListener("keydown", bind(this._handleKey, this), false);
    824     main.appendChild(container);
     837    element.appendChild(container);
    825838
    826839    container.focus();
     
    831844 * @return {!boolean}
    832845 */
    833 function stepMismatch(time) {
    834     return (time - global.minimumDate.getTime()) % global.step != 0;
     846CalendarPicker.prototype.stepMismatch = function(time) {
     847    return (time - this.minimumDate.getTime()) % this.step != 0;
    835848}
    836849
     
    839852 * @return {!boolean}
    840853 */
    841 function outOfRange(time) {
    842     return time < global.minimumDate.getTime() || time > global.maximumDate.getTime();
     854CalendarPicker.prototype.outOfRange = function(time) {
     855    return time < this.minimumDate.getTime() || time > this.maximumDate.getTime();
    843856}
    844857
     
    847860 * @return {!boolean}
    848861 */
    849 function isValidDate(time) {
    850     return !outOfRange(time) && !stepMismatch(time);
     862CalendarPicker.prototype.isValidDate = function(time) {
     863    return !this.outOfRange(time) && !this.stepMismatch(time);
    851864}
    852865
     
    874887            element.className = ClassNames.Day;
    875888            element.dataset.submitValue = serializeDate(iterYear, iterMonth, dayIterator.getUTCDate());
    876             if (outOfRange(time))
     889            if (this.picker.outOfRange(time))
    877890                element.classList.add(ClassNames.Unavailable);
    878             else if (stepMismatch(time))
     891            else if (this.picker.stepMismatch(time))
    879892                element.classList.add(ClassNames.Unavailable);
    880893            else if ((iterYear == year && dayIterator.getUTCMonth() < month) || (month == 0 && iterMonth == 11)) {
     
    893906    }
    894907
    895     global.today.disabled = !isValidDate(parseDateString().getTime());
     908    this.picker.today.disabled = !this.picker.isValidDate(parseDateString().getTime());
    896909};
    897910
     
    901914 */
    902915DaysTable.prototype._navigateToMonth = function(year, month) {
    903     global.yearMonthController.setYearMonth(year, month);
     916    this.picker.yearMonthController.setYearMonth(year, month);
    904917    this._renderMonth(year, month);
    905918};
     
    976989    var month = global.yearMonthController.month();
    977990    var thisMonthStartTime = createUTCDate(year, month, 1).getTime();
    978     if (global.minimumDate.getTime() >= thisMonthStartTime)
     991    if (this.minimumDate.getTime() >= thisMonthStartTime)
    979992        return false;
    980993    if (month == 0) {
     
    9991012        month++;
    10001013    var nextMonthStartTime = createUTCDate(year, month, 1).getTime();
    1001     if (global.maximumDate.getTime() < nextMonthStartTime)
     1014    if (this.picker.maximumDate.getTime() < nextMonthStartTime)
    10021015        return false;
    10031016    this._navigateToMonthWithAnimation(year, month);
     
    10101023DaysTable.prototype._handleDayClick = function(event) {
    10111024    if (event.target.classList.contains(ClassNames.Available))
    1012         submitValue(event.target.dataset.submitValue);
     1025        this.picker.submitValue(event.target.dataset.submitValue);
    10131026};
    10141027
     
    11111124        var dayNode = this._days[y][x];
    11121125        if (dayNode.classList.contains(ClassNames.Available)) {
    1113             submitValue(dayNode.dataset.submitValue);
     1126            this.picker.submitValue(dayNode.dataset.submitValue);
    11141127            event.stopPropagation();
    11151128        }
     
    11401153};
    11411154
    1142 // ----------------------------------------------------------------
    1143 
    1144 function handleToday() {
    1145     var date = new Date();
    1146     global.daysTable.selectDate(date);
    1147     submitValue(serializeDate(date.getFullYear(), date.getMonth(), date.getDate()));
    1148 }
    1149 
    1150 function handleClear() {
    1151     submitValue("");
    1152 }
    1153 
    1154 /**
    1155  * @param {string} value
    1156  */
    1157 function submitValue(value) {
    1158     window.pagePopupController.setValueAndClosePopup(0, value);
    1159 }
    1160 
    1161 function handleCancel() {
    1162     window.pagePopupController.setValueAndClosePopup(-1, "");
    1163 }
    1164 
    1165 /**
    1166  * @param {Event} event
    1167  */
    1168 function handleGlobalKey(event) {
     1155/**
     1156 * @param {!Event} event
     1157 */
     1158CalendarPicker.prototype._handleBodyKeyDown = function(event) {
    11691159    maybeUpdateFocusStyle();
    11701160    var key = event.keyIdentifier;
     
    11731163            event.stopPropagation();
    11741164            event.preventDefault();
    1175             global.firstFocusableControl.focus();
     1165            this.firstFocusableControl.focus();
    11761166        } else if (event.shiftKey && document.activeElement == global.firstFocusableControl) {
    11771167            event.stopPropagation();
    11781168            event.preventDefault();
    1179             global.lastFocusableControl.focus();
     1169            this.lastFocusableControl.focus();
    11801170        }
    11811171    } else if (key == "U+004D") { // 'm'
    1182         global.yearMonthController.moveRelatively(event.shiftKey ? YearMonthController.PreviousMonth : YearMonthController.NextMonth);
     1172        this.yearMonthController.moveRelatively(event.shiftKey ? YearMonthController.PreviousMonth : YearMonthController.NextMonth);
    11831173    } else if (key == "U+0059") { // 'y'
    1184         global.yearMonthController.moveRelatively(event.shiftKey ? YearMonthController.PreviousYear : YearMonthController.NextYear);
     1174        this.yearMonthController.moveRelatively(event.shiftKey ? YearMonthController.PreviousYear : YearMonthController.NextYear);
    11851175    } else if (key == "U+0044") { // 'd'
    1186         global.yearMonthController.moveRelatively(event.shiftKey ? YearMonthController.PreviousTenYears : YearMonthController.NextTenYears);
     1176        this.yearMonthController.moveRelatively(event.shiftKey ? YearMonthController.PreviousTenYears : YearMonthController.NextTenYears);
    11871177    } else if (key == "U+001B") // ESC
    1188         handleCancel();
     1178        this.handleCancel();
    11891179}
    11901180
  • trunk/Source/WebCore/Resources/pagepopups/colorSuggestionPicker.js

    r125641 r127727  
    7575}
    7676
    77 var Actions = {
    78     ChooseOtherColor: -2,
    79     Cancel: -1,
    80     SetValue: 0
    81 };
    82 
    83 /**
    84  * @param {string} value
    85  */
    86 function submitValue(value) {
    87     window.pagePopupController.setValueAndClosePopup(Actions.SetValue, value);
    88 }
    89 
    90 function handleCancel() {
    91     window.pagePopupController.setValueAndClosePopup(Actions.Cancel, "");
    92 }
    93 
    94 function chooseOtherColor() {
    95     window.pagePopupController.setValueAndClosePopup(Actions.ChooseOtherColor, "");
    96 }
    97 
    9877function ColorPicker(element, config) {
    99     this._element = element;
     78    Picker.call(this, element, config);
    10079    this._config = config;
    10180    if (this._config.values.length === 0)
     
    10786    this._element.addEventListener("mousedown", bind(this._handleMouseDown, this));
    10887}
     88ColorPicker.prototype = Object.create(Picker.prototype);
    10989
    11090var SwatchBorderBoxWidth = 24; // keep in sync with CSS
     
    131111    this._element.appendChild(container);
    132112    var otherButton = createElement("button", "other-color", this._config.otherColorLabel);
    133     otherButton.addEventListener("click", chooseOtherColor, false);
     113    otherButton.addEventListener("click", this.chooseOtherColor.bind(this), false);
    134114    this._element.appendChild(otherButton);
    135115    this._container = container;
     
    159139    var key = event.keyIdentifier;
    160140    if (key === "U+001B") // ESC
    161         handleCancel();
     141        this.handleCancel();
    162142    else if (key == "Left" || key == "Up" || key == "Right" || key == "Down") {
    163143        var selectedElement = document.activeElement;
     
    195175ColorPicker.prototype._handleSwatchClick = function(event) {
    196176    if (event.target.classList.contains("color-swatch"))
    197         submitValue(event.target.dataset.value);
     177        this.submitValue(event.target.dataset.value);
    198178};
    199179
  • trunk/Source/WebCore/Resources/pagepopups/pickerCommon.js

    r125641 r127727  
    7777    return window.scrollbarWidth;
    7878}
     79
     80/**
     81 * @constructor
     82 * @param {!Element} element
     83 * @param {!Object} config
     84 */
     85function Picker(element, config) {
     86    this._element = element;
     87    this._config = config;
     88}
     89
     90/**
     91 * @enum {number}
     92 */
     93Picker.Actions = {
     94    SetValue: 0,
     95    Cancel: -1,
     96    ChooseOtherColor: -2
     97};
     98
     99/**
     100 * @param {!string} value
     101 */
     102Picker.prototype.submitValue = function(value) {
     103    window.pagePopupController.setValueAndClosePopup(Picker.Actions.SetValue, value);
     104}
     105
     106Picker.prototype.handleCancel = function() {
     107    window.pagePopupController.setValueAndClosePopup(Picker.Actions.Cancel, "");
     108}
     109
     110Picker.prototype.chooseOtherColor = function() {
     111    window.pagePopupController.setValueAndClosePopup(Picker.Actions.ChooseOtherColor, "");
     112}
Note: See TracChangeset for help on using the changeset viewer.