Shared folder asset handling

fixes #1659, fixes #1668

- removed relative asset url from css
- added asset helper to client
- updated references to shared assets
- added functional tests
This commit is contained in:
Hannah Wolfe 2013-12-27 15:12:24 +00:00
parent 25f3df25f9
commit a8e987ec6c
6 changed files with 43 additions and 9 deletions

View File

@ -209,7 +209,6 @@
display: block; display: block;
width: 110px; width: 110px;
height: 110px; height: 110px;
background-image: url(/shared/img/user-image.png);
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
border-radius: 100%; border-radius: 100%;

View File

@ -32,4 +32,22 @@
Handlebars.registerHelper('url', function () { Handlebars.registerHelper('url', function () {
return Ghost.paths.subdir; return Ghost.paths.subdir;
}); });
Handlebars.registerHelper('asset', function (context, options) {
var output = '',
isAdmin = options && options.hash && options.hash.ghost;
output += Ghost.paths.subdir + '/';
if (!context.match(/^shared/)) {
if (isAdmin) {
output += 'ghost/';
} else {
output += 'assets/';
}
}
output += context;
return new Handlebars.SafeString(output);
});
}()); }());

View File

@ -9,7 +9,8 @@
<section class="content no-padding"> <section class="content no-padding">
<header class="user-profile-header"> <header class="user-profile-header">
<img id="user-cover" class="cover-image" src="{{#if cover}}{{cover}}{{else}}/shared/img/user-cover.png{{/if}}" title="{{name}}'s Cover Image"/> <img id="user-cover" class="cover-image" src="{{#if cover}}{{cover}}{{else}}{{asset "shared/img/user-cover.png"}}{{/if}}" title="{{name}}'s Cover Image"/>
<a class="edit-cover-image js-modal-cover button" href="#">Change Cover</a> <a class="edit-cover-image js-modal-cover button" href="#">Change Cover</a>
</header> </header>
@ -18,7 +19,7 @@
<fieldset class="user-details-top"> <fieldset class="user-details-top">
<figure class="user-image"> <figure class="user-image">
<div id="user-image" class="img" {{#if image}}style="background-image: url({{image}});"{{/if}} href="#"><span class="hidden">{{name}}'s Picture</span></div> <div id="user-image" class="img" style="background-image: url({{#if image}}{{image}}{{else}}{{asset "shared/img/user-image.png"}}{{/if}});" href="#"><span class="hidden">{{name}}'s Picture</span></div>
<a href="#" class="edit-user-image js-modal-image">Edit Picture</a> <a href="#" class="edit-user-image js-modal-image">Edit Picture</a>
</figure> </figure>

View File

@ -133,10 +133,12 @@ coreHelpers.asset = function (context, options) {
output += config.paths().subdir + '/'; output += config.paths().subdir + '/';
if (isAdmin) { if (!context.match(/^shared/)) {
output += 'ghost/'; if (isAdmin) {
} else { output += 'ghost/';
output += 'assets/'; } else {
output += 'assets/';
}
} }
output += context; output += context;

View File

@ -1,6 +1,6 @@
/*globals casper, __utils__, url, testPost */ /*globals casper, __utils__, url, testPost */
CasperTest.begin("Content screen is correct", 20, function suite(test) { CasperTest.begin("Content screen is correct", 21, function suite(test) {
// Create a sample post // Create a sample post
casper.thenOpen(url + 'ghost/editor/', function testTitleAndUrl() { casper.thenOpen(url + 'ghost/editor/', function testTitleAndUrl() {
test.assertTitle('Ghost Admin', 'Ghost admin has no title'); test.assertTitle('Ghost Admin', 'Ghost admin has no title');
@ -37,6 +37,10 @@ CasperTest.begin("Content screen is correct", 20, function suite(test) {
test.assertSelectorHasText("#usermenu .usermenu-profile a", "Your Profile"); test.assertSelectorHasText("#usermenu .usermenu-profile a", "Your Profile");
test.assertSelectorHasText("#usermenu .usermenu-help a", "Help / Support"); test.assertSelectorHasText("#usermenu .usermenu-help a", "Help / Support");
test.assertSelectorHasText("#usermenu .usermenu-signout a", "Sign Out"); test.assertSelectorHasText("#usermenu .usermenu-signout a", "Sign Out");
test.assertResourceExists(function (resource) {
return resource.url.match(/user-image\.png$/) && (resource.status === 200 || resource.status === 304);
}, 'Default user image');
}); });
casper.then(function testViews() { casper.then(function testViews() {

View File

@ -1,6 +1,6 @@
/*globals casper, __utils__, url */ /*globals casper, __utils__, url */
CasperTest.begin("Settings screen is correct", 15, function suite(test) { CasperTest.begin("Settings screen is correct", 17, function suite(test) {
casper.thenOpen(url + "ghost/settings/", function testTitleAndUrl() { casper.thenOpen(url + "ghost/settings/", function testTitleAndUrl() {
test.assertTitle("Ghost Admin", "Ghost admin has no title"); test.assertTitle("Ghost Admin", "Ghost admin has no title");
test.assertUrlMatch(/ghost\/settings\/general\/$/, "Ghost doesn't require login this time"); test.assertUrlMatch(/ghost\/settings\/general\/$/, "Ghost doesn't require login this time");
@ -32,6 +32,16 @@ CasperTest.begin("Settings screen is correct", 15, function suite(test) {
test.assertEval(function testContentIsUser() { test.assertEval(function testContentIsUser() {
return document.querySelector('.settings-content').id === 'user'; return document.querySelector('.settings-content').id === 'user';
}, "loaded content is user screen"); }, "loaded content is user screen");
test.assertResourceExists(function (resource) {
return resource.url.match(/user-image\.png$/) && (resource.status === 200 || resource.status === 304);
}, 'Default user image');
test.assertResourceExists(function (resource) {
return resource.url.match(/user-cover\.png$/) && (resource.status === 200 || resource.status === 304);
}, 'Default cover image');
}, function onTimeOut() { }, function onTimeOut() {
test.fail('User screen failed to load'); test.fail('User screen failed to load');
}); });