make callbackery work better on mobile (#218)

* make callbackery work better on mobile * collapse navar buttons into menu * move labels over form fields * copy everything, do not try to reuse as the private variable will not work * sync action menu button properties with normal buttons * set table column with to work on mobile * detect empty values in required fields * consider required property in the backend! * cleaner approach to button focusing * port qooxdoo/qooxdoo#10632 while there is no new qx release
oetiker · Nov 27, 2023 · 48fcb96 · 48fcb96
1 parent 16a1078
commit 48fcb96
Show file tree

Hide file tree

Showing 15 changed files with 666 additions and 459 deletions.
diff --git a/CHANGES b/CHANGES
@@ -1,3 +1,54 @@
+0.47.9 2023-10-26 10:05:30 +0200 Tobias Oetiker <[email protected]>
+
+ - better fix, based on https://github.com/qooxdoo/qooxdoo/pull/10632
+
+0.47.8 2023-10-24 11:23:11 +0200 Tobias Oetiker <[email protected]>
+
+ - force button to focus when it is touched ... this seems to
+   resolve the event order problem
+
+0.47.7 2023-10-24 11:08:14 +0200 Tobias Oetiker <[email protected]>
+
+ - force button to focus when it is clicked
+
+0.47.6 2023-10-24 10:50:48 +0200 Tobias Oetiker <[email protected]>
+
+ - fix event ordering problem on ios and android
+ - add longer timeout for downloads and views
+
+0.47.5 2023-10-19 14:06:22 +0200 Tobias Oetiker <[email protected]>
+
+ - ios compatiblity issue can not easily be fixed outside qx
+   https://github.com/qooxdoo/qooxdoo/pull/10629 is the right way
+   to go about it ... 
+
+0.47.4 2023-10-18 22:53:53 +0200 Tobias Oetiker <[email protected]>
+
+ - it seems on ios there is no changeValue after blur, fix that by
+   resettting and setting the value explicitly after blur ... aargh 
+
+ - explicitly check for empty string in required field even when there
+   is no validator defined
+
+0.47.3 2023-08-29 16:20:30 +0200 Tobias Oetiker <[email protected]>
+
+ - make table columns with "flex" work on mobile devices
+
+0.47.2 2023-08-29 14:14:54 +0200 Tobias Oetiker <[email protected]>
+
+ - connect mmButton properties to button propperties
+
+0.47.1 2023-08-29 12:04:49 +0200 Tobias Oetiker <[email protected]>
+
+ - include callbackery.ui.form.FileSelectorMenuButton into distro
+
+0.47.0 2023-08-29 11:01:09 +0200 Tobias Oetiker <[email protected]>
+
+* make callbackery work better on mobile
+  - collapse navbar buttons into menu on mobile
+  - move labels over form fields on mobile
+* cleanup indentation
+
 0.46.5 2023-06-28 08:29:18 +0200 Tobias Oetiker <[email protected]>
 
  - fixed regression in abstractform (missing signature)

diff --git a/MANIFEST b/MANIFEST
@@ -48,8 +48,7 @@ lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/Auto.js
 lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/DateTime.js
 lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/renderer/HBox.js
 lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/renderer/NoteForm.js
-lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/UploadButton.js
-lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/UploadToolbarButton.js
+lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/FileSelectorMenuButton.js
 lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/VirtualSelectBox.js
 lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/Header.js
 lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/__init__.js

diff --git a/Makefile.PL b/Makefile.PL
@@ -12,15 +12,15 @@ WriteMakefile(
   AUTHOR       => 'Tobias Oetiker <[email protected]>',
   LICENSE      => 'gpl_3',
   PREREQ_PM    => {
-    'Mojolicious' => '9.12',
+    'Mojolicious' => '9.33',
     'Mojolicious::Plugin::Qooxdoo' => '1.0.14',
     'Config::Grammar' => '1.13',
-    'XS::Parse::Keyword' => '0.21',
-    'Future::AsyncAwait' => '0.54',
-    'Syntax::Keyword::Try' => '0.25',
+    'XS::Parse::Keyword' => '0.38',
+    'Future::AsyncAwait' => '0.65',
+    'Syntax::Keyword::Try' => '0.29',
     'Locale::PO' => '0.27',
-    'JSON::Validator' => 5.03,
-    'YAML::XS' => 0.83,
+    'JSON::Validator' => '5.14',
+    'YAML::XS' => '0.88',
     'Text::CSV' => 0,
     'Excel::Writer::XLSX' => 0,
     'Test::Fatal' => 0,

diff --git a/lib/CallBackery.pm b/lib/CallBackery.pm
@@ -37,7 +37,7 @@ use CallBackery::Plugin::Doc;
 use CallBackery::Database;
 use CallBackery::User;
 
-our $VERSION = '0.46.5';
+our $VERSION = '0.47.9';
 
 
 =head2 config

diff --git a/lib/CallBackery/GuiPlugin/AbstractForm.pm b/lib/CallBackery/GuiPlugin/AbstractForm.pm
@@ -91,13 +91,19 @@ sub validateData {
     if (not ref $entry){
         die mkerror(4095,trm("sorry, don't know the field you are talking about"));
     }
-    return if not $entry->{set}{required} and (not defined $formData->{$fieldName} or length($formData->{$fieldName}) == 0);
+    my $fieldIsEmpty = (not defined $formData->{$fieldName} or length($formData->{$fieldName}) == 0);
+    return if not $entry->{set}{required} and $fieldIsEmpty;
     if ($entry->{validator}){
         my $start = time;
         my $data = $entry->{validator}->($formData->{$fieldName},$fieldName,$formData);
         $self->log->debug(sprintf("validator %s: %0.2fs",$fieldName,time-$start));
         return $data;
     }
+    # if there is no validator but the field is required, complain
+    # if the content is empty
+    elsif ($entry->{set}{required} and $fieldIsEmpty){
+        return trm('The %1 field is required',$fieldName);
+    }
     return;
 }
 

diff --git a/lib/CallBackery/User.pm b/lib/CallBackery/User.pm
@@ -193,7 +193,7 @@ has cookieConf => sub {
         return {};
     }
 
-    if ($paramCookie and gettimeofday() - $conf->{t} > 2.0){
+    if ($paramCookie and gettimeofday() - $conf->{t} > 10.0){
         $self->log->debug(qq{Cookie is expired});
         die mkerror(38445,"cookie has expired");
     }

diff --git a/lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/TabView.js b/lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/TabView.js
@@ -5,8 +5,7 @@
    Utf8Check: äöü
 ************************************************************************ */
 /**
- * Build the desktop. This is a singleton. So that the desktop
- * object and with it the treeView and the searchView are universaly accessible
+ * Build the desktop. This is a singleton
  */
 qx.Class.define("callbackery.ui.TabView", {
     extend : qx.ui.tabview.TabView,

diff --git a/lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/Auto.js b/lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/Auto.js
@@ -275,8 +275,6 @@ qx.Class.define("callbackery.ui.form.Auto", {
         this);
 
         var formWgt = new (formRenderer)(form);
-        var fl = formWgt.getLayout();
-
         this._add(formWgt);
     },
 

diff --git a/...allBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/FileSelectorMenuButton.js b/...allBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/FileSelectorMenuButton.js
@@ -0,0 +1,112 @@
+/* ************************************************************************
+
+   After Qooxdoo FileSelectorMenuButton
+   Copyright:
+     2023 Oetiker+Partner AG
+
+   License:
+     LGPL: http://www.gnu.org/licenses/lgpl.html
+     See the LICENSE file in the project's top-level directory for details.
+
+   Authors:
+     * Tobias Oetiker
+ 
+************************************************************************ */
+
+qx.Class.define("callbackery.ui.form.FileSelectorMenuButton", {
+    extend: qx.ui.menu.Button,
+    statics: {
+        _fileInputElementIdCounter: 0
+    },
+    properties: {
+        /**
+         * What type of files should be offered in the fileselection dialog.
+         * Use a comma separated list of [Unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers). If you dont set anything, all files
+         * are allowed.
+         *
+         * *Example*
+         *
+         * `.doc,.docx,application/msword`
+         */
+        accept: {
+            nullable: true,
+            check: "String",
+            apply: "_applyAttribute"
+        },
+
+        /**
+         * Specify that the camera should be used for getting the "file". The
+         * value defines which camera should be used for capturing images.
+         * `user` indicates the user-facing camera.
+         * `environment` indicates the camera facing away from the user.
+         */
+        capture: {
+            nullable: true,
+            check: ["user", "environment"],
+            apply: "_applyAttribute"
+        },
+
+        /**
+         * Set to "true" if you want to allow the selection of multiple files.
+         */
+        multiple: {
+            nullable: true,
+            check: "Boolean",
+            apply: "_applyAttribute"
+        },
+
+        /**
+         * If present, indicates that only directories should be available for
+         * selection.
+         */
+        directoriesOnly: {
+            nullable: true,
+            check: "Boolean",
+            apply: "_applyAttribute"
+        }
+    },
+
+    members: {
+        __inputObjec: null,
+        _applyAttribute(value, old, attr) {
+            if (attr === "directoriesOnly") {
+                // while the name of the attribute indicates that this only
+                // works for webkit browsers, this is not the case. These
+                // days the attribute is supported by
+                // [everyone](https://caniuse.com/?search=webkitdirectory).
+                attr = "webkitdirectory";
+            }
+            this.__inputObject.setAttribute(attr, value);
+        },
+        setEnabled(value) {
+            this.__inputObject.setEnabled(value);
+            super.setEnabled(value);
+        },
+        _createContentElement() {
+            let id = "qxMenuFileSelector_" + (++callbackery.ui.form.FileSelectorMenuButton._fileInputElementIdCounter);
+            let input = (this.__inputObject = new qx.html.Input(
+                "file",
+                null,
+                { id: id }
+            ));
+
+            let label = new qx.html.Element("label", {}, { for: id });
+            label.addListenerOnce("appear", e => {
+                label.add(input);
+            });
+
+            input.addListenerOnce("appear", e => {
+                let inputEl = input.getDomElement();
+                // since qx.html.Node does not even create the
+                // domNode if it is not set to visible initially
+                // we have to quickly hide it after creation.
+                input.setVisible(false);
+                inputEl.addEventListener("change", e => {
+                    this.fireDataEvent("changeFileSelection", inputEl.files);
+                    inputEl.value = "";
+                });
+            });
+            return label;
+        }
+    }
+});
diff --git a/lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/UploadButton.js b/lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/UploadButton.js
-Original file line number
+Diff line change
@@ Expand Up / @@ -275,8 +275,6 @@ qx.Class.define("callbackery.ui.form.Auto", { @@
             this);
             var formWgt = new (formRenderer)(form);
-            var fl = formWgt.getLayout();
             this._add(formWgt);
         },
@@ Expand Down @@