scrollytelling-navigation 1.15.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +9 -0
- data/.rspec +2 -0
- data/.ruby-version +1 -0
- data/CODE_OF_CONDUCT.md +49 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +21 -0
- data/README.md +64 -0
- data/Rakefile +6 -0
- data/app/assets/javascripts/scrollytelling/navigation.js +5 -0
- data/app/assets/javascripts/scrollytelling/navigation/audio.js +18 -0
- data/app/assets/javascripts/scrollytelling/navigation/counter.js +29 -0
- data/app/assets/javascripts/scrollytelling/navigation/invert.js +21 -0
- data/app/assets/javascripts/scrollytelling/navigation/sharing.js +32 -0
- data/app/assets/javascripts/scrollytelling/navigation/widget_type.js +20 -0
- data/app/assets/stylesheets/scrollytelling/navigation.scss +43 -0
- data/app/assets/stylesheets/scrollytelling/navigation/_entry.scss +24 -0
- data/app/assets/stylesheets/scrollytelling/navigation/_home_button.scss +25 -0
- data/app/assets/stylesheets/scrollytelling/navigation/_mobile_navigation.scss +115 -0
- data/app/assets/stylesheets/scrollytelling/navigation/_mobile_overrides.scss +20 -0
- data/app/assets/stylesheets/scrollytelling/navigation/_navigation.scss +121 -0
- data/app/assets/stylesheets/scrollytelling/navigation/_options.scss +67 -0
- data/app/assets/stylesheets/scrollytelling/navigation/_parent_page.scss +22 -0
- data/app/views/scrollytelling/navigation/_widget.html.erb +39 -0
- data/bin/console +14 -0
- data/bin/setup +8 -0
- data/config/locales/en.yml +6 -0
- data/config/locales/nl.yml +6 -0
- data/lib/scrollytelling/navigation.rb +16 -0
- data/lib/scrollytelling/navigation/engine.rb +9 -0
- data/lib/scrollytelling/navigation/plugin.rb +11 -0
- data/lib/scrollytelling/navigation/version.rb +5 -0
- data/lib/scrollytelling/navigation/widget_type.rb +24 -0
- data/scrollytelling-navigation.gemspec +27 -0
- metadata +153 -0
checksums.yaml
ADDED
@@ -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
|
data/.gitignore
ADDED
data/.rspec
ADDED
data/.ruby-version
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
2.4.1
|
data/CODE_OF_CONDUCT.md
ADDED
@@ -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
data/LICENSE.txt
ADDED
@@ -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.
|
data/README.md
ADDED
@@ -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).
|
data/Rakefile
ADDED
@@ -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>
|
data/bin/console
ADDED
@@ -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
|
data/bin/setup
ADDED
@@ -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,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: []
|