Moved the header to the calendar and separate the year and month view.

caribouflex · Mar 21, 2018 · c765948 · c765948
1 parent 8dd7403
commit c765948
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 106 deletions.
diff --git a/caribou-calendar.html b/caribou-calendar.html
@@ -1,4 +1,5 @@
 <link rel="import" href="../polymer/polymer-element.html">
+<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="caribou-month.html">
 <link rel="import" href="caribou-year.html">
 
@@ -8,10 +9,49 @@
             :host {
                 display: block;
             }
+
+            .header {
+                padding: 10px 0;
+                width: 100%;
+                background: #009688;
+                @apply --layout-vertical;
+            }
+
+            .header paper-button {
+                --paper-button: {
+                    display: block;
+                }
+            }
+
+            .focus {
+                color: #ffffff;
+            }
+
+            .focus-secondary {
+                color: #B2DFDB;
+            }
+
+            #fullDateValue {
+                font-size: 35px;
+                margin: 0;
+                padding: 0 30px;
+            }
+
+            #yearValue {
+                font-size: 20px;
+                margin: 0;
+                padding: 0 30px;
+            }
         </style>
 
-        <caribou-month date="{{date}}" month={{month}} year="{{year}}"></caribou-month>
-        <caribou-year year="{{year}}"></caribou-year>
+        <div class="header">
+            <paper-button noink id="yearValue" class="focus-secondary" on-tap="monthToYear">{{yearTemp}}</paper-button>
+            <paper-button noink id="fullDateValue" class="focus" on-tap="yearToMonth">{{_getDateString(date)}}</paper-button>
+        </div>
+
+        <caribou-month id="caribouMonth" date="{{date}}" month="{{month}}" day="{{day}}" year="{{year}}" year-temp="{{yearTemp}}"
+            hidden$="{{!isMonthView}}"></caribou-month>
+        <caribou-year id="caribouYear" year="{{yearTemp}}" hidden$="{{isMonthView}}"></caribou-year>
 
     </template>
 
@@ -32,14 +72,22 @@
             static get properties() {
                 return {
                     year: Number,
-                    month:Number,
-                    date:Number
+                    month: Number,
+                    date: Number,
+                    day: Number,
+
+                    isMonthView: {
+                        type: Boolean,
+                        value: true
+                    }
                 };
             }
 
             ready() {
                 super.ready();
-               // this.getCurrentDate();
+                this.$.caribouMonth.addEventListener("display-year-view", this._toggleView.bind(this));
+                this.$.caribouYear.addEventListener("year-selected", this._toggleView.bind(this));
+                // this.getCurrentDate();
             }
 
             /**
@@ -56,6 +104,32 @@
                 this.currentDay = today.getDay();
                 this.day = this.currentDay;
             }
+
+            _toggleView(e) {
+                if (e.type === "year-selected") {
+                    this.yearToMonth();
+                    this.$.caribouMonth.yearTemp = Number(e.detail.year);
+                }
+            }
+
+            yearToMonth(e) {
+                if (!this.isMonthView)
+                    this.isMonthView = !this.isMonthView;
+            }
+
+            monthToYear(e) {
+                if (this.isMonthView)
+                    this.isMonthView = !this.isMonthView;
+            }
+
+            _getDateString(date) {
+                if (this.day !== undefined)
+                    var dayString = this.$.caribouMonth.getDayValue(this.day, true);
+                if (this.month !== undefined)
+                    var monthString = this.$.caribouMonth.getMonthValue(this.month, true);
+
+                return dayString + ", " + monthString + " " + date;
+            }
         }
 
         window.customElements.define(CaribouCalendarElement.is, CaribouCalendarElement);

diff --git a/caribou-datepicker-overlay.html b/caribou-datepicker-overlay.html
@@ -1,29 +1,24 @@
 <link rel="import" href="../polymer/polymer-element.html">
-<link rel="import" href="caribou-month.html">
-<link rel="import" href="caribou-year.html">
-
-<!-- <link rel="import" href="caribou-calendar.html"> -->
+<link rel="import" href="caribou-calendar.html">
 
 <dom-module id="caribou-datepicker-overlay">
     <template>
         <style>
             :host {
-                background-color:#ffffff;
+                background-color: #ffffff;
                 display: block;
                 width: 350px;
+                height: 480px;
                 overflow: hidden;
             }
         </style>
-
-        <!-- <caribou-calendar></caribou-calendar> -->
-        <caribou-month id="caribouMonth" date="{{date}}" month={{month}} year="{{year}}" year-temp="{{yearTemp}}"></caribou-month>
-        <caribou-year id="caribouYear" year="{{yearTemp}}" hidden></caribou-year>
+        <caribou-calendar id="caribouCalendar" date="{{date}}" month={{month}} year="{{year}}"></caribou-calendar>
+
     </template>
 
     <script>
         /**
-         * `caribou-datepicker`
-         * Polymer 2 element used to select a date picker following material design.
+         * `caribou-datepicker-overlay`
          *
          * @customElement
          * @polymer
@@ -50,23 +45,6 @@
                     }
                 };
             }
-
-            ready() {
-                super.ready();
-                this.$.caribouMonth.addEventListener("display-year-view", this._toggleView.bind(this));
-                this.$.caribouYear.addEventListener("year-selected", this._toggleView.bind(this));
-            }
-
-            _toggleView(e) {
-                if (e.type === "display-year-view") {
-                    this.$.caribouMonth.setAttribute("hidden", true);
-                    this.$.caribouYear.removeAttribute("hidden");
-                } else if (e.type === "year-selected") {
-                    this.$.caribouMonth.yearTemp = Number(e.detail.year);
-                    this.$.caribouYear.setAttribute("hidden", true);
-                    this.$.caribouMonth.removeAttribute("hidden");
-                }
-            }
         }
 
         window.customElements.define(CaribouDatepickerOverlayElement.is, CaribouDatepickerOverlayElement);

diff --git a/caribou-datepicker.html b/caribou-datepicker.html
@@ -7,6 +7,7 @@
 <link rel="import" href="caribou-date-input.html">
 <link rel="import" href="caribou-datepicker-custom-icons.html">
 <link rel="import" href="caribou-datepicker-overlay.html">
+<link rel="import" href="caribou-calendar.html">
 
 
 
@@ -33,8 +34,8 @@
       <paper-icon-button id="calendarIcon" slot="suffix" on-tap="open" icon="caribou-datepicker-icons:calendar"></paper-icon-button>
       <paper-input-error slot="add-on">Error!</paper-input-error>
     </paper-input-container>
-
-    <iron-dropdown id="dropdown" opened>
+  
+    <iron-dropdown id="dropdown">
       <div slot="dropdown-content">
         <caribou-datepicker-overlay date="{{date}}" month="{{month}}" year="{{year}}"></caribou-datepicker-overlay>
       </div>