From 6bf2e33f46f9a2f6f2e3db9dc0fa4c2d32c2fe5a Mon Sep 17 00:00:00 2001
From: Giorgos Logiotatidis <seadog@sealabs.net>
Date: Thu, 3 Sep 2015 14:06:45 +0300
Subject: [PATCH 1/5] [bug 1200762] Logo swap template blockable and clickable.

---
 templates/logo-swap-close.html | 163 +++++++++++++++++++++++++++++++++
 1 file changed, 163 insertions(+)
 create mode 100644 templates/logo-swap-close.html

diff --git a/templates/logo-swap-close.html b/templates/logo-swap-close.html
new file mode 100644
index 0000000..56bf6b2
--- /dev/null
+++ b/templates/logo-swap-close.html
@@ -0,0 +1,163 @@
+<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: 9pt;
+       visibility: hidden;
+       border: solid 0pt white;
+       box-shadow: 0pt 0pt 0pt white;
+   }
+ {% endif %}
+
+ {% if clickable %}
+   .block-snippet-overlay-glow-{{ snippet_id }} {
+       visibility: visible;
+       border: solid 2pt white;
+       box-shadow: 0pt 0pt 10pt #7ac1f9;
+   }
+
+   #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;
+   }
+
+   .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 0pt white;
+     box-shadow: 0pt 0pt 0pt white;
+   }
+ {% endif %}
+</style>
+<div id="snippet-{{ snippet_id }}" class="snippet" data-url="{{ logo_url|safe }}">
+  {% if blockable %}
+    <div class="block-snippet-button block-snippet-button-{{ snippet_id }}">
+    </div>
+  {% 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.getElementsByTagName('a');
+              if (links.length) {
+                  links[0].click();
+              }
+          });
+        {% endif %}
+
+        {% if blockable %}
+          brandLogo.insertAdjacentHTML(
+            'afterbegin', '<div class="block-snippet-button block-snippet-button-{{ snippet_id }}"></div>');
+
+          var xbuttons = document.getElementsByClassName('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; k < xbuttons.length; k++) {
+              var xbutton = xbuttons[k];
+              xbutton.addEventListener('mouseover', mouseover, false)
+              xbutton.addEventListener('mouseout', mouseout, false);
+          }
+        {% endif %}
+
+    });
+})();
+//]]>
+</script>

From 860bcea3fc3037428d4062d75a204e24491bb1ff Mon Sep 17 00:00:00 2001
From: Giorgos Logiotatidis <seadog@sealabs.net>
Date: Tue, 8 Sep 2015 16:15:48 +0300
Subject: [PATCH 2/5] review updates.

---
 templates/logo-swap-close.html | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/templates/logo-swap-close.html b/templates/logo-swap-close.html
index 56bf6b2..5cce978 100644
--- a/templates/logo-swap-close.html
+++ b/templates/logo-swap-close.html
@@ -24,16 +24,16 @@
        z-index: -10;
        border-radius: 9pt;
        visibility: hidden;
-       border: solid 0pt white;
-       box-shadow: 0pt 0pt 0pt white;
+       border: solid 0 white;
+       box-shadow: 0 0 0 white;
    }
  {% endif %}
 
  {% if clickable %}
    .block-snippet-overlay-glow-{{ snippet_id }} {
        visibility: visible;
-       border: solid 2pt white;
-       box-shadow: 0pt 0pt 10pt #7ac1f9;
+       border: 2pt solid  white;
+       box-shadow: 0 0 10pt #7ac1f9;
    }
 
    #snippet-{{ snippet_id }}:hover {
@@ -74,8 +74,8 @@
    .block-snippet-overlay-close-{{ snippet_id }} {
      visibility: visible;
      background-color: #eaeaea;
-     border: solid 0pt white;
-     box-shadow: 0pt 0pt 0pt white;
+     border: solid 0 white;
+     box-shadow: 0 0 0 white;
    }
  {% endif %}
 </style>
@@ -141,7 +141,7 @@
           brandLogo.insertAdjacentHTML(
             'afterbegin', '<div class="block-snippet-button block-snippet-button-{{ snippet_id }}"></div>');
 
-          var xbuttons = document.getElementsByClassName('block-snippet-button-{{ snippet_id }}');
+          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;
@@ -150,7 +150,7 @@
               overlay.classList.remove('block-snippet-overlay-close-{{ snippet_id }}');
               brandLogo.style.opacity = 1;
           };
-          for (var k=0; k < xbuttons.length; k++) {
+          for (var k = 0, l = xbuttons.length; k < l; k++) {
               var xbutton = xbuttons[k];
               xbutton.addEventListener('mouseover', mouseover, false)
               xbutton.addEventListener('mouseout', mouseout, false);

From 80015bea095103089b7a8e0708cf917cd7ec8e30 Mon Sep 17 00:00:00 2001
From: Giorgos Logiotatidis <seadog@sealabs.net>
Date: Tue, 8 Sep 2015 16:19:59 +0300
Subject: [PATCH 3/5] Convert to button.

---
 templates/logo-swap-close.html | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/templates/logo-swap-close.html b/templates/logo-swap-close.html
index 5cce978..fbf9c02 100644
--- a/templates/logo-swap-close.html
+++ b/templates/logo-swap-close.html
@@ -53,6 +53,8 @@
        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 {
@@ -81,8 +83,8 @@
 </style>
 <div id="snippet-{{ snippet_id }}" class="snippet" data-url="{{ logo_url|safe }}">
   {% if blockable %}
-    <div class="block-snippet-button block-snippet-button-{{ snippet_id }}">
-    </div>
+    <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 }}">
@@ -139,7 +141,7 @@
 
         {% if blockable %}
           brandLogo.insertAdjacentHTML(
-            'afterbegin', '<div class="block-snippet-button block-snippet-button-{{ snippet_id }}"></div>');
+            '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) {

From 5fab789b3ed970a9216c40ddfd73f3bfe35dccd4 Mon Sep 17 00:00:00 2001
From: Giorgos Logiotatidis <seadog@sealabs.net>
Date: Wed, 9 Sep 2015 16:20:33 +0300
Subject: [PATCH 4/5] Change pt to px.

---
 templates/logo-swap-close.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/templates/logo-swap-close.html b/templates/logo-swap-close.html
index fbf9c02..01fede4 100644
--- a/templates/logo-swap-close.html
+++ b/templates/logo-swap-close.html
@@ -22,7 +22,7 @@
        padding-top: 5px;
        padding-bottom: 5px;
        z-index: -10;
-       border-radius: 9pt;
+       border-radius: 12px;
        visibility: hidden;
        border: solid 0 white;
        box-shadow: 0 0 0 white;
@@ -32,8 +32,8 @@
  {% if clickable %}
    .block-snippet-overlay-glow-{{ snippet_id }} {
        visibility: visible;
-       border: 2pt solid  white;
-       box-shadow: 0 0 10pt #7ac1f9;
+       border: 2px solid  white;
+       box-shadow: 0 0 6px 2px #4CB1FF;
    }
 
    #snippet-{{ snippet_id }}:hover {

From eb00527cc85c74db47b302b8f71f5a72a9fe0762 Mon Sep 17 00:00:00 2001
From: Giorgos Logiotatidis <seadog@sealabs.net>
Date: Wed, 9 Sep 2015 16:22:48 +0300
Subject: [PATCH 5/5] Use querySelectorAll

---
 templates/logo-swap-close.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/logo-swap-close.html b/templates/logo-swap-close.html
index 01fede4..b38109f 100644
--- a/templates/logo-swap-close.html
+++ b/templates/logo-swap-close.html
@@ -132,7 +132,7 @@
             overlay.classList.remove('block-snippet-overlay-glow-{{ snippet_id }}');
           });
           snippet.addEventListener('click', function () {
-              var links = snippet.getElementsByTagName('a');
+              var links = snippet.querySelectorAll('a');
               if (links.length) {
                   links[0].click();
               }