diff --git a/src/media/css/app-preview.styl b/src/media/css/app-preview.styl index 33e3bd6..953f8bc 100644 --- a/src/media/css/app-preview.styl +++ b/src/media/css/app-preview.styl @@ -17,77 +17,72 @@ $app-preview-background-color = #72C9B0; background-color: $app-preview-background-color; background-image: url('../img/Pattern_overlay.png'); +} - .suggested { - position: absolute; - top: 1.6rem; - left: 0; - - padding: 0 .5rem 0 1rem; - - font-size: 1.9rem; - font-style: italic; - line-height: 4.2rem; +.app-preview-suggested { + position: absolute; + top: 1.6rem; + left: 0; - color: $greyscale-white; - background: linear-gradient(90deg, - $suggested-star-color, - $suggested-flag-color); + padding: 0 .5rem 0 1rem; - &::before { - float: left; - margin-right: .5rem; + font-size: 1.9rem; + font-style: italic; + line-height: 4.2rem; - font-size: 4.2rem; - } + color: $greyscale-white; + background: linear-gradient(90deg, + $suggested-star-color, + $suggested-flag-color); - &::after { - content: ''; + &::before { + float: left; + margin-right: .5rem; - position: absolute; - top: 0; - right: -4rem; + font-size: 4.2rem; + } - width: 4rem; - height: 4.2rem; + .flag { + position: absolute; + top: 0; + right: -4rem; - background-image: url('../img/flag_R.png'); - } - } + width: 4rem; + height: 4.2rem; - .preview, - .detail { - height: 100%; + background-image: url('../img/flag_R.png'); } +} - .preview { - float: right; - width: 57.5rem; +.app-preview-image { + float: right; + width: 57.5rem; + height: 100%; - border-radius: .6rem; - overflow: hidden; + border-radius: .6rem; + overflow: hidden; - color: transparent; + color: transparent; - transition: opacity 1s; + transition: opacity 1s; - &.invisible { - opacity: 0; - } + &.invisible { + opacity: 0; } img { width: 100%; } +} - .detail { - position: relative; +.app-preview-detail { + position: relative; - width: 89rem; - padding-top: 1rem; + width: 89rem; + height: 100%; + padding-top: 1rem; - color: $greyscale-white; - } + color: $greyscale-white; .name, .provider { diff --git a/src/media/img/flag_R.png b/src/media/img/flag_R.png index a3b6739..850117a 100755 Binary files a/src/media/img/flag_R.png and b/src/media/img/flag_R.png differ diff --git a/src/media/js/image_helper.js b/src/media/js/image_helper.js new file mode 100644 index 0000000..1973cae --- /dev/null +++ b/src/media/js/image_helper.js @@ -0,0 +1,28 @@ +define('image_helper', ['core/defer'], function(defer) { + function getBackgroundImageURL($element) { + return $element.css('background-image') + .replace(/url\(['"]?(.*?)['"]?\)/i, '$1'); + } + + function loadImage(src) { + var image = document.createElement('img'); + var def = defer.Deferred(); + + image.src = src; + + image.onload = function() { + def.resolve(); + }; + + image.onerror = function() { + def.reject(); + }; + + return def.promise(); + } + + return { + getBackgroundImageURL: getBackgroundImageURL, + loadImage: loadImage + }; +}); diff --git a/src/media/js/image_loader.js b/src/media/js/image_loader.js deleted file mode 100644 index 9abe4e8..0000000 --- a/src/media/js/image_loader.js +++ /dev/null @@ -1,23 +0,0 @@ -define('image_loader', ['core/defer'], function(defer) { - var imageLoader = document.createElement('img'); - - function getImage(src) { - var def = defer.Deferred(); - - imageLoader.src = src; - - imageLoader.onload = function() { - def.resolve(); - }; - - imageLoader.onerror = function() { - def.reject(); - }; - - return def.promise(); - } - - return { - getImage: getImage - }; -}); diff --git a/src/media/js/views/homepage.js b/src/media/js/views/homepage.js index 3a2180d..827da03 100644 --- a/src/media/js/views/homepage.js +++ b/src/media/js/views/homepage.js @@ -1,8 +1,8 @@ define('views/homepage', ['apps', 'core/capabilities', 'core/l10n', 'core/models', 'core/z', - 'templates', 'image_loader', 'smart_button', 'spatial_navigation'], + 'templates', 'image_helper', 'smart_button', 'spatial_navigation'], function(apps, caps, l10n, models, z, - nunjucks, imageLoader, smartButton, SpatialNavigation) { + nunjucks, imageHelper, smartButton, SpatialNavigation) { var gettext = l10n.gettext; var appsModel = models('apps'); @@ -79,6 +79,7 @@ define('views/homepage', var focusedApp = appsModel.lookup(this.dataset.id); var focusedManifestURL = focusedApp.manifest_url; + var $appPreviewSuggested; var $appPreviewName; var appPreviewNameOverflowLength; @@ -99,15 +100,14 @@ define('views/homepage', $appContextMenuItem.attr({ label: gettext('Add to Apps'), icon: (function() { - var path = ['media', 'marketplace-tv-front-end', - 'img', 'install.png']; - // The path of installed icon is different from server. - // + // On marketplace server: // `media/marketplace-tv-front-end/img/install.png` - // - // On local server or github page: + var path = ['media', 'marketplace-tv-front-end', + 'img', 'install.png']; + + // On github page: // `marketplace-tv-front-end/media/img/install.png` if (!location.origin.match(/marketplace/)) { var tempPath = path[0]; @@ -116,6 +116,12 @@ define('views/homepage', path[1] = tempPath; } + // On local server: + // `/media/img/install.png` + if (location.origin.match(/localhost/)) { + path[0] = ''; + } + return path.join('/'); })() }); @@ -139,9 +145,22 @@ define('views/homepage', }) ); - $appPreviewName = $appPreview.find('.name'); + // Ensure suggested flag image is loaded. + if (focusedApp.tv_featured) { + $appPreviewSuggested = $appPreview.find('.app-preview-suggested'); + + imageHelper.loadImage( + imageHelper.getBackgroundImageURL( + $appPreviewSuggested.find('.flag') + ) + ).done(function() { + $appPreviewSuggested.removeClass('hidden'); + }); + } // Set app preview area name's text carousel. + $appPreviewName = $appPreview.find('.name'); + appPreviewNameOverflowLength = $appPreviewName.width() - $appPreview.find('.text').width(); @@ -202,8 +221,8 @@ define('views/homepage', $appPreview.find('.price').removeClass('hidden'); - imageLoader.getImage(focusedApp.promo_imgs['640']).done(function() { - $appPreview.find('.preview').removeClass('invisible'); + imageHelper.loadImage(focusedApp.promo_imgs['640']).done(function() { + $appPreview.find('.app-preview-image').removeClass('invisible'); }); }); diff --git a/src/media/js/views/tutorial.js b/src/media/js/views/tutorial.js index 2cc1a2a..d56ff87 100644 --- a/src/media/js/views/tutorial.js +++ b/src/media/js/views/tutorial.js @@ -1,15 +1,13 @@ define('views/tutorial', - ['core/l10n', 'core/z', 'image_loader', 'smart_button', 'spatial_navigation'], - function(l10n, z, imageLoader, smartButton, SpatialNavigation) { + ['core/l10n', 'core/z', 'image_helper', 'smart_button', 'spatial_navigation'], + function(l10n, z, imageHelper, smartButton, SpatialNavigation) { var gettext = l10n.gettext; // Ensure background image is loaded. function loadBackgroundImage($slide, callback) { - var imageSrc = $slide.find('.slide-image') - .css('background-image') - .replace(/url\(['"]?(.*?)['"]?\)/i, '$1'); - - var imagePromise = imageLoader.getImage(imageSrc); + var imagePromise = imageHelper.loadImage( + imageHelper.getBackgroundImageURL($slide.find('.slide-image')) + ); imagePromise.done(function() { $slide.removeClass('invisible'); diff --git a/src/templates/_includes/app_preview.html b/src/templates/_includes/app_preview.html index 810f6d4..46358f4 100644 --- a/src/templates/_includes/app_preview.html +++ b/src/templates/_includes/app_preview.html @@ -1,8 +1,11 @@ {% if app.tv_featured %} - {{ _('Suggested') }} + {% endif %} -