Changeset 144298 in webkit


Ignore:
Timestamp:
Feb 28, 2013 5:05:56 AM (11 years ago)
Author:
keishi@webkit.org
Message:

Add calendar header for new calendar picker
https://bugs.webkit.org/show_bug.cgi?id=110967

Reviewed by Kent Tamura.

The calendar header showing the current month and containing navigation
buttons, which will be part of the new calendar picker (Bug 109439).

No new tests. Code is not yet used.

  • Resources/pagepopups/calendarPicker.js:

(MonthPopupButton): Button that opens the month popup.
(MonthPopupButton.prototype._shouldUseShortMonth): Returns true if we should use the short month format in order to fit in the available width.
(MonthPopupButton.prototype.setCurrentMonth): Sets the month to the button label.
(MonthPopupButton.prototype.onClick): Dispatches buttonClick event which will tell the calendar picker to open the month popup.
(CalendarNavigationButton): A square button that fires repeatedly while the mouse is pressed down.
(CalendarNavigationButton.prototype.setDisabled):
(CalendarNavigationButton.prototype.onClick):
(CalendarNavigationButton.prototype.onMouseDown): Sets the timer to fire while the mouse is pressed down.
(CalendarNavigationButton.prototype.onWindowMouseUp):
(CalendarNavigationButton.prototype.onRepeatingClick):
(CalendarHeaderView): View containing month popup button and the navigation buttons.
(CalendarHeaderView.prototype.onCurrentMonthChanged): Sets the MonthPopupButton label and checks if the navigation buttons should be disabled.
(CalendarHeaderView.prototype.onNavigationButtonClick):
(CalendarHeaderView.prototype.setDisabled): Used to disable all the buttons while the month popup is open.

Location:
trunk/Source/WebCore
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/Source/WebCore/ChangeLog

    r144295 r144298  
     12013-02-28  Keishi Hattori  <keishi@webkit.org>
     2
     3        Add calendar header for new calendar picker
     4        https://bugs.webkit.org/show_bug.cgi?id=110967
     5
     6        Reviewed by Kent Tamura.
     7
     8        The calendar header showing the current month and containing navigation
     9        buttons, which will be part of the new calendar picker (Bug 109439).
     10
     11        No new tests. Code is not yet used.
     12
     13        * Resources/pagepopups/calendarPicker.js:
     14        (MonthPopupButton): Button that opens the month popup.
     15        (MonthPopupButton.prototype._shouldUseShortMonth): Returns true if we should use the short month format in order to fit in the available width.
     16        (MonthPopupButton.prototype.setCurrentMonth): Sets the month to the button label.
     17        (MonthPopupButton.prototype.onClick): Dispatches buttonClick event which will tell the calendar picker to open the month popup.
     18        (CalendarNavigationButton): A square button that fires repeatedly while the mouse is pressed down.
     19        (CalendarNavigationButton.prototype.setDisabled):
     20        (CalendarNavigationButton.prototype.onClick):
     21        (CalendarNavigationButton.prototype.onMouseDown): Sets the timer to fire while the mouse is pressed down.
     22        (CalendarNavigationButton.prototype.onWindowMouseUp):
     23        (CalendarNavigationButton.prototype.onRepeatingClick):
     24        (CalendarHeaderView): View containing month popup button and the navigation buttons.
     25        (CalendarHeaderView.prototype.onCurrentMonthChanged): Sets the MonthPopupButton label and checks if the navigation buttons should be disabled.
     26        (CalendarHeaderView.prototype.onNavigationButtonClick):
     27        (CalendarHeaderView.prototype.setDisabled): Used to disable all the buttons while the month popup is open.
     28
    1292013-02-28  Pavel Feldman  <pfeldman@chromium.org>
    230
  • trunk/Source/WebCore/Resources/pagepopups/calendarPicker.js

    r144254 r144298  
    25002500        return;
    25012501    this.hide();
     2502};
     2503
     2504/**
     2505 * @constructor
     2506 * @extends View
     2507 * @param {!number} maxWidth Maximum width in pixels.
     2508 */
     2509function MonthPopupButton(maxWidth) {
     2510    View.call(this, createElement("button", MonthPopupButton.ClassNameMonthPopupButton));
     2511
     2512    /**
     2513     * @type {!Element}
     2514     * @const
     2515     */
     2516    this.labelElement = createElement("span", MonthPopupButton.ClassNameMonthPopupButtonLabel, "-----");
     2517    this.element.appendChild(this.labelElement);
     2518
     2519    /**
     2520     * @type {!Element}
     2521     * @const
     2522     */
     2523    this.disclosureTriangleIcon = createElement("span", MonthPopupButton.ClassNameDisclosureTriangle);
     2524    this.disclosureTriangleIcon.innerHTML = "<svg width='7' height='5'><polygon points='0,1 7,1 3.5,5' style='fill:#000000;' /></svg>";
     2525    this.element.appendChild(this.disclosureTriangleIcon);
     2526
     2527    /**
     2528     * @type {!boolean}
     2529     * @protected
     2530     */
     2531    this._useShortMonth = this._shouldUseShortMonth(maxWidth);
     2532    this.element.style.maxWidth = maxWidth + "px";
     2533
     2534    this.element.addEventListener("click", this.onClick, false);
     2535}
     2536
     2537MonthPopupButton.prototype = Object.create(View.prototype);
     2538
     2539MonthPopupButton.ClassNameMonthPopupButton = "month-popup-button";
     2540MonthPopupButton.ClassNameMonthPopupButtonLabel = "month-popup-button-label";
     2541MonthPopupButton.ClassNameDisclosureTriangle = "disclosure-triangle";
     2542MonthPopupButton.EventTypeButtonClick = "buttonClick";
     2543
     2544/**
     2545 * @param {!number} maxWidth Maximum available width in pixels.
     2546 * @return {!boolean}
     2547 */
     2548MonthPopupButton.prototype._shouldUseShortMonth = function(maxWidth) {
     2549    document.body.appendChild(this.element);
     2550    var month = Month.Maximum;
     2551    for (var i = 0; i < MonthsPerYear; ++i) {
     2552        this.labelElement.textContent = month.toLocaleString();
     2553        if (this.element.offsetWidth > maxWidth)
     2554            return true;
     2555        month = month.previous();
     2556    }
     2557    document.body.removeChild(this.element);
     2558    return false;
     2559};
     2560
     2561/**
     2562 * @param {!Month} month
     2563 */
     2564MonthPopupButton.prototype.setCurrentMonth = function(month) {
     2565    this.labelElement.textContent = this._useShortMonth ? month.toShortLocaleString() : month.toLocaleString();
     2566};
     2567
     2568/**
     2569 * @param {?Event} event
     2570 */
     2571MonthPopupButton.prototype.onClick = function(event) {
     2572    this.dispatchEvent(MonthPopupButton.EventTypeButtonClick, this);
     2573};
     2574
     2575/**
     2576 * @constructor
     2577 * @extends View
     2578 */
     2579function CalendarNavigationButton() {
     2580    View.call(this, createElement("button", CalendarNavigationButton.ClassNameCalendarNavigationButton));
     2581    /**
     2582     * @type {number} Threshold for starting repeating clicks in milliseconds.
     2583     */
     2584    this.repeatingClicksStartingThreshold = CalendarNavigationButton.DefaultRepeatingClicksStartingThreshold;
     2585    /**
     2586     * @type {number} Interval between reapeating clicks in milliseconds.
     2587     */
     2588    this.reapeatingClicksInterval = CalendarNavigationButton.DefaultRepeatingClicksInterval;
     2589    this._timer = null;
     2590    this.element.addEventListener("click", this.onClick, false);
     2591    this.element.addEventListener("mousedown", this.onMouseDown, false);
     2592};
     2593
     2594CalendarNavigationButton.prototype = Object.create(View.prototype);
     2595
     2596CalendarNavigationButton.DefaultRepeatingClicksStartingThreshold = 600;
     2597CalendarNavigationButton.DefaultRepeatingClicksInterval = 300;
     2598CalendarNavigationButton.LeftMargin = 4;
     2599CalendarNavigationButton.Width = 24;
     2600CalendarNavigationButton.ClassNameCalendarNavigationButton = "calendar-navigation-button";
     2601CalendarNavigationButton.EventTypeButtonClick = "buttonClick";
     2602CalendarNavigationButton.EventTypeRepeatingButtonClick = "repeatingButtonClick";
     2603
     2604/**
     2605 * @param {!boolean} disabled
     2606 */
     2607CalendarNavigationButton.prototype.setDisabled = function(disabled) {
     2608    this.element.disabled = disabled;
     2609};
     2610
     2611/**
     2612 * @param {?Event} event
     2613 */
     2614CalendarNavigationButton.prototype.onClick = function(event) {
     2615    this.dispatchEvent(CalendarNavigationButton.EventTypeButtonClick, this);
     2616};
     2617
     2618/**
     2619 * @param {?Event} event
     2620 */
     2621CalendarNavigationButton.prototype.onMouseDown = function(event) {
     2622    this._timer = setTimeout(this.onRepeatingClick, this.repeatingClicksStartingThreshold);
     2623    window.addEventListener("mouseup", this.onWindowMouseUp, false);
     2624};
     2625
     2626/**
     2627 * @param {?Event} event
     2628 */
     2629CalendarNavigationButton.prototype.onWindowMouseUp = function(event) {
     2630    clearTimeout(this._timer);
     2631    window.removeEventListener("mouseup", this.onWindowMouseUp, false);
     2632};
     2633
     2634/**
     2635 * @param {?Event} event
     2636 */
     2637CalendarNavigationButton.prototype.onRepeatingClick = function(event) {
     2638    this.dispatchEvent(CalendarNavigationButton.EventTypeRepeatingButtonClick, this);
     2639    this._timer = setTimeout(this.onRepeatingClick, this.reapeatingClicksInterval);
     2640};
     2641
     2642/**
     2643 * @constructor
     2644 * @extends View
     2645 * @param {!CalendarPicker} calendarPicker
     2646 */
     2647function CalendarHeaderView(calendarPicker) {
     2648    View.call(this, createElement("div", CalendarHeaderView.ClassNameCalendarHeaderView));
     2649    this.calendarPicker = calendarPicker;
     2650    this.calendarPicker.on(CalendarPicker.EventTypeCurrentMonthChanged, this.onCurrentMonthChanged);
     2651   
     2652    var titleElement = createElement("div", CalendarHeaderView.ClassNameCalendarTitle);
     2653    this.element.appendChild(titleElement);
     2654
     2655    /**
     2656     * @type {!MonthPopupButton}
     2657     */
     2658    this.monthPopupButton = new MonthPopupButton(this.calendarPicker.calendarTableView.width() - CalendarTableView.BorderWidth * 2 - CalendarNavigationButton.Width * 3 - CalendarNavigationButton.LeftMargin * 2);
     2659    this.monthPopupButton.attachTo(titleElement);
     2660
     2661    /**
     2662     * @type {!CalendarNavigationButton}
     2663     * @const
     2664     */
     2665    this._previousMonthButton = new CalendarNavigationButton();
     2666    this._previousMonthButton.attachTo(this);
     2667    this._previousMonthButton.on(CalendarNavigationButton.EventTypeButtonClick, this.onNavigationButtonClick);
     2668    this._previousMonthButton.on(CalendarNavigationButton.EventTypeRepeatingButtonClick, this.onNavigationButtonClick);
     2669
     2670    /**
     2671     * @type {!CalendarNavigationButton}
     2672     * @const
     2673     */
     2674    this._todayButton = new CalendarNavigationButton();
     2675    this._todayButton.attachTo(this);
     2676    this._todayButton.on(CalendarNavigationButton.EventTypeButtonClick, this.onNavigationButtonClick);
     2677    this._todayButton.element.classList.add(CalendarHeaderView.ClassNameTodayButton);
     2678    var monthContainingToday = Month.createFromToday();
     2679    this._todayButton.setDisabled(monthContainingToday < this.calendarPicker.minimumMonth || monthContainingToday > this.calendarPicker.maximumMonth);
     2680
     2681    /**
     2682     * @type {!CalendarNavigationButton}
     2683     * @const
     2684     */
     2685    this._nextMonthButton = new CalendarNavigationButton();
     2686    this._nextMonthButton.attachTo(this);
     2687    this._nextMonthButton.on(CalendarNavigationButton.EventTypeButtonClick, this.onNavigationButtonClick);
     2688    this._nextMonthButton.on(CalendarNavigationButton.EventTypeRepeatingButtonClick, this.onNavigationButtonClick);
     2689
     2690    if (global.params.isLocaleRTL) {
     2691        this._nextMonthButton.element.innerHTML = CalendarHeaderView._BackwardTriangle;
     2692        this._previousMonthButton.element.innerHTML = CalendarHeaderView._ForwardTriangle;
     2693    } else {
     2694        this._nextMonthButton.element.innerHTML = CalendarHeaderView._ForwardTriangle;
     2695        this._previousMonthButton.element.innerHTML = CalendarHeaderView._BackwardTriangle;
     2696    }
     2697}
     2698
     2699CalendarHeaderView.prototype = Object.create(View.prototype);
     2700
     2701CalendarHeaderView.Height = 24;
     2702CalendarHeaderView.BottomMargin = 10;
     2703CalendarHeaderView._ForwardTriangle = "<svg width='4' height='7'><polygon points='0,7 0,0, 4,3.5' style='fill:#6e6e6e;' /></svg>";
     2704CalendarHeaderView._BackwardTriangle = "<svg width='4' height='7'><polygon points='0,3.5 4,7 4,0' style='fill:#6e6e6e;' /></svg>";
     2705CalendarHeaderView.ClassNameCalendarHeaderView = "calendar-header-view";
     2706CalendarHeaderView.ClassNameCalendarTitle = "calendar-title";
     2707CalendarHeaderView.ClassNameTodayButton = "today-button";
     2708
     2709CalendarHeaderView.prototype.onCurrentMonthChanged = function() {
     2710    this.monthPopupButton.setCurrentMonth(this.calendarPicker.currentMonth());
     2711    this._previousMonthButton.setDisabled(this.disabled || this.calendarPicker.currentMonth() <= this.calendarPicker.minimumMonth);
     2712    this._nextMonthButton.setDisabled(this.disabled || this.calendarPicker.currentMonth() >= this.calendarPicker.maximumMonth);
     2713};
     2714
     2715CalendarHeaderView.prototype.onNavigationButtonClick = function(sender) {
     2716    if (sender === this._previousMonthButton)
     2717        this.calendarPicker.setCurrentMonth(this.calendarPicker.currentMonth().previous(), CalendarPicker.NavigationBehaviour.WithAnimation);
     2718    else if (sender === this._nextMonthButton)
     2719        this.calendarPicker.setCurrentMonth(this.calendarPicker.currentMonth().next(), CalendarPicker.NavigationBehaviour.WithAnimation);
     2720    else
     2721        this.calendarPicker.selectRangeContainingDay(Day.createFromToday());
     2722};
     2723
     2724/**
     2725 * @param {!boolean} disabled
     2726 */
     2727CalendarHeaderView.prototype.setDisabled = function(disabled) {
     2728    this.disabled = disabled;
     2729    this.monthPopupButton.element.disabled = this.disabled;
     2730    this._previousMonthButton.setDisabled(this.disabled || this.calendarPicker.currentMonth() <= this.calendarPicker.minimumMonth);
     2731    this._nextMonthButton.setDisabled(this.disabled || this.calendarPicker.currentMonth() >= this.calendarPicker.maximumMonth);
     2732    var monthContainingToday = Month.createFromToday();
     2733    this._todayButton.setDisabled(this.disabled || monthContainingToday < this.calendarPicker.minimumMonth || monthContainingToday > this.calendarPicker.maximumMonth);
    25022734};
    25032735
Note: See TracChangeset for help on using the changeset viewer.