v1.10.1

Author: Ajit Kumar

.vscode/plugins.json

@@ -1 +1 @@
-{"plugins":["cordova-plugin-buildinfo","cordova-plugin-device","cordova-plugin-file","cordova-plugin-ftp","cordova-plugin-iap","cordova-plugin-sdcard","cordova-plugin-server","cordova-plugin-sftp","cordova-clipboard","cordova-plugin-browser","cordova-plugin-system"]}
+{"plugins":["cordova-plugin-buildinfo","cordova-plugin-device","cordova-plugin-file","cordova-plugin-ftp","cordova-plugin-iap","cordova-plugin-sdcard","cordova-plugin-server","cordova-plugin-sftp","cordova-clipboard","cordova-plugin-browser","cordova-plugin-system","cordova-plugin-consent","admob-plus-cordova"]}

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Change Log
 
+## [1.10.1]
+
+- New
+  - [x] **Updated Ace editor** | 946
+    - Updated Ace editor to version 1.32.9
+- Fixes
+  - [x] **Scrolling** | 946
+    - Fixed scrollbars not showing up properly.
+
 ## [1.10.0]
 
 - New
@@ -12,8 +21,6 @@
     - Fixed updates for plugin not showing up.
   - [x] **Markdown** | 945
     - Fixed markdown preview not working properly.
-
-- Fixes
   - [x] **Text selection** | 937
     - Fixed context menu not showing up when selecting all text from context menu after click and hold.
 

config.xml

@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8' ?>
-<widget id="com.foxdebug.acode" android-versionCode="945" version="1.10.0"
+<widget id="com.foxdebug.acode" android-versionCode="946" version="1.10.1"
     xmlns="http://www.w3.org/ns/widgets"
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:cdv="http://cordova.apache.org/ns/1.0">

src/ace/touchHandler.js

@@ -526,10 +526,7 @@ export default function addTouchListeners(editor, minimal, onclick) {
     const hDirection = moveX > 0 ? RIGHT : LEFT;
 
     const { getEditorHeight, getEditorWidth } = editorManager;
-    // Why I used it in first place?
-    // const { scrollLeft } = editor.renderer.scrollBarH;
     const scrollLeft = editor.renderer.getScrollLeft();
-    // const { scrollTop } = editor.renderer.scrollBarV;
     const scrollTop = editor.renderer.getScrollTop();
     const [editorWidth, editorHeight] = [getEditorWidth(editor), getEditorHeight(editor)];
 
@@ -986,6 +983,7 @@ export default function addTouchListeners(editor, minimal, onclick) {
    * Editor container on scroll end
    */
   function onscrollend() {
+    scrollTimeout = null;
     editor._emit('scroll-end');
     if (!touchEnded) return;
 
@@ -1011,6 +1009,11 @@ export default function addTouchListeners(editor, minimal, onclick) {
    * Editor container on change session
    */
   function onchangesession() {
+    if (scrollTimeout) {
+      clearTimeout(scrollTimeout);
+      onscrollend();
+    }
+
     cancelAnimationFrame(scrollAnimationFrame);
     setTimeout(() => {
       const copyText = editor.session.getTextRange(editor.getSelectionRange());

src/components/scrollbar/index.js

@@ -2,13 +2,15 @@ import './style.scss';
 import tag from 'html-tag-js';
 
 /**
- * @typedef {HTMLElement} Scrollbar
+ * @typedef {object} Scrollbar
  * @property {function():void} destroy
  * @property {function():void} render
  * @property {function():void} show
  * @property {function():void} hide
  * @property {function():void} resize
  * @property {function():void} onshow
+ * @property {function():void} onhide
+ * @property {function():void} hideImmediately
  * @property {number} value
  * @property {number} size
  * @property {boolean} visible
@@ -22,7 +24,7 @@ import tag from 'html-tag-js';
  * @param {Number} [options.width]
  * @param {function():void} [options.onscroll]
  * @param {function():void} [options.onscrollend]
- * @returns {Scrollbar}
+ * @returns {Scrollbar & HTMLElement}
  */
 export default function ScrollBar(options) {
   if (!options || !options.parent) {
@@ -225,6 +227,13 @@ export default function ScrollBar(options) {
     if (typeof onhide === 'function') onhide();
   }
 
+  function hideImmediately() {
+    $scrollbar.dataset.hidden = true;
+    $scrollbar.classList.add('hide');
+    $scrollbar.remove();
+    if (typeof onhide === 'function') onhide();
+  }
+
   Object.defineProperty($scrollbar, 'size', {
     get: () => scrollbarSize,
     set: setWidth,
@@ -279,5 +288,9 @@ export default function ScrollBar(options) {
     },
   });
 
+  Object.defineProperty($scrollbar, 'hideImmediately', {
+    value: hideImmediately,
+  });
+
   return $scrollbar;
 }

src/index.d.ts

@@ -8,6 +8,7 @@ declare const KEYBINDING_FILE: string;
 declare const IS_FREE_VERSION: string;
 declare const ANDROID_SDK_INT: number;
 declare const DOES_SUPPORT_THEME: boolean;
+declare const acode: object;
 
 interface Window {
   ASSETS_DIRECTORY: string;
@@ -18,6 +19,7 @@ interface Window {
   IS_FREE_VERSION: string;
   ANDROID_SDK_INT: number;
   DOES_SUPPORT_THEME: boolean;
+  acode: object;
 }
 
 interface String{

src/lib/editorManager.js

@@ -14,12 +14,11 @@ import { setCommands, setKeyBindings } from 'ace/commands';
 import { HARDKEYBOARDHIDDEN_NO, getSystemConfiguration } from './systemConfiguration';
 import SideButton, { sideButtonContainer } from 'components/sideButton';
 
-//TODO: Add option to work multiple files at same time in large display.
-
 /**
- *
- * @param {HTMLElement} $header
- * @param {HTMLElement} $body
+ * Represents an editor manager that handles multiple files and provides various editor configurations and event listeners.
+ * @param {HTMLElement} $header - The header element.
+ * @param {HTMLElement} $body - The body element.
+ * @returns {Promise<Object>} A promise that resolves to the editor manager object.
  */
 async function EditorManager($header, $body) {
   /**
@@ -231,8 +230,8 @@ async function EditorManager($header, $body) {
   return manager;
 
   /**
-   * 
-   * @param {EditorFile} file 
+   * Adds a file to the manager's file list and updates the UI.
+   * @param {File} file - The file to be added.
    */
   function addFile(file) {
     if (manager.files.includes(file)) return;
@@ -241,6 +240,10 @@ async function EditorManager($header, $body) {
     $header.text = file.name;
   }
 
+  /**
+   * Sets up the editor with various configurations and event listeners.
+   * @returns {Promise<void>} A promise that resolves once the editor is set up.
+   */
   async function setupEditor() {
     const Emmet = ace.require('ace/ext/emmet');
     const textInput = editor.textInput.getElement();
@@ -386,6 +389,9 @@ async function EditorManager($header, $body) {
     );
   }
 
+  /**
+   * Scrolls the cursor into view if it is not currently visible.
+   */
   function scrollCursorIntoView() {
     keyboardHandler.off('keyboardShow', scrollCursorIntoView);
     if (isCursorVisible()) return;
@@ -411,7 +417,7 @@ async function EditorManager($header, $body) {
   }
 
   /**
-   * Callback function
+   * Sets the vertical scroll value of the editor. This is called when the editor is scrolled horizontally using the scrollbar.
    * @param {Number} value
    */
   function onscrollV(value) {
@@ -425,13 +431,17 @@ async function EditorManager($header, $body) {
     cancelAnimationFrame(scrollAnimationFrame);
   }
 
+  /**
+   * Handles the onscroll event for the vend element.
+   */
   function onscrollVend() {
     preventScrollbarV = false;
   }
 
+
   /**
-   * Callback function
-   * @param {Number} value
+   * Sets the horizontal scroll value of the editor. This is called when the editor is scrolled vertically using the scrollbar.
+   * @param {number} value - The scroll value.
    */
   function onscrollH(value) {
     preventScrollbarH = true;
@@ -444,12 +454,15 @@ async function EditorManager($header, $body) {
     cancelAnimationFrame(scrollAnimationFrame);
   }
 
+  /**
+   * Handles the event when the horizontal scrollbar reaches the end.
+   */
   function onscrollHEnd() {
     preventScrollbarH = false;
   }
 
   /**
-   * Callback function called on scroll vertically
+   * Sets scrollbars value based on the editor's scroll position.
    */
   function setHScrollValue() {
     if (appSettings.value.textWrap || preventScrollbarH) return;
@@ -466,13 +479,17 @@ async function EditorManager($header, $body) {
     editor._emit('scroll', 'horizontal');
   }
 
+  /**
+   * Handles the scroll left event.
+   * Updates the horizontal scroll value and renders the horizontal scrollbar.
+   */
   function onscrollleft() {
     setHScrollValue();
     $hScrollbar.render();
   }
 
   /**
-   * Callback function called on scroll vertically
+   * Sets scrollbars value based on the editor's scroll position.
    */
   function setVScrollValue() {
     if (preventScrollbarV) return;
@@ -489,11 +506,19 @@ async function EditorManager($header, $body) {
     editor._emit('scroll', 'vertical');
   }
 
+  /**
+   * Handles the scroll top event.
+   * Updates the vertical scroll value and renders the vertical scrollbar.
+   */
   function onscrolltop() {
     setVScrollValue();
     $vScrollbar.render();
   }
 
+  /**
+   * Updates the floating button visibility based on the provided show parameter.
+   * @param {boolean} [show=false] - Indicates whether to show the floating button.
+   */
   function updateFloatingButton(show = false) {
     const { $headerToggler } = acode;
     const { $toggler } = quickTools;
@@ -513,25 +538,30 @@ async function EditorManager($header, $body) {
         $headerToggler.classList.remove('hide');
         root.appendOuter($headerToggler);
       }
-    } else {
-      if (!scrollBarVisibilityCount) {
-        if ($toggler.isConnected) {
-          $toggler.classList.add('hide');
-          timeoutQuicktoolsToggler = setTimeout(
-            () => $toggler.remove(),
-            300,
-          );
-        }
-        if ($headerToggler.isConnected) {
-          $headerToggler.classList.add('hide');
-          timeoutHeaderToggler = setTimeout(() => $headerToggler.remove(), 300);
-        }
-      }
 
-      ++scrollBarVisibilityCount;
+      return;
+    }
+
+    if (!scrollBarVisibilityCount) {
+      if ($toggler.isConnected) {
+        $toggler.classList.add('hide');
+        timeoutQuicktoolsToggler = setTimeout(
+          () => $toggler.remove(),
+          300,
+        );
+      }
+      if ($headerToggler.isConnected) {
+        $headerToggler.classList.add('hide');
+        timeoutHeaderToggler = setTimeout(() => $headerToggler.remove(), 300);
+      }
     }
+
+    ++scrollBarVisibilityCount;
   }
 
+  /**
+   * Toggles the visibility of the problem button based on the presence of annotations in the files.
+   */
   function toggleProblemButton() {
     const fileWithProblems = manager.files.find((file) => {
       const annotations = file.session.getAnnotations();
@@ -545,6 +575,11 @@ async function EditorManager($header, $body) {
     }
   }
 
+  /**
+   * Updates the side button container based on the value of `showSideButtons` in `appSettings`.
+   * If `showSideButtons` is `false`, the side button container is removed from the DOM.
+   * If `showSideButtons` is `true`, the side button container is appended to the body element.
+   */
   function updateSideButtonContainer() {
     const { showSideButtons } = appSettings.value;
     if (!showSideButtons) {
@@ -555,6 +590,10 @@ async function EditorManager($header, $body) {
     $body.append(sideButtonContainer);
   }
 
+  /**
+   * Updates the margin of the editor and optionally updates the gutter settings.
+   * @param {boolean} [updateGutter=false] - Whether to update the gutter settings.
+   */
   function updateMargin(updateGutter = false) {
     const { showSideButtons, linenumbers, showAnnotations } = appSettings.value;
     const top = 0;
@@ -576,6 +615,10 @@ async function EditorManager($header, $body) {
     });
   }
 
+  /**
+   * Switches the active file in the editor.
+   * @param {string} id - The ID of the file to switch to.
+   */
   function switchFile(id) {
     const { id: activeFileId } = manager.activeFile || {};
     if (activeFileId === id) return;
@@ -587,8 +630,8 @@ async function EditorManager($header, $body) {
     editor.setSession(file.session);
     $header.text = file.filename;
 
-    $hScrollbar.remove();
-    $vScrollbar.remove();
+    $hScrollbar.hideImmediately();
+    $vScrollbar.hideImmediately();
 
     setVScrollValue();
     if (!appSettings.value.textWrap) {
@@ -601,6 +644,9 @@ async function EditorManager($header, $body) {
     events.emit('switch-file', file);
   }
 
+  /**
+   * Initializes the file tab container.
+   */
   function initFileTabContainer() {
     let $list;
 
@@ -656,6 +702,10 @@ async function EditorManager($header, $body) {
     manager.emit('int-open-file-list', openFileListPos);
   }
 
+  /**
+   * Checks if there are any unsaved files in the manager.
+   * @returns {number} The number of unsaved files.
+   */
   function hasUnsavedFiles() {
     const unsavedFiles = manager.files.filter((file) => file.isUnsaved);
     return unsavedFiles.length;