Custom animation for navwindows Titanium - animation

//load up profile controller.
function go_to_profile() {
var controller = Alloy.createController('Profile', {
title : 'Profile',
name : '_profile',
isFlyout : true
});
var newWindow = controller.getView();
Alloy.Globals.navGroup.openWindow(newWindow, {
animated : true,
transition:Titanium.UI.iPhone.AnimationStyle.CURL_UP
});
}
Here is my code. I would like to modify it, so that the window slides in upwards. The transition does not seem to work and keeps sliding in from left to right.
Any idea why, cheers.

It's simple, the Ti.UI.iOS.NavigationWindow doesn't allow the transitions.
Only when you call `Window.open()' you can define a transition prop.

Related

Vue-Chartjs onComplete custom labels - prevent blinking

To calculate custom labels for Vue-Chartjs the only solution I could find was via
animation: { onComplete: function () {
The problem that follows is that these labels are blinking on bar hover. I also saw the same behaviour in many other custom label examples/solutiond. Did anyone manage to solve this?
See example here fiddle
The blinking effect is caused because the animation is only triggered when the bars are hovered. You can use the onHover option to trigger whenever the chart canvas is hovered.
Here's an example logic:
(uses the plugin chartjs-plugin-datalabels to make it easier)
options : {
onHover : function (e) {
const display = e.type === 'mouseout' ? false : true
const labels = this.chart.options.plugins.datalabels
if (display&&labels.display) return //avoid updating if already set
labels.display = display
this.chart.update();
}
}
working example

How to add animation when modal shown

I trying add in animation slide right to left when modal page show, but when I adding will get error, isn't can add animation when open modal page?
exports.onModalClick = function(args){
var btn = args.object;
page.showModal("views/abc/Modal/Modal", "abc", function (List) {
if(List.length != 0){
}
}, false).animation({ translate: { x: 0, y: 0 }, opacity: 1 });
};
I would like to point out a few things.
The method for animating a view is
public animate(options: animation.AnimationDefinition): Promise<void>;
and it is an instance function of the View class. Thus your scenario will not work, since the showModal method does not return an instance of the class View. More information about it could be found in the documentation and in the NativeScript GitHub repository.
In order to attach several animations you will have to chain them and not include them in one object. You can read more about this in the Animation article in the documentation.
I hope this will give you some directions of how to use the animation in NativeScript.

OpenLayers events issue, featureover and onselect

I have a strange problem with the use of vector layers events.
Here is snipped of my code:
var options = {
projection : "EPSG:3857",
displayProjection : "EPSG:4326",
numZoomLevels : 18,
//after delete this part below of option everything works good
eventListeners: {
featureover: function(e) {
document.getElementById("output").innerHTML="ok';
}}};
map = new OpenLayers.Map('map', options);
w_parcels = new OpenLayers.Layer.Vector("PARCELS", {
styleMap : style_parcels,
projection : "EPSG:3857",
strategies : [ new OpenLayers.Strategy.Fixed() ],
protocol : new OpenLayers.Protocol.HTTP({
url : "parcels.php",
format : new OpenLayers.Format.GeoJSON()})
});
map.addLayers([osm,w_parcels]);
selectControl = new OpenLayers.Control.SelectFeature(w_parcels, {
clickout: false,
multiple: true,
onSelect : onFeatureSelect,
onUnselect : onFeatureUnselect,
toggleKey: "ctrlKey" // ctrl key removes from selection
});
selectControl.handlers.feature.stopDown = false;
map.addControl(selectControl);
selectControl.activate();
map.addControl(new OpenLayers.Control.ScaleLine());
function onFeatureSelect(feature) {
console.log('it works');
}
In this code event onselect dosen't work always when I click on feature on the layer(sometimes I have to do double click).
If I delete eventListeners from options , the onselect works perfect, I mean always when I click feature on the layer.
What is wrong in my code? Is the possibility to resolve this conflict betwween eventListeners an onselect?
Seems like, Event featureover masks the select control as that function will executes first while you select, as you must mouse over the Vector Layer for clicking it. But if the functionality is limited to select and mouse-over vector layer. Then you can use something like-
eventListeners: {
featureover: function(e) {
//behavior for hover events
},
featureout: function(e) {
//behavior for mouse out events
},
featureclick: function(e) {
//behavior for click events
}
}
Hope this helps.

Hammer.js breaks vertical scroll when horizontal pan

I'm using Hammer.js to look for horizontal pan gestures, I've devised a simple function to clicks a button when panned left or right. It works okay, except the vertical scroll doesn't do anything on a touch device, or it's really glitchy and weird.
Here's the function:
var panelSliderPan = function() {
// Pan options
myOptions = {
// possible option
};
var myElement = document.querySelector('.scroll__inner'),
mc = new Hammer.Manager(myElement);
mc.add(new Hammer.Pan(myOptions));
// Pan control
var panIt = function(e) {
// I'm checking the direction here, my common sense says it shouldn't
// affect the vertical gestures, but it blocks them somehow
// 2 means it's left pan
if (e.direction === 2) {
$('.controls__btn--next').click();
// 4 == right
} else if (e.direction === 4) {
$('.controls__btn--prev').click();
}
};
// Call it
mc.on("panstart", function(e) {
panIt(e);
});
};
I've tried to add a horizontal direction to the recognizer but it didn't really help (not sure if I did it even right):
mc = new Hammer.Manager(myElement, {
recognizers: [
[Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }],
]
});
Thanks!
Try setting the touch-action property to auto.
mc = new Hammer.Manager(myElement, {
touchAction: 'auto',
recognizers: [
[Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }],
]
});
From the hammer.js docs:
When you set the touchAction to auto it doesnt prevent any defaults, and Hammer would probably break. You have to call preventDefault manually to fix this. You should only use this if you know what you're doing.
User patforna is correct. You need to adjust the touch-action property. This will fix scrolling not working when you have hammer bound on a big element in mobile.
You create a Hammer instance like so
var h = new Hammer(options.contentEl, {
touchAction : 'auto'
});
I was working on a pull to refresh feature, so I need the pan event.
Add the recognizers.
h.get( 'pan' ).set({
direction : Hammer.DIRECTION_VERTICAL,
});
h.on('panstart pandown panup panend', eventHandler);
Inside the eventhandler, you'd look at the event that was triggered and manually call on event.preventDefault() when you require it. This is applicable for hammer 2.0.6.
For anyone who's looking the pull to refresh code was taken from - https://github.com/apeatling/web-pull-to-refresh
My problem was that vertical scroll was toggling a sidebar that was supposed to show/hide on horizontal pan/swipe. After looking at the event details, I realized that Hammer probably triggers panleft and panright event based on X delta and doesn't consider Y delta, so my quick solution was to check the pan direction in my handler:
this.$data.$hammer.on('panleft', (e) => {
if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
return;
}
this.isVisible = true;
});
I was stuck on this for several days. Hope this will fix your problem.
mc = new Hammer(myElement, {
inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput,
touchAction: 'auto',
});
When the relevant gesture is triggered, we applied a css class to the element, that would set the touch-action to none.
mc.on('panmove panstart', event => {
mc.addClass('is-dragging');
}
);
.is-dragging {
touch-action: none !important;
}
Hammer 2.x does not support vertical swipe/pan. Documentation says:
Notes:
When calling Hammer() to create a simple instance, the pan and swipe recognizers are configured to only detect horizontal gestures
You can however use older 1.1.x version, which supports vertical gestures
——
Clarification: this refers to a ‘simple instance’ which is when you don’t pass in any recognizer configuration as the second parameter. In other words these are the defaults but can (and usually should) be overridden.

Viewport Apply Conditional Toolbar with Sencha Touch

Im going to MVC route with Sencha. I have a Viewport panel initialized much like the twitter example:
/**
* #author Jeff Blake
*/
Ext.regApplication('App', {
defaultTarget: 'viewport',
defaultUrl : 'Viewport/index',
name : 'App',
icon : "mobile/public/resources/images/icon.png",
phoneStartupScreen : "mobile/public/resources/images/phone_startup.png",
//useHistory : false,
//useLoadMask : true,
launch: function() {
Ext.Viewport.init();
Ext.Viewport.onOrientationChange();
this.viewport = new App.Viewport({
application: this
});
Ext.dispatch({
controller: 'User',
action : 'index'
});
}
});
/**
* #class App.Viewport
* #extends Ext.Panel
* This is a default generated class which would usually be used to initialize your application's
* main viewport. By default this is simply a welcome screen that tells you that the app was
* generated correctly.
*/
App.Viewport = Ext.extend(Ext.Panel, {
id : 'viewport',
layout : 'card',
fullscreen: true,
cardSwitchAnimation: 'slide',
initComponent: function() {
Ext.apply(this, {
dockedItems: [
{
// Top Bar
dock : 'top',
xtype : 'toolbar',
title : 'Whats Good',
items: [
{
text: 'About'
},
]
}
]
});
App.Viewport.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('App.Viewport', App.Viewport);
New Code:
if (!App.viewport.getDockedComponent(homeBar)) {
var homeBar = new App.HomeBar();
App.viewport.addDocked(homeBar);
}
I want to be able to conditionally apply DockedItems (toolbars) based on which Type of panel is currently rendered in the Viewport. EG: one for Login, Home screen, detail screen, etc.
I've tried using Ext.apply(App.Viewport, { dockedItems: [App.LoginBar]});
But that doesn't work. Currently it works to add the toolbar to the currently rendered Panel and setting it to fullscreen, but unfortunately transitions and things behave weirdly as the structure is
Panel
Toolbar
Panel
Toolbar
/end Panel
/end Panel
Does anyone have a suggestion?
To programmatically add a docked item, I would recommend using
viewport.addDocked(loginBar);
Methods like this are far better than trying to update the original configuration of the component.
Then there is also a .removeDocked() method to take it off again.
Also make sure you are dealing with instances of the components, not trying to update their class.
To get the reference to your application's viewport, you can come in through the 'App' namespace, which is automatically created by the name property of the regApplication config.
So you could make your toolbar button do this for example:
{
text: 'About',
handler: function() {
App.viewport.getDockedItems()[0].setTitle('Pressed!');
}
},
Which would make the title change when you press the button.
But now I better understand what it is you are trying to do, I recommend you don't dock a single, dynamically-changed toolbar to the outer viewport, but add individual toolbars to each of the (card) panels in it. That way they get to slide nicely too ;-)

Resources