Related
I have an ionic tab page containing event specific information to display.
Routing is set up so that you are routed to a specific event's tab page
tabs.page.html
<ion-tabs>
<ion-tab-bar slot="bottom" mode="md">
<ion-tab-button tab="token">
<ion-icon src="/assets/svg/ticket-star.svg"></ion-icon>
<ion-label>Tokens</ion-label>
</ion-tab-button>
<ion-tab-button tab="transactions">
<ion-icon src="/assets/svg/empty-wallet-change.svg"></ion-icon>
<ion-label>Transactions</ion-label>
</ion-tab-button>
<div class="centerd-btn"></div>
<ion-tab-button tab="swipe">
<ion-icon src="/assets/svg/people.svg"></ion-icon>
<ion-label>Swipe</ion-label>
</ion-tab-button>
<ion-tab-button tab="buy">
<ion-icon src="/assets/svg/card.svg"></ion-icon>
<ion-label>Buy</ion-label>
</ion-tab-button>
<ion-tab-button tab="user" hidden>
</ion-tab-button>
<ion-tab-button tab="notifications" hidden>
</ion-tab-button>
<ion-tab-button tab="help" hidden>
</ion-tab-button>
</ion-tab-bar>
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
<ion-fab-button routerLink="scan" routerLinkActive="active-tab" [routerLinkActiveOptions]="{exact:true}">
<ion-icon src="/assets/svg/qr-scan.svg"></ion-icon>
</ion-fab-button>
<ion-label>Scan at bar</ion-label>
</ion-fab>
</ion-tabs>
tabs-routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: ':eventId',
component: TabsPage,
children: [
{
path: 'home',
loadChildren: () => import('../home/home.module').then(m => m.HomePageModule)
},
{
path: 'token',
loadChildren: () => import('../token/token.module').then(m => m.TokenPageModule)
},
{
path: 'transactions',
loadChildren: () => import('../transactions/transactions.module').then(m => m.TransactionsPageModule)
},
{
path: 'swipe',
loadChildren: () => import('../swipe/swipe.module').then(m => m.SwipePageModule)
},
{
path: 'buy',
loadChildren: () => import('../buy/buy.module').then(m => m.BuyPageModule)
},
{
path: 'scan',
loadChildren: () => import('../scan/scan.module').then(m => m.ScanPageModule)
},
{
path: 'notifications',
loadChildren: () => import('../notifications/notifications.module').then(m => m.NotificationsPageModule)
},
{
path: 'help',
loadChildren: () => import('../help/help.module').then(m => m.HelpPageModule)
},
{
path: 'user',
loadChildren: () => import('../user/user.module').then(m => m.UserPageModule)
},
{
path: '',
redirectTo: '/event/swipedrinks/home',
pathMatch: 'full'
}
]
},
{
path: '',
component: TabsPage
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
All works fine except for this <ion-fab> element's routing.
I can click it the first time and the app is routed correctly to for example /event/A4OUJTpgYfeNEF6e5k4v/scan but after clicking on another tab element you can't go back to the scan part.
I don't have any console errors so I don't really know where to start.
I guess Ionic is handling the tab attribute not the same as routerLink attribute in the ion-fab element but what is the alternative then?
Hi it seems like there is some issue in sol ionic faced same issue at side nav resolved issue by using (click)="navController.naviagteForward('event/scan')" and in constructor constructor(public navController:NavController)
I'm using TinyMCE 5 and Media plugin with the following configuration:
tinymce.init({
selector: "textarea",
menubar: false,
plugins: [
"media image",
],
toolbar: "media image",
media_dimensions: false,
media_alt_source: false,
media_poster: false,
images_upload_url: 'postAcceptor.php',
images_upload_handler: function (blobInfo, success, failure) {
setTimeout(function () {
success('http://moxiecode.cachefly.net/tinymce/v9/images/logo.png');
}, 2000);
},
});
Is there any way to remove (disable, hide) the "Embed" tab (section) without affecting other components/controls?
I've checked the documentation for Media plugin but there's nothing about that...
Also, applying this CSS:
<style>
.tox .tox-dialog__body-nav-item:nth-child(2) {
display: none;
}
</style>
hides the "Embed" tab on media-dialog, but it also hides tabs on other dialogs. For example, it would also hide the "Upload" tab on dialog for image.
FIDDLE: http://fiddle.tinymce.com/cwhaab
On Github there is a "feature-request" for this: https://github.com/tinymce/tinymce/issues/6082 ... but I'm looking for a workaround (until this new feature/option becomes available).
I'm using TinyMCE 5.4.2
REALLY BAD CODE ALERT!
Unfortunately there isn't any clean way to configure editor to make it work as you want. That being said, really bad approach would be to filter tab by going through the tab list after media command is executed and hiding any tab which contains text Embed.
Take a look at this playground demo:
tinymce.init({
selector: "textarea",
menubar: false,
plugins: [
"media image",
],
toolbar: "media image",
media_dimensions: false,
media_alt_source: false,
media_poster: false,
images_upload_url: 'postAcceptor.php',
images_upload_handler: function(blobInfo, success, failure) {
setTimeout(function() {
success('http://moxiecode.cachefly.net/tinymce/v9/images/logo.png');
}, 2000);
},
setup: function(editor) {
editor.on('ExecCommand', (event) => {
const command = event.command;
if (command === 'mceMedia') {
const tabElems = document.querySelectorAll('div[role="tablist"] .tox-tab');
tabElems.forEach(tabElem => {
if (tabElem.innerText === 'Embed') {
tabElem.style.display = 'none';
}
});
}
});
}
});
<form method="post" action="dump.php">
<textarea name="content"></textarea>
</form>
Just use CSS to hide the second element;
<style>
.tox .tox-dialog__body-nav-item:nth-child(2) {
display: none;
}
</style>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
menubar: false,
plugins: [
"media",
],
toolbar: "media",
media_dimensions: false,
media_alt_source: false,
media_poster: false,
});
</script>
<form method="post" action="dump.php">
<textarea name="content"></textarea>
</form>
In the real version, you should put the control inside a div and target that with the selector as well so as not to effect all tinymce controls
Edit:
By putting a selector I mean do the following
<style>
.onlyEffectMe .tox .tox-dialog__body-nav-item:nth-child(2) {
display: none;
}
</style>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
menubar: false,
plugins: [
"media",
],
toolbar: "media",
media_dimensions: false,
media_alt_source: false,
media_poster: false,
});
</script>
<form method="post" action="dump.php">
<div class="onlyEffectMe">
<textarea name="content"></textarea>
</div>
</form>
I am working in Ionic App and I want to show the submenu in the sidebar. I am fetching the menus using the *ngFor but the problem is that I am not able to show the submenu.
This is my app.html:
<ion-menu [content]="content" side="left" type="overlay">
<ion-content class="mymenu22">
<ion-grid class="formenu11">
<h1 class="mymenuh11">OTHERS</h1>
</ion-grid>
<ion-list>
<button menuClose ion-item *ngFor="let p1 of pages1" (click)="openPage(p1)" class="menu2">
<ion-icon name="{{p1.name1}}"></ion-icon> {{p1.title1}}
</button>
</ion-list>
</ion-content>
</ion-menu>
In this, I am showing the menus in the sidebar and I want to show the submenu for the first menu.
This is my app.component.ts:
pages1: Array<{title1: string, component: any, name1: string}>;
this.pages1 = [
{ title1: 'Manage Account', component: ManageaccountPage, name1: 'settings' },
{ title1: 'About Us', component: AboutPage, name1: 'people' },
{ title1: 'Gallery', component: GalleryPage, name1: 'images' },
{ title1: 'Contact Us', component: ContactPage, name1: 'contacts' },
];
For the Manage Account, I want to show the submenu.
For the Manage Account, I want to show the submenu but I am not getting any code for this.
Any help is much appreciated.
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
})
export class AppComponent {
public appPages = [
{ title: 'Home', url: 'home', icon: 'home' },
{ title: 'About', url: '/about', icon: 'people' },
{ title: 'Contact', url: '/contact', icon: 'call' },
{ title: 'Gallery', url: '/gallery', icon: 'images' },
{ title: 'Setting', url: '/setting', icon: 'settings',
children: [
{ title: 'sub-menu1', url: '/sub-menu1', icon: 'person' },
{ title: 'sub-menu2', url: '/sub-menu2', icon: 'person' },
{ title: 'sub-menu3', url: '/sub-menu3', icon: 'pulse' }
] }
];
constructor() {}
}
==app.component.html==
<ion-app>
<ion-split-pane >
<ion-menu menuId="custom">
<ion-header>
<ion-toolbar >
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div *ngFor="let p of appPages">
<ion-menu-toggle *ngIf="p.url">
<ion-item (click)="sidemenuClick(p)" [routerDirection]="'root'" [routerLink]="[p.url]" [routerLinkActive]="['active-menu']">
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label class="menu-name">
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-item button *ngIf="p.children?.length > 0" (click)="p.open = !p.open"
[class.active-parent]="p.open" detail="false">
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label class="menu-name">
{{p.title}}
</ion-label>
<ion-icon slot="end" name="arrow-dropdown" *ngIf="p.open"></ion-icon>
<ion-icon slot="end" name="arrow-dropright" *ngIf="!p.open"></ion-icon>
</ion-item>
<ion-list *ngIf="p.open">
<ion-menu-toggle>
<ion-item style="padding-left: 20px;" *ngFor = "let sub of p.children" (click)="sidemenuClick(p)" [routerDirection]="'root'" [routerLink]="[sub.url]" [routerLinkActive]="['active-menu']">
<ion-icon slot="start" [name]="sub.icon"></ion-icon>
<ion-label class="menu-name">
{{sub.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</div>
</ion-content>
<ion-footer class="bar-stable" (click)="logout()">
<ion-menu-toggle>
<ion-item class="sign-out">
<ion-icon class="app-color logo" slot="end" name="log-out"></ion-icon>
<ion-label class="app-color name">Sign Out</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-footer>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
</ion-app>
I use bootstrap, and when typing html I want emmet completion for div.row to be:
<div class= "row">
<div>
What I get is:
display:.row;
Here are my settings, trying to stop non emmet expansion. What can I do to get the expansion I want?
"html.suggest.angular1": false,
"html.suggest.ionic": false,
"html.suggest.html5": false,
"editor.wordBasedSuggestions": false,
"editor.acceptSuggestionOnCommitCharacter": false,
"editor.acceptSuggestionOnEnter": false,
"editor.suggestOnTriggerCharacters": false,
"editor.quickSuggestions": {
"other": false,
"comments": false,
"strings": false
I had an error in settings json for one project. When i fixed the error emmit is working now.
After trying to use the stateHelper to reorganize my app's menu layout I'm getting an error;
Error: Could not resolve 'app.user.home' from state ''
at Object.transitionTo (ionic.bundle.js:49177)
at Object.go (ionic.bundle.js:49110)
at app.js:220
This happens when my app loads and $state.go('app.user.home') runs on app.js:220
My situation is that admin users are shown a "hamburger stack" icon that opens a side menu with certain views only admins can navigate to.
When a non-admin enters the same view they are shown a "home" icon instead that links to the home view.
Both admins and non-admins have the home view which has ui-sref links to additional views they can both navigate to.
When the "hamburger icon" is shown for an admin the ui-sref to the home view is moved to the side menu.
This is my stateHelperProvider code;
.config(function(stateHelperProvider, $urlRouterProvider, $ionicConfigProvider) {
stateHelperProvider
.state({
name: 'app',
url: '/',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'MenuCtrl',
})
.state({
name: 'app.user',
url: '/user',
abstract: true,
children:[
{
name: 'app.user.home',
url: '/home',
templateUrl: 'templates/landing.html',
controller: 'HomeCtrl'
},
{
name: 'app.user.board',
url: '/board',
templateUrl: 'templates/pta-board.html',
controller: 'BoardCtrl'
},
{
name: 'app.user.events',
url: 'events',
templateUrl: 'templates/events.html',
controller: 'EventsCtrl'
},
{
name: 'app.user.chatrooms',
url: '/chat-rooms',
templateUrl: 'templates/chat-rooms.html',
controller: 'RoomsCtrl',
children:[
{
name: 'app.user.chatrooms.chatroom',
url: '/room',
templateUrl: 'templates/chat-room.html',
params:{
roomId: null,
chatters: null
},
controller: 'ChatCtrl'
}
]
},
{
name: 'app.user.profile',
url: '/profile',
templateUrl: 'templates/user-profile.html',
params:{
isNewUser: null
},
controller: 'UserCtrl'
},
{ name: 'app.user.admin',
url: 'admin',
abstract: true,
children:[
{
name: 'app.user.admin.calendar',
url: '/calendar',
params:{
selectedEvent: null,
calendarTitle: 'Volunteer',
isVolunteerSignup: true
},
templateUrl: 'templates/rcalendar.html',
controller: 'CalendarCtrl'
},
{
name: 'app.user.admin.volunteers',
url: '/volunteers',
params:{
thisHoursVolunteers: null,
thisEvent: null
},
templateUrl: 'templates/admin-interact.html',
controller: 'VolunteerCtrl'
},
{
name: 'app.user.admin.roles',
url: '/roles',
templateUrl: 'templates/roles.html',
controller: 'RoleCtrl'
},
{
name: 'app.user.admin.settings',
url: '/settings',
templateUrl: 'templates/settings.html',
controller: 'SettingsCtrl'
}
]
}
]
})
.state({
name: 'login',
url: '/login',
templateUrl: 'templates/login.html',
controller : 'LoginCtrl'
})
.state({
name: 'signup',
url: '/signup',
templateUrl: 'templates/signup.html',
controller : 'SignupCtrl'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/home');
$ionicConfigProvider.scrolling.jsScrolling(false);
});
My side menu, menu.html, template;
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar ng-class="{'has-subject': subject}"
class="white-font bar-header bar-positive">
<!-- <ion-nav-back-button></ion-nav-back-button> -->
<ion-nav-buttons side="left" >
<button ng-if="$root.isAdmin" class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
<button ng-if="!$root.isAdmin" class="button button-icon button-clear ion-home" ui-sref="app.user.home">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view> <!-- ionic's equivalent to ui-view -->
</ion-side-menu-content>
<ion-side-menu class="side-menu" width="140" side="left">
<ion-header-bar class="white-font bar-header bar-positive">
<h1 class="title">Admin Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close>
<a class="button button-block button-clear button-dark" ui-sref="app.user.admin.calendar({ calendarTitle: 'Calendar', isVolunteerSignup: false })">Calendar</a>
</ion-item>
<ion-item menu-close>
<a class="button button-block button-clear button-dark" ui-sref="app.user.admin.roles">Roles</a>
</ion-item>
<ion-item menu-close>
<a class="button button-block button-clear button-dark" ui-sref="app.user.home">Main Menu</a>
</ion-item>
<ion-item menu-close>
<a class="button button-block button-clear button-dark" ui-sref="app.user.admin.settings">School Settings</a>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
And then my home view;
<ion-view class="landing" title="{{school.name}}">
<div ng-if="school.logo" class="tall bar bar-header">
<img class="school-logo" ng-src="{{school.logo}}" >
</div>
<ion-content ng-class="{'has-tall-header': school.logo}">
<ion-list class="nav-buttons">
<ion-item>
<a class="button button-block button-clear button-dark" ui-sref="app.user.board">
PTA Board
<i class="icon ion-board"></i>
</a>
</ion-item>
<ion-item>
<a class="button button-block button-clear button-dark" ui-sref="app.user.events">
Events
<i class="icon ion-calendar"></i>
</a>
</ion-item>
<ion-item>
<a class="button button-block button-clear button-dark" ui-sref="app.user.rooms">
Chat
<i class="icon ion-chatboxes"></i>
</a>
</ion-item>
<ion-item>
<a class="button button-block button-clear button-dark" ui-sref="app.user.profile">
Profile
<i class="icon ion-android-user-menu"></i>
</a>
</ion-item>
<ion-item>
<a class="button button-block button-clear button-dark" ng-click="logout()">
Logout
<i class="icon ion-log-out"></i>
</a>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
This error occurred because the state I was asking for did not get registered. I was able to fix the error by updating the state name properties in my stateHelper code so that they did not contain the dot notation for their parent, as shown here.
.config(function(stateHelperProvider, $urlRouterProvider, $ionicConfigProvider) {
stateHelperProvider
.state({
name: 'app',
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'MenuCtrl',
children: [
{
name: 'user',
url: '/user',
abstract: true,
template: '<ion-nav-view></ion-nav-view>',
children:[
{
name: 'home',
url: '/home',
templateUrl: 'templates/landing.html',
controller: 'HomeCtrl'
},
{
name: 'board',
url: '/board',
templateUrl: 'templates/pta-board.html',
controller: 'BoardCtrl'
},
{
name: 'events',
url: '/events',
templateUrl: 'templates/events.html',
controller: 'EventsCtrl'
},
{
name: 'chatrooms',
url: '/chat-rooms',
templateUrl: 'templates/chat-rooms.html',
controller: 'RoomsCtrl',
children:[
{
name: 'room',
url: '/room',
params:{
roomId: null,
chatters: null
},
templateUrl: 'templates/chat-room.html',
controller: 'ChatCtrl'
}
]
},
{
name: 'profile',
url: '/profile',
params:{
isNewUser: null
},
templateUrl: 'templates/user-profile.html',
controller: 'UserCtrl'
}
]
},
{
name: 'admin',
url: '/admin',
abstract: true,
template: '<ion-nav-view></ion-nav-view>',
children:[
{
name: 'calendar',
url: '/calendar',
params:{
selectedEvent: null,
calendarTitle: 'Volunteer',
isVolunteerSignup: true
},
templateUrl: 'templates/rcalendar.html',
controller: 'CalendarCtrl'
},
{
name: 'volunteers',
url: '/volunteers',
params:{
thisHoursVolunteers: null,
thisEvent: null
},
templateUrl: 'templates/admin-interact.html',
controller: 'VolunteerCtrl'
},
{
name: 'roles',
url: '/roles',
templateUrl: 'templates/roles.html',
controller: 'RoleCtrl'
},
{
name: 'settings',
url: '/settings',
templateUrl: 'templates/settings.html',
controller: 'SettingsCtrl'
}
]
}
]
})
.state({
name: 'login',
url: '/login',
templateUrl: 'templates/login.html',
controller : 'LoginCtrl'
})
.state({
name: 'signup',
url: '/signup',
templateUrl: 'templates/signup.html',
controller : 'SignupCtrl'
});
I'm still not able to navigate to the board, events, chatrooms or profile states but I no longer get any errors. And admin child and all other states, including home oddly enough, work as expected.