Merge pull request #14 from dvoytenko/client12

Eliding prototype using text-shadow

Author: dvoytenko

cache/client/amp-access.js

@@ -28,7 +28,22 @@
   (function() {
     var style = document.createElement('style');
     style.textContent = (
-      '[amp-access]:not([amp-access-on]) {display: none};' +
+      '[amp-access]:not([amp-access-on]):not([amp-access-style=elide]) {' +
+      'display: none' +
+      '}\n' +
+      '[amp-access][amp-access-style=elide]:not([amp-access-on]) {' +
+      'color: transparent !important;' +
+      'text-shadow: 0 0 1em rgba(0, 0, 0, 0.5) !important;' +
+      'user-select: none !important;' +
+      '-webkit-user-select: none !important;' +
+      '}\n' +
+      '[amp-access][amp-access-style=elide]:not([amp-access-on]) .-amp-element {' +
+      'background: rgba(0, 0, 0, 0.05) !important;' +
+      'border: none !important;' +
+      '}\n' +
+      '[amp-access][amp-access-style=elide]:not([amp-access-on]) .-amp-element > .-amp-fill-content {' +
+      'display: none !important;' +
+      '}\n' +
       '');
     document.head.appendChild(style);
   })();

pub/archive/article-client.amp.html

@@ -338,7 +338,7 @@ <h1 itemprop="headline">Lorem Ipsum</h1>
           <a on="tap1:amp-access.login">Login to read more!</a>
         </section>
 
-        <section amp-access="access = true" amp-access-on class="article-body">
+        <section amp-access="access = true" amp-access-on amp-access-style=elide class="article-body">
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit.
             Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus