Skip to content

Commit

Permalink
fix(transformer): Try both cases of transformProp (firefox, ie10)
Browse files Browse the repository at this point in the history
  • Loading branch information
ajoslin committed Jul 30, 2013
1 parent 51500ce commit 761f7c2
Show file tree
Hide file tree
Showing 6 changed files with 115 additions and 69 deletions.
12 changes: 8 additions & 4 deletions Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,17 @@ module.exports = function(grunt) {
' */\n'
},
karma: {
watch: {
background: true,
options: {
configFile: 'test/karma.conf.js'
},
watch: {
background: true
},
continuous: {
singleRun: true,
configFile: 'test/karma.conf.js'
singleRun: true
},
travis: {
browsers: ['sauce_android', 'sauce_ie10']
}
},

Expand Down
14 changes: 9 additions & 5 deletions angular-scrolly.js
Original file line number Diff line number Diff line change
Expand Up @@ -219,9 +219,11 @@ angular.module('ajoslin.scrolly', [
};
function getRect(elm) {
var style = window.getComputedStyle(elm);
var offTop = parseInt(style['margin-top'], 10) + parseInt(style['padding-top'], 10);
var offBottom = parseInt(style['margin-bottom'], 10) + parseInt(style['padding-bottom'], 10);
var height = parseInt(style.height, 10);
var offTop = parseInt(style.getPropertyValue('margin-top'), 10) +
parseInt(style.getPropertyValue('padding-top'), 10);
var offBottom = parseInt(style.getPropertyValue('margin-bottom'), 10) +
parseInt(style.getPropertyValue('padding-bottom'), 10);
var height = parseInt(style.getPropertyValue('height'), 10);
return {
top: offTop,
bottom: offBottom,
Expand Down Expand Up @@ -357,7 +359,9 @@ angular.module('ajoslin.scrolly', [
var self = {};
var raw = elm[0];
self.$$calcPosition = function () {
var matrix = $window.getComputedStyle(raw)[transformProp].replace(/[^0-9-.,]/g, '').split(',');
var matrix = $window.getComputedStyle(raw)
.getPropertyValue(transformProp)
.replace(/[^0-9-.,]/g, '').split(',');
if (matrix.length > 1) {
return parseInt(matrix[5], 10);
} else {
Expand Down Expand Up @@ -412,4 +416,4 @@ angular.module('ajoslin.scrolly', [
return $transformer;
}
];
});
});
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,15 @@
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-clean": "~0.4.1",
"grunt-contrib-uglify": "~0.2.1",
"grunt-karma": "~0.4.4",
"grunt-karma": "~0.5.0",
"grunt-contrib-jshint": "~0.5.4",
"grunt-ngmin": "0.0.2",
"grunt-contrib-watch": "~0.4.3",
"grunt-contrib-copy": "~0.4.1",
"grunt-ngdocs": "git://github.com/m7r/grunt-ngdocs",
"shelljs": "~0.1.4",
"grunt-bump": "git://github.com/ajoslin/grunt-bump",
"grunt-conventional-changelog": "~0.1.0"
"grunt-conventional-changelog": "~0.1.0",
"karma": "~0.9.5"
}
}
15 changes: 7 additions & 8 deletions src/services/scroller.js
Original file line number Diff line number Diff line change
Expand Up @@ -137,15 +137,15 @@ angular.module('ajoslin.scrolly.scroller', [

$scroller.getContentRect = function(raw) {
var style = window.getComputedStyle(raw);
var offTop = parseInt(style['margin-top'], 10) +
parseInt(style['padding-top'], 10);
var offBottom = parseInt(style['margin-bottom'], 10) +
parseInt(style['padding-bottom'], 10);
var offTop = parseInt(style.getPropertyValue('margin-top'), 10) +
parseInt(style.getPropertyValue('padding-top'), 10);
var offBottom = parseInt(style.getPropertyValue('margin-bottom'), 10) +
parseInt(style.getPropertyValue('padding-bottom'), 10);

var top = parseInt(style.top, 10);
var bottom = parseInt(style.bottom, 10);
var top = parseInt(style.getPropertyValue('top'), 10);
var bottom = parseInt(style.getPropertyValue('bottom'), 10);

var height = parseInt(style.height, 10);
var height = parseInt(style.getPropertyValue('height'), 10);
return {
top: offTop + (isNaN(top) ? 0 : top),
bottom: offBottom + (isNaN(bottom) ? 0 : bottom),
Expand Down Expand Up @@ -229,7 +229,6 @@ angular.module('ajoslin.scrolly.scroller', [
if (self.outOfBounds(transformer.pos) || dragData.inactiveDrag) {
self.checkBoundaries();
} else {
console.log('momentum');
var momentum = self.momentum(dragData);
if (momentum.position !== transformer.pos) {
transformer.easeTo(
Expand Down
11 changes: 7 additions & 4 deletions src/services/transformer.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,10 @@ angular.module('ajoslin.scrolly.transformer', [])
};

this.$get = function($window, $nextFrame, $sniffer) {
var prefix = ($sniffer.vendorPrefix || '').toLowerCase();
var prefix = $sniffer.vendorPrefix;
var transformProp = prefix ? (prefix + 'Transform') : 'transform';
var transformPropDash = prefix ? ('-' + prefix + '-transform') : 'transform';
var transformPropLower = prefix ? (prefix.toLowerCase() + 'Transform') : 'transform';
var transformPropDash = prefix ? ('-' + prefix.toLowerCase() + '-transform') : 'transform';
var transitionProp = prefix ? (prefix + 'Transition') : 'transition';

/**
Expand Down Expand Up @@ -104,8 +105,10 @@ angular.module('ajoslin.scrolly.transformer', [])
//This method is only exposed for testing purposes
//Gets the current y transform of the element
self.$$calcPosition = function() {
var matrix = $window.getComputedStyle(raw)[transformProp]
.replace(/[^0-9-.,]/g,'').split(',');
var style = $window.getComputedStyle(raw);
var matrix = (style[transformProp] || style[transformPropLower] || '')
.replace(/[^0-9-.,]/g,'')
.split(',');
if (matrix.length > 1) {
return parseInt(matrix[_matrixIndex], 10);
} else {
Expand Down
127 changes: 81 additions & 46 deletions test/karma.conf.js
Original file line number Diff line number Diff line change
@@ -1,71 +1,106 @@
// Karma configuration
// Generated on Fri May 24 2013 16:26:57 GMT-0400 (EDT)
// Generated on Tue Jul 30 2013 07:32:11 GMT-0400 (EDT)

module.exports = function(config) {
config.set({

// base path, that will be used to resolve files and exclude
basePath = '../';
// base path, that will be used to resolve files and exclude
basePath: '../',


// list of files / patterns to load in the browser
files = [
JASMINE,
JASMINE_ADAPTER,
//Use jQuery in tests for easier event mocking
'test/helpers.js',
'lib/jquery.js',
'lib/angular.js',
'lib/angular-mocks.js',
'src/**/*.js'
];
// frameworks to use
frameworks: ['jasmine'],


// list of files to exclude
exclude = [

];
// list of files / patterns to load in the browser
files: [
'test/helpers.js',
'lib/jquery.js',
'lib/angular.js',
'lib/angular-mocks.js',
'src/**/*.js'
],

customLaunchers: {
'sauce_ios': {
base: 'SauceLabs',
platform: 'OS X 10.8',
browserName: 'iphone',
version: '6'
},
'sauce_android': {
base: 'SauceLabs',
platform: 'Linux',
browserName: 'android',
version: '4.0'
},
'sauce_chrome': {
base: 'SauceLabs',
platform: 'Linux',
browserName: 'chrome'
},
'sauce_firefox': {
base: 'SauceLabs',
platform: 'Linux',
browserName: 'firefox'
},
'sauce_ie': {
base: 'SauceLabs',
platform: 'Windows 8',
browserName: 'internet explorer',
version: '10'
}
},

// test results reporter to use
// possible values: 'dots', 'progress', 'junit'
reporters = ['progress'];
// list of files to exclude
exclude: [

],


// web server port
port = 9876;
// test results reporter to use
// possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
reporters: ['progress'],


// cli runner port
runnerPort = 9100;
// web server port
port: 9876,


// enable / disable colors in the output (reporters and logs)
colors = true;
// cli runner port
runnerPort: 9100,


// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel = LOG_INFO;
// enable / disable colors in the output (reporters and logs)
colors: true,


// enable / disable watching file and executing tests whenever any file changes
autoWatch = false;
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,


// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers = ['Chrome'];
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,


// If browser does not capture in given timeout [ms], kill it
captureTimeout = 60000;
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers: ['Chrome'],


// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun = false;
// If browser does not capture in given timeout [ms], kill it
captureTimeout: 60000,


// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false
});
};

0 comments on commit 761f7c2

Please sign in to comment.