|
| 1 | +/** |
| 2 | + * Copyright 2016 The AMP HTML Authors. All Rights Reserved. |
| 3 | + * |
| 4 | + * Licensed under the Apache License, Version 2.0 (the "License"); |
| 5 | + * you may not use this file except in compliance with the License. |
| 6 | + * You may obtain a copy of the License at |
| 7 | + * |
| 8 | + * http://www.apache.org/licenses/LICENSE-2.0 |
| 9 | + * |
| 10 | + * Unless required by applicable law or agreed to in writing, software |
| 11 | + * distributed under the License is distributed on an "AS-IS" BASIS, |
| 12 | + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 13 | + * See the License for the specific language governing permissions and |
| 14 | + * limitations under the License. |
| 15 | + */ |
| 16 | + |
| 17 | +import { |
| 18 | + addParamToUrl, |
| 19 | + parseQueryString, |
| 20 | +} from '../../src/url'; |
| 21 | +import {closest} from '../../src/dom'; |
| 22 | + |
| 23 | + |
| 24 | + |
| 25 | +/** |
| 26 | + * Install a click listener that transforms navigation to the AMP cache |
| 27 | + * to a form that directly navigates to the doc and transmits the original |
| 28 | + * URL as a click logging info passed via a fragment param. |
| 29 | + * Expects to find a URL starting with "https://cdn.ampproject.org/c/" |
| 30 | + * to be available via a param call "adurl" (or defined by the |
| 31 | + * `data-url-param-name` attribute on the a tag. |
| 32 | + * @param {!Window} win |
| 33 | + */ |
| 34 | +export function installAlpClickHandler(win) { |
| 35 | + win.document.documentElement.addEventListener('click', handleClick); |
| 36 | + // Start loading destination doc when finger is down. |
| 37 | + // Needs experiment whether this is a good idea. |
| 38 | + win.document.documentElement.addEventListener('touchstart', warmupDynamic); |
| 39 | +} |
| 40 | + |
| 41 | +/** |
| 42 | + * Filter click event and then transform URL for direct AMP navigation |
| 43 | + * with impression logging. |
| 44 | + * @param {!MouseEvent} e |
| 45 | + * @visibleForTesting |
| 46 | + */ |
| 47 | +export function handleClick(e) { |
| 48 | + if (e.defaultPrevented) { |
| 49 | + return; |
| 50 | + } |
| 51 | + // Only handle simple clicks with the left mouse button/touch and without |
| 52 | + // modifier keys. |
| 53 | + if (e.buttons != 0 && e.buttons != 1) { |
| 54 | + return; |
| 55 | + } |
| 56 | + if (e.ctrlKey || e.altKey || e.shiftKey || e.metaKey) { |
| 57 | + return; |
| 58 | + } |
| 59 | + |
| 60 | + const link = getLinkInfo(e); |
| 61 | + if (!link || !link.eventualUrl) { |
| 62 | + return; |
| 63 | + } |
| 64 | + |
| 65 | + // Tag the original href with &=1 and make it a fragment param with |
| 66 | + // name click. |
| 67 | + const fragment = 'click=' + encodeURIComponent( |
| 68 | + addParamToUrl(link.a.href, 'amp', '1')); |
| 69 | + let destination = link.eventualUrl; |
| 70 | + if (link.eventualUrl.indexOf('#') == -1) { |
| 71 | + destination += '#' + fragment; |
| 72 | + } else { |
| 73 | + destination += '&' + fragment; |
| 74 | + } |
| 75 | + const win = link.a.ownerDocument.defaultView; |
| 76 | + const ancestors = win.location.ancestorOrigins; |
| 77 | + if (ancestors && ancestors[ancestors.length - 1] == 'http://localhost:8000') { |
| 78 | + destination = destination.replace('https://cdn.ampproject.org/c/', |
| 79 | + 'http://localhost:8000/max/'); |
| 80 | + } |
| 81 | + |
| 82 | + e.preventDefault(); |
| 83 | + navigateTo(win, link.a, destination); |
| 84 | +} |
| 85 | + |
| 86 | +/** |
| 87 | + * For an event, see if there is an anchor tag in the target |
| 88 | + * ancestor chain and if yes, check whether we can figure |
| 89 | + * out an AMP target URL. |
| 90 | + * @param {!Event} e |
| 91 | + * @return {{ |
| 92 | + * eventualUrl: (string|undefined), |
| 93 | + * a: !Element |
| 94 | + * }|undefined} A URL on the AMP Cache. |
| 95 | + */ |
| 96 | +function getLinkInfo(e) { |
| 97 | + const a = closest(e.target, element => { |
| 98 | + return element.tagName == 'A' && element.href; |
| 99 | + }); |
| 100 | + if (!a) { |
| 101 | + return; |
| 102 | + } |
| 103 | + return { |
| 104 | + eventualUrl: getEventualUrl(a), |
| 105 | + a, |
| 106 | + }; |
| 107 | +} |
| 108 | + |
| 109 | +/** |
| 110 | + * Given an anchor tag, figure out whether this goes to an AMP destination |
| 111 | + * via a redirect. |
| 112 | + * @param {!Element} a An anchor tag. |
| 113 | + * @return {string|undefined} A URL on the AMP Cache. |
| 114 | + */ |
| 115 | +function getEventualUrl(a) { |
| 116 | + const urlParamName = a.getAttribute('data-url-param-name') || 'adurl'; |
| 117 | + const eventualUrl = parseQueryString(a.search)[urlParamName]; |
| 118 | + if (!eventualUrl) { |
| 119 | + return; |
| 120 | + } |
| 121 | + if (!eventualUrl.indexOf('https://cdn.ampproject.org/c/') == 0) { |
| 122 | + return; |
| 123 | + } |
| 124 | + return eventualUrl; |
| 125 | +} |
| 126 | + |
| 127 | +/** |
| 128 | + * Navigate to the given URL. Infers the target from the given anchor |
| 129 | + * tag. |
| 130 | + * @param {!Window} win |
| 131 | + * @param {!Element} a Anchor element |
| 132 | + * @param {string} url |
| 133 | + */ |
| 134 | +function navigateTo(win, a, url) { |
| 135 | + const target = (a.target || '_top').toLowerCase(); |
| 136 | + win.open(url, target); |
| 137 | +} |
| 138 | + |
| 139 | +/** |
| 140 | + * Establishes a connection to the AMP Cache and makes sure |
| 141 | + * the AMP JS is cached. |
| 142 | + * @param {!Window} win |
| 143 | + */ |
| 144 | +export function warmupStatic(win) { |
| 145 | + // Preconnect using an image, because that works on all browsers. |
| 146 | + // The image has a 1 minute cache time to avoid duplicate |
| 147 | + // preconnects. |
| 148 | + new win.Image().src = 'https://cdn.ampproject.org/preconnect.gif'; |
| 149 | + // Preload the primary AMP JS that is render blocking. |
| 150 | + const linkRel = /*OK*/document.createElement('link'); |
| 151 | + linkRel.rel = 'preload'; |
| 152 | + linkRel.setAttribute('as', 'script'); |
| 153 | + linkRel.href = |
| 154 | + 'https://cdn.ampproject.org/rtv/01$internalRuntimeVersion$/v0.js'; |
| 155 | + getHeadOrFallback(win.document).appendChild(linkRel); |
| 156 | +} |
| 157 | + |
| 158 | +/** |
| 159 | + * For events (such as touch events) that point to an eligible URL, preload |
| 160 | + * that URL. |
| 161 | + * @param {!Event} e |
| 162 | + * @visibleForTesting |
| 163 | + */ |
| 164 | +export function warmupDynamic(e) { |
| 165 | + const link = getLinkInfo(e); |
| 166 | + if (!link || !link.eventualUrl) { |
| 167 | + return; |
| 168 | + } |
| 169 | + const linkRel = /*OK*/document.createElement('link'); |
| 170 | + linkRel.rel = 'preload'; |
| 171 | + linkRel.setAttribute('as', 'document'); |
| 172 | + linkRel.href = link.eventualUrl; |
| 173 | + getHeadOrFallback(e.target.ownerDocument).appendChild(linkRel); |
| 174 | +} |
| 175 | + |
| 176 | +/** |
| 177 | + * Return <head> if present or just the document element. |
| 178 | + * @param {!Document} doc |
| 179 | + * @return {!Element} |
| 180 | + */ |
| 181 | +function getHeadOrFallback(doc) { |
| 182 | + return doc.head || doc.documentElement; |
| 183 | +} |
0 commit comments