[go: nahoru, domu]
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.

Sign up for GitHub

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

Jump to bottom

Migrate our js files away from using jquery #8889

Open
parlough opened this issue Jun 13, 2023 · 11 comments
Open

Migrate our js files away from using jquery #8889

parlough opened this issue Jun 13, 2023 · 11 comments
Assignees
@ulisseshen
Labels
e2-days Effort: < 5 days fix.refactor Needs near total rewrite or reorganization of content from.team Reported by Dash docs team member infra.structure Relates to the tools that create docs.flutter.dev p2-medium Necessary but not urgent concern. Resolve when possible. st.triage.ltw Indicates Lead Tech Writer has triaged

Comments

@parlough
Copy link
Member

Describe the problem

We'd eventually like to stop using jquery, especially since Bootstrap 5 (which we hope to migrate to) no longer requires it.

Expected fix

Migrate all code in https://github.com/flutter/website/tree/main/src/assets/js away from using jquery.

Additional context

No response
@parlough parlough added infra.structure Relates to the tools that create docs.flutter.dev p2-medium Necessary but not urgent concern. Resolve when possible. e2-days Effort: < 5 days fix.refactor Needs near total rewrite or reorganization of content labels Jun 13, 2023
@parlough
Copy link
Member Author

If anyone wants to help with this, please keep your pull requests simple. Migrate a few related functions, or if a file is simple, just one file. Thanks so much!

@ulisseshen
Copy link
Contributor

It may not be an easy job, but I appreciate it very much and I can try to help with that. However, I have no previous experience collaborating with open source projects.

@parlough
Copy link
Member Author

We always appreciate help! I'm happy to help with any issues you have as well.

The repository's README has some information on contributing and setting up the site.

Usually contributing looks like some mix of forking the repository, making and testing your changes in a local branch, then pushing them to GitHub and opening a pull request. From there one of us will review it and provide feedback in a back and forth process.

As for this particular issue, perhaps a good place to start would be a single function (or even a part of one) in the archive.js folder. It is used on the Flutter SDK archive page for populating the archive tables. There are a lot of good documents online about migrating away from jquery to normal JavaScript.

If you'd like to work on that, go for it, and let us know if you have any questions about anything or something doesn't work.

@ulisseshen
Copy link
Contributor

I already hosted this project locally, I have no problem with it. A good starting point could be this archive.js file you mentioned.

My questions now are:
How can I relate my changes to this topic?
Will Jquery's ajax calls be replaced by the fetch api?

PS: Good initiative. As awesome as it is, the Jquery era has long since passed.

@parlough
Copy link
Member Author

@ulisseshen

How can I relate my changes to this topic?

If I'm working on part of an issue, generally what I do is create a pull request against this repository with my changes, then in the pull request description add text like Contributes to https://github.com/flutter/website/issues/8889. If my pull request will completely fix the issue, I instead write Fixes https://github.com/flutter/website/issues/8889 as it will then close the issue automatically when the pull request is merged.

Will Jquery's ajax calls be replaced by the fetch api?

Yeah, I think that sounds good. We don't support Internet Explorer and all other major browsers have supported it for a while.

PS: Good initiative. As awesome as it is, the Jquery era has long since passed.

Yeah for sure :) - Hopefully this will make our little JS code easier to maintain while also being quicker to download.

@ulisseshen ulisseshen mentioned this issue Jul 12, 2023
Merged
3 tasks
parlough added a commit that referenced this issue Jul 17, 2023
@ulisseshen @parlough
Begin migrating archive.js to vanilla JavaScript (#9022)
15bc68f 
Contributes to #8889

---------

Co-authored-by: Parker Lougheed <parlough@gmail.com>
@ulisseshen
Copy link
Contributor

Soon I'll continue working on this. I feel grateful for give some help.

@parlough
Copy link
Member Author

@ulisseshen I'll assign you then but take your time :)

Thanks again for your help!

@ulisseshen
Copy link
Contributor
ulisseshen commented Jul 17, 2023 •
edited
Loading

@parlough while I was making some changes to the archive.js file, there is a bit of code that is runs in initial page load. Below a code that I'm talking about:

website/src/assets/js/archive.js

Lines 246 to 258 in 15bc68f

$(function () {
if ($('#sdk-archives').length) {
fetchFlutterReleases('windows', updateTable, updateTableFailed);
fetchFlutterReleases('macos', updateTable, updateTableFailed);
fetchFlutterReleases('linux', updateTable, updateTableFailed);
}
if ($('.download-latest-link-windows').length)
fetchFlutterReleases('windows', updateDownloadLink, updateDownloadLinkFailed);
if ($('.download-latest-link-macos').length)
fetchFlutterReleases('macos', updateDownloadLink, updateDownloadLinkFailed);
if ($('.download-latest-link-linux').length)
fetchFlutterReleases('linux', updateDownloadLink, updateDownloadLinkFailed);
});

I belive that the code between line 252 and 257 is not used anymore. I did some test to validate this, it look that is not used. I will not migrate those code betwwen those lines and not funcitons updateDownloadLink and updateDownloadLinkFailed, that are used only in this call.

@parlough
Copy link
Member Author

Thanks for looking into it!

I believe the code you linked to is used on the "Windows install", "macOS install", and similar pages to set up the download buttons for the latest release on those pages. An example is here: https://docs.flutter.dev/get-started/install/windows#get-the-flutter-sdk

The source for that button is https://github.com/flutter/website/blob/main/src/get-started/install/_get-sdk-win.md?plain=1#L10

Perhaps we should add some comments to the code to make that more clear, because it is pretty easy to miss.

@ulisseshen
Copy link
Contributor
ulisseshen commented Jul 17, 2023 •
edited
Loading

You are right. I ended up discovering this while investigating a little more. I will continue then migrating this code and i will make some comments to improve understanding by others in the future

@ulisseshen
Copy link
Contributor

In many cases JQuey return a list of elements in your selector and when apply any input in those elements selected it do it in all elements at once.

// Will change every element that have a class `my-class`
$('.my-class').text('my newest text')

To migrate to pure js have two ways.

Considered that will have only a single element and to use document.querySelector or that will have one or more elements and to use document.querySelectorAll.

For this fase of migration I have considerated that always will be one or more elements. So, I used document.querySelectorAll

@ulisseshen ulisseshen mentioned this issue Jul 18, 2023
Merged
3 tasks
parlough added a commit that referenced this issue Jul 26, 2023
@ulisseshen @parlough
Finish migrating archive.js file to pure js (#9063)
7295dcd 
Related with #8889 and #9022 

---------

Co-authored-by: Parker Lougheed <parlough@gmail.com>
@ulisseshen ulisseshen mentioned this issue Jul 29, 2023
Merged
3 tasks
@parlough parlough added the st.triage.ltw Indicates Lead Tech Writer has triaged label Aug 2, 2023
parlough added a commit that referenced this issue Aug 8, 2023
@ulisseshen @craiglabenz @parlough
Begin to migrate main.js from JQuery to pure js (#9167)
879c71a 
Related with #8889

---------

Co-authored-by: Craig Labenz <craig.labenz@gmail.com>
Co-authored-by: Parker Lougheed <parlough@gmail.com>
@atsansone atsansone added the from.team Reported by Dash docs team member label Aug 8, 2023
@parlough parlough mentioned this issue May 24, 2024
Merged
atsansone pushed a commit that referenced this issue May 24, 2024
@parlough
Remove no longer used JS code (#10660)
9b37ddd 
Also completes some nearby cleanup.

Contributes to #8889
Contributes to #8030
@parlough parlough mentioned this issue Jun 25, 2024
Merged
sfshaza2 pushed a commit that referenced this issue Jun 26, 2024
@parlough
Implement and migrate to a shortcode-controlled, tabbed interface (#1…
4d3d52f 
…0793)

Introduces new `{% tabs "save-key" %}` and `{% tab "name" %}`
11ty/Liquid paired shortcodes to add tabs to the site and switches the
various tab methods across the site (`codesample` and raw HTML) to use
them.

The `save-key` parameter is optional and allows syncing of tabs across
the site to the same tab. For example, the `darwin-language` key is used
to switch all tabs with the same key to either `Swift` or `Objective-C`.
The `name` parameter tab is not optional. Both `save-key` and `name`
must be in quotes or refer to a Liquid/11ty variable that is a string.
The `{% endtab %}` and `{% endtabs %}` closing shortcodes are required
to close a tab and a tab menu respectively.

**Example:**

````liquid
{% tabs "darwin-language" %}
{% tab "Swift" %}

Some words about the following Swift snippet...

```swift
let flutterViewController = FlutterViewController(
project: nil, initialRoute: "/onboarding", nibName: nil, bundle: nil)
```

{% endtab %}
{% tab "Objective-C" %}

Some words about the following Objective-C snippet...

```objc
FlutterViewController* flutterViewController =
      [[FlutterViewController alloc] initWithProject:nil
                                        initialRoute:@"/onboarding"
                                             nibName:nil
                                              bundle:nil];
```

{% endtab %}
{% endtabs %}
````

Resolves #8926
Contributes to #8889
Contributes to #8030
atsansone pushed a commit to atsansone/website that referenced this issue Jun 27, 2024
@parlough @atsansone
Implement and migrate to a shortcode-controlled, tabbed interface (fl…
452e5f7 
…utter#10793)

Introduces new `{% tabs "save-key" %}` and `{% tab "name" %}`
11ty/Liquid paired shortcodes to add tabs to the site and switches the
various tab methods across the site (`codesample` and raw HTML) to use
them.

The `save-key` parameter is optional and allows syncing of tabs across
the site to the same tab. For example, the `darwin-language` key is used
to switch all tabs with the same key to either `Swift` or `Objective-C`.
The `name` parameter tab is not optional. Both `save-key` and `name`
must be in quotes or refer to a Liquid/11ty variable that is a string.
The `{% endtab %}` and `{% endtabs %}` closing shortcodes are required
to close a tab and a tab menu respectively.

**Example:**

````liquid
{% tabs "darwin-language" %}
{% tab "Swift" %}

Some words about the following Swift snippet...

```swift
let flutterViewController = FlutterViewController(
project: nil, initialRoute: "/onboarding", nibName: nil, bundle: nil)
```

{% endtab %}
{% tab "Objective-C" %}

Some words about the following Objective-C snippet...

```objc
FlutterViewController* flutterViewController =
      [[FlutterViewController alloc] initWithProject:nil
                                        initialRoute:@"/onboarding"
                                             nibName:nil
                                              bundle:nil];
```

{% endtab %}
{% endtabs %}
````

Resolves flutter#8926
Contributes to flutter#8889
Contributes to flutter#8030
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ulisseshen ulisseshen

Labels
e2-days Effort: < 5 days fix.refactor Needs near total rewrite or reorganization of content from.team Reported by Dash docs team member infra.structure Relates to the tools that create docs.flutter.dev p2-medium Necessary but not urgent concern. Resolve when possible. st.triage.ltw Indicates Lead Tech Writer has triaged
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@atsansone @ulisseshen @parlough