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

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

Closed
spectranaut opened this issue Jul 19, 2019 · 1 comment · Fixed by #1110
Closed

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

spectranaut opened this issue Jul 19, 2019 · 1 comment · Fixed by #1110
Assignees
@zcorpan
Labels
enhancement Any addition or improvement that doesn't fix a code bug or prose inaccuracy Example Page Related to a page containing an example implementation of a pattern
Milestone
1.2 Release 1

Comments

@spectranaut
Copy link
Contributor

spectranaut commented Jul 19, 2019 •
edited
Loading

See draft PR #1110 for an example implementation using Codepen's post API.

See draft PR #1111 for an example implementation using JSFiddle's post API

We'd really like to hear from the community if they prefer JSFiddle or Codepen, it seems like both are perfectly workable solutions from the tech side.
This was referenced Aug 6, 2019
Merged
Closed
@mcking65 mcking65 added Example Page Related to a page containing an example implementation of a pattern enhancement Any addition or improvement that doesn't fix a code bug or prose inaccuracy labels Aug 6, 2019
ZoeBijl added a commit that referenced this issue Oct 1, 2019
@ZoeBijl
Core Style: Add styles for CodePen button (issue #1102)
04b6ca6
ZoeBijl added a commit that referenced this issue Oct 1, 2019
@ZoeBijl
Core Style: Simplify CodePen button code (issue #1102)
f7c9fe7
ZoeBijl added a commit that referenced this issue Oct 17, 2019
@ZoeBijl
Core Styles: Update example heading (issue #1102)
0613667
ZoeBijl added a commit that referenced this issue Oct 17, 2019
@ZoeBijl
Core Styles: Simplify example heading style (issue #1102)
ad86589
@mcking65 mcking65 mentioned this issue Dec 9, 2019
Closed
@mcking65
Copy link
Contributor

@zcorpan, we are going with the codepen implementation in PR #1110.

However, instead of manually adding the button to open codepen to each example page, we would like to add it dynamically. The examples/js/examples.js script runs on every example page to add the HTML source of the example. We can add this capability to that script.

I'm assigning this issue to you to make that change to examples.js.

@mcking65 mcking65 added this to the 1.2 Release 1 milestone Apr 29, 2020
@mcking65 mcking65 linked a pull request Apr 29, 2020 that will close this issue
Infrastructure: Add support for opening examples in CodePen #1110
Merged
spectranaut pushed a commit that referenced this issue Jun 12, 2020
@ZoeBijl
Core Style: Add styles for CodePen button (issue #1102)
31ad866
spectranaut pushed a commit that referenced this issue Jun 12, 2020
@ZoeBijl
Core Style: Simplify CodePen button code (issue #1102)
3c8ffa9
spectranaut pushed a commit that referenced this issue Jun 12, 2020
@ZoeBijl
Core Styles: Update example heading (issue #1102)
a6a629d
spectranaut pushed a commit that referenced this issue Jun 12, 2020
@ZoeBijl
Core Styles: Simplify example heading style (issue #1102)
576344f
mcking65 pushed a commit that referenced this issue Jul 1, 2020
@ZoeBijl @mcking65
Core Style: Add styles for CodePen button (issue #1102)
28319f9
mcking65 pushed a commit that referenced this issue Jul 1, 2020
@ZoeBijl @mcking65
Core Style: Simplify CodePen button code (issue #1102)
28f5453
mcking65 pushed a commit that referenced this issue Jul 1, 2020
@ZoeBijl @mcking65
Core Styles: Update example heading (issue #1102)
2444468
mcking65 pushed a commit that referenced this issue Jul 1, 2020
@ZoeBijl @mcking65
Core Styles: Simplify example heading style (issue #1102)
c6ccb86
mcking65 pushed a commit that referenced this issue Sep 15, 2020
@ZoeBijl @mcking65
Core Style: Add styles for CodePen button (issue #1102)
0abccfb
mcking65 pushed a commit that referenced this issue Sep 15, 2020
@ZoeBijl @mcking65
Core Style: Simplify CodePen button code (issue #1102)
6bda89b
mcking65 pushed a commit that referenced this issue Sep 15, 2020
@ZoeBijl @mcking65
Core Styles: Update example heading (issue #1102)
ceecf66
mcking65 pushed a commit that referenced this issue Sep 15, 2020
@ZoeBijl @mcking65
Core Styles: Simplify example heading style (issue #1102)
395e345
mcking65 added a commit that referenced this issue Sep 15, 2020
@spectranaut @mcking65 @ZoeBijl
Infrastructure: Add support for opening examples in CodePen (pull #1110)
32ca9d3 
Resolves issue #1102 by adding support to dynamically add an "Open in Codepen" button adjacent to the heading above an example.
The examples/js/examples.js script uses the Codepen POST API to prefill its HTML/CSS/JS inputs.
The script expects a specific class on the heading of the example and requires that IDs for specific elements be passed to the scourceCode.add method call.

Co-authored-by: Matt King <a11yThinker@gmail.com>
Co-authored-by: Zoë Bijl <zoe.bijl@crowdstrike.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@zcorpan zcorpan

Labels
enhancement Any addition or improvement that doesn't fix a code bug or prose inaccuracy Example Page Related to a page containing an example implementation of a pattern
Projects
None yet
Milestone
1.2 Release 1
Development

Successfully merging a pull request may close this issue.

Infrastructure: Add support for opening examples in CodePen w3c/aria-practices
3 participants
@zcorpan @spectranaut @mcking65