Merge pull request #53 from glogiotatidis/logo-swap-close

[bug 1200762] Logo swap template blockable and clickable.

templates/logo-swap-close.html

@@ -0,0 +1,165 @@
+<style>
+  div.switch-{{ snippet_id }}#brandLogo {
+    background-size: {{ width|default(192, true) }}px {{ height ~ 'px' if height else 'auto' }};
+  }
+
+  .switch-{{ snippet_id }}#brandLogo {
+    height: {{ height|default(192, true) }}px;
+    width: {{ width|default(192, true) }}px;
+  }
+
+  .snippet .icon {
+    top: 10px;
+  }
+
+ {% if clickable or blockable %}
+   .block-snippet-overlay-{{ snippet_id }} {
+       position: absolute;
+       height: 100%;
+       width: 100%;
+       left: 0px;
+       top: 0px;
+       padding-top: 5px;
+       padding-bottom: 5px;
+       z-index: -10;
+       border-radius: 12px;
+       visibility: hidden;
+       border: solid 0 white;
+       box-shadow: 0 0 0 white;
+   }
+ {% endif %}
+
+ {% if clickable %}
+   .block-snippet-overlay-glow-{{ snippet_id }} {
+       visibility: visible;
+       border: 2px solid  white;
+       box-shadow: 0 0 6px 2px #4CB1FF;
+   }
+
+   #snippet-{{ snippet_id }}:hover {
+       cursor: pointer;
+   }
+ {% endif %}
+
+ {% if blockable %}
+   .block-snippet-button-{{ snippet_id }} {
+       float: right;
+       z-index: 10;
+       visibility: hidden;
+       height: 28px;
+       width: 28px;
+       margin-top: 5px;
+       margin-right: 5px;
+       background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAeFBMVEUAAAAAAAAAAAABAQEAAAAAAAAAAAAAAAAAAAAAAADDw8OQkJAAAAAAAAAAAAAAAAD9/f38/Pz6+vr5+fnt7e3i4uLd3d3Z2dmgoKBdXV0mJibv7++amprNzc2amprv7+////9zc3OwsLD29vaPj4+xsbHCwsLBwcHrzmRyAAAAIHRSTlMABAg9HhEMNxkir38xLCkV/Pr39OHTzceOYUrliLuJ5ik+KlgAAAGhSURBVEjHnZbrdoIwDIAXWii3UuV+0wV0+v5vOEBH2ajg8v3y6PlO2pgm+TAAYD0B+HgDsBxbuXzCVbZj7VgAju16USjYhAgjz7WdrVjgKC5FHfh5kxwOSZP7QS0kVw68PJLNJQuKIy44FgGT3LbAHMKNWJviirRlkWsKNIQIqwyNZFU4BFobnihjfEFcCm92tMF83MBnfxwYjBNuchocWN6cCx938AVf5MBywxJ3KUPX0seKqnhfiavIhvlYLMM3yNjP0UDJFmcuN/zF7aI/t1I9lCFIqo1r1y+Nr+6qnXQI87iJDJZGNzra6JZOIG2Y0iWK+bt7N9JrY+Q+/1yIKWmOVy9qt3862lgGPdaeM2U4QDQ52tAEY55BhT4aHS1r/FDBeJUcTY7JwHy8jMVZgybHZGDD+KQkuHbMBiZP5YBrx2zggaCQDka5PiHJhL9yq2B6c8FslmVvKsud4u8Nxb/3xPr1E9t9yP3qIf+vXZylAkJTIrQ+QoMltHHCsCCMJMLgo49XPcTPpiF+1kOcsCrsLSSfeiGhrj305Yqwwn0Dwi/I5rQKpwMAAAAASUVORK5CYII=");
+       background-repeat: no-repeat;
+       background-size: 28px 28px;
+       background-color: transparent;
+       border: 0;
+   }
+
+   .block-snippet-button-{{ snippet_id }}:hover {
+       background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAe1BMVEUAAAAAAAAAAAAAAAABAQEAAAAAAAAAAAAAAAABAQEAAACQkJAAAADDw8P9/f38/Pz6+vr5+fni4uLZ2dmgoKCampomJibv7+/d3d3ExMRcXFzt7e3t7e3Nzc0AAABeXl7c3Nzv7+/////DOzLdkYz78/LlqaXPYlveko1iPwM8AAAAInRSTlMACwceOhcRBCo+NH8ir/z69/TTx46ISuXNsGHh4LskYszmffUm0QAAAbBJREFUSMelluuSgjAMRrdtegW84/22AXXf/wlXcNzAGEC755fjeCYfmDb5YrBWihpp7dcbWCmM1qpGa3PX3vh96kIAfwdCcOmAJYVWDpZJdl5NR6Pp6pwlS3BKC9lVQhjlfDIfY4PxPPFOGWE7SjjI9/jCPgfHFpJGhe0MWWbboIx8NVJYTLCDyQLSp0PGETLsIYPj06EaB+zl0K5jhYINDrAB1XhvQocFDrIIWlAst50MK5OtM5JizfANZn/RpHY5fX+5YovrhT7nTj/KCOX3ZNyKsmn8FDdydl6JOpdxSdMoKoeMoukkztg6F8wpRlFRklFBUedQJxPpstG7JTm10S46XqaCcjEOGe1kVocMWYdkIgvaVo+yRs7hDFxXDyMUrJBzOANXoMRd8VNkHTKIqX8oI2QdMohRjBIVLOLxI15yxF/Z1zAl3zC9bVlybTnQ/CXT/ENHrGSO2OMg7zoPcvlykCOui88upXsR+9nVd3JGRlywEdd4xLCIGEnRg4/G66lrvJ6q8coPcZ/vuCHuaYjHrQr8QrKuF5Lv9YYWkqG1Bx5rD9Da87/lKmKF+wUdVNNtsJwP7gAAAABJRU5ErkJggg==");
+   }
+
+   .block-snippet-button-{{ snippet_id }}:active {
+       background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAe1BMVEUAAAAAAAAAAAAAAAABAQEAAAABAQEAAAAAAAAAAAD9/f3Dw8MAAAAAAACRkZH6+vr5+fnv7+/i4uLd3d3Z2dmgoKBdXV0mJiYAAAAAAACPj4/t7e3t7e2ampoAAACamprOzs7MzMyYmJj///8QEBB5eXnw8PCWlpZAQEB2Ec74AAAAI3RSTlMABgseOio+GRA0+68iEn/39OXTzceOYUoWFX/h4Igjiby5hsu+k6AAAAGoSURBVEjHnZbpYoIwEISbZEMIl8oNam27eLz/E9YY22DdgmR+efAxGxJ2540SY/wmxog/ycvDVombVBvOY4ynKpFaQ3AVaC0TlXI2CXRCQtPHxWYdRetNEWcNSNFZiHYQMsjKCEeKyiyQwjiRhJKw3+GTdl8gFcWwUOg6R1J5rUXInokEqhX+o1UFiWXGxDvEOKEY3i0z9vjESX08+jAurMe0j+CO4UpXOKtKK/5rksp6NY+sapmyHxMBOb6gHAS/m3Ry734/nfFB55P7vJcdu5sEO0dchuOYOA4Xx2wDwe8r6cfEYBhHDGMms6thCkpXxmB0dISRK7UEZRCeNNHotpYhvhhFTWIqC01dBEMQiL0Mr3W1OkaCIQmMdcvMUgqkGIrAwiyGC9ggxVAEbkBwsytrJBiSwHVgkQgJhiQw8kG8CvNYvsdD9thKc2Cy1w9MJkOPY+l3+Fkqs4WvmNmZ7YIXeVm7OMiOLWxKxsSj9Xk0WI827jEsPEaSx+DzHq9uiAeHLTHED4Eb4lRU6P9Ghd5GhelAkhGBZDb2gI09QMQer3DlEeG+AWkO2NrlPO+kAAAAAElFTkSuQmCC");
+   }
+
+   #snippet-{{ snippet_id }}:hover > .block-snippet-button-{{ snippet_id }} {
+       visibility: visible;
+   }
+
+   #brandLogo:hover > .block-snippet-button-{{ snippet_id }} {
+       visibility: visible;
+   }
+
+   .block-snippet-overlay-close-{{ snippet_id }} {
+     visibility: visible;
+     background-color: #eaeaea;
+     border: solid 0 white;
+     box-shadow: 0 0 0 white;
+   }
+ {% endif %}
+</style>
+<div id="snippet-{{ snippet_id }}" class="snippet" data-url="{{ logo_url|safe }}">
+  {% if blockable %}
+    <button class="block-snippet-button block-snippet-button-{{ snippet_id }}" title="foo">
+    </button>
+  {% endif %}
+  {% if blockable or clickable %}
+    <div id="block-snippet-overlay-{{ snippet_id }}" class="block-snippet-overlay-{{ snippet_id }}">
+    </div>
+  {% endif %}
+  {% if icon_url %}<a href="{{ icon_url|safe }}">{% endif %}
+    <img class="icon" src="{{ icon }}" />
+  {% if icon_url %}</a>{% endif %}
+  <p>{{ text|safe }}</p>
+</div>
+<script>
+//<![CDATA[
+(function() {
+    var snippet = document.getElementById('snippet-{{ snippet_id }}');
+    var newLogo = '{{ replacement_logo }}';
+    snippet.addEventListener('show_snippet', function(e) {
+        var brandLogo = document.getElementById('brandLogo');
+        if (brandLogo.src !== undefined) {
+            brandLogo.src = newLogo;
+        } else {
+            brandLogo.style.backgroundImage = 'url(' + newLogo + ')';
+        }
+        brandLogo.classList.add('switch-{{ snippet_id }}');
+
+        {% if logo_url %}
+          var url = snippet.getAttribute('data-url');
+          var parent = brandLogo.parentElement;
+          var searchContainer = document.getElementById('searchContainer');
+          var link = document.createElement('a');
+          brandLogo = parent.replaceChild(link, brandLogo);
+          link.className = 'logo-link-{{ snippet_id }}';
+          link.href = url;
+          link.appendChild(brandLogo);
+        {% endif %}
+
+        {% if clickable or blockable %}
+            var overlay = document.getElementById('block-snippet-overlay-{{ snippet_id }}');
+        {% endif %}
+
+        {% if clickable %}
+          snippet.addEventListener('mouseover', function(e) {
+            overlay.classList.add('block-snippet-overlay-glow-{{ snippet_id }}');
+          });
+          snippet.addEventListener('mouseout', function(e) {
+            overlay.classList.remove('block-snippet-overlay-glow-{{ snippet_id }}');
+          });
+          snippet.addEventListener('click', function () {
+              var links = snippet.querySelectorAll('a');
+              if (links.length) {
+                  links[0].click();
+              }
+          });
+        {% endif %}
+
+        {% if blockable %}
+          brandLogo.insertAdjacentHTML(
+            'afterbegin', '<button class="block-snippet-button block-snippet-button-{{ snippet_id }}"></button>');
+
+          var xbuttons = document.querySelectorAll('.block-snippet-button-{{ snippet_id }}');
+          var mouseover = function(event) {
+              overlay.classList.add('block-snippet-overlay-close-{{ snippet_id }}');
+              brandLogo.style.opacity = 0.6;
+          };
+          var mouseout = function(event) {
+              overlay.classList.remove('block-snippet-overlay-close-{{ snippet_id }}');
+              brandLogo.style.opacity = 1;
+          };
+          for (var k = 0, l = xbuttons.length; k < l; k++) {
+              var xbutton = xbuttons[k];
+              xbutton.addEventListener('mouseover', mouseover, false)
+              xbutton.addEventListener('mouseout', mouseout, false);
+          }
+        {% endif %}
+
+    });
+})();
+//]]>
+</script>