So I have the following button in Ionic:
HTML
<button ion-button (click)="play()">
<ion-icon *ngIf="!isPlaying" name="play"></ion-icon>
<ion-icon *ngIf="isPlaying" name="stop"></ion-icon>
</button>
Component
play() {
this.isPlaying = true;
this.nativeAudio.play('audioId', () => {
this.isPlaying = false;
});
}
Right now when I click the button the icon switches to stop which indicates the play has started. But when after playing even when I set the isPlaying to false the button still shows the stop icon.
Now in my view there are different buttons and I noticed that when I press one of the other buttons the icon now switches to the play icon. It almost seems like the UI doesn't refresh until there's another activity on the UI. This also happens when I try to switch displayed images using *ngIf.
Thanks in advance!
Try like this.
play(){
this.isPlaying = ! this.isPLaying;
}
in your html file
<button ion-button (click)="play()">
<ion-icon [name]="!isPlaying? 'play':'stop'"></ion-icon>
</button>
Hope this helps.
Related
The main problem I'm looking at right now is the next/previous buttons are not working as expected after featherlightGallery() has been called more than once - The first click on the next button always shows the first image while the previous button always shows the 2nd to last image.
GitHub
The idea is to show the first 4 thumbnails from a gallery on a page.
When one of these thumbnails is clicked, the (hidden) gallery opens via featherlight, a click is triggered on the related image in the gallery, and the gallery behind the image is closed. This leaves the viewer with the image they clicked and the next/previous buttons. (ignore the lack of styling!)
Every time these thumbnails are clicked, the next/previous buttons work as expected, displaying adjacent images in the gallery.
The first 4 images from the gallery shown on the page: (# is substituted for actual numbers. The data-click attr is used in JS to trigger a click on the related gallery image)
<div id="intro-gallery">
<a data-click="gi-#" class="intro" href="img/#.jpg"><div class="intro" style="background-image: url('img/#.jpg');"></div></a>
<a data-click="gi-#" class="intro" href="img/#.jpg"><div class="intro" style="background-image: url('img/#.jpg');"></div></a>
<a data-click="gi-#" class="intro" href="img/#.jpg"><div class="intro" style="background-image: url('img/#.jpg');"></div></a>
<a data-click="gi-#" class="intro" href="img/#.jpg"><div class="intro" style="background-image: url('img/#.jpg');"></div></a>
</div>
Clicking this link opens the featherlight div without triggering any clicks or hiding the gallery (with JS).
<p><a class="link" href="#main-gallery-container">Gallery</a></p>
The first time the link is clicked, the gallery is shown and the user clicks a thumbnail, the next/previous buttons work as expected. Since the gallery is hidden after user clicks a thumbnail, they need to click the Gallery button again to see all the thumbs - at this point, after clicking another thumbnail, the next button always shows the first image and the previous button shows the 2nd to last image. Seems like the current image is set to the last image in this case.
Inside this #main-gallery div are 12 .gallery-item divs (1 shown for brevity).
<div id="main-gallery" data-featherlight-gallery data-featherlight-filter=".mgi">
<div class="gallery-item">
<a class="main" id="gi-#" href="#mgi-#">
<div class="thumb-holder" style="background-image: url('img/{$x}.jpg');"></div>
</a>
<div class="mgi-wrapper">
<div id="mgi-#" class="mgi">
<div class="mgi-image" style="background-image: url('img/#.jpg');">
</div>
<div class="mgi-text">
<p>Some text goes here</p>
</div>
</div>
</div>
</div>
</div>
JS
"use strict";
(function ($) {
$(function () {
$('a.link').click(function (e) {
e.preventDefault();
$.featherlight.close();
$.featherlightGallery.close();
initGallery();
}); // Add link to view gallery, bind click.
$.featherlightGallery.prototype.afterOpen = function () {
var link = $('<span class="single-gallery-link"><a class="link" href="#main-gallery-container">View Gallery Images</a></span>');
$('.featherlight.single .featherlight-content').prepend(link);
$(link).click(function () {
$.featherlight.close();
$.featherlightGallery.close();
initGallery();
});
};
$('a.intro').click(function (e) {
e.preventDefault();
initGallery(); // get ID from data-att of initial thumbnail
var id = $(this).data('click'); // Get same thumb in gallery and trigger a click
var thumb = document.getElementById(id);
$(thumb).click();
});
$('#link').click(function (e) {
e.preventDefault();
initGallery();
});
var switchToGallery = function switchToGallery(e) {
// prevent triggered click
e.preventDefault();
$.featherlight.close();
$.featherlightGallery.close();
initGallery();
};
var initGallery = function initGallery() {
$.featherlight('#main-gallery', {
variant: 'onclick',
afterOpen: function afterOpen() {
$('a.main').featherlightGallery({
targetAttr: 'href',
variant: 'single',
beforeOpen: function beforeOpen() {
$.featherlight.close();
}
});
}
});
};
});
//https://stackoverflow.com/a/52611202/774793
//$.featherlightGallery($(".column"), {$currentTarget: $('the first item, maybe this in your case?')});
})(jQuery);
//# sourceMappingURL=index.js.map
EDIT: I don't like posting URLs with a limited lifespan here but for the sake of solving the problem - temporary example
The library is confused, $.featherlightGallery.current().$currentTarget[0] seems to be a detached copy and not part of $.featherlightGallery.current().slides() so navigation is lost.
I'm not too sure what is going on and don't have the time to delve into it further.
I would try with persist: true. Also looks like you are constantly re-initing the gallery, you should bind it once.
I am using ionic 3, and looping ion-card with like using ngFor. I want to know how can I react with the user when user click the like/unlike button in each ion-card without reload the list.
<ion-card *ngFor="let u of users">
<p>{{u.name}}</p>
<button ion-button [hidden]="u.isliked=='1'" (click)="like(u.id)">like</button>
<button ion-button [hidden]="u.isliked!='1'" (click)="unlike(u.id)">unlike</button>
</ion-card>
You can make use of the *ngIf operator. This won't hide the element like the hidden property, but actually removes the element from the DOM.
(made u.isLiked into a boolean because I think it's cleaner that way, personal preference. Also changed (click) to (tap), see the answer on ionic2 tap vs click for more details.)
<ion-card *ngFor="let u of users">
<p>{{u.name}}</p>
<button ion-button *ngIf="u.isLiked" (tap)="like(u.id)">like</button>
<button ion-button *ngIf="!u.isliked" (tap)="unlike(u.id)">unlike</button>
</ion-card>
And in your ts:
like(userId) {
for(let user of this.users) {
if(user.id == userId) {
user.isLiked = true;
}
}
}
unlike(userId) {
for(let user of this.users) {
if(user.id == userId) {
user.isLiked = false;
}
}
}
https://i.stack.imgur.com/NnhMY.png
https://i.stack.imgur.com/NIYZm.png
I took this from a site and I'm trying to have one like this only on the right side of my page. In my page i have a header,footer and in the content area i have this ion slide box where the images will be sliding one after the other. so i want a right carousel like in the second image link..
According to the Ionic Docs you can. The ion-slide-boxelement comes with the $ionicSlideBoxDelegate service that provides helper methods to control the slides.One of these helper functions on the service is next(). this allows you to go to next slide on a button click event.All you need to do is position your button as required and use the code as below(slightly modified from documentation).
USAGE:
//Your view
<ion-view>
<ion-slide-box>
<ion-slide>
<div class="box blue">
Slide 1
</div>
</ion-slide>
<ion-slide>
<div class="box red">
Slide 2!
</div>
</ion-slide>
</ion-slide-box>
//Your button
<button ng-click="nextSlide()" class = "button-icon ion-chevron-right"></button>
</ion-view>
//In your controller
function MyCtrl($scope, $ionicSlideBoxDelegate) {
$scope.nextSlide = function() {
$ionicSlideBoxDelegate.next();
}
}
If click any ion-item it open the desired page but if i click device back button it close the app rather than going back to previous page in android:
This is my ionic side menu:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon icon ion-android-menu" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-positive">
<h1 class="title"></h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-click="login()">
Login
</ion-item>
<ion-item menu-close ui-sref="app.search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Here is app.js :
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search/default.html'
}
}
})
.state('app.search-form', {
url: '/search-form',
views: {
'menuContent': {
templateUrl: 'templates/search/search-form.html'
}
}
})
One solution I found:
$ionicHistory.nextViewOptions({
disableBack: true,
historyRoot: true
});
So when you click a button and going to next page, this will will disable back button.
The default behaviour of the back button is as follows:
Go back in history - if the history stack is empty -> exit the app.
So you should check the $state you are in, when you tap the hardware back button.
With the following code (placed in the run function of your module) you can overwrite the default behaviour. For example you can disable the app exit like this:
$ionicPlatform.registerBackButtonAction(function (event) {
if($state.current.name=="app.home"){
navigator.app.exitApp(); //<-- remove this line to disable the exit
}
else {
navigator.app.backHistory();
}
}, 100);
See the documentation for $ionicPlatform.
It is the menu-close attribute in the side menu that clears the history. You could experiment by replacing it with menu-toggle="left". That will still close the side bar but keep the history.
I ended up overriding the behaviour for the HW back key like below.
It sends the user to the starting view before exiting the app when pressing back. Note that I still use the menu-close attribute in the side menu. Also note I happen to store the start url in window.localStorage["start_view"] because it can change in my app. Hope it can help/inspire someone else with this problem.
$ionicPlatform.registerBackButtonAction(function(event) {
if ($ionicHistory.backView() == null && $ionicHistory.currentView().url != window.localStorage["start_view"]) {
// Goto start view
console.log("-> Going to start view instead of exiting");
$ionicHistory.currentView($ionicHistory.backView()); // to clean history.
$rootScope.$apply(function() {
$location.path(window.localStorage["start_view"]);
});
} else if ($ionicHistory.backView() == null && $ionicHistory.currentView().url == window.localStorage["start_view"]) {
console.log("-> Exiting app");
navigator.app.exitApp();
} else {
// Normal back
console.log("-> Going back");
$ionicHistory.goBack();
}
}, 100);
Import NavController in your app.component.ts and use below code.
import { NavController} from '#ionic/angular';
constructor( private nav: NavController ) {this.initializeApp();}
ngOnInit() {
this.plateform.backButton.subscribe(res => {
this.nav.goBack('');
});
}
One solution might be:
$ionicHistory.nextViewOptions({
disableBack: true,
historyRoot: true
});
This prevents the event from spreading, otherwise it did not work.
Code by: https://stackoverflow.com/users/5378702/andre-kreienbring
$ionicPlatform.registerBackButtonAction(function (event) {
if(condition){
navigator.app.exitApp(); //<-- remove this line to disable the exit
}
else {
navigator.app.backHistory();
}
throw "PreventBackButton";
}, 100);
Fixed thanks to helpers below, see it in action here: http://bit.ly/15npgSC
I am learning jQuery and have come across a problem which I cannot find a fix for. I have a content slider which when a button is clicked, it slides open, and when the button is clicked again, it closes. This is all fine, the problem I have is that the slider opens automatically when the page loads, not only when clicked. How can I keep it closed when the page loads and have it only open when clicked? It works fine afterwards, its just that as the page loads, it opens. I tried putting $(document).click(function() { at the start which kind of worked but then when clicked it would open and then close immediately after opening with no click. I changed back to the jQuery code below but now have the problem of it opening when the page loads again.
$(document).ready(function() {
$('.pull-me').click(function() {
$('.panel').slideToggle('slow');
});
$('a').toggle(function() {
$(this).html("Click to close!");},
function() { $(this).html("Click to open!");
}).click();
});
If you are able to fix this problem, could you explain why this occurs with my current code and why the fix stops that happening please?
Thanks, Rafa.
Sorry for not posting the HTML code before, but this is it:
<div class="panel">
<br />
<br />
<p>Now you see me!</p>
</div>
<div>
<p class="slide">Click to open!</p>
</div>
Because you did not post any HTML so I guess '.pull-me' is an 'a' element.
Pls try below code(remove .click()):
$(document).ready(function() {
$('.pull-me').click(function() {
$('.panel').slideToggle('slow');
});
$('a').toggle(function() {
$(this).html("Click to close!");},
function() { $(this).html("Click to open!");
}); // modified here
});
You are triggering click event when the page first load.
Try this:
// HTML
<div class="pull-me">
Click here!
</div>
<div class="panel">
show/hide
</div>
// jQuery
$(document).ready(function() {
$('.pull-me').click(function() {
$('.panel').slideToggle('slow');
});
$('a').toggle(function() {
$(this).html("Click to open!");},
function() { $(this).html("Click to close!");
});
});
check here in this JsFiddle -> http://jsfiddle.net/GXCuz/1/