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.
Files changed (13) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/scrollytelling/pageflow/navigation.js +1 -0
  3. data/app/assets/javascripts/scrollytelling/pageflow/navigation/audio.js +16 -11
  4. data/app/assets/javascripts/scrollytelling/pageflow/navigation/counter.js +7 -15
  5. data/app/assets/javascripts/scrollytelling/pageflow/navigation/invert.js +8 -15
  6. data/app/assets/javascripts/scrollytelling/pageflow/navigation/sharing.js +27 -15
  7. data/app/assets/javascripts/scrollytelling/pageflow/navigation/widget_type.js +9 -0
  8. data/app/assets/stylesheets/scrollytelling/pageflow/navigation.scss +5 -0
  9. data/app/assets/stylesheets/scrollytelling/pageflow/navigation/_navigation.scss +9 -15
  10. data/app/assets/stylesheets/scrollytelling/pageflow/navigation/_options.scss +6 -15
  11. data/app/views/scrollytelling/pageflow/navigation/_widget.html.erb +23 -15
  12. data/lib/scrollytelling/pageflow/navigation/version.rb +1 -1
  13. metadata +3 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 3e73da3524cfef7831008ab684173db1011cf75c
4
- data.tar.gz: e025e5aa31885da6eafb01e24574bf08fc86b097
3
+ metadata.gz: 202a7160131a76cd0a63fab8ce022e07d611d71b
4
+ data.tar.gz: ca561d79ac75af80d56699b2c97b79093f83ecf1
5
5
  SHA512:
6
- metadata.gz: 5787b75dc8a59d71a0a8dd9f687f3ba4cbfe50e358f30b86dc1cbe376a8c6b769919632b9c7c1b7459fc14a3baf5e288a95beb8c0c4977bb0e77f51d4e3b3b5a
7
- data.tar.gz: ae06178b329dabf474c61b21833c6e4a27f6dcdc0bc8cfd8934f19e0184f3db3a5bba5e5bfa481be5f194e62c8d93c178160acfea610b9c1dfc259110d4f991c
6
+ metadata.gz: 708e8a872e09438779bfbacaea82dcea23e4cd19a7710dc7069adf92b05a3aa3e90f35312deae2d128f6d465cb0851cba1967b320090bd51ac97cdae3f583c3e
7
+ data.tar.gz: bc7c93bf682b09c7f3a0046761160663b6d50a65924129b92ba65b2240a5ce60d31ba873729d22fa1ca4959affb905eb49a3051e517dca58b41ba73fffdf80b0
data/app/assets/javascripts/scrollytelling/pageflow/navigation.js CHANGED
@@ -2,3 +2,4 @@
2
2
  //= require ./navigation/counter
3
3
  //= require ./navigation/audio
4
4
  //= require ./navigation/sharing
5
+ //= require ./navigation/widget_type
data/app/assets/javascripts/scrollytelling/pageflow/navigation/audio.js CHANGED
@@ -1,13 +1,18 @@
1
- $(document).on('click', '#mute-audio', function(event) {
2
- event.preventDefault();
3
- pageflow.settings.set('volume', 0);
4
- $('#mute-audio').css({display: "none"});
5
- $('#play-audio').css({display: "inline-block"});
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
- $(document).on('click', '#play-audio', function(event) {
9
- event.preventDefault();
10
- pageflow.settings.set('volume', 1);
11
- $('#mute-audio').css({display: "inline-block"});
12
- $('#play-audio').css({display: "none"});
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
  });
data/app/assets/javascripts/scrollytelling/pageflow/navigation/counter.js CHANGED
@@ -1,26 +1,22 @@
1
- pageflow.Counter = {
2
- navigation: function() {
3
- return $('#scrollytelling-pageflow-navigation');
4
- },
5
-
1
+ $.widget('scrollytelling.scrollytellingNavigationCounter', {
6
2
  setActive: function(page) {
7
- this.navigation().find('a').removeClass('active');
8
- this.navigation().find('a[href="#'+page.id+'"]').addClass('active');
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[0]);
8
+ this.setActive(page.element);
13
9
  },
14
10
 
15
- init: function() {
11
+ _create: function() {
16
12
  // Init active dot
17
- this.setActive(pageflow.slides.currentPage()[0]);
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.navigation()).on('click', this.onClick);
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
  });
data/app/assets/javascripts/scrollytelling/pageflow/navigation/invert.js CHANGED
@@ -1,27 +1,20 @@
1
- // Set class .page-invert on body if the active page has the class .invert
2
- pageflow.Invert = {
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[0]);
5
+ this.setInvert(page.element);
8
6
  },
9
7
 
10
- setInvert: function(page_element) {
11
- $(page_element).hasClass('invert') ? this.container.addClass('page-invert') : this.container.removeClass('page-invert');
8
+ setInvert: function(pageElement) {
9
+ this.element.toggleClass('page-invert', pageElement.hasClass('invert'));
12
10
  },
13
11
 
14
- init: function() {
15
-
12
+ _create: function() {
16
13
  // Set inverted class on first load
17
- this.setInvert(pageflow.slides.currentPage()[0]);
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
  });
data/app/assets/javascripts/scrollytelling/pageflow/navigation/sharing.js CHANGED
@@ -1,18 +1,30 @@
1
- $(document).on('click', '#share-fb', function(event) {
2
- event.preventDefault();
3
- var fbSharer = window.open(
4
- "//www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(location.href.replace(location.hash,"")),
5
- "Facebook",
6
- "width=600,height=300"
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
- $(document).on('click', '#share-tw', function(event) {
11
- event.preventDefault();
12
- var summary = $("meta[name='description']").attr('content');
13
- var twSharer = window.open(
14
- "//twitter.com/intent/tweet?text="+encodeURIComponent(summary)+"&via=Scrollytellio&url="+encodeURIComponent(location.href.replace(location.hash,"")),
15
- "Twitter",
16
- "width=600,height=260"
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
  });
data/app/assets/javascripts/scrollytelling/pageflow/navigation/widget_type.js ADDED
@@ -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
+ });
data/app/assets/stylesheets/scrollytelling/pageflow/navigation.scss CHANGED
@@ -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";
data/app/assets/stylesheets/scrollytelling/pageflow/navigation/_navigation.scss CHANGED
@@ -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: fixed;
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: black;
117
+ background: $scrollytelling-tooltip-bg-color;
120
118
  }
121
119
 
122
120
  .scrollytelling-pageflow-navigation-tooltip {
123
-
124
- $bg-color: #fff;
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
  }
data/app/assets/stylesheets/scrollytelling/pageflow/navigation/_options.scss CHANGED
@@ -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
- #mute-audio:before { content: "\f028"; }
75
- #play-audio:before { content: "\f026"; }
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
  }
data/app/views/scrollytelling/pageflow/navigation/_widget.html.erb CHANGED
@@ -1,17 +1,25 @@
1
- <nav id="scrollytelling-pageflow-navigation">
2
- <ul>
3
- <% entry.pages.displayed_in_navigation.each do |page| %>
4
- <li><a href="#<%= page.perma_id %>" data-page-id="<%= page.id %>"><span></span></a><div class="scrollytelling-pageflow-navigation-tooltip"><%= page.configuration["title"] %></div></li>
5
- <% end %>
6
- </ul>
7
- </nav>
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
- <li><a href="#" id="share-tw"></a></li>
11
- <li><a href="#" id="share-fb"></a></li>
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
- <li><a href="#" id="mute-audio"></a></li>
16
- <li><a href="#" id="play-audio" style="display: none;"></a></li>
17
- </ul>
22
+ <ul class="scrollytelling-options">
23
+ <li><a href="#" id="scrollytelling-audio" class="audio-playing"></a></li>
24
+ </ul>
25
+ </div>
data/lib/scrollytelling/pageflow/navigation/version.rb CHANGED
@@ -1,7 +1,7 @@
1
1
  module Scrollytelling
2
2
  module Pageflow
3
3
  module Navigation
4
- VERSION = "1.1.0"
4
+ VERSION = "1.2.0"
5
5
  end
6
6
  end
7
7
  end
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.1.0
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-26 00:00:00.000000000 Z
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