Mobile-specific tweaks, e.g. new ribbon icon and documentation updates

README.md

@@ -39,8 +39,8 @@ sorting-spec: |
 ---
 ```
 
-Click the ribbon button (![Inactive](./docs/icons/icon-inactive.png)) to tell the plugin to read the sorting specification and apply it.
+Click the ribbon button (![Inactive](./docs/icons/icon-inactive.png) or ![Static icon](./docs/icons/icon-mobile-initial.png) on phone) to tell the plugin to read the sorting specification and apply it.
-The ribbon icon should turn (![Active](./docs/icons/icon-active.png)) and the sorting should be applied to the folder
+The sorting should be applied to the folder. On desktops and tablets the ribbon icon should turn (![Active](./docs/icons/icon-active.png))
 
 !!! **Done!** !!!
 
@@ -115,16 +115,30 @@ Refer to the [TL;DR section of advanced README.md](./advanced-README.md#tldr-usa
 
 Click the ribbon icon to toggle the plugin between enabled and suspended states.
 
-States of the ribbon icon:
+States of the ribbon icon on large-screen devices (desktops, laptops and tablets like iPad):
 
 - ![Inactive](./docs/icons/icon-inactive.png) Plugin suspended. Custom sorting NOT applied.
 - ![Active](./docs/icons/icon-active.png) Plugin active, custom sorting applied.
 - ![Error](./docs/icons/icon-error.png) Syntax error in custom sorting configuration.
 - ![General Error](./docs/icons/icon-general-error.png) Plugin suspended. General error.
-- ![Sorting not applied](./docs/icons/icon-not-applied.png) Plugin enabled but the custom sorting was not applied.
+- ![Sorting not applied](./docs/icons/icon-not-applied.png) Plugin enabled, but the custom sorting was not applied.
+- ![Static icon](./docs/icons/icon-mobile-initial.png) (Only on large-screen mobile devices like iPad). 
+  Plugin enabled. but the custom sorting was not applied.
+
+On small-screen mobile devices (phones) the icon is static:
+
+- ![Static icon](./docs/icons/icon-mobile-initial.png) The icon acts as a button to toggle between enabled and disabled. Its appearance doesn't change
 
 For more details on the icon states refer to [Ribbon icon section of the advanced-README.md](./advanced-README.md#ribbon-icon)
 
+## Small screen mobile devices remarks
+
+- enable mobile-specific notifications
+- use the 'sort on' Obsidian command palette being easily available 
+ (swipe down gesture on small-screen mobiles) allows for quick steering of the plugin via commands: sort-on and sort-off
+
+could need to activate separately, even if on shared vault and active on desktop
+
 ## Installing the plugin
 
 ### From the official Obsidian Community Plugins page

advanced-README.md

@@ -72,11 +72,11 @@ can be the root folder. Ensure the exact file name is `sortspec.md`. That file c
 > > ![sortspec.md](./docs/img/sortspec-md-dark.jpg)
 > 2. Enable the plugin in obsidian.
 >
-> 3. Click the ribbon button (![Inactive](./docs/icons/icon-inactive.png)) to tell the plugin to read the sorting
+> 3. Click the ribbon button (![Inactive](./docs/icons/icon-inactive.png) or ![Mobile](./docs/icons/icon-mobile-initial.png) on phone) to tell the plugin to read the sorting
 specification from `sortspec` note (the `sortspec.md` file which you downloaded a second ago). 
->   - The observable effect should be the change of appearance of the ribbon button to
+>   - The observable effect should be reordering of items in root vault folder to reverse alphabetical with folders and files treated equally.
-(![Active](./docs/icons/icon-active.png)) and reordering
+And on computers and tablets be the change of appearance of the ribbon button to
-of items in root vault folder to reverse alphabetical with folders and files treated equally.
+![Active](./docs/icons/icon-active.png) (on desktop and tablet only) and   
 >   - The notification balloon should confirm success: ![Success](./docs/icons/parsing-succeeded.png)
 > 4. Click the ribbon button again to suspend the plugin. The ribbon button should toggle its appearance again
 and the order of files and folders in the root folder of your vault should get back to the order selected in
@@ -570,7 +570,7 @@ reference.
 
 Click the ribbon icon to toggle the plugin between enabled and suspended states.
 
-States of the ribbon icon:
+States of the ribbon icon on large-screen devices (desktops, laptops and tablets like iPad):
 
 - ![Inactive](./docs/icons/icon-inactive.png) Plugin suspended. Custom sorting NOT applied.
 	- Click to enable and apply custom sorting.
@@ -591,6 +591,14 @@ States of the ribbon icon:
 - ![Sorting not applied](./docs/icons/icon-not-applied.png) Plugin enabled but the custom sorting was not applied.
 	- This can happen when reinstalling the plugin and in similar cases
 	- Click the ribbon icon twice to re-enable the custom sorting.
+- ![Static icon](./docs/icons/icon-mobile-initial.png) Only on large-screen mobile devices like iPad.
+    - Plugin enabled. but the custom sorting was not applied.
+
+On small-screen mobile devices (phones) the icon is static:
+
+- ![Static icon](./docs/icons/icon-mobile-initial.png) The icon acts as a button to toggle between enabled and disabled. Its appearance doesn't change
+    - Click to enable and apply custom sorting or to disable custom sorting
+    - To get notified about custom sort plugin state, enable the mobile-specific notifications in plugin settings
 
 ## Installing the plugin
 

src/custom-sort/icons.ts

@@ -1,6 +1,7 @@
 import {addIcon} from "obsidian";
 
 export const ICON_SORT_ENABLED_ACTIVE: string = 'custom-sort-icon-active'
+export const ICON_SORT_MOBILE_INITIAL: string = 'custom-sort-icon-mobile-initial'
 export const ICON_SORT_SUSPENDED: string = 'custom-sort-icon-suspended'
 export const ICON_SORT_ENABLED_NOT_APPLIED: string = 'custom-sort-icon-enabled-not-applied'
 export const ICON_SORT_SUSPENDED_SYNTAX_ERROR: string = 'custom-sort-icon-syntax-error'
@@ -13,6 +14,12 @@ export function addIcons() {
 <path d="M 11.096126 55.71973 L 20.217128 41.991214 C 21.134003 40.611175 22.99602 40.235707 24.376058 41.15258 C 24.708624 41.373533 24.99374 41.65865 25.21469 41.991214 L 34.33569 55.71973 C 35.252567 57.09977 34.8771 58.96179 33.49706 59.87866 C 33.005085 60.20552 32.42757 60.37988 31.83691 60.37988 L 13.594907 60.37988 C 11.938053 60.37988 10.594907 59.036736 10.594907 57.37988 C 10.594907 56.78922 10.769266 56.21171 11.096126 55.71973 Z" fill="currentColor"/>  
 <path d="M 2.5382185 90.37054 L 20.217128 63.76105 C 21.134003 62.38101 22.99602 62.005545 24.376058 62.92242 C 24.708624 63.14337 24.99374 63.428486 25.21469 63.76105 L 42.8936 90.37054 C 43.810475 91.75058 43.435006 93.6126 42.05497 94.52947 C 41.562993 94.85633 40.985477 95.03069 40.39482 95.03069 L 5.0369993 95.03069 C 3.380145 95.03069 2.0369993 93.68755 2.0369993 92.03069 C 2.0369993 91.44004 2.2113584 90.86252 2.5382185 90.37054 Z" fill="currentColor"/>  
 <path d="M 88.33569 46.24901 L 79.21469 59.97753 C 78.297815 61.35757 76.4358 61.73304 75.05576 60.81616 C 74.72319 60.59521 74.43808 60.310096 74.21713 59.97753 L 65.09613 46.24901 C 64.17925 44.868973 64.55472 43.006957 65.93476 42.09008 C 66.42673 41.76322 67.00425 41.588863 67.59491 41.588863 L 85.83691 41.588863 C 87.49377 41.588863 88.83691 42.93201 88.83691 44.58886 C 88.83691 45.17952 88.66255 45.757036 88.33569 46.24901 Z" fill="currentColor"/>  
+<path d="M 88.33569 77.48964 L 79.21469 91.21816 C 78.297815 92.5982 76.4358 92.97366 75.05576 92.05679 C 74.72319 91.83584 74.43808 91.55072 74.21713 91.21816 L 65.09613 77.48964 C 64.17925 76.1096 64.55472 74.247585 65.93476 73.33071 C 66.42673 73.00385 67.00425 72.82949 67.59491 72.82949 L 85.83691 72.82949 C 87.49377 72.82949 88.83691 74.17264 88.83691 75.82949 C 88.83691 76.42015 88.66255 76.99766 88.33569 77.48964 Z"  fill="currentColor"/>`
+	)
+	addIcon(ICON_SORT_MOBILE_INITIAL,
+		`<path d="M 93.54751 9.983795 L 79.21469 31.556912 C 78.297815 32.93695 76.4358 33.31242 75.05576 32.395544 C 74.72319 32.174593 74.43808 31.88948 74.21713 31.556912 L 59.8843 9.983795 C 58.96743 8.603756 59.3429 6.74174 60.722935 5.824865 C 61.21491 5.4980047 61.792426 5.3236456 62.383084 5.3236456 L 91.04873 5.3236456 C 92.70559 5.3236456 94.04873 6.666791 94.04873 8.323646 C 94.04873 8.914304 93.87437 9.49182 93.54751 9.983795 Z" fill="currentColor"/>  
+<path d="M 11.096126 55.71973 L 20.217128 41.991214 C 21.134003 40.611175 22.99602 40.235707 24.376058 41.15258 C 24.708624 41.373533 24.99374 41.65865 25.21469 41.991214 L 34.33569 55.71973 C 35.252567 57.09977 34.8771 58.96179 33.49706 59.87866 C 33.005085 60.20552 32.42757 60.37988 31.83691 60.37988 L 13.594907 60.37988 C 11.938053 60.37988 10.594907 59.036736 10.594907 57.37988 C 10.594907 56.78922 10.769266 56.21171 11.096126 55.71973 Z" fill="currentColor"/>  
+<path d="M 2.5382185 90.37054 L 20.217128 63.76105 C 21.134003 62.38101 22.99602 62.005545 24.376058 62.92242 C 24.708624 63.14337 24.99374 63.428486 25.21469 63.76105 L 42.8936 90.37054 C 43.810475 91.75058 43.435006 93.6126 42.05497 94.52947 C 41.562993 94.85633 40.985477 95.03069 40.39482 95.03069 L 5.0369993 95.03069 C 3.380145 95.03069 2.0369993 93.68755 2.0369993 92.03069 C 2.0369993 91.44004 2.2113584 90.86252 2.5382185 90.37054 Z" fill="currentColor"/>  
 <path d="M 88.33569 77.48964 L 79.21469 91.21816 C 78.297815 92.5982 76.4358 92.97366 75.05576 92.05679 C 74.72319 91.83584 74.43808 91.55072 74.21713 91.21816 L 65.09613 77.48964 C 64.17925 76.1096 64.55472 74.247585 65.93476 73.33071 C 66.42673 73.00385 67.00425 72.82949 67.59491 72.82949 L 85.83691 72.82949 C 87.49377 72.82949 88.83691 74.17264 88.83691 75.82949 C 88.83691 76.42015 88.66255 76.99766 88.33569 77.48964 Z"  fill="currentColor"/>`
 	)
 	addIcon(ICON_SORT_SUSPENDED,

src/main.ts

@@ -4,6 +4,7 @@ import {
 	MetadataCache,
 	Notice,
 	normalizePath,
+	Platform,
 	Plugin,
 	PluginSettingTab,
 	sanitizeHTMLToDom,
@@ -23,6 +24,7 @@ import {
 	addIcons,
 	ICON_SORT_ENABLED_ACTIVE,
 	ICON_SORT_ENABLED_NOT_APPLIED,
+	ICON_SORT_MOBILE_INITIAL,
 	ICON_SORT_SUSPENDED,
 	ICON_SORT_SUSPENDED_GENERAL_ERROR,
 	ICON_SORT_SUSPENDED_SYNTAX_ERROR
@@ -33,13 +35,15 @@ interface CustomSortPluginSettings {
 	suspended: boolean
 	statusBarEntryEnabled: boolean
 	notificationsEnabled: boolean
+	mobileNotificationsEnabled: boolean
 }
 
 const DEFAULT_SETTINGS: CustomSortPluginSettings = {
 	additionalSortspecFile: '',
 	suspended: true,  // if false by default, it would be hard to handle the auto-parse after plugin install
 	statusBarEntryEnabled: true,
-	notificationsEnabled: true
+	notificationsEnabled: true,
+	mobileNotificationsEnabled: false
 }
 
 const SORTSPEC_FILE_NAME: string = 'sortspec.md'
@@ -53,8 +57,8 @@ type MonkeyAroundUninstaller = () => void
 export default class CustomSortPlugin extends Plugin {
 	settings: CustomSortPluginSettings
 	statusBarItemEl: HTMLElement
-	ribbonIconEl: HTMLElement
+	ribbonIconEl: HTMLElement     // On small-screen mobile devices this is useless (ribbon is re-created on-the-fly)
-	ribbonIconStateInaccurate: boolean
+	ribbonIconStateInaccurate: boolean                                             // each time when displayed
 
 	sortSpecCache?: SortSpecsCollection | null
 	initialAutoOrManualSortingTriggered: boolean
@@ -62,7 +66,7 @@ export default class CustomSortPlugin extends Plugin {
 	fileExplorerFolderPatched: boolean
 
 	showNotice(message: string, timeout?: number) {
-		if (this.settings.notificationsEnabled) {
+		if (this.settings.notificationsEnabled || (Platform.isMobile && this.settings.mobileNotificationsEnabled)) {
 			new Notice(message, timeout)
 		}
 	}
@@ -202,6 +206,8 @@ export default class CustomSortPlugin extends Plugin {
 		}
 
 		if (updateRibbonBtnIcon) {
+			// REMARK: on small-screen mobile devices this is void, the handle to ribbon <div> Element is useless,
+			        // as the ribbon (and its icons) get re-created each time when re-displayed (expanded)
 			setIcon(this.ribbonIconEl, iconToSet)
 		}
 
@@ -222,8 +228,14 @@ export default class CustomSortPlugin extends Plugin {
 		addIcons();
 
 		// Create an icon button in the left ribbon.
+		//   REMARK: on small-screen mobile devices, the ribbon is dynamically re-created each time when displayed
+		//           in result, the handle to the ribbon <div> Element is useless
 		this.ribbonIconEl = this.addRibbonIcon(
-			this.settings.suspended ? ICON_SORT_SUSPENDED : ICON_SORT_ENABLED_NOT_APPLIED,
+			Platform.isDesktop ?
+				(this.settings.suspended ? ICON_SORT_SUSPENDED : ICON_SORT_ENABLED_NOT_APPLIED)
+				:
+				ICON_SORT_MOBILE_INITIAL // REMARK: on small-screen mobile devices this icon stays permanent
+			,
 			'Toggle custom sorting', (evt: MouseEvent) => {
 				// Clicking the icon toggles between the states of custom sort plugin
 				this.switchPluginStateTo(this.settings.suspended)
@@ -454,5 +466,15 @@ class CustomSortSettingTab extends PluginSettingTab {
 					this.plugin.settings.notificationsEnabled = value;
 					await this.plugin.saveSettings();
 				}));
+
+		new Setting(containerEl)
+			.setName('Enable notifications of plugin state changes for mobile devices only')
+			.setDesc('See above.')
+			.addToggle(toggle => toggle
+				.setValue(this.plugin.settings.mobileNotificationsEnabled)
+				.onChange(async (value) => {
+					this.plugin.settings.mobileNotificationsEnabled = value;
+					await this.plugin.saveSettings();
+				}));
 	}
 }