scrollytelling-pageflow-navigation 1.1.0 → 1.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/javascripts/scrollytelling/pageflow/navigation.js +1 -0
- data/app/assets/javascripts/scrollytelling/pageflow/navigation/audio.js +16 -11
- data/app/assets/javascripts/scrollytelling/pageflow/navigation/counter.js +7 -15
- data/app/assets/javascripts/scrollytelling/pageflow/navigation/invert.js +8 -15
- data/app/assets/javascripts/scrollytelling/pageflow/navigation/sharing.js +27 -15
- data/app/assets/javascripts/scrollytelling/pageflow/navigation/widget_type.js +9 -0
- data/app/assets/stylesheets/scrollytelling/pageflow/navigation.scss +5 -0
- data/app/assets/stylesheets/scrollytelling/pageflow/navigation/_navigation.scss +9 -15
- data/app/assets/stylesheets/scrollytelling/pageflow/navigation/_options.scss +6 -15
- data/app/views/scrollytelling/pageflow/navigation/_widget.html.erb +23 -15
- data/lib/scrollytelling/pageflow/navigation/version.rb +1 -1
- metadata +3 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 202a7160131a76cd0a63fab8ce022e07d611d71b
|
4
|
+
data.tar.gz: ca561d79ac75af80d56699b2c97b79093f83ecf1
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 708e8a872e09438779bfbacaea82dcea23e4cd19a7710dc7069adf92b05a3aa3e90f35312deae2d128f6d465cb0851cba1967b320090bd51ac97cdae3f583c3e
|
7
|
+
data.tar.gz: bc7c93bf682b09c7f3a0046761160663b6d50a65924129b92ba65b2240a5ce60d31ba873729d22fa1ca4959affb905eb49a3051e517dca58b41ba73fffdf80b0
|
@@ -1,13 +1,18 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
1
|
+
$.widget('scrollytelling.audioControl', {
|
2
|
+
_create: function() {
|
3
|
+
$('#scrollytelling-audio', this.element).on('click', this.toggleAudio);
|
4
|
+
},
|
5
|
+
|
6
|
+
toggleAudio: function(event) {
|
7
|
+
event.preventDefault();
|
8
|
+
var target = $(event.target);
|
7
9
|
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
10
|
+
if(pageflow.settings.get('volume') > 0) {
|
11
|
+
pageflow.settings.set('volume', 0);
|
12
|
+
target.removeClass('audio-playing').addClass('audio-muted');
|
13
|
+
} else {
|
14
|
+
pageflow.settings.set('volume', 1);
|
15
|
+
target.removeClass('audio-muted').addClass('audio-playing');
|
16
|
+
}
|
17
|
+
}
|
13
18
|
});
|
@@ -1,26 +1,22 @@
|
|
1
|
-
|
2
|
-
navigation: function() {
|
3
|
-
return $('#scrollytelling-pageflow-navigation');
|
4
|
-
},
|
5
|
-
|
1
|
+
$.widget('scrollytelling.scrollytellingNavigationCounter', {
|
6
2
|
setActive: function(page) {
|
7
|
-
this.
|
8
|
-
this.
|
3
|
+
this.element.find('a').removeClass('active');
|
4
|
+
this.element.find('a[href="#' + page.attr('id') + '"]').addClass('active');
|
9
5
|
},
|
10
6
|
|
11
7
|
updateActive: function(page) {
|
12
|
-
this.setActive(page.element
|
8
|
+
this.setActive(page.element);
|
13
9
|
},
|
14
10
|
|
15
|
-
|
11
|
+
_create: function() {
|
16
12
|
// Init active dot
|
17
|
-
this.setActive(pageflow.slides.currentPage()
|
13
|
+
this.setActive(pageflow.slides.currentPage());
|
18
14
|
|
19
15
|
// Listen to page changes
|
20
16
|
pageflow.events.on('page:change', this.updateActive.bind(this));
|
21
17
|
|
22
18
|
// Set click handler
|
23
|
-
$('a', this.
|
19
|
+
$('a', this.element).on('click', this.onClick);
|
24
20
|
},
|
25
21
|
|
26
22
|
onClick: function(event) {
|
@@ -30,8 +26,4 @@ pageflow.Counter = {
|
|
30
26
|
|
31
27
|
pageflow.slides.goToById(page_id);
|
32
28
|
}
|
33
|
-
}
|
34
|
-
|
35
|
-
pageflow.ready.then(function() {
|
36
|
-
pageflow.Counter.init();
|
37
29
|
});
|
@@ -1,27 +1,20 @@
|
|
1
|
-
// Set class .page-invert on
|
2
|
-
|
3
|
-
|
4
|
-
container: $('body'),
|
5
|
-
|
1
|
+
// Set class .page-invert on widget element if the active page has the
|
2
|
+
// class .invert
|
3
|
+
$.widget('scrollytelling.scrollytellingNavigationInvert', {
|
6
4
|
changeInvert: function(page) {
|
7
|
-
this.setInvert(page.element
|
5
|
+
this.setInvert(page.element);
|
8
6
|
},
|
9
7
|
|
10
|
-
setInvert: function(
|
11
|
-
|
8
|
+
setInvert: function(pageElement) {
|
9
|
+
this.element.toggleClass('page-invert', pageElement.hasClass('invert'));
|
12
10
|
},
|
13
11
|
|
14
|
-
|
15
|
-
|
12
|
+
_create: function() {
|
16
13
|
// Set inverted class on first load
|
17
|
-
this.setInvert(pageflow.slides.currentPage()
|
14
|
+
this.setInvert(pageflow.slides.currentPage());
|
18
15
|
|
19
16
|
// Listen to page changes
|
20
17
|
pageflow.events.on('page:change', this.changeInvert.bind(this));
|
21
18
|
|
22
19
|
}
|
23
|
-
}
|
24
|
-
|
25
|
-
pageflow.ready.then(function() {
|
26
|
-
pageflow.Invert.init();
|
27
20
|
});
|
@@ -1,18 +1,30 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
1
|
+
$.widget('scrollytelling.facebookSharing', {
|
2
|
+
_create: function() {
|
3
|
+
$('#share-fb', this.element).on('click', this.onClick);
|
4
|
+
},
|
5
|
+
|
6
|
+
onClick: function(event) {
|
7
|
+
event.preventDefault();
|
8
|
+
var fbSharer = window.open(
|
9
|
+
"//www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(location.href.replace(location.hash,"")),
|
10
|
+
"Facebook",
|
11
|
+
"width=600,height=300"
|
12
|
+
);
|
13
|
+
}
|
8
14
|
});
|
9
15
|
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
16
|
+
$.widget('scrollytelling.twitterSharing', {
|
17
|
+
_create: function() {
|
18
|
+
$('#share-tw', this.element).on('click', this.onClick);
|
19
|
+
},
|
20
|
+
|
21
|
+
onClick: function(event) {
|
22
|
+
event.preventDefault();
|
23
|
+
var summary = $("meta[name='description']").attr('content');
|
24
|
+
var twSharer = window.open(
|
25
|
+
"//twitter.com/intent/tweet?text="+encodeURIComponent(summary)+"&via=Scrollytellio&url="+encodeURIComponent(location.href.replace(location.hash,"")),
|
26
|
+
"Twitter",
|
27
|
+
"width=600,height=260"
|
28
|
+
)
|
29
|
+
}
|
18
30
|
});
|
@@ -0,0 +1,9 @@
|
|
1
|
+
pageflow.widgetTypes.register('scrollytelling_pageflow_navigation', {
|
2
|
+
enhance: function(element) {
|
3
|
+
element.scrollytellingNavigationCounter();
|
4
|
+
element.scrollytellingNavigationInvert();
|
5
|
+
element.facebookSharing();
|
6
|
+
element.twitterSharing();
|
7
|
+
element.audioControl();
|
8
|
+
}
|
9
|
+
});
|
@@ -1,2 +1,7 @@
|
|
1
|
+
/// Background color used in the tooltips.
|
2
|
+
$scrollytelling-tooltip-bg-color: black !default;
|
3
|
+
$scrollytelling-invert-tooltip-bg-color: white !default;
|
4
|
+
$scrollytelling-sharing-size: 40px !default;
|
5
|
+
|
1
6
|
@import "./navigation/navigation";
|
2
7
|
@import "./navigation/options";
|
@@ -1,12 +1,13 @@
|
|
1
1
|
@media screen and (max-width: 768px) {
|
2
|
-
#scrollytelling-pageflow-navigation
|
2
|
+
#scrollytelling-pageflow-navigation,
|
3
|
+
ul.scrollytelling-sharing {
|
3
4
|
display: none;
|
4
5
|
}
|
5
6
|
}
|
6
7
|
|
7
8
|
#scrollytelling-pageflow-navigation {
|
8
9
|
right: 2.3%;
|
9
|
-
position:
|
10
|
+
position: absolute;
|
10
11
|
z-index: 100;
|
11
12
|
top: 50%;
|
12
13
|
opacity: 1;
|
@@ -77,8 +78,6 @@
|
|
77
78
|
}
|
78
79
|
|
79
80
|
.scrollytelling-pageflow-navigation-tooltip {
|
80
|
-
$bg-color: #000;
|
81
|
-
|
82
81
|
right: 20px;
|
83
82
|
position: absolute;
|
84
83
|
top: -7px;
|
@@ -92,7 +91,7 @@
|
|
92
91
|
line-height: 1;
|
93
92
|
display: none;
|
94
93
|
|
95
|
-
background-color: $bg-color;
|
94
|
+
background-color: $scrollytelling-tooltip-bg-color;
|
96
95
|
padding: 6px;
|
97
96
|
padding-right: 20px;
|
98
97
|
border-radius: 3px;
|
@@ -107,29 +106,24 @@
|
|
107
106
|
position: absolute;
|
108
107
|
pointer-events: none;
|
109
108
|
border-color: rgba(255, 255, 255, 0);
|
110
|
-
border-left-color: $bg-color;
|
109
|
+
border-left-color: $scrollytelling-tooltip-bg-color;
|
111
110
|
border-width: 5px;
|
112
111
|
margin-top: -5px;
|
113
112
|
}
|
114
|
-
|
115
113
|
}
|
116
114
|
|
117
115
|
.page-invert & {
|
118
116
|
a span {
|
119
|
-
background:
|
117
|
+
background: $scrollytelling-tooltip-bg-color;
|
120
118
|
}
|
121
119
|
|
122
120
|
.scrollytelling-pageflow-navigation-tooltip {
|
123
|
-
|
124
|
-
$bg-color
|
125
|
-
|
126
|
-
color: black;
|
127
|
-
background-color: $bg-color;
|
121
|
+
color: $scrollytelling-tooltip-bg-color;
|
122
|
+
background-color: $scrollytelling-invert-tooltip-bg-color;
|
128
123
|
|
129
124
|
&:after {
|
130
|
-
border-left-color: $bg-color;
|
125
|
+
border-left-color: $scrollytelling-invert-tooltip-bg-color;
|
131
126
|
}
|
132
|
-
|
133
127
|
}
|
134
128
|
}
|
135
129
|
}
|
@@ -1,11 +1,9 @@
|
|
1
1
|
ul.scrollytelling-sharing,
|
2
2
|
ul.scrollytelling-options {
|
3
3
|
|
4
|
-
$size: 40px;
|
5
|
-
|
6
4
|
a {
|
7
|
-
width: $size;
|
8
|
-
height: $size;
|
5
|
+
width: $scrollytelling-sharing-size;
|
6
|
+
height: $scrollytelling-sharing-size;
|
9
7
|
|
10
8
|
text-decoration: none;
|
11
9
|
position: relative;
|
@@ -27,8 +25,8 @@ ul.scrollytelling-options {
|
|
27
25
|
&:before {
|
28
26
|
color: #fff;
|
29
27
|
font-size: 28px;
|
30
|
-
line-height: $size;
|
31
|
-
width: $size;
|
28
|
+
line-height: $scrollytelling-sharing-size;
|
29
|
+
width: $scrollytelling-sharing-size;
|
32
30
|
text-align: center;
|
33
31
|
position: absolute;
|
34
32
|
left: 0;
|
@@ -71,14 +69,7 @@ ul.scrollytelling-options {
|
|
71
69
|
list-style-type: none;
|
72
70
|
margin: 0;
|
73
71
|
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
}
|
72
|
+
.audio-playing:before { content: "\f028"; }
|
73
|
+
.audio-muted:before { content: "\f026"; }
|
78
74
|
|
79
|
-
@media screen and (max-width: 768px) {
|
80
|
-
ul.scrollytelling-sharing,
|
81
|
-
ul.scrollytelling-options #back-to-top {
|
82
|
-
display: none;
|
83
|
-
}
|
84
75
|
}
|
@@ -1,17 +1,25 @@
|
|
1
|
-
<
|
2
|
-
<
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
1
|
+
<div data-widget="scrollytelling_pageflow_navigation">
|
2
|
+
<nav id="scrollytelling-pageflow-navigation">
|
3
|
+
<ul>
|
4
|
+
<% entry.pages.displayed_in_navigation.each do |page| %>
|
5
|
+
<li>
|
6
|
+
<a href="#<%= page.perma_id %>" data-page-id="<%= page.id %>">
|
7
|
+
<span></span>
|
8
|
+
</a>
|
9
|
+
<div class="scrollytelling-pageflow-navigation-tooltip">
|
10
|
+
<%= page.configuration["title"] %>
|
11
|
+
</div>
|
12
|
+
</li>
|
13
|
+
<% end %>
|
14
|
+
</ul>
|
15
|
+
</nav>
|
8
16
|
|
9
|
-
<ul class="scrollytelling-sharing">
|
10
|
-
|
11
|
-
|
12
|
-
</ul>
|
17
|
+
<ul class="scrollytelling-sharing">
|
18
|
+
<li><a href="#" id="share-tw"></a></li>
|
19
|
+
<li><a href="#" id="share-fb"></a></li>
|
20
|
+
</ul>
|
13
21
|
|
14
|
-
<ul class="scrollytelling-options">
|
15
|
-
|
16
|
-
|
17
|
-
</
|
22
|
+
<ul class="scrollytelling-options">
|
23
|
+
<li><a href="#" id="scrollytelling-audio" class="audio-playing"></a></li>
|
24
|
+
</ul>
|
25
|
+
</div>
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: scrollytelling-pageflow-navigation
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.
|
4
|
+
version: 1.2.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Joost Baaij
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2016-06-
|
11
|
+
date: 2016-06-28 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: pageflow
|
@@ -99,6 +99,7 @@ files:
|
|
99
99
|
- app/assets/javascripts/scrollytelling/pageflow/navigation/counter.js
|
100
100
|
- app/assets/javascripts/scrollytelling/pageflow/navigation/invert.js
|
101
101
|
- app/assets/javascripts/scrollytelling/pageflow/navigation/sharing.js
|
102
|
+
- app/assets/javascripts/scrollytelling/pageflow/navigation/widget_type.js
|
102
103
|
- app/assets/stylesheets/scrollytelling/pageflow/navigation.scss
|
103
104
|
- app/assets/stylesheets/scrollytelling/pageflow/navigation/_navigation.scss
|
104
105
|
- app/assets/stylesheets/scrollytelling/pageflow/navigation/_options.scss
|