added ViewPortPage

Examples/src/ViewPortContainerPage.qml

@@ -6,20 +6,51 @@ import ViewSolutionsModule 1.0
 
 Page {
     id: root
-    ListModel {
-        id: myModel
-        ListElement { type: "Dog"; age: 8 }
-        ListElement { type: "Cat"; age: 5 }
-    }
 
-    ViewPortContainer {
+    ListView {
+        id: viewPort
+        property real globalPos: 0
         anchors.fill: parent
-        viewPortDelegat: ViewPortDelegat {
-            background:  "qrc:/img/res/LOGO.png"
-            anchors.margins: 20
+        delegate: Component {
+            ViewPortPage {
+                viewPortDelegatH: 500
+                scrollPos: viewPort.globalPos
+                source:  modelData
+                viewground: root
+                title: "Test ViewPortPage"
+                text: "Test ViewPortPage. General text and <i>html code</i>"
+            }
         }
 
-        model: myModel
+        ScrollBar.vertical: ScrollBar {
+            onPositionChanged: {
+                viewPort.globalPos = position
+            }
+        }
+
+
+        model: [
+            "qrc:/img/res/LOGO.png",
+            "qrc:/img/res/LOGO-GREAN.png",
+            "qrc:/img/res/LOGO-ORANGE.png",
+            "qrc:/img/res/LOGO-RED.png",
+            "qrc:/img/res/LOGO.png",
+            "qrc:/img/res/LOGO-GREAN.png",
+            "qrc:/img/res/LOGO-ORANGE.png",
+            "qrc:/img/res/LOGO-RED.png",
+            "qrc:/img/res/LOGO.png",
+            "qrc:/img/res/LOGO-GREAN.png",
+            "qrc:/img/res/LOGO-ORANGE.png",
+            "qrc:/img/res/LOGO-RED.png",
+            "qrc:/img/res/LOGO.png",
+            "qrc:/img/res/LOGO-GREAN.png",
+            "qrc:/img/res/LOGO-ORANGE.png",
+            "qrc:/img/res/LOGO-RED.png",
+            "qrc:/img/res/LOGO.png",
+            "qrc:/img/res/LOGO-GREAN.png",
+            "qrc:/img/res/LOGO-ORANGE.png",
+            "qrc:/img/res/LOGO-RED.png",
+        ]
     }
 }
 

Examples/src/res.qrc

@@ -7,5 +7,8 @@
     </qresource>
     <qresource prefix="/img">
         <file>res/LOGO.png</file>
+        <file>res/LOGO-GREAN.png</file>
+        <file>res/LOGO-ORANGE.png</file>
+        <file>res/LOGO-RED.png</file>
     </qresource>
 </RCC>

README.md

@@ -14,4 +14,37 @@ This is animate image viewer
         anchors.margins: 100
         borderColor: "red"
     }
+```
+
+#### ViewPortPage
+This is animate Delegate viewer for ListView 
+##### Example:
+``` qml
+    ListView {
+        id: viewPort
+        property real globalPos: 0
+        anchors.fill: parent
+        delegate: Component {
+            ViewPortPage {
+                viewPortDelegatH: 500 // base size of content item
+                scrollPos: viewPort.globalPos // due to qml limitations, this field will have to be tied to updating the location of the scroll
+                source:  modelData
+                viewground: root // this is plane to display the main background
+                title: "Test ViewPortPage"
+                text: "Test ViewPortPage. General text and <i>html code</i>"
+            }
+        }
+
+        ScrollBar.vertical: ScrollBar {
+            onPositionChanged: {
+                viewPort.globalPos = position
+            }
+        }
+
+
+        model: [
+            "qrc:/img/res/LOGO.png",
+            "qrc:/img/res/LOGO-GREAN.png",
+        ]
+    }
 ```

ViewSolutions/src/ViewSolutionsModule/Updater.qml

@@ -0,0 +1,6 @@
+import QtQuick 2.0
+
+Item {
+    signal
+
+}

ViewSolutions/src/ViewSolutionsModule/ViewPortContainer.qml

@@ -1,38 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Layouts 1.14
-import QtQuick.Controls 2.14
-import QtQuick.Controls.Material 2.14
-import QtQuick.Controls.Universal 2.14
-
-ListView {
-    id: root
-
-
-
-    property var viewPortDelegat: null
-    onViewPortDelegatChanged: {
-        if (viewPortDelegat && viewPortDelegat instanceof ViewPortDelegat) {
-            viewPortDelegat.viewground = root
-            if (delegateItem)
-                viewPortDelegat.parent = delegateItem
-
-        }
-    }
-
-    Component {
-        id: baseDelegate
-        Item {
-            id: delegateItem
-
-            width: viewPortDelegat.width
-            height: viewPortDelegat.height
-
-            Component.onCompleted:  {
-                if (viewPortDelegat)
-                    viewPortDelegat.parent = delegateItem
-            }
-        }
-    }
-
-    delegate: baseDelegate
-}

ViewSolutions/src/ViewSolutionsModule/ViewPortDelegat.qml

@@ -1,51 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Layouts 1.14
-import QtQuick.Controls 2.14
-import QtQuick.Controls.Material 2.14
-import QtQuick.Controls.Universal 2.14
-
-Item {
-
-    id: root
-
-    property string background: ""
-    property var viewground: null
-
-    onXChanged: updatePos;
-    onYChanged: updatePos;
-
-    Flickable {
-        id: flickable
-        contentWidth: (viewground)? viewground.width: image.width
-        contentHeight: (viewground)? viewground.height: image.height
-        contentX: 0
-        contentY: 0
-        clip: true
-        interactive: false
-        function updatePos() {
-            if (!viewground) {
-                return {x: 0, y : 0};
-            }
-
-            const viewGlobal = root.mapToGlobal(viewground.x, viewground.y);
-            const img = image.mapFromGlobal(viewGlobal.x, viewGlobal.y);
-            flickable.contentX = img.x;
-            flickable.contentY = img.y;
-        }
-
-
-        Image {
-            id: image;
-            source: background
-            height: root.contentH
-            fillMode: Image.PreserveAspectFit
-            width: root.contentW
-
-        }
-
-        anchors.fill: parent
-
-    }
-
-
-}

ViewSolutions/src/ViewSolutionsModule/ViewPortDelegatBase.qml

@@ -0,0 +1,106 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import QtQuick.Controls 2.14
+import QtQuick.Controls.Material 2.14
+import QtQuick.Controls.Universal 2.14
+
+Item {
+    id: delegateItem
+
+    property string source: ""
+    property var background: Rectangle {
+        border.color: "black"
+        anchors.fill: parent
+        color: "#00000000"
+
+    }
+
+    property var bloor: Item {
+    }
+
+    property var viewground: null
+    property real scrollPos: 0
+    property int imageMrgin: 5
+
+    property int viewPortDelegatW: 0
+    property int viewPortDelegatH: 0
+    property var content: Item {
+        anchors.fill: parent
+    }
+
+    onBackgroundChanged:{
+        updateLayout()
+    }
+
+    onContentChanged:{
+        updateLayout()
+    }
+
+    onBloorChanged:{
+        updateLayout()
+    }
+
+    width: (viewPortDelegatW)? viewPortDelegatW: (viewground)? viewground.width : 0
+    height:  (viewPortDelegatH)? viewPortDelegatH: (viewground)?viewground.height * 0.1 : 0
+
+    onScrollPosChanged: {
+        updatePos();
+    }
+
+    function updatePos() {
+        if (!viewground) {
+            return ;
+        }
+
+        const viewGlobal = viewground.mapToGlobal(0, 0);
+        const img = flickable.mapFromGlobal(viewGlobal.x, viewGlobal.y);
+
+        flickable.contentX = -img.x;
+        flickable.contentY = -img.y;
+    }
+
+    function updateLayout() {
+
+        if (background) {
+            background.parent = this;
+            background.anchors.fill = this;
+            background.z = 0;
+        }
+
+        flickable.z = 1;
+
+        if (bloor) {
+            bloor.parent = this;
+            bloor.anchors.fill = this;
+            bloor.z = 2;
+        }
+
+        if (content) {
+            content.parent = this;
+            content.anchors.fill = this;
+            content.z = 3;
+        }
+    }
+
+    Flickable {
+        id: flickable
+        contentWidth: viewground.width
+        contentHeight: viewground.height
+        clip: true
+        interactive: false
+
+        Image {
+            id: image;
+            source: delegateItem.source
+
+            fillMode: Image.PreserveAspectFit
+            anchors.fill: parent
+
+        }
+
+        anchors.fill: parent
+        anchors.margins: imageMrgin
+    }
+
+
+}

ViewSolutions/src/ViewSolutionsModule/ViewPortPage.qml

@@ -0,0 +1,59 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import QtQuick.Controls 2.14
+import QtQuick.Controls.Material 2.14
+import QtQuick.Controls.Universal 2.14
+
+ViewPortDelegatBase {
+    id: root
+    property string title: ""
+    property string text: ""
+
+
+    background: Rectangle {
+        color: "#00ffffff"
+        border.color: "#a7777777"
+        border.width: 4
+        radius: height * 0.01
+    }
+
+    bloor: Rectangle {
+        color: "#55ffffff"
+        border.color: "#a7777777"
+        border.width: 4
+        radius: height * 0.01
+    }
+
+    content: Item {
+        Label {
+            id: header
+            font.bold: true
+            font.pixelSize: height * 0.5
+            text: title;
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            wrapMode: Text.WordWrap
+
+            height: parent.height * 0.2
+
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+        }
+
+        Label {
+            id: sourceText
+            font.bold: false
+            font.pixelSize: header.font.pixelSize * 0.5
+            horizontalAlignment: Text.AlignLeft
+            verticalAlignment: Text.AlignVCenter
+            text: root.text
+            wrapMode: Text.WordWrap
+            anchors.bottom: parent.bottom
+            anchors.top: header.bottom
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.horizontalCenter: parent.Center
+        }
+    }
+}

ViewSolutions/src/ViewSolutionsModule/qmldir

@@ -1,4 +1,4 @@
 module ViewSolutionsModule
 ImageView 1.0 ImageView.qml
-ViewPortContainer 1.0 ViewPortContainer.qml
-ViewPortDelegat 1.0 ViewPortDelegat.qml
+ViewPortDelegatBase 1.0 ViewPortDelegatBase.qml
+ViewPortPage 1.0 ViewPortPage.qml

ViewSolutions/src/ViewSolutionsResources.qrc

@@ -2,8 +2,9 @@
     <qresource prefix="/">
         <file>ViewSolutionsModule/qmldir</file>
         <file>ViewSolutionsModule/ImageView.qml</file>
-        <file>ViewSolutionsModule/ViewPortContainer.qml</file>
-        <file>ViewSolutionsModule/ViewPortDelegat.qml</file>
+        <file>ViewSolutionsModule/ViewPortDelegatBase.qml</file>
+        <file>ViewSolutionsModule/Updater.qml</file>
+        <file>ViewSolutionsModule/ViewPortPage.qml</file>
     </qresource>
     <qresource prefix="/img"/>
 </RCC>