outlayer
Advanced tools
Comparing version 1.4.0 to 1.4.1
{ | ||
"name": "outlayer", | ||
"version": "1.4.0", | ||
"version": "1.4.1", | ||
"description": "the brains and guts of a layout library", | ||
@@ -5,0 +5,0 @@ "main": "outlayer.js", |
# Changelog | ||
### v1.4.1 | ||
+ Trigger jQuery Events. Fixed [#6](https://github.com/metafizzy/outlayer/issues/6) | ||
+ Fix Safari `percentPosition` bug by checking and using percent values. Fixed [desandro/masonry#698](https://github.com/desandro/masonry/issues/698) | ||
+ Fix Safari bug with appended/prepended methods. Fixed [metafizzy/isotope#945](https://github.com/metafizzy/isotope/issues/945). | ||
+ Fixed sizing bug with `percentPosition` and border on container element | ||
## v1.4.0 | ||
@@ -4,0 +11,0 @@ |
92
item.js
@@ -165,4 +165,10 @@ /** | ||
var isOriginTop = layoutOptions.isOriginTop; | ||
var x = parseInt( style[ isOriginLeft ? 'left' : 'right' ], 10 ); | ||
var y = parseInt( style[ isOriginTop ? 'top' : 'bottom' ], 10 ); | ||
var xValue = style[ isOriginLeft ? 'left' : 'right' ]; | ||
var yValue = style[ isOriginTop ? 'top' : 'bottom' ]; | ||
var x = parseInt( xValue, 10 ); | ||
var y = parseInt( yValue, 10 ); | ||
// convert percent to pixels | ||
var layoutSize = this.layout.size; | ||
x = xValue.indexOf('%') != -1 ? ( x / 100 ) * layoutSize.width : x; | ||
y = yValue.indexOf('%') != -1 ? ( y / 100 ) * layoutSize.height : y; | ||
@@ -173,3 +179,2 @@ // clean up 'auto' or other non-integer values | ||
// remove padding from measurement | ||
var layoutSize = this.layout.size; | ||
x -= isOriginLeft ? layoutSize.paddingLeft : layoutSize.paddingRight; | ||
@@ -194,6 +199,4 @@ y -= isOriginTop ? layoutSize.paddingTop : layoutSize.paddingBottom; | ||
var x = this.position.x + layoutSize[ xPadding ]; | ||
// set in percentage | ||
x = layoutOptions.percentPosition && !layoutOptions.isHorizontal ? | ||
( ( x / layoutSize.width ) * 100 ) + '%' : x + 'px'; | ||
style[ xProperty ] = x; | ||
// set in percentage or pixels | ||
style[ xProperty ] = this.getXValue( x ); | ||
// reset other property | ||
@@ -208,6 +211,4 @@ style[ xResetProperty ] = ''; | ||
var y = this.position.y + layoutSize[ yPadding ]; | ||
// set in percentage | ||
y = layoutOptions.percentPosition && layoutOptions.isHorizontal ? | ||
( ( y / layoutSize.height ) * 100 ) + '%' : y + 'px'; | ||
style[ yProperty ] = y; | ||
// set in percentage or pixels | ||
style[ yProperty ] = this.getYValue( y ); | ||
// reset other property | ||
@@ -220,11 +221,13 @@ style[ yResetProperty ] = ''; | ||
Item.prototype.getXValue = function( x ) { | ||
var layoutOptions = this.layout.options; | ||
return layoutOptions.percentPosition && !layoutOptions.isHorizontal ? | ||
( ( x / this.layout.size.width ) * 100 ) + '%' : x + 'px'; | ||
}; | ||
// transform translate function | ||
var translate = is3d ? | ||
function( x, y ) { | ||
return 'translate3d(' + x + 'px, ' + y + 'px, 0)'; | ||
} : | ||
function( x, y ) { | ||
return 'translate(' + x + 'px, ' + y + 'px)'; | ||
}; | ||
Item.prototype.getYValue = function( y ) { | ||
var layoutOptions = this.layout.options; | ||
return layoutOptions.percentPosition && layoutOptions.isHorizontal ? | ||
( ( y / this.layout.size.height ) * 100 ) + '%' : y + 'px'; | ||
}; | ||
@@ -254,7 +257,3 @@ | ||
var transitionStyle = {}; | ||
// flip cooridinates if origin on right or bottom | ||
var layoutOptions = this.layout.options; | ||
transX = layoutOptions.isOriginLeft ? transX : -transX; | ||
transY = layoutOptions.isOriginTop ? transY : -transY; | ||
transitionStyle.transform = translate( transX, transY ); | ||
transitionStyle.transform = this.getTranslate( transX, transY ); | ||
@@ -270,2 +269,17 @@ this.transition({ | ||
Item.prototype.getTranslate = function( x, y ) { | ||
// flip cooridinates if origin on right or bottom | ||
var layoutOptions = this.layout.options; | ||
x = layoutOptions.isOriginLeft ? x : -x; | ||
y = layoutOptions.isOriginTop ? y : -y; | ||
x = this.getXValue( x ); | ||
y = this.getYValue( y ); | ||
if ( is3d ) { | ||
return 'translate3d(' + x + ', ' + y + ', 0)'; | ||
} | ||
return 'translate(' + x + ', ' + y + ')'; | ||
}; | ||
// non transition + transform support | ||
@@ -350,9 +364,16 @@ Item.prototype.goTo = function( x, y ) { | ||
var itemTransitionProperties = transformProperty && ( utils.toDashed( transformProperty ) + | ||
',opacity' ); | ||
// dash before all cap letters, including first for | ||
// WebkitTransform => -webkit-transform | ||
function toDashedAll( str ) { | ||
return str.replace( /([A-Z])/g, function( $1 ) { | ||
return '-' + $1.toLowerCase(); | ||
}); | ||
} | ||
var transitionProps = 'opacity,' + | ||
toDashedAll( vendorProperties.transform || 'transform' ); | ||
Item.prototype.enableTransition = function(/* style */) { | ||
// only enable if not already transitioning | ||
// bug in IE10 were re-setting transition style will prevent | ||
// transitionend event from triggering | ||
// HACK changing transitionProperty during a transition | ||
// will cause transition to jump | ||
if ( this.isTransitioning ) { | ||
@@ -362,13 +383,14 @@ return; | ||
// make transition: foo, bar, baz from style object | ||
// TODO uncomment this bit when IE10 bug is resolved | ||
// var transitionValue = []; | ||
// make `transition: foo, bar, baz` from style object | ||
// HACK un-comment this when enableTransition can work | ||
// while a transition is happening | ||
// var transitionValues = []; | ||
// for ( var prop in style ) { | ||
// // dash-ify camelCased properties like WebkitTransition | ||
// transitionValue.push( toDash( prop ) ); | ||
// prop = vendorProperties[ prop ] || prop; | ||
// transitionValues.push( toDashedAll( prop ) ); | ||
// } | ||
// enable transition styles | ||
// HACK always enable transform,opacity for IE10 | ||
this.css({ | ||
transitionProperty: itemTransitionProperties, | ||
transitionProperty: transitionProps, | ||
transitionDuration: this.layout.options.transitionDuration | ||
@@ -375,0 +397,0 @@ }); |
/*! | ||
* Outlayer v1.4.0 | ||
* Outlayer v1.4.1 | ||
* the brains and guts of a layout library | ||
@@ -417,3 +417,3 @@ * MIT license | ||
function onComplete() { | ||
_this.emitEvent( eventName + 'Complete', [ items ] ); | ||
_this.dispatchEvent( eventName + 'Complete', null, [ items ] ); | ||
} | ||
@@ -442,2 +442,28 @@ | ||
/** | ||
* emits events via eventEmitter and jQuery events | ||
* @param {String} type - name of event | ||
* @param {Event} event - original event | ||
* @param {Array} args - extra arguments | ||
*/ | ||
Outlayer.prototype.dispatchEvent = function( type, event, args ) { | ||
// add original event to arguments | ||
var emitArgs = event ? [ event ].concat( args ) : args; | ||
this.emitEvent( type, emitArgs ); | ||
if ( jQuery ) { | ||
// set this.$element | ||
this.$element = this.$element || jQuery( this.element ); | ||
if ( event ) { | ||
// create jQuery event | ||
var $event = jQuery.Event( event ); | ||
$event.type = type; | ||
this.$element.trigger( $event, args ); | ||
} else { | ||
// just trigger with type if no event available | ||
this.$element.trigger( type, args ); | ||
} | ||
} | ||
}; | ||
// -------------------------- ignore & stamps -------------------------- // | ||
@@ -444,0 +470,0 @@ |
{ | ||
"name": "outlayer", | ||
"version": "1.4.0", | ||
"version": "1.4.1", | ||
"description": "the brains and guts of a layout library", | ||
@@ -5,0 +5,0 @@ "main": "outlayer.js", |
102632
2253