Merge pull request #1402 from lucasnetau/fb-touch-sort

Implement field action buttons to sort form elements from touchscreen devices not supported by jQuery sortable
kevinchappell · Sep 12, 2023 · ac4cdd1 · ac4cdd1
2 parents 9da1bdc + 54fa332
commit ac4cdd1
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 3 deletions.
diff --git a/src/fonts/config.json b/src/fonts/config.json
@@ -210,6 +210,18 @@
       "css": "cancel",
       "code": 59404,
       "src": "mfglabs"
+    },
+    {
+      "uid": "720f98e7580b7987c8dc542513d1d440",
+      "css": "sort-higher",
+      "code": 61814,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "f06941dfcb90dc24b987d810898c4310",
+      "css": "sort-lower",
+      "code": 61813,
+      "src": "fontawesome"
     }
   ]
 }
diff --git a/src/fonts/formbuilder-icons.woff b/src/fonts/formbuilder-icons.woff
diff --git a/src/js/form-builder.js b/src/js/form-builder.js
@@ -1052,6 +1052,18 @@ function FormBuilder(opts, element, $) {
         className: `copy-button btn ${css_prefix_text}copy`,
         title: mi18n.get('copyButtonTooltip'),
       }),
+      m('a', null, {
+        type: 'sort',
+        id: data.lastID + '-sort-higher',
+        className: `sort-button sort-button-higher btn ${css_prefix_text}sort-higher`,
+        title: 'Move Higher',
+      }),
+      m('a', null, {
+        type: 'sort',
+        id: data.lastID + '-sort-lower',
+        className: `sort-button sort-button-lower btn ${css_prefix_text}sort-lower`,
+        title: 'Move Lower',
+      })
     ]
 
     if (enhancedBootstrapEnabled()) {
@@ -1828,7 +1840,7 @@ function FormBuilder(opts, element, $) {
   })
 
   // Copy field
-  $stage.on('click touchstart', `.${css_prefix_text}copy`, function (evt) {
+  $stage.on('click', `.${css_prefix_text}copy`, function (evt) {
     evt.preventDefault()
     const currentItem = $(evt.target).parent().parent('li')
     const $clone = cloneItem(currentItem)
@@ -1877,7 +1889,7 @@ function FormBuilder(opts, element, $) {
   }
 
   // Delete field
-  $stage.on('click touchstart', '.delete-confirm', e => {
+  $stage.on('click', '.delete-confirm', e => {
     e.preventDefault()
 
     const buttonPosition = e.target.getBoundingClientRect()
@@ -2295,6 +2307,43 @@ function FormBuilder(opts, element, $) {
     })
   }
 
+  //Mobile support for sortable fields
+  $stage.on('click', '.field-actions .sort-button', function (evt) {
+    evt.preventDefault()
+    const currentItem = $(evt.target).parent().parent('li')
+    let swap
+    if ($(evt.target).hasClass('sort-button-higher')) {
+      swap = currentItem.prev('li')
+      if (swap.length) {
+        currentItem.insertBefore(swap)
+      }
+    } else {
+      swap = currentItem.next('li')
+      if (swap.length) {
+        currentItem.insertAfter(swap)
+      }
+    }
+
+    if (swap.length) {
+      //Animate the flashing of the background and border of the element was moved
+      currentItem.css({
+        'border-color': '#66afe9',
+        'outline': 0,
+        'box-shadow': 'inset 0 1px 1px rgba(0,0,0,.1),0 0 8px rgba(102,175,233,.6)',
+        'background-color': '#b7d6f5',
+      }).delay('fast')
+        .queue(function(next) {
+          $(this).css({
+            'border-color': '',
+            'outline': '',
+            'box-shadow': '',
+            'background-color': ''
+          })
+          next()
+        })
+    }
+  })
+
   // Update button style selection
   $stage.on('click', '.style-wrap button', e => {
     const $button = $(e.target)