ES6: Transition helper
This commit is contained in:
parent
3930d933ca
commit
dd8e5583d7
|
@ -0,0 +1,29 @@
|
||||||
|
/**
|
||||||
|
CSS transitions are a PITA, often we need to queue some js after a transition, this helper ensures
|
||||||
|
it happens after the transition.
|
||||||
|
|
||||||
|
SO: http://stackoverflow.com/questions/9943435/css3-animation-end-techniques
|
||||||
|
**/
|
||||||
|
var dummy = document.createElement("div"),
|
||||||
|
eventNameHash = {
|
||||||
|
webkit: "webkitTransitionEnd",
|
||||||
|
Moz: "transitionend",
|
||||||
|
O: "oTransitionEnd",
|
||||||
|
ms: "MSTransitionEnd"
|
||||||
|
};
|
||||||
|
|
||||||
|
var transitionEnd = function() {
|
||||||
|
var retValue;
|
||||||
|
retValue = "transitionend";
|
||||||
|
Object.keys(eventNameHash).some(function(vendor) {
|
||||||
|
if (vendor + "TransitionProperty" in dummy.style) {
|
||||||
|
retValue = eventNameHash[vendor];
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return retValue;
|
||||||
|
}();
|
||||||
|
|
||||||
|
export default function (element, callback) {
|
||||||
|
return $(element).on(transitionEnd, callback);
|
||||||
|
}
|
|
@ -1,43 +0,0 @@
|
||||||
/**
|
|
||||||
CSS transitions are a PITA, often we need to queue some js after a transition, this helper ensures
|
|
||||||
it happens after the transition.
|
|
||||||
|
|
||||||
SO: http://stackoverflow.com/questions/9943435/css3-animation-end-techniques
|
|
||||||
|
|
||||||
|
|
||||||
@class TransitionHelper
|
|
||||||
@namespace Discourse
|
|
||||||
@module Discourse
|
|
||||||
**/
|
|
||||||
|
|
||||||
var dummy, eventNameHash, transitionEnd, _getTransitionEndEventName;
|
|
||||||
|
|
||||||
dummy = document.createElement("div");
|
|
||||||
|
|
||||||
eventNameHash = {
|
|
||||||
webkit: "webkitTransitionEnd",
|
|
||||||
Moz: "transitionend",
|
|
||||||
O: "oTransitionEnd",
|
|
||||||
ms: "MSTransitionEnd"
|
|
||||||
};
|
|
||||||
|
|
||||||
_getTransitionEndEventName = function() {
|
|
||||||
var retValue;
|
|
||||||
retValue = "transitionend";
|
|
||||||
Object.keys(eventNameHash).some(function(vendor) {
|
|
||||||
if (vendor + "TransitionProperty" in dummy.style) {
|
|
||||||
retValue = eventNameHash[vendor];
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return retValue;
|
|
||||||
};
|
|
||||||
transitionEnd = _getTransitionEndEventName();
|
|
||||||
|
|
||||||
Discourse.TransitionHelper = {
|
|
||||||
after: function(element, callback) {
|
|
||||||
return $(element).on(transitionEnd, callback);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
/*global assetPath:true */
|
/*global assetPath:true */
|
||||||
|
|
||||||
import userSearch from 'discourse/lib/user-search';
|
import userSearch from 'discourse/lib/user-search';
|
||||||
|
import afterTransition from 'discourse/lib/after-transition';
|
||||||
|
|
||||||
var ComposerView = Discourse.View.extend(Ember.Evented, {
|
var ComposerView = Discourse.View.extend(Ember.Evented, {
|
||||||
templateName: 'composer',
|
templateName: 'composer',
|
||||||
|
@ -106,7 +107,7 @@ var ComposerView = Discourse.View.extend(Ember.Evented, {
|
||||||
resize: this.resize,
|
resize: this.resize,
|
||||||
onDrag: function (sizePx) { self.movePanels.apply(self, [sizePx]); }
|
onDrag: function (sizePx) { self.movePanels.apply(self, [sizePx]); }
|
||||||
});
|
});
|
||||||
Discourse.TransitionHelper.after($replyControl, this.resize);
|
afterTransition($replyControl, this.resize);
|
||||||
this.ensureMaximumDimensionForImagesInPreview();
|
this.ensureMaximumDimensionForImagesInPreview();
|
||||||
this.set('controller.view', this);
|
this.set('controller.view', this);
|
||||||
}.on('didInsertElement'),
|
}.on('didInsertElement'),
|
||||||
|
|
Loading…
Reference in New Issue