Skip to content
This repository has been archived by the owner on Jan 24, 2020. It is now read-only.

[bug 1200762] Logo swap template blockable and clickable. #53

Merged
merged 5 commits into from
Sep 14, 2015
Merged

[bug 1200762] Logo swap template blockable and clickable. #53

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6bf2e33
[bug 1200762] Logo swap template blockable and clickable.
glogiotatidis Sep 3, 2015
860bcea
review updates.
glogiotatidis Sep 8, 2015
80015be
Convert to button.
glogiotatidis Sep 8, 2015
5fab789
Change pt to px.
glogiotatidis Sep 9, 2015
eb00527
Use querySelectorAll
glogiotatidis Sep 9, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
165 changes: 165 additions & 0 deletions templates/logo-swap-close.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can change the above to:

.block-snippet-overlay-glow-{{snippet-id}} {
   visibility: visible;
   border: 2px solid fff;
   box-shadow: 0 0 6px 2px #4CB1FF;
}

and it will match tiles exactly.


#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 }}">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we change this to an a element or, preferably a button element (will need some additional styling to remove the border, background etc.) and then add a title attribute with the value Remove this or similar.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The above is partly related to this comment in bugzilla https://bugzilla.mozilla.org/show_bug.cgi?id=1172579#c26 but, also for a11y. Thanks!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we change this to an a element or, preferably a button element (will need some additional styling to remove the border, background etc.) and then add a title attribute with the value Remove this or similar.

done.

The above is partly related to this comment in bugzilla https://bugzilla.mozilla.org/show_bug.cgi?id=1172579#c26 but, also for a11y. Thanks!

Great point again. I want to tackle l10n as well so for the first iteration let's ship this without any text. I updated the bug.

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