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

Enable playground sharing via hash string #4046

Merged
merged 3 commits into from
Jun 9, 2020
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
Next Next commit
Enable playground sharing via hash string
Fixes #3324
  • Loading branch information
sebastianbenz committed Jun 8, 2020
commit 2d70f4433e1460784b938edd56e1e527b118025f
6 changes: 3 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,7 @@
"husky": "4.2.5",
"jasmine": "3.5.0",
"jest": "26.0.1",
"js-base64": "2.5.2",
"js-beautify": "1.11.0",
"keymaster": "1.6.2",
"marked": "1.1.0",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -294,4 +294,4 @@ A Sponsored Story exists as a URL on the web, enabling the drive of user traffic

{{ image('/static/img/docs/stampads/sponsored_story_full.png', 1600, 900, layout='intrinsic', alt='CTA button directs to a Sponsored Story', caption='CTA button directs to a Sponsored Story', align='' ) }}

Read more about creating an [AMP Story here](/documentation/guides-and-tutorials/start/create_successful_stories.md).
Read more about creating an [AMP Story here](../start/create_successful_stories.md).
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ A new release of AMP is pushed to all AMP pages every week on Tuesday. **Once a

The AMP runtime and extensions are provided through a variety of different _release channels_. Each channel serves a purpose for developers and for the AMP HTML Project itself. See the [release cadence section](#release-cadence) for a more detailed breakdown of how and when code from the [`ampproject/amphtml`](https://github.com/ampproject/amphtml) repository makes it into release builds.

To determine if a PR has been included in any of the following release channels, look for the GitHub labels _PR Use: In Canary_, _PR Use: In Production_, or _PR Use: In LTS_ (see the section on [determining if your change is in a release](#Determining-if-your-change-is-in-a-release) for more details).
To determine if a PR has been included in any of the following release channels, look for the GitHub labels _PR Use: In Canary_, _PR Use: In Production_, or _PR Use: In LTS_ (see the section on [determining if your change is in a release](#determining-if-your-change-is-in-a-release) for more details).

### Nightly <a name="nightly"></a>

Expand Down Expand Up @@ -77,7 +77,7 @@ The **lts** release channel provides a previous **stable** build for one-month i

In the event that the second Monday of the month falls on a holiday, the promotion will be performed after the end of the [release freeze](#release-freezes).

Important: Publishers using the **lts** release channel should not use newly introduced features. Because of the longer cycle, the **lts** release may be as much as seven weeks behind the `HEAD` of [`ampproject/amphtml`](https://github.com/ampproject/amphtml). See the section on [determining if your change is in a release](#Determining-if-your-change-is-in-a-release) to validate if a change will be ready with your chosen release cycle.
Important: Publishers using the **lts** release channel should not use newly introduced features. Because of the longer cycle, the **lts** release may be as much as seven weeks behind the `HEAD` of [`ampproject/amphtml`](https://github.com/ampproject/amphtml). See the section on [determining if your change is in a release](#determining-if-your-change-is-in-a-release) to validate if a change will be ready with your chosen release cycle.

## Determining if your change is in a release <a name="determining-if-your-change-is-in-a-release"></a>

Expand Down
1 change: 1 addition & 0 deletions platform/config/go-links.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
/auto-sw: https://github.com/ampproject/amp-sw/
/camp-code: https://github.com/ampproject/samples/tree/master/amp-camp
/cherry-picks: https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md#Cherry-picks
/components: https://amp.dev/documentation/components/
/contribute/code: https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md
/contribute/code-samples: /documentation/guides-and-tutorials/contribute/contribute-documentation/formatting/?format=websites#preview-code-samples
/contribute/docs: /documentation/guides-and-tutorials/contribute/contribute-documentation/
Expand Down
6 changes: 6 additions & 0 deletions playground/src/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import * as Menu from './menu/base.js';

import createSelector from './selector/selector.js';
import createTemplateDialog from './template-dialog/base.js';
import createShareAction from './share/';
import params from './params/base.js';
import events from './events/events.js';
import titleUpdater from './title-updater/base.js';
Expand Down Expand Up @@ -202,6 +203,11 @@ const templateDialog = createTemplateDialog(loadTemplateButton, {
snackbar.show(err);
},
});
// create the share action
const shareDialog = createShareAction(editor);
Button.from(document.getElementById('share'), () => {
shareDialog.open();
});

// configure menu
const menu = Menu.create();
Expand Down
6 changes: 6 additions & 0 deletions playground/src/document/controller.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.

import {Base64} from 'js-base64';
import * as PlaygroundDocument from './document.js';
import * as Button from '../button/button.js';

Expand Down Expand Up @@ -63,11 +64,16 @@ export default class DocumentController {
_setupDocument(runtime) {
this.docUrl = params.get('url');
this.docId = this._getDocumentId();
const docHash = params.getHash('share');
console.log('hash', window.location.hash, docHash);
let promise;
if (this.docUrl) {
promise = this.srcDoc.fetchUrl(this.docUrl);
} else if (this.docId) {
promise = this.srcDoc.fetchDocument(this.docId);
} else if (docHash) {
promise = Promise.resolve(Base64.decode(docHash));
this.win.location.hash = '';
} else {
promise = Promise.resolve(runtime.template);
}
Expand Down
3 changes: 2 additions & 1 deletion playground/src/index.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,8 @@
<div id="runtime-select"></div>
<div class="flex-right">
{{> button/button.hbs id="import-email" class="hidden" text="Import email"}}
{{> button/button.hbs id="format-source" class="square" ariaLabel="format source code" text="{ }"}}
{{> button/button.hbs id="share" text="SHARE"}}
{{> button/button.hbs id="format-source" class="square" ariaLabel="format source code" text="FORMAT"}}
</div>
</div>
{{> loader/loader.hbs theme="light"}}
Expand Down
28 changes: 22 additions & 6 deletions playground/src/params/base.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,20 @@ class Params {
this.win = win;
}

get(key, alt) {
const params = new URLSearchParams(this.win.location.search);
let result = params.get(key);
if (!result) {
result = alt;
getHash(key, alt) {
const hash = this.win.location.hash;
if (!hash) {
return alt;
}
return result;
const keyString = `#${key}=`;
if (!hash.startsWith(keyString)) {
return alt;
}
return hash.substring(keyString.length);
}

get(key, alt) {
return this._getValue(this.win.location.search, key, alt);
}

replace(key, value) {
Expand All @@ -49,6 +56,15 @@ class Params {
}
return this.win.location.pathname + paramsString;
}

_getValue(string, key, alt) {
const params = new URLSearchParams(string);
let result = params.get(key);
if (!result) {
result = alt;
}
return result;
}
}

export default new Params(window);
68 changes: 68 additions & 0 deletions playground/src/share/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
// Copyright 2020 The AMPHTML Authors
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

require('./share-dialog.scss');

import {Base64} from 'js-base64';
import createDialog from '../dialog/base.js';
import * as Button from '../button/button.js';

const MAX_URL_DISPLAY_LENGTH = 256;

export default function createShareAction(editor) {
return new ShareDialog(document, editor, createDialog());
}

class ShareDialog {
constructor(doc, editor, dialog) {
this.doc = doc;
this.editor = editor;
this.dialog = dialog;
}

open() {
const source = this.editor.getSource();
const shareUrl =
window.location.href.split('#')[0] + '#share=' + Base64.encode(source);
const root = document.createElement('div');
root.id = 'share-dialog';
const a = document.createElement('a');
a.setAttribute('href', shareUrl);
if (shareUrl.length > MAX_URL_DISPLAY_LENGTH) {
a.textContent = shareUrl.substring(0, MAX_URL_DISPLAY_LENGTH) + '...';
} else {
a.textContent = shareUrl;
}
root.appendChild(a);

const input = document.createElement('input');
root.appendChild(input);
input.hidden = true;

Button.create(root, {
text: 'Copy to clipboard',
onClick: () => {
input.hidden = false;
input.value = shareUrl;
input.select();
input.focus();
document.execCommand('copy');
input.hidden = true;
input.value = '';
this.dialog.close();
},
});
this.dialog.open(root);
}
}
16 changes: 16 additions & 0 deletions playground/src/share/share-dialog.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
@import 'base.scss';
@import 'components/atoms/_button.scss';

#share-dialog {
max-width: 700px;
padding: 16px;

a {
display: block;
overflow-wrap: break-word;
margin-top: 16px;
}
button {
@include btn;
}
}