Make available current card's and deck's details in WebView

[krmanik]

Pull Request template

Purpose / Description

This PR make available the following details about cards

New Card Count
Learn Card Count
Review Card Count
ETA
Mark
Flag

Also following functions available to make any design of button using css and calling using JS

showAnswer()
buttonAnswerEase1()
buttonAnswerEase2()
buttonAnswerEase3()
buttonAnswerEase4()
ankiMarkCard()
ankiToggleFlag()

Usage of ankiToggleFlag()

ankiToggleFlag('none')
ankiToggleFlag('red')
ankiToggleFlag('orange')
ankiToggleFlag('green')
ankiToggleFlag('blue')

Using numeric values

ankiToggleFlag(0)   // none
ankiToggleFlag(1)   // red
ankiToggleFlag(2)   // orange
ankiToggleFlag(3)   // green
ankiToggleFlag(4)   // blue

Using above and css & js, following type of card can be designed
https://github.com/infinyte7/Anki-Custom-Card-Layout

Fixes

Fixes #6306

Approach

How does this change address the problem?
Using JavascriptInterface.

How Has This Been Tested?

Sample Deck can be used for testing (Contents in deck may be changed to get it work)

1. Turn on Gestures in AnkiDroid or use immersive mode
2. Map all Swipe getures to No Action
3. Turn on Full Screen
4. Add following to card

To make available following details to AnkiDroid WebView, add it to Front / Back side of Card in <script> tag.

 <script>
        console.log(AnkiDroidJS.ankiGetNewCardCount());
        console.log(AnkiDroidJS.ankiGetLrnCardCount());
        console.log(AnkiDroidJS.ankiGetRevCardCount());
        console.log(AnkiDroidJS.ankiGetCardMark());
        console.log(AnkiDroidJS.ankiGetCardFlag());
        console.log(AnkiDroidJS.ankiGetETA());
 </script>

5. Now use those values to redesign the card templates.

Demo

Learning (optional, can help others)

https://developer.android.com/reference/android/webkit/JavascriptInterface
https://stackoverflow.com/questions/21173888/how-to-pass-non-primitive-object-from-java-to-js-by-android-addjavascriptinterfa
https://stackoverflow.com/questions/175739/built-in-way-in-javascript-to-check-if-a-string-is-a-valid-number
https://grid.layoutit.com/
https://codepen.io/
https://www.w3schools.com/

Checklist

Please, go through these checks before submitting the PR.

• [ x ] You have not changed whitespace unnecessarily (it makes diffs hard to read)
• [ x ] You have a descriptive commit message with a short title (first line, max 50 chars).
• [ x ] Your code follows the style of the project (e.g. never omit braces in if statements)
• [ x ] You have commented your code, particularly in hard-to-understand areas
• [ x ] You have performed a self-review of your own code

[krmanik]

I have made an AnkiDroid deck for this.

https://github.com/infinyte7/Anki-Custom-Card-Layout

[david-allison]

Looks good to me!

@mikehardy?

[krmanik]

For getting nextTime1, nextTime2, nextTime3, nextTime4.
I have added this.

@JavascriptInterface
public String ankiGetNextTime1() { return (String) mNext1.getText(); }

@JavascriptInterface
public String ankiGetNextTime2() { return (String) mNext2.getText(); }
        
@JavascriptInterface
public String ankiGetNextTime3() { return (String) mNext3.getText(); }

@JavascriptInterface
public String ankiGetNextTime4() { return (String) mNext4.getText(); }

This will help when answerButtonEase4 is called from webview and not get called then answerButtonEase3 will be called.

In WebView

function button4Clicked() {
     if (AnkiDroidJS.ankiGetNextTime4() == "") {
         answerButtonEase3();
     } else {
          answerButtonEase4();
     }
}

Fourth button can be hidden

if (AnkiDroidJS.ankiGetNextTime4() == "")
{
    hideButton4();
}

And also showing options menu

            // Show options menu
            if (url.startsWith("signal:show_options_menu")) {
                openOptionsMenu();
                return true;
            }

Show Navigation Drawer

            // Show side menu
            if (url.startsWith("signal:show_navigation_drawer")) {
                DrawerLayout mDrawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
                mDrawerLayout.openDrawer(Gravity.LEFT);
                return true;
            }

Should I add those to this PR?

[david-allison]

Re-review and slight nitpick

[david-allison]

@infinyte7, I don't disagree, but it'd be better to move the additional changes into a separate PR, so we can get this into the codebase as soon as possible after @mikehardy has had a look.

I think we also need to consider how to best display "Good/(Hard)/Again/Easy" to developers, especially as there are cases where only 2 buttons can be displayed.

[krmanik]

The all button get exposed to card developer.
And they have to decide which button to show and hide using this

if (AnkiDroidJS.ankiGetNextTime1() == "") {
    document.getElementById('button1').style.display ="hidden";
}

if (AnkiDroidJS.ankiGetNextTime2() == "") {
    document.getElementById('button2').style.display ="hidden";
}

if (AnkiDroidJS.ankiGetNextTime3() == "") {
    document.getElementById('button3').style.display ="hidden";
}

if (AnkiDroidJS.ankiGetNextTime4() == "") {
    document.getElementById('button4').style.display ="hidden";
}

[timrae]

Here is an overview of what got changed by this pull request:

Issues
======
- Added 2
           

See the complete overview on Codacy

[mikehardy]

This change looks good - I'll merge it and put it in the next alpha
I logged #6328 to capture the need to do some API versioning