PDA

View Full Version : Swtich card animation break display



gabrielstuff
24 Oct 2010, 7:17 PM
Hello all !

Thanks again for this amazing framework, I wish I could learn faster and develop better app now.
Thank you for all the kindly advice, it's getting better everyday.

Well I recently noticed a bug that I can not understand. I have a tabpanel with a structure that is fill by a simple array containing unqiue panel.Some of this panel allow a navigation into the panel, like nested list but they are not list.

Well what could add to the element (the card) a webkit-transform set to the negative value width of the card ? if my card is 480 then, the -webkit-transform3D is set to -480px.

I have set the tabpanel to no animation between the card, it works perfect as long as I stay in to the tabpanel cards perimeter.

Once I go further, sometime if I go back to one of the icon in the tab, my supposed layout is broken and the card is full fixed to the left of the screen. Actually, if I take a look at the CSS of the div corresponding to the component there is a transform3D for the scroll and a value set to the full width of the card. If I remove this line in SAFARI, then the card reappear in the view. The weird thing is that if I try to clik/touch the icon panel, the card does not show up like if it was stuck with a value that hide it.

Here is a snippet of code that allow me to do specific animation depending of the item pressed/touched :


onNavigation: function(newCard, oldCard, animation){

//clear the history if card from dock
if (oldCard.iconCls){
this.lastCard = [];
this.currentTabCard = oldCard;
}
this.lastCard.push(oldCard);

//change card
newCard.tab = "";
if (animation.type == undefined)
{
animation = {
type: 'slide',
direction: 'left'
};
app.animation = animation;
this.setCard(newCard, animation);
}
else if (animation.type == 'none')
{
app.animation = animation;
this.setCard(newCard);
}
else
{
app.animation = animation;
this.setCard(newCard, animation);
}
this.currentCard = newCard;
},

And here is the fullcode of the app.ui that allow me to make my layout :




function doExerpt(content)
{
var ret;
if (content)
ret = (content.substring(0, 120) + '...');
return ret;
}

function rUWHL(text) {
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/i;
return text.replace(exp,"<a href='$1'>$1</a>");
}

app.ux.UniversalUI = Ext.extend(Ext.TabPanel, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
monitorOrientation: false,
scroll: false,
fullscreen: true,
layout: 'card',
ui: 'dark',
draggable: false,
add: function(c){
if (!c.extraCard){
//don't add card if it's an not in the tab
app.ux.UniversalUI.superclass.add.call(this, c);
}
},
onBeforeCardSwitch: function(newCard, oldCard, animated){
if (!newCard.backButtonEnabled)
{
this.backButton.hide();
}
if (!newCard.alertesButtonEnabled)
{
this.alertesButton.hide();
}
},
onCardSwitch: function(newCard, oldCard, animated){
if (newCard.title)
{
this.navigationBar.setTitle(newCard.title);
if (newCard.title == 'Favoris')
{
this.tabBar.items.items[4].setBadge();
}
}

if (newCard.backButtonEnabled)
{
this.backButton.show();
}
if (newCard.alertesButtonEnabled)
{
this.alertesButton.show();
}

//keep the tab active
if (!newCard.iconCls)
{
for (i = 0; i < this.tabBar.items.items.length; i++){
if(this.lastCard[0])
{
if (this.lastCard[0].title == this.tabBar.items.items[i].card.title)
{
this.tabBar.items.items[i].addClass('x-tab-active');
}
}
}
}
if (newCard.iconCls && this.currentTabCard)
{
for (i = 0; i < this.tabBar.items.items.length; i++)
{
if (newCard.title != this.tabBar.items.items[i].card.title)
{
this.tabBar.items.items[i].removeClass('x-tab-active');
}
}
}
},

onNavigation: function(newCard, oldCard, animation){

//clear the history if card from dock
if (oldCard.iconCls){
this.lastCard = [];
this.currentTabCard = oldCard;
}
this.lastCard.push(oldCard);

//change card
newCard.tab = "";
if (animation.type == undefined)
{
animation = {
type: 'slide',
direction: 'left'
};
app.animation = animation;
this.setCard(newCard, animation);
}
else if (animation.type == 'none')
{
app.animation = animation;
this.setCard(newCard);
}
else
{
app.animation = animation;
this.setCard(newCard, animation);
}
this.currentCard = newCard;
},

displayAlertNot: function(){
this.alertesButton.show();
},

initComponent: function(){
this.addListener('cardswitch', this.onCardSwitch, this);
this.addListener('navigation', this.onNavigation, this);

this.addListener('beforecardswitch', this.onBeforeCardSwitch, this);

//faire une boucle sur les elements de onglets
this.relayEvents(app.tabs.Jeu, ['navigation']);
this.relayEvents(app.tabs.Phase, ['navigation']);
this.relayEvents(app.tabs.Equipes, ['navigation']);
this.relayEvents(app.tabs.Calendrier, ['navigation']);
this.relayEvents(app.tabs.vainqueur_selectionne, ['navigation']);
this.relayEvents(app.tabs.Favoris, ['navigation']);


this.backButton = new Ext.Button({
hidden: true,
cls: 'app maintool',
text: 'Retour',
ui: 'back',
handler: this.onBackButtonTap,
scope: this
});

if (Ext.is.Android){
this.backButton.addClass('x-button-back-android');
}
else{
this.backButton.addClass('x-button-back-iphone');
}

this.alertesButton = new Ext.Button({
hidden: false,
text: '@lertes',
cls: 'app maintool',
handler: this.onAlertesButtonTap,
scope: this
});

this.navigationBar = new Ext.Toolbar({
ui: 'dark',
cls: 'topBar maintool',
style: 'font-size:0.9em;height:2.3em;',
dock: 'top',
title: this.title,
items: [this.backButton, {
xtype: 'spacer'
},
this.alertesButton].concat(this.buttons || [])
});

this.dockedItems = this.dockedItems || [];
this.dockedItems.unshift(this.navigationBar);

this.items = this.items || [];
this.items = app.Structure;

this.addEvents('navigate');
this.tabBar.id = 'left_align';

//appel a l'implementation de la superclasse
app.ux.UniversalUI.superclass.initComponent.call(this);
},
afterRender: function(){
app.ux.UniversalUI.superclass.afterRender.call(this);
this.alertesButton.hide();
},


onBackButtonTap: function(){
if (this.currentCard.title == "S'inscrire aux alertes")
{
//Hide the keyboard if change the view
Ext.getCmp('name').fieldEl.dom.focus();
Ext.getCmp('name').fieldEl.dom.blur();
}
if (app.animation.direction == 'left')
{
app.animation = {
type: 'slide',
direction: 'right'
};
this.setCard(this.lastCard.pop(), app.animation);
}
else if (app.animation.type == 'none')
this.setCard(this.lastCard.pop());
else
this.setCard(this.lastCard.pop(), app.animation);

},
onAlertesButtonTap: function(){
app.tabs.Calendrier.fireEvent('navigation', app.tabs.Alertes, app.tabs.Calendrier, {
type: 'none'
});
this.currentCard = app.tabs.Alertes;
}

});

app.Main = {
init: function(){

//construit un objet app.ux.UniversalUI a partir de la definition ci-dessus
this.ui = new app.ux.UniversalUI({
title: 'app Story',
navigationItems: app.Structure
});
}
};

app.getAt = function(el){
if((el<app.Structure.length)&&(el>=0))
return app.Structure[el]
}

Ext.setup({
onReady: function(){
//alert('ready');
storeActivatedItems = new Ext.data.Store({
autoLoad: true,
model: 'activeId',
proxy: {
type: 'scripttag',
url: app.stream1,
reader:
{
root: 'dock'
}
}
});
app.storeActu = new Ext.data.Store({
autoLoad: true,
model: 'Actu',
proxy: {
url: app.stream2,
type: 'scripttag',
reader: {
root: 'data'
}
}
});
app.animation = undefined;
app.selectedTeam = undefined;
app.iToUnM = '';
app.Main.init();
}
});

I hope anyone could take a quick look and give me some advice. It would be nice, and I hope a lot, very usefull !

To reproduce, just select in safari a component and change the .x-scroller CSS. The line webkit-transform3D, you'll see your card move...That is exactly what happen.

Thanks !

gabrielstuff
27 Oct 2010, 12:43 AM
Hi !
I finnaly choose to add a -webkit-transform3D to each of the panel I move... This appear to solve this quasi-unreproductable bug.

Thanks.