Hey Ionions!
I'm stuck on making Ionic RTL to use in my app today,
I've made some progress, I used the win froms app I made two weeks ago [(LTRtoRTL repo)](https://github.com/wesamco/LTRtoRTL), to convert the css to RTL, basically it flips everything, left to right, and right to left, but that's all because no animations fliping to RTL i'm not a css wizard. then I looked how Nav Animation works in Ionic and found out this in bundle.js, I made some edits I flipped the
var OFF_LEFT = '33%'; to var OFF_LEFT = '-33%';
and var OFF_RIGHT = '-99.5%'; to var OFF_RIGHT = '99.5%';
right now i'm stuck on how is that black side bar animating in when the back nav animation plays (I think it's just the current nav animating to the right 33% and the background of a tab is black color so it appears), and how to put the back > button on the left?
this should not be done like that, by rtl apps developers, the ionic docs only recommends setting the language attribute to the correct language (Arabic (ar) in my case) and the correct direction (RTL) doing just that does not add the correct animations functionality for RTL Mobile applications, I suggest on this Issue that Animation Directions can be set in App Configurations, like BackButtonText.
`/**/ },
/ 359 */
function(module, exports, webpack_require) {
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var animation_1 = __webpack_require__(306);
var transition_1 = __webpack_require__(305);
var DURATION = 500;
var EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
var OPACITY = 'opacity';
var TRANSLATEX = 'translateX';
var OFF_RIGHT = '99.5%';
var OFF_LEFT = '-33%';
var CENTER = '0%';
var OFF_OPACITY = 0.8;
var SHOW_BACK_BTN_CSS = 'show-back-button';
var IOSTransition = (function (_super) {
__extends(IOSTransition, _super);
function IOSTransition(enteringView, leavingView, opts) {
_super.call(this, opts);
this.duration(opts.duration || DURATION);
this.easing(opts.easing || EASING);
// what direction is the transition going
var backDirection = (opts.direction === 'back');
// do they have navbars?
var enteringHasNavbar = enteringView.hasNavbar();
var leavingHasNavbar = leavingView && leavingView.hasNavbar();
var enteringPage = new animation_1.Animation(enteringView.pageRef());
enteringPage.before.addClass('show-page');
this.add(enteringPage);
// entering content
var enteringContent = new animation_1.Animation(enteringView.contentRef());
this.add(enteringContent);
if (backDirection) {
// entering content, back direction
enteringContent
.fromTo(TRANSLATEX, OFF_LEFT, CENTER, true)
.fromTo(OPACITY, OFF_OPACITY, 1, true);
}
else {
// entering content, forward direction
enteringContent
.before.clearStyles([OPACITY])
.fromTo(TRANSLATEX, OFF_RIGHT, CENTER, true);
}
if (enteringHasNavbar) {
// entering page has a navbar
var enteringNavBar = new animation_1.Animation(enteringView.navbarRef());
enteringNavBar.before.addClass('show-navbar');
this.add(enteringNavBar);
var enteringTitle = new animation_1.Animation(enteringView.titleRef());
var enteringNavbarItems = new animation_1.Animation(enteringView.navbarItemRefs());
var enteringNavbarBg = new animation_1.Animation(enteringView.navbarBgRef());
var enteringBackButton = new animation_1.Animation(enteringView.backBtnRef());
enteringNavBar
.add(enteringTitle)
.add(enteringNavbarItems)
.add(enteringNavbarBg)
.add(enteringBackButton);
enteringTitle.fadeIn();
enteringNavbarItems.fadeIn();
// set properties depending on direction
if (backDirection) {
// entering navbar, back direction
enteringTitle.fromTo(TRANSLATEX, OFF_LEFT, CENTER, true);
if (enteringView.enableBack()) {
// back direction, entering page has a back button
enteringBackButton
.before.addClass(SHOW_BACK_BTN_CSS)
.fadeIn();
}
}
else {
// entering navbar, forward direction
enteringTitle.fromTo(TRANSLATEX, OFF_RIGHT, CENTER, true);
if (leavingHasNavbar) {
// entering navbar, forward direction, and there's a leaving navbar
// should just fade in, no sliding
enteringNavbarBg
.before.clearStyles([TRANSLATEX])
.fadeIn();
}
else {
// entering navbar, forward direction, and there's no leaving navbar
// should just slide in, no fading in
enteringNavbarBg
.before.clearStyles([OPACITY])
.fromTo(TRANSLATEX, OFF_RIGHT, CENTER, true);
}
if (enteringView.enableBack()) {
// forward direction, entering page has a back button
enteringBackButton
.before.addClass(SHOW_BACK_BTN_CSS)
.fadeIn();
var enteringBackBtnText = new animation_1.Animation(enteringView.backBtnTextRef());
enteringBackBtnText.fromTo(TRANSLATEX, '100px', '0px');
enteringNavBar.add(enteringBackBtnText);
}
else {
enteringBackButton.before.removeClass(SHOW_BACK_BTN_CSS);
}
}
}
// setup leaving view
if (leavingView) {
// leaving content
var leavingContent = new animation_1.Animation(leavingView.contentRef());
this.add(leavingContent);
if (backDirection) {
// leaving content, back direction
leavingContent
.before.clearStyles([OPACITY])
.fromTo(TRANSLATEX, CENTER, '100%');
}
else {
// leaving content, forward direction
leavingContent
.fromTo(TRANSLATEX, CENTER, OFF_LEFT)
.fromTo(OPACITY, 1, OFF_OPACITY);
}
if (leavingHasNavbar) {
// leaving page has a navbar
var leavingNavBar = new animation_1.Animation(leavingView.navbarRef());
var leavingBackButton = new animation_1.Animation(leavingView.backBtnRef());
var leavingTitle = new animation_1.Animation(leavingView.titleRef());
var leavingNavbarItems = new animation_1.Animation(leavingView.navbarItemRefs());
var leavingNavbarBg = new animation_1.Animation(leavingView.navbarBgRef());
leavingNavBar
.add(leavingBackButton)
.add(leavingTitle)
.add(leavingNavbarItems)
.add(leavingNavbarBg);
this.add(leavingNavBar);
// fade out leaving navbar items
leavingBackButton.fadeOut();
leavingTitle.fadeOut();
leavingNavbarItems.fadeOut();
if (backDirection) {
// leaving navbar, back direction
leavingTitle.fromTo(TRANSLATEX, CENTER, '100%');
if (enteringHasNavbar) {
// leaving navbar, back direction, and there's an entering navbar
// should just fade out, no sliding
leavingNavbarBg
.before.clearStyles([TRANSLATEX])
.fadeOut();
}
else {
// leaving navbar, back direction, and there's no entering navbar
// should just slide out, no fading out
leavingNavbarBg
.before.clearStyles([OPACITY])
.fromTo(TRANSLATEX, CENTER, '100%');
}
var leavingBackBtnText = new animation_1.Animation(leavingView.backBtnTextRef());
leavingBackBtnText.fromTo(TRANSLATEX, CENTER, (300) + 'px');
leavingNavBar.add(leavingBackBtnText);
}
else {
// leaving navbar, forward direction
leavingTitle.fromTo(TRANSLATEX, CENTER, OFF_LEFT);
}
}
}
}
return IOSTransition;
})(transition_1.Transition);
transition_1.Transition.register('ios-transition', IOSTransition);
// },
/ 360 /
// function(module, exports, webpack_require) {
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var animation_1 = __webpack_require__(306);
var transition_1 = __webpack_require__(305);
var TRANSLATEY = 'translateY';
var OFF_BOTTOM = '40px';
var CENTER = '0px';
var SHOW_BACK_BTN_CSS = 'show-back-button';
var MDTransition = (function (_super) {
__extends(MDTransition, _super);
function MDTransition(enteringView, leavingView, opts) {
_super.call(this, opts);
// what direction is the transition going
var backDirection = (opts.direction === 'back');
// do they have navbars?
var enteringHasNavbar = enteringView.hasNavbar();
var leavingHasNavbar = leavingView && leavingView.hasNavbar();
// entering content item moves in bottom to center
var enteringPage = new animation_1.Animation(enteringView.pageRef());
enteringPage.before.addClass('show-page');
this.add(enteringPage);
if (backDirection) {
this.duration(opts.duration || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
enteringPage.before.clearStyles([TRANSLATEY]);
}
else {
this.duration(opts.duration || 280).easing('cubic-bezier(0.36,0.66,0.04,1)');
enteringPage
.fromTo(TRANSLATEY, OFF_BOTTOM, CENTER, true)
.fadeIn();
}
if (enteringHasNavbar) {
var enteringNavBar = new animation_1.Animation(enteringView.navbarRef());
enteringNavBar.before.addClass('show-navbar');
this.add(enteringNavBar);
var enteringBackButton = new animation_1.Animation(enteringView.backBtnRef());
this.add(enteringBackButton);
if (enteringView.enableBack()) {
enteringBackButton.before.addClass(SHOW_BACK_BTN_CSS);
}
else {
enteringBackButton.before.removeClass(SHOW_BACK_BTN_CSS);
}
}
// setup leaving view
if (leavingView && backDirection) {
// leaving content
this.duration(opts.duration || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
var leavingPage = new animation_1.Animation(leavingView.pageRef());
this.add(leavingPage.fromTo(TRANSLATEY, CENTER, OFF_BOTTOM).fadeOut());
}
}
return MDTransition;
})(transition_1.Transition);
transition_1.Transition.register('md-transition', MDTransition);
`
Hey Ionions! I'm stuck on making Ionic RTL to use in my app today, I've made some progress, I used the win froms app I made two weeks ago [(LTRtoRTL repo)](https://github.com/wesamco/LTRtoRTL), to convert the css to RTL, basically it flips everything, left to right, and right to left, but that's all because no animations fliping to RTL i'm not a css wizard. then I looked how Nav Animation works in Ionic and found out this in bundle.js, I made some edits I flipped the var OFF_LEFT = '33%'; to var OFF_LEFT = '-33%'; and var OFF_RIGHT = '-99.5%'; to var OFF_RIGHT = '99.5%'; right now i'm stuck on how is that black side bar animating in when the back nav animation plays (I think it's just the current nav animating to the right 33% and the background of a tab is black color so it appears), and how to put the back > button on the left?this should not be done like that, by rtl apps developers, the ionic docs only recommends setting the language attribute to the correct language (Arabic (ar) in my case) and the correct direction (RTL) doing just that does not add the correct animations functionality for RTL Mobile applications, I suggest on this Issue that Animation Directions can be set in App Configurations, like BackButtonText.
`/**/ },
/ 359 */
function(module, exports, webpack_require) {
// },
/ 360 /
// function(module, exports, webpack_require) {
`