Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add comfy `NumPad` to the mobile layout #18

Closed
vantuz-subhuman opened this issue Jun 16, 2018 · 6 comments

Comments

@vantuz-subhuman
Copy link
Member

commented Jun 16, 2018

Read this issue #6 and specifically this comment #6 (comment) for context.

We use "Cleave" library to locale-format big number in input-fields. This requires fields to be of type "text" (string formatting). Inputting numbers in text fields sucks big time on mobile. Any (nice) solution that would make it in any way easier would be welcomed.

@DEFAULTERROR1 proposed to check out the https://github.com/kabachello/jQuery.NumPad library that allows to attach separate modal-dialog-like NumPad to input numbers with sosig-fingers. Like this:

NumPad

This looks sweet as hell, especially with the optional separate button:

NumPad separate button

We need to check this out, BUT look out for these things:

  1. User should be able to edit fields "old-style" and then it should be fully under Cleave-style (full backward compatibility)
  2. When user is "done" inputting number in the NumPad - we prolly should complately disable default event (injecting value into field) and send value from NumPad on the pre-formatting and our own injection, like with key-events.
  3. Look out for the #11 - this is currently under development and even more fields are getting under Cleave
@vantuz-subhuman

This comment has been minimized.

Copy link
Member Author

commented Jun 19, 2018

@DEFAULTERROR1, I did not add any special functions to set completely new value to a field (since there's no suitable context for it yet), but a basic example may be used:

  1. Find input field by the param if like this: $('inp_' + param.id) (if numpad is linked by param, for example)

  2. For any non-cleave field setting value is trivial, just like for a simple input-field

  3. For a cleave field this example may be used: https://github.com/antipalos/antipalos.github.io/pull/19/files#diff-e24f15459829dc1056304f2559d9a607R242 - param itself should be in the context in order to find out the scale.

I reckon everything depends on how exactly the NumPad will be "attached" to the affected input field. My understanding is that there's probably one global dialog object that gets invoked whenever the "input-call" event is generated (like clicking the special icon at the end of the input-field) and then the "target" element (the event invoker) is passed into the event callback. So most probable case is that you will have a DOM element in the context and will need to find a parameter by ID. This piece of code probably may be extracted into a separate function that finds the param-object by a DOM element.

@DEFAULTERROR1

This comment has been minimized.

Copy link
Collaborator

commented Jun 20, 2018

My understanding is that there's probably one global dialog object that gets invoked whenever the "input-call" event is generated (like clicking the special icon at the end of the input-field) and then the "target" element (the event invoker) is passed into the event callback.

Yup, i plan on creating a input group with a button to the right for each input field like the example on numpad. I think i'll use a data-attribute with the inputs id and delegate the event via numpads target parameter to the corresponding input field. Two problems i currently see is that we have duplicate ids now with table and swiper partials included both at the same time, this will most likely lead to problems. Another problem is that i can't seem to find a "everything fully rendered" kinda callback on the handlebars.js, because it takes some time to render those templates, especially on slower devices and the numpad may be attached to a not yet existing object. I have to figure out a way to get around that, the only current option i can think of would be a settimeout but that's pretty nasty.

@vantuz-subhuman

This comment has been minimized.

Copy link
Member Author

commented Jun 20, 2018

@DEFAULTERROR1

Two problems i currently see is that we have duplicate ids now with table and swiper partials included both at the same time

Table and swiper layouts are never included in the page at the same time. When page is loaded - we select one of the layouts from cookies or from the screen width and only that layout is rendered and included in the page. When user changes the layout selector - the layout initialization function is called again, so everything works as if page got reloaded with the only exception that we check that parameters already exists and we don't load them again from the JSON file - we just use already existing object which allows us to preserve the field values when layout is switched.

In that process - another layout template file gets loaded and rendered (with existing parameters) and it replaces existing DOM element. So we don't hide anything - previous layout is literally just removed from the browser and lost :)

So there's never two existing fields with the same ID. But that also means that each time user switches layouts - input fields are actually created from scratch. Which means that the initCleave function has to be called every time. So Cleave objects are recreated and reattached to input fields every time.

I think somewhat the same approach has to be implemented for the NumPad. There should be a similar initNumPad function that iterates all the input fields and attaches required objects to it. And if NumPad requires some HTML to be added to the fields - you gotta add it to both swiper AND table. So you can also add any elements with the same IDs to both layouts and then just be sure that whatever layout is selected - it will contain the required ID.

Another problem is that i can't seem to find a "everything fully rendered" kinda callback on the handlebars.js, because it takes some time to render those templates, especially on slower devices and the numpad may be attached to a not yet existing object.

The JS is a single-threaded system, from what I know, so if your function call happens after call to the Handlebars - it should be ok. So I would suggest you to add your function before or after the initCleave call INSIDE the initCalcLayout.

The latter part of the only actually significant detail, since file-system calls are async and implemented on callbacks - but all callbacks are still executed in the same thread:

So initCalcLayout will only be called AFTER the anonymous (document ready) function exits. So we should be careful to not put any code that may require in-template elements in there.

@DEFAULTERROR1

This comment has been minimized.

Copy link
Collaborator

commented Jun 20, 2018

@vantuz-subhuman

Table and swiper layouts are never included in the page at the same time. When page is loaded - we select one of the layouts from cookies or from the screen width and only that layout is rendered and included in the page. When user changes the layout selector - the layout initialization function is called again, so everything works as if page got reloaded

Nice, i misunterstood that basically as tabs as i quickly skimmed over it.

So I would suggest you to add your function before or after the initCleave call INSIDE the initCalcLayout

Perfect!

@vantuz-subhuman

This comment has been minimized.

Copy link
Member Author

commented Jun 21, 2018

@DEFAULTERROR1, I have granted you the collaborator-write access to the repo, so you can now create branches and work on them right here, if you want to.

The only requirements for now are:

  1. Master branch is protected, so no one can push directly to it. Any change gotta go thru a pull-request.

  2. When you create a branch for an issue - please include the issue number and [shortened] issue title in the branch name. E.g: #6-Mobile-layout or #11-localize-number-formatting

The main point was so that you can create your own new branches here to open pull-requests TO :)

So you can work here or in a fork and then create here a branch with the issue number and PR into it. I'm working in my own fork because of the specifics of the GitHub pages, since I don't know how to properly preview the actual github-rendering from any other branch except master. So I work in the fork master, but then create a new branch there and a new branch here and PR fork branch to branch here, like in this one: #19

If I ever figure out how to watch a github-pages website from any branch other than master - then I will happily work without a fork. There's a special "html preview" page that supposedly renders any static site in the same way if you send it a link to the html file on the github, but it didn't work for me properly =\

@DEFAULTERROR1

This comment has been minimized.

Copy link
Collaborator

commented Jun 22, 2018

@vantuz-subhuman

I have granted you the collaborator-write access to the repo, so you can now create branches and work on them right here, if you want to.

Thank you, i will open a #18-numpad-for-mobile-inputs branch this weekend and PR a working draft to it.

If I ever figure out how to watch a github-pages website from any branch other than master - then I will happily work without a fork. There's a special "html preview" page that supposedly renders any static site in the same way if you send it a link to the html file on the github, but it didn't work for me properly =\

I'm sadly of no help here, never hosted a site on github so far, but if you figure it out one day let me know! :D

vantuz-subhuman added a commit that referenced this issue Jul 27, 2018

vantuz-subhuman pushed a commit to vantuz-subhuman/vantuz-subhuman.github.io that referenced this issue Jul 27, 2018

vantuz-subhuman added a commit that referenced this issue Jul 28, 2018

Merge pull request #24 from vantuz-subhuman/master
#18 Fixed and prettyfied some NumPad stuff

@vantuz-subhuman vantuz-subhuman moved this from To do to In progress in Cardano-calculator Jul 28, 2018

@vantuz-subhuman vantuz-subhuman moved this from In progress to Done in Cardano-calculator Jul 28, 2018

@vantuz-subhuman vantuz-subhuman added this to the v0.1.2 milestone Jul 28, 2018

@vantuz-subhuman vantuz-subhuman referenced this issue Jul 28, 2018
2 of 2 tasks complete

@vantuz-subhuman vantuz-subhuman changed the title Check out `NumPad` library for mobile inputs Add comfy `NumPad` to the mobile layout Jul 29, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
2 participants
You can’t perform that action at this time.