Extensions:Touchscreen Sortable - Revision history

Liwoyadan at 06:03, 14 November 2024

2024-11-14T06:03:54Z

Liwoyadan at 06:03, 14 November 2024

2024-11-14T06:03:32Z

Liwoyadan at 03:31, 14 November 2024

2024-11-14T03:31:35Z

Liwoyadan: /* Usage */

2024-11-01T06:58:45Z

Usage

Liwoyadan at 02:51, 31 October 2024

2024-10-31T02:51:57Z

Liwoyadan: Creation of Touchscreen Sortable

2024-10-31T01:37:26Z

Creation of Touchscreen Sortable

New page

{{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}}
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.

== 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 <code>/characters</code> or <code>/character/{slug}/images</code> or otherwise reuse the code snippets from there, you will want to check the files <code>resources/views/home/characters.blade.php</code> and <code>resources/views/character/images.blade.php</code>.

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.
== Images ==
<gallery>
File:Characters Sortable.png|alt=The 'My Characters' page of a Lorekeeper site displaying a circular pointer finger icon as a drag handle on the top right corner of character thumbnails|The drag handle on the /characters page visible on touch devices.
File:Character Images Sortable.png|alt=The images page of a character displaying a circular pointer finger icon as a drag handle on the top right corner of the image thumbnails|The drag handle on the /character/{slug}/images page visible on touch devices.
</gallery>
== Troubleshooting ==
You can ask for help in the Lorekeeper Discord server.
== Credits ==
As mentioned, this uses the [https://github.com/furf/jquery-ui-touch-punch 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 [http://touchpunch.furf.com/ Touch Punch website] be linked, but at the time of writing this wiki page (October 2024), it is currently inaccessible.

@@ Line 5: / Line 5: @@
 |-
 | 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.
 |}

@@ Line 5: / Line 5: @@
 |-
 | 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].
 |}
 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.

← Older revision		Revision as of 03:31, 14 November 2024
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=extension/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].
		+	\|}
	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.

← Older revision		Revision as of 02:51, 31 October 2024
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}}
	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 10: @@
 == 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.
 == Images ==
 <gallery>