Difference between revisions of "Extensions:Touchscreen Sortable"
(Creation of Touchscreen Sortable) Tag: 2017 source edit |
m Tag: 2017 source edit |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| − | {{Extensioninfobox|title=Touchscreen Sortable|desc=Uses a library to allow touchscreens to use jQuery UI elements (namely, sortable)|auth=Min|status=Stable|github={{Github|user=liwoyadan|branch=touchscreen-sortable}}|LKVer=3.0.0|migration=no|package=no}} | + | {{Extensioninfobox|title=Touchscreen Sortable|desc=Uses a library to allow touchscreens to use jQuery UI elements (namely, sortable)|auth=Min|status=Stable|github={{Github|user=liwoyadan|branch=extension/touchscreen-sortable}}|LKVer=3.0.0|migration=no|package=no}} |
| + | {| style="margin: 4px auto; width: 80%; border: 1px solid #9ADC38; background: #A1F524;" | ||
| + | |- | ||
| + | | '''<u>THIS EXTENSION IS PART OF v3.1.0 (develop)</u>''' | ||
| + | |- | ||
| + | | This extension has been merged into the v3.1.0 (develop) branch as [https://github.com/corowne/lorekeeper/pull/1111 allow jquery-ui mouse interactions to be used on touch screens]. | ||
| + | |- | ||
| + | | Site owners on v3.0.0 can pull the [https://github.com/liwoyadan/lorekeeper/tree/extension/touchscreen-sortable extension/touchscreen-portable] branch to add this functionality to their site without pulling develop. | ||
| + | |} | ||
This minor extension adds a JavaScript library, [https://github.com/furf/jquery-ui-touch-punch furf/jquery-ui-touch-punch] to allow users on touchscreen devices (i.e. mobile phones, iPads) to be able to use features from the jQuery UI library that normally relies on mouse events - namely sortable in Lorekeeper's case - via touch events on the screen instead. Additionally for users on a touchscreen device who visits the <code>/characters</code> or <code>/character/{slug}/images</code> pages, there is some additional JavaScript that will detect your touchscreen device and generate a drag icon handle on the upper right corner of the images instead, so those users may scroll or otherwise touch things in the sortable container without triggering the sortable itself. | This minor extension adds a JavaScript library, [https://github.com/furf/jquery-ui-touch-punch furf/jquery-ui-touch-punch] to allow users on touchscreen devices (i.e. mobile phones, iPads) to be able to use features from the jQuery UI library that normally relies on mouse events - namely sortable in Lorekeeper's case - via touch events on the screen instead. Additionally for users on a touchscreen device who visits the <code>/characters</code> or <code>/character/{slug}/images</code> pages, there is some additional JavaScript that will detect your touchscreen device and generate a drag icon handle on the upper right corner of the images instead, so those users may scroll or otherwise touch things in the sortable container without triggering the sortable itself. | ||
| Line 10: | Line 18: | ||
== Usage == | == Usage == | ||
Touchscreen users can simply begin to use sortable elements (i.e. admin panel drag and drop sorting) normally through touch. This has been tested on iPhone, iPad, and Android devices. | Touchscreen users can simply begin to use sortable elements (i.e. admin panel drag and drop sorting) normally through touch. This has been tested on iPhone, iPad, and Android devices. | ||
| + | |||
| + | Desktop browser developer tools with touch simulation enabled will also successfully trigger the drag handles to appear on the character/character image thumbnails and will allow you to click and drag to interact with them. However, this may sometimes act a little laggy or otherwise glitchy in some browsers (namely Firefox from what I've seen, though it seems to work smoothly on Google Chrome and Vivaldi from the ones I've tested on) which may be because the developer tools are only simulating touch events and aren't actual touch events? Otherwise, it seems to work just fine on actual touch devices. | ||
| + | |||
== Images == | == Images == | ||
<gallery> | <gallery> | ||
Latest revision as of 22:03, 13 November 2024
| Description | Uses a library to allow touchscreens to use jQuery UI elements (namely, sortable) |
|---|---|
| Author(s) | Min |
| Status | Stable |
| Github | extension/touchscreen-sortable |
| LK Version | 3.0.0 |
| THIS EXTENSION IS PART OF v3.1.0 (develop) |
| This extension has been merged into the v3.1.0 (develop) branch as allow jquery-ui mouse interactions to be used on touch screens. |
| Site owners on v3.0.0 can pull the extension/touchscreen-portable branch to add this functionality to their site without pulling develop. |
This minor extension adds a JavaScript library, furf/jquery-ui-touch-punch to allow users on touchscreen devices (i.e. mobile phones, iPads) to be able to use features from the jQuery UI library that normally relies on mouse events - namely sortable in Lorekeeper's case - via touch events on the screen instead. Additionally for users on a touchscreen device who visits the /characters or /character/{slug}/images pages, there is some additional JavaScript that will detect your touchscreen device and generate a drag icon handle on the upper right corner of the images instead, so those users may scroll or otherwise touch things in the sortable container without triggering the sortable itself.
Installation
You just need to pull and merge the branch. No migrations or composer usage necessary.
Configuration
Nothing needs to be configured, but if you want to get rid of the drag icons on /characters or /character/{slug}/images or otherwise reuse the code snippets from there, you will want to check the files resources/views/home/characters.blade.php and resources/views/character/images.blade.php.
The JavaScript there will attempt to create a touch event on your device to determine if it's a touchscreen or not. This means that if you are on a non-touchscreen computer and have developer tools open with touch simulation enabled, it will also trigger the drag icons.
Usage
Touchscreen users can simply begin to use sortable elements (i.e. admin panel drag and drop sorting) normally through touch. This has been tested on iPhone, iPad, and Android devices.
Desktop browser developer tools with touch simulation enabled will also successfully trigger the drag handles to appear on the character/character image thumbnails and will allow you to click and drag to interact with them. However, this may sometimes act a little laggy or otherwise glitchy in some browsers (namely Firefox from what I've seen, though it seems to work smoothly on Google Chrome and Vivaldi from the ones I've tested on) which may be because the developer tools are only simulating touch events and aren't actual touch events? Otherwise, it seems to work just fine on actual touch devices.
Images
The drag handle on the /characters page visible on touch devices.
The drag handle on the /character/{slug}/images page visible on touch devices.
Troubleshooting
You can ask for help in the Lorekeeper Discord server.
Credits
As mentioned, this uses the furf/jquery-ui-touch-punch library which is under the MIT and GPL Version 2 licenses and are free to use, modify, and/or distribute with attribution. The creator asks that their Touch Punch website be linked, but at the time of writing this wiki page (October 2024), it is currently inaccessible.
