git.iko.soy/unity8
on 4fde247 help sign in
unity8/plugins/Dash/CardCreator.js
863 lines 43 kB history raw
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 */
17.pragma library
19// %1 is the template["card-background"]["elements"][0]
20// %2 is the template["card-background"]["elements"][1]
21// %3 is the template["card-background"] string
22var kBackgroundLoaderCode = 'Loader {\n\
23 id: backgroundLoader; \n\
24 objectName: "backgroundLoader"; \n\
25 anchors.fill: parent; \n\
26 asynchronous: root.asynchronous; \n\
27 visible: status == Loader.Ready; \n\
28 sourceComponent: UbuntuShape { \n\
29 objectName: "background"; \n\
30 radius: "medium"; \n\
31 aspect: { \n\
32 switch (root.backgroundShapeStyle) { \n\
33 case "inset": return UbuntuShape.Inset; \n\
34 case "shadow": return UbuntuShape.DropShadow; \n\
35 default: \n\
36 case "flat": return UbuntuShape.Flat; \n\
37 } \n\
38 } \n\
39 backgroundColor: getColor(0) || "white"; \n\
40 secondaryBackgroundColor: getColor(1) || backgroundColor; \n\
41 backgroundMode: UbuntuShape.VerticalGradient; \n\
42 anchors.fill: parent; \n\
43 source: backgroundImage.source ? backgroundImage : null; \n\
44 property real luminance: Style.luminance(backgroundColor); \n\
45 property Image backgroundImage: Image { \n\
46 objectName: "backgroundImage"; \n\
47 source: { \n\
48 if (cardData && typeof cardData["background"] === "string") return cardData["background"]; \n\
49 else return %3; \n\
50 } \n\
51 } \n\
52 function getColor(index) { \n\
53 if (cardData && typeof cardData["background"] === "object" \n\
54 && (cardData["background"]["type"] === "color" || cardData["background"]["type"] === "gradient")) { \n\
55 return cardData["background"]["elements"][index]; \n\
56 } else return index === 0 ? %1 : %2; \n\
57 } \n\
58 } \n\
59 }\n';
61// %1 is used as anchors of artShapeHolder
62// %2 is used as image width
63// %3 is used as image height
64// %4 is injected as code to artImage
65var kArtShapeHolderCode = 'Item { \n\
66 id: artShapeHolder; \n\
67 height: root.fixedArtShapeSize.height > 0 ? root.fixedArtShapeSize.height : artShapeLoader.height; \n\
68 width: root.fixedArtShapeSize.width > 0 ? root.fixedArtShapeSize.width : artShapeLoader.width; \n\
69 anchors { %1 } \n\
70 Loader { \n\
71 id: artShapeLoader; \n\
72 objectName: "artShapeLoader"; \n\
73 active: cardData && cardData["art"] || false; \n\
74 asynchronous: root.asynchronous; \n\
75 visible: status == Loader.Ready; \n\
76 sourceComponent: Item { \n\
77 id: artShape; \n\
78 objectName: "artShape"; \n\
79 readonly property bool doShapeItem: components["art"]["conciergeMode"] !== true; \n\
80 visible: image.status == Image.Ready; \n\
81 readonly property alias image: artImage; \n\
82 ShaderEffectSource { \n\
83 id: artShapeSource; \n\
84 sourceItem: artImage; \n\
85 anchors.centerIn: parent; \n\
86 width: 1; \n\
87 height: 1; \n\
88 hideSource: doShapeItem; \n\
89 } \n\
90 Loader { \n\
91 anchors.fill: parent; \n\
92 visible: artShape.doShapeItem; \n\
93 sourceComponent: root.artShapeStyle === "icon" ? artShapeIconComponent : artShapeShapeComponent; \n\
94 Component { \n\
95 id: artShapeShapeComponent; \n\
96 UbuntuShape { \n\
97 source: artShapeSource; \n\
98 sourceFillMode: UbuntuShape.PreserveAspectCrop; \n\
99 radius: "medium"; \n\
100 aspect: { \n\
101 switch (root.artShapeStyle) { \n\
102 case "inset": return UbuntuShape.Inset; \n\
103 case "shadow": return UbuntuShape.DropShadow; \n\
104 default: \n\
105 case "flat": return UbuntuShape.Flat; \n\
106 } \n\
107 } \n\
108 } \n\
109 } \n\
110 Component { \n\
111 id: artShapeIconComponent; \n\
112 ProportionalShape { source: artShapeSource; aspect: UbuntuShape.DropShadow; } \n\
113 } \n\
114 } \n\
115 readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1; \n\
116 readonly property real aspect: fixedArtShapeSizeAspect > 0 ? fixedArtShapeSizeAspect : components !== undefined ? components["art"]["aspect-ratio"] : 1; \n\
117 Component.onCompleted: { updateWidthHeightBindings(); } \n\
118 Connections { target: root; onFixedArtShapeSizeChanged: updateWidthHeightBindings(); } \n\
119 function updateWidthHeightBindings() { \n\
120 if (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) { \n\
121 width = root.fixedArtShapeSize.width; \n\
122 height = root.fixedArtShapeSize.height; \n\
123 } else { \n\
124 width = Qt.binding(function() { return image.status !== Image.Ready ? 0 : image.width }); \n\
125 height = Qt.binding(function() { return image.status !== Image.Ready ? 0 : image.height }); \n\
126 } \n\
127 } \n\
128 CroppedImageMinimumSourceSize { \n\
129 id: artImage; \n\
130 objectName: "artImage"; \n\
131 source: cardData && cardData["art"] || ""; \n\
132 asynchronous: root.asynchronous; \n\
133 width: %2; \n\
134 height: %3; \n\
135 %4 \n\
136 } \n\
137 } \n\
138 } \n\
139 }\n';
141// %1 is anchors.fill
142// %2 is width
143// %3 is height
144var kAudioButtonCode = 'AbstractButton { \n\
145 id: audioButton; \n\
146 anchors.fill: %1; \n\
147 width: %2; \n\
148 height: %3; \n\
149 readonly property url source: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["uri"]) || ""; \n\
150 UbuntuShape { \n\
151 anchors.fill: parent; \n\
152 visible: parent.pressed; \n\
153 radius: "medium"; \n\
154 } \n\
155 Rectangle { \n\
156 color: Qt.rgba(0, 0, 0, 0.5); \n\
157 anchors.centerIn: parent; \n\
158 width: parent.width * 0.5; \n\
159 height: width; \n\
160 radius: width / 2; \n\
161 } \n\
162 Icon { \n\
163 anchors.centerIn: parent; \n\
164 width: parent.width * 0.3; \n\
165 height: width; \n\
166 opacity: 0.9; \n\
167 name: DashAudioPlayer.playing && AudioUrlComparer.compare(parent.source, DashAudioPlayer.currentSource) ? "media-playback-pause" : "media-playback-start"; \n\
168 color: "white"; \n\
169 asynchronous: true; \n\
170 } \n\
171 onClicked: { \n\
172 if (AudioUrlComparer.compare(source, DashAudioPlayer.currentSource)) { \n\
173 if (DashAudioPlayer.playing) { \n\
174 DashAudioPlayer.pause(); \n\
175 } else { \n\
176 DashAudioPlayer.play(); \n\
177 } \n\
178 } else { \n\
179 var playlist = (cardData["quickPreviewData"] && cardData["quickPreviewData"]["playlist"]) || null; \n\
180 DashAudioPlayer.playSource(source, playlist); \n\
181 } \n\
182 } \n\
183 onPressAndHold: { \n\
184 root.pressAndHold(); \n\
185 } \n\
186 }';
188var kOverlayLoaderCode = 'Loader { \n\
189 id: overlayLoader; \n\
190 readonly property real overlayHeight: (fixedHeaderHeight > 0 ? fixedHeaderHeight : headerHeight) + units.gu(2); \n\
191 anchors.fill: artShapeHolder; \n\
192 active: artShapeLoader.active && artShapeLoader.item && artShapeLoader.item.image.status === Image.Ready || false; \n\
193 asynchronous: root.asynchronous; \n\
194 visible: showHeader && status == Loader.Ready; \n\
195 sourceComponent: UbuntuShapeOverlay { \n\
196 id: overlay; \n\
197 property real luminance: Style.luminance(overlayColor); \n\
198 aspect: UbuntuShape.Flat; \n\
199 radius: "medium"; \n\
200 overlayColor: cardData && cardData["overlayColor"] || "#99000000"; \n\
201 overlayRect: Qt.rect(0, 1 - overlayLoader.overlayHeight / height, 1, 1); \n\
202 } \n\
203 }\n';
205// multiple row version of HeaderRowCode
206function kHeaderRowCodeGenerator() {
207 var kHeaderRowCodeTemplate = 'Row { \n\
208 id: row; \n\
209 objectName: "outerRow"; \n\
210 property real margins: units.gu(1); \n\
211 spacing: margins; \n\
212 height: root.fixedHeaderHeight != -1 ? root.fixedHeaderHeight : implicitHeight; \n\
213 anchors { %1 } \n\
214 anchors.right: parent.right; \n\
215 anchors.margins: margins; \n\
216 anchors.rightMargin: 0; \n\
217 data: [ \n\
218 %2 \n\
219 ] \n\
220 }\n';
221 var args = Array.prototype.slice.call(arguments);
222 var code = kHeaderRowCodeTemplate.arg(args.shift()).arg(args.join(',\n'));
223 return code;
226// multiple item version of kHeaderContainerCode
227function kHeaderContainerCodeGenerator() {
228 var headerContainerCodeTemplate = 'Item { \n\
229 id: headerTitleContainer; \n\
230 anchors { %1 } \n\
231 width: parent.width - x; \n\
232 implicitHeight: %2; \n\
233 data: [ \n\
234 %3 \n\
235 ]\n\
236 }\n';
237 var args = Array.prototype.slice.call(arguments);
238 var code = headerContainerCodeTemplate.arg(args.shift()).arg(args.shift()).arg(args.join(',\n'));
239 return code;
242// %1 is used as anchors of mascotShapeLoader
243var kMascotShapeLoaderCode = 'Loader { \n\
244 id: mascotShapeLoader; \n\
245 objectName: "mascotShapeLoader"; \n\
246 asynchronous: root.asynchronous; \n\
247 active: mascotImage.status === Image.Ready; \n\
248 visible: showHeader && active && status == Loader.Ready; \n\
249 width: units.gu(6); \n\
250 height: units.gu(5.625); \n\
251 sourceComponent: UbuntuShape { image: mascotImage } \n\
252 anchors { %1 } \n\
253 }\n';
255// %1 is used as anchors of mascotImage
256// %2 is used as visible of mascotImage
257// %3 is injected as code to mascotImage
258var kMascotImageCode = 'CroppedImageMinimumSourceSize { \n\
259 id: mascotImage; \n\
260 objectName: "mascotImage"; \n\
261 anchors { %1 } \n\
262 source: cardData && cardData["mascot"] || ""; \n\
263 width: units.gu(6); \n\
264 height: units.gu(5.625); \n\
265 horizontalAlignment: Image.AlignHCenter; \n\
266 verticalAlignment: Image.AlignVCenter; \n\
267 visible: %2; \n\
268 %3 \n\
269 }\n';
271// %1 is used as anchors of titleLabel
272// %2 is used as color of titleLabel
273// %3 is used as extra condition for visible of titleLabel
274// %4 is used as title width
275var kTitleLabelCode = 'Label { \n\
276 id: titleLabel; \n\
277 objectName: "titleLabel"; \n\
278 anchors { %1 } \n\
279 elide: Text.ElideRight; \n\
280 fontSize: "small"; \n\
281 wrapMode: Text.Wrap; \n\
282 maximumLineCount: 2; \n\
283 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); \n\
284 color: %2; \n\
285 visible: showHeader %3; \n\
286 width: %4; \n\
287 text: root.title; \n\
288 font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal; \n\
289 horizontalAlignment: root.titleAlignment; \n\
290 }\n';
292// %1 is used as extra anchors of emblemIcon
293// %2 is used as color of emblemIcon
294// FIXME The width code is a
295// Workaround for bug https://bugs.launchpad.net/ubuntu/+source/ubuntu-ui-toolkit/+bug/1421293
296var kEmblemIconCode = 'Icon { \n\
297 id: emblemIcon; \n\
298 objectName: "emblemIcon"; \n\
299 anchors { \n\
300 bottom: titleLabel.baseline; \n\
301 right: parent.right; \n\
302 %1 \n\
303 } \n\
304 source: cardData && cardData["emblem"] || ""; \n\
305 color: %2; \n\
306 height: source != "" ? titleLabel.font.pixelSize : 0; \n\
307 width: implicitWidth > 0 && implicitHeight > 0 ? (implicitWidth / implicitHeight * height) : implicitWidth; \n\
308 }\n';
310// %1 is used as anchors of touchdown effect
311var kTouchdownCode = 'UbuntuShape { \n\
312 id: touchdown; \n\
313 objectName: "touchdown"; \n\
314 anchors { %1 } \n\
315 visible: root.artShapeStyle != "shadow" && root.artShapeStyle != "icon" && root.pressed; \n\
316 radius: "medium"; \n\
317 borderSource: "radius_pressed.sci" \n\
318 }\n';
320// %1 is used as anchors of subtitleLabel
321// %2 is used as color of subtitleLabel
322var kSubtitleLabelCode = 'Label { \n\
323 id: subtitleLabel; \n\
324 objectName: "subtitleLabel"; \n\
325 anchors { %1 } \n\
326 anchors.topMargin: units.dp(2); \n\
327 elide: Text.ElideRight; \n\
328 maximumLineCount: 1; \n\
329 fontSize: "x-small"; \n\
330 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); \n\
331 color: %2; \n\
332 visible: titleLabel.visible && titleLabel.text; \n\
333 text: cardData && cardData["subtitle"] || ""; \n\
334 font.weight: Font.Light; \n\
335 }\n';
337// %1 is used as anchors of attributesRow
338// %2 is used as color of attributesRow
339var kAttributesRowCode = 'CardAttributes { \n\
340 id: attributesRow; \n\
341 objectName: "attributesRow"; \n\
342 anchors { %1 } \n\
343 color: %2; \n\
344 fontScale: root.fontScale; \n\
345 model: cardData && cardData["attributes"]; \n\
346 }\n';
348// %1 is used as top anchor of summary
349// %2 is used as topMargin anchor of summary
350// %3 is used as color of summary
351var kSummaryLabelCode = 'Label { \n\
352 id: summary; \n\
353 objectName: "summaryLabel"; \n\
354 anchors { \n\
355 top: %1; \n\
356 left: parent.left; \n\
357 right: parent.right; \n\
358 margins: units.gu(1); \n\
359 topMargin: %2; \n\
360 } \n\
361 wrapMode: Text.Wrap; \n\
362 maximumLineCount: 5; \n\
363 elide: Text.ElideRight; \n\
364 text: cardData && cardData["summary"] || ""; \n\
365 height: text ? implicitHeight : 0; \n\
366 fontSize: "small"; \n\
367 color: %3; \n\
368 }\n';
370// %1 is used as bottom anchor of audio progress bar
371// %2 is used as left anchor of audio progress bar
372// %3 is used as text color
373var kAudioProgressBarCode = 'CardAudioProgress { \n\
374 id: audioProgressBar; \n\
375 duration: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["duration"]) || 0; \n\
376 source: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["uri"]) || ""; \n\
377 anchors { \n\
378 bottom: %1; \n\
379 left: %2; \n\
380 right: parent.right; \n\
381 margins: units.gu(1); \n\
382 } \n\
383 color: %3; \n\
384 }';
386function sanitizeColor(colorString) {
387 if (colorString !== undefined) {
388 if (colorString.match(/^[#a-z0-9]*$/i) === null) {
389 // This is not the perfect regexp for color
390 // but what we're trying to do here is just protect
391 // against injection so it's ok
392 return "";
393 }
394 }
395 return colorString;
398function cardString(template, components) {
399 var code;
401 var templateInteractive = (template == null ? true : (template["non-interactive"] !== undefined ? !template["non-interactive"] : true)) ? "true" : "false";
403 code = 'AbstractButton { \n\
404 id: root; \n\
405 property var components; \n\
406 property var cardData; \n\
407 property string artShapeStyle: "inset"; \n\
408 property string backgroundShapeStyle: "inset"; \n\
409 property real fontScale: 1.0; \n\
410 property var scopeStyle: null; \n\
411 property int titleAlignment: Text.AlignLeft; \n\
412 property int fixedHeaderHeight: -1; \n\
413 property size fixedArtShapeSize: Qt.size(-1, -1); \n\
414 readonly property string title: cardData && cardData["title"] || ""; \n\
415 property bool asynchronous: true; \n\
416 property bool showHeader: true; \n\
417 implicitWidth: childrenRect.width; \n\
418 enabled: %1; \n\
419 \n'.arg(templateInteractive);
421 var hasArt = components["art"] && components["art"]["field"] || false;
422 var hasSummary = components["summary"] || false;
423 var artAndSummary = hasArt && hasSummary && components["art"]["conciergeMode"] !== true;
424 var isHorizontal = template["card-layout"] === "horizontal";
425 var hasBackground = (!isHorizontal && (template["card-background"] || components["background"] || artAndSummary)) ||
426 (hasSummary && (template["card-background"] || components["background"]));
427 var hasTitle = components["title"] || false;
428 var hasMascot = components["mascot"] || false;
429 var hasEmblem = components["emblem"] && !(hasMascot && template["card-size"] === "small") || false;
430 var headerAsOverlay = hasArt && template && template["overlay"] === true && (hasTitle || hasMascot);
431 var hasSubtitle = hasTitle && components["subtitle"] || false;
432 var hasHeaderRow = hasMascot && hasTitle;
433 var hasAttributes = hasTitle && components["attributes"] && components["attributes"]["field"] || false;
434 var isAudio = template["quick-preview-type"] === "audio";
436 if (isAudio) {
437 // For now we only support audio cards with [optional] art, title, subtitle
438 // in horizontal mode
439 // Anything else makes it behave not like an audio card
440 if (hasSummary) isAudio = false;
441 if (!isHorizontal) isAudio = false;
442 if (hasMascot) isAudio = false;
443 if (hasEmblem) isAudio = false;
444 if (headerAsOverlay) isAudio = false;
445 if (hasAttributes) isAudio = false;
446 }
448 if (hasBackground) {
449 var templateCardBackground;
450 if (template && typeof template["card-background"] === "string") {
451 templateCardBackground = 'decodeURI("' + encodeURI(template["card-background"]) + '")';
452 } else {
453 templateCardBackground = '""';
454 }
456 var backgroundElements0;
457 var backgroundElements1;
458 if (template && typeof template["card-background"] === "object" && (template["card-background"]["type"] === "color" || template["card-background"]["type"] === "gradient")) {
459 var element0 = sanitizeColor(template["card-background"]["elements"][0]);
460 var element1 = sanitizeColor(template["card-background"]["elements"][1]);
461 if (element0 !== undefined) {
462 backgroundElements0 = '"%1"'.arg(element0);
463 }
464 if (element1 !== undefined) {
465 backgroundElements1 = '"%1"'.arg(element1);
466 }
467 }
468 code += kBackgroundLoaderCode.arg(backgroundElements0).arg(backgroundElements1).arg(templateCardBackground);
469 }
471 if (hasArt) {
472 code += 'readonly property size artShapeSize: artShapeLoader.item ? Qt.size(artShapeLoader.item.width, artShapeLoader.item.height) : Qt.size(-1, -1);\n';
474 var widthCode, heightCode;
475 var artAnchors;
476 if (isHorizontal) {
477 artAnchors = 'left: parent.left';
478 if (hasMascot || hasTitle) {
479 widthCode = 'height * artShape.aspect'
480 heightCode = 'headerHeight + 2 * units.gu(1)';
481 } else {
482 // This side of the else is a bit silly, who wants an horizontal layout without mascot and title?
483 // So we define a "random" height of the image height + 2 gu for the margins
484 widthCode = 'height * artShape.aspect'
485 heightCode = 'units.gu(7.625)';
486 }
487 } else {
488 artAnchors = 'horizontalCenter: parent.horizontalCenter;';
489 widthCode = 'root.width'
490 heightCode = 'width / artShape.aspect';
491 }
493 var fallback = components["art"] && components["art"]["fallback"] || "";
494 fallback = encodeURI(fallback);
495 var fallbackCode = "";
496 if (fallback !== "") {
497 fallbackCode += 'onStatusChanged: if (status === Image.Error) source = decodeURI("%1");'.arg(fallback);
498 }
499 code += kArtShapeHolderCode.arg(artAnchors).arg(widthCode).arg(heightCode).arg(fallbackCode);
500 } else {
501 code += 'readonly property size artShapeSize: Qt.size(-1, -1);\n'
502 }
504 if (headerAsOverlay) {
505 code += kOverlayLoaderCode;
506 }
508 var headerVerticalAnchors;
509 if (headerAsOverlay) {
510 headerVerticalAnchors = 'bottom: artShapeHolder.bottom; \n\
511 bottomMargin: units.gu(1);\n';
512 } else {
513 if (hasArt) {
514 if (isHorizontal) {
515 headerVerticalAnchors = 'top: artShapeHolder.top; \n\
516 topMargin: units.gu(1);\n';
517 } else {
518 headerVerticalAnchors = 'top: artShapeHolder.bottom; \n\
519 topMargin: units.gu(1);\n';
520 }
521 } else {
522 headerVerticalAnchors = 'top: parent.top; \n\
523 topMargin: units.gu(1);\n';
524 }
525 }
527 var headerLeftAnchor;
528 var headerLeftAnchorHasMargin = false;
529 if (isHorizontal && hasArt) {
530 headerLeftAnchor = 'left: artShapeHolder.right; \n\
531 leftMargin: units.gu(1);\n';
532 headerLeftAnchorHasMargin = true;
533 } else if (isHorizontal && isAudio) {
534 headerLeftAnchor = 'left: audioButton.right; \n\
535 leftMargin: units.gu(1);\n';
536 headerLeftAnchorHasMargin = true;
537 } else {
538 headerLeftAnchor = 'left: parent.left;\n';
539 }
541 var touchdownOnArtShape = !hasBackground && hasArt && !hasMascot && !hasSummary && !isAudio;
543 if (hasHeaderRow) {
544 code += 'readonly property int headerHeight: row.height;\n'
545 } else if (hasMascot) {
546 code += 'readonly property int headerHeight: mascotImage.height;\n'
547 } else if (hasAttributes) {
548 if (hasTitle && hasSubtitle) {
549 code += 'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin + attributesRow.height + attributesRow.anchors.topMargin;\n'
550 } else if (hasTitle) {
551 code += 'readonly property int headerHeight: titleLabel.height + attributesRow.height + attributesRow.anchors.topMargin;\n'
552 } else {
553 code += 'readonly property int headerHeight: attributesRow.height;\n'
554 }
555 } else if (isAudio) {
556 if (hasSubtitle) {
557 code += 'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin + audioProgressBar.height + audioProgressBar.anchors.topMargin;\n'
558 } else if (hasTitle) {
559 code += 'readonly property int headerHeight: titleLabel.height + audioProgressBar.height + audioProgressBar.anchors.topMargin;\n'
560 } else {
561 code += 'readonly property int headerHeight: audioProgressBar.height;\n'
562 }
563 } else if (hasSubtitle) {
564 code += 'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin;\n'
565 } else if (hasTitle) {
566 code += 'readonly property int headerHeight: titleLabel.height;\n'
567 } else {
568 code += 'readonly property int headerHeight: 0;\n'
569 }
571 var mascotShapeCode = '';
572 var mascotCode = '';
573 if (hasMascot) {
574 var useMascotShape = !hasBackground && !headerAsOverlay;
575 var mascotAnchors = '';
576 if (!hasHeaderRow) {
577 mascotAnchors += headerLeftAnchor;
578 mascotAnchors += headerVerticalAnchors;
579 if (!headerLeftAnchorHasMargin) {
580 mascotAnchors += 'leftMargin: units.gu(1);\n'
581 }
582 } else {
583 mascotAnchors = 'verticalCenter: parent.verticalCenter;'
584 }
586 if (useMascotShape) {
587 mascotShapeCode = kMascotShapeLoaderCode.arg(mascotAnchors);
588 }
590 var mascotImageVisible = useMascotShape ? 'false' : 'showHeader';
591 var fallback = components["mascot"] && components["mascot"]["fallback"] || "";
592 fallback = encodeURI(fallback);
593 var fallbackCode = "";
594 if (fallback !== "") {
595 fallbackCode += 'onStatusChanged: if (status === Image.Error) source = decodeURI("%1");'.arg(fallback);
596 }
597 mascotCode = kMascotImageCode.arg(mascotAnchors).arg(mascotImageVisible).arg(fallbackCode);
598 }
600 var summaryColorWithBackground = 'backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? theme.palette.normal.baseText : "white")';
602 var hasTitleContainer = hasTitle && (hasEmblem || (hasMascot && (hasSubtitle || hasAttributes)));
603 var titleSubtitleCode = '';
604 if (hasTitle) {
605 var titleColor;
606 if (headerAsOverlay) {
607 titleColor = 'root.scopeStyle && overlayLoader.item ? root.scopeStyle.getTextColor(overlayLoader.item.luminance) : (overlayLoader.item && overlayLoader.item.luminance > 0.7 ? theme.palette.normal.baseText : "white")';
608 } else if (hasSummary) {
609 titleColor = 'summary.color';
610 } else if (hasBackground) {
611 titleColor = summaryColorWithBackground;
612 } else {
613 titleColor = 'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
614 }
616 var titleAnchors;
617 var subtitleAnchors;
618 var attributesAnchors;
619 var titleContainerAnchors;
620 var titleRightAnchor;
621 var titleWidth = "undefined";
623 var extraRightAnchor = '';
624 var extraLeftAnchor = '';
625 if (!touchdownOnArtShape) {
626 extraRightAnchor = 'rightMargin: units.gu(1); \n';
627 extraLeftAnchor = 'leftMargin: units.gu(1); \n';
628 } else if (headerAsOverlay && !hasEmblem) {
629 extraRightAnchor = 'rightMargin: units.gu(1); \n';
630 }
632 if (hasMascot) {
633 titleContainerAnchors = 'verticalCenter: parent.verticalCenter; ';
634 } else {
635 titleContainerAnchors = 'right: parent.right; ';
636 titleContainerAnchors += headerLeftAnchor;
637 titleContainerAnchors += headerVerticalAnchors;
638 if (!headerLeftAnchorHasMargin) {
639 titleContainerAnchors += extraLeftAnchor;
640 }
641 }
642 if (hasEmblem) {
643 titleRightAnchor = 'right: emblemIcon.left; \n\
644 rightMargin: emblemIcon.width > 0 ? units.gu(0.5) : 0; \n';
645 } else {
646 titleRightAnchor = 'right: parent.right; \n'
647 titleRightAnchor += extraRightAnchor;
648 }
650 if (hasTitleContainer) {
651 // Using headerTitleContainer
652 titleAnchors = titleRightAnchor;
653 titleAnchors += 'left: parent.left; \n\
654 top: parent.top;';
655 subtitleAnchors = 'right: parent.right; \n\
656 left: parent.left; \n';
657 subtitleAnchors += extraRightAnchor;
658 if (hasSubtitle) {
659 attributesAnchors = subtitleAnchors + 'top: subtitleLabel.bottom;\n';
660 subtitleAnchors += 'top: titleLabel.bottom;\n';
661 } else {
662 attributesAnchors = subtitleAnchors + 'top: titleLabel.bottom;\n';
663 }
664 } else if (hasMascot) {
665 // Using row without titleContainer
666 titleAnchors = 'verticalCenter: parent.verticalCenter;\n';
667 titleWidth = "parent.width - x";
668 } else {
669 if (headerAsOverlay) {
670 // Using anchors to the overlay
671 titleAnchors = titleRightAnchor;
672 titleAnchors += 'left: parent.left; \n\
673 leftMargin: units.gu(1); \n\
674 top: overlayLoader.top; \n\
675 topMargin: units.gu(1) + overlayLoader.height - overlayLoader.overlayHeight; \n';
676 } else {
677 // Using anchors to the mascot/parent
678 titleAnchors = titleRightAnchor;
679 titleAnchors += headerLeftAnchor;
680 titleAnchors += headerVerticalAnchors;
681 if (!headerLeftAnchorHasMargin) {
682 titleAnchors += extraLeftAnchor;
683 }
684 }
685 subtitleAnchors = 'left: titleLabel.left; \n\
686 leftMargin: titleLabel.leftMargin; \n';
687 subtitleAnchors += extraRightAnchor;
688 if (hasEmblem) {
689 // using container
690 subtitleAnchors += 'right: parent.right; \n';
691 } else {
692 subtitleAnchors += 'right: titleLabel.right; \n';
693 }
695 if (hasSubtitle) {
696 attributesAnchors = subtitleAnchors + 'top: subtitleLabel.bottom;\n';
697 subtitleAnchors += 'top: titleLabel.bottom;\n';
698 } else {
699 attributesAnchors = subtitleAnchors + 'top: titleLabel.bottom;\n';
700 }
701 }
703 // code for different elements
704 var titleLabelVisibleExtra = (headerAsOverlay ? '&& overlayLoader.active': '');
705 var titleCode = kTitleLabelCode.arg(titleAnchors).arg(titleColor).arg(titleLabelVisibleExtra).arg(titleWidth);
706 var subtitleCode;
707 var attributesCode;
709 // code for the title container
710 var containerCode = [];
711 var containerHeight = 'titleLabel.height';
712 containerCode.push(titleCode);
713 if (hasSubtitle) {
714 subtitleCode = kSubtitleLabelCode.arg(subtitleAnchors).arg(titleColor);
715 containerCode.push(subtitleCode);
716 containerHeight += ' + subtitleLabel.height';
717 }
718 if (hasEmblem) {
719 containerCode.push(kEmblemIconCode.arg(extraRightAnchor).arg(titleColor));
720 }
721 if (hasAttributes) {
722 attributesCode = kAttributesRowCode.arg(attributesAnchors).arg(titleColor);
723 containerCode.push(attributesCode);
724 containerHeight += ' + attributesRow.height';
725 }
727 if (hasTitleContainer) {
728 // use container
729 titleSubtitleCode = kHeaderContainerCodeGenerator(titleContainerAnchors, containerHeight, containerCode);
730 } else {
731 // no container
732 titleSubtitleCode = titleCode;
733 if (hasSubtitle) {
734 titleSubtitleCode += subtitleCode;
735 }
736 if (hasAttributes) {
737 titleSubtitleCode += attributesCode;
738 }
739 }
740 }
742 if (hasHeaderRow) {
743 var rowCode = [mascotCode, titleSubtitleCode];
744 if (mascotShapeCode != '') {
745 rowCode.unshift(mascotShapeCode);
746 }
747 code += kHeaderRowCodeGenerator(headerVerticalAnchors + headerLeftAnchor, rowCode)
748 } else {
749 code += mascotShapeCode + mascotCode + titleSubtitleCode;
750 }
752 if (isAudio) {
753 var audioProgressBarLeftAnchor = 'audioButton.right';
754 var audioProgressBarBottomAnchor = 'audioButton.bottom';
755 var audioProgressBarTextColor = 'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
757 code += kAudioProgressBarCode.arg(audioProgressBarBottomAnchor)
758 .arg(audioProgressBarLeftAnchor)
759 .arg(audioProgressBarTextColor);
761 var audioButtonAnchorsFill;
762 var audioButtonWidth;
763 var audioButtonHeight;
764 if (hasArt) {
765 audioButtonAnchorsFill = 'artShapeHolder';
766 audioButtonWidth = 'undefined';
767 audioButtonHeight = 'undefined';
768 } else {
769 audioButtonAnchorsFill = 'undefined';
770 audioButtonWidth = 'height';
771 audioButtonHeight = '(root.fixedHeaderHeight > 0 ? root.fixedHeaderHeight : headerHeight) + 2 * units.gu(1)';
772 }
773 code += kAudioButtonCode.arg(audioButtonAnchorsFill).arg(audioButtonWidth).arg(audioButtonHeight);
774 }
776 if (hasSummary) {
777 var summaryTopAnchor;
778 if (isHorizontal && hasArt) summaryTopAnchor = 'artShapeHolder.bottom';
779 else if (headerAsOverlay && hasArt) summaryTopAnchor = 'artShapeHolder.bottom';
780 else if (hasHeaderRow) summaryTopAnchor = 'row.bottom';
781 else if (hasTitleContainer) summaryTopAnchor = 'headerTitleContainer.bottom';
782 else if (hasMascot) summaryTopAnchor = 'mascotImage.bottom';
783 else if (hasAttributes) summaryTopAnchor = 'attributesRow.bottom';
784 else if (hasSubtitle) summaryTopAnchor = 'subtitleLabel.bottom';
785 else if (hasTitle) summaryTopAnchor = 'titleLabel.bottom';
786 else if (hasArt) summaryTopAnchor = 'artShapeHolder.bottom';
787 else summaryTopAnchor = 'parent.top';
789 var summaryColor;
790 if (hasBackground) {
791 summaryColor = summaryColorWithBackground;
792 } else {
793 summaryColor = 'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
794 }
796 var summaryTopMargin = (hasMascot || hasSubtitle || hasAttributes ? 'anchors.margins' : '0');
798 code += kSummaryLabelCode.arg(summaryTopAnchor).arg(summaryTopMargin).arg(summaryColor);
799 }
801 var touchdownAnchors;
802 if (hasBackground) {
803 touchdownAnchors = 'fill: backgroundLoader';
804 } else if (touchdownOnArtShape) {
805 touchdownAnchors = 'fill: artShapeHolder';
806 } else {
807 touchdownAnchors = 'fill: root'
808 }
809 code += kTouchdownCode.arg(touchdownAnchors);
811 var implicitHeight = 'implicitHeight: ';
812 if (hasSummary) {
813 implicitHeight += 'summary.y + summary.height + units.gu(1);\n';
814 } else if (isAudio) {
815 implicitHeight += 'audioButton.height;\n';
816 } else if (headerAsOverlay) {
817 implicitHeight += 'artShapeHolder.height;\n';
818 } else if (hasHeaderRow) {
819 implicitHeight += 'row.y + row.height + units.gu(1);\n';
820 } else if (hasMascot) {
821 implicitHeight += 'mascotImage.y + mascotImage.height;\n';
822 } else if (hasTitleContainer) {
823 implicitHeight += 'headerTitleContainer.y + headerTitleContainer.height + units.gu(1);\n';
824 } else if (hasAttributes) {
825 implicitHeight += 'attributesRow.y + attributesRow.height + units.gu(1);\n';
826 } else if (hasSubtitle) {
827 implicitHeight += 'subtitleLabel.y + subtitleLabel.height + units.gu(1);\n';
828 } else if (hasTitle) {
829 implicitHeight += 'titleLabel.y + titleLabel.height + units.gu(1);\n';
830 } else if (hasArt) {
831 implicitHeight += 'artShapeHolder.height;\n';
832 } else {
833 implicitHeight = '';
834 }
836 // Close the AbstractButton
837 code += implicitHeight + '}\n';
839 return code;
842function createCardComponent(parent, template, components, identifier) {
843 var imports = 'import QtQuick 2.4; \n\
844 import Ubuntu.Components 1.3; \n\
845 import Ubuntu.Settings.Components 0.1; \n\
846 import Dash 0.1;\n\
847 import Utils 0.1;\n';
848 var card = cardString(template, components);
849 var code = imports + 'Component {\n' + card + '}\n';
851 try {
852 return Qt.createQmlObject(code, parent, identifier);
853 } catch (e) {
854 console.error("ERROR: Invalid component created.");
855 console.error("Template:");
856 console.error(JSON.stringify(template));
857 console.error("Components:");
858 console.error(JSON.stringify(components));
859 console.error("Code:");
860 console.error(code);
861 throw e;
862 }