Unity 8
 All Classes Functions Properties
CardTool.qml
1 /*
2  * Copyright (C) 2014 Canonical, Ltd.
3  *
4  * This program is free software; you can redistribute it and/or modify
5  * it under the terms of the GNU General Public License as published by
6  * the Free Software Foundation; version 3.
7  *
8  * This program is distributed in the hope that it will be useful,
9  * but WITHOUT ANY WARRANTY; without even the implied warranty of
10  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11  * GNU General Public License for more details.
12  *
13  * You should have received a copy of the GNU General Public License
14  * along with this program. If not, see <http://www.gnu.org/licenses/>.
15  */
16 
17 import QtQuick 2.0
18 import Dash 0.1
19 
30 Item {
31  id: cardTool
32 
36  property int count
37 
41  property real viewWidth
42 
46  readonly property real carouselSelectedItemScaleFactor: 1.38 // XXX assuming 1.38 carousel scaling factor for cards
47 
51  property var template
52 
56  property var components
57 
61  property string categoryLayout: {
62  var layout = template["category-layout"];
63 
64  // carousel fallback mode to grid
65  if (layout === "carousel" && count <= Math.ceil(carouselTool.realPathItemCount)) layout = "grid";
66  return layout;
67  }
68 
69  property var cardComponent: CardCreatorCache.getCardComponent(cardTool.template, cardTool.components);
70 
71  // FIXME: Saviq
72  // Only way for the card below to actually be laid out completely.
73  // If invisible or in "data" array, some components are not taken into account.
74  width: 0
75  height: 0
76  clip: true
77 
83  readonly property var cardWidth: {
84  switch (categoryLayout) {
85  case "grid":
86  case "vertical-journal":
87  if (template["card-layout"] === "horizontal") return units.gu(38);
88  switch (template["card-size"]) {
89  case "small": return units.gu(12);
90  case "large": return units.gu(38);
91  }
92  return units.gu(18.5);
93  case "carousel":
94  return carouselTool.minimumTileWidth;
95  case undefined:
96  case "organic-grid":
97  case "journal":
98  default:
99  return undefined;
100  }
101  }
102 
108  readonly property var cardHeight: {
109  switch (categoryLayout) {
110  case "journal":
111  if (template["card-size"] >= 12 && template["card-size"] <= 38) return units.gu(template["card-size"]);
112  return units.gu(18.5);
113  case "grid":
114  return cardLoader.item ? cardLoader.item.implicitHeight : 0
115  case "carousel":
116  return cardWidth / (components ? components["art"]["aspect-ratio"] : 1)
117  case undefined:
118  case "organic-grid":
119  case "vertical-journal":
120  default:
121  return undefined;
122  }
123  }
124 
128  readonly property int headerHeight: cardLoader.item ? cardLoader.item.headerHeight : 0
129  readonly property size artShapeSize: cardLoader.item ? cardLoader.item.artShapeSize : 0
130 
134  readonly property int headerAlignment: {
135  var subtitle = components["subtitle"];
136  var price = components["price"];
137  var summary = components["summary"];
138 
139  var hasSubtitle = subtitle && (typeof subtitle === "string" || subtitle["field"])
140  var hasPrice = price && (typeof price === "string" || subtitle["field"]);
141  var hasSummary = summary && (typeof summary === "string" || summary["field"])
142 
143  var isOnlyTextComponent = !hasSubtitle && !hasPrice && !hasSummary;
144  if (!isOnlyTextComponent) return Text.AlignLeft;
145 
146  return (template["card-layout"] === "horizontal") ? Text.AlignLeft : Text.AlignHCenter;
147  }
148 
149  QtObject {
150  id: carouselTool
151 
152  property real minimumTileWidth: {
153  if (cardTool.viewWidth === undefined) return undefined;
154  if (cardTool.viewWidth <= units.gu(40)) return units.gu(18);
155  if (cardTool.viewWidth >= units.gu(128)) return units.gu(26);
156  return units.gu(18 + Math.round((cardTool.viewWidth - units.gu(40)) / units.gu(11)));
157  }
158 
159  readonly property real pathItemCount: 4.8457
160 
161  property real realPathItemCount: {
162  var scaledMinimumTileWidth = minimumTileWidth / cardTool.carouselSelectedItemScaleFactor;
163  var tileWidth = Math.max(cardTool.viewWidth / pathItemCount, scaledMinimumTileWidth);
164  return Math.min(cardTool.viewWidth / tileWidth, pathItemCount);
165  }
166  }
167 
168  Loader {
169  id: cardLoader
170  property var fields: ["art", "mascot", "title", "subtitle", "summary"]
171  property var maxData: {
172  "art": Qt.resolvedUrl("graphics/checkers.png"),
173  "mascot": Qt.resolvedUrl("graphics/checkers.png"),
174  "title": "—\n—",
175  "subtitle": "—",
176  "summary": "—\n—\n—\n—\n—"
177  }
178  sourceComponent: cardTool.cardComponent
179  onLoaded: {
180  item.objectName = "cardToolCard";
181  item.asynchronous = false;
182  item.template = Qt.binding(function() { return cardTool.template; });
183  item.components = Qt.binding(function() { return cardTool.components; });
184  item.width = Qt.binding(function() { return cardTool.cardWidth || item.implicitWidth; });
185  item.height = Qt.binding(function() { return cardTool.cardHeight || item.implicitHeight; });
186  }
187  Connections {
188  target: cardLoader.item
189  onComponentsChanged: {
190  var data = {};
191  for (var k in cardLoader.fields) {
192  var component = cardLoader.item.components[cardLoader.fields[k]];
193  var key = cardLoader.fields[k];
194  if ((typeof component === "string" && component.length > 0) ||
195  (typeof component === "object" && component !== null
196  && typeof component["field"] === "string" && component["field"].length > 0)) {
197  data[key] = cardLoader.maxData[key];
198  }
199  }
200  cardLoader.item.cardData = data;
201  }
202  }
203  }
204 }