Changeset 144298 in webkit
- Timestamp:
- Feb 28, 2013 5:05:56 AM (11 years ago)
- Location:
- trunk/Source/WebCore
- Files:
-
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebCore/ChangeLog
r144295 r144298 1 2013-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 1 29 2013-02-28 Pavel Feldman <pfeldman@chromium.org> 2 30 -
trunk/Source/WebCore/Resources/pagepopups/calendarPicker.js
r144254 r144298 2500 2500 return; 2501 2501 this.hide(); 2502 }; 2503 2504 /** 2505 * @constructor 2506 * @extends View 2507 * @param {!number} maxWidth Maximum width in pixels. 2508 */ 2509 function 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 2537 MonthPopupButton.prototype = Object.create(View.prototype); 2538 2539 MonthPopupButton.ClassNameMonthPopupButton = "month-popup-button"; 2540 MonthPopupButton.ClassNameMonthPopupButtonLabel = "month-popup-button-label"; 2541 MonthPopupButton.ClassNameDisclosureTriangle = "disclosure-triangle"; 2542 MonthPopupButton.EventTypeButtonClick = "buttonClick"; 2543 2544 /** 2545 * @param {!number} maxWidth Maximum available width in pixels. 2546 * @return {!boolean} 2547 */ 2548 MonthPopupButton.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 */ 2564 MonthPopupButton.prototype.setCurrentMonth = function(month) { 2565 this.labelElement.textContent = this._useShortMonth ? month.toShortLocaleString() : month.toLocaleString(); 2566 }; 2567 2568 /** 2569 * @param {?Event} event 2570 */ 2571 MonthPopupButton.prototype.onClick = function(event) { 2572 this.dispatchEvent(MonthPopupButton.EventTypeButtonClick, this); 2573 }; 2574 2575 /** 2576 * @constructor 2577 * @extends View 2578 */ 2579 function 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 2594 CalendarNavigationButton.prototype = Object.create(View.prototype); 2595 2596 CalendarNavigationButton.DefaultRepeatingClicksStartingThreshold = 600; 2597 CalendarNavigationButton.DefaultRepeatingClicksInterval = 300; 2598 CalendarNavigationButton.LeftMargin = 4; 2599 CalendarNavigationButton.Width = 24; 2600 CalendarNavigationButton.ClassNameCalendarNavigationButton = "calendar-navigation-button"; 2601 CalendarNavigationButton.EventTypeButtonClick = "buttonClick"; 2602 CalendarNavigationButton.EventTypeRepeatingButtonClick = "repeatingButtonClick"; 2603 2604 /** 2605 * @param {!boolean} disabled 2606 */ 2607 CalendarNavigationButton.prototype.setDisabled = function(disabled) { 2608 this.element.disabled = disabled; 2609 }; 2610 2611 /** 2612 * @param {?Event} event 2613 */ 2614 CalendarNavigationButton.prototype.onClick = function(event) { 2615 this.dispatchEvent(CalendarNavigationButton.EventTypeButtonClick, this); 2616 }; 2617 2618 /** 2619 * @param {?Event} event 2620 */ 2621 CalendarNavigationButton.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 */ 2629 CalendarNavigationButton.prototype.onWindowMouseUp = function(event) { 2630 clearTimeout(this._timer); 2631 window.removeEventListener("mouseup", this.onWindowMouseUp, false); 2632 }; 2633 2634 /** 2635 * @param {?Event} event 2636 */ 2637 CalendarNavigationButton.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 */ 2647 function 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 2699 CalendarHeaderView.prototype = Object.create(View.prototype); 2700 2701 CalendarHeaderView.Height = 24; 2702 CalendarHeaderView.BottomMargin = 10; 2703 CalendarHeaderView._ForwardTriangle = "<svg width='4' height='7'><polygon points='0,7 0,0, 4,3.5' style='fill:#6e6e6e;' /></svg>"; 2704 CalendarHeaderView._BackwardTriangle = "<svg width='4' height='7'><polygon points='0,3.5 4,7 4,0' style='fill:#6e6e6e;' /></svg>"; 2705 CalendarHeaderView.ClassNameCalendarHeaderView = "calendar-header-view"; 2706 CalendarHeaderView.ClassNameCalendarTitle = "calendar-title"; 2707 CalendarHeaderView.ClassNameTodayButton = "today-button"; 2708 2709 CalendarHeaderView.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 2715 CalendarHeaderView.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 */ 2727 CalendarHeaderView.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); 2502 2734 }; 2503 2735
Note: See TracChangeset
for help on using the changeset viewer.