Skip to content

Commit

Permalink
First steps to ajaxify top nav and update sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@ebidel
ebidel committed Feb 25, 2014
1 parent 0e94a1a commit d636400
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 101 deletions.
32 changes: 16 additions & 16 deletions css/elements/site-banner.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,59 +59,59 @@ code, pre { color: #9f499b; }
.prettyprint .com { color: #8a8a8a; }

/* line 3, ../../sass/elements/site-banner.scss */
:host { background-color: #1f2036; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-align: flex-end; -webkit-align-items: flex-end; -moz-align-items: flex-end; -ms-align-items: flex-end; -o-align-items: flex-end; align-items: flex-end; position: relative; z-index: 1; height: 286px; color: white; padding-left: 64px; }
:host { background-color: #1f2036; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-align: flex-end; -webkit-align-items: flex-end; -moz-align-items: flex-end; -ms-align-items: flex-end; -o-align-items: flex-end; align-items: flex-end; position: relative; z-index: 1; height: 286px; color: white; padding-left: 64px; -webkit-transition: background-color 300ms ease-in; transition: background-color 300ms ease-in; }

/* line 17, ../../sass/elements/site-banner.scss */
/* line 20, ../../sass/elements/site-banner.scss */
:host([type="platform"]) { background-color: #9f499b; }

/* line 21, ../../sass/elements/site-banner.scss */
/* line 24, ../../sass/elements/site-banner.scss */
:host([type="core"]) { background-color: #d61a7f; }

/* line 25, ../../sass/elements/site-banner.scss */
/* line 28, ../../sass/elements/site-banner.scss */
:host([type="elements"]) { background-color: #5c6bc0; }

/* @polyfill :host header */
/* line 30, ../../sass/elements/site-banner.scss */
/* line 33, ../../sass/elements/site-banner.scss */
::content header { padding: 30px 0 40px 0; width: 100%; }

/* @polyfill header h1 */
/* line 36, ../../sass/elements/site-banner.scss */
/* line 39, ../../sass/elements/site-banner.scss */
::content h1 { font-size: 45px !important; -webkit-transform-origin: 0 0; transform-origin: 0 0; }

/* @polyfill :host header:not(.shrink) h1 */
/* line 44, ../../sass/elements/site-banner.scss */
/* line 47, ../../sass/elements/site-banner.scss */
:ancestor(scroll-area:not(.scrolling)) ::content header h1 { -webkit-transition: -webkit-transform 200ms linear; transition: -webkit-transform 200ms linear; }

/* @polyfill :host header.shrink h1 */
/* line 50, ../../sass/elements/site-banner.scss */
/* line 53, ../../sass/elements/site-banner.scss */
::content header.shrink h1 { -webkit-transform: scale(0.44444); transform: scale(0.44444); }

/* @polyfill :host header.shrink summary */
/* line 56, ../../sass/elements/site-banner.scss */
/* line 59, ../../sass/elements/site-banner.scss */
::content header.shrink summary { visibility: hidden; }

/* @polyfill :host header.shrink */
/* line 61, ../../sass/elements/site-banner.scss */
/* line 64, ../../sass/elements/site-banner.scss */
::content header.shrink { position: fixed; top: 0; pointer-events: none; }

/* @polyfill header a */
/* line 68, ../../sass/elements/site-banner.scss */
/* line 71, ../../sass/elements/site-banner.scss */
::content a { color: currentcolor; }

/* @polyfill header summary */
/* line 73, ../../sass/elements/site-banner.scss */
/* line 76, ../../sass/elements/site-banner.scss */
::content summary { margin-top: 20px; opacity: 0.6; }

@media only screen and (max-width: 580px) { /* line 80, ../../sass/elements/site-banner.scss */
@media only screen and (max-width: 580px) { /* line 83, ../../sass/elements/site-banner.scss */
:host { height: 60px !important; position: fixed; width: 100%; -webkit-box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; }
/* @polyfill :host header */
/* line 88, ../../sass/elements/site-banner.scss */
/* line 91, ../../sass/elements/site-banner.scss */
::content header { display: none; }
/* @polyfill-rule header#internalheader { display: block; padding: 0; }*/
/* @polyfill-rule header#internalheader h2 { margin: 0; }*/ }
@media only screen and (max-width: 800px) { /* @polyfill :host #dropdown-toggle */
/* line 105, ../../sass/elements/site-banner.scss */
/* line 108, ../../sass/elements/site-banner.scss */
::content #dropdown-toggle { z-index: 1000; }
/* @polyfill :host dropdown-panel */
/* line 110, ../../sass/elements/site-banner.scss */
/* line 113, ../../sass/elements/site-banner.scss */
::content dropdown-panel { color: black; } }
74 changes: 37 additions & 37 deletions css/site2.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,98 +248,98 @@ footer #copyright { color: #b3b3b3; font-size: 14px; }
/* line 404, ../sass/site2.scss */
footer #copyright a { color: #666666; }

/* line 411, ../sass/site2.scss */
/* line 428, ../sass/site2.scss */
#content-container .article { margin-bottom: 2em; }
/* line 415, ../sass/site2.scss */
/* line 432, ../sass/site2.scss */
#content-container h2 { margin-top: 20px; }
/* line 418, ../sass/site2.scss */
/* line 435, ../sass/site2.scss */
#content-container h3 { margin-top: 15px; }
/* line 421, ../sass/site2.scss */
/* line 438, ../sass/site2.scss */
#content-container h4 { margin-top: 10px; }
/* line 425, ../sass/site2.scss */
/* line 442, ../sass/site2.scss */
#content-container scroll-area article header { margin-bottom: 24px; }

/* line 432, ../sass/site2.scss */
/* line 449, ../sass/site2.scss */
#sidebar { position: fixed; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); height: 100%; width: 265px; background-color: #eeeeee; box-shadow: rgba(0, 0, 0, 0.14902) 1px 1px 1px 0px; z-index: 10; }
/* line 455, ../sass/site2.scss */
/* line 472, ../sass/site2.scss */
#sidebar docs-menu { padding: 0 16px; }
/* line 459, ../sass/site2.scss */
/* line 476, ../sass/site2.scss */
#sidebar #logo-container { height: 80px; margin-bottom: 24px; padding-left: 16px; }

/* line 470, ../sass/site2.scss */
/* line 487, ../sass/site2.scss */
#welcome #sidebar { display: none; }

/* line 474, ../sass/site2.scss */
/* line 491, ../sass/site2.scss */
#dropdown-toggle { display: none; margin-top: -5px; opacity: 0.3; }

/* line 481, ../sass/site2.scss */
/* line 498, ../sass/site2.scss */
dropdown-panel { position: absolute; top: 75px; left: 15px; width: 240px; z-index: 1000; }

/* line 489, ../sass/site2.scss */
/* line 506, ../sass/site2.scss */
.edit-on-github { /*position: absolute;
top: 0;
right: 0;*/ float: right; }
/* line 495, ../sass/site2.scss */
/* line 512, ../sass/site2.scss */
.edit-on-github + * { clear: both; }

/* line 500, ../sass/site2.scss */
/* line 517, ../sass/site2.scss */
.permalink { display: none; margin-left: 5px; vertical-align: top; }

/* line 505, ../sass/site2.scss */
/* line 522, ../sass/site2.scss */
.has-permalink:hover .permalink { display: initial; }

/* line 508, ../sass/site2.scss */
/* line 525, ../sass/site2.scss */
.no-permalink .permalink { display: none !important; }

/* line 515, ../sass/site2.scss */
/* line 532, ../sass/site2.scss */
.forversion { float: right; color: #ccc; font-style: italic; }

/* line 520, ../sass/site2.scss */
/* line 537, ../sass/site2.scss */
.article .byline { font-size: smaller; color: #ccc; }

/* line 525, ../sass/site2.scss */
/* line 542, ../sass/site2.scss */
.author { margin-bottom: 20px; }
/* line 528, ../sass/site2.scss */
/* line 545, ../sass/site2.scss */
.author > p { display: inline-block; margin: 0; }
/* line 532, ../sass/site2.scss */
/* line 549, ../sass/site2.scss */
.author > p:first-of-type { vertical-align: top; }
/* line 537, ../sass/site2.scss */
/* line 554, ../sass/site2.scss */
.author img { border-radius: 7px; margin-right: 5px; height: 40px; width: 40px; }

/* Elements */
/* line 549, ../sass/site2.scss */
/* line 566, ../sass/site2.scss */
.element-list > [data-element-file] { padding-bottom: 24px; border-top: 1px solid #eeeeee; }
/* line 554, ../sass/site2.scss */
/* line 571, ../sass/site2.scss */
.element-list header { margin: 24px 0; }
/* line 557, ../sass/site2.scss */
/* line 574, ../sass/site2.scss */
.element-list header h2 { margin: 0 !important; }
/* line 564, ../sass/site2.scss */
/* line 581, ../sass/site2.scss */
.element-list header a { margin-left: 20px; }
/* line 566, ../sass/site2.scss */
/* line 583, ../sass/site2.scss */
.element-list header a:not(.permalink) { font-size: initial; }
/* line 572, ../sass/site2.scss */
/* line 589, ../sass/site2.scss */
.element-list .name { display: inline-block; }
/* line 574, ../sass/site2.scss */
/* line 591, ../sass/site2.scss */
.element-list .name code { white-space: nowrap; }
/* line 579, ../sass/site2.scss */
/* line 596, ../sass/site2.scss */
.element-list .nodocs { margin-left: 17px; font-style: italic; }
/* line 583, ../sass/site2.scss */
/* line 600, ../sass/site2.scss */
.element-list .nodocs:after { content: 'No documentation available.'; }
/* line 588, ../sass/site2.scss */
/* line 605, ../sass/site2.scss */
.element-list iframe { border: none; width: 100%; }
/* line 594, ../sass/site2.scss */
/* line 611, ../sass/site2.scss */
.element-list .bower_install_instructions, .element-list .api_documentation { display: block; }
/* line 596, ../sass/site2.scss */
/* line 613, ../sass/site2.scss */
.element-list .bower_install_instructions > label, .element-list .api_documentation > label { font-weight: 600; }

/* line 603, ../sass/site2.scss */
/* line 620, ../sass/site2.scss */
.onlyonmobile { display: none; }

/* line 607, ../sass/site2.scss */
/* line 624, ../sass/site2.scss */
#toc summary { font-size: 16px; font-weight: 600; }

/* Videos */
/* line 614, ../sass/site2.scss */
/* line 631, ../sass/site2.scss */
.video iframe { width: 853px; max-width: 100%; height: 480px; }

@media only screen and (max-width: 580px) { /* line 6, ../sass/mobile.scss */
Expand Down
100 changes: 52 additions & 48 deletions js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ function injectPage(url, opt_addToHistory) {
if (e.target.status != 200) {
// TODO: use window.error and report this to server.
console.error('Page fetch error', e.target.status, e.target.statusText);
container.classList.remove('loading');
//container.classList.remove('loading');
return;
}

Expand All @@ -84,53 +84,59 @@ function injectPage(url, opt_addToHistory) {
var metaContentName = doc.head.querySelector(META_CONTENT_NAME).content;
document.head.querySelector(META_CONTENT_NAME).content = metaContentName;

var SCROLL_AREA = 'scroll-area';
var SITE_BANNER = 'site-banner';
var scrollArea = doc.querySelector(SCROLL_AREA);
var siteBanner = scrollArea.querySelector(SITE_BANNER);
document.querySelector(SITE_BANNER).outerHTML = siteBanner.outerHTML;

var newDocContainer = doc.querySelector(CONTAINER_SELECTOR);
container.innerHTML = newDocContainer.innerHTML;

// TODO: doesn't bring the app-bar back because listeners are nuked.
var scrollAreaDoc = document.querySelector(SCROLL_AREA);
scrollAreaDoc.init();

// Remove "loading" message immediately after page content is set.
container.classList.remove('loading');

// // Run Polymer's HTML Import loader/parser.
// HTMLImports.importer.load(newDocContainer, function() {
// HTMLImports.parser.parse(newDocContainer);
// // CustomElements polyfill needs to process the dynamic imports for definitions.
// CustomElements.parser.parse(newDocContainer);

// // Prevents polymer-ui-overlay FOUC where O.o() is unavailable.
// Platform.flush();
// });

var addToHistory = opt_addToHistory == undefined ? true : opt_addToHistory;
if (addToHistory) {
history.pushState({url: url}, doc.title, url);
} else {
// Came from history pop. Adjust nav arrow position.
// TODO: doesn't always move the arrow to the correct location. For the sake
// of mitigating user confusion, don't move the arrow on a history pop.
//docsMenu.highlightItemWithURL(location.pathname);
}

initPage(); // TODO: can't pass doc to this because prettyPrint() needs markup in dom.

// Record page view in GA early on.
// Record GA page view early; once metadata is set up and URL is updated.
exports._gaq.push(['_trackPageview', location.pathname]);

var SCROLL_AREA = 'scroll-area';
var SITE_BANNER = 'site-banner';
var APP_BAR = 'app-bar';
var newDocScrollArea = doc.querySelector(SCROLL_AREA);
var newDocSiteBanner = doc.querySelector(SITE_BANNER);

// Update app-bar links.
var newDocAppBar = doc.querySelector(SITE_BANNER + ' ' + APP_BAR);
var appBar = document.querySelector(SITE_BANNER + ' ' + APP_BAR);
appBar.innerHTML = newDocAppBar.innerHTML;

// Inject article body.
var newDocContentContainer = doc.querySelector(CONTAINER_SELECTOR);
container.innerHTML = newDocContentContainer.innerHTML;

initPage(); // TODO: can't pass doc to this because prettyPrint() needs markup in dom.

var DOCS_MENU = 'docs-menu';
var docsMenu = document.querySelector(DOCS_MENU);
var newDocDocsMenu = doc.querySelector(DOCS_MENU);
docsMenu.setAttribute('menu', newDocDocsMenu.getAttribute('menu'));

// Replace site-banner > header content.
var siteBannerHeader = document.querySelector(SITE_BANNER + ' header');
var newDocSiteBannerHeader = doc.querySelector(SITE_BANNER + ' header');
siteBannerHeader.innerHTML = newDocSiteBannerHeader.innerHTML;

// Update site-banner attributes. Elements in xhr'd document are not upgraded.
// We can't set properties directly. Instead, do old school attr replacement.
var siteBanner = document.querySelector(SITE_BANNER);
[].forEach.call(newDocSiteBanner.attributes, function(attr, i) {
siteBanner.setAttribute(attr.name, attr.value);
});

// Remove "loading" message immediately after page content is set.
//container.classList.remove('loading');

// TODO: run HTMLImports loader.

exports.scrollTo(0, 0); // Ensure we're at the top of the page when it's ready.
};

xhr.send();

container.classList.add('loading');
//container.classList.add('loading');
}

function initPage(opt_inDoc) {
Expand Down Expand Up @@ -231,14 +237,12 @@ document.addEventListener('polymer-ready', function(e) {
document.addEventListener('DOMContentLoaded', function(e) {
initPage();

//addStickyScrollToBars();

// // Insure add current page to history so back button has an URL for popstate.
// history.pushState({url: document.location.href}, document.title,
// document.location.href);
});

// Search bo close.
// Search box close.
document.addEventListener('click', function(e) {
var appBar = document.querySelector('app-bar');
if (appBar.showingSearch) {
Expand All @@ -256,15 +260,15 @@ document.querySelector('[data-twitter-follow]').addEventListener('click', functi
// -------------------------------------------------------------------------- //


// // Control whether the site is ajax or static.
// var AJAXIFY_SITE = !navigator.userAgent.match('Mobile|Android');
// if (AJAXIFY_SITE) {
// testXhrType('document', function(supported) {
// if (supported) {
// ajaxifySite();
// }
// });
// }
// Control whether the site is ajax or static.
var AJAXIFY_SITE = !navigator.userAgent.match('Mobile|Android');
if (AJAXIFY_SITE) {
testXhrType('document', function(supported) {
if (supported) {
ajaxifySite();
}
});
}

// Analytics -----
exports._gaq = exports._gaq || [];
Expand Down
3 changes: 3 additions & 0 deletions sass/elements/site-banner.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@
// overflow: hidden;
padding-left: $additonalPadding + 40;

-webkit-transition: background-color 300ms ease-in;
transition: background-color 300ms ease-in;

// @include transform(translate3d(0,0,0));
}

Expand Down
17 changes: 17 additions & 0 deletions sass/site2.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -408,6 +408,23 @@ footer {
}

#content-container {

// &.loading::before {
// content: 'loading...';
// position: absolute;
// width: 100%;
// height: 100%;
// padding-top: 4em;

// @include display-flex;
// @include justify-content(center);
// @include align-items(flex-start);

// //background: url(/images/icons/loading_icon.svg) no-repeat 40% 91px;
// background-size: 30px;
// background-color: rgba(255,255,255,0.8);
// }

.article {
margin-bottom: 2em;
}
Expand Down

0 comments on commit d636400

Please sign in to comment.