Page Builder by SiteOrigin - Version 2.4.9

Version Description

  • May 26 2016 =
  • Improved parallax library to upscale images to ensure enough of a parallax.
  • Allow negative values in measurement fields.
Download this release

Release Info

Developer gpriday
Plugin Icon 128x128 Page Builder by SiteOrigin
Version 2.4.9
Comparing to
See all releases

Code changes from version 2.4.8 to 2.4.9

Files changed (5) hide show
  1. inc/styles.php +2 -2
  2. js/siteorigin-parallax.js +40 -33
  3. js/siteorigin-parallax.min.js +1 -1
  4. readme.txt +6 -2
  5. siteorigin-panels.php +2 -2
inc/styles.php CHANGED
@@ -328,7 +328,7 @@ function siteorigin_panels_sanitize_style_fields( $section, $styles ){
328
  case 'measurement' :
329
  $measurements = array_map('preg_quote', siteorigin_panels_style_get_measurements_list() );
330
  if (!empty($field['multiple'])) {
331
- if (preg_match_all('/(?:([0-9\.,]+).*?(' . implode('|', $measurements) . ')+)/', $styles[$k], $match)) {
332
  $return[$k] = $styles[$k];
333
  }
334
  else {
@@ -336,7 +336,7 @@ function siteorigin_panels_sanitize_style_fields( $section, $styles ){
336
  }
337
  }
338
  else {
339
- if (preg_match('/([0-9\.,]+).*?(' . implode('|', $measurements) . ')/', $styles[$k], $match)) {
340
  $return[$k] = $match[1] . $match[2];
341
  }
342
  else {
328
  case 'measurement' :
329
  $measurements = array_map('preg_quote', siteorigin_panels_style_get_measurements_list() );
330
  if (!empty($field['multiple'])) {
331
+ if (preg_match_all('/(?:(-?[0-9\.,]+).*?(' . implode('|', $measurements) . ')+)/', $styles[$k], $match)) {
332
  $return[$k] = $styles[$k];
333
  }
334
  else {
336
  }
337
  }
338
  else {
339
+ if (preg_match('/([-?0-9\.,]+).*?(' . implode('|', $measurements) . ')/', $styles[$k], $match)) {
340
  $return[$k] = $match[1] . $match[2];
341
  }
342
  else {
js/siteorigin-parallax.js CHANGED
@@ -37,7 +37,9 @@
37
  $$.outerWidth(),
38
  $$.outerHeight()
39
  ];
 
40
  var bounding = $$[0].getBoundingClientRect();
 
41
 
42
  if( $$.data('siteorigin-parallax-init') === undefined ) {
43
  // Do the initial setup
@@ -48,7 +50,6 @@
48
 
49
  var limitMotion;
50
  if( options.limitMotion === 'auto' ) {
51
- var windowHeight = $(window ).outerHeight();
52
  if( windowHeight < 720 ) {
53
  limitMotion = 0.55;
54
  } else if( windowHeight > 1300 ) {
@@ -61,55 +62,60 @@
61
  }
62
 
63
  // What percent is this through a screen cycle
64
- // 0 is when the bottom of the wrapper is at the top of the screen
65
  // 1 is when the top of the wrapper is at the bottom of the screen
66
- var position = ( bounding.bottom + ( bounding.top - $(window ).outerHeight() ) ) / ( $(window ).outerHeight() + bounding.height );
67
  var percent = ( position - 1 ) / - 2;
68
  var topPosition = 0;
69
  var limitScale = 1;
 
70
 
71
  // Do the setup for every time something changes
72
  if( options.backgroundSizing === 'scaled' ) {
73
- $$.css( 'background-size', 'cover' );
74
-
75
- // The amount of X scaling
76
- var scaleX = wrapperSize[0] / options.backgroundSize[0];
77
-
78
- // The amount of Y scaling
79
- var scaleY = wrapperSize[1] / options.backgroundSize[1];
80
-
81
- if( scaleY < scaleX ) {
82
- // Work out the top position
83
- if( bounding.top > - wrapperSize[1] && bounding.bottom - $(window ).outerHeight() < wrapperSize[1] ) {
84
- // This is the scaled background height
85
- var backgroundHeight = options.backgroundSize[1] * scaleX;
86
-
87
- // Check if we need to limit the amount of motion in the background image
88
- if( limitMotion && backgroundHeight > $( window ).outerHeight() * limitMotion ) {
89
- // Work out how much to scale percent position based on how much motion we want.
90
- limitScale = ( $( window ).outerHeight() * limitMotion ) / ( backgroundHeight );
91
- // Percent is scaled so that the midpoint is still 0.5
92
- percent = (percent * limitScale) + ( ( 1 - limitScale ) / 2 );
93
- }
94
 
95
- topPosition = - ( backgroundHeight - wrapperSize[1] ) * percent;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
96
  }
 
97
 
98
- $$.css( 'background-position', '0px ' + topPosition + 'px' );
99
-
100
- } else {
101
- // There is no space for a vertical parallax
102
- $$.css( 'background-position', '50% 50%' );
103
  }
 
 
 
104
  } else if( options.backgroundSizing === 'original' ) {
105
  // See scaled version or explanation of this code.
106
- if( limitMotion && options.backgroundSize[1] > $( window ).outerHeight() * limitMotion ) {
107
- limitScale = ( $( window ).outerHeight() * limitMotion ) / ( options.backgroundSize[1] );
108
  percent = (percent * limitScale) + ( ( 1 - limitScale ) / 2 );
109
  }
110
 
111
  // In this case, the background height is always the background size
112
- topPosition = - ( options.backgroundSize[1] - wrapperSize[1] ) * percent;
113
 
114
  // This is a version with no scaling
115
  $$.css( 'background-size', 'auto' );
@@ -117,6 +123,7 @@
117
  }
118
  }
119
  catch( err ) {
 
120
  $$.css( {
121
  'background-size': options.backgroundSizing === 'scaled' ? 'cover' : 'auto',
122
  'background-position': '50% 50%'
37
  $$.outerWidth(),
38
  $$.outerHeight()
39
  ];
40
+
41
  var bounding = $$[0].getBoundingClientRect();
42
+ var windowHeight = $( window ).outerHeight();
43
 
44
  if( $$.data('siteorigin-parallax-init') === undefined ) {
45
  // Do the initial setup
50
 
51
  var limitMotion;
52
  if( options.limitMotion === 'auto' ) {
 
53
  if( windowHeight < 720 ) {
54
  limitMotion = 0.55;
55
  } else if( windowHeight > 1300 ) {
62
  }
63
 
64
  // What percent is this through a screen cycle
65
+ // -1 is when the bottom of the wrapper is at the top of the screen
66
  // 1 is when the top of the wrapper is at the bottom of the screen
67
+ var position = ( bounding.bottom + ( bounding.top - windowHeight ) ) / ( windowHeight + bounding.height );
68
  var percent = ( position - 1 ) / - 2;
69
  var topPosition = 0;
70
  var limitScale = 1;
71
+ var backgroundSize = options.backgroundSize;
72
 
73
  // Do the setup for every time something changes
74
  if( options.backgroundSizing === 'scaled' ) {
75
+ // This is the required Y height to create a parallax effect
76
+ var finalY = wrapperSize[1] / ( limitMotion ? limitMotion : 1 );
77
+ var scaleBG = wrapperSize[0] / backgroundSize[0]; // The initial scaling is based on container width
78
+
79
+ if( finalY > backgroundSize[1] * scaleBG ) {
80
+ // This image wouldn't be tall enough to give a decent parallax effect, so we'll scale it up
81
+ scaleBG = finalY / backgroundSize[1];
82
+ limitMotion = false;
83
+ }
 
 
 
 
 
 
 
 
 
 
 
 
84
 
85
+ $$.css(
86
+ 'background-size',
87
+ ( backgroundSize[0] * scaleBG ) + 'px ' +
88
+ ( backgroundSize[1] * scaleBG ) + 'px'
89
+ );
90
+
91
+ // Work out the top position
92
+ if( bounding.top > - wrapperSize[1] && bounding.bottom - windowHeight < wrapperSize[1] ) {
93
+ // This is the scaled background height
94
+ var backgroundHeight = backgroundSize[1] * scaleBG;
95
+
96
+ // Check if we need to limit the amount of motion in the background image
97
+ if( limitMotion && backgroundHeight > windowHeight * limitMotion ) {
98
+ // Work out how much to scale percent position based on how much motion we want.
99
+ limitScale = ( windowHeight * limitMotion ) / ( backgroundHeight );
100
+ // Percent is scaled so that the midpoint is still 0.5
101
+ percent = ( percent * limitScale ) + ( ( 1 - limitScale ) / 2 );
102
  }
103
+ // console.log( percent );
104
 
105
+ topPosition = - ( backgroundHeight - wrapperSize[1] ) * percent;
 
 
 
 
106
  }
107
+
108
+ $$.css( 'background-position', '50% ' + topPosition + 'px' );
109
+
110
  } else if( options.backgroundSizing === 'original' ) {
111
  // See scaled version or explanation of this code.
112
+ if( limitMotion && backgroundSize[1] > windowHeight * limitMotion ) {
113
+ limitScale = ( windowHeight * limitMotion ) / ( backgroundSize[1] );
114
  percent = (percent * limitScale) + ( ( 1 - limitScale ) / 2 );
115
  }
116
 
117
  // In this case, the background height is always the background size
118
+ topPosition = - ( backgroundSize[1] - wrapperSize[1] ) * percent;
119
 
120
  // This is a version with no scaling
121
  $$.css( 'background-size', 'auto' );
123
  }
124
  }
125
  catch( err ) {
126
+ console.log( err.message );
127
  $$.css( {
128
  'background-size': options.backgroundSizing === 'scaled' ? 'cover' : 'auto',
129
  'background-position': '50% 50%'
js/siteorigin-parallax.min.js CHANGED
@@ -1 +1 @@
1
- !function(i){i.fn.siteOriginParallax=function(o){var n=i(this);if("refreshParallax"===o)return n.trigger("refreshParallax");o=i.extend({backgroundUrl:null,backgroundSize:null,backgroundAspectRatio:null,backgroundSizing:"scaled",limitMotion:"auto"},o),null===o.backgroundAspectRatio&&(o.backgroundAspectRatio=o.backgroundSize[0]/o.backgroundSize[1]);var a=function(){try{var a=[n.outerWidth(),n.outerHeight()],r=n[0].getBoundingClientRect();void 0===n.data("siteorigin-parallax-init")&&n.css({"background-image":"url("+o.backgroundUrl+")"});var t;if("auto"===o.limitMotion){var e=i(window).outerHeight();t=720>e?.55:e>1300?.45:-17e-5*(e-720)+.55}else t=o.limitMotion;var u=(r.bottom+(r.top-i(window).outerHeight()))/(i(window).outerHeight()+r.height),c=(u-1)/-2,g=0,d=1;if("scaled"===o.backgroundSizing){n.css("background-size","cover");var s=a[0]/o.backgroundSize[0],l=a[1]/o.backgroundSize[1];if(s>l){if(r.top>-a[1]&&r.bottom-i(window).outerHeight()<a[1]){var b=o.backgroundSize[1]*s;t&&b>i(window).outerHeight()*t&&(d=i(window).outerHeight()*t/b,c=c*d+(1-d)/2),g=-(b-a[1])*c}n.css("background-position","0px "+g+"px")}else n.css("background-position","50% 50%")}else"original"===o.backgroundSizing&&(t&&o.backgroundSize[1]>i(window).outerHeight()*t&&(d=i(window).outerHeight()*t/o.backgroundSize[1],c=c*d+(1-d)/2),g=-(o.backgroundSize[1]-a[1])*c,n.css("background-size","auto"),n.css("background-position","50% "+g+"px"))}catch(k){n.css({"background-size":"scaled"===o.backgroundSizing?"cover":"auto","background-position":"50% 50%"})}};a(),i(window).on("scroll",a),i(window).on("resize",a),i(window).on("panelsStretchRows",a),n.on("refreshParallax",a)}}(jQuery),jQuery(function(i){i("[data-siteorigin-parallax]").each(function(){i(this).siteOriginParallax(i(this).data("siteorigin-parallax"))})});
1
+ !function(i){i.fn.siteOriginParallax=function(a){var o=i(this);if("refreshParallax"===a)return o.trigger("refreshParallax");a=i.extend({backgroundUrl:null,backgroundSize:null,backgroundAspectRatio:null,backgroundSizing:"scaled",limitMotion:"auto"},a),null===a.backgroundAspectRatio&&(a.backgroundAspectRatio=a.backgroundSize[0]/a.backgroundSize[1]);var n=function(){try{var n=[o.outerWidth(),o.outerHeight()],r=o[0].getBoundingClientRect(),t=i(window).outerHeight();void 0===o.data("siteorigin-parallax-init")&&o.css({"background-image":"url("+a.backgroundUrl+")"});var e;e="auto"===a.limitMotion?720>t?.55:t>1300?.45:-17e-5*(t-720)+.55:a.limitMotion;var c=(r.bottom+(r.top-t))/(t+r.height),s=(c-1)/-2,l=0,u=1,g=a.backgroundSize;if("scaled"===a.backgroundSizing){var d=n[1]/(e?e:1),b=n[0]/g[0];if(d>g[1]*b&&(b=d/g[1],e=!1),o.css("background-size",g[0]*b+"px "+g[1]*b+"px"),r.top>-n[1]&&r.bottom-t<n[1]){var k=g[1]*b;e&&k>t*e&&(u=t*e/k,s=s*u+(1-u)/2),l=-(k-n[1])*s}o.css("background-position","50% "+l+"px")}else"original"===a.backgroundSizing&&(e&&g[1]>t*e&&(u=t*e/g[1],s=s*u+(1-u)/2),l=-(g[1]-n[1])*s,o.css("background-size","auto"),o.css("background-position","50% "+l+"px"))}catch(p){console.log(p.message),o.css({"background-size":"scaled"===a.backgroundSizing?"cover":"auto","background-position":"50% 50%"})}};n(),i(window).on("scroll",n),i(window).on("resize",n),i(window).on("panelsStretchRows",n),o.on("refreshParallax",n)}}(jQuery),jQuery(function(i){i("[data-siteorigin-parallax]").each(function(){i(this).siteOriginParallax(i(this).data("siteorigin-parallax"))})});
readme.txt CHANGED
@@ -2,8 +2,8 @@
2
  Tags: page builder, responsive, widget, widgets, builder, page, admin, gallery, content, cms, pages, post, css, layout, grid
3
  Requires at least: 4.0
4
  Tested up to: 4.5.2
5
- Stable tag: 2.4.8
6
- Build time: 2016-05-13T17:50:14+02:00
7
  License: GPLv3
8
  License URI: http://www.gnu.org/licenses/gpl.html
9
  Donate link: http://siteorigin.com/page-builder/#donate
@@ -96,6 +96,10 @@ We've tried to ensure that Page Builder is compatible with most plugin widgets.
96
 
97
  == Changelog ==
98
 
 
 
 
 
99
  = 2.4.8 - May 13 2016 =
100
  * Reverted Wordfence fix from 2.4.7 - it raised other issues.
101
 
2
  Tags: page builder, responsive, widget, widgets, builder, page, admin, gallery, content, cms, pages, post, css, layout, grid
3
  Requires at least: 4.0
4
  Tested up to: 4.5.2
5
+ Stable tag: 2.4.9
6
+ Build time: 2016-05-26T11:48:14+02:00
7
  License: GPLv3
8
  License URI: http://www.gnu.org/licenses/gpl.html
9
  Donate link: http://siteorigin.com/page-builder/#donate
96
 
97
  == Changelog ==
98
 
99
+ = 2.4.9 - May 26 2016 =
100
+ * Improved parallax library to upscale images to ensure enough of a parallax.
101
+ * Allow negative values in measurement fields.
102
+
103
  = 2.4.8 - May 13 2016 =
104
  * Reverted Wordfence fix from 2.4.7 - it raised other issues.
105
 
siteorigin-panels.php CHANGED
@@ -3,7 +3,7 @@
3
  Plugin Name: Page Builder by SiteOrigin
4
  Plugin URI: https://siteorigin.com/page-builder/
5
  Description: A drag and drop, responsive page builder that simplifies building your website.
6
- Version: 2.4.8
7
  Author: SiteOrigin
8
  Author URI: https://siteorigin.com
9
  License: GPL3
@@ -11,7 +11,7 @@ License URI: http://www.gnu.org/licenses/gpl.html
11
  Donate link: http://siteorigin.com/page-builder/#donate
12
  */
13
 
14
- define('SITEORIGIN_PANELS_VERSION', '2.4.8');
15
  if ( ! defined('SITEORIGIN_PANELS_JS_SUFFIX' ) ) {
16
  define('SITEORIGIN_PANELS_JS_SUFFIX', '.min');
17
  }
3
  Plugin Name: Page Builder by SiteOrigin
4
  Plugin URI: https://siteorigin.com/page-builder/
5
  Description: A drag and drop, responsive page builder that simplifies building your website.
6
+ Version: 2.4.9
7
  Author: SiteOrigin
8
  Author URI: https://siteorigin.com
9
  License: GPL3
11
  Donate link: http://siteorigin.com/page-builder/#donate
12
  */
13
 
14
+ define('SITEORIGIN_PANELS_VERSION', '2.4.9');
15
  if ( ! defined('SITEORIGIN_PANELS_JS_SUFFIX' ) ) {
16
  define('SITEORIGIN_PANELS_JS_SUFFIX', '.min');
17
  }