From fda84430f52bd84c97ea35d017d9cb086086e669 Mon Sep 17 00:00:00 2001 From: Jim Doyle Date: Wed, 17 Jun 2015 17:38:34 +0200 Subject: [PATCH 1/6] Added parent element option, npm package and gulp build --- .gitignore | 1 + README.md | 23 ++++++++++++++++ example.html => example1.html | 0 example2.html | 51 +++++++++++++++++++++++++++++++++++ gulpfile.js | 10 +++++++ package.json | 29 ++++++++++++++++++++ preparetransition.js | 15 ++++++----- preparetransition.min.js | 3 +-- 8 files changed, 124 insertions(+), 8 deletions(-) create mode 100644 .gitignore rename example.html => example1.html (100%) create mode 100644 example2.html create mode 100644 gulpfile.js create mode 100644 package.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b512c09 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file diff --git a/README.md b/README.md index becdc50..9cd5b23 100644 --- a/README.md +++ b/README.md @@ -12,3 +12,26 @@ Example usage: $('.msg').prepareTransition().toggleClass('hidden'); }); +You can also choose to target a transition that is triggered by a parent class. + +Example JS: + + $elementWithTransition.prepareTransition( $parentElementWithState ); + $parentElementWithState.toggleClass( "is-something" ); + +Example CSS: + + .examplepanel { + opacity: 1; + transition: opacity 1s; + display: block; + } + + .is-collapsed .examplepanel { + opacity: 0; + display: none; + } + + .is-transitioning .examplepanel { + display: block !important; + } \ No newline at end of file diff --git a/example.html b/example1.html similarity index 100% rename from example.html rename to example1.html diff --git a/example2.html b/example2.html new file mode 100644 index 0000000..d58447b --- /dev/null +++ b/example2.html @@ -0,0 +1,51 @@ + + + + + + + + + + + + + +
+ + +
Here is a message that needs to be displayed
+
+ + + + diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..f7d5569 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,10 @@ +var gulp = require('gulp'), + rename = require('gulp-rename'), + uglify = require('gulp-uglify'); + +gulp.task('default', function() { + return gulp.src("./preparetransition.js") + .pipe(uglify()) + .pipe(rename("preparetransition.min.js")) + .pipe(gulp.dest('./')) +}); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..37b99e9 --- /dev/null +++ b/package.json @@ -0,0 +1,29 @@ +{ + "name": "prepare-transition", + "version": "0.1.1", + "description": "The prepareTransition plugin sets display and visibility to override any existing display and visibility properties.", + "main": "gulpfile.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/snookca/prepareTransition.git" + }, + "keywords": [ + "css", + "transition", + "jquery" + ], + "author": "jonathan@snook.ca", + "license": "MIT", + "bugs": { + "url": "https://github.com/snookca/prepareTransition/issues" + }, + "homepage": "https://github.com/snookca/prepareTransition#readme", + "devDependencies": { + "gulp": "^3.9.0", + "gulp-rename": "^1.2.2", + "gulp-uglify": "^1.2.0" + } +} diff --git a/preparetransition.js b/preparetransition.js index e5e6517..00ede8b 100644 --- a/preparetransition.js +++ b/preparetransition.js @@ -18,12 +18,17 @@ (function($){ -$.fn.prepareTransition = function(){ +/** + * @param parentEl {jQuery Element} optional - If passed in the 'is-transitioning' class will be added/removed from here rather than the "this" element + */ +$.fn.prepareTransition = function( parentEl ){ return this.each(function(){ var el = $(this); + if( !parentEl ) parentEl = el; + // remove the transition class upon completion - el.one('TransitionEnd webkitTransitionEnd transitionend oTransitionEnd', function(){ - el.removeClass('is-transitioning'); + el.one('TransitionEnd webkitTransitionEnd transitionend oTransitionEnd', function(evt){ + parentEl.removeClass('is-transitioning'); }); // check the various CSS properties to see if a duration has been set @@ -35,12 +40,10 @@ $.fn.prepareTransition = function(){ // if I have a duration then add the class if (duration != 0) { - el.addClass('is-transitioning'); + parentEl.addClass('is-transitioning'); el[0].offsetWidth; // check offsetWidth to force the style rendering }; }); }; - }(jQuery)); - diff --git a/preparetransition.min.js b/preparetransition.min.js index 24f2a4f..fcf1abd 100644 --- a/preparetransition.min.js +++ b/preparetransition.min.js @@ -1,2 +1 @@ -/* Jonathan Snook - MIT License - https://github.com/snookca/prepareTransition */ -(function(a){a.fn.prepareTransition=function(){return this.each(function(){var b=a(this);b.one("TransitionEnd webkitTransitionEnd transitionend oTransitionEnd",function(){b.removeClass("is-transitioning")});var c=["transition-duration","-moz-transition-duration","-webkit-transition-duration","-o-transition-duration"];var d=0;a.each(c,function(a,c){d=parseFloat(b.css(c))||d});if(d!=0){b.addClass("is-transitioning");b[0].offsetWidth}})}})(jQuery) +!function(n){n.fn.prepareTransition=function(i){return this.each(function(){var t=n(this);i||(i=t),t.one("TransitionEnd webkitTransitionEnd transitionend oTransitionEnd",function(n){i.removeClass("is-transitioning")});var o=["transition-duration","-moz-transition-duration","-webkit-transition-duration","-o-transition-duration"],a=0;n.each(o,function(n,i){a||(a=parseFloat(t.css(i)))}),0!=a&&(i.addClass("is-transitioning"),t[0].offsetWidth)})}}(jQuery); \ No newline at end of file From e376860b499c1624994cc9b4409609587817b064 Mon Sep 17 00:00:00 2001 From: Jim Doyle Date: Wed, 17 Jun 2015 17:40:34 +0200 Subject: [PATCH 2/6] Updated readme --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 9cd5b23..26d05fb 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ You can also choose to target a transition that is triggered by a parent class. Example JS: $elementWithTransition.prepareTransition( $parentElementWithState ); - $parentElementWithState.toggleClass( "is-something" ); + $parentElementWithState.toggleClass( "is-shown" ); Example CSS: @@ -27,7 +27,7 @@ Example CSS: display: block; } - .is-collapsed .examplepanel { + .is-shown .examplepanel { opacity: 0; display: none; } From c6d07b665855663b11e75daeb4dc9ed4d3f130d4 Mon Sep 17 00:00:00 2001 From: Jim Doyle Date: Wed, 12 Aug 2015 10:45:15 +1000 Subject: [PATCH 3/6] Got basic version of loader working for ie9 (unstyled) --- preparetransition.js | 34 +++++++++++++++++++++++++++++----- 1 file changed, 29 insertions(+), 5 deletions(-) diff --git a/preparetransition.js b/preparetransition.js index 00ede8b..a4d162e 100644 --- a/preparetransition.js +++ b/preparetransition.js @@ -18,18 +18,42 @@ (function($){ + function supportsTransitions() { + var b = document.body || document.documentElement, + s = b.style, + p = 'transition'; + + if (typeof s[p] == 'string') { return true; } + + // Tests for vendor specific prop + var v = ['Moz', 'webkit', 'Webkit', 'Khtml', 'O', 'ms']; + p = p.charAt(0).toUpperCase() + p.substr(1); + + for (var i=0; i Date: Thu, 13 Aug 2015 15:37:48 +1000 Subject: [PATCH 4/6] Did a new build --- preparetransition.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/preparetransition.min.js b/preparetransition.min.js index fcf1abd..d5ff140 100644 --- a/preparetransition.min.js +++ b/preparetransition.min.js @@ -1 +1 @@ -!function(n){n.fn.prepareTransition=function(i){return this.each(function(){var t=n(this);i||(i=t),t.one("TransitionEnd webkitTransitionEnd transitionend oTransitionEnd",function(n){i.removeClass("is-transitioning")});var o=["transition-duration","-moz-transition-duration","-webkit-transition-duration","-o-transition-duration"],a=0;n.each(o,function(n,i){a||(a=parseFloat(t.css(i)))}),0!=a&&(i.addClass("is-transitioning"),t[0].offsetWidth)})}}(jQuery); \ No newline at end of file +!function(n){function t(){var n=document.body||document.documentElement,t=n.style,i="transition";if("string"==typeof t[i])return!0;var r=["Moz","webkit","Webkit","Khtml","O","ms"];i=i.charAt(0).toUpperCase()+i.substr(1);for(var o=0;o Date: Thu, 13 Aug 2015 15:53:10 +1000 Subject: [PATCH 5/6] Added check for transform vendor prefixes --- preparetransition.js | 74 +++++++++++++++++++++++++++++++++++++--- preparetransition.min.js | 2 +- 2 files changed, 71 insertions(+), 5 deletions(-) diff --git a/preparetransition.js b/preparetransition.js index a4d162e..bb78d5a 100644 --- a/preparetransition.js +++ b/preparetransition.js @@ -36,25 +36,89 @@ return false; } + // So we know what browser we're using and if it needs vendor prefixes for transform property + function getTransformName() { + var st = window.getComputedStyle(document.body, null); + + var rtnObj = { + css: null, js: null + } + + if( st.getPropertyValue("transform") !== null ) { + rtnObj.css = "transform"; + rtnObj.js = "transform"; + return rtnObj; + } + + if( st.getPropertyValue("-webkit-transform") !== null ) { + rtnObj.css = "-webkit-transform"; + rtnObj.js = "webkitTransform"; + return rtnObj; + } + + if( st.getPropertyValue("-moz-transform") !== null ) { + rtnObj.css = "-moz-transform"; + rtnObj.js = "MozTransform"; + return rtnObj; + } + + if( st.getPropertyValue("-ms-transform") !== null ) { + rtnObj.css = "-ms-transform"; + rtnObj.js = "msTransform"; + return rtnObj; + } + + if( st.getPropertyValue("-o-transform") !== null ) { + rtnObj.css = "-o-transform"; + rtnObj.js = "OTransform"; + return rtnObj; + } + + return null; + } + /** * @param parentEl {jQuery Element} optional - If passed in the 'is-transitioning' class will be added/removed from here rather than the "this" element + * @param property {string} optional - If passed transition end events will only look for events with this property type. This is useful when avoiding multiple transition events on the same element or it's children. */ -$.fn.prepareTransition = function( parentEl ){ +$.fn.prepareTransition = function( parentEl, property ){ var hasTrans = supportsTransitions(); + if(property === "transform") property = getTransformName().css; + return this.each(function(){ var el = $(this); if( !parentEl ) parentEl = el; + if( hasTrans ) { - // remove the transition class upon completion - el.one('TransitionEnd webkitTransitionEnd transitionend oTransitionEnd', function(evt){ - parentEl.removeClass('is-transitioning'); + var evtFired = false; + + // Need to add MS events as well? + + // remove the transition class upon completion (don't ise $.one, incase multiple properties transitioning) + el.on('TransitionEnd webkitTransitionEnd transitionend oTransitionEnd', function(evt){ + + console.log( evt.originalEvent.propertyName) + + // just triggers for one property type (if specified) + if( property && evt.originalEvent.propertyName !== property ) return; + + // stops multiple events triggering + if(!evtFired) { + evtFired = true; + parentEl.removeClass('is-transitioning'); + + // Need to add MS events as well? + $(this).off('TransitionEnd webkitTransitionEnd transitionend oTransitionEnd'); + } }); } else { el.addClass('hasnt-transition'); } + // Need to add MS events as well? + // check the various CSS properties to see if a duration has been set var cl = ["transition-duration", "-moz-transition-duration", "-webkit-transition-duration", "-o-transition-duration"]; var duration = 0; @@ -62,6 +126,8 @@ $.fn.prepareTransition = function( parentEl ){ duration || (duration = parseFloat( el.css( itm ) )); }); + // Need to add delay here as well + // if I have a duration then add the class if (duration != 0) { if( hasTrans ) parentEl.addClass('is-transitioning'); diff --git a/preparetransition.min.js b/preparetransition.min.js index d5ff140..b7e2093 100644 --- a/preparetransition.min.js +++ b/preparetransition.min.js @@ -1 +1 @@ -!function(n){function t(){var n=document.body||document.documentElement,t=n.style,i="transition";if("string"==typeof t[i])return!0;var r=["Moz","webkit","Webkit","Khtml","O","ms"];i=i.charAt(0).toUpperCase()+i.substr(1);for(var o=0;o Date: Thu, 13 Aug 2015 18:17:05 +1000 Subject: [PATCH 6/6] Removed parent element option, as the "is-transitioning" class should be put directly on the element transitioning, not above it. --- README.md | 9 +------ example1.html => example.html | 0 example2.html | 51 ----------------------------------- preparetransition.js | 18 +++++-------- preparetransition.min.js | 2 +- 5 files changed, 9 insertions(+), 71 deletions(-) rename example1.html => example.html (100%) delete mode 100644 example2.html diff --git a/README.md b/README.md index 26d05fb..22046b5 100644 --- a/README.md +++ b/README.md @@ -12,13 +12,6 @@ Example usage: $('.msg').prepareTransition().toggleClass('hidden'); }); -You can also choose to target a transition that is triggered by a parent class. - -Example JS: - - $elementWithTransition.prepareTransition( $parentElementWithState ); - $parentElementWithState.toggleClass( "is-shown" ); - Example CSS: .examplepanel { @@ -32,6 +25,6 @@ Example CSS: display: none; } - .is-transitioning .examplepanel { + .examplepanel.is-transitioning { display: block !important; } \ No newline at end of file diff --git a/example1.html b/example.html similarity index 100% rename from example1.html rename to example.html diff --git a/example2.html b/example2.html deleted file mode 100644 index d58447b..0000000 --- a/example2.html +++ /dev/null @@ -1,51 +0,0 @@ - - - - - - - - - - - - - -
- - -
Here is a message that needs to be displayed
-
- - - - diff --git a/preparetransition.js b/preparetransition.js index bb78d5a..eeeedf2 100644 --- a/preparetransition.js +++ b/preparetransition.js @@ -18,6 +18,7 @@ (function($){ + // Checks if transitions are supported function supportsTransitions() { var b = document.body || document.documentElement, s = b.style, @@ -36,7 +37,7 @@ return false; } - // So we know what browser we're using and if it needs vendor prefixes for transform property + // gets the CSS & JS name of the 'transform' property, which can vary from browser to browser function getTransformName() { var st = window.getComputedStyle(document.body, null); @@ -78,18 +79,15 @@ } /** - * @param parentEl {jQuery Element} optional - If passed in the 'is-transitioning' class will be added/removed from here rather than the "this" element * @param property {string} optional - If passed transition end events will only look for events with this property type. This is useful when avoiding multiple transition events on the same element or it's children. */ -$.fn.prepareTransition = function( parentEl, property ){ +$.fn.prepareTransition = function( property ){ var hasTrans = supportsTransitions(); if(property === "transform") property = getTransformName().css; return this.each(function(){ var el = $(this); - if( !parentEl ) parentEl = el; - if( hasTrans ) { var evtFired = false; @@ -99,15 +97,13 @@ $.fn.prepareTransition = function( parentEl, property ){ // remove the transition class upon completion (don't ise $.one, incase multiple properties transitioning) el.on('TransitionEnd webkitTransitionEnd transitionend oTransitionEnd', function(evt){ - console.log( evt.originalEvent.propertyName) - // just triggers for one property type (if specified) if( property && evt.originalEvent.propertyName !== property ) return; // stops multiple events triggering if(!evtFired) { evtFired = true; - parentEl.removeClass('is-transitioning'); + el.removeClass('is-transitioning'); // Need to add MS events as well? $(this).off('TransitionEnd webkitTransitionEnd transitionend oTransitionEnd'); @@ -117,7 +113,7 @@ $.fn.prepareTransition = function( parentEl, property ){ el.addClass('hasnt-transition'); } - // Need to add MS events as well? + // Don't we need to add MS events as well? // check the various CSS properties to see if a duration has been set var cl = ["transition-duration", "-moz-transition-duration", "-webkit-transition-duration", "-o-transition-duration"]; @@ -126,11 +122,11 @@ $.fn.prepareTransition = function( parentEl, property ){ duration || (duration = parseFloat( el.css( itm ) )); }); - // Need to add delay here as well + // Should really add delay here as well, right? // if I have a duration then add the class if (duration != 0) { - if( hasTrans ) parentEl.addClass('is-transitioning'); + if( hasTrans ) el.addClass('is-transitioning'); el[0].offsetWidth; // check offsetWidth to force the style rendering }; }); diff --git a/preparetransition.min.js b/preparetransition.min.js index b7e2093..fca0141 100644 --- a/preparetransition.min.js +++ b/preparetransition.min.js @@ -1 +1 @@ -!function(n){function t(){var n=document.body||document.documentElement,t=n.style,r="transition";if("string"==typeof t[r])return!0;var o=["Moz","webkit","Webkit","Khtml","O","ms"];r=r.charAt(0).toUpperCase()+r.substr(1);for(var s=0;s