Plugin used: https://github.com/Foxandxss/angular-toastr
My intention is to create a toastr that spans the full with of the page on top and according to the documentation, positionClass: 'toast-top-full-width' will do the trick.
toastr.success('Hello world!', 'Toastr fun!', {
positionClass: 'toast-top-full-width'
});
A peek into the plugins css also validate the claim.
.toast-top-full-width {
top: 0;
right: 0;
width: 100%;
}
But somehow, the code doesn't work. Whats wrong with my code?
Plunkr: http://plnkr.co/edit/2O6hjk5vnMUWWULNK9hs?p=preview
You need to configure the toast in the angular config.
var app = angular.module('app', ['ngAnimate', 'toastr']);
app.config(function(toastrConfig) {
angular.extend(toastrConfig, {
positionClass: 'toast-top-full-width'
});
});
app.controller('toastr-demo', function($scope, toastr) {
toastr.success('Hello world!', 'Toastr fun!');
});
Plunker: http://plnkr.co/edit/pdstz2WkJqdi1Qw0R1pX?p=preview
Your problem is the toastContainer is not big enough, you should add a config like :
app.config(function(toastrConfig) {
angular.extend(toastrConfig, {
positionClass: 'toast-top-full-width'
});
});
This way, the container of all your toast will be full width, and then when you call a toast you can set his size to full-width.
Related
VRview is not working and doesn't show me the 360 image. I am coding in Angular 1 app and trying to show 360 image. I tried photosphere viewer and now vrviewer but unable to understand regarding how to write the code in angular. Kindly assist
angular.module("MyControllers", [])
.controller("VR", function ($window) {
var onVrViewLoad = function() {
var vrView = new VRView.Player('#vrview', {
img: 'img/virtualTour.jpg',
is_stereo: false
});
}
$window.addEventListener('load', onVrViewLoad)
})
According to Google VR docs
To use VR View, include the Google-provided vrview.min.js script
within your HTML:
<script src="https://storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
Video View
Your controller should be as follows. Instantiate the VR View as soon as the page loads which should be listening to the load event.
angular.module('VRApp', [])
.controller('VRController', function($window) {
var onVrViewLoad = function() {
var vrView = new VRView.Player('#vrview', {
video: 'https://storage.googleapis.com/vrview/examples/video/congo_2048.mp4',
is_stereo: true,
});
};
$window.addEventListener('load', onVrViewLoad);
});
Check out my Plunker for live demonstration.
Image View
I've tested it in IE 11 and it worked fine. Tried the below code
angular.module('myApp', [])
.controller('VRController', function($scope, $window) {
var onVrViewLoad = function() {
var vrView = new VRView.Player('#vrview', {
width: '60%',
height: '60%',
img: 'http://storage.googleapis.com/vrview/index.html?image=//storage.googleapis.com/vrview/examples/coral.jpg&is_stereo=true',
is_stereo: true,
});
};
$window.addEventListener('load', onVrViewLoad);
});
Output in IE 11
I have a code here and i want to make it usable for AngularJS. this's the original plugin PAPER COLLAPSE i want to use it in a AngularJS project so i'll be able to Do ng-repeat
here's the jQuery Plugin's code
(function() {
(function($) {
'use strict';
$.fn.paperCollapse = function(options) {
var settings;
settings = $.extend({}, $.fn.paperCollapse.defaults, options);
$(this).find('.collapse-card__heading').add(settings.closeHandler).click(function() {
if ($(this).closest('.collapse-card').hasClass('active')) {
settings.onHide.call(this);
$(this).closest('.collapse-card').removeClass('active');
$(this).closest('.collapse-card').find('.collapse-card__body').slideUp(settings.animationDuration, settings.onHideComplete);
} else {
settings.onShow.call(this);
$(this).closest('.collapse-card').addClass('active');
$(this).closest('.collapse-card').find('.collapse-card__body').slideDown(settings.animationDuration, settings.onShowComplete);
}
});
return this;
};
$.fn.paperCollapse.defaults = {
animationDuration: 400,
easing: 'swing',
closeHandler: '.collapse-card__close_handler',
onShow: function() {},
onHide: function() {},
onShowComplete: function() {},
onHideComplete: function() {}
};
})(jQuery);
}).call(this);
Thank you
It's quite easy, see this plunk. You'll probably want to tune the css abit.
There's no solid way to do a css only slideUp/slideDown, but if you don't mind including jquery you can always add a watch on card.$active and do the slide via jquery.
Can anyone suggest me how to disable animations in angular js application while executing protractor tests. I have added below code in my protractor config file but that does not help me:
var disableNgAnimate = function() {
angular.module('disableNgAnimate', []).run(function($animate) {
$animate.enabled(false);
});
};
browser.addMockModule('disableNgAnimate', disableNgAnimate);
You can check out the angular's protractor configuration:
https://github.com/angular/angular.js/blob/master/protractor-shared-conf.js
You should add it under onPrepare block:
onPrepare: function() {
/* global angular: false, browser: false, jasmine: false */
// Disable animations so e2e tests run more quickly
var disableNgAnimate = function() {
angular.module('disableNgAnimate', []).run(['$animate', function($animate) {
$animate.enabled(false);
}]);
};
browser.addMockModule('disableNgAnimate', disableNgAnimate);
I personally use the following code in the "onPrepare" function in my 'conf.js' file to disable both Angular/CSS animations:
...
onPrepare: function() {
var disableNgAnimate = function() {
angular
.module('disableNgAnimate', [])
.run(['$animate', function($animate) {
$animate.enabled(false);
}]);
};
var disableCssAnimate = function() {
angular
.module('disableCssAnimate', [])
.run(function() {
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '* {' +
'-webkit-transition: none !important;' +
'-moz-transition: none !important' +
'-o-transition: none !important' +
'-ms-transition: none !important' +
'transition: none !important' +
'}';
document.getElementsByTagName('head')[0].appendChild(style);
});
};
browser.addMockModule('disableNgAnimate', disableNgAnimate);
browser.addMockModule('disableCssAnimate', disableCssAnimate);
}
...
Please note: I did not write the above code, I found it online while looking for ways to speed up my own tests.
Disabling CSS Animations / Transitions
In addition to disabling ngAnimation (ie, element(by.css('body')).allowAnimations(false);), you may need to disable some animation that has been applied through CSS.
I have found this sometimes contributes to some such animated elements, that may appear to Protractor to be 'clickable' (ie, EC.elementToBeClickable(btnUiBootstrapModalClose)), to not actually respond to .click(), etc.
In my particular case, I was suffering with a ui.bootstrap modal that transitioned in and out, and I wasn't always able to get its internal 'close' button reliably clicked.
I found that disabling css animations helped. I added a class to a stylesheet:
.notransition * {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
... and in protractor, I've got something like:
_self.disableCssAnimations = function() {
return browser.executeScript("document.body.className += ' notransition';");
};
There may be slicker ways of applying this concept, but I found that the above worked very well for me - in addition to stabilising the tests, they run quicker as they're not waiting for animations.
See this for an example: https://github.com/angular/protractor/blob/master/spec/basic/elements_spec.js#L123
it('should export an allowAnimations helper', function() {
browser.get('index.html#/animation');
var animationTop = element(by.id('animationTop'));
var toggledNode = element(by.id('toggledNode')); // animated toggle
// disable animation
animationTop.allowAnimations(false);
// it should toggle without animation now
element(by.id('checkbox')).click();
});
Right so I'm fairly new to angular and really enjoying the experience and I'm slowly but successfully running through a few gotchas that keep cropping up, however this one has be stumped.
I'm loading a version of the Jquery Vector map and everything is working a treat. I'm creating the empty object and populating it from my datasource in a format that the map can use to colour code but here is where the problem crops up.
When the map is instantiated, it gets the contents of the object 'ratingobj' however the resource hasn't populated the object by the time its rendered. I can see this in the console log as ratingobj is always empty.
I understand the concept that the resource is a promise and when the data is retrieved it will be populated however what I can't work out is how to get the resource to resolve the resource and get the data prior to the map being loaded!
Please help, any pointers would be great!
Thanks
Here is my resource query in my services:
.factory('CountryData', ['$resource',
function($resource){
return $resource('http://mydatasource/datafeed', {}, {
query: {
method:'GET',
isArray:false,
}
})
}])
Here's the controller
.controller('jqvmapCtrl', ['$scope' ,'CountryData', 'greeting',
function($scope, CountryData, greeting) {
var ratingobj = {};
$scope.rating = CountryData.query(function (response){
angular.forEach(response.record, function(value,key) {
ratingobj[value.countryISO] = value.countryRating;
});
});
console.log(ratingobj);
$scope.worldMap = {
map: 'world_en',
backgroundColor: null,
color: '#ffffff',
hoverOpacity: 0,
hoverColor: '#C2C2C2',
selectedColor: '#666666',
enableZoom: true,
showTooltip: true,
values: ratingobj,
scaleColors: ['#C4FFFF', '#07C0BB'],
normalizeFunction: 'polynomial',
};
}
]);
This is my main app file with the route
.when('/countries/map', {
templateUrl: 'views/countries/map.html',
controller: 'jqvmapCtrl',
})
how to get the resource to resolve the resource and get the data prior to the map being loaded
There are two ways how to accomplish that.
1. Delay rendering of the map widget until the data is loaded. Add ng-if="worldMap" to the element holding your map, for example
<div id="vmap" ng-if="worldMap"></div>
See the following SO answer for more details: https://stackoverflow.com/a/22510508/69868
2. Delay rendering of the whole view until the data is loaded.
Extend the route definition with a resolve block.
.when('/countries/map', {
templateUrl: 'views/countries/map.html',
controller: 'jqvmapCtrl',
resolve: {
ratingobj: function(CountryData) {
return CountryData.query().$promise
.then(function(response) {
var ratingobj = {};
angular.forEach(response.record, function(value,key) {
ratingobj[value.countryISO] = value.countryRating;
});
return ratingobj;
});
}
}
})
Modify the controller to get ratingObj injected instead of CountryData:
.controller('jqvmapCtrl', ['$scope' ,'ratingobj', 'greeting',
function($scope, ratingobj, greeting) {
console.log(ratingobj);
$scope.worldMap = {
map: 'world_en',
backgroundColor: null,
color: '#ffffff',
hoverOpacity: 0,
hoverColor: '#C2C2C2',
selectedColor: '#666666',
enableZoom: true,
showTooltip: true,
values: ratingobj,
scaleColors: ['#C4FFFF', '#07C0BB'],
normalizeFunction: 'polynomial',
};
}
]);
See the following SO answer for more details: https://stackoverflow.com/a/16288468/69868
This is how I would check internet connection in vanilla javascript:
setInterval(function(){
if(navigator.onLine){
$("body").html("Connected.");
}else{
$("body").html("Not connected.");
}
},1000);
I have angular controllers and modules in my project. Where should I put the code above? It should be executed in global context and not be assigned to a certain controller. Are there some kind of global controllers maybe?
First of all, I advise you to listen to online/offline events.
You can do it this way in AnguarJS:
var app = module('yourApp', []);
app.run(function($window, $rootScope) {
$rootScope.online = navigator.onLine;
$window.addEventListener("offline", function() {
$rootScope.$apply(function() {
$rootScope.online = false;
});
}, false);
$window.addEventListener("online", function() {
$rootScope.$apply(function() {
$rootScope.online = true;
});
}, false);
});
NOTE: I am wrapping changing of root scope's variable in $apply method to notify Angular that something was changed.
After that you can:
In controlller:
$scope.$watch('online', function(newStatus) { ... });
In HTML markup:
<div ng-show="online">You're online</div>
<div ng-hide="online">You're offline</div>
Here is a working Plunker: http://plnkr.co/edit/Q3LkiI7Cj4RWBNRLEJUA?p=preview
Other solution could be to broadcast online/offline event. But in this case you need to initialize current status upon loading and then subscribe to event.
It's definitely not as nice, but you could just try an AJAX request to your web server; it'll either succeed or time out.
Also, the HubSpot/offline project looks really good.
Your options:
addEventListener on the window, document, or document.body.
setting the .ononline or .onoffline properties on document or
document.body to a JavaScript Function object.
specifying ononline="..." or onoffline="..." attributes on the tag in
the HTML markup
I will demonstrate the easiest.
In you controller
document.body.onoffline = function() {
alert('You are offline now');
$scope.connection = 'offline'
}
document.body.ononline = function() {
alert('You are online again');
$scope.connection = 'online'
}
Check $scope.connection variable before you try to send requests around.
For Angular 2+ you can use ng-speed-test:
Just install:
npm install ng-speed-test --save
Inject into your module:
import { SpeedTestModule } from 'ng-speed-test';
#NgModule({
...
imports: [
SpeedTestModule,
...
],
...
})
export class AppModule {}
Use service to get speed:
import {SpeedTestService} from 'ng-speed-test';
#Injectable()
export class TechCheckService {
constructor(
private speedTestService:SpeedTestService
) {
this.speedTestService.getMbps().subscribe(
(speed) => {
console.log('Your speed is ' + speed);
}
);
}
}