From 5a087c7abbf0d856c26524de32c48a58c130092d Mon Sep 17 00:00:00 2001 From: Jacko Hoogeveen Date: Wed, 11 Jul 2012 20:59:13 +0200 Subject: [PATCH 1/9] fixed minor typo's --- source/jarallax.js | 2 +- source/jarallax_object.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/source/jarallax.js b/source/jarallax.js index 1729822..f36adf3 100644 --- a/source/jarallax.js +++ b/source/jarallax.js @@ -162,7 +162,7 @@ Jarallax.prototype.setDefault = function (selector, values) { if (JarallaxTools.isValues(values)) { - var newDefault = new JaralaxObject(selector, values); + var newDefault = new JarallaxObject(selector, values); newDefault.activate(); this.defaultValues.push(newDefault); } diff --git a/source/jarallax_object.js b/source/jarallax_object.js index aa42f50..2e1460c 100644 --- a/source/jarallax_object.js +++ b/source/jarallax_object.js @@ -2,12 +2,12 @@ // Jarallax object class /////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////// -JaralaxObject = function (selector, values) { +JarallaxObject = function (selector, values) { this.selector = selector; this.values = values; }; -JaralaxObject.prototype.activate = function (position) { +JarallaxObject.prototype.activate = function (position) { for (var i in this.values) { $(this.selector).css(i ,this.values[i]); } From 0bb375d528af45582091df7eac206eb454ba76c1 Mon Sep 17 00:00:00 2001 From: Jacko Hoogeveen Date: Wed, 11 Jul 2012 21:33:31 +0200 Subject: [PATCH 2/9] Fixed half pixel bug for idevices. Fixed bad updates idevices --- source/jarallax.js | 44 +++++++++++++++++------------------- source/jarallax_animation.js | 4 ++++ 2 files changed, 25 insertions(+), 23 deletions(-) diff --git a/source/jarallax.js b/source/jarallax.js index f36adf3..afa5a99 100644 --- a/source/jarallax.js +++ b/source/jarallax.js @@ -11,6 +11,7 @@ var Jarallax = function (controller) { this.animations = []; this.defaultValues = []; this.progress = 0.0; + this.prev_progress = 0.0; this.controllers = []; this.maxProgress = 1; this.timer = undefined; @@ -57,34 +58,31 @@ Jarallax.prototype.setProgress = function (progress, isWeak) { } else if (progress < 0) { progress = 0; } + this.prev_progress = this.progress; this.progress = progress; - - - - if (this.allowWeakProgress || !weak) { - this.previousTime = new Date(); - - this.currentTime = new Date(); + if(this.prev_progress !== progress) { + if (this.allowWeakProgress || !weak) { + this.previousTime = new Date(); + this.currentTime = new Date(); - var weak = isWeak || false; - - for (var defaultValue in this.defaultValues) { - this.defaultValues[defaultValue].activate(this.progress); - } - - for (var animation in this.animations) { - this.animations[animation].activate(this.progress); - } + var weak = isWeak || false; - for (var controller in this.controllers) { - this.controllers[controller].update(this.progress); + for (var defaultValue in this.defaultValues) { + this.defaultValues[defaultValue].activate(this.progress); + } + + for (var animation in this.animations) { + this.animations[animation].activate(this.progress); + } + + for (var controller in this.controllers) { + this.controllers[controller].update(this.progress); + } + + this.currentTime = new Date(); + this.stepSize = Math.max(this.currentTime - this.previousTime, this.stepSize); } - - this.currentTime = new Date(); - this.stepSize = Math.max(this.currentTime - this.previousTime, this.stepSize); } - - }; Jarallax.prototype.clearAnimations = function() { diff --git a/source/jarallax_animation.js b/source/jarallax_animation.js index 2f1273e..6221175 100644 --- a/source/jarallax_animation.js +++ b/source/jarallax_animation.js @@ -53,6 +53,10 @@ JarallaxAnimation.prototype.activate = function (progress) { var result = Jarallax.EASING[style.easing](currentTime, startValue , changeInValue, duration, style.power); + if(units == 'px'){ + result = parseInt(result, 10); + } + if(units !== '.'){ result+= units; } From 2b0ed9bf3ffa5778a84cd166188534f8199634fc Mon Sep 17 00:00:00 2001 From: CodeHunger Date: Wed, 8 Aug 2012 08:08:34 +0200 Subject: [PATCH 3/9] merge --- source/controllers/scroll.js | 35 +++++++---- source/jarallax.js | 109 +++++++++++++++++++++++++---------- 2 files changed, 103 insertions(+), 41 deletions(-) diff --git a/source/controllers/scroll.js b/source/controllers/scroll.js index 8d595b3..5ec4a55 100644 --- a/source/controllers/scroll.js +++ b/source/controllers/scroll.js @@ -3,16 +3,17 @@ //////////////////////////////////////////////////////////////////////////////// ControllerScroll = function(smoothing, scrollSpace) { this.target = $(window); + $(window).scrollTop(0); this.height = parseInt($("body").css('height'),10); this.scrollSpace = scrollSpace || this.height - this.target.height(); - + if (this.scrollSpace < 10) { this.height = parseInt($("#wrapper").css('height'),10); this.scrollSpace = this.height - this.target.height(); } - + this.smoothing = smoothing || false; - + this.targetProgress = 0; }; @@ -30,12 +31,24 @@ ControllerScroll.prototype.deactivate = function(jarallax) { ControllerScroll.prototype.onScroll = function(event) { var controller = event.data.scope; - + + if(controller.jarallax.jumping){ + if(!controller.jarallax.jumping_allowed) { + controller.jarallax.clearSmooth(controller.jarallax); + } + + //console.log('preventing default'); + //event.preventDefault(); + //return false; + } + + + if (controller.isActive) { var y = event.data.y || controller.target.scrollTop(); var progress = y/controller.scrollSpace; - - + + if(!controller.smoothing){ controller.jarallax.setProgress(progress, true); } else { @@ -54,13 +67,13 @@ ControllerScroll.prototype.smooth = function(externalScope) { } var oldProgress = scope.jarallax.progress; - + var animationSpace = scope.targetProgress - oldProgress; clearTimeout(scope.timer); - + if(animationSpace > 0.0001 || animationSpace < -0.0001){ var newProgress = oldProgress + animationSpace / 5; - + scope.timer = window.setTimeout(function(){ scope.smooth(scope);}, scope.jarallax.FPS_INTERVAL); scope.jarallax.setProgress(newProgress, true); @@ -71,8 +84,8 @@ ControllerScroll.prototype.smooth = function(externalScope) { ControllerScroll.prototype.update = function(progress) { var scrollPosition = progress * this.scrollSpace; - + if(!this.jarallax.allowWeakProgress) { - $('body').scrollTop(scrollPosition); + $(window).scrollTop(scrollPosition); } }; diff --git a/source/jarallax.js b/source/jarallax.js index afa5a99..9e1dd06 100644 --- a/source/jarallax.js +++ b/source/jarallax.js @@ -18,6 +18,7 @@ var Jarallax = function (controller) { this.allowWeakProgress = true; this.frameRate = this.FPS; this.stepSize = 0; + this.jumping = false; if (controller === undefined) { if($.browser.iDevice){ @@ -42,7 +43,7 @@ var Jarallax = function (controller) { for (var i in this.controllers) { this.controllers[i].activate(this); } - + this.frameChart = []; for(var j = 1; j <= 600; j++) { this.frameChart[j] = (1000 / j); @@ -57,7 +58,10 @@ Jarallax.prototype.setProgress = function (progress, isWeak) { progress = 1; } else if (progress < 0) { progress = 0; + }else{ + progress = Math.round(progress * 1000) / 1000; } +<<<<<<< HEAD this.prev_progress = this.progress; this.progress = progress; if(this.prev_progress !== progress) { @@ -79,6 +83,30 @@ Jarallax.prototype.setProgress = function (progress, isWeak) { this.controllers[controller].update(this.progress); } +======= + + if(this.progress != progress){ + this.progress = progress; + if (this.allowWeakProgress || !weak) { + this.previousTime = new Date(); + + this.currentTime = new Date(); + + var weak = isWeak || false; + + for (var defaultValue in this.defaultValues) { + this.defaultValues[defaultValue].activate(this.progress); + } + + for (var animation in this.animations) { + this.animations[animation].activate(this.progress); + } + + for (var controller in this.controllers) { + this.controllers[controller].update(this.progress); + } + +>>>>>>> adba2cf... Fixed firefox broken scroll bar. Fixed bug which only implements default values this.currentTime = new Date(); this.stepSize = Math.max(this.currentTime - this.previousTime, this.stepSize); } @@ -103,24 +131,28 @@ Jarallax.prototype.jumpToProgress = function (progress, time, fps) { } else if (progress.indexOf('%') != -1) { progress = parseFloat(progress) / 100; } - + + if(progress == this.progress) { + return false; + } + if (progress > 1) { progress = 1; } else if (progress < 0) { progress = 0; } - + this.smoothProperties = {}; this.smoothProperties.timeStep = 1000 / fps; this.smoothProperties.steps = time / this.smoothProperties.timeStep; this.smoothProperties.currentStep = 0; - + this.smoothProperties.startProgress = this.progress; this.smoothProperties.diffProgress = progress - this.progress; this.smoothProperties.previousValue = this.progress; this.smooth(); this.allowWeakProgress = false; - + return false; }; @@ -131,7 +163,7 @@ Jarallax.prototype.smooth = function (externalScope) { } else { scope = externalScope; } - + scope.smoothProperties.currentStep++; clearTimeout(scope.timer); if (scope.smoothProperties.currentStep < scope.smoothProperties.steps) { @@ -141,23 +173,32 @@ Jarallax.prototype.smooth = function (externalScope) { scope.smoothProperties.diffProgress, 1, 5); - + + scope.jumping_allowed = true; scope.setProgress(newProgress); + scope.jumping_allowed = false; scope.timer = window.setTimeout(function(){scope.smooth(scope);}, scope.smoothProperties.timeStep); scope.smoothProperties.previousValue = newProgress; scope.allowWeakProgress = false; } else { - scope.allowWeakProgress = true; + scope.jumping_allowed = true; scope.setProgress(scope.smoothProperties.startProgress + scope.smoothProperties.diffProgress); - delete scope.smoothProperties; + scope.jumping_allowed = false; + scope.clearSmooth(scope); } }; +Jarallax.prototype.clearSmooth = function(scope){ + scope.allowWeakProgress = true; + clearTimeout(scope.timer); + delete scope.smoothProperties; +}; + Jarallax.prototype.setDefault = function (selector, values) { if (!selector) { throw new Error('no selector defined.'); } - + if (JarallaxTools.isValues(values)) { var newDefault = new JarallaxObject(selector, values); @@ -170,7 +211,7 @@ Jarallax.prototype.addStatic = function (selector, values) { if (!selector) { throw new Error('no selector defined.'); } - + if (JarallaxTools.isValues(values)) { var newDefault = new JarallaxStatic(selector, values[0], values[1]); @@ -184,7 +225,7 @@ Jarallax.prototype.addCounter = function (properties) { Jarallax.prototype.addController = function (controller, activate) { this.controllers.push(controller); - + if (activate) { controller.activate(this); } @@ -198,14 +239,14 @@ Jarallax.prototype.addAnimation = function (selector, values, platforms, allMust } else { platforms = platforms || [JarallaxTools.Platform.Any]; } - + if (JarallaxTools.PlatformAllowed(platforms, allMustBeTrue)) { var newAnimation; - + if (!selector) { throw new Error('no selector defined.'); } - + var returnValue = []; if (JarallaxTools.isValues(values)) { if (values.length) { @@ -237,14 +278,14 @@ Jarallax.prototype.addAnimation = function (selector, values, platforms, allMust values.progress = '100%'; } var startValues = {}; - + for (var j in values) { startValues[j] = $(selector).css(j); } - + startValues.progress = '0%'; - - + + newAnimation = new JarallaxAnimation(selector, startValues, values, this); this.animations.push(newAnimation); returnValue.push(newAnimation); @@ -259,44 +300,52 @@ Jarallax.prototype.cloneAnimation = function (selector, adittionalValues, animat if (!selector) { throw new Error('no selector defined.'); } - + var newAnimations = []; var adittionalValuesArray = []; - + for (var i = 0; i < animations.length + 1; i++) { if (adittionalValues instanceof Array) { adittionalValuesArray.push(adittionalValues[i]); } else { - adittionalValuesArray.push(adittionalValues); + adittionalValuesArray.push(adittionalValues); } } - + for (i = 0; i < animations.length; i++) { var currentAnimation = animations[i]; var newStart = JarallaxTools.clone(currentAnimation.startValues); var newEnd = JarallaxTools.clone(currentAnimation.endValues); - + var adittionalValueStart = adittionalValuesArray[i]; var adittionalValueEnd = adittionalValuesArray[i + 1]; - + for (var j in newStart) { if (adittionalValueStart[j]) { newStart[j] = JarallaxTools.calculateNewValue(adittionalValueStart[j], newStart[j]); } } - + for (var k in newEnd) { if (adittionalValueEnd[k]) { newEnd[k] = JarallaxTools.calculateNewValue(adittionalValueEnd[k], newEnd[k]); } } - + newAnimations.push(this.addAnimation(selector, [newStart, newEnd])[0]); - + } return newAnimations; }; +<<<<<<< HEAD +======= +Jarallax.prototype.addImageSequence = function(container, imageName, leadingNumbers, callback){ + //TODO + return false; +}; + +>>>>>>> adba2cf... Fixed firefox broken scroll bar. Fixed bug which only implements default values //////////////////////////////////////////////////////////////////////////////// // Jarallax static methods ///////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////// @@ -304,7 +353,7 @@ Jarallax.EASING = { 'linear':function (currentTime, beginningValue, changeInValue, duration, power) { return currentTime / duration * changeInValue + beginningValue; }, - + 'easeOut':function (currentTime, beginningValue, changeInValue, duration, power) { if (power === undefined) { power = 2; @@ -329,7 +378,7 @@ Jarallax.EASING = { currentTime = currentTime - duration; return ((Math.pow((duration - currentTime) / duration, power) * -1) + 1) * changeInValue + beginningValue + changeInValue; } - + return Math.pow(currentTime / duration, power) * changeInValue + beginningValue; } }; From afe35abbd643ae94cd2ab6031984493bfc578941 Mon Sep 17 00:00:00 2001 From: Jacko Date: Wed, 8 Aug 2012 21:04:04 +0200 Subject: [PATCH 4/9] Removed mergin clutter --- source/controllers/scroll.js | 7 ------- source/jarallax.js | 34 ---------------------------------- 2 files changed, 41 deletions(-) diff --git a/source/controllers/scroll.js b/source/controllers/scroll.js index 5ec4a55..936b1b3 100644 --- a/source/controllers/scroll.js +++ b/source/controllers/scroll.js @@ -36,19 +36,12 @@ ControllerScroll.prototype.onScroll = function(event) { if(!controller.jarallax.jumping_allowed) { controller.jarallax.clearSmooth(controller.jarallax); } - - //console.log('preventing default'); - //event.preventDefault(); - //return false; } - - if (controller.isActive) { var y = event.data.y || controller.target.scrollTop(); var progress = y/controller.scrollSpace; - if(!controller.smoothing){ controller.jarallax.setProgress(progress, true); } else { diff --git a/source/jarallax.js b/source/jarallax.js index 9e1dd06..a2448d5 100644 --- a/source/jarallax.js +++ b/source/jarallax.js @@ -61,37 +61,12 @@ Jarallax.prototype.setProgress = function (progress, isWeak) { }else{ progress = Math.round(progress * 1000) / 1000; } -<<<<<<< HEAD - this.prev_progress = this.progress; - this.progress = progress; - if(this.prev_progress !== progress) { - if (this.allowWeakProgress || !weak) { - this.previousTime = new Date(); - this.currentTime = new Date(); - - var weak = isWeak || false; - - for (var defaultValue in this.defaultValues) { - this.defaultValues[defaultValue].activate(this.progress); - } - - for (var animation in this.animations) { - this.animations[animation].activate(this.progress); - } - - for (var controller in this.controllers) { - this.controllers[controller].update(this.progress); - } - -======= if(this.progress != progress){ this.progress = progress; if (this.allowWeakProgress || !weak) { this.previousTime = new Date(); - this.currentTime = new Date(); - var weak = isWeak || false; for (var defaultValue in this.defaultValues) { @@ -106,7 +81,6 @@ Jarallax.prototype.setProgress = function (progress, isWeak) { this.controllers[controller].update(this.progress); } ->>>>>>> adba2cf... Fixed firefox broken scroll bar. Fixed bug which only implements default values this.currentTime = new Date(); this.stepSize = Math.max(this.currentTime - this.previousTime, this.stepSize); } @@ -338,14 +312,6 @@ Jarallax.prototype.cloneAnimation = function (selector, adittionalValues, animat return newAnimations; }; -<<<<<<< HEAD -======= -Jarallax.prototype.addImageSequence = function(container, imageName, leadingNumbers, callback){ - //TODO - return false; -}; - ->>>>>>> adba2cf... Fixed firefox broken scroll bar. Fixed bug which only implements default values //////////////////////////////////////////////////////////////////////////////// // Jarallax static methods ///////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////// From c07bbe8b13086a6a18c7f06d70bd5a9ca4eb6503 Mon Sep 17 00:00:00 2001 From: CodeHunger Date: Thu, 9 Aug 2012 15:34:08 +0200 Subject: [PATCH 5/9] Added horizontal scroll library to jarallax --- grunt.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/grunt.js b/grunt.js index 6dd16fc..bf9f1d5 100644 --- a/grunt.js +++ b/grunt.js @@ -6,7 +6,8 @@ module.exports = function(grunt) { 'source/jarallax_counter.js', 'source/jarallax_object.js', 'source/jarallax_animation.js', - 'source/controllers/*.js'] + 'source/controllers/*.js', + 'import/*/*.js'] grunt.initConfig({ pkg: '', From ae186c8b380b3fa76f3b6468bf389e4dec5b3a5a Mon Sep 17 00:00:00 2001 From: CodeHunger Date: Thu, 9 Aug 2012 15:38:52 +0200 Subject: [PATCH 6/9] Added horizontal scroll library to jarallax --- import/scroll-converter/LICENSE-MIT | 19 ++ import/scroll-converter/README.md | 65 +++++++ import/scroll-converter/scroll-converter.js | 193 ++++++++++++++++++++ package.json | 4 +- 4 files changed, 279 insertions(+), 2 deletions(-) create mode 100644 import/scroll-converter/LICENSE-MIT create mode 100644 import/scroll-converter/README.md create mode 100644 import/scroll-converter/scroll-converter.js diff --git a/import/scroll-converter/LICENSE-MIT b/import/scroll-converter/LICENSE-MIT new file mode 100644 index 0000000..d8dfd81 --- /dev/null +++ b/import/scroll-converter/LICENSE-MIT @@ -0,0 +1,19 @@ +Copyright (c) 2011 Johannes Koggdal (created while working at BombayWorks) + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/import/scroll-converter/README.md b/import/scroll-converter/README.md new file mode 100644 index 0000000..dfd8969 --- /dev/null +++ b/import/scroll-converter/README.md @@ -0,0 +1,65 @@ +# Scroll Converter + +This script converts vertical scrolling to horizontal scrolling. Most mouses only have a scroll wheel for vertical scrolling, which makes it difficult to scroll horizontally on a website. If you have a site where you want to be able to scroll vertically using the scroll wheel (or trackpad) to scroll the content horizontally, this is the script for you! + + + + +## How it works + + +The script listens for changes of the mouse wheel data, and updates the horizontal scroll value based on that. Sometimes the browser uses scrolling with easing, which is also transferred correctly. It will not perform exactly as normal scrolling, but it works good enough. + + +### Browser differences + +While developing this I noticed big differences between browsers. It is very difficult to get this perfect in all browsers, so what I have tried is getting it fairly good in all browsers. + +There are two properties in the event object where you can capture the wheel data: `wheelDelta` and `detail`. Different browsers use different properties, and give different values for the same amount of scroll. This script doesn't try to give a normalized value from these, but instead tries to normalize the experience to some degree. + +Different pointing devices will give different results. A regular scroll wheel on an average mouse scroll in steps. A nice trackpad will have much better detail. Not all browsers expose this detail though. During my testing I found that Firefox gives the same value for a regular scroll wheel and a trackpad, while Safari and Chrome give different values and more fine-grained detail for the trackpad. That means the scrolling will look much better in these browsers, when using a good trackpad. + + +### Browser support + +It works in all browsers I have tried in, including IE down to version 6. + + + +## Usage + + +### Include the script into your page + + + + +### Initialize the script +To enable the script you need to activate it. + + scrollConverter.activate(); + +The `activate` method takes a function as an optional argument, which will execute everytime the scrolling updates. The first argument of that function is the current horizontal scroll offset. + + scrollConverter.activate(function (offset) { + console.log(offset); // Logs the current horizontal scroll offset + }); + + +### Deactivation +If you later want to deactivate the conversion, you can call the `deactivate` method: + + scrollConverter.deactivate(); + +You can also deactivate all kinds off scrolling on the page, by calling this method: + + scrollConverter.deactivateAllScrolling(); + +If you want to activate the scrolling again you can just call the `activate` method again (but you can't pass a callback at this point). + + + +## License + + +This script was developed by me ([Johannes Koggdal](http://koggdal.com/)) while working at [BombayWorks](http://bombayworks.com/). We open source it under the MIT license to spread the knowledge and make it simpler for other people to make the web more awesome. \ No newline at end of file diff --git a/import/scroll-converter/scroll-converter.js b/import/scroll-converter/scroll-converter.js new file mode 100644 index 0000000..2122739 --- /dev/null +++ b/import/scroll-converter/scroll-converter.js @@ -0,0 +1,193 @@ +/* +scrollConverter 1.0 +https://github.com/koggdal/scroll-converter + +Copyright 2011 Johannes Koggdal (http://koggdal.com/) +Developed for BombayWorks (http://bombayworks.com/) + +Released under MIT license +*/ + +window.scrollConverter = (function (window, document, undefined) { + + // Private vars + var docElem = document.documentElement, + active = false, + hasDeactivated = false, + eventsBound = false; + + // Private methods + var scrollCallback = function (offset, event, callback) { + + // Abort the scrolling if it's inactive + if (!active) { + return; + } + + var delta, numPixelsPerStep, change, newOffset, + docOffset, scrollWidth, winWidth, maxOffset; + + // Set scrolling parameters + delta = 0; + numPixelsPerStep = 10; + + // Find the maximum offset for the scroll + docOffset = (docElem ? docElem.offsetWidth : 0) || 0; + scrollWidth = document.body.scrollWidth || 0; + winWidth = docElem ? docElem.clientWidth : 0; + maxOffset = Math.max(docOffset, scrollWidth) - winWidth; + + // "Normalize" the wheel value across browsers + // The delta value after this will not be the same for all browsers. + // Instead, it is normalized in a way to try to give a pretty similar feeling in all browsers. + // + // Firefox and Opera + if (event.detail) { + delta = event.detail * -240; + } + // IE, Safari and Chrome + else if (event.wheelDelta) { + delta = event.wheelDelta * 5; + } + + // Get the real offset change from the delta + // A positive change is when the user scrolled the wheel up (in regular scrolling direction) + // A negative change is when the user scrolled the wheel down + change = delta / 120 * numPixelsPerStep; + newOffset = offset.x - change; + + // Do the scroll if the new offset is positive + if (newOffset >= 0 && newOffset <= maxOffset) { + offset.x = newOffset; + offset.setByScript = true; + window.scrollTo(offset.x, offset.y); + } + // Keep the offset within the boundaries + else if (offset.x !== 0 && offset.x !== maxOffset) { + offset.x = newOffset > maxOffset ? maxOffset : 0; + offset.setByScript = true; + window.scrollTo(offset.x, offset.y); + } + + // Fire the callback + if (typeof callback === "function") { + callback(offset); + } + }, + + getOffset = function (axis) { + axis = axis.toUpperCase(); + var pageOffset = "page" + axis + "Offset", + scrollValue = "scroll" + axis, + scrollDir = "scroll" + (axis === "X" ? "Left" : "Top"); + + // Get the scroll offset for all browsers + return window[pageOffset] || window[scrollValue] || (function () { + var rootElem = document.documentElement || document.body.parentNode; + return ((typeof rootElem[scrollDir] === "number") ? rootElem : document.body)[scrollDir]; + }()); + }, + + bindEvents = function (offset, cb) { + + var callback = function (e) { + + // Fix event object for IE8 and below + e = e || window.event; + + // Trigger the scroll behavior + scrollCallback(offset, e, cb); + + // Prevent the normal scroll action to happen + if (e.preventDefault && e.stopPropagation) { + e.preventDefault(); + e.stopPropagation(); + } else { + return false; + } + }, + + updateOffsetOnScroll = function () { + + // Update the offset variable when the normal scrollbar is used + if (!offset.setByScript) { + offset.x = getOffset("x"); + offset.y = getOffset("y"); + } + offset.setByScript = false; + }; + + // Safari, Chrome, Opera, IE9+ + if (window.addEventListener) { + + // Safari, Chrome, Opera, IE9 + if ("onmousewheel" in window) { + window.addEventListener("mousewheel", callback, false); + window.addEventListener("scroll", updateOffsetOnScroll, false); + } + // Firefox + else { + window.addEventListener("DOMMouseScroll", callback, false); + window.addEventListener("scroll", updateOffsetOnScroll, false); + } + } + // IE8 and below + else { + document.attachEvent("onmousewheel", callback); + window.attachEvent("onscroll", updateOffsetOnScroll); + } + }, + + deactivateScrolling = function (e) { + e.preventDefault(); + e.stopPropagation(); + return false; + }; + + // Return a public API + return { + + // Activate the scrolling switch + // An optional callback can be passed in, which will fire at every scroll update + activate: function (callback) { + + // Set state + active = true; + + // Bind events if it hasn't been done before + if (!eventsBound) { + var offset = { x: 0, y: 0 }; + bindEvents(offset, callback); + eventsBound = true; + } + + // Remove event handlers if it was previously deactivated + if (hasDeactivated) { + if (window.addEventListener) { + window.removeEventListener("scroll", deactivateScrolling, true); + } else { + window.detachEvent("onscroll", deactivateScrolling); + } + hasDeactivated = false; + } + }, + + deactivate: function () { + active = false; + }, + + deactivateAllScrolling: function () { + + // Set state + active = false; + hasDeactivated = true; + + // Bind event handlers to disable the scroll + if (window.addEventListener) { + window.addEventListener("scroll", deactivateScrolling, true); + } else { + window.attachEvent("onscroll", deactivateScrolling); + } + } + }; +}(window, document)); \ No newline at end of file diff --git a/package.json b/package.json index 5c1e547..f39fede 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { "name":"Jarallax", "file_name":"jarallax", - "author":"Enter name here", + "author":"Jacko Hoogeveen", "title": "Jarallax", "description": "The parallax scrolling opensource Javascript library", - "version":"0.2.3", + "version":"0.2.4", "website": "http://jarallax.com", "destination":"bin/", "license": From 9f7d3962db7687e0c26bf3e5da53e6aca5845aa2 Mon Sep 17 00:00:00 2001 From: CodeHunger Date: Thu, 9 Aug 2012 15:41:08 +0200 Subject: [PATCH 7/9] Fixed naming convention conflicts. Created horizontal scrolling feature. --- source/controllers/scroll.js | 53 ++++++++++++++++++++++++----------- source/jarallax.js | 52 +++++++++++++++++++--------------- source/jarallax_animation.js | 50 ++++++++++++++++----------------- source/jarallax_controller.js | 1 + source/jarallax_tools.js | 10 ------- 5 files changed, 91 insertions(+), 75 deletions(-) diff --git a/source/controllers/scroll.js b/source/controllers/scroll.js index 936b1b3..164cfdb 100644 --- a/source/controllers/scroll.js +++ b/source/controllers/scroll.js @@ -1,19 +1,22 @@ //////////////////////////////////////////////////////////////////////////////// // Scroll controller /////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////// -ControllerScroll = function(smoothing, scrollSpace) { +ControllerScroll = function(smoothing, horizontal, convertScroll) { this.target = $(window); + this.horizontal = horizontal; + this.convertScroll = convertScroll; $(window).scrollTop(0); - this.height = parseInt($("body").css('height'),10); - this.scrollSpace = scrollSpace || this.height - this.target.height(); - - if (this.scrollSpace < 10) { - this.height = parseInt($("#wrapper").css('height'),10); - this.scrollSpace = this.height - this.target.height(); + $(window).scrollLeft(0); + + if (!horizontal) { + var height = parseInt($("body").css('height'),10); + this.scrollSpace = height - this.target.height(); + } else { + var width = parseInt($("body").css('width'),10); + this.scrollSpace = width - this.target.width(); } - + this.smoothing = smoothing || false; - this.targetProgress = 0; }; @@ -21,31 +24,44 @@ ControllerScroll.prototype = new JarallaxController(); ControllerScroll.prototype.activate = function(jarallax) { JarallaxController.prototype.activate.call(this, jarallax); + if (this.convertScroll) { + scrollConverter.activate(); + } this.target.bind('scroll', {scope: this} , this.onScroll); }; ControllerScroll.prototype.deactivate = function(jarallax) { JarallaxController.prototype.deactivate.call(this, jarallax); + if (this.convertScroll) { + scrollConverter.deactivate(); + } this.target.unbind('scroll'); }; ControllerScroll.prototype.onScroll = function(event) { var controller = event.data.scope; - + //console.log(controller.target.scrollTop()); + if(controller.jarallax.jumping){ - if(!controller.jarallax.jumping_allowed) { + if(!controller.jarallax.jumpingAllowed) { controller.jarallax.clearSmooth(controller.jarallax); } } if (controller.isActive) { - var y = event.data.y || controller.target.scrollTop(); - var progress = y/controller.scrollSpace; - + var progress; + if (!controller.horizontal) { + var y = event.data.y || controller.target.scrollTop(); + progress = y/controller.scrollSpace; + } else { + var x = event.data.x || controller.target.scrollLeft(); + progress = x/controller.scrollSpace; + } + if(!controller.smoothing){ controller.jarallax.setProgress(progress, true); } else { - controller.targetProgress = progress; + controller.targetProgress = Math.min(progress, 1); controller.smooth(); } } @@ -60,7 +76,6 @@ ControllerScroll.prototype.smooth = function(externalScope) { } var oldProgress = scope.jarallax.progress; - var animationSpace = scope.targetProgress - oldProgress; clearTimeout(scope.timer); @@ -79,6 +94,10 @@ ControllerScroll.prototype.update = function(progress) { var scrollPosition = progress * this.scrollSpace; if(!this.jarallax.allowWeakProgress) { - $(window).scrollTop(scrollPosition); + if (!controller.horizontal) { + $(window).scrollTop(scrollPosition); + } else { + $(window).scrollLeft(scrollPosition); + } } }; diff --git a/source/jarallax.js b/source/jarallax.js index a2448d5..77a29db 100644 --- a/source/jarallax.js +++ b/source/jarallax.js @@ -1,7 +1,7 @@ //////////////////////////////////////////////////////////////////////////////// // jarallax class ////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////// -var Jarallax = function (controller) { +var Jarallax = function () { this.FPS = 24; this.FPS_INTERVAL = 1000 / this.FPS; this.FRAME_DATA_SAMPLE = 24; @@ -11,7 +11,8 @@ var Jarallax = function (controller) { this.animations = []; this.defaultValues = []; this.progress = 0.0; - this.prev_progress = 0.0; + this.properties = {}; + this.prevProgress = 0.0; this.controllers = []; this.maxProgress = 1; this.timer = undefined; @@ -19,24 +20,28 @@ var Jarallax = function (controller) { this.frameRate = this.FPS; this.stepSize = 0; this.jumping = false; - - if (controller === undefined) { - if($.browser.iDevice){ - this.controllers.push(new ControllerApple(false)); - } else if ($.browser.mozilla) { - this.controllers.push(new ControllerScroll(false)); + + for(var argument in arguments) { + if (arguments[argument] instanceof Array){ + this.controllers = arguments[argument]; + } else if (arguments[argument].isController) { + this.controllers.push(arguments[argument]); + } else if (arguments[argument] instanceof Object) { + this.properties = arguments[argument]; } else { - this.controllers.push(new ControllerScroll(true)); + console.log('WARNING: bad argument ' + argument); } - } else if (controller !== 'none') { - if (controller.length) { - this.controllers = controller; - } else if (typeof (controller) === 'object') { - this.controllers.push(controller); + } + + if (!this.controller) { + if($.browser.iDevice) { + this.controllers.push(new ControllerApple(false)); + } else if ($.browser.mozilla) { + this.controllers.push(new ControllerScroll(false, + this.properties.horizontal, this.properties.disableVertical)); } else { - throw new Error('wrong controller data type: "' + - typeof (controller) + - '". Expected "object" or "array"'); + this.controllers.push(new ControllerScroll(true, + this.properties.horizontal, this.properties.disableVertical)); } } @@ -58,13 +63,14 @@ Jarallax.prototype.setProgress = function (progress, isWeak) { progress = 1; } else if (progress < 0) { progress = 0; - }else{ - progress = Math.round(progress * 1000) / 1000; } + + console.log(progress); if(this.progress != progress){ this.progress = progress; if (this.allowWeakProgress || !weak) { + this.previousTime = new Date(); this.currentTime = new Date(); var weak = isWeak || false; @@ -148,16 +154,16 @@ Jarallax.prototype.smooth = function (externalScope) { 1, 5); - scope.jumping_allowed = true; + scope.jumpingAllowed = true; scope.setProgress(newProgress); - scope.jumping_allowed = false; + scope.jumpingAllowed = false; scope.timer = window.setTimeout(function(){scope.smooth(scope);}, scope.smoothProperties.timeStep); scope.smoothProperties.previousValue = newProgress; scope.allowWeakProgress = false; } else { - scope.jumping_allowed = true; + scope.jumpingAllowed = true; scope.setProgress(scope.smoothProperties.startProgress + scope.smoothProperties.diffProgress); - scope.jumping_allowed = false; + scope.jumpingAllowed = false; scope.clearSmooth(scope); } }; diff --git a/source/jarallax_animation.js b/source/jarallax_animation.js index 6221175..8b28f67 100644 --- a/source/jarallax_animation.js +++ b/source/jarallax_animation.js @@ -71,48 +71,48 @@ JarallaxAnimation.prototype.activate = function (progress) { } }; -JarallaxAnimation.prototype.dispatchEvent = function(progress_old, progress_new, +JarallaxAnimation.prototype.dispatchEvent = function(progressOld, progressNew, start, end) { var events = this.startValues.event; - var event_data = {}; - event_data.animation = this; - event_data.selector = this.selector; + var eventData = {}; + eventData.animation = this; + eventData.selector = this.selector; - if (progress_new >= start && progress_new <= end ) { - if (events.start && progress_old < start) { - event_data.type = 'start'; - events.start(event_data); + if (progressNew >= start && progressNew <= end ) { + if (events.start && progressOld < start) { + eventData.type = 'start'; + events.start(eventData); } - if (events.start && progress_old > end) { - event_data.type = 'rewind'; - events.start(event_data); + if (events.start && progressOld > end) { + eventData.type = 'rewind'; + events.start(eventData); } if (events.animating) { - event_data.type = 'animating'; - events.animating(event_data); + eventData.type = 'animating'; + events.animating(eventData); } - if (events.forward && progress_old < progress_new) { - event_data.type = 'forward'; - events.forward(event_data); + if (events.forward && progressOld < progressNew) { + eventData.type = 'forward'; + events.forward(eventData); } - if (events.reverse && progress_old > progress_new) { - event_data.type = 'reverse'; - events.reverse(event_data); + if (events.reverse && progressOld > progressNew) { + eventData.type = 'reverse'; + events.reverse(eventData); } } else { - if (events.complete && progress_old < end && progress_new > end) { - event_data.type = 'complete'; - events.complete(event_data); + if (events.complete && progressOld < end && progressNew > end) { + eventData.type = 'complete'; + events.complete(eventData); } - if (events.rewinded && progress_old > start && progress_new < start) { - event_data.type = 'rewind'; - events.rewinded(event_data); + if (events.rewinded && progressOld > start && progressNew < start) { + eventData.type = 'rewind'; + events.rewinded(eventData); } } }; diff --git a/source/jarallax_controller.js b/source/jarallax_controller.js index 2a05e96..748a63a 100644 --- a/source/jarallax_controller.js +++ b/source/jarallax_controller.js @@ -4,6 +4,7 @@ JarallaxController = function() { this.isActive = false; this.bindings = []; + this.isController = true; }; diff --git a/source/jarallax_tools.js b/source/jarallax_tools.js index ec8c139..d0fbb22 100644 --- a/source/jarallax_tools.js +++ b/source/jarallax_tools.js @@ -116,16 +116,6 @@ JarallaxTools.Platforms = ['webkit', 'mobile', 'nonMobile']; -/*jQuery.browser.webkit -jQuery.browser.opera -jQuery.browser.msie -jQuery.browser.mozilla*/ - -/** - * jQuery.browser.mobile (http://detectmobilebrowser.com/) - * jQuery.browser.mobile will be true if the browser is a mobile device - **/ -//(function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4));})(navigator.userAgent||navigator.vendor||window.opera); jQuery.browser.android = /android/i.test(navigator.userAgent.toLowerCase()); jQuery.browser.blackBerry = /blackberry/i.test(navigator.userAgent.toLowerCase()); From e16c52859fc3d9a45d60e3ccca61b2a26737b683 Mon Sep 17 00:00:00 2001 From: CodeHunger Date: Sat, 8 Jun 2013 14:22:29 +0200 Subject: [PATCH 8/9] Updated grunt to new version --- Gruntfile.js | 61 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 Gruntfile.js diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..c3b8a01 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,61 @@ +module.exports = function(grunt) { + var files = ['', + 'source/jarallax.js', + 'source/jarallax_tools.js', + 'source/jarallax_controller.js', + 'source/jarallax_counter.js', + 'source/jarallax_object.js', + 'source/jarallax_animation.js', + 'source/controllers/*.js', + 'import/*/*.js'] + + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + meta: { + banner: '/*!\n' + + ' * <%= pkg.name %>\n' + + ' * Version: <%= pkg.version %>\n' + + ' * website: <%= pkg.website %>\n' + + ' *\n' + + ' * Copyright <%= grunt.template.today("yyyy") %>, <%= pkg.author %>\n' + + ' * <%= pkg.license.type%>\n' + + ' * <%= pkg.license.url%>\n' + + ' * \n' + + ' * Date: <%= grunt.template.today("dd mmm yyyy") %>\n' + + ' */\n\n' + }, + jshint: { + files: ['source/*.js', 'source/controllers/*.js'] + }, + concat: { + options: { + banner: '/*!\n' + + ' * <%= pkg.name %>\n' + + ' * Version: <%= pkg.version %>\n' + + ' * website: <%= pkg.website %>\n' + + ' *\n' + + ' * Copyright <%= grunt.template.today("yyyy") %>, <%= pkg.author %>\n' + + ' * <%= pkg.license.type%>\n' + + ' * <%= pkg.license.url%>\n' + + ' * \n' + + ' * Date: <%= grunt.template.today("dd mmm yyyy") %>\n' + + ' */\n\n' + }, + dist: { + src: files, + dest: '<%= pkg.destination %><%= pkg.file_name %>-<%= pkg.version %>.js' + } + }, + uglify: { + dist: { + src: files, + dest: '<%= pkg.destination %><%= pkg.file_name %>-<%= pkg.version %>.min.js' + } + } + }); + + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-concat'); + grunt.loadNpmTasks('grunt-contrib-jshint') + grunt.registerTask('default', ['jshint', 'concat', 'uglify']); +}; From 45d8537547027210e12ce133b18ee80f38695213 Mon Sep 17 00:00:00 2001 From: CodeHunger Date: Sat, 8 Jun 2013 14:43:27 +0200 Subject: [PATCH 9/9] Implemented rotation --- grunt.js | 45 ---- import/jquery-rotate/jquery-rotate.js | 313 ++++++++++++++++++++++++++ 2 files changed, 313 insertions(+), 45 deletions(-) delete mode 100644 grunt.js create mode 100644 import/jquery-rotate/jquery-rotate.js diff --git a/grunt.js b/grunt.js deleted file mode 100644 index bf9f1d5..0000000 --- a/grunt.js +++ /dev/null @@ -1,45 +0,0 @@ -module.exports = function(grunt) { - var files = ['', - 'source/jarallax.js', - 'source/jarallax_tools.js', - 'source/jarallax_controller.js', - 'source/jarallax_counter.js', - 'source/jarallax_object.js', - 'source/jarallax_animation.js', - 'source/controllers/*.js', - 'import/*/*.js'] - - grunt.initConfig({ - pkg: '', - meta: { - banner: '/*!\n' + - ' * <%= pkg.name %>\n' + - ' * Version: <%= pkg.version %>\n' + - ' * website: <%= pkg.website %>\n' + - ' *\n' + - ' * Copyright <%= grunt.template.today("yyyy") %>, <%= pkg.author %>\n' + - ' * <%= pkg.license.type%>\n' + - ' * <%= pkg.license.url%>\n' + - ' * \n' + - ' * Date: <%= grunt.template.today("dd mmm yyyy") %>\n' + - ' */' - }, - lint: { - files: ['source/*.js', 'source/controllers/*.js'] - }, - concat: { - dist: { - src: files, - dest: '<%= pkg.destination %><%= pkg.file_name %>-<%= pkg.version %>.js' - } - }, - min: { - dist: { - src: files, - dest: '<%= pkg.destination %><%= pkg.file_name %>-<%= pkg.version %>.min.js' - } - } - }); - - grunt.registerTask('default', 'lint concat min'); -}; diff --git a/import/jquery-rotate/jquery-rotate.js b/import/jquery-rotate/jquery-rotate.js new file mode 100644 index 0000000..c97583e --- /dev/null +++ b/import/jquery-rotate/jquery-rotate.js @@ -0,0 +1,313 @@ +// VERSION: 2.2 LAST UPDATE: 13.03.2012 +/* + * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php + * + * Made by Wilq32, wilq32@gmail.com, Wroclaw, Poland, 01.2009 + * Website: http://code.google.com/p/jqueryrotate/ + */ + +// Documentation removed from script file (was kinda useless and outdated) + +(function($) { +var supportedCSS,styles=document.getElementsByTagName("head")[0].style,toCheck="transformProperty WebkitTransform OTransform msTransform MozTransform".split(" "); +for (var a=0;a this._parameters.duration; + + // TODO: Bug for animatedGif for static rotation ? (to test) + if (checkEnd && !this._parameters.animatedGif) + { + clearTimeout(this._timer); + } + else + { + if (this._canvas||this._vimage||this._img) { + var angle = this._parameters.easing(0, actualTime - this._animateStartTime, this._animateStartAngle, this._parameters.animateTo - this._animateStartAngle, this._parameters.duration); + this._rotate((~~(angle*10))/10); + } + if (this._parameters.step) { + this._parameters.step(this._angle); + } + var self = this; + this._timer = setTimeout(function() + { + self._animate.call(self); + }, 10); + } + + // To fix Bug that prevents using recursive function in callback I moved this function to back + if (this._parameters.callback && checkEnd){ + this._angle = this._parameters.animateTo; + this._rotate(this._angle); + this._parameters.callback.call(this._rootObj); + } + }, + + _rotate : (function() + { + var rad = Math.PI/180; + if (IE) + return function(angle) + { + this._angle = angle; + this._container.style.rotation=(angle%360)+"deg"; + } + else if (supportedCSS) + return function(angle){ + this._angle = angle; + this._img.style[supportedCSS]="rotate("+(angle%360)+"deg)"; + } + else + return function(angle) + { + this._angle = angle; + angle=(angle%360)* rad; + // clear canvas + this._canvas.width = this._width+this._widthAdd; + this._canvas.height = this._height+this._heightAdd; + + // REMEMBER: all drawings are read from backwards.. so first function is translate, then rotate, then translate, translate.. + this._cnv.translate(this._widthAddHalf,this._heightAddHalf); // at least center image on screen + this._cnv.translate(this._widthHalf,this._heightHalf); // we move image back to its orginal + this._cnv.rotate(angle); // rotate image + this._cnv.translate(-this._widthHalf,-this._heightHalf); // move image to its center, so we can rotate around its center + this._cnv.scale(this._aspectW,this._aspectH); // SCALE - if needed ;) + this._cnv.drawImage(this._img, 0, 0); // First - we draw image + } + + })() +} + +if (IE) +{ +Wilq32.PhotoEffect.prototype.createVMLNode=(function(){ +document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)"); + try { + !document.namespaces.rvml && document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml"); + return function (tagName) { + return document.createElement(''); + }; + } catch (e) { + return function (tagName) { + return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">'); + }; + } +})(); +} + +})(jQuery);