Skip to content

Commit

Permalink
feat: combine layout
Browse files Browse the repository at this point in the history
  • Loading branch information
kitian616 committed May 26, 2018
1 parent 4315cac commit e4e8146
Show file tree
Hide file tree
Showing 12 changed files with 266 additions and 30 deletions.
23 changes: 15 additions & 8 deletions _includes/scripts/lib/affix.js
Original file line number Diff line number Diff line change
@@ -1,26 +1,33 @@
(function() {
var SOURCES = window.TEXT_VARIABLES.sources;
window.Lazyload.js(SOURCES.jquery, function() {
var $window = $(window), $document = $(window.document), $root;
var $window = $(window), $root, $scrollTarget, $scroller, $scroll;
var rootTop, rootLeft, rootHeight, scrollBottom, rootBottomTop, lastScrollTop;
var offsetBottom = 0, disabled = false, hasInit = false;
var offsetBottom = 0, disabled = false, scrollTarget = window, scroller = 'html, body', scroll = window.document;
var hasInit = false, isOverallScroller = true;

function setOptions(options) {
var _options = options || {};
_options.offsetBottom && (offsetBottom = _options.offsetBottom);
_options.scrollTarget && (scrollTarget = _options.scrollTarget);
_options.scroller && (scroller = _options.scroller);
_options.scroll && (scroll = _options.scroll);
_options.disabled !== undefined && (disabled = _options.disabled);
$scrollTarget = $(scrollTarget);
$scroller = $(scroller);
isOverallScroller = window.isOverallScroller($scroller[0]);
$scroll = $(scroll);
calc(true);
}
function initData() {
top();
var rootOffset = $root.offset();
rootHeight = $root.outerHeight();
rootTop = rootOffset.top;
rootLeft = rootOffset.left;
rootTop = $root.offset().top + (isOverallScroller ? 0 : $scroller.scrollTop());
rootLeft = $root.offset().left;
}
function calc(needInitData) {
needInitData && initData();
scrollBottom = $document.outerHeight() - offsetBottom - rootHeight;
scrollBottom = $scroll.outerHeight() - offsetBottom - rootHeight;
rootBottomTop = scrollBottom - rootTop;
}
function top() {
Expand All @@ -43,7 +50,7 @@
}
function setState(force) {
force !== true && (force = false);
var scrollTop = $window.scrollTop();
var scrollTop = $scrollTarget.scrollTop();
if (scrollTop >= rootTop && scrollTop <= scrollBottom) {
(!force && lastScrollTop >= rootTop && lastScrollTop <= scrollBottom) || fixed();
} else if (scrollTop < rootTop) {
Expand All @@ -68,7 +75,7 @@
clearInterval(interval);
clearTimeout(timeout);
});
$window.on('scroll', function() {
$scrollTarget.on('scroll', function() {
disabled || setState();
});
$window.on('resize', window.throttle(function() {
Expand Down
13 changes: 13 additions & 0 deletions _includes/scripts/lib/scroll.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
(function() {
var SOURCES = window.TEXT_VARIABLES.sources;
window.Lazyload.js(SOURCES.jquery, function() {
function scrollToAnchor(anchor, duration, callback) {
var $root = this;
$root.animate({ scrollTop: $(anchor).position().top }, duration, function() {
window.history.replaceState(null, '', window.location.href.split('#')[0] + anchor);
callback && callback();
});
}
$.fn.scrollToAnchor = scrollToAnchor;
});
})();
16 changes: 10 additions & 6 deletions _includes/scripts/lib/toc.js
Original file line number Diff line number Diff line change
@@ -1,25 +1,29 @@
(function() {
var SOURCES = window.TEXT_VARIABLES.sources;
window.Lazyload.js(SOURCES.jquery, function() {
var $window = $(window), $root, $tocUl = $('<ul class="toc"></ul>'), $tocLi, $headings, $activeLast, $activeCur;
var selectors = 'h1,h2,h3', container = 'body', disabled = false;
var $window = $(window), $root, $scrollTarget, $scroller, $tocUl = $('<ul class="toc"></ul>'), $tocLi, $headings, $activeLast, $activeCur;
var selectors = 'h1,h2,h3', container = 'body', scrollTarget = window, scroller = 'html, body', disabled = false;
var headingsPos, scrolling = false, rendered = false, hasInit = false;
function setOptions(options) {
var _options = options || {};
_options.selectors && (selectors = _options.selectors);
_options.container && (container = _options.container);
_options.scrollTarget && (scrollTarget = _options.scrollTarget);
_options.scroller && (scroller = _options.scroller);
_options.disabled !== undefined && (disabled = _options.disabled);
$headings = $(container).find(selectors);
$scrollTarget = $(scrollTarget);
$scroller = $(scroller);
calc();
}
function calc() {
headingsPos = [];
$headings.each(function() {
headingsPos.push(Math.floor($(this).offset().top));
headingsPos.push(Math.floor($(this).position().top));
});
}
function setState(element, disabled) {
var scrollTop = $window.scrollTop(), i;
var scrollTop = $scroller.scrollTop(), i;
if (disabled || !headingsPos || headingsPos.length < 1) { return; }
if (element) {
$activeCur = element;
Expand Down Expand Up @@ -50,7 +54,7 @@
var $this = $(this);
scrolling = true;
setState($this.parent());
window.scrollTopAnchor($this.attr('href'), function() {
$scroller.scrollToAnchor($this.attr('href'), 400, function() {
scrolling = false;
});
});
Expand All @@ -72,7 +76,7 @@
clearInterval(interval);
clearTimeout(timeout);
});
$window.on('scroll', function() {
$scrollTarget.on('scroll', function() {
disabled || setState(null, scrolling);
});
$window.on('resize', window.throttle(function() {
Expand Down
18 changes: 5 additions & 13 deletions _includes/scripts/page-post-common.js
Original file line number Diff line number Diff line change
@@ -1,18 +1,10 @@
(function() {
var SOURCES = window.TEXT_VARIABLES.sources;
function scrollAnimateTo(destination, duration, callback) {
var $body = $('html, body'), bodyScrollTop = $body.scrollTop();
if(bodyScrollTop === destination) { return; }
$body.animate({ scrollTop: destination }, duration, callback);
}
window.scrollTopAnchor = function(anchor, callback) {
scrollAnimateTo($(anchor).offset().top, 400, function() {
window.history.replaceState(null, '', window.location.href.split('#')[0] + anchor);
callback && callback();
});
};
window.Lazyload.js(SOURCES.jquery, function() {
var $articleContent = $('.article-content'), $this;
var $this, $articleContent = $('.article-content'), $scroll;
var hasSidebar = $('.js-page-root').hasClass('layout--page--sidebar');
var scroll = hasSidebar ? '.js-page-main' : 'html, body';
$scroll = $(scroll);
$articleContent.children('.highlight').each(function() {
$this = $(this);
$this.attr('data-lang', $this.find('code').attr('data-lang'));
Expand All @@ -23,7 +15,7 @@
$this.append($('<a class="anchor" aria-hidden="true"></a>').html('<i class="fas fa-anchor"></i>'));
});
$articleContent.on('click', '.anchor', function() {
window.scrollTopAnchor('#' + $(this).parent().attr('id'));
$scroll.scrollToAnchor('#' + $(this).parent().attr('id'), 400);
});
});
})();
6 changes: 6 additions & 0 deletions _includes/scripts/post.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
var $tocRoot = $('.js-toc-root');
var $col2 = $('.js-col-2');
var toc, affix;
var hasSidebar = $('.js-page-root').hasClass('layout--page--sidebar');
var hasToc = $articleContent.find(TOC_SELECTOR).length > 0;
var tocDisabled = false;

Expand All @@ -36,10 +37,15 @@
toc = $tocRoot.toc({
selectors: TOC_SELECTOR,
container: $articleContent,
scrollTarget: hasSidebar ? '.js-page-main' : null,
scroller: hasSidebar ? '.js-page-main' : null,
disabled: tocDisabled
});
affix = $articleAside.affix({
offsetBottom: $pageFooter.outerHeight(),
scrollTarget: hasSidebar ? '.js-page-main' : null,
scroller: hasSidebar ? '.js-page-main' : null,
scroll: hasSidebar ? $('.js-page-main').children() : null,
disabled: tocDisabled
});
}, 1000);
Expand Down
5 changes: 5 additions & 0 deletions _includes/scripts/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,15 @@
return str ? decodeURIComponent(str.replace(/\+/g, '%20')) : '';
};


window.hasEvent = function(event) {
return 'on'.concat(event) in window.document;
};

window.isOverallScroller = function(node) {
return node === document.documentElement || node === document.body;
};

window.pageLoad = (function () {
var loaded = false, cbs = [];
window.addEventListener('load', function () {
Expand Down
86 changes: 86 additions & 0 deletions _layouts/page-1.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<!DOCTYPE html>
{%- include snippets/get-lang.html -%}
<html lang="{{ __return }}">
<head>
{%- include head.html -%}
<script>
{%- include scripts/utils.js -%}
{%- include scripts/lib/throttle.js -%}
{%- include scripts/lib/lazyload.js -%}
{%- include scripts/common.js -%}
</script>
{%- include scripts/variables.html -%}
</head>
<body>
{%- if page.sidebar -%}
<div class="layout--page layout--page--sidebar clearfix js-page-root">
<div class="page__actions">
<div class="button button--secondary button--circle box-shadow-2 js-sidebar-button">
<i class="fas fa-bars icon--show"></i>
<i class="fas fa-times icon--hide"></i>
</div>
</div>
<div class="page__sidebar">{%- include sidebar.html -%}</div>
<script>
(function() {
var SOURCES = window.TEXT_VARIABLES.sources;
var TOC_SELECTOR = window.TEXT_VARIABLES.site.toc.selectors;
window.Lazyload.js(SOURCES.jquery, function() {
var $pageRoot = $('.js-page-root');
var $sidebarButton = $('.js-sidebar-button');
$sidebarButton.on('click', function() {
$pageRoot.toggleClass('show-sidebar');
});
});
})();
</script>

{%- else -%}
<div class="layout--page clearfix js-layout-base-2-col">
{%- endif -%}
<div class="page__main js-page-main">
<div class="page__main-inner">
<div class="page__header">{%- include header.html -%}</div>

<div class="page__content">
<div class ="main">
<div class="col-2 js-col-2">
<aside class="js-article-aside"><div class="js-toc-root"></div></aside>
</div>

<div class="col-1">
<article>

{%- include snippets/page-title.html -%}
<div class="main__header"><h1>{{ __return }}</h1></div>

<div class="article-content js-article-content" itemprop="articleBody">{{ content }}</div>

{%- if jekyll.environment != "development" and page.comment != false -%}
<section>{%- include comment.html -%}</section>
{%- endif -%}

</article>
</div>
</div>
</div>
<div class="page__footer">{%- include footer.html -%}</div>

</div>
</div>
</div>
<script>
{%- include scripts/lib/scroll.js -%}
{%- include scripts/page-post-common.js -%}
{%- include scripts/page.js -%}
{%- include scripts/lib/affix.js -%}
{%- include scripts/lib/toc.js -%}
{%- include scripts/post.js -%}
</script>


{%- include markdown-enhancements.html -%}
{%- include pageview.html -%}
{%- include analytics.html -%}
</body>
</html>
Loading

0 comments on commit e4e8146

Please sign in to comment.