scrollytelling-navigation 1.15.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (35) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +9 -0
  3. data/.rspec +2 -0
  4. data/.ruby-version +1 -0
  5. data/CODE_OF_CONDUCT.md +49 -0
  6. data/Gemfile +4 -0
  7. data/LICENSE.txt +21 -0
  8. data/README.md +64 -0
  9. data/Rakefile +6 -0
  10. data/app/assets/javascripts/scrollytelling/navigation.js +5 -0
  11. data/app/assets/javascripts/scrollytelling/navigation/audio.js +18 -0
  12. data/app/assets/javascripts/scrollytelling/navigation/counter.js +29 -0
  13. data/app/assets/javascripts/scrollytelling/navigation/invert.js +21 -0
  14. data/app/assets/javascripts/scrollytelling/navigation/sharing.js +32 -0
  15. data/app/assets/javascripts/scrollytelling/navigation/widget_type.js +20 -0
  16. data/app/assets/stylesheets/scrollytelling/navigation.scss +43 -0
  17. data/app/assets/stylesheets/scrollytelling/navigation/_entry.scss +24 -0
  18. data/app/assets/stylesheets/scrollytelling/navigation/_home_button.scss +25 -0
  19. data/app/assets/stylesheets/scrollytelling/navigation/_mobile_navigation.scss +115 -0
  20. data/app/assets/stylesheets/scrollytelling/navigation/_mobile_overrides.scss +20 -0
  21. data/app/assets/stylesheets/scrollytelling/navigation/_navigation.scss +121 -0
  22. data/app/assets/stylesheets/scrollytelling/navigation/_options.scss +67 -0
  23. data/app/assets/stylesheets/scrollytelling/navigation/_parent_page.scss +22 -0
  24. data/app/views/scrollytelling/navigation/_widget.html.erb +39 -0
  25. data/bin/console +14 -0
  26. data/bin/setup +8 -0
  27. data/config/locales/en.yml +6 -0
  28. data/config/locales/nl.yml +6 -0
  29. data/lib/scrollytelling/navigation.rb +16 -0
  30. data/lib/scrollytelling/navigation/engine.rb +9 -0
  31. data/lib/scrollytelling/navigation/plugin.rb +11 -0
  32. data/lib/scrollytelling/navigation/version.rb +5 -0
  33. data/lib/scrollytelling/navigation/widget_type.rb +24 -0
  34. data/scrollytelling-navigation.gemspec +27 -0
  35. metadata +153 -0
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 67a8074e428898c26570a9c63e51b20fc43f5463
4
+ data.tar.gz: 358fcca5e8f02b06facbb8ea9ab270fcad5df372
5
+ SHA512:
6
+ metadata.gz: 26179d4944e905e7fbac654c2129fa38958d32ed8454944f41c7304c7250f8e8eb87ebf3c8b94ceb3b2fed9c5a738d520926fd6a39fe94621794bffd18f796bb
7
+ data.tar.gz: 9559f16069fba53d57ed137dd981826e2c04a21e2234183a2d79406444bcad966464f470d2149336d6feb8e789eeee86a2586de1404c4130091b30a5f582582b
@@ -0,0 +1,9 @@
1
+ /.bundle/
2
+ /.yardoc
3
+ /Gemfile.lock
4
+ /_yardoc/
5
+ /coverage/
6
+ /doc/
7
+ /pkg/
8
+ /spec/reports/
9
+ /tmp/
data/.rspec ADDED
@@ -0,0 +1,2 @@
1
+ --format documentation
2
+ --color
@@ -0,0 +1 @@
1
+ 2.4.1
@@ -0,0 +1,49 @@
1
+ # Contributor Code of Conduct
2
+
3
+ As contributors and maintainers of this project, and in the interest of
4
+ fostering an open and welcoming community, we pledge to respect all people who
5
+ contribute through reporting issues, posting feature requests, updating
6
+ documentation, submitting pull requests or patches, and other activities.
7
+
8
+ We are committed to making participation in this project a harassment-free
9
+ experience for everyone, regardless of level of experience, gender, gender
10
+ identity and expression, sexual orientation, disability, personal appearance,
11
+ body size, race, ethnicity, age, religion, or nationality.
12
+
13
+ Examples of unacceptable behavior by participants include:
14
+
15
+ * The use of sexualized language or imagery
16
+ * Personal attacks
17
+ * Trolling or insulting/derogatory comments
18
+ * Public or private harassment
19
+ * Publishing other's private information, such as physical or electronic
20
+ addresses, without explicit permission
21
+ * Other unethical or unprofessional conduct
22
+
23
+ Project maintainers have the right and responsibility to remove, edit, or
24
+ reject comments, commits, code, wiki edits, issues, and other contributions
25
+ that are not aligned to this Code of Conduct, or to ban temporarily or
26
+ permanently any contributor for other behaviors that they deem inappropriate,
27
+ threatening, offensive, or harmful.
28
+
29
+ By adopting this Code of Conduct, project maintainers commit themselves to
30
+ fairly and consistently applying these principles to every aspect of managing
31
+ this project. Project maintainers who do not follow or enforce the Code of
32
+ Conduct may be permanently removed from the project team.
33
+
34
+ This code of conduct applies both within project spaces and in public spaces
35
+ when an individual is representing the project or its community.
36
+
37
+ Instances of abusive, harassing, or otherwise unacceptable behavior may be
38
+ reported by contacting a project maintainer at joost@spacebabies.nl. All
39
+ complaints will be reviewed and investigated and will result in a response that
40
+ is deemed necessary and appropriate to the circumstances. Maintainers are
41
+ obligated to maintain confidentiality with regard to the reporter of an
42
+ incident.
43
+
44
+ This Code of Conduct is adapted from the [Contributor Covenant][homepage],
45
+ version 1.3.0, available at
46
+ [http://contributor-covenant.org/version/1/3/0/][version]
47
+
48
+ [homepage]: http://contributor-covenant.org
49
+ [version]: http://contributor-covenant.org/version/1/3/0/
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in scrollytelling-navigation.gemspec
4
+ gemspec
@@ -0,0 +1,21 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2016 Joost Baaij
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+ THE SOFTWARE.
@@ -0,0 +1,64 @@
1
+ # Scrollytelling::Navigation
2
+
3
+ This [Pageflow](https://github.com/codevise/pageflow) plugin replaces the built-in navigation with the Scrollytelling version.
4
+
5
+ The Scrollytelling navigation uses dots to show progress instead of thumbnails.
6
+
7
+ ### This is the 1-13-stable branch
8
+
9
+ This branch targets `gem 'pageflow', '~> 0.11.0'`.
10
+
11
+ ## How does it look?
12
+
13
+ See the various stories on [our homepage](https://www.scrollytelling.io/).
14
+
15
+ ## Installation
16
+
17
+ Add this line to your application's Gemfile:
18
+
19
+ ```ruby
20
+ gem 'scrollytelling-navigation'
21
+ ```
22
+
23
+ Bundle the plugin with your application by typing this on the command line:
24
+
25
+ $ bundle
26
+
27
+ ## Usage
28
+
29
+ Register the plugin in the Pageflow initializer and then add it to your asset pipeline.
30
+
31
+ ```
32
+ # config/initializers/pageflow.rb
33
+ config.plugin(Scrollytelling::Navigation::Plugin.new)
34
+
35
+ # app/assets/javascripts/pageflow/application.js
36
+ //= require scrollytelling/navigation
37
+
38
+ # app/assets/stylesheets/pageflow/application.css.scss
39
+ @import "scrollytelling/navigation";
40
+ ```
41
+
42
+ Furthermore after installing any Pageflow plugin it's a good idea to change your asset version. This will invalidate all server-side cache, most notably the cache that `i18n-js` uses to render the editor UI.
43
+
44
+ ```
45
+ # config/initializers/assets.rb
46
+ Rails.application.config.assets.version = 'x.x.x'
47
+ ```
48
+
49
+ After all that, restart your application server.
50
+
51
+ ## Development
52
+
53
+ After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
54
+
55
+ To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
56
+
57
+ ## Contributing
58
+
59
+ Bug reports and pull requests are welcome on GitHub at https://github.com/scrollytelling/scrollytelling-navigation. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
60
+
61
+
62
+ ## License
63
+
64
+ The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
@@ -0,0 +1,6 @@
1
+ require "bundler/gem_tasks"
2
+ require "rspec/core/rake_task"
3
+
4
+ RSpec::Core::RakeTask.new(:spec)
5
+
6
+ task :default => :spec
@@ -0,0 +1,5 @@
1
+ //= require ./navigation/invert
2
+ //= require ./navigation/counter
3
+ //= require ./navigation/audio
4
+ //= require ./navigation/sharing
5
+ //= require ./navigation/widget_type
@@ -0,0 +1,18 @@
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);
9
+
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
+ }
18
+ });
@@ -0,0 +1,29 @@
1
+ $.widget('scrollytelling.scrollytellingNavigationCounter', {
2
+ setActive: function(page) {
3
+ this.element.find('a').removeClass('active');
4
+ this.element.find('a[href="#' + page.attr('id') + '"]').addClass('active');
5
+ },
6
+
7
+ updateActive: function(page) {
8
+ this.setActive(page.element);
9
+ },
10
+
11
+ _create: function() {
12
+ // Init active dot
13
+ this.setActive(pageflow.slides.currentPage());
14
+
15
+ // Listen to page changes
16
+ pageflow.events.on('page:change', this.updateActive.bind(this));
17
+
18
+ // Set click handler
19
+ $('nav a', this.element).on('click', this.onClick);
20
+ },
21
+
22
+ onClick: function(event) {
23
+ event.preventDefault();
24
+
25
+ var page_id = $(this).attr('data-page-id');
26
+
27
+ pageflow.slides.goToById(page_id);
28
+ }
29
+ });
@@ -0,0 +1,21 @@
1
+ // Set class .page-invert on widget element if the active page has the
2
+ // class .invert
3
+ $.widget('scrollytelling.scrollytellingNavigationInvert', {
4
+ changeInvert: function(page) {
5
+ this.setInvert(page.element);
6
+ },
7
+
8
+ setInvert: function(pageElement) {
9
+ this.element.toggleClass('page-invert', pageElement.hasClass('invert'));
10
+ $('.navigation_mobile').toggleClass('page-invert', pageElement.hasClass('invert'));
11
+ },
12
+
13
+ _create: function() {
14
+ // Set inverted class on first load
15
+ this.setInvert(pageflow.slides.currentPage());
16
+
17
+ // Listen to page changes
18
+ pageflow.events.on('page:change', this.changeInvert.bind(this));
19
+
20
+ }
21
+ });
@@ -0,0 +1,32 @@
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
+ }
14
+ });
15
+
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
+ window.scrollytelling = window.scrollytelling || {};
25
+ var twitter_via = window.scrollytelling.twitter_via || 'scrollytelling';
26
+ var twSharer = window.open(
27
+ "//twitter.com/intent/tweet?text="+encodeURIComponent(summary)+"&via="+twitter_via+"&url="+encodeURIComponent(location.href.replace(location.hash,"")),
28
+ "Twitter",
29
+ "width=600,height=260"
30
+ )
31
+ }
32
+ });
@@ -0,0 +1,20 @@
1
+ pageflow.widgetTypes.register('scrollytelling_navigation', {
2
+ enhance: function(element) {
3
+ element.scrollytellingNavigationCounter();
4
+ element.scrollytellingNavigationInvert();
5
+ element.facebookSharing();
6
+ element.twitterSharing();
7
+ element.audioControl();
8
+
9
+ // Enable the parent page globally (Pageflow enables it only in mobile nav).
10
+ $('.parent_page', element).parentPageButton({
11
+ visibleClass: 'is_visible'
12
+ });
13
+
14
+ // hacky: if the entry URL matches 'onsite', push onsite class on the navigation.
15
+ // this allows us to hide the sharing widgets for onsite productions.
16
+ if($('head link[href*="onsite"]').length > 0) {
17
+ element.addClass('onsite');
18
+ }
19
+ }
20
+ });
@@ -0,0 +1,43 @@
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
+ $scrollytelling-fa-size: 30px !default;
6
+ $scrollytelling-nav-color: white !default;
7
+ $scrollytelling-invert-nav-color: black !default;
8
+
9
+ ul.scrolly-nav-box {
10
+ position: absolute;
11
+ list-style-type: none;
12
+ z-index: 5;
13
+ padding: 0;
14
+ margin: 0;
15
+
16
+ a {
17
+ text-decoration: none;
18
+ }
19
+ }
20
+
21
+ @mixin scrollytelling-indicator {
22
+ margin: 0;
23
+ cursor: pointer;
24
+ color: $scrollytelling-nav-color;
25
+ font-size: 16px;
26
+ text-transform: uppercase;
27
+ font-family: sourcesanspro;
28
+ letter-spacing: 1px;
29
+ line-height: $scrollytelling-fa-size;
30
+ height: $scrollytelling-sharing-size;
31
+
32
+ @include desktop {
33
+ letter-spacing: 3px;
34
+ }
35
+ }
36
+
37
+ @import "./navigation/navigation";
38
+ @import "./navigation/mobile_navigation";
39
+ @import "./navigation/options";
40
+ @import "./navigation/entry";
41
+ @import "./navigation/parent_page";
42
+ @import "./navigation/home_button";
43
+ @import "./navigation/mobile_overrides";
@@ -0,0 +1,24 @@
1
+ .entry {
2
+ .indicator {
3
+ @include scrollytelling-indicator;
4
+ left: 100px;
5
+ bottom: 20px;
6
+ }
7
+
8
+ .indicator.invert {
9
+ color: $scrollytelling-invert-nav-color;
10
+ }
11
+
12
+ .scroll_indicator:before {
13
+ content: "\f0ab";
14
+ font-family: "FontAwesome";
15
+ font-size: 16px;
16
+ margin-right: .25em;
17
+ background-image: none;
18
+ }
19
+
20
+ .scroll_indicator.invert:before {
21
+ color: $scrollytelling-invert-nav-color;
22
+ background-image: none;
23
+ }
24
+ }
@@ -0,0 +1,25 @@
1
+ ul.scrollytelling-home_button {
2
+ @include scrollytelling-indicator;
3
+ left: 100px;
4
+ top: 20px;
5
+
6
+ a {
7
+ color: $scrollytelling-nav-color;
8
+
9
+ .page-invert & {
10
+ color: $scrollytelling-invert-nav-color;
11
+ }
12
+ }
13
+
14
+ a:before {
15
+ content: "\f0a8";
16
+ font-family: "FontAwesome";
17
+ font-size: 16px;
18
+ margin-right: .25em;
19
+ background-image: none;
20
+
21
+ .page-invert & {
22
+ color: $scrollytelling-invert-nav-color;
23
+ }
24
+ }
25
+ }
@@ -0,0 +1,115 @@
1
+ .navigation_mobile {
2
+ .parent_page {
3
+ display: none; /* hide here because we include it in all nav */
4
+ }
5
+
6
+ .menu {
7
+ width: auto;
8
+ height: auto;
9
+ right: 20px;
10
+
11
+ &.index:before {
12
+ font-family: "FontAwesome";
13
+ content: "\f0c9";
14
+ font-size: 20px;
15
+ }
16
+
17
+ &.sharing:before {
18
+ font-family: "FontAwesome";
19
+ content: "\f1e0";
20
+ font-size: $scrollytelling-fa-size;
21
+ }
22
+
23
+ &.imprint:before {
24
+ font-family: "FontAwesome";
25
+ content: "\f05a";
26
+ font-size: $scrollytelling-fa-size;
27
+ }
28
+ }
29
+
30
+ .imprint_mobile:after,
31
+ .menu.imprint,
32
+ .menu.index,
33
+ .menu.sharing,
34
+ .overview_mobile:after,
35
+ .sharing_mobile:after {
36
+ background-image: none;
37
+ }
38
+
39
+ .imprint_mobile .credits a,
40
+ .overview_mobile .credits a,
41
+ .sharing_mobile .credits a {
42
+ margin-top: 0;
43
+ color: inherit;
44
+ display: inline;
45
+ }
46
+
47
+ &.active {
48
+ .sharing_mobile {
49
+ a.share.facebook {
50
+ p:before {
51
+ font-family: "FontAwesome";
52
+ content: "\f082";
53
+ margin-right: 12px;
54
+ }
55
+ }
56
+
57
+ a.share.twitter {
58
+ p:before {
59
+ font-family: "FontAwesome";
60
+ content: "\f081";
61
+ margin-right: 12px;
62
+ }
63
+ }
64
+
65
+ a.share.whatsapp {
66
+ img {
67
+ width: 18px;
68
+ height: 18px;
69
+ border: none;
70
+ float: left;
71
+ margin-right: 10px;
72
+ padding-top: 4px;
73
+ }
74
+ }
75
+
76
+ li {
77
+ background-color: darkgrey;
78
+ font-family: sourcesanspro;
79
+
80
+ > a {
81
+ color: white;
82
+ padding-top: 10px;
83
+ height: 50px;
84
+ margin-left: 24px;
85
+ }
86
+
87
+ > a:before {
88
+ display: none;
89
+ }
90
+
91
+ p {
92
+ margin: 0;
93
+ }
94
+ }
95
+ }
96
+
97
+ .menu.index {
98
+ &:before {
99
+ content: "\f00d";
100
+ }
101
+ }
102
+ }
103
+
104
+ &.page-invert {
105
+ .menu.index:before {
106
+ color: $scrollytelling-invert-nav-color;
107
+ }
108
+ }
109
+
110
+ &.page-invert.active {
111
+ .menu.index:before {
112
+ color: white;
113
+ }
114
+ }
115
+ }
@@ -0,0 +1,20 @@
1
+ @media screen and (max-width: 900px) {
2
+ #scrollytelling-navigation,
3
+ ul.scrollytelling-sharing {
4
+ display: none;
5
+ }
6
+
7
+ ul.scrollytelling-home_button {
8
+ top: 10px;
9
+ left: 20px;
10
+ }
11
+
12
+ ul.scrollytelling-options {
13
+ bottom: 20px;
14
+ right: 10px;
15
+ }
16
+
17
+ .entry .indicator {
18
+ left: 20px;
19
+ }
20
+ }
@@ -0,0 +1,121 @@
1
+ #scrollytelling-navigation {
2
+ right: 70px;
3
+ position: absolute;
4
+ z-index: 100;
5
+ top: 50%;
6
+ opacity: 1;
7
+ transform: translateY(-50%);
8
+
9
+ ul {
10
+ margin: 0;
11
+ padding: 0;
12
+ list-style: none;
13
+ }
14
+
15
+ li {
16
+ display: block;
17
+ width: 25px;
18
+ height: 25px;
19
+ margin: 2px 5px;
20
+ position: relative;
21
+ }
22
+
23
+ li:hover {
24
+ a span {
25
+ width: 10px;
26
+ height: 10px;
27
+ margin: -5px 0 0 -5px;
28
+ }
29
+
30
+ .scrollytelling-navigation-tooltip {
31
+ transition: opacity 0.2s ease-in;
32
+ width: auto;
33
+ opacity: 1;
34
+ display: block;
35
+ white-space: nowrap;
36
+ overflow: hidden;
37
+ text-overflow: ellipsis;
38
+ }
39
+ }
40
+
41
+ a {
42
+ display: block;
43
+ position: relative;
44
+ z-index: 1;
45
+ width: 100%;
46
+ height: 100%;
47
+ cursor: pointer;
48
+ text-decoration: none;
49
+
50
+ span {
51
+ border-radius: 50%;
52
+ position: absolute;
53
+ z-index: 1;
54
+ height: 4px;
55
+ width: 4px;
56
+ border: 0;
57
+ background: $scrollytelling-nav-color;
58
+ left: 50%;
59
+ top: 50%;
60
+ margin: -2px 0 0 -2px;
61
+ transition: all 0.1s ease-in-out;
62
+ }
63
+
64
+ &.active span {
65
+ height: 12px;
66
+ width: 12px;
67
+ margin: -6px 0 0 -6px;
68
+ border-radius: 100%;
69
+ }
70
+ }
71
+
72
+ .scrollytelling-navigation-tooltip {
73
+ right: 30px;
74
+ position: absolute;
75
+ top: -1px;
76
+ color: $scrollytelling-nav-color;
77
+ font-size: 14px;
78
+ white-space: nowrap;
79
+ max-width: 220px;
80
+ opacity: 0;
81
+ width: 0;
82
+ cursor: pointer;
83
+ line-height: 1;
84
+ display: none;
85
+
86
+ background-color: $scrollytelling-tooltip-bg-color;
87
+ padding: 6px;
88
+ padding-right: 20px;
89
+ border-radius: 3px;
90
+
91
+ &:after {
92
+ left: 100%;
93
+ top: 50%;
94
+ border: solid transparent;
95
+ content: " ";
96
+ height: 0;
97
+ width: 0;
98
+ position: absolute;
99
+ pointer-events: none;
100
+ border-color: rgba(255, 255, 255, 0);
101
+ border-left-color: $scrollytelling-tooltip-bg-color;
102
+ border-width: 5px;
103
+ margin-top: -5px;
104
+ }
105
+ }
106
+
107
+ .page-invert & {
108
+ a span {
109
+ background: $scrollytelling-tooltip-bg-color;
110
+ }
111
+
112
+ .scrollytelling-navigation-tooltip {
113
+ color: $scrollytelling-tooltip-bg-color;
114
+ background-color: $scrollytelling-invert-tooltip-bg-color;
115
+
116
+ &:after {
117
+ border-left-color: $scrollytelling-invert-tooltip-bg-color;
118
+ }
119
+ }
120
+ }
121
+ }
@@ -0,0 +1,67 @@
1
+ ul.scrollytelling-sharing,
2
+ ul.scrollytelling-options {
3
+
4
+ a {
5
+ width: $scrollytelling-sharing-size;
6
+ height: $scrollytelling-sharing-size;
7
+
8
+ text-decoration: none;
9
+ position: relative;
10
+ display: inline-block;
11
+
12
+ font-family: "FontAwesome";
13
+ font-size: inherit;
14
+ text-rendering: auto;
15
+ -webkit-font-smoothing: antialiased;
16
+ -moz-osx-font-smoothing: grayscale;
17
+
18
+ opacity: 0.8;
19
+ transition: opacity 0.2s;
20
+
21
+ &:hover {
22
+ opacity: 1;
23
+ }
24
+
25
+ &:before {
26
+ color: #fff;
27
+ font-size: 28px;
28
+ line-height: $scrollytelling-sharing-size;
29
+ width: $scrollytelling-sharing-size;
30
+ text-align: center;
31
+ position: absolute;
32
+ left: 0;
33
+
34
+ .page-invert & {
35
+ color: $scrollytelling-invert-nav-color;
36
+ }
37
+ }
38
+ }
39
+ }
40
+
41
+ ul.scrollytelling-sharing {
42
+ top: 20px;
43
+ right: 70px;
44
+ width: 200px;
45
+ max-width: 80%;
46
+ height: 40px;
47
+ text-align: right;
48
+
49
+ li {
50
+ display: inline;
51
+ }
52
+
53
+ #share-tw:before { content: "\f099"; }
54
+ #share-fb:before { content: "\f082"; }
55
+ }
56
+
57
+ .onsite ul.scrollytelling-sharing {
58
+ display: none;
59
+ }
60
+
61
+ ul.scrollytelling-options {
62
+ bottom: 20px;
63
+ right: 70px;
64
+
65
+ .audio-playing:before { content: "\f028"; }
66
+ .audio-muted:before { content: "\f026"; }
67
+ }
@@ -0,0 +1,22 @@
1
+ .parent_page {
2
+ @include scrollytelling-indicator;
3
+ left: 100px;
4
+ bottom: 70px;
5
+ opacity: 0;
6
+ transition: opacity 1s ease;
7
+
8
+ &:before {
9
+ content: "\f0a8";
10
+ font-family: "FontAwesome";
11
+ margin-right: .5em;
12
+ }
13
+
14
+ &.is_visible {
15
+ opacity: 1;
16
+ transition: opacity 0.5s ease 2.5s;
17
+ }
18
+ }
19
+
20
+ .page-invert .parent_page {
21
+ color: $scrollytelling-invert-nav-color;
22
+ }
@@ -0,0 +1,39 @@
1
+ <div data-widget="scrollytelling_navigation">
2
+
3
+ <nav id="scrollytelling-navigation">
4
+ <ul>
5
+ <% entry.pages.
6
+ displayed_in_navigation.
7
+ limit(25).
8
+ each do |page| %>
9
+ <li>
10
+ <a href="#<%= page.perma_id %>" data-page-id="<%= page.id %>">
11
+ <span></span>
12
+ </a>
13
+ <% if page.configuration["title"].presence || page.configuration["subtitle"].presence %>
14
+ <div class="scrollytelling-navigation-tooltip">
15
+ <%= page.configuration["title"].presence || page.configuration["subtitle"].presence %>
16
+ </div>
17
+ <% end %>
18
+ </li>
19
+ <% end %>
20
+ </ul>
21
+ </nav>
22
+
23
+ <% if entry.home_button.enabled? %>
24
+ <ul class="scrollytelling-home_button scrolly-nav-box">
25
+ <li><%= link_to t('scrollytelling.navigation.home_link'),
26
+ entry.home_button.url,
27
+ title: t('scrollytelling.navigation.home_title', url: entry.home_button.url) %></li>
28
+ </ul>
29
+ <% end %>
30
+
31
+ <ul class="scrollytelling-sharing scrolly-nav-box">
32
+ <li><a href="#" id="share-tw"></a></li>
33
+ <li><a href="#" id="share-fb"></a></li>
34
+ </ul>
35
+
36
+ <ul class="scrollytelling-options scrolly-nav-box">
37
+ <li><a href="#" id="scrollytelling-audio" class="audio-playing"></a></li>
38
+ </ul>
39
+ </div>
@@ -0,0 +1,14 @@
1
+ #!/usr/bin/env ruby
2
+
3
+ require "bundler/setup"
4
+ require "scrollytelling/navigation"
5
+
6
+ # You can add fixtures and/or initialization code here to make experimenting
7
+ # with your gem easier. You can also use a different console, if you like.
8
+
9
+ # (If you use this, don't forget to add pry to your Gemfile!)
10
+ # require "pry"
11
+ # Pry.start
12
+
13
+ require "irb"
14
+ IRB.start
@@ -0,0 +1,8 @@
1
+ #!/usr/bin/env bash
2
+ set -euo pipefail
3
+ IFS=$'\n\t'
4
+ set -vx
5
+
6
+ bundle install
7
+
8
+ # Do any other automated setup that you need to do here
@@ -0,0 +1,6 @@
1
+ en:
2
+ scrollytelling:
3
+ navigation:
4
+ home_link: ' Home'
5
+ home_title: 'That will take you to %{url}'
6
+ widget_type_name: Scrollytelling dots with tooltips
@@ -0,0 +1,6 @@
1
+ nl:
2
+ scrollytelling:
3
+ navigation:
4
+ home_link: ' Home'
5
+ home_title: 'Je gaat dan naar %{url}'
6
+ widget_type_name: Scrollytelling stippen met tooltips
@@ -0,0 +1,16 @@
1
+ require "scrollytelling/navigation/plugin"
2
+ require "scrollytelling/navigation/widget_type"
3
+ require "scrollytelling/navigation/engine"
4
+ require "scrollytelling/navigation/version"
5
+
6
+ module Scrollytelling
7
+ module Navigation
8
+ def self.widget_type
9
+ WidgetType.new
10
+ end
11
+
12
+ def self.plugin
13
+ Plugin.new
14
+ end
15
+ end
16
+ end
@@ -0,0 +1,9 @@
1
+ require 'rails/engine'
2
+
3
+ module Scrollytelling
4
+ module Navigation
5
+ class Engine < ::Rails::Engine
6
+ isolate_namespace Scrollytelling::Navigation
7
+ end
8
+ end
9
+ end
@@ -0,0 +1,11 @@
1
+ require 'pageflow/plugin'
2
+
3
+ module Scrollytelling
4
+ module Navigation
5
+ class Plugin < ::Pageflow::Plugin
6
+ def configure(config)
7
+ config.widget_types.register(Scrollytelling::Navigation.widget_type, default: true)
8
+ end
9
+ end
10
+ end
11
+ end
@@ -0,0 +1,5 @@
1
+ module Scrollytelling
2
+ module Navigation
3
+ VERSION = "1.15.0"
4
+ end
5
+ end
@@ -0,0 +1,24 @@
1
+ require 'pageflow/widget_type'
2
+
3
+ module Scrollytelling
4
+ module Navigation
5
+ class WidgetType < ::Pageflow::WidgetType
6
+ def name
7
+ 'scrollytelling_navigation'
8
+ end
9
+
10
+ def roles
11
+ ['navigation']
12
+ end
13
+
14
+ def render(template, entry)
15
+ template.render(
16
+ partial: 'scrollytelling/pageflow/navigation/widget.html.erb',
17
+ locals: {
18
+ entry: entry
19
+ }
20
+ )
21
+ end
22
+ end
23
+ end
24
+ end
@@ -0,0 +1,27 @@
1
+ # coding: utf-8
2
+ lib = File.expand_path('../lib', __FILE__)
3
+ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
4
+ require 'scrollytelling/navigation/version'
5
+
6
+ Gem::Specification.new do |spec|
7
+ spec.name = "scrollytelling-navigation"
8
+ spec.version = Scrollytelling::Navigation::VERSION
9
+ spec.authors = ["Joost Baaij"]
10
+ spec.email = ["joost@spacebabies.nl"]
11
+
12
+ spec.summary = "Scrollytelling “dots” navigation for Pageflow"
13
+ spec.homepage = "https://github.com/scrollytelling/scrollytelling-navigation"
14
+ spec.license = "MIT"
15
+
16
+ spec.files = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
17
+ spec.bindir = "exe"
18
+ spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
19
+ spec.require_paths = ["lib"]
20
+
21
+ spec.add_runtime_dependency 'pageflow', '~> 0.11.0'
22
+ spec.add_runtime_dependency 'rails', '>= 3.0', '< 5.0'
23
+
24
+ spec.add_development_dependency "bundler", "~> 1.11"
25
+ spec.add_development_dependency "rake", "~> 10.0"
26
+ spec.add_development_dependency "rspec", "~> 3.0"
27
+ end
metadata ADDED
@@ -0,0 +1,153 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: scrollytelling-navigation
3
+ version: !ruby/object:Gem::Version
4
+ version: 1.15.0
5
+ platform: ruby
6
+ authors:
7
+ - Joost Baaij
8
+ autorequire:
9
+ bindir: exe
10
+ cert_chain: []
11
+ date: 2017-08-08 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: pageflow
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - "~>"
18
+ - !ruby/object:Gem::Version
19
+ version: 0.11.0
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - "~>"
25
+ - !ruby/object:Gem::Version
26
+ version: 0.11.0
27
+ - !ruby/object:Gem::Dependency
28
+ name: rails
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - ">="
32
+ - !ruby/object:Gem::Version
33
+ version: '3.0'
34
+ - - "<"
35
+ - !ruby/object:Gem::Version
36
+ version: '5.0'
37
+ type: :runtime
38
+ prerelease: false
39
+ version_requirements: !ruby/object:Gem::Requirement
40
+ requirements:
41
+ - - ">="
42
+ - !ruby/object:Gem::Version
43
+ version: '3.0'
44
+ - - "<"
45
+ - !ruby/object:Gem::Version
46
+ version: '5.0'
47
+ - !ruby/object:Gem::Dependency
48
+ name: bundler
49
+ requirement: !ruby/object:Gem::Requirement
50
+ requirements:
51
+ - - "~>"
52
+ - !ruby/object:Gem::Version
53
+ version: '1.11'
54
+ type: :development
55
+ prerelease: false
56
+ version_requirements: !ruby/object:Gem::Requirement
57
+ requirements:
58
+ - - "~>"
59
+ - !ruby/object:Gem::Version
60
+ version: '1.11'
61
+ - !ruby/object:Gem::Dependency
62
+ name: rake
63
+ requirement: !ruby/object:Gem::Requirement
64
+ requirements:
65
+ - - "~>"
66
+ - !ruby/object:Gem::Version
67
+ version: '10.0'
68
+ type: :development
69
+ prerelease: false
70
+ version_requirements: !ruby/object:Gem::Requirement
71
+ requirements:
72
+ - - "~>"
73
+ - !ruby/object:Gem::Version
74
+ version: '10.0'
75
+ - !ruby/object:Gem::Dependency
76
+ name: rspec
77
+ requirement: !ruby/object:Gem::Requirement
78
+ requirements:
79
+ - - "~>"
80
+ - !ruby/object:Gem::Version
81
+ version: '3.0'
82
+ type: :development
83
+ prerelease: false
84
+ version_requirements: !ruby/object:Gem::Requirement
85
+ requirements:
86
+ - - "~>"
87
+ - !ruby/object:Gem::Version
88
+ version: '3.0'
89
+ description:
90
+ email:
91
+ - joost@spacebabies.nl
92
+ executables: []
93
+ extensions: []
94
+ extra_rdoc_files: []
95
+ files:
96
+ - ".gitignore"
97
+ - ".rspec"
98
+ - ".ruby-version"
99
+ - CODE_OF_CONDUCT.md
100
+ - Gemfile
101
+ - LICENSE.txt
102
+ - README.md
103
+ - Rakefile
104
+ - app/assets/javascripts/scrollytelling/navigation.js
105
+ - app/assets/javascripts/scrollytelling/navigation/audio.js
106
+ - app/assets/javascripts/scrollytelling/navigation/counter.js
107
+ - app/assets/javascripts/scrollytelling/navigation/invert.js
108
+ - app/assets/javascripts/scrollytelling/navigation/sharing.js
109
+ - app/assets/javascripts/scrollytelling/navigation/widget_type.js
110
+ - app/assets/stylesheets/scrollytelling/navigation.scss
111
+ - app/assets/stylesheets/scrollytelling/navigation/_entry.scss
112
+ - app/assets/stylesheets/scrollytelling/navigation/_home_button.scss
113
+ - app/assets/stylesheets/scrollytelling/navigation/_mobile_navigation.scss
114
+ - app/assets/stylesheets/scrollytelling/navigation/_mobile_overrides.scss
115
+ - app/assets/stylesheets/scrollytelling/navigation/_navigation.scss
116
+ - app/assets/stylesheets/scrollytelling/navigation/_options.scss
117
+ - app/assets/stylesheets/scrollytelling/navigation/_parent_page.scss
118
+ - app/views/scrollytelling/navigation/_widget.html.erb
119
+ - bin/console
120
+ - bin/setup
121
+ - config/locales/en.yml
122
+ - config/locales/nl.yml
123
+ - lib/scrollytelling/navigation.rb
124
+ - lib/scrollytelling/navigation/engine.rb
125
+ - lib/scrollytelling/navigation/plugin.rb
126
+ - lib/scrollytelling/navigation/version.rb
127
+ - lib/scrollytelling/navigation/widget_type.rb
128
+ - scrollytelling-navigation.gemspec
129
+ homepage: https://github.com/scrollytelling/scrollytelling-navigation
130
+ licenses:
131
+ - MIT
132
+ metadata: {}
133
+ post_install_message:
134
+ rdoc_options: []
135
+ require_paths:
136
+ - lib
137
+ required_ruby_version: !ruby/object:Gem::Requirement
138
+ requirements:
139
+ - - ">="
140
+ - !ruby/object:Gem::Version
141
+ version: '0'
142
+ required_rubygems_version: !ruby/object:Gem::Requirement
143
+ requirements:
144
+ - - ">="
145
+ - !ruby/object:Gem::Version
146
+ version: '0'
147
+ requirements: []
148
+ rubyforge_project:
149
+ rubygems_version: 2.6.11
150
+ signing_key:
151
+ specification_version: 4
152
+ summary: Scrollytelling “dots” navigation for Pageflow
153
+ test_files: []