Three panes

common/GPodderEpisodeListModel.qml

@@ -62,6 +62,10 @@ ListModel {
         });
     }
 
+    onPodcast_idChanged: {
+        reload();
+    }
+
     property var worker: ModelWorkerScript {
         id: modelWorker
     }

touch/Dragging.qml

@@ -31,8 +31,8 @@ MouseArea {
     drag {
         target: parent
         axis: Drag.XAxis
-        minimumX: 0
-        maximumX: canClose ? parent.width : 0
+        minimumX: parent.leftDragLimit
+        maximumX: canClose ? pgst.width : 0
         filterChildren: true
     }
 
@@ -44,7 +44,7 @@ MouseArea {
         if (pressed) {
             dragging.stacking.stopAllAnimations();
         } else {
-            if (parent.x > parent.width / 3) {
+            if (parent.x > pgst.width * 3 / 4) {
                 dragging.stacking.startFadeOut();
             } else {
                 dragging.stacking.fadeInAgain();

touch/EpisodeDetail.qml

@@ -27,6 +27,8 @@ import 'icons/icons.js' as Icons
 SlidePage {
     id: detailPage
 
+    width: pgst.width / 3
+
     property int episode_id
     property string title
     property string link
@@ -43,7 +45,7 @@ SlidePage {
         visible: !detailPage.ready
     }
 
-    Component.onCompleted: {
+    onEpisode_idChanged: {
         py.call('main.show_episode', [episode_id], function (episode) {
             detailPage.title = episode.title;
             descriptionLabel.text = episode.description;

touch/EpisodeListView.qml

@@ -27,9 +27,14 @@ import 'common/util.js' as Util
 
 PListView {
     id: episodeList
+    property alias podcast_id: episodeListModel.podcast_id
 
     property int selectedIndex: -1
 
+    onPodcast_idChanged: {
+        selectedIndex = -1;
+    }
+
     PScrollIntoView { id: scrollIntoView }
 
     onSelectedIndexChanged: {

touch/EpisodesPage.qml

@@ -28,6 +28,8 @@ import 'icons/icons.js' as Icons
 SlidePage {
     id: page
 
+    width: pgst.width / 3
+
     property int podcast_id
     property string title
 
@@ -80,12 +82,6 @@ SlidePage {
         ], undefined, undefined, true);
     }
 
-
-    Component.onCompleted: {
-        episodeList.model.podcast_id = podcast_id;
-        // List model will be loaded automatically on load
-    }
-
     EpisodeQueryControl {
         id: queryControl
         model: episodeList.model
@@ -95,5 +91,6 @@ SlidePage {
     EpisodeListView {
         id: episodeList
         title: page.title
+        podcast_id: page.podcast_id
     }
 }

touch/Main.qml

@@ -68,7 +68,7 @@ Item {
     // Initial focus
     focus: true
 
-    property real scalef: (width < height) ? (width / 480) : (height / 480)
+    property real scalef: 1.0 //(width < height) ? (width / 480) : (height / 480)
     property int shorterSide: (width < height) ? width : height
     property int dialogsVisible: 0
 
@@ -84,9 +84,9 @@ Item {
         }
 
         if (page.isDialog) {
-            children[index-1].opacity = 1;
+            //children[index-1].opacity = 1;
         } else {
-            children[index-1].opacity = x / width;
+            //children[index-1].opacity = x / width;
         }
 
         //children[index-1].pushPhase = x / width;
@@ -115,6 +115,26 @@ Item {
         }
     }
 
+    onChildrenChanged: resizePages()
+
+    function resizePages() {
+        var pages = [];
+        for (var i=0; i<children.length; i++) {
+            if (children[i].filename) {
+                pages.push(children[i]);
+            }
+        }
+
+        var l = 0;
+        for (var i=0; i<pages.length; i++) {
+            if (i === 0) {
+                pages[i].leftDragLimit = 0;
+            } else {
+                pages[i].leftDragLimit = Qt.binding(function () { return pages[i-1].nextDragLimit; });
+            }
+        }
+    }
+
     function topOfStackChanged(offset) {
         if (offset === undefined) {
             offset = 0;
@@ -130,6 +150,12 @@ Item {
         if (!page.isDialog) {
             pgst.windowTitle = page.title || 'gPodder';
         }
+
+        console.log('===== children =====');
+        for (var i=0; i<children.length; i++) {
+            console.log('child ' + i + ': ' + children[i] + ' / ' + (children[i].filename || '-') + ' / leftDragLimit = ' + children[i].leftDragLimit);
+        }
+        resizePages();
     }
 
     function showConfirmation(title, affirmative, negative, description, icon, callback) {
@@ -167,6 +193,18 @@ Item {
             return;
         }
 
+        for (var i=0; i<children.length; i++) {
+            if (children[i].filename === filename) {
+                console.log('reusing existing child, setting properties');
+                for (var key in properties) {
+                    children[i][key] = properties[key];
+                }
+                // just in case
+                topOfStackChanged();
+                return;
+            }
+        }
+
         var component = Qt.createComponent(filename);
         if (component.status != Component.Ready) {
             console.log('Error loading ' + filename + ':' +
@@ -178,6 +216,7 @@ Item {
         }
 
         pgst.loadPageInProgress = true;
+        properties.filename = filename;
         component.createObject(pgst, properties);
     }
 
@@ -350,5 +389,6 @@ Item {
 
     PodcastsPage {
         visible: py.ready
+        filename: 'PodcastsPage.qml'
     }
 }

touch/PodcastDetail.qml

@@ -27,6 +27,8 @@ import 'icons/icons.js' as Icons
 SlidePage {
     id: page
 
+    width: pgst.width / 3
+
     property int podcast_id
     property string title
     property string description

touch/PodcastsPage.qml

@@ -28,6 +28,8 @@ import 'common/constants.js' as Constants
 SlidePage {
     id: page
 
+    width: pgst.width / 3
+
     canClose: false
 
     hasMenuButton: true

touch/SlidePage.qml

@@ -33,6 +33,10 @@ Rectangle {
     property alias canClose: dragging.canClose
     property bool isDialog: false
 
+    property string filename
+    property int leftDragLimit
+    property int nextDragLimit: page.x + page.width
+
     property string title: ''
     property bool hasMenuButton: false
     property string menuButtonLabel: 'Menu'
@@ -54,6 +58,10 @@ Rectangle {
 
     Stacking { id: stacking }
 
+    function slideToLeft() {
+        stacking.fadeInAgain();
+    }
+
     Dragging {
         id: dragging
         stacking: stacking

touch/Stacking.qml

@@ -28,7 +28,7 @@ Item {
         id: fadeIn
         target: stacking.page
         property: 'x'
-        to: 0
+        to: page.leftDragLimit
         duration: 500
         easing.type: Easing.OutCubic
 
@@ -41,7 +41,7 @@ Item {
         id: fadeOut
         target: stacking.page
         property: 'x'
-        to: stacking.page.width
+        to: pgst.width
         duration: 500
         easing.type: Easing.OutCubic
     }
@@ -62,7 +62,7 @@ Item {
 
     Component.onCompleted: {
         if (pgst.loadPageInProgress) {
-            page.x = page.width;
+            page.x = pgst.width;
             fadeIn.start();
         }
     }

touch/gpodder.qml

@@ -24,7 +24,7 @@ import 'common/constants.js' as Constants
 Rectangle {
     color: Constants.colors.page
 
-    width: 480
+    width: 1280
     height: 800
 
     Main {}