Skip to content

Add paired browsing interface #3656

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

Merged
westonruter merged 56 commits into from
Nov 30, 2019
Merged

Add paired browsing interface #3656

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
56 commits
Select commit Hold shift + click to select a range
06e2f66
Add paired browsing admin menu bar item
pierlon Oct 26, 2019
aa416d9
Adapt 'AMP_To_AMP' paired browsing plugin developed by Weston
pierlon Oct 28, 2019
3dc85b3
Disconnect AMP iframe if there are validation errors
pierlon Oct 28, 2019
eed7188
No need to check support mode if checking if its in paired mode
pierlon Oct 28, 2019
44995bf
Add doc comment for `serve_paired_browsing_experience`
pierlon Oct 28, 2019
3042b39
Fix lint errors
pierlon Oct 28, 2019
80ef180
Fix trailing commas
pierlon Oct 28, 2019
5bab275
Destructure `window` to retrieve global variables
pierlon Oct 29, 2019
4497761
Add Paired Browsing navigation bar
pierlon Oct 29, 2019
fda81a0
Enqueue Paired Browsing app assets
pierlon Oct 29, 2019
47c2b20
Remove redundant echo
pierlon Oct 29, 2019
26d728e
Require generated assets from `wp-scripts`
pierlon Oct 30, 2019
f9e0e04
Use helpers from WordPress packages to make code DRY
pierlon Oct 30, 2019
7d3983c
Escape text
pierlon Oct 30, 2019
1416e5d
Add missing doc comment
pierlon Oct 30, 2019
dad775b
Remove any unnecessary query vars that could hamper for the paired br…
pierlon Oct 30, 2019
ce70fe7
Add paired browsing button to AMP Validated URL status metabox
pierlon Oct 30, 2019
b521903
Add the ability to exit paired browsing
pierlon Oct 30, 2019
1c98628
Allow paired browsing while admin bar is not showing
pierlon Oct 31, 2019
f4e5365
Provide inline variables through `wp_localize_script`
pierlon Oct 31, 2019
338535c
Make exit link accessible
pierlon Oct 31, 2019
f7fea3b
Add labels for iframes
pierlon Nov 6, 2019
14e3ffc
Make labels noninteractive
pierlon Nov 6, 2019
0eb64fc
Revert adding labels on iframes
pierlon Nov 9, 2019
c49975f
Lower the interval on checking for a disconnected iframe
pierlon Nov 9, 2019
94f1c34
Underline exit link on hover
pierlon Nov 9, 2019
8cef6af
Use horizontal ellipsis HTML code
pierlon Nov 9, 2019
deed1e3
Refactor escape of HTML
pierlon Nov 9, 2019
2a0fe5d
Add titles for iframes
pierlon Nov 9, 2019
e931ba4
Prevent AMP iframe from loading twice
pierlon Nov 9, 2019
1d2787f
Move paired browsing template to includes/templates
pierlon Nov 15, 2019
ab76768
No need to open paired browsing in a new template as there is now a l…
pierlon Nov 15, 2019
9c96881
Ensure all scripts paired browsing interface depends upon is whitelisted
pierlon Nov 15, 2019
1aad73e
Add skip links for iframes
pierlon Nov 18, 2019
e8fac2b
Use query selector for targeting iframes
pierlon Nov 20, 2019
d09d368
Move AMP logo into same list item of its label
pierlon Nov 24, 2019
8bf8dc4
Underline exit link on focus
pierlon Nov 24, 2019
2eb69af
Add labels for each iframe
pierlon Nov 24, 2019
d86ba3f
Show 'disconnected' overlay if AMP version of page is not available o…
pierlon Nov 26, 2019
135115b
Make AMP document check more robust
pierlon Nov 28, 2019
b584f48
Remove AMP menu in non-AMP window
pierlon Nov 28, 2019
072c29d
Use `__return_true` function for simplicity
pierlon Nov 28, 2019
7d52f7d
Only create paired browsing item admin bar data if needed
pierlon Nov 28, 2019
967e75a
Remove underline from iframe labels
pierlon Nov 28, 2019
b684aa2
Navigate parent window to disconnected client upon exiting
pierlon Nov 28, 2019
671e6c0
Use gray background color for non-AMP half of screen
westonruter Nov 30, 2019
f56ab39
Let Non-AMP and AMP headings be links
westonruter Nov 30, 2019
02aff70
Eliminate (redundant) Paired Browsing heading and Exit link
westonruter Nov 30, 2019
72f761d
Use 'AMP Paired Browsing:' as prefix for document title
westonruter Nov 30, 2019
05fc0b0
Merge branch 'develop' of github.com:ampproject/amp-wp into enhanceme…
westonruter Nov 30, 2019
2097e41
Omit paired browsing admin bar item when invalid markup present
westonruter Nov 30, 2019
42a4c92
Remove all validation query vars when entering paired browsing
westonruter Nov 30, 2019
7824d05
Add helper method to get paired browsing URL and use in links up front
westonruter Nov 30, 2019
53c78f4
Remove 'start' from paired browsing; use link instead of button
westonruter Nov 30, 2019
0b2caa8
Remove extraneous method in favor of (temporary) closure
westonruter Nov 30, 2019
a13bddd
Add robots noindex/nofollow meta tag in paired browsing app
westonruter Nov 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"no-unused-vars": [
"error",
{
"ignoreRestSiblings": true,
"ignoreRestSiblings": true
}
],
"no-useless-call": "error",
Expand Down Expand Up @@ -84,7 +84,7 @@
],
"jest/no-hooks": "off",
"jest/prefer-expect-assertions": "off",
"jest/prefer-inline-snapshots": "off",
"jest/prefer-inline-snapshots": "off"
}
},
{
Expand All @@ -102,7 +102,7 @@
],
"jest/no-hooks": "off",
"jest/prefer-expect-assertions": "off",
"jest/prefer-inline-snapshots": "off",
"jest/prefer-inline-snapshots": "off"
}
}
]
Expand Down
195 changes: 195 additions & 0 deletions assets/src/admin/paired-browsing/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

body {
display: flex;
flex-direction: column;
}

body * {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

#header {
height: 32px;
}

#header * {
color: #fff;
}

#header ul {
display: flex;
margin: 0;
padding: 0;
list-style: none;
height: 100%;
}

#header li {
align-items: center;
display: flex;
line-height: 1.5;
}

#header .iframe-label {
margin: 0 auto;
font-weight: 600;
width: 50%;
justify-content: center;
}

#header .iframe-label.amp {
background-color: #0075c2;
}

#header .iframe-label.non-amp {
background-color: #666;
}

.iframe-label a {
text-decoration: none;
Comment thread
schlessera marked this conversation as resolved.
Outdated
}

.iframe-label .dashicons-migrate {
padding-left: 4px;
text-decoration: none;
vertical-align: text-top;
}

.iframe-label a:hover,
.iframe-label a:focus {
text-decoration: underline;
}

#non-amp,
#amp {
flex: 1 0 auto;
align-self: stretch;
}

#non-amp {
border-right: 1px solid #666;
}

#amp {
border-left: 1px solid #0075c2;
}

.container {
display: flex;
height: 100%;
}

iframe {
width: 100%;
height: 100%;
border: 0;
}

.disconnect-overlay {
display: none;
position: fixed;
width: 50%;
height: 100%;
overflow-y: auto;
background-color: rgba(0, 0, 0, 0.4);
text-align: center;
}

.disconnect-overlay::before {
content: " ";
display: inline-block;
vertical-align: middle;
height: 100%;
}

.disconnect-overlay.disconnected {
display: block;
}

.disconnect-overlay .dialog {
width: 480px;
background-color: #fff;
border-radius: 5px;
position: static;
margin: 20px 0;
padding: 0 20px;
display: inline-block;
vertical-align: middle;
pointer-events: auto;
}

.disconnect-overlay.amp {
left: 50%;
}

.disconnect-overlay .dialog .dialog-icon {
margin: 20px auto;
}

.disconnect-overlay .dialog .dialog-icon .dashicons-warning {
width: 80px;
height: 80px;
font-size: 80px;
color: #fe7f2d;
}

.disconnect-overlay .dialog .dialog-text {
font-size: 16px;
padding: 0 10px;
max-width: calc(100% - 20px);
overflow-wrap: break-word;
}

.disconnect-overlay .dialog .dialog-buttons {
margin-top: 13px;
padding: 13px 16px;
}

.disconnect-overlay .dialog .dialog-buttons button {
margin: 5px;
border: none;
box-shadow: none;
border-radius: 5px;
font-weight: 600;
font-size: 14px;
padding: 10px 24px;
cursor: pointer;
}

.skip-link {
position: absolute;
left: -9999rem;
top: 2.5rem;
z-index: 999999999;
}

.skip-link:focus {
display: block;
left: 6px;
top: 7px;
font-size: 14px;
font-weight: 600;
line-height: normal;
padding: 15px 23px 14px;
z-index: 100000;
right: auto;
background-color: #fff;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto;
clip-path: none;
color: #0075c2;
height: auto;
width: auto;
}

.hidden {
display: none;
}
Loading