discover/qml/CarouselPageIndicator.qml

0001 /*
0002  *   SPDX-FileCopyrightText: 2023 ivan tkachenko <me@ratijas.tk>
0003  *
0004  *   SPDX-License-Identifier: LGPL-2.0-or-later
0005  */
0006
0007 import QtQuick
0008 import QtQuick.Controls as QQC2
0009
0010 // This whole wrapper around PageIndicator component exists because
0011 // PageIndicator lacks some features such as basic horizontal centering
0012 // and tapping on the left/right side of dots to change pages by one.
0013 // See QTBUG-117864
0014 MouseArea {
0015     id: root
0016
0017     property alias interactive: indicator.interactive
0018     property alias currentIndex: indicator.currentIndex
0019     property alias count: indicator.count
0020     property alias focusPolicy: indicator.focusPolicy
0021
0022     property alias topPadding: indicator.topPadding
0023     property alias bottomPadding: indicator.bottomPadding
0024
0025     implicitHeight: indicator.implicitHeight
0026     implicitWidth: indicator.implicitWidth
0027
0028     // Note: Instances should override this function instead of binding
0029     // directly, because assignments in pure JavaScript handler of MouseArea
0030     // will breaks any bindings, requiring re-setting them.
0031     function bindCurrentIndex() {
0032         // This is just an example of how a binding should look like. This
0033         // base implementation shouldn't actually be ever called.
0034         console.warn("Clients should override bindCurrentIndex()");
0035         currentIndex = Qt.binding(() => -1);
0036     }
0037
0038     Component.onCompleted: bindCurrentIndex()
0039     // Let client code handle the change before we re-bind it back
0040     onCurrentIndexChanged: Qt.callLater(bindCurrentIndex)
0041
0042     QQC2.PageIndicator {
0043         id: indicator
0044
0045         LayoutMirroring.enabled: root.LayoutMirroring.enabled
0046
0047         anchors.top: parent.top
0048         anchors.bottom: parent.bottom
0049         anchors.horizontalCenter: parent.horizontalCenter
0050     }
0051
0052     onPressed: event => {
0053         let direction = 0;
0054         if (event.x < indicator.x) {
0055             direction = LayoutMirroring.enabled ? 1 : -1;
0056         } else if (event.x > indicator.x + indicator.width) {
0057             direction = LayoutMirroring.enabled ? -1 : 1;
0058         } else {
0059             return;
0060         }
0061         // Careful: assignment breaks binding! Read the note above.
0062         if (direction < 0) {
0063             if (indicator.currentIndex > 0) {
0064                 indicator.currentIndex -= 1;
0065             }
0066         } else if (direction > 0) {
0067             if (indicator.currentIndex < indicator.count - 1) {
0068                 indicator.currentIndex += 1;
0069             }
0070         }
0071     }
0072 }