diff options
author | Alexis Reigel <alexis.reigel.ext@siemens.com> | 2017-12-06 23:04:53 +0300 |
---|---|---|
committer | Alexis Reigel <mail@koffeinfrei.org> | 2018-06-05 17:20:21 +0300 |
commit | 9e14f437b6ed205744d916f5566ee2c11e52b734 (patch) | |
tree | 5c4bf1237cfc4a6cf73f30f942d25e0ab4f0973c /app/assets/javascripts | |
parent | 5202c3f0c8da618e2d3821917f6f5d48ae8ae3c2 (diff) |
create favicon overlay on the client
the initial reason for this change was that graphicsmagick does not
support writing to ico files. this fact lead to a chain of changes:
1. use png instead of ico (browser support is good enough)
2. render the overlays on the client using the canvas API. this way we
only need to store the original favion and generate the overlay versions
dynamically.
this change also enables (next step) to simplify the handling of the
stock favicons as well, as we don't need to generate all the versions
upfront.
Diffstat (limited to 'app/assets/javascripts')
-rw-r--r-- | app/assets/javascripts/favicon_admin.js | 19 | ||||
-rw-r--r-- | app/assets/javascripts/lib/utils/common_utils.js | 50 | ||||
-rw-r--r-- | app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue | 5 |
3 files changed, 68 insertions, 6 deletions
diff --git a/app/assets/javascripts/favicon_admin.js b/app/assets/javascripts/favicon_admin.js new file mode 100644 index 00000000000..6b2dcf4502e --- /dev/null +++ b/app/assets/javascripts/favicon_admin.js @@ -0,0 +1,19 @@ +import {createOverlayIcon} from '~/lib/utils/common_utils'; + +export default class FaviconAdmin { + constructor() { + const faviconContainer = $('.js-favicons'); + const faviconUrl = faviconContainer.data('favicon'); + const overlayUrls = faviconContainer.data('status-overlays'); + + overlayUrls.forEach((statusOverlay) => { + createOverlayIcon(faviconUrl, statusOverlay).then((faviconWithOverlayUrl) => { + const image = $('<img />'); + image.addClass('appearance-light-logo-preview'); + image.attr('src', faviconWithOverlayUrl); + + faviconContainer.append(image); + }); + }); + } +} diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js index 310b731c6d8..d55d0585031 100644 --- a/app/assets/javascripts/lib/utils/common_utils.js +++ b/app/assets/javascripts/lib/utils/common_utils.js @@ -384,6 +384,49 @@ export const backOff = (fn, timeout = 60000) => { }); }; +export const createOverlayIcon = (iconPath, overlayPath) => { + const faviconImage = document.createElement('img'); + + return new Promise((resolve) => { + faviconImage.onload = () => { + const size = 32; + + const canvas = document.createElement('canvas'); + canvas.width = size; + canvas.height = size; + + const context = canvas.getContext('2d'); + context.clearRect(0, 0, size, size); + context.drawImage( + faviconImage, 0, 0, faviconImage.width, faviconImage.height, 0, 0, size, size, + ); + + const overlayImage = document.createElement('img'); + overlayImage.onload = () => { + context.drawImage( + overlayImage, 0, 0, overlayImage.width, overlayImage.height, 0, 0, size, size, + ); + + const faviconWithOverlayUrl = canvas.toDataURL(); + + resolve(faviconWithOverlayUrl); + }; + overlayImage.src = overlayPath; + }; + faviconImage.src = iconPath; + }); +}; + +export const setFaviconOverlay = (overlayPath) => { + const faviconEl = document.getElementById('favicon'); + + if (!faviconEl) { return null; } + + const iconPath = faviconEl.getAttribute('data-original-href'); + + return createOverlayIcon(iconPath, overlayPath).then(faviconWithOverlayUrl => faviconEl.setAttribute('href', faviconWithOverlayUrl)); +}; + export const setFavicon = (faviconPath) => { const faviconEl = document.getElementById('favicon'); if (faviconEl && faviconPath) { @@ -395,7 +438,7 @@ export const resetFavicon = () => { const faviconEl = document.getElementById('favicon'); if (faviconEl) { - const originalFavicon = faviconEl.getAttribute('data-default-href'); + const originalFavicon = faviconEl.getAttribute('data-original-href'); faviconEl.setAttribute('href', originalFavicon); } }; @@ -404,10 +447,9 @@ export const setCiStatusFavicon = pageUrl => axios.get(pageUrl) .then(({ data }) => { if (data && data.favicon) { - setFavicon(data.favicon); - } else { - resetFavicon(); + return setFaviconOverlay(data.favicon); } + return resetFavicon(); }) .catch(resetFavicon); diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue index f69fe03fcb3..d6cba878b28 100644 --- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue +++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue @@ -36,7 +36,7 @@ import { notify, SourceBranchRemovalStatus, } from './dependencies'; -import { setFavicon } from '../lib/utils/common_utils'; +import { setFaviconOverlay } from '../lib/utils/common_utils'; export default { el: '#js-vue-mr-widget', @@ -159,8 +159,9 @@ export default { }, setFaviconHelper() { if (this.mr.ciStatusFaviconPath) { - setFavicon(this.mr.ciStatusFaviconPath); + return setFaviconOverlay(this.mr.ciStatusFaviconPath); } + return Promise.resolve(); }, fetchDeployments() { return this.service.fetchDeployments() |