import/qml/PaginatedText.qml

0001 /*
0002  * Copyright 2019 by Marco Martin <mart@kde.org>
0003  *
0004  * Licensed under the Apache License, Version 2.0 (the "License");
0005  * you may not use this file except in compliance with the License.
0006  * You may obtain a copy of the License at
0007  *
0008  *    http://www.apache.org/licenses/LICENSE-2.0
0009  *
0010  * Unless required by applicable law or agreed to in writing, software
0011  * distributed under the License is distributed on an "AS IS" BASIS,
0012  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
0013  * See the License for the specific language governing permissions and
0014  * limitations under the License.
0015  *
0016  */
0017
0018 import QtQuick 2.15
0019 import QtQuick.Controls 2.15 as Controls
0020 import org.kde.kirigami 2.19 as Kirigami
0021
0022 /**
0023  * Takes a long text and breaks it down into pages that can be horizontally swiped
0024  */
0025 Flickable {
0026     id: root
0027
0028     /**
0029      * text: string
0030      * The text that should be displayed
0031      */
0032     property alias text: label.text
0033
0034     /**
0035      * columns: int
0036      * How many colums the text has been paginated into
0037      */
0038     readonly property int columns: label.internalColumns
0039
0040     /**
0041      * currentIndex: int
0042      * The currently visible page number (starting from 0)
0043      */
0044     property int currentIndex: 0
0045
0046     /**
0047      * font: font
0048      * Font of the text control: note: this shoul normally never touched as
0049      * it should follow settings from the system
0050      */
0051     property alias font: label.font
0052
0053     /**
0054      * horizontalAlignment: Enum
0055      * How the text is aligned, possible values are:
0056      * Text.AlignLeft, Text.AlignRight, Text.AlignHCenter and Text.AlignJustify.
0057      */
0058     property alias horizontalAlignment: label.horizontalAlignment
0059
0060     /**
0061      * padding we want to have for the text
0062      */
0063     property int leftPadding: Kirigami.Units.largeSpacing
0064     property int topPadding: Kirigami.Units.largeSpacing
0065     property int rightPadding: Kirigami.Units.largeSpacing
0066     property int bottomPadding: Kirigami.Units.largeSpacing
0067
0068
0069
0070     contentWidth: label.columnWidth * (label.internalColumns)
0071     contentHeight: height
0072
0073     onWidthChanged: label.relayout()
0074     onHeightChanged: label.relayout()
0075
0076     onMovementEnded: label.updateCurrentIndex()
0077     onFlickEnded: label.updateCurrentIndex()
0078
0079     onCurrentIndexChanged: label.snap()
0080
0081     NumberAnimation {
0082         id: slideAnim
0083         target: root
0084         property: "contentX"
0085         duration: Kirigami.Units.longDuration
0086         easing.type: Easing.InOutQuad
0087     }
0088
0089     Controls.Label {
0090         id: label
0091         y: root.topPadding
0092         width: root.width - root.leftPadding - root.rightPadding
0093         height: root.height - root.topPadding - root.bottomPadding - pageIndicator.height
0094         // All the properties in label rather than on root item are for internal use
0095         // only and should never be accessed by the QML code external of this component
0096         readonly property int columnWidth: root.width
0097         property int internalColumns: 1
0098         property real lastLineY: 0
0099         property real lastLineHeight: 0
0100
0101         font.pointSize: -1
0102         font.pixelSize: Math.min(root.width, root.height) / 100 * 12
0103
0104         function updateCurrentIndex() {
0105             root.currentIndex = Math.round(root.contentX / columnWidth);
0106             snap();
0107         }
0108
0109         function snap() {
0110             slideAnim.from = root.contentX;
0111             slideAnim.to = root.currentIndex * columnWidth;
0112             slideAnim.restart();
0113         }
0114
0115         function relayout() {
0116             label.internalColumns = 1;
0117             lastLineY = 0;
0118             lastLineHeight = 0;
0119             forceLayout();
0120         }
0121
0122         wrapMode: Text.WordWrap
0123
0124         onLineLaidOut: {
0125             if ( width <= 0 || height <= 0) {
0126                 return;
0127             }
0128             if (line.y == 0) {
0129                 label.internalColumns = 1;
0130                 lastLineY = 0;
0131                 lastLineHeight = 0;
0132             }
0133
0134             if (lastLineY + lastLineHeight + line.height > height) {
0135                 ++label.internalColumns;
0136                 line.y = 0;
0137             } else {
0138                 line.y = lastLineY + lastLineHeight;
0139             }
0140
0141             line.x = columnWidth * (label.internalColumns - 1) + root.leftPadding;
0142
0143             lastLineY = line.y;
0144             lastLineHeight = line.height;
0145         }
0146     }
0147
0148     children: [
0149         Controls.PageIndicator {
0150             id: pageIndicator
0151             visible: root.columns > 1
0152             z: 999
0153             anchors {
0154                 horizontalCenter: parent.horizontalCenter
0155                 bottom: parent.bottom
0156                 margins: Kirigami.Units.largeSpacing
0157             }
0158             count: root.columns
0159             currentIndex: root.currentIndex
0160         }
0161     ]
0162 }