Infrastructure: Add support for opening examples in CodePen #1110

spectranaut · 2019-07-24T21:06:45Z

This PR is a proof of concept for issue #1102.

Codepen has a POST API to prefill the HTML/CSS/JS inputs. This PR adds a dynamically created form that can send a POST request with the appropriate data to Codepen (look for "Open this example in Codepen" button on the slider/multithumb-slider.html page).

I tried to do this in a generalized way -- the code is mostly in examples/js/examples.js -- so that each example page would only need a small amount of html/js added, most of which could be added/copied directly from the template file. This solution should also work for examples pages that contain multiple examples.

Here is a PR for doing the same thing but using JSFiddle: #1111

Preview WIP

View the slider example with the codepen button

mcking65 · 2019-09-21T10:15:10Z

This was discussed in the September 10, 2019 meeting.

There was consensus that a separate section with its own heading is too heavy and that it would be better if the button were positioned to the right of the example heading.

I moved the button in the HTML, but I need someone to add the necessary styling to visually position it. I assume it would go in examples/css/core.css.

@jnurthen also suggested a feature request to automatically run tidy on the HTML.

@jnurthen, are you making this request because the HTML in our files still isn't tidy in some cases? Or, is it that the formatting in our files is lost in transmission to CodePen?

jnurthen · 2019-09-21T10:17:52Z

@mcking65 the HTML all seemed to be indented by a whole bunch of extra spaces. I want those removed.

mcking65 · 2019-09-21T21:41:40Z

@jnurthen commented:

@mcking65 the HTML all seemed to be indented by a whole bunch of extra spaces. I want those removed.

Ah, thanks. Those are probably just the leading spaces that exist in our source. We should just trim the number of spaces from each line equal to the indent of the first line of the example.

ZoeBijl · 2019-09-21T22:22:45Z

This additional white space is in our own source code. Basically, because the example code follows the indentation of the example page itself the example code has more white space. Similar to how this works for code in a pre-element.

Other than that this seems to work pretty well, thanks @spectranaut.

mcking65 · 2019-09-23T19:28:24Z

@ZoeBijl or @jnurthen, are one of you available to push a commit to this branch with a style for positioning the button? I think we want a class in examples/css/core.css that is applied to the "Open in CodePen" input element on the example page.

ZoeBijl · 2019-09-23T19:30:30Z

@mcking65 if there’s an issue for that can you assign that to me?

Make the button pretty

css-meeting-bot · 2019-09-24T18:48:35Z

The ARIA Authoring Practices (APG) Task Force just discussed open examples in CodePen.

The full IRC log of that discussion

<carmacleod> TOPIC: open examples in CodePen
<carmacleod> mck: need someone to do some css, then Jesse Beach will add to all of the examples
<carmacleod> github: https://github.com//pull/1110
<carmacleod> zoe: I will make the button pretty

ZoeBijl · 2019-10-01T22:53:39Z

I have committed and pushed some core CSS changes that styles this button and positions it next to the “Example” heading text. Please review.

examples/css/core.css

carmacleod · 2019-10-15T18:40:22Z

@ZoeBijl Please have a look at the grid page because we have longer headings

css-meeting-bot · 2019-10-15T18:41:01Z

The ARIA Authoring Practices (APG) Task Force just discussed Open examples in CodePen.

The full IRC log of that discussion

<carmacleod> TOPIC: Open examples in CodePen
<carmacleod> github: https://github.com//pull/1110
<carmacleod> Zoe: button is blue - can make it purple
<jamesn> +1 on the button - its awesome. I have no preference on the colour
<carmacleod> Zoe: preview https://raw.githack.com/w3c/aria-practices/issue1102-open-example-codepen/examples/slider/multithumb-slider.html
<carmacleod> james: the HTML has incorrect indentation when opened in CodePen
<carmacleod> Zoe: that doesn't have to be fixed before merge - it can be fixed after

ZoeBijl · 2019-10-17T08:35:22Z

@carmacleod thank you for the reminder ⭐️.

The current CSS works with short and long headings. When you zoom in you’ll end up with something like this:

@spectranaut have you tested this on a page with multiple examples?

spectranaut · 2019-10-21T14:33:21Z

@ZoeBijl I remember designing the pattern with the possibility of multiple examples per page and I might have tested it locally when making this PR, but I didn't test it thoroughly. The function sourceCode.add('sc1', 'ex1', 'editCode', 'cssJsFiles'); takes a bunch of ids to specify which example it's making the source code/moding the view in code pen button for. You can have two different ids for the two different buttons and two diferent sets of resource files.

spectranaut · 2019-10-25T19:04:57Z

@jnurthen @mcking65 I added some regex to clean up the white space at the beginning of the html.

ZoeBijl · 2019-10-25T19:07:04Z

examples/slider/multithumb-slider.html

@@ -7,6 +7,7 @@
  <!--  Core js and css shared by all examples; do not modify when using this template. -->
  <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
  <link rel="stylesheet" href="../css/core.css">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


Is there a way we can do this without jQuery?

It would be a lot more obnoxious to get the javascript and css resources but certainly we could. Why should we not use jQuery?

Feels weird to include an entire library to open an example in an external resource 🤷‍♀. Is it a one time annoyance? Or is it annoying every time we add an example?

one time annoyance, to replace the $.get ajaxes in the examples/js/examples.js file.

Can't say that I won't to write that code, lol :) but I hear your point.

I can have a look 👩‍💻.

spectranaut · 2020-06-12T18:18:31Z

@mcking65 -- I added a commit to add the button in the example.js file, and to test I also added a commit to the buttons to the data grids example -- the buttons all work great!

However, you still have to edit the example page in three ways:

Add the a div with class "example-header" around the example's header to keep all the styling @ZoeBijl added.
Add an id to a element that contains all the js and css files you want to open in code pen (in the Javascript and CSS Source Code section).
Pass the id of the header and id of the container for the source files to the sourceCode.add call that already exists to put the html of each example on the example page.

AND, unfortunately, the data grids example does not work when opened in codepen. The code to initialize the data grid expects the grid to be in the APG example page. When we role this out, we are going to have to test each example -- it it works, then we can add the buttons (by doing the three steps above), if it doesn't work, then we will have to make a backlog issue to refactor the code so that the example can work in isolation.

We should revert the commit to add the buttons to dataGrid before merging this, I just wanted to show it as a proof of concept for now.

mcking65 · 2020-06-25T10:01:04Z

@spectranaut, thank you. They are working beautifully!

Before merging, let's reduce this PR so that it is only adding the capability but not changing any example pages, i.e., changes only examples.js and core.css, reverting d96dd7d and changes to spinbutton.

you still have to edit the example page in three ways:

We should do these mods in a series of separate PRs.

Add the a div with class "example-header" around the example's header to keep all the styling @ZoeBijl added.

Add an id to a element that contains all the js and css files you want to open in code pen (in the Javascript and CSS Source Code section).

Pass the id of the header and id of the container for the source files to the sourceCode.add call that already exists to put the html of each example on the example page.

Do we also have to load jquery on every page now as well?

It would be useful to have some way of tracking implementation progress and then later enforcing these requirements. What do you think of an "allowed to fail" lint rule that tests to see if these conditions might not be present?

AND, unfortunately, the data grids example does not work when opened in codepen. The code to initialize the data grid expects the grid to be in the APG example page. When we role this out, we are going to have to test each example -- it it works, then we can add the buttons (by doing the three steps above), if it doesn't work, then we will have to make a backlog issue to refactor the code so that the example can work in isolation.

Bummer; I hope there aren't many such cases.

spectranaut · 2020-06-26T21:36:30Z

Hi Matt, I just pushed a few commits:

Added more documentation to the js/examples.js API
Reverted the changes in slider and grid to add the button
Updated the example template to include the button by default (the example template turns out to be a good demo of the functionality, check it out!)
Finally, your comment about jQuery reminded me about an earlier request from @ZoeBijl to remove jQuery, as it seems pretty silly to include it in every single example page for one cleaner function call in js/examples.js. So I removed the dependency on jQuery and wrote the ajax request in plain javascript.

Because of the last item, we should have one more code review on this PR, I think!

I also added a how to page in the wiki.

I didn't add anything to travis to check for whether the code pen button is on the page. Maybe we should keep a list of examples without CodePen links in the wiki page?

mcking65 · 2020-07-01T00:56:25Z

@spectranaut, this is looking great!! After merging, we can figure out how to track implementation in the example pages.

@smhigley can you please take a look at the new implementation? If it looks good to you, we'll merge.

smhigley

It looks good to me!

The only thing I can think of is maybe it would be good to hide the "Open in Codepen" button until the requests have either completed or errored. I think we could just merge this now though and see how it goes, then maybe adjust in the future if desired :).

Same goes for the comments I left -- they were just thoughts I had when reading it through, not things that would need to be changed.

smhigley · 2020-09-09T17:18:34Z

examples/js/examples.js

+    }, 500);
+
+    setTimeout(() => {
+        clearInterval(timerId);


Would it make sense to have a hideButton call here too, with an error message about loading files timing out?

smhigley · 2020-09-09T17:21:25Z

examples/js/examples.js

+            document.getElementById(jsonInputId).value = JSON.stringify(postJson);
+            clearInterval(timerId);
+        }
+    }, 500);


Not a thing that needs to be fixed, but it looks like async/await is supported in all modern browsers. If we wanted to avoid using manual intervals, pushing all the request.send promises into an array then doing await Promise.all could work.

This was referenced Jul 24, 2019

Proof of concept: Open example in JSFiddle #1111

Closed

Open aria practice's examples in online javascript/html/css editor #1102

Closed

spectranaut force-pushed the issue1102-open-example-codepen branch from 05e14d3 to f812b89 Compare July 26, 2019 18:57

mcking65 force-pushed the issue1102-open-example-codepen branch from f812b89 to 2480546 Compare September 21, 2019 09:22

jnurthen reviewed Oct 1, 2019

View reviewed changes

examples/css/core.css Show resolved Hide resolved

ZoeBijl reviewed Oct 25, 2019

View reviewed changes

ZoeBijl approved these changes Oct 25, 2019

View reviewed changes

mcking65 linked an issue Apr 29, 2020 that may be closed by this pull request

Open aria practice's examples in online javascript/html/css editor #1102

Closed

spectranaut force-pushed the issue1102-open-example-codepen branch from a5a69ea to d96dd7d Compare June 12, 2020 18:04

mcking65 marked this pull request as ready for review June 30, 2020 21:57

mcking65 requested a review from smhigley June 30, 2020 21:58

mcking65 changed the title ~~Proof of concept: open example in CodePen~~ Infrastructure: Add support for opening examples in CodePen Jul 1, 2020

mcking65 force-pushed the issue1102-open-example-codepen branch from 8944220 to 625a43d Compare July 1, 2020 00:33

smhigley approved these changes Sep 9, 2020

View reviewed changes

Valerie R Young and others added 15 commits September 15, 2020 01:26

Codepen

39fd8f0

Move button next to example heading and shorten name

5ff0849

Fix inconsistent indentation

203a833

Core Style: Add styles for CodePen button (issue #1102)

0abccfb

Core Style: Simplify CodePen button code (issue #1102)

6bda89b

Core Styles: Update example heading (issue #1102)

ceecf66

Core Styles: Simplify example heading style (issue #1102)

395e345

Remove indentation from html

c80e5f6

Add the "open in codepen" button in the example.js code

cfe0cc4

Add buttons to dataGrid

4c25691

Add documentation for sourceCode.add

91584a8

Remove dependency on jQuery

66e20c4

Add codepen button to example template

4e2b5db

Revert changes in grid/dataGrid which add codepen button

c52ae6e

Revert changes in slider/multithumb-slider which add codepen button

6998933

mcking65 force-pushed the issue1102-open-example-codepen branch from 625a43d to 6998933 Compare September 15, 2020 08:27

mcking65 merged commit 32ca9d3 into master Sep 15, 2020

zcorpan deleted the issue1102-open-example-codepen branch October 29, 2021 19:57

zcorpan mentioned this pull request Oct 29, 2021

meta: Cleaning up old branches #1552

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Infrastructure: Add support for opening examples in CodePen #1110

Infrastructure: Add support for opening examples in CodePen #1110

spectranaut commented Jul 24, 2019 •

edited by mcking65

Loading

mcking65 commented Sep 21, 2019

jnurthen commented Sep 21, 2019

mcking65 commented Sep 21, 2019

ZoeBijl commented Sep 21, 2019

mcking65 commented Sep 23, 2019

ZoeBijl commented Sep 23, 2019 •

edited

Loading

css-meeting-bot commented Sep 24, 2019

ZoeBijl commented Oct 1, 2019

carmacleod commented Oct 15, 2019

css-meeting-bot commented Oct 15, 2019

ZoeBijl commented Oct 17, 2019 •

edited

Loading

spectranaut commented Oct 21, 2019

spectranaut commented Oct 25, 2019

ZoeBijl Oct 25, 2019

spectranaut Oct 25, 2019

ZoeBijl Oct 25, 2019

spectranaut Oct 25, 2019

spectranaut Oct 25, 2019

ZoeBijl Oct 25, 2019 •

edited

Loading

spectranaut commented Jun 12, 2020 •

edited

Loading

mcking65 commented Jun 25, 2020

spectranaut commented Jun 26, 2020 •

edited

Loading

mcking65 commented Jul 1, 2020

smhigley left a comment

smhigley Sep 9, 2020

smhigley Sep 9, 2020

Infrastructure: Add support for opening examples in CodePen #1110

Infrastructure: Add support for opening examples in CodePen #1110

Conversation

spectranaut commented Jul 24, 2019 • edited by mcking65 Loading

Preview WIP

mcking65 commented Sep 21, 2019

jnurthen commented Sep 21, 2019

mcking65 commented Sep 21, 2019

ZoeBijl commented Sep 21, 2019

mcking65 commented Sep 23, 2019

ZoeBijl commented Sep 23, 2019 • edited Loading

css-meeting-bot commented Sep 24, 2019

ZoeBijl commented Oct 1, 2019

carmacleod commented Oct 15, 2019

css-meeting-bot commented Oct 15, 2019

ZoeBijl commented Oct 17, 2019 • edited Loading

spectranaut commented Oct 21, 2019

spectranaut commented Oct 25, 2019

ZoeBijl Oct 25, 2019

Choose a reason for hiding this comment

spectranaut Oct 25, 2019

Choose a reason for hiding this comment

ZoeBijl Oct 25, 2019

Choose a reason for hiding this comment

spectranaut Oct 25, 2019

Choose a reason for hiding this comment

spectranaut Oct 25, 2019

Choose a reason for hiding this comment

ZoeBijl Oct 25, 2019 • edited Loading

Choose a reason for hiding this comment

spectranaut commented Jun 12, 2020 • edited Loading

mcking65 commented Jun 25, 2020

spectranaut commented Jun 26, 2020 • edited Loading

mcking65 commented Jul 1, 2020

smhigley left a comment

Choose a reason for hiding this comment

smhigley Sep 9, 2020

Choose a reason for hiding this comment

smhigley Sep 9, 2020

Choose a reason for hiding this comment

spectranaut commented Jul 24, 2019 •

edited by mcking65

Loading

ZoeBijl commented Sep 23, 2019 •

edited

Loading

ZoeBijl commented Oct 17, 2019 •

edited

Loading

ZoeBijl Oct 25, 2019 •

edited

Loading

spectranaut commented Jun 12, 2020 •

edited

Loading

spectranaut commented Jun 26, 2020 •

edited

Loading