I am working in a Sencha Touch app with different Toasts to show messages like "successful" or "info" etc.. but I am having random behavior, for example:
1º if you navigate for the application tapping in a one action with Toast and you navigate to other screen while Toast is up, toast has a random behavior getting the last color instead of change..( in the test case with the same color but with different message, please you can read the code)
2º Sometimes Toast is not appearing and I do not have explanation.
Any suggestion about the code? currently it is a singleton class, and it is called from other parts/controllers of the app depending the action.
On the other hand, any other approach with a similar behavior? maybe it is needed to change the strategy and no use Toasts..
It is happening in Windows 8 and iOS and I am using 2.4.1 version, reading the release notes of 2.4.2 has not news about this element of the framework, and I guess is not relevant to update to the latest framework version.
Here my Toast Manager class:
/**
* Loading popup as a static-functions class
*
* Different toast-messages colors:
* 0 --> green
* 1 --> orange
* 2 --> red
*
* We create a config object and depending of the status we show a Toast
*/
Ext.define('xx.view.components.ToastManager', {
singleton : true,
requires : [
'Ext.Toast'
],
config : {
toastOptions: {
message : '',
centered : false,
width : 200,
height : 100,
bottom : '10%',
modal : false,
right : 10,
style : '',
type : 'slide', duration: 850, easing: 'ease-out',
hideAnimation: {type: 'fadeOut', duration: 650, easing: 'ease-out'},
timeout : 3000
},
toastComponent : null,
t : null
},
constructor : function () {
this.initConfig();
},
changeVisibility: function() {
if(this.getT()) {
clearTimeout(this.getT());
}
var toastes = Ext.query('.x-toast');
for(var i = 0; i < toastes.length; i++) {
Ext.get(toastes[i]).setStyle('visibility', 'visible');
}
var t = setTimeout(function() {
var toastes = Ext.query('.x-toast');
for(var i = 0; i < toastes.length; i++) {
Ext.get(toastes[i]).setStyle('visibility', 'hidden');
}
}, 4000);
this.setT(t);
},
/**
* Shows a successful message
* #param label
* #param status
*/
showToastMessage : function (label, status) {
var options = this.getToastOptions();
options.message = label;
switch (status) {
case 0:
options.style = 'background-color: #30B420';
break;
case 1:
options.style = 'background-color: #FFA500';
break;
case 2:
options.style = 'background-color: #ff0000';
break;
default:
options.message = "?"
}
this.changeVisibility();
this.setToastComponent(Ext.toast(this.getToastOptions()));
}
});
I'm using this function for my toast messages (in ExtJS though):
showToastMessage: function(message, alignTo){
Ext.toast({
cls: 'toast-window',
header: false,
html : '<div class="toast">' + message + '</div>',
animate: true,
slideInAnimation: 'ease',
slideInDuration: 300,
slideOutDuration: 200,
autoCloseDelay: 1500,
align: alignTo ? alignTo : 't'
});
}
You can apply some css to toast-window and toast classes to make you message look nice.
You just pass your message to this function and it should show a nice toast!
Related
I'm using Scrollreveal.js to reveal some divs on my website.
Now i want Scrollreveal to call a function after it has revealed a specific div.
As the documentation says:
"
// Callbacks that fire for each completed element reveal, and reset.
afterReveal: function (domEl) {},
afterReset: function (domEl) {}"
My code:
var demo = new CountUp('mails', 0, 641, 0, 2.5, options);
sr.reveal('#mails', {
duration : 600,
delay : 200,
distance : '220px',
easing : 'ease-out',
origin : 'left',
scale : 1,
viewFactor : 0.2,
afterReveal: function (domEl) {domEl.demo();}});
Can anyone tell me what the correct syntax is to call my variable after the div has been revealed?
I have tried for a long time to do it myself, with no positive results, so i think it's ok to ask someone for help now :)
Thanks!
Figured it out, it wasn't difficult, as i suspected, just me being new to this :)
so to shorten this, this is how i used CountUp.js with Scrollreveal.js
sr.reveal('#mails', {
duration : 600,
delay : 200,
distance : '220px',
easing : 'ease-out',
origin : 'left',
scale : 1,
viewFactor : 0.2,
beforeReveal: function(){var options = {
useEasing: true, useGrouping: true, separator: ',', decimal: '.',
};
var demo = new CountUp('mails', 0, 641, 0, 2.5, options);
if (!demo.error) {demo.start();
} else {console.error(demo.error);
}},
});
Iam facing problem with ng-smartBanner,unable to see banner with respect to device,It is showing directly the binded text.
JavaScript:
var myAppModule = angular.module('myApp', ['ng-smartBanner'])
.config(function(BannerOptionsProvider){
BannerOptionsProvider.setBannerOptions(
{
title: 'toto', // What the title of the app should be in the banner
(defaults to <title>)
author: "toto gro", // What the author of the app should be in the banner (defaults to <meta name="author"> or hostname)
price: '1 milion de dollar', // Price of the app
icon: 'icon-app.png', // The URL of the icon (defaults to <meta name="apple-touch-icon">)
button: 'TELECHARGER', // Text for the install button
urlStore: 'http://www.google.de', // The URL for the button. Keep null if you want the button to link to the app store.
scale: 'auto', // Scale based on viewport size (set to 1 to disable)
speedIn: 300, // Show animation speed of the banner
speedOut: 400, // Close animation speed of the banner
daysHidden: 15, // Duration to hide the banner after being closed (0 = always show banner)
daysReminder: 90, // Duration to hide the banner after "VIEW" is clicked *separate from when the close button is clicked* (0 = always show banner)
force: 'ios' // Choose 'ios', 'android' or 'windows'. Don't do a
browser check, just always show this banner
}
);
});
// configure the module.
// in this example we will create a greeting filter
myAppModule.filter('greet', function() {
return function(name) {
return 'Hello, ' + name + '!';
};
});
Here is my plunker link: Plunker
Hi i am using quick note plugin.
In IE8 i am getting the error Object doesn't support this property or method, have no idea how to solve this, I am getting this error on below code
error here ->
$.fn.postitall.defaults = {
// Basic Settings
id : 0, //Id
created : Date.now(),
domain : window.location.origin, //Domain in the url
page : window.location.pathname, //Page in the url
backgroundcolor : '#FFFC7F', //Background color
textcolor : '#333333', //Text color
textshadow : true, //Shadow in the text
position : 'relative', //Position absolute or relative
posX : '5px', //top position
posY : '5px', //left position
height : 180, //height
width : 200, //width
minHeight : 152, //resizable min-width
minWidth : 131, //resizable min-height
description : '', //content
newPostit : false, //Create a new postit
autoheight : true, //Set autoheight feature on or off
draggable : true, //Set draggable feature on or off
resizable : true, //Set resizable feature on or off
removable : true, //Set removable feature on or off
changeoptions : true, //Set options feature on or off
savable : false, //Save postit in local storage
// Callbacks / Event Handlers
onChange: function () { return 'undefined'; },
onSelect: function () { return 'undefined'; },
onDblClick: function () { return 'undefined'; },
onRelease: function () { return 'undefined'; }
};
Date.now wasn't added to Javascript specification until ECMAScript 5 which means that it is not present on IE8 and lower. This is why you get the mentioned error. However, you can implement your own Date.now() method:
/** +new Date is short for (new Date).valueOf(); */
var Date.now = Date.now || function(){ return +new Date; };
So, if Date.now exists you will use existing browser's implementation, otherwise you define your own function.
I get this error:
[ERROR][GeolocationModule( 278)] (KrollRuntimeThread) [633,2564] Unable to get current position, location is null
and I have followed other people's advice without any luck.
Could someone lead me in the right direction? I would be so grateful. Thank you!
var win1 = Titanium.UI.createWindow({
title : 'map_landing',
backgroundColor : '#fff'
});
var win2 = Titanium.UI.createWindow({
title : 'hails_window',
backgroundColor : '#fff'
});
var win3 = Titanium.UI.createWindow({
title : 'cabs_window',
backgroundColor : '#fff'
});
User = {
location : {}
};
var hail_button = Titanium.UI.createButton({
title : 'Hail Cab',
top : 10,
width : 200,
height : 50
});
var find_button = Titanium.UI.createButton({
title : 'Find People',
bottom : 10,
width : 200,
height : 50
});
var options = {
accessKeyId : '',
secretAccessKey : ''
}
Ti.Geolocation.purpose = "Receive user location";
Titanium.Geolocation.getCurrentPosition(function(e) {
if (e.error) {
alert('HFL cannot get your current location');
return;
}
User.location.longitude = e.coords.longitude;
User.location.latitude = e.coords.latitude;
User.location.accuracy = e.coords.accuracy;
User.location.speed = e.coords.speed;
User.location.timestamp = e.coords.timestamp;
var mapview = Titanium.Map.createView({
mapType : Titanium.Map.STANDARD_TYPE,
region : {
latitude : User.location.latitude,
longitude : User.location.longitude,
latitudeDelta : 0.01,
longitudeDelta : 0.01
},
animate : true,
regionFit : true,
userLocation : true
});
win1.add(mapview);
win1.add(hail_button);
win1.add(find_button);
hail_button.addEventListener('click', function(e) {
alert('hello');
$.ajax('http://hail.pagodabox.com/add_hail', {
type : 'POST',
lat : User.location.latitude,
lang : User.location.longitude,
success : function(response) {
alert(response)
}
})
});
find_button.addEventListener('click', function(e) {
});
win1.open();
});
It took me some time to track this down, but I think I've found the steps needed to "fix" the lack of a location in the Android emulator (from this answer):
First, open ddms (Dalvik Debug Monitor). On Windows, navigate to the
android-sdk\tools directory and run ddms.bat. The first line in the
top-left pane will read something like "emulator-####" such as
emulator-5560.
Open a command prompt window. Enter 'telnet localhost ####'
substituting the number you found above. This will open a telnet
window to your android emulator.
Enter the following command (substitute your own longitude & latitude,
in that order, if you'd like):
geo fix -82.411629 28.054553
(I'm pretty sure you can add elevation as a third number.) The GPS
icon will appear in the emulator's notification bar. Geolocation is
now available. At this point, I could get location data in my app and
in other apps, such as Maps.
I've got a bug which needs fixing in my iOS app developed on Appcelerator Titanium.
I've been using customTabBar (available on GitHub) to create a bespoke tabBar and it works great!
The only small issue is that it removes the option to tab on the icons and return to the root window (like a proper native tabBar would do in iOS).
So if I drill down 3 or 4 windows in my app, tapping the tab icon does nothing, I have to navigate back to the beginning by tapping back multiple times.
Here is the full customTabBar.js script I am using:
CustomTabBar = function(settings) {
var tabBarItems = [];
var tabCurrent = 2;
var resetTabs = function() {
for(var i = 0; i < tabBarItems.length; i++) {
// Clear all the images to make sure only
// one is shown as selected
tabBarItems[i].image = tabBarItems[i].backgroundImage;
}
};
var assignClick = function(tabItem) {
tabItem.addEventListener('click', function(e) {
// Just fetching the 'i' variable from the loop
var pos = e.source.pos;
if (tabCurrent == pos) {
// TODO
// Change back to root window, like the native tab action.
// code must go in here
return false;
}
// Switch to the tab associated with the image pressed
settings.tabBar.tabs[pos].active = true;
tabCurrent = pos;
// Reset all the tab images
resetTabs();
// Set the current tab as selected
tabBarItems[pos].image = settings.imagePath + settings.items[pos].selected;
});
};
// Create the container for our tab items
var customTabBar = Ti.UI.createWindow({
height: 48,
backgroundImage:'images/tabbarbackground.png',
bottom: 0
});
for(var i = 0; i < settings.items.length; i++) {
// Go through each item and create an imageView
tabBarItems[i] = Titanium.UI.createImageView({
// background is the default image
backgroundImage: settings.imagePath + settings.items[i].image,
width: settings.width,
height: settings.height,
left: settings.width * i
});
// Pass the item number (used later for changing tabs)
tabBarItems[i].pos = i;
assignClick(tabBarItems[i]);
// Add to the container window
customTabBar.add(tabBarItems[i]);
}
// Display the container and it's items
customTabBar.open();
// Set the first item as current :)
resetTabs();
//tabBarItems[0].image = settings.imagePath + settings.items[0].selected;
tabBarItems[2].image = settings.imagePath + settings.items[2].selected;
return {
hide: function() { customTabBar.hide(); },
show: function() { customTabBar.show(); }
};
};
The function that contains the bit I need adding is already marked up, but is just empty. Here it is:
var assignClick = function(tabItem) {
tabItem.addEventListener('click', function(e) {
// Just fetching the 'i' variable from the loop
var pos = e.source.pos;
if (tabCurrent == pos) {
// TODO
// Change back to root window, like the native tab action.
// code must go in here
return false;
}
// Switch to the tab associated with the image pressed
settings.tabBar.tabs[pos].active = true;
tabCurrent = pos;
// Reset all the tab images
resetTabs();
// Set the current tab as selected
tabBarItems[pos].image = settings.imagePath + settings.items[pos].selected;
});
};
customTabBar places a window (really, just a view) over the existing tab bar. Then it handles clicks that come through. But you must handle the click events to switch between tabs, and as you have noted, track all of the windows that are on the stack.
But you know what? You're working too hard. The platform already does all that for you.
Pass click events through (by disabling touch on the overlay), and the underlying tab group will work its own magic. Then all you need to do is update the UI with the tab group's focus event (evt.index is the focused tab, and evt.previousIndex the blurred).
app.js:
Ti.include('overrideTabs.js');
/*
This is a typical new project -- a tab group with three tabs.
*/
var tabGroup = Ti.UI.createTabGroup();
/*
Tab 1.
*/
var win1 = Ti.UI.createWindow({ title: 'Tab 1', backgroundColor: '#fff' });
var tab1 = Ti.UI.createTab({
backgroundImage: 'appicon.png',
window: win1
});
var button1 = Ti.UI.createButton({
title: 'Open Sub Window',
width: 200, height: 40
});
button1.addEventListener('click', function (evt) {
tab1.open(Ti.UI.createWindow({ title: 'Tab 1 Sub Window', backgroundColor: '#fff' }));
});
win1.add(button1);
tabGroup.addTab(tab1);
/*
Tab 2.
*/
tabGroup.addTab(Ti.UI.createTab({
backgroundImage: 'appicon.jpg',
window: Ti.UI.createWindow({ title: 'Tab 2', backgroundColor: '#fff' })
}));
/*
Tab 3.
*/
tabGroup.addTab(Ti.UI.createTab({
backgroundImage: 'appicon.png',
window: Ti.UI.createWindow({ title: 'Tab 3', backgroundColor: '#fff' })
}));
/*
Now call the overrideTabs function, and we're done!
*/
overrideTabs(
tabGroup, // The tab group
{ backgroundColor: '#f00' }, // View parameters for the background
{ backgroundColor: '#999', color: '#000', style: 0 }, // View parameters for selected tabs
{ backgroundColor: '#333', color: '#888', style: 0 } // View parameters for deselected tabs
);
tabGroup.open();
overrideTabs.js:
/**
* Override a tab group's tab bar on iOS.
*
* NOTE: Call this function on a tabGroup AFTER you have added all of your tabs to it! We'll look at the tabs that exist
* to generate the overriding tab bar view. If your tabs change, call this function again and we'll update the display.
*
* #param tabGroup The tab group to override
* #param backgroundOptions The options for the background view; use properties like backgroundColor, or backgroundImage.
* #param selectedOptions The options for a selected tab button.
* #param deselectedOptions The options for a deselected tab button.
*/
function overrideTabs(tabGroup, backgroundOptions, selectedOptions, deselectedOptions) {
// a bunch of our options need to default to 0 for everything to position correctly; we'll do it en mass:
deselectedOptions.top = deselectedOptions.bottom
= selectedOptions.top = selectedOptions.bottom
= backgroundOptions.left = backgroundOptions.right = backgroundOptions.bottom = 0;
// create the overriding tab bar using the passed in background options
backgroundOptions.height = 50;
var background = Ti.UI.createView(backgroundOptions);
// pass all touch events through to the tabs beneath our background
background.touchEnabled = false;
// create our individual tab buttons
var increment = 100 / tabGroup.tabs.length;
deselectedOptions.width = selectedOptions.width = increment + '%';
for (var i = 0, l = tabGroup.tabs.length; i < l; i++) {
var tab = tabGroup.tabs[i];
// position our views over the tab.
selectedOptions.left = deselectedOptions.left = increment * i + '%';
// customize the selected and deselected based on properties in the tab.
selectedOptions.title = deselectedOptions.title = tab.title;
if (tab.backgroundImage) {
selectedOptions.backgroundImage = deselectedOptions.backgroundImage = tab.backgroundImage;
}
if (tab.selectedBackgroundImage) {
selectedOptions.backgroundImage = tab.selectedBackgroundImage;
}
if (tab.deselectedBackgroundImage) {
deselectedOptions.backgroundImage = tab.deselectedBackgroundImage;
}
selectedOptions.visible = false;
background.add(tab.deselected = Ti.UI.createButton(deselectedOptions));
background.add(tab.selected = Ti.UI.createButton(selectedOptions));
}
// update the tab group, removing any old overrides
if (tabGroup.overrideTabs) {
tabGroup.remove(tabGroup.overrideTabs);
}
else {
tabGroup.addEventListener('focus', overrideFocusTab);
}
tabGroup.add(background);
tabGroup.overrideTabs = background;
}
function overrideFocusTab(evt) {
if (evt.previousIndex >= 0) {
evt.source.tabs[evt.previousIndex].selected.visible = false;
}
evt.tab.selected.visible = true;
}
https://gist.github.com/853935