Jstefaniuk/hybridize

.editorconfig

@@ -1,13 +1,13 @@
-root = true
-
-[*]
-charset = utf8
-end_of_line = lf
-trim_trailing_whitespace = true
-insert_final_newline = true
-indent_style = tab
-indent_size = 4
-
-[{package.json,.travis.yml}]
-indent_style = space
-indent_size = 2
+root = true
+
+[*]
+charset = utf8
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = tab
+indent_size = 4
+
+[{*.json,*.yml}]
+indent_style = space
+indent_size = 2

.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": "brightspace/polymer-config",
+  "globals": {
+    "d2lIntl": true,
+    "fastdom": false
+  }
+}

.gitignore

@@ -1,2 +1,4 @@
 bower_components
+bower_components-1.x
+bower-1.x.json
 node_modules

.travis.yml

@@ -1,7 +1,9 @@
 language: node_js
-node_js: node
-before_script:
-- npm install -g polymer-cli
-- polymer install --variants
+node_js: 9
 script:
-- npm run test:lint
+- npm run lint
+- polymer test --skip-plugin local
+env:
+  global:
+  - SAUCE_USERNAME: Desire2Learn
+  - secure: R9nrpeyuMcZTHnBcVAuMn+q/Fp9ti9K31tYlkBFhXtJc+rM/TYERiN195SRgbk2Gy6fK4exUXIWZtJW+cxuRwDoBIcSGWRwHWmkDc5k13kLaW/BcdWAfI/yFEkAwzrO1AfQOsB1qdbfYle9pP724BebfQHlqAxH9zNWlQdek+Gr02WKKXMWWhl2bH4P2QbNQItD5X6+xQTbnbmZnUECap9mQXbCzPVNU2MwvPRLuYuJmjcNBdC39iGfZNBY/+N1Ix3y6yFa41VD773KiqTZhVOM1TvVJz/lb+Dm25qSZdKixC0987eDY5zHiCigHIjJxo1bDwJz4xJ/DsnIo+hk0LvrOPvoxBp6tFNhGQgIUkwk0Lz6FsNQcH5l5QLh1ROq4isNx9BVEOHb+W1PdFzFlvoKf9+WS/ysSw19B/GFhtLJGTmGkaxnEBxhJ+DyiVnV5APV+cE4AEA4yB/Vz7cKOrBlLbZdZFb8x9DtHamKvyoZh7RVun6BHSmMNAlPD83oxF9HZ7GjhKeC1EpvIdSrZAh6NKgklt0slwSumWU6VfJeoT4STNfiP39DzHHtWqscwTTAG9Rp4UFxDRsz6jCWaPf7AfYe85fXp+EwBRC0RYikQz43IFnKoGpz69qNh4vap6HNPQmM2uctZeWbhtDSq2FzN5fbheSV5QlFeq88O4S8=

CODEOWNERS

@@ -0,0 +1 @@
+* @alogan519 @d2l-pbrown

README.md

@@ -40,8 +40,11 @@ The label for the input field
 #### 'locale'
 The locale for the picker, for example, 'en', 'fr'...
 
-#### 'date-format'
-The date format for the input field, for example, 'yyyy/mm/dd', 'dd/mm/yyyy', etc...
-
 #### 'first-day-of-week'
 The first day of the week for the date picker, (0 = Sunday, 1 = Monday, 2 = Tuesday, 3 = Wednesday, 4 = Thursday, 5 = Friday, 6 = Saturday)
+
+#### 'custom-overlay-style'
+Allows the user to provide the `--vaadin-date-picker-overlay` mixin when set to true.
+
+## Overriding the date format
+This repository uses https://github.com/BrightspaceUI/localize-behavior for formatting dates, if you need to override the date format, look there for instructions.

bower.json

@@ -2,26 +2,50 @@
   "name": "d2l-date-picker",
   "description": "A Date Picker for D2L Brightspace",
   "main": "d2l-date-picker.html",
+  "license": "Apache-2.0",
+  "ignore": [
+    "demo",
+    "test",
+    ".editorconfig",
+    ".eslintrc.json",
+    ".gitignore",
+    ".travis.yml",
+    "package.json",
+    "polymer.json",
+    "wct.conf.json"
+  ],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.9.0",
-    "d2l-time-picker": "BrightspaceUI/time-picker#^0.3.0",
-    "vaadin-date-picker": "~1.2.3",
-    "d2l-colors": "^2.4.0",
-    "d2l-intl": "^0.4.1",
-    "iron-a11y-keys": "^1.0.9",
-    "app-localize-behavior": "~1.0.2",
+    "d2l-localize-behavior": "^1.1.0",
+    "d2l-colors": "^3.1.2",
+    "d2l-fastdom-import": "Brightspace/fastdom-import#^1.0.0",
     "d2l-offscreen": "^3.0.1",
-    "d2l-polymer-behaviors": "^1.0.0"
+    "d2l-polymer-behaviors": "^1.0.0",
+    "d2l-time-picker": "BrightspaceUI/time-picker#^1.0.0",
+    "iron-a11y-keys": "^2.0.0",
+    "iron-input": "^2.0.0",
+    "polymer": "1.9 - 2",
+    "vaadin-date-picker": "Brightspace/vaadin-date-picker#1 - 2"
   },
   "devDependencies": {
-    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
-    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
-    "iron-test-helpers": "^1.0.0"
+    "iron-component-page": "PolymerElements/iron-component-page#^2.0.0",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
+    "iron-test-helpers": "^2.0.0",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0"
+  },
+  "variants": {
+    "1.x": {
+      "dependencies": {
+        "polymer": "^1.9.1",
+        "vaadin-date-picker": "Brightspace/vaadin-date-picker#^1.2.6"
+      },
+      "resolutions": {
+        "iron-a11y-keys-behavior": "1 - 2",
+        "iron-selector": "1 - 2",
+        "webcomponentsjs": "^0.7.24"
+      }
+    }
   },
   "resolutions": {
-    "d2l-offscreen": "^3.0.1",
-    "d2l-polymer-behaviors": "^1.0.0"
+    "vaadin-date-picker": "^2.0.0"
   }
 }

d2l-date-picker-behavior.html

@@ -0,0 +1,208 @@
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../d2l-fastdom-import/fastdom.html">
+<link rel="import" href="localize-behavior.html">
+
+<script>
+	window.D2L = window.D2L || {};
+	window.D2L.PolymerBehaviors = window.D2L.PolymerBehaviors || {};
+	window.D2L.PolymerBehaviors.DatePicker = window.D2L.PolymerBehaviors.DatePicker || {};
+
+	/** @polymerBehavior D2L.PolymerBehaviors.DatePicker.DatePickerBehavior */
+	D2L.PolymerBehaviors.DatePicker.DatePickerBehaviorImpl = {
+		properties: {
+			_target: {
+				type: Object
+			},
+			_descriptionId: {
+				type: String
+			},
+			placeholder: {
+				type: String
+			},
+			min: {
+				type: String
+			},
+			max: {
+				type: String
+			},
+			label: {
+				type: String
+			},
+			hideLabel: {
+				type: Boolean,
+				value: false,
+				reflectToAttribute: true
+			},
+			description:{
+				type: String
+			},
+			locale: {
+				type: String,
+				value: 'en'
+			},
+			firstDayOfWeek: {
+				type: Number,
+				value: 0
+			},
+			value: {
+				type: String,
+				reflectToAttribute: true,
+				notify: true
+			},
+			customOverlayStyle: {
+				type: Boolean,
+				reflectToAttribute: true,
+				value: false
+			}
+		},
+
+		observers: [
+			'_updateDatePickeri18n( locale, localize, firstDayOfWeek )',
+			'_localeChanged( locale )'
+		],
+
+		ready: function() {
+			this._descriptionId = D2L.Id.getUniqueId();
+			this._handleValueChanged = this._handleValueChanged.bind(this);
+
+			if (this._isPolymer2()) {
+				this._setUpChangeEventListenerPolymer2();
+			}
+		},
+
+		attached: function() {
+			var buttons = document.getElementsByClassName('vaadin-date-picker-overlay paper-button-0');
+
+			fastdom.mutate(function() {
+				for (var i = 0; i < buttons.length; i++) {
+					buttons[i].style.fontFamily = 'inherit';
+				}
+			});
+		},
+
+		detached: function() {
+			if (this._isPolymer2()) {
+				this.removeEventListener('value-changed', this._handleValueChanged);
+			}
+			this._changeListener = null;
+		},
+
+		_setUpChangeEventListenerPolymer2: function() {
+			// on-value-changed got removed for the Polymer2 version of vaadin-date-picker,
+			// so for Polymer2 we'll set our own event
+			this.addEventListener('value-changed', this._handleValueChanged);
+		},
+
+		_isPolymer2: function() {
+			return !!Polymer.Element;
+		},
+
+		_handleValueChangedPolymer1: function(e) {
+			// using the `value-changed` listener sometimes sends 2 events in the
+			// Polymer 1 vaadin-date-picker when in shadyDom, so this function listens to
+			// on-value-changed from the vaadin-date-picker (removed in Polymer 2)
+			if (this._isPolymer2()) {
+				return;
+			}
+			this._handleValueChanged(e);
+		},
+
+		_handleValueChanged: function(e) {
+			this.dispatchEvent(new CustomEvent('d2l-date-picker-value-changed', {
+				detail: e.detail,
+				bubbles: true
+			}));
+		},
+
+		_handleTap: function() {
+			var datepicker = this.$$('vaadin-date-picker-light');
+			if (!datepicker.opened) {
+				datepicker._focusOverlayOnOpen = true;
+			}
+		},
+
+		onEnter: function(e) {
+			var datepicker = this.$$('vaadin-date-picker-light');
+			if (!datepicker.opened) {
+				// A better solution is to add a boolean to the 3rd party open function
+				datepicker._focusOverlayOnOpen = true;
+				datepicker.open();
+				e.detail.keyboardEvent.preventDefault();
+				e.detail.keyboardEvent.stopPropagation();
+			}
+
+		},
+
+		onUpDown: function(e) {
+			var datepicker = this.$$('vaadin-date-picker-light');
+			if (!datepicker.opened) {
+				e.detail.keyboardEvent.preventDefault();
+				e.detail.keyboardEvent.stopPropagation();
+			}
+		},
+
+		_handleFocus: function() {
+			// in shady DOM the input's "focus" event does not bubble,
+			// so no need to fire it
+			if (!Polymer.Settings.useShadow) {
+				this.dispatchEvent(new CustomEvent(
+					'focus',
+					{ bubbles: true, composed: false }
+				));
+			}
+		},
+
+		_localeChanged: function(locale) {
+			this.language = locale;
+		},
+
+		_updateDatePickeri18n: function() {
+			var locale = d2lIntl.LocaleProvider(this.locale);
+
+			var datePicker = this.$$('vaadin-date-picker-light');
+			var localeOverrides = {
+				monthNames: locale.date.calendar.months.long,
+				weekdays: locale.date.calendar.days.long,
+				weekdaysShort: locale.date.calendar.days.short,
+				firstDayOfWeek: this.firstDayOfWeek ? this.firstDayOfWeek : locale.date.calendar.firstDayOfWeek,
+				today: this.localize('today'),
+				cancel: this.localize('cancel'),
+				formatDate: function(date) {
+					return this.formatDate(date);
+				}.bind(this),
+				parseDate: function(dateString) {
+					try {
+						return this.parseDate(dateString);
+					} catch (exception) {
+						return null;
+					}
+				}.bind(this)
+			};
+			var datePickerLocale = this._merge(datePicker.i18n, localeOverrides);
+			datePicker.i18n = {}; // reassign to have Polymer refresh
+			datePicker.i18n = datePickerLocale;
+		},
+
+		_merge: function(obj1, obj2) {
+			if (obj2 === undefined || obj2 === null || typeof(obj2) !== 'object') {
+				return obj1;
+			}
+			Object.keys(obj2).forEach(function(i) {
+				if (obj1.hasOwnProperty(i)) {
+					if (typeof(obj2[i]) === 'object' && typeof(obj1[i]) === 'object') {
+						this._merge(obj1[i], obj2[i]);
+					} else {
+						obj1[i] = obj2[i];
+					}
+				}
+			}.bind(this));
+			return obj1;
+		}
+	};
+
+	/** @polymerBehavior D2L.PolymerBehaviors.DatePicker.DatePickerBehavior */
+	D2L.PolymerBehaviors.DatePicker.DatePickerBehavior = [
+		D2L.PolymerBehaviors.DatePicker.LocalizeBehavior,
+		D2L.PolymerBehaviors.DatePicker.DatePickerBehaviorImpl
+	];
+</script>