In Titanium JS, I'm using the newer NavigationWindow component, and you can traverse several windows down into a navigation tree, creating a series of back buttons as you go.
However, I also have a side revealing menu with a "home" option. I'd like this button to take you back to the root window in the NavigationWindow.
Here is a simple example. Imagine that the new window being created could happen several times and you could be several windows into the navigation tree.
In my view
<Alloy>
<NavigationWindow id="navWin" class="container">
<Window title="Window 1">
<Button onClick="newWindow" title="Go to new window" />
</Window>
</NavigationWindow>
</Alloy>
And in my controller:
function newWindow() {
var newWin = Ti.UI.createWindow({ title: "Window 2" });
var goBackBtn = Ti.UI.createButton({ title: "Go to root" });
newWin.add(goBackBtn);
goBackBtn.addEventListener("click", function () {
// goes back to the root window no matter how deep into the navigation tree you are
});
$.navWin.openWindow(newWin); }
$.navWin.open();
Use navAlloy controller for coming to home window
https://github.com/vuinguyen/NavControlTi32
Thanks
Related
I have a modal and everytime when I have to navigate to other pages I have to close the modal and then go to that page. But I want to navigate to a particular page without dismissing the modal. Means opening page inside modal without really dismissing it and passing back data from that page to modal.
Is it possible to do it?
Thank you in advance
My code :
.ts to create modal
async address_modal(){
// console.log("clicked")
console.log(this.user_id)
const modal = await this.modalController.create({
component: AddressModalPage,
cssClass : 'address-modal',
componentProps : {
user_id : this.user_id
}
});
return await modal.present();
}
html to open modal from button
<ion-button(click)="address_modal()"> </ion-button>
modal.html // open another page
<ion-button routerLink="menu/items/address/add-address" style="text-transform:none" color= "primary" fill ="clear" (click) = "add_address()" >
<ion-icon name="add" ></ion-icon> Add new address
</ion-button>
I think the problem here is the routerLink, but i'm not really sure about this.
When i want to navigate from a modal to another page i use this.
export class test implements OnInit{
constructor(private router: Router) { }
moveNext(){
this.router.navigate([page]);
}
}
You just need to import this: import { Router } from '#angular/router';. And then put it on a button like this:
<ion-button expand="block" (click)="moveNext()">Go to next page </ion-button>
I'm building a Vue.js web application. I'm using CKEditor in a form that is placed inside a modal window. By design, the user's focus is "trapped" in the modal. In CKEditor, when user clicks the "Link" icon in toolbar, the editor opens a dialog box and attaches the new DOM element to 'document.body'. With respect to the DOM, the "Link" dialog is now outside of trapped focus. The user cannot click or tab his way to the "Link" dialog input.
I dug into the ckeditor5-ui source and found relevant code in balloonpanelview.js. I've unsuccessfully tried to configure CKEditor based on https://ckeditor.com/docs/ckeditor5/latest/api/module_utils_dom_position-Options.html
In my Vue.js component, I have:
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
...
data: () => ({
editor: ClassicEditor,
editorConfig: {
toolbar: ['bold', 'italic', 'bulletedList', 'numberedList', 'link'],
},
...
})
...
I want the CKEditor "Link" dialog DOM element to be attached to a DOM element id that I specify.
In Vuetify dialog component is required to disable retain-focus
<v-dialog :retain-focus="false" />
There may be much time since you opened the issue. However... This issue was happening to me too. This is happening because Bootstrap modal trap the focus in the active modal. If you're using bootstrap-vue, do this.
In your <b-modal> add the prop no-enforce-focus.
no-enforce-focus is reactive. To properly apply this workaround you can use this prop with a variable, that detects when your CKeditor have focus. If have focus, disable the enforce focus. If doesn't have, restore it. You can apply it by the following way:
<template>
<b-modal
...
:no-enforce-focus="editorFocus">
<ckeditor
...
#focus="toggleEditorFocus(true)"
#blur="toggleEditorFocus(false)"
/>
</b-modal>
</template>
<script>
export default {
...
data () {
return {
editorFocus: false
}
},
methods: {
toggleEditorFocus (val = !this.editorFocus) {
setTimeout(() => {
this.editorFocus = val
}, 10)
}
}
}
</script>
I know the setTimeout is a tricky method, but at least is working now for me.
I have an issue with Bootstrap Modal. I am using Bootstrap3.x for Modal and BootstrapWizard for custom navigation wizard. So both the libraries are necessary. When I click on Modal it disappears automatically. Can anyone help me on this?
I found the solution to this problem. My initial HTML code looks like this
<button class="btn-default" data-toggle="modal" data-target="#addPostModal" data-backdrop="static" data-keyboard="false">Add Posts</button>
But I modified this to
<button class="btn-default" id="myButton">Add Posts</button>
and wrote a jQuery function to handle onclick action
$(document).ready(function()
{
$("#myButton").click(function()
{
$("#addPostModal").modal("toggle");
});
});
In brief, I removed the toggle functionality from HTML and added toggle method. We can also remove "toggle" from onclick() function, it doesn't make any difference.
$(document).ready(function()
{
$("#myButton").click(function()
{
$("#addPostModal").modal();
});
});
I seem to be having trouble updating objects in Titanium Appcelerator Alloy,
I basically want to be able to add a table row to a table that is in a different controller/view that i am currently in..... hopefully the below will better describe this :s
basket.xml
<Alloy>
<Window id="basketWindow" class="container">
<TableView id="basketTable" />
<Button id="addItemButton" onClick="addItem">Add Item</Button>
</Window>
</Alloy>
basket.js
function addItem()
{
var itemList = Alloy.createController('item_list');
itemList.getView().open();
}
item_list.xml
<Alloy>
<Window id="itemListWindow" class="container">
<TableView id="itemListTable">
<TableViewRow id="item1" className="item" onClick="addItemToBasket">
Test Item
</TableViewRow>
</TableView>
</Window>
</Alloy>
item_list.js
function addItemToBasket()
{
var row = Ti.UI.createTableViewRow({title: 'Test Item'});
// Here i would ideally want to put something like $.basketTable.append(row);
// But nothing happens, im guessing it cant find $.basketTable as its in a different controller?
}
Does anyone know away around this?
Thanks for reading :)
One simple, easy solution is to just trigger an app wide event when you add an item to the basket:
function addItemToBasket() {
Ti.App.fireEvent("app:itemAddedToBasket", {
title : "Test Item",
otherAttribute : "Value"
});
}
Then listen for the event in the basket controller somewhere, and add the table row:
// inside basket.js
Ti.App.addEventListener("app:itemAddedToBasket", function(e) {
// object 'e' has all the row information we need to create the row
var row = Ti.UI.createTableViewRow({
title: e.title,
otherAttribute: e.otherAttribute
});
// Now append it to the table
$.basketTable.append(row);
});
Please consider the following code (also in this fiddle):
var viewModel = {
count:ko.observable(0),
add:function (){
this.count(this.count()+1);
},
popup:function (){
$.modal($("#divPopup"));
}
}
ko.applyBindings(viewModel);
And this corresponding View:
<button id="btnAdd" data-bind="click:add">Add</button>
<button id="btnPopup" data-bind="click:popup">Popup</button>
<div id="divPopup">
<span data-bind="text:count"></span>
</div>
Now:
click Add button
click Popup button
click top right corner of modal window (sorry I can't have "x" image)
Add button don't work
I can't use:
$.modal($("#divPopup").html());
Because in my app html does not render when $.modal().
Or to put it as another question: how I can know when html render was completed when my viewModel changed?
Try passing persist: true in for the options to modal() like:
$("#divPopup").modal({ persist: true });
http://jsfiddle.net/rniemeyer/BxVF9/