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

[Interactive Book] Fix text links in pages #104

Closed
1 of 2 tasks
manjotsidhu opened this issue Jul 2, 2021 · 0 comments · Fixed by #125
Closed
1 of 2 tasks

[Interactive Book] Fix text links in pages #104

manjotsidhu opened this issue Jul 2, 2021 · 0 comments · Fixed by #125

Comments

@manjotsidhu
Copy link
Member

manjotsidhu commented Jul 2, 2021

Describe the bug
There are 2 types of links in Interactive Book:

  • Relative URIs/Links: They are relative links which should navigate to the specific section in the page.
  • Absolute URLs: They are external links should directly open the link on external browser.

ToDo

  • Fix Absolute URL specifying action onTap
  • Fix Relative URLs by first assigning id's like markdown to headings and scrolling to the specific widget by Id. This will also open doors for linking Table of Contents list item to scroll to specific headings.

NOTE: Interactive Book being in beta, can be checked in ib branch

manjotsidhu added a commit that referenced this issue Jul 4, 2021
Nitish145 pushed a commit that referenced this issue Jul 6, 2021
Nitish145 added a commit that referenced this issue Jul 20, 2021
* Bringup Interactive Book UI Views.

* Moved common drawer tile to components as CVDrawerTile.
* Added a IbTheme class for custom styles.
* Bringup "Hardcoded" IbLandingView and it's UI Test.
* Bringup "Hardcoded" IbPageView and it's UI Test.

Signed-off-by: Manjot Sidhu <[email protected]>

* IbPageView: Implement Table of Contents UI.

* Uses Function Callback to run the function in IbPageView when TOC button is pressed in AppBar (present in
IbLandingView)
* Intentially added Future.delayed() when callback function is recieved, as in our hardcoded scenerio,
setState() is called even before the Widget fully builds. This will be not required when data is coming from
ViewModel via async methods.
* Table of Contents uses Bottom Modal Sheets with Scroll Controller.

Signed-off-by: Manjot Sidhu <[email protected]>

* IbPageView: Fading Floating Action Buttons for readability

* Floating Action Buttons now fades in if we scroll down and accordingly fades out if we scroll up.

Signed-off-by: Manjot Sidhu <[email protected]>

* IbPageView: Improve Floating Action Buttons.

* Made Button size smaller.
* Color Scheme follows white as bg color and primary color as Icon's color.
* Restore elevation to default (6.0) to show drop shadow.

Signed-off-by: Manjot Sidhu <[email protected]>

* IbLandingView: Seperate Actions for Expandable tile Drawer

The current Interactive Book has pages for Parent pages like "Binary Algebra". Currently, mobile-app has the
expandable tile which will be just expanding and showing sub-pages. We want to have seperate actions for arrow
and text such that the text will open it's "Parent Page" and arrows/whitespace will expand to show child pages.

* Uses Gesture Detector to incorporate different action for Text.
* Produces no UI differences and works as expected.

ref: https://stackoverflow.com/a/61573993
Signed-off-by: Manjot Sidhu <[email protected]>

* UI Tests: Fix Landing View Test due to recent changes

* Future.delayed() introduced in callback function causes Timer to throw errors.
ref: https://stackoverflow.com/q/56600290

* Incorporate Floating Action Buttons changes to fix test.

Signed-off-by: Manjot Sidhu <[email protected]>

* GH Actions: Temporarily enable ib branch to run CI.

* I almost forgot to run Tests after doing changes.
* Should be reverted before merging back to master.

Signed-off-by: Manjot Sidhu <[email protected]>

* Models: Bringup Interactive Book Models.

Signed-off-by: Manjot Sidhu <[email protected]>

* Services: Implement Interactive Book APIs

* API for fetching Raw Page Data and Fetching Pages list
* We are not serializing and returning  modal for fetching pages list since directory modals are redundant and
we only want to use them for recursively reading pages from directories, which will be handled by our Interactive Book Engine Service.
* For Raw Page Data, our response is serialized in `IbRawPageData` model.

Signed-off-by: Manjot Sidhu <[email protected]>

* IbPageView: Use camelCasing for constructor variable.

Signed-off-by: Manjot Sidhu <[email protected]>

* Tests: Fix IbApiTest typo.

Signed-off-by: Manjot Sidhu <[email protected]>

* Models: Replace IbRawPage with IbChapter.

* In-order to build Navigation and Drawer List Items, we realized that IbRawPage is just too overkill for the
requirement. We just need title and ids to build Navigation and Drawer Lists. Also, since data is not getting
serialized directly from API, IbEngineService is expected to create models from this RAW JSON. Moreover, this
IbRawPage is already included in IbRawPageData which will fetched for every page content.

* From now onwards, IbChapter[] will be received from the IbEngineService and will be used just for Book
Structure and Navigation.

* IbChapter includes previous page id, next page id because IbRawPageData won't have this. The only way to get
prev and next is finding them while preparing Navigation and structure. Accordingly, IbPageView should also
require prev and next from the IbLandingView to show Previous and Next buttons action.

Signed-off-by: Manjot Sidhu <[email protected]>

* Ib: Models: Format code

Signed-off-by: Manjot Sidhu <[email protected]>

* Services: Bringup Interactive Book Engine

* Implemented getChapters() and getPageData().
* IbChapter now includes navOrder since it was needed to sort the navigation pages.
* IbChapters that includes prev, and next for FABs and navigation are not implemented yet.
* getPageData() supports basic Mardkdown parsing like #,##,###,--- and { tags } as done in POC: #44
* Table of Contents is yet to be implemented while fetching getPageData()

Testing -
* IbEngineService Tests are running well which uses mocked real-time data.
* IbChapters since due to nested paging, was expected to take time. I ran a quick real-time test of it on
mobile-app to see the performance, it takes approx 1-2 secs on a normal broadband. Also, according to the
plans, ViewModel will be able to cache the data for the whole session.

Signed-off-by: Manjot Sidhu <[email protected]>

* Implement Interactive Book ViewModels.

Signed-off-by: Manjot Sidhu <[email protected]>

* IbEngineService: Implement Navigation
* Navigation includes previous and next buttons are not included in the APIs responses, so we have
to manually build using the list of chapters.
* The logic involves flattening the nested list and assigning prev and next in IbChapter

Signed-off-by: Manjot Sidhu <[email protected]>

* IbEngineService: Implement Table of Contents parsing

* The strategy is to parse using html package and recursively parse the lists.
* The list data will be stored in IbTocItem as part of IbContent.
* Added a new test case for a regular page (Contributing Guidelines) which uses almost every kind of
content, it will be helpful in future testing as well as to test Table of Contents.
* Since the data was too long, data is stored in JSON for clean and untouched response.
* Logic computes the numbers and alphabetes while parsing and prepends to the content.

Signed-off-by: Manjot Sidhu <[email protected]>

* IbEngine: Include Table of Contents Filters.

* Table of Contents has it's title and list text which is not required in mobile-app as it's now in
bottom sheet.
* These filters will simply won't add them to Content models.

Signed-off-by: Manjot Sidhu <[email protected]>

* IbChapter: Use obj ref for prev, next attrs

Signed-off-by: Manjot Sidhu <[email protected]>

* Implement ViewModels to Interactive Book views.

Signed-off-by: Manjot Sidhu <[email protected]>

* IbPageView: Format Code.

Signed-off-by: Manjot Sidhu <[email protected]>

* Interactive Book: Switch to flutter_markdown

* We found out that flutter_markdown which is maintained by flutter team, is already supporting GitHub
flavoured Markdown, therefore we replaced our parser with flutter_markdown.
* Creates almost no UI changes.
* Already supports inline markdown syntaxes (not HTML inline syntaxes which is TODO)
* Supports img and anchor links (needs to be reworked with respect to local and absolute URLs)
* Added Custom Syntaxes and Builders for our purposes.
* API Utils: Now supports UTF-8 Decoder as well. It was noticed that API Raw Page Data was not UTF-8
decoded.

Signed-off-by: Manjot Sidhu <[email protected]>

* IB: Bringup Simulator embeds extension using webview.

* flutter_markdown has some issues because of which we are using our own fork of the same.
(manjotsidhu/packages@29bb87f)
* We have updated flutter_markdown from 0.5.2 -> 0.6.2.
* flutter_html needed update because of Sub6Resources/flutter_html#500.
* flutter_html updated from 1.0.2 -> 1.3.0, which depends on flutter_svg, flutter_svg updated from 0.19.3
-> 0.20.0-nullsafety.3

Signed-off-by: Manjot Sidhu <[email protected]>

* Switch to CV fork of flutter_markdown package

Signed-off-by: Manjot Sidhu <[email protected]>

* Ib: Implement Chapter Contents for parent pages.

* Added support for Liquid syntax parsing.
* Chapter Contents is parsed from HTML content and then passed via PageData.

Signed-off-by: Manjot Sidhu <[email protected]>

* Markdown: Fix h4 style.

Signed-off-by: Manjot Sidhu <[email protected]>

* Markdown: Set image root path as IB_BASE_URL.

* There are 3 types of img tags used in Interactive Book:

  Type 1: Markdown Image: `![alternate text](https://img-link/file.png)`
  Type 2: Liquid Syntax Image (Recommended in Guidelines): `{% include image.html
url="https://img-link/file.png" description="alternate text" %}`
  Type 3: HTML Image Tag: `<img src="https://img-link/file.png" />` (Not supported)

* This will not fix *every* image tag in interactive book but it does fix type 1 Images.
* Type 3 Images will be converted to Type 2 and Type 2 implementation is a TODO.

Signed-off-by: Manjot Sidhu <[email protected]>

* Ib: Ignore Parsing Pop Quizes

* Ideally, we should not parse pop quizes using markdown.
* We will have a special widget that will build Pop Quizes.

Signed-off-by: Manjot Sidhu <[email protected]>

* IbLiquidSyntax: Add support for images via liquid tags.

* Still this is not a full working solution since Flutter's Image.network is not capable of handling
SVG.
* We will need to override and add our custom Image Builder that will use flutter_svg package.

Signed-off-by: Manjot Sidhu <[email protected]>

* IbEngine: Encode HTML characters using HtmlUnescape.

Signed-off-by: Manjot Sidhu <[email protected]>

* IbPageView: Launch absolute links on external browser. #104

Signed-off-by: Manjot Sidhu <[email protected]>

* IbTheme: Independent of CVTheme.

Signed-off-by: Manjot Sidhu <[email protected]>

* IbPageView: Use Scrollbar with ScrollView

Signed-off-by: Manjot Sidhu <[email protected]>

* IbPageView: Scrollbar: Disable always shown.

Signed-off-by: Manjot Sidhu <[email protected]>

* Upgrade Packages

* Get.snackbar now accepts message and title mandatory.
* Http package now accepts Uri instead of String.
* Manual Testing is highly recommended.

Signed-off-by: Manjot Sidhu <[email protected]>

* conf: update pod dependencies

* conf: update pubspec.lock

* conf: update flutter SDK to support extensions

* Ref:
https://stackoverflow.com/questions/61779848/flutter-extension-methods-not-working-it-says-undefined-class-and-requires-t

Signed-off-by: Manjot Sidhu <[email protected]>

* Services: Bringup hive database service.

Signed-off-by: Manjot Sidhu <[email protected]>

* Fix typos.

Signed-off-by: Manjot Sidhu <[email protected]>

* DatabaseServiceTest: Fix test for MacOS.

Signed-off-by: Manjot Sidhu <[email protected]>

* Ib: Cache getChapters API using Hive.

Signed-off-by: Manjot Sidhu <[email protected]>

* IbPageView: Reduce divider thickness.

Signed-off-by: Manjot Sidhu <[email protected]>

* IbLandingView: Highlight and expand selected chapter.

Signed-off-by: Manjot Sidhu <[email protected]>

* IbLandingView: Fixes and Improvements

Signed-off-by: Manjot Sidhu <[email protected]>

* IbLandingView: properly init and dispose valueNotifier.

Signed-off-by: Manjot Sidhu <[email protected]>

* Ib: Bringup HTML Interactions!

Signed-off-by: Manjot Sidhu <[email protected]>

Co-authored-by: Nitish Aggarwal <[email protected]>
Nitish145 pushed a commit that referenced this issue Jul 21, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant