tidev / titanium-sdk

🚀 Native iOS and Android Apps with JavaScript
https://titaniumsdk.com/
Other
2.76k stars 1.21k forks source link

feat(ios): add “interactiveDismissModeEnabled” API #14103

Closed hansemannn closed 2 months ago

hansemannn commented 2 months ago

This PR adds the ability to dynamically close a window by using a swipe gesture across the whole window (not just the left edge).

https://github.com/user-attachments/assets/6dbec439-cc8a-4157-acee-523710bcebe5

Examples

Navigation Window

const interactiveDismissModeEnabled = Ti.App.Properties.getBool('test_interactiveDismissModeEnabled', false);
let nav;

const label = Ti.UI.createLabel({ text: 'Interactive dismiss-mode enabled?' });
const toggle = Ti.UI.createSwitch({ left: 10, value: interactiveDismissModeEnabled });
toggle.addEventListener('change', () => {
    Ti.App.Properties.setBool('test_interactiveDismissModeEnabled', !interactiveDismissModeEnabled);
    Ti.App._restart(); // Quick hack to restart the app
});

const view = Ti.UI.createView({ height: 50, top: 80, layout: 'horizontal', width: Ti.UI.SIZE });
view.add([ label, toggle ]);

const rootWindow = Ti.UI.createWindow({ backgroundColor: 'white', title: 'Navigation Window' });
const rootBtn = Ti.UI.createButton({ title: 'Open child window' });
rootBtn.addEventListener('click', () => {
    const window = Ti.UI.createWindow({ backgroundColor: 'white', title: 'Child Window' });
    nav.openWindow(window);
});

rootWindow.add([ rootBtn, view ]);

nav = Ti.UI.createNavigationWindow({
    interactiveDismissModeEnabled, // <-- This does the magic
    window: rootWindow
});

nav.open();

Tab Group

const interactiveDismissModeEnabled = Ti.App.Properties.getBool('test_interactiveDismissModeEnabled', false);
let tabGroup;

const label = Ti.UI.createLabel({ text: 'Interactive dismiss-mode enabled?' });
const toggle = Ti.UI.createSwitch({ left: 10, value: interactiveDismissModeEnabled });
toggle.addEventListener('change', () => {
    Ti.App.Properties.setBool('test_interactiveDismissModeEnabled', !interactiveDismissModeEnabled);
    Ti.App._restart(); // Quick hack to restart the app
});

const view = Ti.UI.createView({ height: 50, top: 80, layout: 'horizontal', width: Ti.UI.SIZE });
view.add([ label, toggle ]);

const rootWindow = Ti.UI.createWindow({ backgroundColor: 'white', title: 'Window 1' });
const rootBtn = Ti.UI.createButton({ title: 'Open child window' });
rootBtn.addEventListener('click', () => {
    const window = Ti.UI.createWindow({ backgroundColor: 'white', title: 'Child Window' });
    tabGroup.activeTab.openWindow(window);
});

rootWindow.add([ rootBtn, view ]);

tabGroup = Ti.UI.createTabGroup({
    interactiveDismissModeEnabled, // <-- This does the magic
    tabs: [
        Ti.UI.createTab({ title: 'Tab 1', window: rootWindow })
    ]
});

tabGroup.open();

To Do's