Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor motion & sidebar affix global fix. #1829

Merged
merged 9 commits into from
Aug 27, 2017
Merged

Refactor motion & sidebar affix global fix. #1829

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5ccc451
Merge pull request #19 from iissnan/master
ivan-nginx Aug 27, 2017
613ec44
MOD: motion effect [1].
ivan-nginx Aug 27, 2017
9438b61
MOD: motion effect [2].
ivan-nginx Aug 27, 2017
8fdfa90
MOD: motion effect [3].
ivan-nginx Aug 27, 2017
2083746
MOD: motion effect [4].
ivan-nginx Aug 27, 2017
bf931dc
MOD: motion effect [5].
ivan-nginx Aug 27, 2017
f7c3907
MOD: motion effect [6].
ivan-nginx Aug 27, 2017
4334841
MOD: motion effect [7].
ivan-nginx Aug 27, 2017
14846e7
MOD: motion effect [8].
ivan-nginx Aug 27, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -558,7 +558,21 @@ tabs:
#! ---------------------------------------------------------------

# Motion
use_motion: true
motion:
enable: true
async: false
transition:
# Transition variants:
# fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut
# swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut
# bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut
# slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut
# slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut
# perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOut
post_block: fadeIn
post_header: slideDownIn
post_body: slideDownIn
coll_header: slideLeftIn

# Fancybox
fancybox: true
Expand Down
8 changes: 4 additions & 4 deletions layout/_layout.swig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>

{% set html_class = 'theme-next ' + theme.scheme %}
{% if theme.use_motion %}
{% if theme.motion.enable %}
{% set html_class = html_class + ' use-motion' %}
{% endif %}

Expand Down Expand Up @@ -66,9 +66,9 @@
{% set scheme_script = '_scripts/schemes/' + theme.scheme | lower + '.swig' %}
{% include scheme_script %}

{% block script_extra %}
{% include '_scripts/pages/post-details.swig' %}
{% endblock %}
{% include '_scripts/pages/post-details.swig' %}

{% block script_extra %}{% endblock %}

{% include '_scripts/boostrap.swig' %}

Expand Down
2 changes: 1 addition & 1 deletion layout/_partials/head.swig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@
sidebar: {{ theme.sidebar | json_encode }},
fancybox: {{ theme.fancybox }},
tabs: {{ theme.tabs.enable }},
motion: {{ theme.use_motion }},
motion: {{ theme.motion | json_encode }},
duoshuo: {
userId: '{{ theme.duoshuo_info.user_id | default() }}',
author: '{{ theme.duoshuo_info.admin_nickname | default(__('author'))}}'
Expand Down
12 changes: 1 addition & 11 deletions layout/archive.swig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
{% if post.year !== year %}
{% set year = post.year %}
<div class="collection-title">
<h2 class="archive-year motion-element" id="archive-year-{{ year }}">{{ year }}</h2>
<{% if theme.seo %}h2{% else %}h1{% endif %} class="archive-year" id="archive-year-{{ year }}">{{ year }}</{% if theme.seo %}h2{% else %}h1{% endif %}>
</div>
{% endif %}
{# endshow #}
Expand All @@ -60,13 +60,3 @@
{% block sidebar %}
{{ sidebar_template.render(false) }}
{% endblock %}


{% block script_extra %}
{% include '_scripts/pages/post-details.swig' %}
{% if theme.use_motion %}
<script type="text/javascript" id="motion.page.archive">
$('.archive-year').velocity('transition.slideLeftIn');
</script>
{% endif %}
{% endblock %}
4 changes: 0 additions & 4 deletions source/css/_common/components/pages/archive.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
.use-motion {
.post { opacity: 0; }
}

.page-archive {

.archive-page-counter {
Expand Down
7 changes: 7 additions & 0 deletions source/css/_common/components/post/post.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,13 @@
transform: rotate(30deg);
}

.use-motion {
if hexo-config('motion.transition.post_block') { .post-block { opacity: 0; } }
if hexo-config('motion.transition.post_header') { .post-header { opacity: 0; } }
if hexo-config('motion.transition.post_body') { .post-body { opacity: 0; } }
if hexo-config('motion.transition.coll_header') { .collection-title { opacity: 0; } }
}

@import "post-expand";
@import "post-collapse";
@import "post-type";
Expand Down
2 changes: 1 addition & 1 deletion source/js/src/bootstrap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ $(document).ready(function () {
$(document).trigger('motion:before');

// Bootstrap Motion.
CONFIG.motion && NexT.motion.integrator.bootstrap();
CONFIG.motion.enable && NexT.motion.integrator.bootstrap();

$(document).trigger('bootstrap:after');
});
39 changes: 36 additions & 3 deletions source/js/src/motion.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,10 @@ $(document).ready(function () {
o: {duration: 200}
});

if (CONFIG.motion.async) {
integrator.next();
}

if (sequence.length > 0) {
sequence[sequence.length - 1].o.complete = function () {
integrator.next();
Expand Down Expand Up @@ -269,6 +273,11 @@ $(document).ready(function () {
},

menu: function (integrator) {

if (CONFIG.motion.async) {
integrator.next();
}

$('.menu-item').velocity('transition.slideDownIn', {
display: null,
duration: 200,
Expand All @@ -279,11 +288,23 @@ $(document).ready(function () {
},

postList: function (integrator) {
var $post = $('.post');
var hasPost = $post.size() > 0;
//var $post = $('.post');
var $postBlock = $('.post-block');
var $postBlockTransition = CONFIG.motion.transition.post_block;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Identifier 'post_block' is not in camel case.

var $postHeader = $('.post-header');
var $postHeaderTransition = CONFIG.motion.transition.post_header;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Identifier 'post_header' is not in camel case.

var $postBody = $('.post-body');
var $postBodyTransition = CONFIG.motion.transition.post_body;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Identifier 'post_body' is not in camel case.

var $collHeader = $('.collection-title, .archive-year');
var $collHeaderTransition = CONFIG.motion.transition.coll_header;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Identifier 'coll_header' is not in camel case.

var hasPost = $postBlock.size() > 0;

hasPost ? postMotion() : integrator.next();

if (CONFIG.motion.async) {
integrator.next();
}

function postMotion () {
var postMotionOptions = window.postMotionOptions || {
stagger: 100,
Expand All @@ -293,7 +314,19 @@ $(document).ready(function () {
integrator.next();
};

$post.velocity('transition.slideDownIn', postMotionOptions);
//$post.velocity('transition.slideDownIn', postMotionOptions);
if (CONFIG.motion.transition.post_block) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Identifier 'post_block' is not in camel case.

$postBlock.velocity('transition.' + $postBlockTransition, postMotionOptions);
}
if (CONFIG.motion.transition.post_header) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Identifier 'post_header' is not in camel case.

$postHeader.velocity('transition.' + $postHeaderTransition, postMotionOptions);
}
if (CONFIG.motion.transition.post_body) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Identifier 'post_body' is not in camel case.

$postBody.velocity('transition.' + $postBodyTransition, postMotionOptions);
}
if (CONFIG.motion.transition.coll_header) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Identifier 'coll_header' is not in camel case.

$collHeader.velocity('transition.' + $collHeaderTransition, postMotionOptions);
}
}
},

Expand Down