pageflow-before-after 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +15 -0
- data/.gitignore +19 -0
- data/Gemfile +10 -0
- data/README.md +31 -0
- data/Rakefile +7 -0
- data/config/locales/de.yml +9 -0
- data/lib/pageflow-before-after.rb +6 -0
- data/lib/pageflow/before_after/engine.rb +12 -0
- data/lib/pageflow/before_after/page_type.rb +7 -0
- data/page_types/pageflow/before_after.css.scss +89 -0
- data/page_types/pageflow/before_after.js +72 -0
- data/page_types/pageflow/before_after/before_after_icon.png +0 -0
- data/page_types/pageflow/before_after/draghandle.png +0 -0
- data/page_types/pageflow/before_after/editor.js +34 -0
- data/page_types/pageflow/before_after/editor/before_after_embedded_view.js +31 -0
- data/page_types/pageflow/before_after/lt-small.png +0 -0
- data/page_types/pageflow/before_after/page.html.erb +53 -0
- data/page_types/pageflow/before_after/rt-small.png +0 -0
- data/page_types/pageflow/before_after/widget.js +173 -0
- data/page_types/pageflow/before_after_pictogram.png +0 -0
- data/page_types/pageflow/before_after_pictogram_small.png +0 -0
- data/page_types/pageflow/before_after_sprite.png +0 -0
- data/page_types/pageflow/ov-before_after.png +0 -0
- data/pageflow-before-after.gemspec +22 -0
- metadata +95 -0
checksums.yaml
ADDED
@@ -0,0 +1,15 @@
|
|
1
|
+
---
|
2
|
+
!binary "U0hBMQ==":
|
3
|
+
metadata.gz: !binary |-
|
4
|
+
MTZiN2NkNDNiOTZhMzE3OGY3NDdiYTEyZTFkMTg5NjFiZmRkZGQzOA==
|
5
|
+
data.tar.gz: !binary |-
|
6
|
+
MmFkOTU5YTQyMzM1OTk5YjZmNjRmNTFiODM0YTY1YjNmY2M5ZTE4Mw==
|
7
|
+
SHA512:
|
8
|
+
metadata.gz: !binary |-
|
9
|
+
ZjEyYjBmMmY3MGY0NmY0OGEwNzgzNmM5YTI0YmNhYzFmY2ZjY2ZjNDBlY2Rh
|
10
|
+
OGIwZTE0OWU0OGE1YWViOTk4YTNlNzIzYWQ3ZTE5N2M0Zjk3YTRkMDc3YzVi
|
11
|
+
OTgwNGU0NjgyMzBkMDcwMjZkNjc3ZTljZWQ1OWY1MDEzNmU0ODU=
|
12
|
+
data.tar.gz: !binary |-
|
13
|
+
M2YyOTkzMjE4NTlmMzNlYzZkNjc0ZTFhZjllNjkxM2FmNDVhMjdhOWQzZDAy
|
14
|
+
ODJjMjk0ZGQwODk3YmUwZDQzYWQxZGVlNGRjZDEyZDYyYjViNjQxNzEwMWQ3
|
15
|
+
YjYyODAzNWI4ZWE0ZjI0MWQzZWVjMjVkM2ExYjNiYjhhZmEwOTY=
|
data/.gitignore
ADDED
data/Gemfile
ADDED
@@ -0,0 +1,10 @@
|
|
1
|
+
source 'https://rubygems.org'
|
2
|
+
|
3
|
+
# Specify your gem's dependencies in chart.gemspec
|
4
|
+
gemspec
|
5
|
+
|
6
|
+
# Rails 4 compat
|
7
|
+
gem 'activeadmin', :git => 'https://github.com/codevise/active_admin.git', :branch => 'rails4'
|
8
|
+
gem 'ransack'
|
9
|
+
gem 'inherited_resources', '1.4.1'
|
10
|
+
gem 'formtastic', '2.3.0.rc2'
|
data/README.md
ADDED
@@ -0,0 +1,31 @@
|
|
1
|
+
# Pageflow Before After
|
2
|
+
|
3
|
+
Page type showing before/after image sliders (Digit style).
|
4
|
+
|
5
|
+
## Installation
|
6
|
+
|
7
|
+
Add this line to your application's Gemfile:
|
8
|
+
|
9
|
+
# Gemfile
|
10
|
+
gem 'pagflow-before-after'
|
11
|
+
|
12
|
+
Register the page type:
|
13
|
+
|
14
|
+
# config/initializers/pageflow.rb
|
15
|
+
Pageflow.configure do |config|
|
16
|
+
config.register_page_type(Pageflow::BeforeAfter::PageType.new)
|
17
|
+
end
|
18
|
+
|
19
|
+
Include javascripts and stylesheets:
|
20
|
+
|
21
|
+
# app/assets/javascripts/application.js
|
22
|
+
//= require "pageflow/before_after"
|
23
|
+
|
24
|
+
# app/assets/javascripts/pageflow/editor.js
|
25
|
+
//= require pageflow/before_after/editor
|
26
|
+
|
27
|
+
# app/assets/stylesheets/application.scss.css
|
28
|
+
@import "pageflow/before_after";
|
29
|
+
|
30
|
+
Execute `bundle install`
|
31
|
+
Restart the application server.
|
data/Rakefile
ADDED
@@ -0,0 +1,12 @@
|
|
1
|
+
require "pageflow/page_type"
|
2
|
+
|
3
|
+
module Pageflow
|
4
|
+
module BeforeAfter
|
5
|
+
class Engine < Rails::Engine
|
6
|
+
isolate_namespace Pageflow::BeforeAfter
|
7
|
+
include Pageflow::PageType::Engine
|
8
|
+
|
9
|
+
config.autoload_paths << File.join(config.root, 'lib')
|
10
|
+
end
|
11
|
+
end
|
12
|
+
end
|
@@ -0,0 +1,89 @@
|
|
1
|
+
@include pageflow-page-type(before_after);
|
2
|
+
|
3
|
+
.before_after {
|
4
|
+
pointer-events: all;
|
5
|
+
|
6
|
+
.before_image, .after_image {
|
7
|
+
width: auto;
|
8
|
+
}
|
9
|
+
|
10
|
+
.before_wrapper {
|
11
|
+
border-right: 2px solid gray;
|
12
|
+
|
13
|
+
&:before {
|
14
|
+
position: absolute;
|
15
|
+
display: block;
|
16
|
+
width: 39px;
|
17
|
+
height: 39px;
|
18
|
+
top: -25px;
|
19
|
+
background: image-url('pageflow/before_after/draghandle.png') no-repeat;
|
20
|
+
z-index: 2;
|
21
|
+
background-repeat: no-repeat;
|
22
|
+
background-size: 65%;
|
23
|
+
background-position: center bottom;
|
24
|
+
content: "";
|
25
|
+
right: -21px;
|
26
|
+
}
|
27
|
+
}
|
28
|
+
|
29
|
+
.dragwrapper {
|
30
|
+
position: absolute;
|
31
|
+
z-index: 1;
|
32
|
+
width: 39px;
|
33
|
+
margin: 0;
|
34
|
+
cursor: col-resize;
|
35
|
+
top: 0;
|
36
|
+
height: 100%;
|
37
|
+
margin-left: -19px;
|
38
|
+
visibility: hidden;
|
39
|
+
}
|
40
|
+
|
41
|
+
.ba_indicator {
|
42
|
+
position: absolute;
|
43
|
+
display: block;
|
44
|
+
width: 7px;
|
45
|
+
height: 15px;
|
46
|
+
|
47
|
+
|
48
|
+
&.ba_left_indicator {
|
49
|
+
background: image-url('pageflow/before_after/lt-small.png') no-repeat;
|
50
|
+
}
|
51
|
+
&.ba_right_indicator {
|
52
|
+
background: image-url('pageflow/before_after/rt-small.png') no-repeat;
|
53
|
+
}
|
54
|
+
|
55
|
+
}
|
56
|
+
}
|
57
|
+
|
58
|
+
.page .beforeAfterPage {
|
59
|
+
|
60
|
+
.videoWrapper {
|
61
|
+
height: 100%;
|
62
|
+
}
|
63
|
+
|
64
|
+
.shadow {
|
65
|
+
z-index: 1;
|
66
|
+
}
|
67
|
+
|
68
|
+
}
|
69
|
+
|
70
|
+
.hideText .beforeAfterPage .before_wrapper {
|
71
|
+
border-right: 2px solid white;
|
72
|
+
overflow: visible !important;
|
73
|
+
}
|
74
|
+
|
75
|
+
.hideText div.before_after .dragwrapper {
|
76
|
+
visibility: visible;
|
77
|
+
z-index: 2;
|
78
|
+
}
|
79
|
+
|
80
|
+
.js .beforeAfterPage {
|
81
|
+
|
82
|
+
.contentText {
|
83
|
+
margin-bottom: 200px;
|
84
|
+
|
85
|
+
@include phone {
|
86
|
+
margin-bottom: 100px;
|
87
|
+
}
|
88
|
+
}
|
89
|
+
}
|
@@ -0,0 +1,72 @@
|
|
1
|
+
//= require jquery.ui.draggable
|
2
|
+
//= require ./before_after/widget
|
3
|
+
|
4
|
+
pageflow.pageType.register('before_after', _.extend({
|
5
|
+
|
6
|
+
prepareNextPageTimeout: 0,
|
7
|
+
|
8
|
+
enhance: function(pageElement, configuration) {
|
9
|
+
pageElement.addClass('hide_content_with_text');
|
10
|
+
|
11
|
+
pageElement.find('.play_button').on('mousedown touchstart', function() {
|
12
|
+
pageflow.hideText.activate();
|
13
|
+
});
|
14
|
+
|
15
|
+
pageElement.find('.close_button').on('click', function(e) {
|
16
|
+
pageflow.hideText.deactivate();
|
17
|
+
e.stopPropagation();
|
18
|
+
});
|
19
|
+
},
|
20
|
+
|
21
|
+
prepare: function(pageElement, configuration) {
|
22
|
+
},
|
23
|
+
|
24
|
+
resize: function(pageElement, configuration) {
|
25
|
+
pageElement.find(".before_after").before_after("refresh");
|
26
|
+
pageElement.find('.scroller').scroller("refresh");
|
27
|
+
},
|
28
|
+
|
29
|
+
preload: function(pageElement, configuration) {
|
30
|
+
return pageflow.preload.backgroundImage(pageElement.find('.background_image'));
|
31
|
+
},
|
32
|
+
|
33
|
+
activating: function(pageElement, configuration) {
|
34
|
+
pageElement.find(".before_after").before_after();
|
35
|
+
pageElement.find(".before_after").before_after("refresh");
|
36
|
+
pageElement.find('.scroller').scroller("refresh");
|
37
|
+
},
|
38
|
+
|
39
|
+
activated: function(pageElement, configuration) {
|
40
|
+
},
|
41
|
+
|
42
|
+
deactivating: function(pageElement, configuration) {},
|
43
|
+
|
44
|
+
deactivated: function(pageElement, configuration) {},
|
45
|
+
|
46
|
+
update: function(pageElement, configuration) {
|
47
|
+
|
48
|
+
pageElement.find('h2 .tagline').text(configuration.get('tagline') || '');
|
49
|
+
pageElement.find('h2 .title').text(configuration.get('title') || '');
|
50
|
+
pageElement.find('h2 .subtitle').text(configuration.get('subtitle') || '');
|
51
|
+
pageElement.find('p').html(configuration.get('text') || '');
|
52
|
+
|
53
|
+
this.updateInfoBox(pageElement, configuration);
|
54
|
+
this.updateCommonPageCssClasses(pageElement, configuration);
|
55
|
+
|
56
|
+
pageElement.find('.shadow').css({
|
57
|
+
opacity: configuration.get('gradient_opacity') / 100
|
58
|
+
});
|
59
|
+
},
|
60
|
+
|
61
|
+
embeddedEditorViews: function() {
|
62
|
+
return {
|
63
|
+
'.background_image': {
|
64
|
+
view: pageflow.BackgroundImageEmbeddedView,
|
65
|
+
options: {propertyName: 'background_image_id'}
|
66
|
+
},
|
67
|
+
'.before_after': {
|
68
|
+
view: pageflow.beforeAfter.BeforeAfterEmbeddedView
|
69
|
+
}
|
70
|
+
};
|
71
|
+
}
|
72
|
+
}, pageflow.commonPageCssClasses, pageflow.infoBox));
|
Binary file
|
Binary file
|
@@ -0,0 +1,34 @@
|
|
1
|
+
//= require_self
|
2
|
+
//= require ./editor/before_after_embedded_view
|
3
|
+
|
4
|
+
pageflow.beforeAfter = {};
|
5
|
+
|
6
|
+
pageflow.ConfigurationEditorView.register('before_after', {
|
7
|
+
configure: function() {
|
8
|
+
this.tab('general', function() {
|
9
|
+
this.group('general');
|
10
|
+
|
11
|
+
this.input('additional_title', pageflow.TextInputView);
|
12
|
+
this.input('additional_description', pageflow.TextAreaInputView, {size: 'short'});
|
13
|
+
});
|
14
|
+
|
15
|
+
this.tab('files', function() {
|
16
|
+
this.input('before_image_id', pageflow.FileInputView, {
|
17
|
+
collection: pageflow.imageFiles,
|
18
|
+
imagePositioning: false
|
19
|
+
});
|
20
|
+
this.input('after_image_id', pageflow.FileInputView, {
|
21
|
+
collection: pageflow.imageFiles,
|
22
|
+
imagePositioning: false
|
23
|
+
});
|
24
|
+
this.input('thumbnail_image_id', pageflow.FileInputView, {
|
25
|
+
collection: pageflow.imageFiles,
|
26
|
+
imagePositioning: false
|
27
|
+
});
|
28
|
+
});
|
29
|
+
|
30
|
+
this.tab('options', function() {
|
31
|
+
this.group('options');
|
32
|
+
});
|
33
|
+
}
|
34
|
+
});
|
@@ -0,0 +1,31 @@
|
|
1
|
+
pageflow.beforeAfter.BeforeAfterEmbeddedView = Backbone.Marionette.View.extend({
|
2
|
+
modelEvents: {
|
3
|
+
'change': 'update'
|
4
|
+
},
|
5
|
+
|
6
|
+
render: function() {
|
7
|
+
this.beforeImageView = new pageflow.BackgroundImageEmbeddedView({
|
8
|
+
el: this.$el.find('.before_image'),
|
9
|
+
model: this.model,
|
10
|
+
propertyName: 'before_image_id',
|
11
|
+
dataSizeAttributes: true
|
12
|
+
});
|
13
|
+
|
14
|
+
this.afterImageView = new pageflow.BackgroundImageEmbeddedView({
|
15
|
+
el: this.$el.find('.after_image'),
|
16
|
+
model: this.model,
|
17
|
+
propertyName: 'after_image_id',
|
18
|
+
dataSizeAttributes: true
|
19
|
+
});
|
20
|
+
|
21
|
+
this.update();
|
22
|
+
return this;
|
23
|
+
},
|
24
|
+
|
25
|
+
update: function() {
|
26
|
+
this.beforeImageView.update();
|
27
|
+
this.afterImageView.update();
|
28
|
+
this.$el.before_after();
|
29
|
+
this.$el.before_after('refresh');
|
30
|
+
}
|
31
|
+
});
|
Binary file
|
@@ -0,0 +1,53 @@
|
|
1
|
+
<div class="blackLayer"></div>
|
2
|
+
<div class="content_and_background beforeAfterPage">
|
3
|
+
<div class="close_button text_hidden_only" tabindex="4" title="Vorher/Nachher-Ansicht verlassen und Text einblenden">Schließen</div>
|
4
|
+
|
5
|
+
<div class="backgroundArea">
|
6
|
+
<div class="videoWrapper">
|
7
|
+
<div class="before_after_container">
|
8
|
+
<div class="before_after">
|
9
|
+
<div class="before_wrapper">
|
10
|
+
<%= background_image_div_with_size(configuration, 'before_image', :class => 'before_image', :spanning => true) %>
|
11
|
+
</div>
|
12
|
+
<div class="after_wrapper">
|
13
|
+
<%= background_image_div_with_size(configuration, 'after_image', :class => 'after_image', :spanning => true) %>
|
14
|
+
</div>
|
15
|
+
</div>
|
16
|
+
</div>
|
17
|
+
</div>
|
18
|
+
<%= shadow_div :opacity => configuration['gradient_opacity'] %>
|
19
|
+
</div>
|
20
|
+
|
21
|
+
<div class="content">
|
22
|
+
<div class="controls">
|
23
|
+
<span class="hint">360 Gradansicht</span>
|
24
|
+
<%= info_box(configuration) %>
|
25
|
+
<div class="vjs-control-bar view-control">
|
26
|
+
<div class="play_button vjs-controls vjs-default-skin vjs-player">
|
27
|
+
<a class="vjs-play-control vjs-play vjs-control" tabindex="4" title="Vorher/Nachher-Ansicht starten"><span></span></a>
|
28
|
+
</div>
|
29
|
+
<div class="control_bar_text">
|
30
|
+
Vorher/Nachher-Ansicht starten
|
31
|
+
</div>
|
32
|
+
</div>
|
33
|
+
</div>
|
34
|
+
|
35
|
+
<div class="scroller">
|
36
|
+
<div>
|
37
|
+
<div class="contentWrapper">
|
38
|
+
<div class="page_header">
|
39
|
+
<h2>
|
40
|
+
<span class="tagline"><%= configuration['tagline'] %></span>
|
41
|
+
<span class="title"><%= configuration['title'] %></span>
|
42
|
+
<span class="subtitle"><%= configuration['subtitle'] %></span>
|
43
|
+
</h2>
|
44
|
+
<%= background_image_tag(configuration['background_image_id'], {"class" => "print_image"}) %>
|
45
|
+
</div>
|
46
|
+
<div class="contentText">
|
47
|
+
<p><%= raw configuration['text'] %></p>
|
48
|
+
</div>
|
49
|
+
</div>
|
50
|
+
</div>
|
51
|
+
</div>
|
52
|
+
</div>
|
53
|
+
</div>
|
Binary file
|
@@ -0,0 +1,173 @@
|
|
1
|
+
(function($) {
|
2
|
+
$.widget('pageflow.before_after', {
|
3
|
+
_create: function() {
|
4
|
+
/*
|
5
|
+
* jQuery beforeafter plugin
|
6
|
+
* forked for Codevise Pageflow by Christoph Merkelbach
|
7
|
+
*
|
8
|
+
* @author admin@catchmyfame.com - http://www.catchmyfame.com
|
9
|
+
* @version 1.4
|
10
|
+
* @date September 19, 2011
|
11
|
+
* @category jQuery plugin
|
12
|
+
* @copyright (c) 2009 admin@catchmyfame.com (www.catchmyfame.com)
|
13
|
+
* @license CC Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0) - http://creativecommons.org/licenses/by-nc-sa/3.0/
|
14
|
+
*/
|
15
|
+
var defaults =
|
16
|
+
{
|
17
|
+
animateIntro : true,
|
18
|
+
introDelay : 1000,
|
19
|
+
introDuration : 1000,
|
20
|
+
introPosition : 0.65,
|
21
|
+
clickSpeed: 600,
|
22
|
+
linkDisplaySpeed: 200,
|
23
|
+
keypressAmount: 20,
|
24
|
+
onReady: function(){},
|
25
|
+
onInitialized: function(){},
|
26
|
+
onSlide: function(){}
|
27
|
+
};
|
28
|
+
var options = defaults;
|
29
|
+
var randID = Math.round(Math.random()*100000000);
|
30
|
+
|
31
|
+
var o=options;
|
32
|
+
var obj = $(this.element);
|
33
|
+
|
34
|
+
var beforeImg = $('.before_image', obj);
|
35
|
+
var afterImg = $('.after_image', obj);
|
36
|
+
|
37
|
+
var section = $(obj).parentsUntil(".backgroundArea").last();
|
38
|
+
|
39
|
+
var imgWidth;
|
40
|
+
var imgHeight;
|
41
|
+
|
42
|
+
var refresh = function() {
|
43
|
+
var resizeAndPositionContainer = function() {
|
44
|
+
var screenRatio = section.width() / section.height();
|
45
|
+
|
46
|
+
if(screenRatio < imgRatio) {
|
47
|
+
$(obj).parent().css({'width':'100%','height':'auto'});
|
48
|
+
var topOffset = (section.height() - $(obj).parent().height()) / 2;
|
49
|
+
$(obj).css({'top':topOffset+'px','left':'0'});
|
50
|
+
}
|
51
|
+
else {
|
52
|
+
$(obj).parent().css({'width': (section.height() * imgRatio) + 'px','height':'100%'});
|
53
|
+
var leftOffset = (section.width() - $(obj).parent().width()) / 2;
|
54
|
+
$(obj).css({'top':'0','left':leftOffset+'px'});
|
55
|
+
}
|
56
|
+
};
|
57
|
+
|
58
|
+
imgWidth = beforeImg.attr("data-width");
|
59
|
+
imgHeight = beforeImg.attr("data-height");
|
60
|
+
var imgRatio = imgWidth / imgHeight;
|
61
|
+
|
62
|
+
|
63
|
+
$(obj).parent().toggleClass('image-is-landscape', imgRatio > 1);
|
64
|
+
$(obj).parent().toggleClass('image-is-portrait', imgRatio <= 1);
|
65
|
+
|
66
|
+
var containerHeight = imgHeight / imgWidth * 100;
|
67
|
+
$(obj)
|
68
|
+
.css({'overflow':'visible','position':'relative','padding':'0','width':'100%', 'padding-top': containerHeight+"%"});
|
69
|
+
|
70
|
+
resizeAndPositionContainer();
|
71
|
+
|
72
|
+
bb = obj.get()[0].getBoundingClientRect();
|
73
|
+
barOffset = 0;
|
74
|
+
dragwrapper.draggable();
|
75
|
+
dragwrapper.draggable('option', {axis: 'x', containment:[bb.left-barOffset, bb.top, bb.right-barOffset, bb.bottom],drag:drag,stop:drag });
|
76
|
+
};
|
77
|
+
|
78
|
+
this.refresh = refresh;
|
79
|
+
|
80
|
+
beforeImg.attr('id','beforeimage'+randID);
|
81
|
+
afterImg.attr('id','afterimage'+randID);
|
82
|
+
|
83
|
+
var bb;
|
84
|
+
var barOffset;
|
85
|
+
var beforeWrapper = $('.before_wrapper', obj);
|
86
|
+
|
87
|
+
// Create an inner div wrapper (dragwrapper) to hold the images.
|
88
|
+
$(obj).prepend('<div id="dragwrapper'+randID+'" class="dragwrapper" title="Linke Maustaste drücken und nach links oder rechts ziehen"><span class="draghandle" id="draghandle'+randID+'"></span><div id="drag'+randID+'" class="drag"></div></div>');
|
89
|
+
var dragwrapper = $('#dragwrapper'+randID, obj);
|
90
|
+
dragwrapper.css({'opacity':1,'position':'absolute','padding':'0','left':o.introPosition * 100 +'%'}).height("100%");
|
91
|
+
var afterWrapper = $('.after_wrapper', obj);
|
92
|
+
|
93
|
+
beforeWrapper.css({'width': '100%', 'height':'100%', 'position':'absolute','left':'0px','z-index':'1','top':'0'}); // Set CSS properties of the before image div
|
94
|
+
afterWrapper.css({'width':'100%','height':'100%','position':'absolute','overflow':'hidden','right':'0px','top':'0','text-align':'right'}); // Set CSS properties of the after image div
|
95
|
+
$('#drag'+randID).height("100%");
|
96
|
+
|
97
|
+
$(obj).append('<div class="ba_left_indicator ba_indicator" id="lt-arrow'+randID+'"></div><div class="ba_right_indicator ba_indicator" id="rt-arrow'+randID+'"></div>');
|
98
|
+
$('.ba_indicator', obj).css('opacity', 0);
|
99
|
+
refresh();
|
100
|
+
|
101
|
+
$('img', obj).on('dragstart', function(event) { event.preventDefault(); });
|
102
|
+
|
103
|
+
|
104
|
+
function drag()
|
105
|
+
{
|
106
|
+
var bb = obj.get()[0].getBoundingClientRect();
|
107
|
+
dragwrapper.draggable( {axis: 'x', containment:[bb.left-barOffset, bb.top, bb.right-barOffset, bb.bottom],drag:drag,stop:drag });
|
108
|
+
var leftPos = parseInt( $(this).css('left'), 10 ) + barOffset;
|
109
|
+
var relPos = leftPos / bb.width;
|
110
|
+
if(relPos >= 1) { relPos = 1; }
|
111
|
+
|
112
|
+
beforeWrapper.css('width',relPos * 100 + '%');
|
113
|
+
o.onSlide.call(this, relPos);
|
114
|
+
$('#lt-arrow'+randID+', #rt-arrow'+randID).stop().css('opacity',0);
|
115
|
+
}
|
116
|
+
|
117
|
+
o.onInitialized.call(this);
|
118
|
+
|
119
|
+
if(o.animateIntro)
|
120
|
+
{
|
121
|
+
beforeWrapper.width(bb.width);
|
122
|
+
dragwrapper.css('left',imgWidth-barOffset+'px');
|
123
|
+
setTimeout(function(){
|
124
|
+
dragwrapper.css({'opacity':1}).animate({'left':(100*o.introPosition)+'%'},o.introDuration,function(){dragwrapper.animate({'opacity':1},1000);});
|
125
|
+
beforeWrapper.width(bb.width).animate({'width':o.introPosition*100+'%'},o.introDuration,function(){clickit();o.onReady.call(this);});
|
126
|
+
o.onSlide.call(this, o.introDelay);
|
127
|
+
},o.introDelay);
|
128
|
+
}
|
129
|
+
else
|
130
|
+
{
|
131
|
+
clickit();
|
132
|
+
o.onReady.call(this);
|
133
|
+
}
|
134
|
+
|
135
|
+
function clickit()
|
136
|
+
{
|
137
|
+
bb = obj.get()[0].getBoundingClientRect();
|
138
|
+
$(obj).hover(function(){
|
139
|
+
$('#lt-arrow'+randID).stop().css({'z-index':'20','position':'absolute','top':bb.height/2-$('#lt-arrow'+randID).height()/2+'px','left':parseInt(dragwrapper.css('left'), 10)-14+'px'}).animate({opacity:1,left:parseInt($('#lt-arrow'+randID).css('left'), 10)-6+'px'},200);
|
140
|
+
$('#rt-arrow'+randID).stop().css({'position':'absolute','top':bb.height/2-$('#lt-arrow'+randID).height()/2+'px','left':parseInt(dragwrapper.css('left'), 10)+10+'px'}).animate({opacity:1,left:parseInt($('#rt-arrow'+randID).css('left'), 10)+6+'px'},200);
|
141
|
+
},function(){
|
142
|
+
$('#lt-arrow'+randID).animate({opacity:0,left:parseInt($('#lt-arrow'+randID).css('left'),10)-6+'px'},350);
|
143
|
+
$('#rt-arrow'+randID).animate({opacity:0,left:parseInt($('#rt-arrow'+randID).css('left'),10)+6+'px'},350);
|
144
|
+
}
|
145
|
+
);
|
146
|
+
|
147
|
+
// When clicking in the container, move the bar and imageholder divs
|
148
|
+
$(obj).on('click touchmove touchstart', function(e){
|
149
|
+
bb = obj.get()[0].getBoundingClientRect();
|
150
|
+
var pageX = e.pageX || e.originalEvent.touches[0].pageX;
|
151
|
+
var moveSpeed = o.clickSpeed;
|
152
|
+
if(e.type == "touchmove") {
|
153
|
+
moveSpeed = 10;
|
154
|
+
}
|
155
|
+
var clickX = pageX - $(this).offset().left;
|
156
|
+
var percentualLeft = clickX / $(this).width() * 100;
|
157
|
+
var percentualLeftDragger = (clickX - barOffset) / $(this).width() * 100;
|
158
|
+
if (pageX < bb.left || pageX > bb.right) { return; }
|
159
|
+
|
160
|
+
dragwrapper.stop().animate({'left':percentualLeftDragger+'%'},moveSpeed);
|
161
|
+
beforeWrapper.stop().animate({'width':percentualLeft+'%'},moveSpeed, function() {
|
162
|
+
var pos = (parseInt( $('> div:eq(2)', obj).css('width'), 10 )) / imgWidth;
|
163
|
+
o.onSlide.call(this, pos);
|
164
|
+
});
|
165
|
+
$('#lt-arrow'+randID+',#rt-arrow'+randID).stop().animate({opacity:0},50);
|
166
|
+
});
|
167
|
+
$(obj).one('mousemove', function(){dragwrapper.stop().animate({'opacity':1},500);}); // If the mouse is over the container and we animate the intro, we run this to change the opacity when the mouse moves since the hover event doesnt get triggered yet
|
168
|
+
}
|
169
|
+
}
|
170
|
+
});
|
171
|
+
}(jQuery));
|
172
|
+
|
173
|
+
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -0,0 +1,22 @@
|
|
1
|
+
# coding: utf-8
|
2
|
+
|
3
|
+
Gem::Specification.new do |spec|
|
4
|
+
spec.name = 'pageflow-before-after'
|
5
|
+
spec.version = '0.0.1'
|
6
|
+
spec.authors = ['Codevise Solutions']
|
7
|
+
spec.email = ['info@codevise.de']
|
8
|
+
spec.summary = 'Pageflow page type for before/after image slider.'
|
9
|
+
spec.homepage = ''
|
10
|
+
spec.license = 'MIT'
|
11
|
+
|
12
|
+
spec.files = `git ls-files`.split($/)
|
13
|
+
spec.executables = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
|
14
|
+
spec.test_files = spec.files.grep(%r{^(test|spec|features)/})
|
15
|
+
spec.require_paths = ['lib']
|
16
|
+
|
17
|
+
|
18
|
+
spec.add_runtime_dependency('pageflow')
|
19
|
+
|
20
|
+
# Using translations from rails locales in javascript code.
|
21
|
+
spec.add_runtime_dependency 'i18n-js'
|
22
|
+
end
|
metadata
ADDED
@@ -0,0 +1,95 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: pageflow-before-after
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.0.1
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Codevise Solutions
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2014-09-12 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'
|
20
|
+
type: :runtime
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - ! '>='
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: '0'
|
27
|
+
- !ruby/object:Gem::Dependency
|
28
|
+
name: i18n-js
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
|
+
requirements:
|
31
|
+
- - ! '>='
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: '0'
|
34
|
+
type: :runtime
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - ! '>='
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: '0'
|
41
|
+
description:
|
42
|
+
email:
|
43
|
+
- info@codevise.de
|
44
|
+
executables: []
|
45
|
+
extensions: []
|
46
|
+
extra_rdoc_files: []
|
47
|
+
files:
|
48
|
+
- .gitignore
|
49
|
+
- Gemfile
|
50
|
+
- README.md
|
51
|
+
- Rakefile
|
52
|
+
- config/locales/de.yml
|
53
|
+
- lib/pageflow-before-after.rb
|
54
|
+
- lib/pageflow/before_after/engine.rb
|
55
|
+
- lib/pageflow/before_after/page_type.rb
|
56
|
+
- page_types/pageflow/before_after.css.scss
|
57
|
+
- page_types/pageflow/before_after.js
|
58
|
+
- page_types/pageflow/before_after/before_after_icon.png
|
59
|
+
- page_types/pageflow/before_after/draghandle.png
|
60
|
+
- page_types/pageflow/before_after/editor.js
|
61
|
+
- page_types/pageflow/before_after/editor/before_after_embedded_view.js
|
62
|
+
- page_types/pageflow/before_after/lt-small.png
|
63
|
+
- page_types/pageflow/before_after/page.html.erb
|
64
|
+
- page_types/pageflow/before_after/rt-small.png
|
65
|
+
- page_types/pageflow/before_after/widget.js
|
66
|
+
- page_types/pageflow/before_after_pictogram.png
|
67
|
+
- page_types/pageflow/before_after_pictogram_small.png
|
68
|
+
- page_types/pageflow/before_after_sprite.png
|
69
|
+
- page_types/pageflow/ov-before_after.png
|
70
|
+
- pageflow-before-after.gemspec
|
71
|
+
homepage: ''
|
72
|
+
licenses:
|
73
|
+
- MIT
|
74
|
+
metadata: {}
|
75
|
+
post_install_message:
|
76
|
+
rdoc_options: []
|
77
|
+
require_paths:
|
78
|
+
- lib
|
79
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
80
|
+
requirements:
|
81
|
+
- - ! '>='
|
82
|
+
- !ruby/object:Gem::Version
|
83
|
+
version: '0'
|
84
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
85
|
+
requirements:
|
86
|
+
- - ! '>='
|
87
|
+
- !ruby/object:Gem::Version
|
88
|
+
version: '0'
|
89
|
+
requirements: []
|
90
|
+
rubyforge_project:
|
91
|
+
rubygems_version: 2.2.2
|
92
|
+
signing_key:
|
93
|
+
specification_version: 4
|
94
|
+
summary: Pageflow page type for before/after image slider.
|
95
|
+
test_files: []
|