Fix blank page on browsers without support for ResizeObserver

ResizeObserver was used unconditionally, which caused the Calendar to
fail to load and show a blank page on some older browsers without
support for it. Now ResizeObserver is used only when supported.

ResizeObserver ensures that the calendar grid is properly sized when the
navigation bar and sidebar are opened and closed. It also ensures that
the text areas are properly sized when shown in the sidebar.

Given that they are mostly "cosmetic" issues and that they should not
affect many users no fallback was added for those browsers without
support for ResizeObserver.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

src/components/CalendarGrid.vue

@@ -193,13 +193,15 @@ export default {
 	 * update the fullCalendar size, when the available space changes.
 	 */
 	mounted() {
-		const resizeObserver = new ResizeObserver(debounce(() => {
-			this.$refs.fullCalendar
-				.getApi()
-				.updateSize()
-		}, 100))
+		if (window.ResizeObserver) {
+			const resizeObserver = new ResizeObserver(debounce(() => {
+				this.$refs.fullCalendar
+					.getApi()
+					.updateSize()
+			}, 100))
 
-		resizeObserver.observe(this.$refs.fullCalendar.$el)
+			resizeObserver.observe(this.$refs.fullCalendar.$el)
+		}
 	},
 	created() {
 		this.updateTodayJob = setInterval(() => {

src/directives/autosize.js

@@ -22,11 +22,15 @@
 import autosize from 'autosize'
 import debounce from 'debounce'
 
-const resizeObserver = new ResizeObserver(debounce(entries => {
-	for (const entry of entries) {
-		autosize.update(entry.target)
-	}
-}), 20)
+let resizeObserver
+
+if (window.ResizeObserver) {
+	resizeObserver = new ResizeObserver(debounce(entries => {
+		for (const entry of entries) {
+			autosize.update(entry.target)
+		}
+	}), 20)
+}
 
 /**
  * Adds autosize to textarea on bind
@@ -50,7 +54,9 @@ const bind = (el, binding, vnode) => {
 		autosize(el)
 	})
 
-	resizeObserver.observe(el)
+	if (resizeObserver) {
+		resizeObserver.observe(el)
+	}
 }
 
 /**
@@ -79,7 +85,9 @@ const update = (el, binding, vnode) => {
  */
 const unbind = (el) => {
 	autosize.destroy(el)
-	resizeObserver.unobserve(el)
+	if (resizeObserver) {
+		resizeObserver.unobserve(el)
+	}
 }
 
 export default {