@@ -18,12 +18,13 @@
19// %1 is the template["card-background"]["elements"][0]
19// %1 is the template["card-background"]["elements"][0]
20// %2 is the template["card-background"]["elements"][1]
20// %2 is the template["card-background"]["elements"][1]
21+// %3 is whether the loader should be asynchronous or not
21−// %3 is the template["card-background"] string
22+// %4 is the template["card-background"] string
22var kBackgroundLoaderCode = 'Loader {\n\
23var kBackgroundLoaderCode = 'Loader {\n\
23 id: backgroundLoader; \n\
24 id: backgroundLoader; \n\
24 objectName: "backgroundLoader"; \n\
25 objectName: "backgroundLoader"; \n\
25 anchors.fill: parent; \n\
26 anchors.fill: parent; \n\
26− asynchronous: root.asynchronous; \n\
27+ asynchronous: %3; \n\
27 visible: status == Loader.Ready; \n\
28 visible: status == Loader.Ready; \n\
28 sourceComponent: UbuntuShape { \n\
29 sourceComponent: UbuntuShape { \n\
29 objectName: "background"; \n\
30 objectName: "background"; \n\
@@ -46,7 +47,7 @@ var kBackgroundLoaderCode = 'Loader {\n\
46 objectName: "backgroundImage"; \n\
47 objectName: "backgroundImage"; \n\
47 source: { \n\
48 source: { \n\
48 if (cardData && typeof cardData["background"] === "string") return cardData["background"]; \n\
49 if (cardData && typeof cardData["background"] === "string") return cardData["background"]; \n\
49− else return %3; \n\
50+ else return %4; \n\
52 function getColor(index) { \n\
53 function getColor(index) { \n\
@@ -63,8 +64,9 @@ var kBackgroundLoaderCode = 'Loader {\n\
63// %3 is used as image height
64// %3 is used as image height
64// %4 is used for artShapeSource.hideSource and inner Loader visible
65// %4 is used for artShapeSource.hideSource and inner Loader visible
65// %5 is used as aspect ratio fallback
66// %5 is used as aspect ratio fallback
67+// %6 is whether the loader should be asynchronous or not
66−// %6 is injected as code to artImage
68+// %7 is injected as code to artImage
67−// %7 is used as image fallback
69+// %8 is used as image fallback
68var kArtShapeHolderCode = 'Item { \n\
70var kArtShapeHolderCode = 'Item { \n\
69 id: artShapeHolder; \n\
71 id: artShapeHolder; \n\
70 height: root.fixedArtShapeSize.height > 0 ? root.fixedArtShapeSize.height : artShapeLoader.height; \n\
72 height: root.fixedArtShapeSize.height > 0 ? root.fixedArtShapeSize.height : artShapeLoader.height; \n\
@@ -73,9 +75,9 @@ var kArtShapeHolderCode = 'Item { \n\
73 Loader { \n\
75 Loader { \n\
74 id: artShapeLoader; \n\
76 id: artShapeLoader; \n\
75 objectName: "artShapeLoader"; \n\
77 objectName: "artShapeLoader"; \n\
76− readonly property string cardArt: cardData && cardData["art"] || %7; \n\
78+ readonly property string cardArt: cardData && cardData["art"] || %8; \n\
77 active: cardArt != ""; \n\
79 active: cardArt != ""; \n\
78− asynchronous: root.asynchronous; \n\
80+ asynchronous: %6; \n\
79 visible: status == Loader.Ready; \n\
81 visible: status == Loader.Ready; \n\
80 sourceComponent: Item { \n\
82 sourceComponent: Item { \n\
81 id: artShape; \n\
83 id: artShape; \n\
@@ -132,10 +134,10 @@ var kArtShapeHolderCode = 'Item { \n\
132 id: artImage; \n\
134 id: artImage; \n\
133 objectName: "artImage"; \n\
135 objectName: "artImage"; \n\
134 source: artShapeLoader.cardArt; \n\
136 source: artShapeLoader.cardArt; \n\
135− asynchronous: root.asynchronous; \n\
137+ asynchronous: %6; \n\
136 width: %2; \n\
138 width: %2; \n\
137 height: %3; \n\
139 height: %3; \n\
@@ -187,12 +189,13 @@ var kAudioButtonCode = 'AbstractButton { \n\
192+// %1 is whether the loader should be asynchronous or not
190var kOverlayLoaderCode = 'Loader { \n\
193var kOverlayLoaderCode = 'Loader { \n\
191 id: overlayLoader; \n\
194 id: overlayLoader; \n\
192 readonly property real overlayHeight: (fixedHeaderHeight > 0 ? fixedHeaderHeight : headerHeight) + units.gu(2); \n\
195 readonly property real overlayHeight: (fixedHeaderHeight > 0 ? fixedHeaderHeight : headerHeight) + units.gu(2); \n\
193 anchors.fill: artShapeHolder; \n\
196 anchors.fill: artShapeHolder; \n\
194 active: artShapeLoader.active && artShapeLoader.item && artShapeLoader.item.image.status === Image.Ready || false; \n\
197 active: artShapeLoader.active && artShapeLoader.item && artShapeLoader.item.image.status === Image.Ready || false; \n\
195− asynchronous: root.asynchronous; \n\
198+ asynchronous: %1; \n\
196 visible: showHeader && status == Loader.Ready; \n\
199 visible: showHeader && status == Loader.Ready; \n\
197 sourceComponent: UbuntuShapeOverlay { \n\
200 sourceComponent: UbuntuShapeOverlay { \n\
198 id: overlay; \n\
201 id: overlay; \n\
@@ -242,10 +245,11 @@ function kHeaderContainerCodeGenerator() {
244// %1 is used as anchors of mascotShapeLoader
247// %1 is used as anchors of mascotShapeLoader
248+// %2 is whether the loader should be asynchronous or not
245var kMascotShapeLoaderCode = 'Loader { \n\
249var kMascotShapeLoaderCode = 'Loader { \n\
246 id: mascotShapeLoader; \n\
250 id: mascotShapeLoader; \n\
247 objectName: "mascotShapeLoader"; \n\
251 objectName: "mascotShapeLoader"; \n\
248− asynchronous: root.asynchronous; \n\
252+ asynchronous: %2; \n\
249 active: mascotImage.status === Image.Ready; \n\
253 active: mascotImage.status === Image.Ready; \n\
250 visible: showHeader && active && status == Loader.Ready; \n\
254 visible: showHeader && active && status == Loader.Ready; \n\
251 width: units.gu(6); \n\
255 width: units.gu(6); \n\
@@ -414,7 +418,6 @@ function cardString(template, components, isCardTool) {
414 property int fixedHeaderHeight: -1; \n\
418 property int fixedHeaderHeight: -1; \n\
415 property size fixedArtShapeSize: Qt.size(-1, -1); \n\
419 property size fixedArtShapeSize: Qt.size(-1, -1); \n\
416 readonly property string title: cardData && cardData["title"] || ""; \n\
420 readonly property string title: cardData && cardData["title"] || ""; \n\
417− property bool asynchronous: true; \n\
418 property bool showHeader: true; \n\
421 property bool showHeader: true; \n\
419 implicitWidth: childrenRect.width; \n\
422 implicitWidth: childrenRect.width; \n\
420 enabled: %1; \n\
423 enabled: %1; \n\
@@ -435,6 +438,7 @@ function cardString(template, components, isCardTool) {
435 var hasHeaderRow = hasMascot && hasTitle;
438 var hasHeaderRow = hasMascot && hasTitle;
436 var hasAttributes = hasTitle && components["attributes"] && components["attributes"]["field"] || false;
439 var hasAttributes = hasTitle && components["attributes"] && components["attributes"]["field"] || false;
437 var isAudio = template["quick-preview-type"] === "audio";
440 var isAudio = template["quick-preview-type"] === "audio";
441+ var asynchronous = isCardTool ? "false" : "true";
439 if (isAudio) {
443 if (isAudio) {
440 // For now we only support audio cards with [optional] art, title, subtitle
444 // For now we only support audio cards with [optional] art, title, subtitle
@@ -468,7 +472,7 @@ function cardString(template, components, isCardTool) {
468 backgroundElements1 = '"%1"'.arg(element1);
472 backgroundElements1 = '"%1"'.arg(element1);
471− code += kBackgroundLoaderCode.arg(backgroundElements0).arg(backgroundElements1).arg(templateCardBackground);
475+ code += kBackgroundLoaderCode.arg(backgroundElements0).arg(backgroundElements1).arg(asynchronous).arg(templateCardBackground);
474 if (hasArt) {
478 if (hasArt) {
@@ -503,17 +507,24 @@ function cardString(template, components, isCardTool) {
503 var fallbackURICode = '""';
507 var fallbackURICode = '""';
504 if (fallback !== "") {
508 if (fallback !== "") {
505 // fallbackStatusCode has %6 in it because we want to substitute it for fallbackURICode
509 // fallbackStatusCode has %6 in it because we want to substitute it for fallbackURICode
506− // which in kArtShapeHolderCode is %7
510+ // which in kArtShapeHolderCode is %8
507− fallbackStatusCode += 'onStatusChanged: if (status === Image.Error) source = %7;';
511+ fallbackStatusCode += 'onStatusChanged: if (status === Image.Error) source = %8;';
508 fallbackURICode = 'decodeURI("%1")'.arg(fallback);
512 fallbackURICode = 'decodeURI("%1")'.arg(fallback);
510− code += kArtShapeHolderCode.arg(artAnchors).arg(widthCode).arg(heightCode).arg(isConciergeMode ? "false" : "true").arg(aspectRatio).arg(fallbackStatusCode).arg(fallbackURICode);
514+ code += kArtShapeHolderCode.arg(artAnchors)
517+ .arg(isConciergeMode ? "false" : "true")
520+ .arg(fallbackStatusCode)
521+ .arg(fallbackURICode);
512 code += 'readonly property size artShapeSize: Qt.size(-1, -1);\n'
523 code += 'readonly property size artShapeSize: Qt.size(-1, -1);\n'
515 if (headerAsOverlay) {
526 if (headerAsOverlay) {
516− code += kOverlayLoaderCode;
527+ code += kOverlayLoaderCode.arg(asynchronous);
519 var headerVerticalAnchors;
530 var headerVerticalAnchors;
@@ -595,7 +606,7 @@ function cardString(template, components, isCardTool) {
597 if (useMascotShape) {
608 if (useMascotShape) {
598− mascotShapeCode = kMascotShapeLoaderCode.arg(mascotAnchors);
609+ mascotShapeCode = kMascotShapeLoaderCode.arg(mascotAnchors).arg(asynchronous);
601 var mascotImageVisible = useMascotShape ? 'false' : 'showHeader';
612 var mascotImageVisible = useMascotShape ? 'false' : 'showHeader';