✨ Implements variable substitution macro for html element opacity.

extensions/amp-analytics/0.1/opacity.js

@@ -0,0 +1,113 @@
+/**
+ * Copyright 2018 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 {computedStyle} from '../../../src/style';
+
+
+/**
+  * Returns the Opacity value of the element.
+  * @param {!Element} el
+  * @return {number}
+  */
+function getElementOpacity(el) {
+  const win = window;
+  const fullyVisibleValue = 1;
+  const fullyHiddenValue = 0;
+
+  if (!el) { return fullyVisibleValue; }
+  const {visibility, opacity} = computedStyle(win, el);
+
+  if (visibility === 'hidden') {
+    return fullyHiddenValue;
+
+  }
+  const opacityValue = (opacity === '')
+    ? fullyVisibleValue
+    : parseFloat(opacity);
+
+  if (isNaN(opacityValue)) { return fullyVisibleValue; }
+
+  return opacityValue;
+
+}
+
+/**
+  * Returns the node tree of the current element starting from
+  * the document root
+  * @param {!Element|null} el
+  * @return {Array} node list of the element's node tree
+  */
+function getElementNodeTree(el) {
+  const nodeList = [];
+  if (!el) { return nodeList; }
+
+  const CAP = 50;
+  const DOCUMENT_NODE_TYPE = 9;
+  const ELEMENT_WITH_PARENT_TYPE = 1;
+  let parent;
+  let element = el;
+  nodeList.push(element);
+
+  for (let i = 0; i < CAP; i++) {
+
+    parent = element.parentNode || element.parentElement;
+
+    if (parent && parent.nodeType == ELEMENT_WITH_PARENT_TYPE) {
+      element = parent;
+      nodeList.push(element);
+
+    } else if (parent && parent.nodeType == DOCUMENT_NODE_TYPE) {
+      parent = element.ownerDocument.defaultView.frameElement;
+
+      if (parent && parent.nodeType == ELEMENT_WITH_PARENT_TYPE) {
+        element = parent;
+        nodeList.push(element);
+
+      } else { break; }
+
+    } else { break; }
+
+  }
+
+  return nodeList;
+
+}
+
+/**
+  *  Returns the min opacity found amongst the element and its parents
+  *  @param {!Element|null} el
+  *  @return {number} minimum opacity value
+  */
+export function getOpacity(el) {
+  const parentNodeTree = getElementNodeTree(el.parentElement);
+  parentNodeTree.push(el);
+  let minOpacityFound = 1;
+  let opacity;
+
+  for (let i = 0; i < parentNodeTree.length; i++) {
+    const node = parentNodeTree[i];
+    opacity = getElementOpacity(node);
+
+    if (opacity < minOpacityFound) { minOpacityFound = opacity; }
+
+    if (minOpacityFound === 0) { return minOpacityFound; }
+
+  }
+
+  return minOpacityFound;
+
+}
+

extensions/amp-analytics/0.1/test/test-opacity.js

@@ -0,0 +1,81 @@
+/**
+ * Copyright 2018 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 {getOpacity} from '../opacity';
+
+describes.realWin('getOpacity', {amp: true}, env => {
+  let win;
+  let ampElement;
+  let doc;
+  let parent;
+  let style;
+
+  beforeEach(() => {
+    win = env.win;
+    doc = win.document;
+    style = doc.createElement('style');
+    style.setAttribute('amp-custom','');
+    style.innerHTML = `
+    #img {
+      opacity: 0.5;
+    }
+    #parent {
+      height: 100px;
+      width: 100px;
+    }`;
+    doc.head.appendChild(style);
+
+    ampElement = doc.createElement('amp-img');
+    ampElement.id = 'img';
+    ampElement.setAttribute('width', '100');
+    ampElement.setAttribute('height', '100');
+
+    parent = doc.createElement('div');
+    parent.id = 'parent';
+
+    parent.appendChild(ampElement);
+    doc.body.appendChild(parent);
+
+    expect(getOpacity(ampElement)).to.equal(0.5);
+  });
+
+  it('amp element opacity value change', () => {
+    ampElement.style.opacity = 1;
+    expect(getOpacity(ampElement)).to.equal(1);
+
+    ampElement.style.opacity = 0.5;
+    expect(getOpacity(ampElement)).to.equal(0.5);
+
+    ampElement.style.opacity = 0;
+    expect(getOpacity(ampElement)).to.equal(0);
+
+    ampElement.style.opacity = 1;
+    ampElement.style.visibility = 'hidden';
+    expect(getOpacity(ampElement)).to.equal(0);
+  });
+
+  it('amp element\'s parent opacity value lower than amp element', () => {
+    parent.style.opacity = 0;
+    expect(getOpacity(ampElement)).to.equal(0);
+
+    parent.style.opacity = 1;
+    // since ampElement is 0.5
+    expect(getOpacity(ampElement)).to.equal(0.5);
+
+    parent.style.visibility = 'hidden';
+    expect(getOpacity(ampElement)).to.equal(0);
+  });
+});

extensions/amp-analytics/0.1/test/test-visibility-manager.js

@@ -112,6 +112,7 @@ describes.fakeWin('VisibilityManagerForDoc', {amp: true}, env => {
 
     // Root model starts invisible.
     expect(root.getRootVisibility()).to.equal(0);
+    expect(root.getRootOpacity()).to.equal(1);
   });
 
   it('should initialize correctly foregrounded', () => {
@@ -127,6 +128,7 @@ describes.fakeWin('VisibilityManagerForDoc', {amp: true}, env => {
     // Root model starts invisible.
     expect(root.parent).to.be.null;
     expect(root.getRootVisibility()).to.equal(1);
+    expect(root.getRootOpacity()).to.equal(1);
   });
 
   it('should resolve root layout box', () => {
@@ -431,6 +433,7 @@ describes.fakeWin('VisibilityManagerForDoc', {amp: true}, env => {
       expect(state.backgrounded).to.equal(0);
       expect(state.backgroundedAtStart).to.equal(0);
       expect(state.totalTime).to.equal(12);
+      expect(state.opacity).to.equal(1);
 
       expect(state.elementX).to.equal(11);
       expect(state.elementY).to.equal(21);
@@ -461,6 +464,7 @@ describes.fakeWin('VisibilityManagerForDoc', {amp: true}, env => {
       expect(disposed).to.be.calledOnce;
       expect(root.models_).to.have.length(0);
 
+      expect(state.opacity).to.equal(1);
       expect(state.totalVisibleTime).to.equal(0);
       expect(state.firstSeenTime).to.equal(22);
       expect(state.backgrounded).to.equal(0);
@@ -987,6 +991,7 @@ describes.realWin('VisibilityManager integrated', {amp: true}, env => {
     ampElement.id = 'abc';
     ampElement.setAttribute('width', '100');
     ampElement.setAttribute('height', '100');
+    ampElement.style.opacity = 0.5;
     doc.body.appendChild(ampElement);
     return new Promise(resolve => {
       if (resources.getResourceForElementOptional(ampElement)) {
@@ -1067,6 +1072,7 @@ describes.realWin('VisibilityManager integrated', {amp: true}, env => {
         loadTimeVisibility: 25,
         maxVisiblePercentage: 25,
         minVisiblePercentage: 25,
+        opacity: 0.5,
         totalVisibleTime: 5,
         maxContinuousVisibleTime: 5,
         intersectionRatio: 0.25,

extensions/amp-analytics/0.1/visibility-manager.js

@@ -23,6 +23,7 @@ import {Services} from '../../../src/services';
 import {VisibilityModel} from './visibility-model';
 import {dev, user} from '../../../src/log';
 import {getMode} from '../../../src/mode';
+import {getOpacity} from './opacity';
 import {isArray, isFiniteNumber} from '../../../src/types';
 import {layoutRectLtwh} from '../../../src/layout-rect';
 import {map} from '../../../src/utils/object';
@@ -166,6 +167,14 @@ export class VisibilityManager {
    */
   isBackgroundedAtStart() {}
 
+  /**
+  * Returns the root's, root's parent's and root's children's
+  * lowest opacity value
+  * @return {number}
+  * @abstract
+  */
+  getRootOpacity() {}
+
   /**
    * Returns the root's layout rect.
    * @return {!../../../src/layout-rect.LayoutRectDef}}
@@ -338,6 +347,7 @@ export class VisibilityManager {
       // Optionally, element-level state.
       let layoutBox;
       if (opt_element) {
+        state['opacity'] = getOpacity(opt_element);
         const resource =
             this.resources_.getResourceForElementOptional(opt_element);
         layoutBox =
@@ -352,6 +362,7 @@ export class VisibilityManager {
         });
 
       } else {
+        state['opacity'] = this.getRootOpacity();
         layoutBox = this.getRootLayoutBox();
       }
       model.maybeDispose();
@@ -498,6 +509,14 @@ export class VisibilityManagerForDoc extends VisibilityManager {
     return this.backgroundedAtStart_;
   }
 
+  /** @override */
+  getRootOpacity() {
+    const root = this.ampdoc.getRootNode();
+    const rootElement = dev().assertElement(
+        root.documentElement || root.body || root);
+    return getOpacity(rootElement);
+  }
+
   /** @override */
   getRootLayoutBox() {
     // This code is the same for "in-a-box" and standalone doc.
@@ -707,6 +726,12 @@ export class VisibilityManagerForEmbed extends VisibilityManager {
     return this.backgroundedAtStart_;
   }
 
+  /** @override */
+  getRootOpacity() {
+    const rootElement = dev().assertElement(this.embed.iframe);
+    return getOpacity(rootElement);
+  }
+
   /**
    * Gets the layout box of the embedded document. Note that this may be
    * smaller than the size allocated by the host. In that case, the document