-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
This extension adds the current referrer's domains as classes to the HTML element. If the current document is inside a viewer, it'll add a viewer CSS class ass well.
- Loading branch information
1 parent
f3edeb2
commit 8b46ced
Showing
8 changed files
with
318 additions
and
0 deletions.
There are no files selected for viewing
101 changes: 101 additions & 0 deletions
101
extensions/amp-dynamic-css-classes/0.1/amp-dynamic-css-classes.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
/** | ||
* Copyright 2015 The AMP HTML Authors. All Rights Reserved. | ||
* | ||
* 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. | ||
*/ | ||
|
||
import {parseUrl} from '../../../src/url'; | ||
import {viewerFor} from '../../../src/viewer'; | ||
import {log} from '../../../src/log'; | ||
import {isExperimentOn} from '../../../src/experiments'; | ||
|
||
/** @const */ | ||
const TAG = 'AmpDynamicCssClasses'; | ||
|
||
/** @const */ | ||
const EXPERIMENT = 'dynamic-css-classes'; | ||
|
||
/** | ||
* Returns an array of referrers which vary in level of subdomain specificity. | ||
* | ||
* @param {string} referrer | ||
* @return {!Array<string>} | ||
* @private Visible for testing only! | ||
*/ | ||
export function referrers_(referrer) { | ||
referrer = parseUrl(referrer).hostname; | ||
const domains = referrer.split('.'); | ||
let domainBase = ''; | ||
|
||
return domains.reduceRight((referrers, domain) => { | ||
if (domainBase) { | ||
domain += '-' + domainBase; | ||
} | ||
domainBase = domain; | ||
referrers.push(domain); | ||
return referrers; | ||
}, []); | ||
} | ||
|
||
/** | ||
* Adds CSS classes onto the HTML element. | ||
* @param {!Window} win | ||
* @param {!Array<string>} classes | ||
*/ | ||
function addDynamicCssClasses(win, classes) { | ||
const documentElement = win.document.documentElement; | ||
const classList = documentElement.classList; | ||
|
||
for (let i = 0; i < classes.length; i++) { | ||
classList.add(classes[i]); | ||
} | ||
} | ||
|
||
|
||
/** | ||
* Adds dynamic css classes based on the referrer, with a separate class for | ||
* each level of subdomain specificity. | ||
* @param {!Window} win | ||
*/ | ||
function addReferrerClasses(win) { | ||
const classes = referrers_(win.document.referrer).map(referrer => { | ||
return `amp-referrer-${referrer}`; | ||
}); | ||
addDynamicCssClasses(win, classes); | ||
} | ||
|
||
|
||
/** | ||
* Adds a dynamic css class `amp-viewer` if this document is inside a viewer. | ||
* @param {!Window} win | ||
*/ | ||
function addViewerClass(win) { | ||
const viewer = viewerFor(win); | ||
if (viewer.isEmbedded()) { | ||
addDynamicCssClasses(win, ['amp-viewer']); | ||
} | ||
} | ||
|
||
/** | ||
* @param {!Window} win | ||
*/ | ||
function addRuntimeClasses(win) { | ||
if (isExperimentOn(win, EXPERIMENT)) { | ||
addReferrerClasses(win); | ||
addViewerClass(win); | ||
} else { | ||
log.warn(TAG, `Experiment ${EXPERIMENT} disabled`); | ||
} | ||
} | ||
|
||
addRuntimeClasses(AMP.win); |
65 changes: 65 additions & 0 deletions
65
extensions/amp-dynamic-css-classes/0.1/test/test-dynamic-classes.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
/** | ||
* Copyright 2015 The AMP HTML Authors. All Rights Reserved. | ||
* | ||
* 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. | ||
*/ | ||
|
||
import {referrers_} from '../amp-dynamic-css-classes'; | ||
|
||
describe('amp-dynamic-css-classes', () => { | ||
describe('referrers_', () => { | ||
describe('when referrer is TLD-less', () => { | ||
const referrer = 'http://localhost/test/ing?this#referrer'; | ||
|
||
it('contains the domain', () => { | ||
expect(referrers_(referrer)).to.deep.equal(['localhost']); | ||
}); | ||
}); | ||
|
||
describe('when referrer has no subdomains', () => { | ||
const referrer = 'http://google.com/test/ing?this#referrer'; | ||
const referrers = referrers_(referrer); | ||
|
||
it('contains the TLD', () => { | ||
expect(referrers).to.contain('com'); | ||
}); | ||
|
||
it('contains the domain', () => { | ||
expect(referrers).to.contain('google-com'); | ||
expect(referrers.length).to.equal(2); | ||
}); | ||
}); | ||
|
||
describe('when referrer has subdomains', () => { | ||
const referrer = 'http://a.b.c.google.com/test/ing?this#referrer'; | ||
const referrers = referrers_(referrer); | ||
|
||
it('contains the TLD', () => { | ||
expect(referrers).to.contain('com'); | ||
}); | ||
|
||
it('contains the domain', () => { | ||
expect(referrers).to.contain('google-com'); | ||
}); | ||
|
||
it('contains each subdomain', () => { | ||
expect(referrers).to.include.members([ | ||
'c-google-com', | ||
'b-c-google-com', | ||
'a-b-c-google-com' | ||
]); | ||
expect(referrers.length).to.equal(5); | ||
}); | ||
}); | ||
}); | ||
}); |
60 changes: 60 additions & 0 deletions
60
extensions/amp-dynamic-css-classes/0.1/test/test-runtime-classes.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
/** | ||
* Copyright 2015 The AMP HTML Authors. All Rights Reserved. | ||
* | ||
* 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. | ||
*/ | ||
|
||
import {createServedIframe} from '../../../../testing/iframe'; | ||
import {toggleExperiment} from '../../../../src/experiments'; | ||
|
||
const iframeSrc = '/base/test/fixtures/served/amp-dynamic-css-classes.html'; | ||
|
||
describe('dynamic classes are inserted at runtime', () => { | ||
let documentElement, win; | ||
beforeEach(() => { | ||
return createServedIframe(iframeSrc).then(fixture => { | ||
win = fixture.win; | ||
documentElement = fixture.doc.documentElement; | ||
}); | ||
}); | ||
|
||
describe('when experiment is disabled', () => { | ||
beforeEach(() => { | ||
toggleExperiment(win, 'dynamic-css-classes', false); | ||
return win.insertDynamicCssScript(); | ||
}); | ||
|
||
it('should not include referrer classes', () => { | ||
expect(documentElement).not.to.have.class('amp-referrer-localhost'); | ||
}); | ||
|
||
it('should not include viewer class', () => { | ||
expect(documentElement).not.to.have.class('amp-viewer'); | ||
}); | ||
}); | ||
|
||
describe('when experiment is enabled', () => { | ||
beforeEach(() => { | ||
toggleExperiment(win, 'dynamic-css-classes', true); | ||
return win.insertDynamicCssScript(); | ||
}); | ||
|
||
it('should include referrer classes', () => { | ||
expect(documentElement).to.have.class('amp-referrer-localhost'); | ||
}); | ||
|
||
it('should include viewer class', () => { | ||
expect(documentElement).to.have.class('amp-viewer'); | ||
}); | ||
}); | ||
}); |
37 changes: 37 additions & 0 deletions
37
extensions/amp-dynamic-css-classes/amp-dynamic-css-classes.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
<!--- | ||
Copyright 2015 The AMP HTML Authors. All Rights Reserved. | ||
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. | ||
--> | ||
|
||
### <a name="amp-dynamic-css-classes"></a> AMP Dynamic CSS Classes | ||
|
||
The AMP Dynamic CSS Classes extension adds several dynamic CSS class | ||
names onto the HTML element. | ||
|
||
#### Behavior | ||
|
||
The AMP Dynamic CSS Classes extension adds the following CSS classes | ||
onto the HTML element: | ||
|
||
**amp-referrer-*** | ||
|
||
One or more referrer classes will be set, one for each level of | ||
subdomain specificity. For example, `www.google.com` will add three | ||
classes: `amp-referrer-www-google-com`, `amp-referrer-google-com`, and | ||
`amp-referrer-com`. | ||
|
||
**amp-viewer** | ||
|
||
The `amp-viewer` class will be set if the current document is being | ||
displayed inside a Viewer. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
<!doctype html> | ||
<html ⚡> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>AMP #0</title> | ||
<link rel="canonical" href="amps.html" > | ||
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> | ||
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> | ||
<script async src="/base/dist/amp.js"></script> | ||
<script> | ||
function insertDynamicCssScript() { | ||
return new Promise((resolve, reject) => { | ||
var script = document.createElement('script'); | ||
script.src = '/base/dist/v0/amp-dynamic-css-classes-0.1.max.js'; | ||
script.onload = resolve; | ||
script.onerror = reject; | ||
document.getElementsByTagName('head')[0].appendChild(script); | ||
}); | ||
} | ||
</script> | ||
</head> | ||
<body> | ||
|
||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters