phcthemes_web_theme_pack 2.0.2 → 2.0.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/javascripts/phcthemes_web_theme_pack_hostinza.js +27 -0
- data/app/assets/javascripts/phcthemes_web_theme_pack_pressroom.js +0 -0
- data/app/assets/javascripts/themes/hostinza/theme/hostslide.js +94 -0
- data/app/assets/javascripts/themes/hostinza/theme/jquery.parallax-scroll.js +185 -0
- data/app/assets/javascripts/themes/hostinza/theme/jquery.parallax.js +521 -0
- data/app/assets/javascripts/themes/hostinza/theme/main.js +1106 -0
- data/app/assets/javascripts/themes/hostinza/theme/plugins.js +31 -0
- data/app/assets/javascripts/themes/hostinza/theme/shuffle-letters.js +140 -0
- data/app/assets/javascripts/themes/hostinza/theme/tweetie.js +130 -0
- data/app/assets/javascripts/themes/hostinza/theme/vps-slider-settings.js +130 -0
- data/app/assets/javascripts/themes/hostinza/theme/vps-slider.js +85 -0
- data/app/assets/stylesheets/phcthemes_web_theme_pack_hostinza.scss +24 -0
- data/app/assets/stylesheets/phcthemes_web_theme_pack_pressroom.scss +24 -0
- data/lib/phcthemes_web_theme_pack/version.rb +1 -1
- metadata +15 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: d27197ab904c5a5f915727bede48ff08d84707a074796ffee340180ea05c31fe
|
4
|
+
data.tar.gz: 33ddcb15316d8641eee47581ec1c5a246c3e2d20e95c1808c68611bad43c524d
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 9290503cb6dbc9cfa8626d65c6fa46d8c615c6ecf5f441e244a588627d38128d49c48378feb641a9c10e78531e50d1bc6c69a0be7bfdbf923b7b51c25ca46c9f
|
7
|
+
data.tar.gz: 444113b4fc2d50852e381a2735532ff0652e93bd68f57ede3f194ae519d9aa865c1fa062a3f239fbd072824cbeda40c978a3c59846b838c16aa768f34f3f64ba
|
@@ -0,0 +1,27 @@
|
|
1
|
+
//= require jquery3
|
2
|
+
//= require rails-ujs
|
3
|
+
//= require activestorage
|
4
|
+
//= require jquery-ui
|
5
|
+
//= require common/bootstrap/bootstrap.bundle.js
|
6
|
+
//= require common/mapbox/mapbox.js
|
7
|
+
//= require common/magnific-popup/jquery.magnific-popup.js
|
8
|
+
//= require themes/antlr/theme/owl.carousel.min.js
|
9
|
+
//= require themes/hostinza/theme/tweetie.js
|
10
|
+
//= require themes/hostinza/theme/jquery.parallax-scroll.js
|
11
|
+
//= require themes/hostinza/theme/jquery.parallax.js
|
12
|
+
//= require themes/hostinza/theme/hostslide.js
|
13
|
+
//= require themes/hostinza/theme/vps-slider.js
|
14
|
+
//= require themes/hostinza/theme/vps-slider-settings.js
|
15
|
+
//= require common/rev-slider/jquery.themepunch.tools.min.js
|
16
|
+
//= require common/rev-slider/jquery.themepunch.revolution.js
|
17
|
+
//= require common/rev-slider/extensions/revolution.extension.actions.js
|
18
|
+
//= require common/rev-slider/extensions/revolution.extension.carousel.js
|
19
|
+
//= require common/rev-slider/extensions/revolution.extension.kenburn.js
|
20
|
+
//= require common/rev-slider/extensions/revolution.extension.layeranimation.js
|
21
|
+
//= require common/rev-slider/extensions/revolution.extension.migration.js
|
22
|
+
//= require common/rev-slider/extensions/revolution.extension.navigation.js
|
23
|
+
//= require common/rev-slider/extensions/revolution.extension.parallax.js
|
24
|
+
//= require common/rev-slider/extensions/revolution.extension.slideanims.js
|
25
|
+
//= require common/rev-slider/extensions/revolution.extension.video.js
|
26
|
+
//= require themes/hostinza/theme/shuffle-letters.js
|
27
|
+
//= require themes/hostinza/theme/main.js
|
File without changes
|
@@ -0,0 +1,94 @@
|
|
1
|
+
(function($) {
|
2
|
+
|
3
|
+
$.fn.xsslide = function(type, plans, currentplan, id, orientation) {
|
4
|
+
if (typeof type != 'string') {
|
5
|
+
console.error("XSSlide: 'type' is not a string");
|
6
|
+
return false;
|
7
|
+
}
|
8
|
+
if (plans[0].length < 2) {
|
9
|
+
console.error("XSSlide: Not enough plans provided");
|
10
|
+
return false;
|
11
|
+
}
|
12
|
+
if (typeof currentplan != 'number') {
|
13
|
+
console.error("XSSlide: 'currentplan' is not a number");
|
14
|
+
return false;
|
15
|
+
}
|
16
|
+
if (typeof id != 'string') {
|
17
|
+
console.error("XSSlide: 'id' is not a string");
|
18
|
+
return false;
|
19
|
+
}
|
20
|
+
if (typeof orientation != 'string') {
|
21
|
+
console.error("XSSlide: 'orientation' is not a string");
|
22
|
+
return false;
|
23
|
+
}
|
24
|
+
if (orientation != 'horizontal' && orientation != 'vertical') {
|
25
|
+
console.error("XSSlide: " + orientation + " is not a valid slider orientation.");
|
26
|
+
return false;
|
27
|
+
}
|
28
|
+
if (type === "single") {
|
29
|
+
for (var i = 0, tot = plans.length; i < tot; i++) {
|
30
|
+
$("." + id + i).each(function() {
|
31
|
+
if ($(this).is("input")) {
|
32
|
+
$(this).val(plans[i][currentplan - 1]);
|
33
|
+
} else {
|
34
|
+
$(this).html(plans[i][currentplan - 1]);
|
35
|
+
}
|
36
|
+
});
|
37
|
+
}
|
38
|
+
this.slider({
|
39
|
+
orientation: orientation,
|
40
|
+
value: currentplan,
|
41
|
+
range: "min",
|
42
|
+
min: 1,
|
43
|
+
max: plans[0].length + 1,
|
44
|
+
slide: function(event, ui) {
|
45
|
+
for (var i = 0, tot = plans.length; i < tot; i++) {
|
46
|
+
$("." + id + i).each(function() {
|
47
|
+
if ($(this).is("input")) {
|
48
|
+
$(this).val(plans[i][ui.value - 1]);
|
49
|
+
} else {
|
50
|
+
$(this).html(plans[i][ui.value - 1]);
|
51
|
+
}
|
52
|
+
});
|
53
|
+
}
|
54
|
+
}
|
55
|
+
});
|
56
|
+
return this;
|
57
|
+
} else if (type === "multiple") {
|
58
|
+
for (var i = 0, tot = plans.length; i < tot; i++) {
|
59
|
+
(function(i) {
|
60
|
+
$("." + id + i + "data").each(function() {
|
61
|
+
if ($(this).is("input")) {
|
62
|
+
$(this).val(plans[i][currentplan - 1]);
|
63
|
+
} else {
|
64
|
+
$(this).html(plans[i][currentplan - 1]);
|
65
|
+
}
|
66
|
+
});
|
67
|
+
$("." + id + i).slider({
|
68
|
+
orientation: orientation,
|
69
|
+
value: currentplan,
|
70
|
+
range: "min",
|
71
|
+
min: 1,
|
72
|
+
max: plans[i].length + 1,
|
73
|
+
step: 1,
|
74
|
+
slide: function(event, ui) {
|
75
|
+
$("." + id + i + "data").each(function() {
|
76
|
+
if ($(this).is("input")) {
|
77
|
+
$(this).val(plans[i][ui.value - 1]);
|
78
|
+
} else {
|
79
|
+
$(this).html(plans[i][ui.value - 1]);
|
80
|
+
}
|
81
|
+
});
|
82
|
+
}
|
83
|
+
});
|
84
|
+
})(i);
|
85
|
+
}
|
86
|
+
return this;
|
87
|
+
} else {
|
88
|
+
console.error("XSSlide: " + type + " is not a valid slider type.");
|
89
|
+
return false;
|
90
|
+
}
|
91
|
+
|
92
|
+
};
|
93
|
+
|
94
|
+
}(jQuery));
|
@@ -0,0 +1,185 @@
|
|
1
|
+
$(function() {
|
2
|
+
ParallaxScroll.init();
|
3
|
+
});
|
4
|
+
|
5
|
+
var ParallaxScroll = {
|
6
|
+
/* PUBLIC VARIABLES */
|
7
|
+
showLogs: false,
|
8
|
+
round: 1000,
|
9
|
+
|
10
|
+
/* PUBLIC FUNCTIONS */
|
11
|
+
init: function() {
|
12
|
+
this._log("init");
|
13
|
+
if (this._inited) {
|
14
|
+
this._log("Already Inited");
|
15
|
+
this._inited = true;
|
16
|
+
return;
|
17
|
+
}
|
18
|
+
this._requestAnimationFrame = (function(){
|
19
|
+
return window.requestAnimationFrame ||
|
20
|
+
window.webkitRequestAnimationFrame ||
|
21
|
+
window.mozRequestAnimationFrame ||
|
22
|
+
window.oRequestAnimationFrame ||
|
23
|
+
window.msRequestAnimationFrame ||
|
24
|
+
function(/* function */ callback, /* DOMElement */ element){
|
25
|
+
window.setTimeout(callback, 1000 / 60);
|
26
|
+
};
|
27
|
+
})();
|
28
|
+
this._onScroll(true);
|
29
|
+
},
|
30
|
+
|
31
|
+
/* PRIVATE VARIABLES */
|
32
|
+
_inited: false,
|
33
|
+
_properties: ['x', 'y', 'z', 'rotateX', 'rotateY', 'rotateZ', 'scaleX', 'scaleY', 'scaleZ', 'scale'],
|
34
|
+
_requestAnimationFrame:null,
|
35
|
+
|
36
|
+
/* PRIVATE FUNCTIONS */
|
37
|
+
_log: function(message) {
|
38
|
+
if (this.showLogs) console.log("Parallax Scroll / " + message);
|
39
|
+
},
|
40
|
+
_onScroll: function(noSmooth) {
|
41
|
+
var scroll = $(document).scrollTop();
|
42
|
+
var windowHeight = $(window).height();
|
43
|
+
this._log("onScroll " + scroll);
|
44
|
+
$("[data-parallax]").each($.proxy(function(index, el) {
|
45
|
+
var $el = $(el);
|
46
|
+
var properties = [];
|
47
|
+
var applyProperties = false;
|
48
|
+
var style = $el.data("style");
|
49
|
+
if (style == undefined) {
|
50
|
+
style = $el.attr("style") || "";
|
51
|
+
$el.data("style", style);
|
52
|
+
}
|
53
|
+
var datas = [$el.data("parallax")];
|
54
|
+
var iData;
|
55
|
+
for(iData = 2; ; iData++) {
|
56
|
+
if($el.data("parallax"+iData)) {
|
57
|
+
datas.push($el.data("parallax-"+iData));
|
58
|
+
}
|
59
|
+
else {
|
60
|
+
break;
|
61
|
+
}
|
62
|
+
}
|
63
|
+
var datasLength = datas.length;
|
64
|
+
for(iData = 0; iData < datasLength; iData ++) {
|
65
|
+
var data = datas[iData];
|
66
|
+
var scrollFrom = data["from-scroll"];
|
67
|
+
if (scrollFrom == undefined) scrollFrom = Math.max(0, $(el).offset().top - windowHeight);
|
68
|
+
scrollFrom = scrollFrom | 0;
|
69
|
+
var scrollDistance = data["distance"];
|
70
|
+
var scrollTo = data["to-scroll"];
|
71
|
+
if (scrollDistance == undefined && scrollTo == undefined) scrollDistance = windowHeight;
|
72
|
+
scrollDistance = Math.max(scrollDistance | 0, 1);
|
73
|
+
var easing = data["easing"];
|
74
|
+
var easingReturn = data["easing-return"];
|
75
|
+
if (easing == undefined || !$.easing|| !$.easing[easing]) easing = null;
|
76
|
+
if (easingReturn == undefined || !$.easing|| !$.easing[easingReturn]) easingReturn = easing;
|
77
|
+
if (easing) {
|
78
|
+
var totalTime = data["duration"];
|
79
|
+
if (totalTime == undefined) totalTime = scrollDistance;
|
80
|
+
totalTime = Math.max(totalTime | 0, 1);
|
81
|
+
var totalTimeReturn = data["duration-return"];
|
82
|
+
if (totalTimeReturn == undefined) totalTimeReturn = totalTime;
|
83
|
+
scrollDistance = 1;
|
84
|
+
var currentTime = $el.data("current-time");
|
85
|
+
if(currentTime == undefined) currentTime = 0;
|
86
|
+
}
|
87
|
+
if (scrollTo == undefined) scrollTo = scrollFrom + scrollDistance;
|
88
|
+
scrollTo = scrollTo | 0;
|
89
|
+
var smoothness = data["smoothness"];
|
90
|
+
if (smoothness == undefined) smoothness = 30;
|
91
|
+
smoothness = smoothness | 0;
|
92
|
+
if (noSmooth || smoothness == 0) smoothness = 1;
|
93
|
+
smoothness = smoothness | 0;
|
94
|
+
var scrollCurrent = scroll;
|
95
|
+
scrollCurrent = Math.max(scrollCurrent, scrollFrom);
|
96
|
+
scrollCurrent = Math.min(scrollCurrent, scrollTo);
|
97
|
+
if(easing) {
|
98
|
+
if($el.data("sens") == undefined) $el.data("sens", "back");
|
99
|
+
if(scrollCurrent>scrollFrom) {
|
100
|
+
if($el.data("sens") == "back") {
|
101
|
+
currentTime = 1;
|
102
|
+
$el.data("sens", "go");
|
103
|
+
}
|
104
|
+
else {
|
105
|
+
currentTime++;
|
106
|
+
}
|
107
|
+
}
|
108
|
+
if(scrollCurrent<scrollTo) {
|
109
|
+
if($el.data("sens") == "go") {
|
110
|
+
currentTime = 1;
|
111
|
+
$el.data("sens", "back");
|
112
|
+
}
|
113
|
+
else {
|
114
|
+
currentTime++;
|
115
|
+
}
|
116
|
+
}
|
117
|
+
if(noSmooth) currentTime = totalTime;
|
118
|
+
$el.data("current-time", currentTime);
|
119
|
+
}
|
120
|
+
this._properties.map($.proxy(function(prop) {
|
121
|
+
var defaultProp = 0;
|
122
|
+
var to = data[prop];
|
123
|
+
if (to == undefined) return;
|
124
|
+
if(prop=="scale" || prop=="scaleX" || prop=="scaleY" || prop=="scaleZ" ) {
|
125
|
+
defaultProp = 1;
|
126
|
+
}
|
127
|
+
else {
|
128
|
+
to = to | 0;
|
129
|
+
}
|
130
|
+
var prev = $el.data("_" + prop);
|
131
|
+
if (prev == undefined) prev = defaultProp;
|
132
|
+
var next = ((to-defaultProp) * ((scrollCurrent - scrollFrom) / (scrollTo - scrollFrom))) + defaultProp;
|
133
|
+
var val = prev + (next - prev) / smoothness;
|
134
|
+
if(easing && currentTime>0 && currentTime<=totalTime) {
|
135
|
+
var from = defaultProp;
|
136
|
+
if($el.data("sens") == "back") {
|
137
|
+
from = to;
|
138
|
+
to = -to;
|
139
|
+
easing = easingReturn;
|
140
|
+
totalTime = totalTimeReturn;
|
141
|
+
}
|
142
|
+
val = $.easing[easing](null, currentTime, from, to, totalTime);
|
143
|
+
}
|
144
|
+
val = Math.ceil(val * this.round) / this.round;
|
145
|
+
if(val==prev&&next==to) val = to;
|
146
|
+
if(!properties[prop]) properties[prop] = 0;
|
147
|
+
properties[prop] += val;
|
148
|
+
if (prev != properties[prop]) {
|
149
|
+
$el.data("_" + prop, properties[prop]);
|
150
|
+
applyProperties = true;
|
151
|
+
}
|
152
|
+
}, this));
|
153
|
+
}
|
154
|
+
if (applyProperties) {
|
155
|
+
if (properties["z"] != undefined) {
|
156
|
+
var perspective = data["perspective"];
|
157
|
+
if (perspective == undefined) perspective = 800;
|
158
|
+
var $parent = $el.parent();
|
159
|
+
if(!$parent.data("style")) $parent.data("style", $parent.attr("style") || "");
|
160
|
+
$parent.attr("style", "perspective:" + perspective + "px; -webkit-perspective:" + perspective + "px; "+ $parent.data("style"));
|
161
|
+
}
|
162
|
+
if(properties["scaleX"] == undefined) properties["scaleX"] = 1;
|
163
|
+
if(properties["scaleY"] == undefined) properties["scaleY"] = 1;
|
164
|
+
if(properties["scaleZ"] == undefined) properties["scaleZ"] = 1;
|
165
|
+
if (properties["scale"] != undefined) {
|
166
|
+
properties["scaleX"] *= properties["scale"];
|
167
|
+
properties["scaleY"] *= properties["scale"];
|
168
|
+
properties["scaleZ"] *= properties["scale"];
|
169
|
+
}
|
170
|
+
var translate3d = "translate3d(" + (properties["x"] ? properties["x"] : 0) + "px, " + (properties["y"] ? properties["y"] : 0) + "px, " + (properties["z"] ? properties["z"] : 0) + "px)";
|
171
|
+
var rotate3d = "rotateX(" + (properties["rotateX"] ? properties["rotateX"] : 0) + "deg) rotateY(" + (properties["rotateY"] ? properties["rotateY"] : 0) + "deg) rotateZ(" + (properties["rotateZ"] ? properties["rotateZ"] : 0) + "deg)";
|
172
|
+
var scale3d = "scaleX(" + properties["scaleX"] + ") scaleY(" + properties["scaleY"] + ") scaleZ(" + properties["scaleZ"] + ")";
|
173
|
+
var cssTransform = translate3d + " " + rotate3d + " " + scale3d + ";";
|
174
|
+
this._log(cssTransform);
|
175
|
+
$el.attr("style", "transform:" + cssTransform + " -webkit-transform:" + cssTransform + " " + style);
|
176
|
+
}
|
177
|
+
}, this));
|
178
|
+
if(window.requestAnimationFrame) {
|
179
|
+
window.requestAnimationFrame($.proxy(this._onScroll, this, false));
|
180
|
+
}
|
181
|
+
else {
|
182
|
+
this._requestAnimationFrame($.proxy(this._onScroll, this, false));
|
183
|
+
}
|
184
|
+
}
|
185
|
+
};
|
@@ -0,0 +1,521 @@
|
|
1
|
+
/**
|
2
|
+
* jQuery || Zepto Parallax Plugin
|
3
|
+
* @author Matthew Wagerfield - @wagerfield
|
4
|
+
* @description Creates a parallax effect between an array of layers,
|
5
|
+
* driving the motion from the gyroscope output of a smartdevice.
|
6
|
+
* If no gyroscope is available, the cursor position is used.
|
7
|
+
*/
|
8
|
+
;(function($, window, document, undefined) {
|
9
|
+
|
10
|
+
// Strict Mode
|
11
|
+
'use strict';
|
12
|
+
|
13
|
+
// Constants
|
14
|
+
var NAME = 'parallax';
|
15
|
+
var MAGIC_NUMBER = 30;
|
16
|
+
var DEFAULTS = {
|
17
|
+
relativeInput: false,
|
18
|
+
clipRelativeInput: false,
|
19
|
+
calibrationThreshold: 100,
|
20
|
+
calibrationDelay: 500,
|
21
|
+
supportDelay: 500,
|
22
|
+
calibrateX: false,
|
23
|
+
calibrateY: true,
|
24
|
+
invertX: true,
|
25
|
+
invertY: true,
|
26
|
+
limitX: false,
|
27
|
+
limitY: false,
|
28
|
+
scalarX: 10.0,
|
29
|
+
scalarY: 10.0,
|
30
|
+
frictionX: 0.1,
|
31
|
+
frictionY: 0.1,
|
32
|
+
originX: 0.5,
|
33
|
+
originY: 0.5,
|
34
|
+
pointerEvents: true,
|
35
|
+
precision: 1
|
36
|
+
};
|
37
|
+
|
38
|
+
function Plugin(element, options) {
|
39
|
+
|
40
|
+
// DOM Context
|
41
|
+
this.element = element;
|
42
|
+
|
43
|
+
// Selections
|
44
|
+
this.$context = $(element).data('api', this);
|
45
|
+
this.$layers = this.$context.find('.layer');
|
46
|
+
|
47
|
+
// Data Extraction
|
48
|
+
var data = {
|
49
|
+
calibrateX: this.$context.data('calibrate-x') || null,
|
50
|
+
calibrateY: this.$context.data('calibrate-y') || null,
|
51
|
+
invertX: this.$context.data('invert-x') || null,
|
52
|
+
invertY: this.$context.data('invert-y') || null,
|
53
|
+
limitX: parseFloat(this.$context.data('limit-x')) || null,
|
54
|
+
limitY: parseFloat(this.$context.data('limit-y')) || null,
|
55
|
+
scalarX: parseFloat(this.$context.data('scalar-x')) || null,
|
56
|
+
scalarY: parseFloat(this.$context.data('scalar-y')) || null,
|
57
|
+
frictionX: parseFloat(this.$context.data('friction-x')) || null,
|
58
|
+
frictionY: parseFloat(this.$context.data('friction-y')) || null,
|
59
|
+
originX: parseFloat(this.$context.data('origin-x')) || null,
|
60
|
+
originY: parseFloat(this.$context.data('origin-y')) || null,
|
61
|
+
pointerEvents: this.$context.data('pointer-events') || true,
|
62
|
+
precision: parseFloat(this.$context.data('precision')) || 1
|
63
|
+
};
|
64
|
+
|
65
|
+
// Delete Null Data Values
|
66
|
+
for (var key in data) {
|
67
|
+
if (data[key] === null) delete data[key];
|
68
|
+
}
|
69
|
+
|
70
|
+
// Compose Settings Object
|
71
|
+
$.extend(this, DEFAULTS, options, data);
|
72
|
+
|
73
|
+
// States
|
74
|
+
this.calibrationTimer = null;
|
75
|
+
this.calibrationFlag = true;
|
76
|
+
this.enabled = false;
|
77
|
+
this.depthsX = [];
|
78
|
+
this.depthsY = [];
|
79
|
+
this.raf = null;
|
80
|
+
|
81
|
+
// Element Bounds
|
82
|
+
this.bounds = null;
|
83
|
+
this.ex = 0;
|
84
|
+
this.ey = 0;
|
85
|
+
this.ew = 0;
|
86
|
+
this.eh = 0;
|
87
|
+
|
88
|
+
// Element Center
|
89
|
+
this.ecx = 0;
|
90
|
+
this.ecy = 0;
|
91
|
+
|
92
|
+
// Element Range
|
93
|
+
this.erx = 0;
|
94
|
+
this.ery = 0;
|
95
|
+
|
96
|
+
// Calibration
|
97
|
+
this.cx = 0;
|
98
|
+
this.cy = 0;
|
99
|
+
|
100
|
+
// Input
|
101
|
+
this.ix = 0;
|
102
|
+
this.iy = 0;
|
103
|
+
|
104
|
+
// Motion
|
105
|
+
this.mx = 0;
|
106
|
+
this.my = 0;
|
107
|
+
|
108
|
+
// Velocity
|
109
|
+
this.vx = 0;
|
110
|
+
this.vy = 0;
|
111
|
+
|
112
|
+
// Callbacks
|
113
|
+
this.onMouseMove = this.onMouseMove.bind(this);
|
114
|
+
this.onDeviceOrientation = this.onDeviceOrientation.bind(this);
|
115
|
+
this.onOrientationTimer = this.onOrientationTimer.bind(this);
|
116
|
+
this.onCalibrationTimer = this.onCalibrationTimer.bind(this);
|
117
|
+
this.onAnimationFrame = this.onAnimationFrame.bind(this);
|
118
|
+
this.onWindowResize = this.onWindowResize.bind(this);
|
119
|
+
|
120
|
+
// Initialise
|
121
|
+
this.initialise();
|
122
|
+
}
|
123
|
+
|
124
|
+
Plugin.prototype.transformSupport = function(value) {
|
125
|
+
var element = document.createElement('div');
|
126
|
+
var propertySupport = false;
|
127
|
+
var propertyValue = null;
|
128
|
+
var featureSupport = false;
|
129
|
+
var cssProperty = null;
|
130
|
+
var jsProperty = null;
|
131
|
+
for (var i = 0, l = this.vendors.length; i < l; i++) {
|
132
|
+
if (this.vendors[i] !== null) {
|
133
|
+
cssProperty = this.vendors[i][0] + 'transform';
|
134
|
+
jsProperty = this.vendors[i][1] + 'Transform';
|
135
|
+
} else {
|
136
|
+
cssProperty = 'transform';
|
137
|
+
jsProperty = 'transform';
|
138
|
+
}
|
139
|
+
if (element.style[jsProperty] !== undefined) {
|
140
|
+
propertySupport = true;
|
141
|
+
break;
|
142
|
+
}
|
143
|
+
}
|
144
|
+
switch(value) {
|
145
|
+
case '2D':
|
146
|
+
featureSupport = propertySupport;
|
147
|
+
break;
|
148
|
+
case '3D':
|
149
|
+
if (propertySupport) {
|
150
|
+
var body = document.body || document.createElement('body');
|
151
|
+
var documentElement = document.documentElement;
|
152
|
+
var documentOverflow = documentElement.style.overflow;
|
153
|
+
var isCreatedBody = false;
|
154
|
+
if (!document.body) {
|
155
|
+
isCreatedBody = true;
|
156
|
+
documentElement.style.overflow = 'hidden';
|
157
|
+
documentElement.appendChild(body);
|
158
|
+
body.style.overflow = 'hidden';
|
159
|
+
body.style.background = '';
|
160
|
+
}
|
161
|
+
body.appendChild(element);
|
162
|
+
element.style[jsProperty] = 'translate3d(1px,1px,1px)';
|
163
|
+
propertyValue = window.getComputedStyle(element).getPropertyValue(cssProperty);
|
164
|
+
featureSupport = propertyValue !== undefined && propertyValue.length > 0 && propertyValue !== "none";
|
165
|
+
documentElement.style.overflow = documentOverflow;
|
166
|
+
body.removeChild(element);
|
167
|
+
if ( isCreatedBody ) {
|
168
|
+
body.removeAttribute('style');
|
169
|
+
body.parentNode.removeChild(body);
|
170
|
+
}
|
171
|
+
}
|
172
|
+
break;
|
173
|
+
}
|
174
|
+
return featureSupport;
|
175
|
+
};
|
176
|
+
|
177
|
+
Plugin.prototype.ww = null;
|
178
|
+
Plugin.prototype.wh = null;
|
179
|
+
Plugin.prototype.wcx = null;
|
180
|
+
Plugin.prototype.wcy = null;
|
181
|
+
Plugin.prototype.wrx = null;
|
182
|
+
Plugin.prototype.wry = null;
|
183
|
+
Plugin.prototype.portrait = null;
|
184
|
+
Plugin.prototype.desktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i);
|
185
|
+
Plugin.prototype.vendors = [null,['-webkit-','webkit'],['-moz-','Moz'],['-o-','O'],['-ms-','ms']];
|
186
|
+
Plugin.prototype.motionSupport = !!window.DeviceMotionEvent;
|
187
|
+
Plugin.prototype.orientationSupport = !!window.DeviceOrientationEvent;
|
188
|
+
Plugin.prototype.orientationStatus = 0;
|
189
|
+
Plugin.prototype.transform2DSupport = Plugin.prototype.transformSupport('2D');
|
190
|
+
Plugin.prototype.transform3DSupport = Plugin.prototype.transformSupport('3D');
|
191
|
+
Plugin.prototype.propertyCache = {};
|
192
|
+
|
193
|
+
Plugin.prototype.initialise = function() {
|
194
|
+
|
195
|
+
// Configure Styles
|
196
|
+
if (this.$context.css('position') === 'static') {
|
197
|
+
this.$context.css({
|
198
|
+
position:'relative'
|
199
|
+
});
|
200
|
+
}
|
201
|
+
|
202
|
+
// Pointer events
|
203
|
+
if(!this.pointerEvents){
|
204
|
+
this.$context.css({
|
205
|
+
pointerEvents: 'none'
|
206
|
+
});
|
207
|
+
}
|
208
|
+
|
209
|
+
// Hardware Accelerate Context
|
210
|
+
this.accelerate(this.$context);
|
211
|
+
|
212
|
+
// Setup
|
213
|
+
this.updateLayers();
|
214
|
+
this.updateDimensions();
|
215
|
+
this.enable();
|
216
|
+
this.queueCalibration(this.calibrationDelay);
|
217
|
+
};
|
218
|
+
|
219
|
+
Plugin.prototype.updateLayers = function() {
|
220
|
+
|
221
|
+
// Cache Layer Elements
|
222
|
+
this.$layers = this.$context.find('.layer');
|
223
|
+
this.depthsX = [];
|
224
|
+
this.depthsY = [];
|
225
|
+
|
226
|
+
// Configure Layer Styles
|
227
|
+
this.$layers.css({
|
228
|
+
position:'absolute',
|
229
|
+
display:'block',
|
230
|
+
left: 0,
|
231
|
+
top: 0
|
232
|
+
});
|
233
|
+
this.$layers.first().css({
|
234
|
+
position:'relative'
|
235
|
+
});
|
236
|
+
|
237
|
+
// Hardware Accelerate Layers
|
238
|
+
this.accelerate(this.$layers);
|
239
|
+
|
240
|
+
// Cache Depths
|
241
|
+
this.$layers.each($.proxy(function(index, element) {
|
242
|
+
//Graceful fallback on depth if depth-x or depth-y is absent
|
243
|
+
var depth = $(element).data('depth') || 0;
|
244
|
+
this.depthsX.push($(element).data('depth-x') || depth);
|
245
|
+
this.depthsY.push($(element).data('depth-y') || depth);
|
246
|
+
}, this));
|
247
|
+
};
|
248
|
+
|
249
|
+
Plugin.prototype.updateDimensions = function() {
|
250
|
+
this.ww = window.innerWidth;
|
251
|
+
this.wh = window.innerHeight;
|
252
|
+
this.wcx = this.ww * this.originX;
|
253
|
+
this.wcy = this.wh * this.originY;
|
254
|
+
this.wrx = Math.max(this.wcx, this.ww - this.wcx);
|
255
|
+
this.wry = Math.max(this.wcy, this.wh - this.wcy);
|
256
|
+
};
|
257
|
+
|
258
|
+
Plugin.prototype.updateBounds = function() {
|
259
|
+
this.bounds = this.element.getBoundingClientRect();
|
260
|
+
this.ex = this.bounds.left;
|
261
|
+
this.ey = this.bounds.top;
|
262
|
+
this.ew = this.bounds.width;
|
263
|
+
this.eh = this.bounds.height;
|
264
|
+
this.ecx = this.ew * this.originX;
|
265
|
+
this.ecy = this.eh * this.originY;
|
266
|
+
this.erx = Math.max(this.ecx, this.ew - this.ecx);
|
267
|
+
this.ery = Math.max(this.ecy, this.eh - this.ecy);
|
268
|
+
};
|
269
|
+
|
270
|
+
Plugin.prototype.queueCalibration = function(delay) {
|
271
|
+
clearTimeout(this.calibrationTimer);
|
272
|
+
this.calibrationTimer = setTimeout(this.onCalibrationTimer, delay);
|
273
|
+
};
|
274
|
+
|
275
|
+
Plugin.prototype.enable = function() {
|
276
|
+
if (!this.enabled) {
|
277
|
+
this.enabled = true;
|
278
|
+
if (this.orientationSupport) {
|
279
|
+
this.portrait = null;
|
280
|
+
window.addEventListener('deviceorientation', this.onDeviceOrientation);
|
281
|
+
setTimeout(this.onOrientationTimer, this.supportDelay);
|
282
|
+
} else {
|
283
|
+
this.cx = 0;
|
284
|
+
this.cy = 0;
|
285
|
+
this.portrait = false;
|
286
|
+
window.addEventListener('mousemove', this.onMouseMove);
|
287
|
+
}
|
288
|
+
window.addEventListener('resize', this.onWindowResize);
|
289
|
+
this.raf = requestAnimationFrame(this.onAnimationFrame);
|
290
|
+
}
|
291
|
+
};
|
292
|
+
|
293
|
+
Plugin.prototype.disable = function() {
|
294
|
+
if (this.enabled) {
|
295
|
+
this.enabled = false;
|
296
|
+
if (this.orientationSupport) {
|
297
|
+
window.removeEventListener('deviceorientation', this.onDeviceOrientation);
|
298
|
+
} else {
|
299
|
+
window.removeEventListener('mousemove', this.onMouseMove);
|
300
|
+
}
|
301
|
+
window.removeEventListener('resize', this.onWindowResize);
|
302
|
+
cancelAnimationFrame(this.raf);
|
303
|
+
}
|
304
|
+
};
|
305
|
+
|
306
|
+
Plugin.prototype.calibrate = function(x, y) {
|
307
|
+
this.calibrateX = x === undefined ? this.calibrateX : x;
|
308
|
+
this.calibrateY = y === undefined ? this.calibrateY : y;
|
309
|
+
};
|
310
|
+
|
311
|
+
Plugin.prototype.invert = function(x, y) {
|
312
|
+
this.invertX = x === undefined ? this.invertX : x;
|
313
|
+
this.invertY = y === undefined ? this.invertY : y;
|
314
|
+
};
|
315
|
+
|
316
|
+
Plugin.prototype.friction = function(x, y) {
|
317
|
+
this.frictionX = x === undefined ? this.frictionX : x;
|
318
|
+
this.frictionY = y === undefined ? this.frictionY : y;
|
319
|
+
};
|
320
|
+
|
321
|
+
Plugin.prototype.scalar = function(x, y) {
|
322
|
+
this.scalarX = x === undefined ? this.scalarX : x;
|
323
|
+
this.scalarY = y === undefined ? this.scalarY : y;
|
324
|
+
};
|
325
|
+
|
326
|
+
Plugin.prototype.limit = function(x, y) {
|
327
|
+
this.limitX = x === undefined ? this.limitX : x;
|
328
|
+
this.limitY = y === undefined ? this.limitY : y;
|
329
|
+
};
|
330
|
+
|
331
|
+
Plugin.prototype.origin = function(x, y) {
|
332
|
+
this.originX = x === undefined ? this.originX : x;
|
333
|
+
this.originY = y === undefined ? this.originY : y;
|
334
|
+
};
|
335
|
+
|
336
|
+
Plugin.prototype.clamp = function(value, min, max) {
|
337
|
+
value = Math.max(value, min);
|
338
|
+
value = Math.min(value, max);
|
339
|
+
return value;
|
340
|
+
};
|
341
|
+
|
342
|
+
Plugin.prototype.css = function(element, property, value) {
|
343
|
+
var jsProperty = this.propertyCache[property];
|
344
|
+
if (!jsProperty) {
|
345
|
+
for (var i = 0, l = this.vendors.length; i < l; i++) {
|
346
|
+
if (this.vendors[i] !== null) {
|
347
|
+
jsProperty = $.camelCase(this.vendors[i][1] + '-' + property);
|
348
|
+
} else {
|
349
|
+
jsProperty = property;
|
350
|
+
}
|
351
|
+
if (element.style[jsProperty] !== undefined) {
|
352
|
+
this.propertyCache[property] = jsProperty;
|
353
|
+
break;
|
354
|
+
}
|
355
|
+
}
|
356
|
+
}
|
357
|
+
element.style[jsProperty] = value;
|
358
|
+
};
|
359
|
+
|
360
|
+
Plugin.prototype.accelerate = function($element) {
|
361
|
+
for (var i = 0, l = $element.length; i < l; i++) {
|
362
|
+
var element = $element[i];
|
363
|
+
this.css(element, 'transform', 'translate3d(0,0,0)');
|
364
|
+
this.css(element, 'transform-style', 'preserve-3d');
|
365
|
+
this.css(element, 'backface-visibility', 'hidden');
|
366
|
+
}
|
367
|
+
};
|
368
|
+
|
369
|
+
Plugin.prototype.setPosition = function(element, x, y) {
|
370
|
+
x += 'px';
|
371
|
+
y += 'px';
|
372
|
+
if (this.transform3DSupport) {
|
373
|
+
this.css(element, 'transform', 'translate3d('+x+','+y+',0)');
|
374
|
+
} else if (this.transform2DSupport) {
|
375
|
+
this.css(element, 'transform', 'translate('+x+','+y+')');
|
376
|
+
} else {
|
377
|
+
element.style.left = x;
|
378
|
+
element.style.top = y;
|
379
|
+
}
|
380
|
+
};
|
381
|
+
|
382
|
+
Plugin.prototype.onOrientationTimer = function(event) {
|
383
|
+
if (this.orientationSupport && this.orientationStatus === 0) {
|
384
|
+
this.disable();
|
385
|
+
this.orientationSupport = false;
|
386
|
+
this.enable();
|
387
|
+
}
|
388
|
+
};
|
389
|
+
|
390
|
+
Plugin.prototype.onCalibrationTimer = function(event) {
|
391
|
+
this.calibrationFlag = true;
|
392
|
+
};
|
393
|
+
|
394
|
+
Plugin.prototype.onWindowResize = function(event) {
|
395
|
+
this.updateDimensions();
|
396
|
+
};
|
397
|
+
|
398
|
+
Plugin.prototype.onAnimationFrame = function() {
|
399
|
+
this.updateBounds();
|
400
|
+
var dx = this.ix - this.cx;
|
401
|
+
var dy = this.iy - this.cy;
|
402
|
+
if ((Math.abs(dx) > this.calibrationThreshold) || (Math.abs(dy) > this.calibrationThreshold)) {
|
403
|
+
this.queueCalibration(0);
|
404
|
+
}
|
405
|
+
if (this.portrait) {
|
406
|
+
this.mx = this.calibrateX ? dy : this.iy;
|
407
|
+
this.my = this.calibrateY ? dx : this.ix;
|
408
|
+
} else {
|
409
|
+
this.mx = this.calibrateX ? dx : this.ix;
|
410
|
+
this.my = this.calibrateY ? dy : this.iy;
|
411
|
+
}
|
412
|
+
this.mx *= this.ew * (this.scalarX / 100);
|
413
|
+
this.my *= this.eh * (this.scalarY / 100);
|
414
|
+
if (!isNaN(parseFloat(this.limitX))) {
|
415
|
+
this.mx = this.clamp(this.mx, -this.limitX, this.limitX);
|
416
|
+
}
|
417
|
+
if (!isNaN(parseFloat(this.limitY))) {
|
418
|
+
this.my = this.clamp(this.my, -this.limitY, this.limitY);
|
419
|
+
}
|
420
|
+
this.vx += (this.mx - this.vx) * this.frictionX;
|
421
|
+
this.vy += (this.my - this.vy) * this.frictionY;
|
422
|
+
for (var i = 0, l = this.$layers.length; i < l; i++) {
|
423
|
+
var depthX = this.depthsX[i];
|
424
|
+
var depthY = this.depthsY[i];
|
425
|
+
var layer = this.$layers[i];
|
426
|
+
var xOffset = this.vx * (depthX * (this.invertX ? -1 : 1));
|
427
|
+
var yOffset = this.vy * (depthY * (this.invertY ? -1 : 1));
|
428
|
+
this.setPosition(layer, xOffset, yOffset);
|
429
|
+
}
|
430
|
+
this.raf = requestAnimationFrame(this.onAnimationFrame);
|
431
|
+
};
|
432
|
+
|
433
|
+
Plugin.prototype.onDeviceOrientation = function(event) {
|
434
|
+
|
435
|
+
// Validate environment and event properties.
|
436
|
+
if (!this.desktop && event.beta !== null && event.gamma !== null) {
|
437
|
+
|
438
|
+
// Set orientation status.
|
439
|
+
this.orientationStatus = 1;
|
440
|
+
|
441
|
+
// Extract Rotation
|
442
|
+
var x = (event.beta || 0) / MAGIC_NUMBER; // -90 :: 90
|
443
|
+
var y = (event.gamma || 0) / MAGIC_NUMBER; // -180 :: 180
|
444
|
+
|
445
|
+
// Detect Orientation Change
|
446
|
+
var portrait = window.innerHeight > window.innerWidth;
|
447
|
+
if (this.portrait !== portrait) {
|
448
|
+
this.portrait = portrait;
|
449
|
+
this.calibrationFlag = true;
|
450
|
+
}
|
451
|
+
|
452
|
+
// Set Calibration
|
453
|
+
if (this.calibrationFlag) {
|
454
|
+
this.calibrationFlag = false;
|
455
|
+
this.cx = x;
|
456
|
+
this.cy = y;
|
457
|
+
}
|
458
|
+
|
459
|
+
// Set Input
|
460
|
+
this.ix = x;
|
461
|
+
this.iy = y;
|
462
|
+
}
|
463
|
+
};
|
464
|
+
|
465
|
+
Plugin.prototype.onMouseMove = function(event) {
|
466
|
+
|
467
|
+
// Cache mouse coordinates.
|
468
|
+
var clientX = event.clientX;
|
469
|
+
var clientY = event.clientY;
|
470
|
+
|
471
|
+
// Calculate Mouse Input
|
472
|
+
if (!this.orientationSupport && this.relativeInput) {
|
473
|
+
|
474
|
+
// Clip mouse coordinates inside element bounds.
|
475
|
+
if (this.clipRelativeInput) {
|
476
|
+
clientX = Math.max(clientX, this.ex);
|
477
|
+
clientX = Math.min(clientX, this.ex + this.ew);
|
478
|
+
clientY = Math.max(clientY, this.ey);
|
479
|
+
clientY = Math.min(clientY, this.ey + this.eh);
|
480
|
+
}
|
481
|
+
|
482
|
+
// Calculate input relative to the element.
|
483
|
+
this.ix = (clientX - this.ex - this.ecx) / this.erx;
|
484
|
+
this.iy = (clientY - this.ey - this.ecy) / this.ery;
|
485
|
+
|
486
|
+
} else {
|
487
|
+
|
488
|
+
// Calculate input relative to the window.
|
489
|
+
this.ix = (clientX - this.wcx) / this.wrx;
|
490
|
+
this.iy = (clientY - this.wcy) / this.wry;
|
491
|
+
}
|
492
|
+
};
|
493
|
+
|
494
|
+
var API = {
|
495
|
+
enable: Plugin.prototype.enable,
|
496
|
+
disable: Plugin.prototype.disable,
|
497
|
+
updateLayers: Plugin.prototype.updateLayers,
|
498
|
+
calibrate: Plugin.prototype.calibrate,
|
499
|
+
friction: Plugin.prototype.friction,
|
500
|
+
invert: Plugin.prototype.invert,
|
501
|
+
scalar: Plugin.prototype.scalar,
|
502
|
+
limit: Plugin.prototype.limit,
|
503
|
+
origin: Plugin.prototype.origin
|
504
|
+
};
|
505
|
+
|
506
|
+
$.fn[NAME] = function (value) {
|
507
|
+
var args = arguments;
|
508
|
+
return this.each(function () {
|
509
|
+
var $this = $(this);
|
510
|
+
var plugin = $this.data(NAME);
|
511
|
+
if (!plugin) {
|
512
|
+
plugin = new Plugin(this, value);
|
513
|
+
$this.data(NAME, plugin);
|
514
|
+
}
|
515
|
+
if (API[value]) {
|
516
|
+
plugin[value].apply(plugin, Array.prototype.slice.call(args, 1));
|
517
|
+
}
|
518
|
+
});
|
519
|
+
};
|
520
|
+
|
521
|
+
})(window.jQuery || window.Zepto, window, document);
|