Merge pull request #4761 from nextcloud-libraries/feat/is-mobile--is-…

…fullscreen--composables

feat: introduce `useIsMobile` and `useIsFullscreen` composables

src/components/NcAppContent/NcAppContent.vue

@@ -116,7 +116,7 @@ The list size must be between the min and the max width value.
 
 <script>
 import NcAppDetailsToggle from './NcAppDetailsToggle.vue'
-import isMobile from '../../mixins/isMobile/index.js'
+import { useIsMobile } from '../../composables/useIsMobile/index.js'
 
 import { getBuilder } from '@nextcloud/browser-storage'
 import { emit } from '@nextcloud/event-bus'
@@ -140,8 +140,6 @@ export default {
 		Splitpanes,
 	},
 
-	mixins: [isMobile],
-
 	props: {
 		/**
 		 * Allows to disable the control by swipe of the app navigation open state
@@ -211,6 +209,12 @@ export default {
 		'resize:list',
 	],
 
+	setup() {
+		return {
+			isMobile: useIsMobile(),
+		}
+	},
+
 	data() {
 		return {
 			contentHeight: 0,

src/components/NcAppNavigation/NcAppNavigation.vue

@@ -81,7 +81,7 @@ emit('toggle-navigation', {
 
 <script>
 import NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'
-import isMobile from '../../mixins/isMobile/index.js'
+import { useIsMobile } from '../../composables/useIsMobile/index.js'
 import { getTrapStack } from '../../utils/focusTrap.js'
 
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
@@ -95,7 +95,11 @@ export default {
 		NcAppNavigationToggle,
 	},
 
-	mixins: [isMobile],
+	setup() {
+		return {
+			isMobile: useIsMobile(),
+		}
+	},
 
 	props: {
 		/**

src/components/NcAppNavigationItem/NcAppNavigationItem.vue

@@ -371,7 +371,7 @@ import NcActionButton from '../NcActionButton/index.js'
 import NcLoadingIcon from '../NcLoadingIcon/index.js'
 import NcVNodes from '../NcVNodes/index.js'
 import NcAppNavigationIconCollapsible from './NcAppNavigationIconCollapsible.vue'
-import isMobile from '../../mixins/isMobile/index.js'
+import { useIsMobile } from '../../composables/useIsMobile/index.js'
 import NcInputConfirmCancel from './NcInputConfirmCancel.vue'
 import { t } from '../../l10n.js'
 import GenRandomId from '../../utils/GenRandomId.js'
@@ -393,8 +393,6 @@ export default {
 		Undo,
 	},
 
-	mixins: [isMobile],
-
 	props: {
 		/**
 		 * If you are not using vue-router you can use the property to set this item as the active navigation entry.
@@ -600,6 +598,12 @@ export default {
 		'undo',
 	],
 
+	setup() {
+		return {
+			isMobile: useIsMobile(),
+		}
+	},
+
 	data() {
 		return {
 			editingValue: '',

src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue

@@ -177,7 +177,7 @@ export default {
 <script>
 import NcDialog from '../NcDialog/index.js'
 import NcVNodes from '../NcVNodes/index.js'
-import isMobile from '../../mixins/isMobile/index.js'
+import { useIsMobile } from '../../composables/useIsMobile/index.js'
 import { t } from '../../l10n.js'
 
 import debounce from 'debounce'
@@ -191,7 +191,6 @@ export default {
 		NcVNodes,
 	},
 
-	mixins: [isMobile],
 	provide() {
 		return {
 			registerSection: this.registerSection,
@@ -243,6 +242,12 @@ export default {
 
 	emits: ['update:open'],
 
+	setup() {
+		return {
+			isMobile: useIsMobile(),
+		}
+	},
+
 	data() {
 		return {
 			selectedSection: '',

src/composables/index.js

@@ -0,0 +1,2 @@
+export * from './useIsFullscreen/index.js'
+export * from './useIsMobile/index.js'

src/composables/useIsFullscreen/index.js

@@ -0,0 +1,50 @@
+/**
+ * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ * @author Grigorii K. Shartsev <me@shgk.me>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { readonly, ref } from 'vue'
+
+// if the window height is equal to the screen height,
+// we're in full screen mode
+const checkIfIsFullscreen = () => window.outerHeight === screen.height
+
+const isFullscreen = ref(checkIfIsFullscreen())
+
+window.addEventListener('resize', () => {
+	isFullscreen.value = checkIfIsFullscreen()
+})
+
+/**
+ * Use global isFullscreen state, based on the screen height check
+ *
+ * @return {import('vue').DeepReadonly<import('vue').Ref<boolean>>}
+ */
+export function useIsFullscreen() {
+	return readonly(isFullscreen)
+}
+
+/**
+ * @deprecated Is to be removed in v9.0.0 with Vue 3 migration.
+ *             Use `composables/useIsFullscreen` instead.
+ *             Defined and exported only for isFullscreen mixin.
+ */
+export const isFullscreenState = readonly(isFullscreen)

src/composables/useIsMobile/index.js

@@ -0,0 +1,52 @@
+/**
+ * @copyright Copyright (c) 2023 Grigorii K. Shartsev <me@shgk.me>
+ *
+ * @author Grigorii K. Shartsev <me@shgk.me>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { readonly, ref } from 'vue'
+
+/**
+ * The minimal width of the viewport to be considered a desktop device
+ */
+export const MOBILE_BREAKPOINT = 1024
+
+const checkIfIsMobile = () => document.documentElement.clientWidth < MOBILE_BREAKPOINT
+
+const isMobile = ref(checkIfIsMobile())
+
+window.addEventListener('resize', () => {
+	isMobile.value = checkIfIsMobile()
+})
+
+/**
+ * Use global isMobile state, based on the viewport width
+ *
+ * @return {import('vue').DeepReadonly<import('vue').Ref<boolean>>}
+ */
+export function useIsMobile() {
+	return readonly(isMobile)
+}
+
+/**
+ * @deprecated Is to be removed in v9.0.0 with Vue 3 migration.
+ *             Use `composables/useIsMobile` instead.
+ *             Defined and exported only for isMobile mixin.
+ */
+export const isMobileState = readonly(isMobile)

src/mixins/isFullscreen/index.js

@@ -20,27 +20,16 @@
  *
  */
 
+import { isFullscreenState } from '../../composables/useIsFullscreen/index.js'
+
 export default {
-	data() {
-		return {
-			isFullscreen: this._isFullscreen(),
-		}
-	},
-	beforeMount() {
-		window.addEventListener('resize', this._onResize)
-	},
-	beforeDestroy() {
-		window.removeEventListener('resize', this._onResize)
-	},
-	methods: {
-		_onResize() {
-			// Update fullscreen mode
-			this.isFullscreen = this._isFullscreen()
-		},
-		_isFullscreen() {
-			// if the window height is equal to the screen height,
-			// we're in full screen mode
-			return window.outerHeight === screen.height
+	computed: {
+		/**
+		 * @deprecated Is to be removed in v9.0.0 with Vue 3 migration.
+		 *             Use `composables/useIsFullscreen` instead.
+		 */
+		isFullscreen() {
+			return isFullscreenState.value
 		},
 	},
 }

src/mixins/isMobile/index.js

@@ -20,24 +20,16 @@
  *
  */
 
-import { IsMobileState } from '../../utils/IsMobileState.js'
+import { isMobileState } from '../../composables/useIsMobile/index.js'
 
 export default {
-	data() {
-		return {
-			isMobile: false,
-		}
-	},
-	mounted() {
-		IsMobileState.$on('changed', this.onIsMobileChanged)
-		this.isMobile = IsMobileState.isMobile
-	},
-	beforeDestroy() {
-		IsMobileState.$off('changed', this.onIsMobileChanged)
-	},
-	methods: {
-		onIsMobileChanged(val) {
-			this.isMobile = val
+	computed: {
+		/**
+		 * @deprecated Is to be removed in v9.0.0 with Vue 3 migration.
+		 *             Use `composables/useIsMobile` instead.
+		 */
+		isMobile() {
+			return isMobileState.value
 		},
 	},
 }