making a PreviewSlideListDelegate and using a repeater

src/qml/presenter/Presentation.qml

@@ -187,85 +187,7 @@ FocusScope {
         reuseItems: true
 
         model: serviceItemModel
-        delegate: Rectangle {
+        delegate: Presenter.PreviewSlideListDelegate {}
-            id: previewHighlight
-            property var outerModelData: model
-            implicitHeight: Kirigami.Units.gridUnit * 6
-            implicitWidth: Kirigami.Units.gridUnit * 11
-            border.color: Kirigami.Theme.highlightColor
-            radius: 5
-            color: {
-                if (active || previewerMouse.containsMouse)
-                    Kirigami.Theme.highlightColor
-                else
-                    Kirigami.Theme.backgroundColor
-            }
-            ListView {
-                id: slidesList
-                anchors.centerIn: parent
-                model: outerModelData.slideNumber === 0 ? 1 : outerModelData.slideNumber
-                width: parent.width * model - 10
-                height: parent.height
-                orientation: ListView.Horizontal
-                cacheBuffer: 900
-                reuseItems: true
-                spacing: Kirigami.Units.smallSpacing
-                Component.onCompleted: {
-                    showPassiveNotification("Number of slides: " + outerModelData.slideNumber);
-                    parent.width = width;
-                }
-                delegate: Presenter.Slide {
-                    id: previewSlideItem
-                    anchors.centerIn: parent
-                    implicitWidth: Kirigami.Units.gridUnit * 10
-                    implicitHeight: width / 16 * 9
-                    textSize: width / 4
-                    itemType: outerModelData.type
-                    imageSource: outerModelData.backgroundType === "image" ? background : ""
-                    videoSource: outerModelData.backgroundType === "video" ? background : ""
-                    audioSource: ""
-                    chosenFont: outerModelData.font
-                    text: outerModelData.text[index + 1] === "This is demo text" ? "" : outerModelData.text[index + 1]
-                    pdfIndex: 0
-                    preview: true 
-                    editMode: true 
-
-                    MouseArea {
-                        id: innerMouse
-                        anchors.fill: parent
-                        hoverEnabled: true
-                        onClicked: changeServiceItem(outerModelData.index)
-                        cursorShape: Qt.PointingHandCursor
-                    }
-                }
-            }
-
-            Controls.Label {
-                id: slidesTitle
-                width: Kirigami.Units.gridUnit * 7
-                anchors.top: slidesList.bottom
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.topMargin: 5
-                elide: Text.ElideRight
-                text: name
-                /* font.family: "Quicksand Bold" */
-            }
-
-            MouseArea {
-                id: previewerMouse
-                anchors.fill: parent
-                hoverEnabled: true
-                onClicked: changeServiceItem(index)
-                cursorShape: Qt.PointingHandCursor
-            }
-
-
-            Connections {
-                target: serviceItemModel
-                onDataChanged: if (active)
-                    previewSlidesList.positionViewAtIndex(index, ListView.Center)
-            }
-        }
         Kirigami.WheelHandler {
             id: wheelHandler
             target: previewSlidesList

src/qml/presenter/PreviewSlideListDelegate.qml

@@ -0,0 +1,105 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as Controls
+import QtQuick.Layouts 1.2
+import org.kde.kirigami 2.13 as Kirigami
+import "./" as Presenter
+import org.presenter 1.0
+
+Item {
+    id: root
+    // Lets set the outerModelData so we can access that data here.
+    property var outerModelData: model;
+
+    implicitHeight: Kirigami.Units.gridUnit * 6
+    implicitWidth: {
+        let slides = outerModelData.slideNumber === 0 ? 1 : outerModelData.slideNumber
+        return Kirigami.Units.gridUnit * 10 * slides + Kirigami.Units.smallSpacing * 2;
+    }
+
+    Rectangle {
+        id: previewHighlight
+        width: parent.width
+        height: parent.height
+        border.color: Kirigami.Theme.highlightColor
+        radius: 5
+        color: {
+            if (active || previewerMouse.containsMouse)
+                Kirigami.Theme.highlightColor
+            else
+                Kirigami.Theme.backgroundColor
+        }
+
+        Row {
+            id: slidesList
+            spacing: Kirigami.Units.smallSpacing * 2
+            anchors.fill: parent
+            padding: Kirigami.Units.smallSpacing * 2
+            Repeater {
+                id: slidesListRepeater
+                model: outerModelData.slideNumber === 0 ? 1 : outerModelData.slideNumber
+                Component.onCompleted: {
+                    if (name === "Death Was Arrested") {
+                        showPassiveNotification("Number of slides: " + outerModelData.slideNumber);
+                        showPassiveNotification("model number: " + model);
+                    }
+                }
+                /* Rectangle { width: 20; height: 20; radius: 10; color: "green" } */
+                Presenter.Slide {
+                    id: previewSlideItem
+                    implicitWidth: Kirigami.Units.gridUnit * 10 - Kirigami.Units.smallSpacing * 2
+                    implicitHeight: width / 16 * 9
+                    textSize: width / 4
+                    itemType: outerModelData.type
+                    imageSource: outerModelData.backgroundType === "image" ? background : ""
+                    videoSource: outerModelData.backgroundType === "video" ? background : ""
+                    audioSource: ""
+                    chosenFont: outerModelData.font
+                    text: outerModelData.text[index] === "This is demo text" ? "" : outerModelData.text[index]
+                    pdfIndex: 0
+                    preview: true
+                    editMode: true
+                    /* Component.onCompleted: { */
+                    /*     if (outerModelData.name === "Death Was Arrested") { */
+                    /*         showPassiveNotification("Index of slide: " + index); */
+                    /*         showPassiveNotification("width: " + width) */
+                    /*     } */
+                    /* } */
+
+                    /* MouseArea { */
+                    /*     id: innerMouse */
+                    /*     anchors.fill: parent */
+                    /*     hoverEnabled: true */
+                    /*     onClicked: changeServiceItem(outerModelData.index) */
+                    /*     cursorShape: Qt.PointingHandCursor */
+                    /* } */
+                }
+            }
+        }
+
+        Controls.Label {
+            id: slidesTitle
+            width: parent.width * 7
+            anchors.top: slidesList.bottom
+            anchors.leftMargin: Kirigami.Units.smallSpacing * 8
+            anchors.topMargin: 5
+            elide: Text.ElideRight
+            text: name + " " + slidesListRepeater.model
+            /* font.family: "Quicksand Bold" */
+        }
+
+        MouseArea {
+            id: previewerMouse
+            anchors.fill: parent
+            hoverEnabled: true
+            onClicked: changeServiceItem(index)
+            cursorShape: Qt.PointingHandCursor
+        }
+
+
+        Connections {
+            target: serviceItemModel
+            onDataChanged: if (active)
+                previewSlidesList.positionViewAtIndex(index, ListView.Center)
+        }
+    }
+}

src/qml/presenter/Slide.qml

@@ -22,7 +22,7 @@ Item {
     property url audioSource
     property int pdfIndex
     property string chosenFont: "Quicksand"
-    property string text: "This is demo text"
+    property string text
     property string audioError
     property color backgroundColor
     property var hTextAlignment: Text.AlignHCenter

src/resources.qrc

@@ -18,6 +18,7 @@
         <file>qml/presenter/DragHandle.qml</file>
         <file>qml/presenter/Presentation.qml</file>
         <file>qml/presenter/PresentationWindow.qml</file>
+        <file>qml/presenter/PreviewSlideListDelegate.qml</file>
         <file>qml/presenter/Settings.qml</file>
         <file>assets/parallel.jpg</file>
         <file>assets/black.jpg</file>