Merge pull request #96 from Geoportail-Luxembourg/GSLUX-670-fix-dnd-f…

…irefox

GSLUX-670: Fix drag and drop for firefox

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "start": "npm run dev",
-    "dev": "vite",
+    "dev": "vite --force",
     "build": "run-p type-check build-only",
     "build-only": "vite build",
     "build:lib:prod": "npx vite build --mode prod --config vite-dist.config.ts --minify=esbuild --debug",
@@ -32,7 +32,7 @@
     "mapbox-gl": "^1.7.0",
     "ol": "6.15.0",
     "pinia": "^2.0.26",
-    "sortablejs": "^1.15.0",
+    "sortablejs": "^1.15.2",
     "tailwindcss": "^3.2.4",
     "vue": "^3.2.45",
     "vue-dompurify-html": "^3.1.2"
@@ -46,7 +46,7 @@
     "@types/luxon": "^3.3.1",
     "@types/node": "^18.11.9",
     "@types/proj4": "^2.5.2",
-    "@types/sortablejs": "^1.15.0",
+    "@types/sortablejs": "^1.15.2",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vitest/coverage-c8": "^0.26.2",
     "@vue/eslint-config-prettier": "^7.0.0",

src/assets/main.css

@@ -133,7 +133,7 @@
   }
 
   .lux-sortable-ghost {
-    @apply before:absolute before:w-full before:h-full before:z-10 before:bg-primary before:content-[''];
+    @apply before:absolute before:w-full before:h-[32px] before:z-10 before:bg-primary before:content-[''];
   }
 
   .lux-sortable-drag {

src/components/layer-manager/layer-item/layer-item.spec.ts

@@ -19,7 +19,7 @@ describe('LayerItem', () => {
       props: {
         is3d: false,
         layer: layerMock,
-        draggableClassName: 'classnamedragg',
+        dragHandleClassName: 'classnamedragg',
         isOpen: false,
         isLayerComparatorOpen: false,
         displayLayerComparatorOpen: false,
@@ -39,7 +39,7 @@ describe('LayerItem', () => {
       props: {
         is3d: false,
         layer: layerMock,
-        draggableClassName: 'classnamedragg',
+        dragHandleClassName: 'classnamedragg',
         isOpen: true,
         isLayerComparatorOpen: false,
         displayLayerComparatorOpen: false,
@@ -59,7 +59,7 @@ describe('LayerItem', () => {
       props: {
         is3d: false,
         layer: layerMock,
-        draggableClassName: 'classnamedragg',
+        dragHandleClassName: 'classnamedragg',
         isOpen: true,
         isLayerComparatorOpen: false,
         displayLayerComparatorOpen: false,

src/components/layer-manager/layer-item/layer-item.vue

@@ -11,7 +11,7 @@ import LayerTime from '../layer-time/layer-time.vue'
 const props = defineProps<{
   is3d: boolean
   layer: Layer
-  draggableClassName: string
+  dragHandleClassName: string
   isOpen: boolean
   isLayerComparatorOpen: boolean
   displayLayerComparatorOpen: boolean
@@ -59,7 +59,7 @@ function changeTime(dateStart?: string, dateEnd?: string) {
     <div class="w-full flex flex-nowrap items-start gap-x-2">
       <button
         class="fa-solid fa-bars cursor-move mt-1"
-        :class="draggableClassName"
+        :class="dragHandleClassName"
         :title="txtDraggableLabel"
       ></button>
       <button

src/components/layer-manager/layer-manager.vue

@@ -11,6 +11,7 @@ import type { Layer, LayerId } from '@/stores/map.store.model'
 import { BLANK_BACKGROUNDLAYER } from '@/composables/background-layer/background-layer.model'
 import useMvtStyles from '@/composables/mvt-styles/mvt-styles.composable'
 import { useSliderComparatorStore } from '@/stores/slider-comparator.store'
+import { isFireFox } from '@/services/utils'
 
 import LayerItemBackground from './layer-item/layer-item-background.vue'
 import LayerItem from './layer-item/layer-item.vue'
@@ -28,7 +29,7 @@ const { sliderActive } = storeToRefs(sliderStore)
 const layers = computed(() => [...mapStore.layers].reverse())
 const layers3d = computed(() => [...mapStore.layers3d].reverse())
 const isLayerOpenId: ShallowRef<LayerId | undefined> = shallowRef()
-const draggableClassName = 'drag-handle'
+const dragHandleClassName = 'drag-handle'
 const bgLayerIsEditable = computed(() =>
   styles.isLayerStyleEditable(bgLayer.value)
 )
@@ -37,12 +38,12 @@ const emit = defineEmits(['displayCatalog'])
 const { setRemoteLayersOpen } = useAppStore()
 
 onMounted(() => {
-  const sortableParams = {
-    dataIdAttr: 'data-id',
+  const sortableParams = <Sortable.Options>{
     dragClass: 'lux-sortable-drag',
     ghostClass: 'lux-sortable-ghost',
     sort: true,
-    handle: `.${draggableClassName}`,
+    handle: `.${dragHandleClassName}`,
+    forceFallback: isFireFox, // Otherwise, doesnt work for FF
   }
   const sortableLayersDOM = document.querySelector('.sortable-layers')
   const sortableLayers3dDOM = document.querySelector('.sortable-layers-3d')
@@ -104,7 +105,7 @@ function toggleLayerComparator() {
       >
         <layer-item
           :is3d="true"
-          :draggableClassName="draggableClassName"
+          :dragHandleClassName="dragHandleClassName"
           :layer="layer"
           :isOpen="isLayerOpenId === layer.id"
           :isLayerComparatorOpen="sliderActive"
@@ -131,7 +132,7 @@ function toggleLayerComparator() {
       >
         <layer-item
           :is3d="false"
-          :draggableClassName="draggableClassName"
+          :dragHandleClassName="dragHandleClassName"
           :layer="layer"
           :isOpen="isLayerOpenId === layer.id"
           :isLayerComparatorOpen="sliderActive"

src/services/utils.ts

@@ -48,3 +48,25 @@ export function isHiDpi() {
       '(min-resolution: 192dpi)'
   ).matches
 }
+
+function testUserAgent(pattern: RegExp) {
+  return (
+    typeof window !== 'undefined' &&
+    window.navigator &&
+    pattern.test(navigator.userAgent)
+  )
+}
+
+export const isFireFox = testUserAgent(/firefox/i)
+export const isSafari =
+  testUserAgent(/safari/i) &&
+  !testUserAgent(/chrome/i) &&
+  !testUserAgent(/android/i)
+export const isIOS = testUserAgent(/iP(ad|od|hone)/i)
+export const isChromeAndroid =
+  testUserAgent(/chrome/i) && testUserAgent(/android/i)
+export const isChrome = testUserAgent(/chrome/i)
+export const isIE = testUserAgent(
+  /(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i
+)
+export const isEdge = testUserAgent(/Edge/i)