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