logo-swap-close.html

<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>