vcs.maemo.org Git - mardrone/blob - mardrone/imports/com/meego/extras/TumblerTemplate.qml

   1 /****************************************************************************
   2 **
   3 ** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
   4 ** All rights reserved.
   5 ** Contact: Nokia Corporation (qt-info@nokia.com)
   6 **
   7 ** This file is part of the Qt Components project.
   8 **
   9 ** $QT_BEGIN_LICENSE:BSD$
  10 ** You may use this file under the terms of the BSD license as follows:
  11 **
  12 ** "Redistribution and use in source and binary forms, with or without
  13 ** modification, are permitted provided that the following conditions are
  14 ** met:
  15 **   * Redistributions of source code must retain the above copyright
  16 **     notice, this list of conditions and the following disclaimer.
  17 **   * Redistributions in binary form must reproduce the above copyright
  18 **     notice, this list of conditions and the following disclaimer in
  19 **     the documentation and/or other materials provided with the
  20 **     distribution.
  21 **   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
  22 **     the names of its contributors may be used to endorse or promote
  23 **     products derived from this software without specific prior written
  24 **     permission.
  25 **
  26 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  27 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  28 ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  29 ** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  30 ** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  31 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  32 ** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  33 ** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  34 ** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  35 ** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  36 ** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
  37 ** $QT_END_LICENSE$
  38 **
  39 ****************************************************************************/
  40
  41 import QtQuick 1.1
  42 import "constants.js" as C
  43
  44 Item {
  45     id: template
  46     objectName: "tumblerColumn" + index
  47
  48     property Item tumblerColumn
  49     property int index: -1
  50     property Item view: viewContainer.item
  51
  52     opacity: enabled ? C.TUMBLER_OPACITY_FULL : C.TUMBLER_OPACITY
  53     width: childrenRect.width
  54     visible: tumblerColumn ? tumblerColumn.visible : false
  55     enabled: tumblerColumn ? tumblerColumn.enabled : true
  56     onTumblerColumnChanged: {
  57         if (tumblerColumn)
  58             viewContainer.sourceComponent = tumblerColumn.privateLoopAround ? pViewComponent : lViewComponent;
  59     }
  60
  61     Loader {
  62         id: viewContainer
  63         width: tumblerColumn ? tumblerColumn.width : 0
  64         height: parent.height - container.height - 2*C.TUMBLER_BORDER_MARGIN // decrease by text & border heights
  65     }
  66
  67     Component {
  68         // Component for loop around column
  69         id: pViewComponent
  70         PathView {
  71             id: pView
  72
  73             model: tumblerColumn ? tumblerColumn.items : undefined
  74             currentIndex: tumblerColumn ? tumblerColumn.selectedIndex : 0
  75             preferredHighlightBegin: (height / 2) / (C.TUMBLER_ROW_HEIGHT * pView.count)
  76             preferredHighlightEnd: preferredHighlightBegin
  77             highlightRangeMode: PathView.StrictlyEnforceRange
  78             clip: true
  79             delegate: defaultDelegate
  80             highlight: defaultHighlight
  81             interactive: template.enabled
  82             anchors.fill: parent
  83
  84             onMovementStarted: {
  85                 internal.movementCount++;
  86             }
  87             onMovementEnded: {
  88                 internal.movementCount--;
  89                 root.changed(template.index) // got index from delegate
  90             }
  91
  92             Rectangle {
  93                 width: 1
  94                 height: parent.height
  95                 color: C.TUMBLER_COLOR_TEXT
  96                 opacity: C.TUMBLER_OPACITY_LOW
  97             }
  98
  99             path: Path {
 100                  startX: template.width / 2; startY: 0
 101                  PathLine {
 102                      x: template.width / 2
 103                      y: C.TUMBLER_ROW_HEIGHT * pView.count
 104                  }
 105             }
 106         }
 107     }
 108
 109     Component {
 110         // Component for non loop around column
 111         id: lViewComponent
 112         ListView {
 113             id: lView
 114
 115             model: tumblerColumn ? tumblerColumn.items : undefined
 116             currentIndex: tumblerColumn ? tumblerColumn.selectedIndex : 0
 117             preferredHighlightBegin: Math.floor((height - C.TUMBLER_ROW_HEIGHT) / 2)
 118             preferredHighlightEnd: preferredHighlightBegin + C.TUMBLER_ROW_HEIGHT
 119             highlightRangeMode: ListView.StrictlyEnforceRange
 120             clip: true
 121             delegate: defaultDelegate
 122             highlight: defaultHighlight
 123             interactive: template.enabled
 124             anchors.fill: parent
 125
 126             onMovementStarted: {
 127                 internal.movementCount++;
 128             }
 129             onMovementEnded: {
 130                 internal.movementCount--;
 131                 root.changed(template.index) // got index from delegate
 132             }
 133
 134             Rectangle {
 135                 width: 1
 136                 height: parent.height
 137                 color: C.TUMBLER_COLOR_TEXT
 138                 opacity: C.TUMBLER_OPACITY_LOW
 139             }
 140         }
 141     }
 142
 143     Item {
 144         id: container
 145         anchors.top: viewContainer.bottom
 146         width: tumblerColumn ? tumblerColumn.width : 0
 147         height: internal.hasLabel ? C.TUMBLER_LABEL_HEIGHT : 0 // internal.hasLabel is from root tumbler
 148
 149         Text {
 150             id: label
 151
 152             text: tumblerColumn ? tumblerColumn.label : ""
 153             elide: Text.ElideRight
 154             horizontalAlignment: "AlignHCenter"
 155             color: C.TUMBLER_COLOR_LABEL
 156             font { family: C.FONT_FAMILY_LIGHT; pixelSize: C.FONT_LIGHT_SIZE }
 157             anchors { fill: parent; margins: C.TUMBLER_MARGIN}
 158         }
 159     }
 160
 161     Component {
 162         id: defaultDelegate
 163
 164         Item {
 165             width: tumblerColumn.width
 166             height: C.TUMBLER_ROW_HEIGHT
 167
 168             Text {
 169                 id: txt
 170                 elide: Text.ElideRight
 171                 horizontalAlignment: "AlignHCenter"
 172                 color: C.TUMBLER_COLOR_TEXT
 173                 font { family: C.FONT_FAMILY_BOLD; pixelSize: C.FONT_DEFAULT_SIZE }
 174                 anchors { fill: parent; margins: C.TUMBLER_MARGIN }
 175
 176                 MouseArea {
 177                     anchors.fill: parent
 178                     onClicked: {
 179                         if (template.view.interactive) {
 180                             tumblerColumn.selectedIndex = index;  // got index from delegate
 181                             root.changed(template.index);
 182                         }
 183                     }
 184                 }
 185             }
 186
 187             Component.onCompleted: {
 188                 try {
 189                     // Legacy. "value" use to be the role which was used by delegate
 190                     txt.text = value
 191                 } catch(err) {
 192                     try {
 193                         // "modelData" available for JS array and for models with one role
 194                         txt.text = modelData
 195                     } catch (err) {
 196                         try {
 197                             // C++ models have "display" role available always
 198                             txt.text = display
 199                         } catch(err) {
 200                         }
 201                     }
 202                 }
 203             }
 204         }
 205     }
 206
 207     Component {
 208         id: defaultHighlight
 209
 210         Image {
 211             id: highlight
 212             objectName: "highlight"
 213             width: tumblerColumn ? tumblerColumn.width : 0
 214             height: C.TUMBLER_ROW_HEIGHT
 215             source: "image://theme/" + theme.colorString + "meegotouch-list-fullwidth-background-selected-horizontal-center"
 216             fillMode: Image.TileHorizontally
 217         }
 218     }
 219 }