Skip to content
This repository has been archived by the owner on Jul 31, 2019. It is now read-only.

Commit

Permalink
[#883488] Details page uses a shell for project page.
Browse files Browse the repository at this point in the history
  • Loading branch information
@ScottDowne
ScottDowne committed Jun 24, 2013
1 parent a106707 commit 5e30b3d
Show file tree
Hide file tree
Showing 3 changed files with 160 additions and 113 deletions.
107 changes: 64 additions & 43 deletions lib/middleware.js
View file
Expand Up @@ -256,23 +256,24 @@ module.exports = function middlewareConstructor(env) {
HOSTNAME: hostname,
URL: escape( url ),
AUDIENCE: env.get( "AUDIENCE" ),
REMIX_URL: remixUrl
REMIX_URL: remixUrl,
THIMBLE_PROJECT: req.s3Url + "_",
TITLE: metaData.title
}),

// OpenGraph information (in head):
metaTagTemplate = nunjucksEnv.getTemplate("ogMetaTags.html"),
metaTagsRender = metaTagTemplate.render({
metaTags: generateOGData(metaData, hostname + "/project/" + req.publishId)
}),
finalized = sanitized.replace("</head", metaTagsRender + "</head");
});
detailsRendered = detailsRendered.replace("</head", metaTagsRender + "</head");

res.render("googleanalytics.html", function(err, results) {
finalized = finalized.replace("</head", results + "</head");

finalized = finalized.replace(bodyRegExp, "<body$1>" + detailsRendered);
detailsRendered = detailsRendered.replace("</head", results + "</head");
req.remixUrl = remixUrl;

req.body.finalizedHTML = finalized;
req.body.detailsPage = detailsRendered;
req.body.finalizedHTML = sanitized;
next();
});
};
Expand All @@ -298,50 +299,70 @@ module.exports = function middlewareConstructor(env) {

// TODO: proper mapping for old->new ids.
// See: https://bugzilla.mozilla.org/show_bug.cgi?id=862911
var location = req.publishLocation;

// write data to S3
s3.put(location, headers)
.on("error", function(err) {
var location = req.publishLocation,
// FIXME: Plan for S3 being down. This is not the ideal error handling,
// but is a working stub in lieu of a proper solution.
// See: https://bugzilla.mozilla.org/show_bug.cgi?id=865738
next(new Error("There was a problem publishing the page. Your page has been saved"+
" with id "+req.publishId+", so you can edit it, but it could not be"+
" published to the web."));
s3PublishError = new Error("There was a problem publishing the page. Your page has been saved"+
" with id "+req.publishId+", so you can edit it, but it could not be"+
" published to the web."),
s3Error = new Error("failure during publish step (error "+res.statusCode+")");


// write data to S3
s3.put(location + "_", headers)
.on("error", function(err) {
next(s3PublishError);
})
.on("response", function(res) {
if (res.statusCode === 200) {
req.publishedUrl = s3.url(location);
metrics.increment('project.publish.success');

// publish .../edit and .../remix redirecting routes to S3 as well.
var target = req.remixUrl.replace(/\/remix$/,'');
["edit","remix"].forEach(function(suffix) {
var thimbletarget = target + '/'+ suffix;
var s3target = location + '/' + suffix;

// This currently uses meta-refresh, but should be switched over to
// native S3 redirect headers instead, once we figure out how.
// SEE: https://bugzilla.mozilla.org/show_bug.cgi?id=876763
var redirect = "<!doctype html><html><head><meta http-equiv='refresh' content='0; url="+thimbletarget+"'></head><body></body></html>";

headers = {
'x-amz-acl': 'public-read',
'Content-Length': Buffer.byteLength(redirect,'utf8'),
'Content-Type': 'text/html;charset=UTF-8'
};

// NOTE: failure to set up the /edit and /remix links
// should not actually break publishing, so we
// don't catch on(error) or on(response).
s3.put(s3target, headers).end(redirect);
});

next();
var detailsPage = req.body.detailsPage;
headers = {
'x-amz-acl': 'public-read',
'Content-Length': Buffer.byteLength(detailsPage,'utf8'),
'Content-Type': 'text/html;charset=UTF-8'
};
s3.put(location, headers)
.on("error", function(err) {
next(s3PublishError);
})
.on("response", function(res) {
if (res.statusCode === 200) {
req.publishedUrl = s3.url(location);
metrics.increment('project.publish.success');

// publish .../edit and .../remix redirecting routes to S3 as well.
var target = req.remixUrl.replace(/\/remix$/,'');
["edit","remix"].forEach(function(suffix) {
var thimbletarget = target + '/'+ suffix;
var s3target = location + '/' + suffix;

// This currently uses meta-refresh, but should be switched over to
// native S3 redirect headers instead, once we figure out how.
// SEE: https://bugzilla.mozilla.org/show_bug.cgi?id=876763
var redirect = "<!doctype html><html><head><meta http-equiv='refresh' content='0; url="+thimbletarget+"'></head><body></body></html>";

headers = {
'x-amz-acl': 'public-read',
'Content-Length': Buffer.byteLength(redirect,'utf8'),
'Content-Type': 'text/html;charset=UTF-8'
};

// NOTE: failure to set up the /edit and /remix links
// should not actually break publishing, so we
// don't catch on(error) or on(response).
s3.put(s3target, headers).end(redirect);
});
next();
} else {
metrics.increment('project.publish.error');
next(s3Error);
}
})
.end(detailsPage);
} else {
metrics.increment('project.publish.error');
next(new Error("failure during publish step (error "+res.statusCode+")"));
next(s3Error);
}
})
.end(data);
Expand Down
32 changes: 22 additions & 10 deletions public/stylesheets/makedetails.css
View file
Expand Up @@ -2,15 +2,8 @@
* MAKE DETAILS
*/
body {
/* This is to clear space for the details bar */
padding-top: 37px !important;
}
.make-details-page {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 999999;
margin: 0;
padding: 0;
}
.make-bar-link {
color: #27aae1;
Expand Down Expand Up @@ -146,11 +139,30 @@ body {
.make-details.hide {
display: none;
}
#make-details-iframe {
#make-details-iframe,
.thimble-project-iframe {
border: none;
width: 100%;
height: 100%;
}

.thimble-project-container {
position: fixed;
top: 37px;
left: 0;
right: 0;
bottom: 0;
transition: top .2s;
-moz-transition: top .2s;
-webkit-transition: top .2s;
-o-transition: top .2s;
-ms-transition: top .2s;
}

.thimble-project-container.open {
top: 337px;
}

.make-bar-button-remix {
background-repeat: no-repeat;
background-position: left 3px;
Expand Down
134 changes: 74 additions & 60 deletions views/details.html
View file
@@ -1,69 +1,83 @@

<link media="screen" rel="stylesheet" href="{{HOSTNAME}}/stylesheets/makedetails.css">
<div class="make-details-page">
<div class="make-details hide">
<iframe id="make-details-iframe" src="{{AUDIENCE}}/details/?url={{URL}}"></iframe>
</div>
<div class="make-bar">
<div class="make-bar-wrapper">
<span class="make-bar-logospan">
<a class="make-bar-link" href="{{AUDIENCE}}">
<img src="{{HOSTNAME}}/img/logo_small.png" alt="Mozilla Webmaker">
</a>
<span class="make-bar-made-with">
Made with <a class="make-bar-link" href="//webmaker.org">Webmaker</a>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{TITLE}}</title>
<link media="screen" rel="stylesheet" href="{{HOSTNAME}}/stylesheets/makedetails.css">
</head>
<body>
<div class="make-details-page">
<div class="make-details hide">
<iframe id="make-details-iframe" src="{{AUDIENCE}}/details/?url={{URL}}"></iframe>
</div>
<div class="make-bar">
<div class="make-bar-wrapper">
<span class="make-bar-logospan">
<a class="make-bar-link" href="{{AUDIENCE}}">
<img src="{{HOSTNAME}}/img/logo_small.png" alt="Mozilla Webmaker">
</a>
<span class="make-bar-made-with">
Made with <a class="make-bar-link" href="//webmaker.org">Webmaker</a>
</span>
</span>
</span>
<span class="make-bar-expand-collapse">
Details<img src="{{HOSTNAME}}/img/icon-arrow-down.png">
</span>
<div class="make-bar-button">
<a href="{{REMIX_URL}}" target="_blank" class="make-bar-button-remix make-bar-link"><span>Remix</span></a>
<span class="make-bar-expand-collapse">
Details<img src="{{HOSTNAME}}/img/icon-arrow-down.png">
</span>
<div class="make-bar-button">
<a href="{{REMIX_URL}}" target="_blank" class="make-bar-button-remix make-bar-link"><span>Remix</span></a>
</div>
</div>
</div>
</div>
</div>
<script>
(function loadWithJquery($) {
<script>
(function loadWithJquery($) {

if(!$) {
var script = document.createElement("script");
script.src = "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js";
script.onload = function() {
loadWithJquery(window.jQuery);
};
document.head.appendChild(script);
return;
}
if(!$) {
var script = document.createElement("script");
script.src = "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js";
script.onload = function() {
loadWithJquery(window.jQuery);
};
document.head.appendChild(script);
return;
}

// continue in the knowledge that we have jquery available
var img_path = '{{HOSTNAME}}/img/',
img_up = 'icon-arrow-up.png',
img_down = 'icon-arrow-down.png',
animationSpeed = 200,
$toggle = $('.make-bar-expand-collapse'),
$details = $('.make-details'),
$arrow = $('img', $toggle),
nav_open = false;
// continue in the knowledge that we have jquery available
var img_path = '{{HOSTNAME}}/img/',
img_up = 'icon-arrow-up.png',
img_down = 'icon-arrow-down.png',
animationSpeed = 200,
$toggle = $('.make-bar-expand-collapse'),
$details = $('.make-details'),
$arrow = $('img', $toggle),
$projectContainer = $(".thimble-project-container"),
nav_open = false;

var options = {
duration: animationSpeed,
easing: 'linear'
};
var options = {
duration: animationSpeed,
easing: 'linear'
};

var toggleNav = function(e) {
e.preventDefault();
$details.slideToggle(options);
if (nav_open === true) {
nav_open = false;
$arrow.attr('src', img_path + img_down);
}
else {
nav_open = true;
$arrow.attr('src', img_path + img_up);
}
};
var toggleNav = function(e) {
e.preventDefault();
$details.slideToggle(options);
if (nav_open === true) {
nav_open = false;
$projectContainer.removeClass("open");
$arrow.attr('src', img_path + img_down);
}
else {
nav_open = true;
$projectContainer.addClass("open");
$arrow.attr('src', img_path + img_up);
}
};

$toggle.on('click', toggleNav);
}(window.jQuery));
</script>
$toggle.on('click', toggleNav);
}(window.jQuery));
</script>
<div class="thimble-project-container">
<iframe class="thimble-project-iframe" src="{{THIMBLE_PROJECT}}"></iframe>
</div>
</body>
</html>

0 comments on commit 5e30b3d

Please sign in to comment.