From ae81ed49716cfff1f152000ca04e49422be97879 Mon Sep 17 00:00:00 2001 From: Matt Hidinger Date: Tue, 1 Oct 2019 10:07:03 -0700 Subject: [PATCH 01/38] fixing homepage videos in Safari --- .../themes/adaptivecards/layout/_partial/home-section.ejs | 2 +- .../adaptivecards-site/themes/adaptivecards/layout/index.ejs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/_partial/home-section.ejs b/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/_partial/home-section.ejs index 4d43d00e2c..fad3e371ee 100644 --- a/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/_partial/home-section.ejs +++ b/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/_partial/home-section.ejs @@ -8,7 +8,7 @@ <%- learnMoreTitle %>
-
diff --git a/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/index.ejs b/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/index.ejs index 6fd70cc3dd..b88c715905 100644 --- a/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/index.ejs +++ b/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/index.ejs @@ -36,7 +36,7 @@
-
From 7e5ce983f4393919af6acb6ec4a8bda3a64ad9d0 Mon Sep 17 00:00:00 2001 From: Matt Hidinger Date: Tue, 1 Oct 2019 10:31:19 -0700 Subject: [PATCH 02/38] change video source markup --- .../themes/adaptivecards/layout/_partial/home-section.ejs | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/_partial/home-section.ejs b/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/_partial/home-section.ejs index fad3e371ee..65cffb1942 100644 --- a/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/_partial/home-section.ejs +++ b/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/_partial/home-section.ejs @@ -8,7 +8,8 @@ <%- learnMoreTitle %>
- +
From 1589dc94a3bc993dd12f8adeb3a742a0f3658ec2 Mon Sep 17 00:00:00 2001 From: Matt Hidinger Date: Tue, 1 Oct 2019 16:05:07 -0700 Subject: [PATCH 03/38] update designer with feedback button and ability to toggle preview features during build --- .../themes/adaptivecards/layout/designer.ejs | 47 +++++++++++++++---- .../scripts/generator-designer.js | 6 +-- 2 files changed, 41 insertions(+), 12 deletions(-) diff --git a/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/designer.ejs b/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/designer.ejs index 48031381a4..028afacb28 100644 --- a/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/designer.ejs +++ b/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/designer.ejs @@ -1,3 +1,8 @@ +<%- hashed_asset("node_modules/markdown-it/dist/markdown-it.min.js") %> +<%- hashed_asset('node_modules/monaco-editor/min/vs/loader.js') %> +<%- hashed_asset("node_modules/adaptivecards-designer/dist/adaptivecards-designer.min.js") %> +<%- hashed_asset("node_modules/adaptivecards-designer/dist/adaptivecards-designer.css") %> + -<%- hashed_asset("node_modules/markdown-it/dist/markdown-it.min.js") %> -<%- hashed_asset('node_modules/monaco-editor/min/vs/loader.js') %> + .acd-icon-openInNewWindow::before { + content: "\E8A7"; + } -<%- hashed_asset("node_modules/adaptivecards-designer/dist/adaptivecards-designer.min.js") %> -<%- hashed_asset("node_modules/adaptivecards-designer/dist/adaptivecards-designer.css") %> + .acd-icon-feedback::before { + content: "\ED15"; + } +
-
+ \ No newline at end of file diff --git a/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/sample.ejs b/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/sample.ejs index 1cd7bde756..670a1c91e2 100644 --- a/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/sample.ejs +++ b/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/sample.ejs @@ -17,29 +17,48 @@
-
-

<%= page.title %>

-

These samples are just a teaser of the type of cards you can create. - Go ahead and tweak them to make any scenario possible!

- - -
- Choose sample: - +
+
+

<%= page.title %>

+

These samples are just a teaser of the type of cards you can create. + Go ahead and tweak them to make any scenario possible!

+ + +
+ Choose sample: + +
-

<%= page.sample.name %> sample

+
+
+
+ +
+
+ +
+
+ +

Adaptive Card Templating enables the separation of data from the layout in an Adaptive Card. It helps design a card once, and then populate it with real data at runtime. More about templating

+ +
- <%- code_and_card(page.jsonPath) %> +

<%= page.sample.name %> sample

+ + <%- code_and_card(page.jsonPath, page.templatePath, page.dataPath) %>
\ No newline at end of file diff --git a/source/nodejs/adaptivecards-site/themes/adaptivecards/scripts/generator-adaptiveassets.js b/source/nodejs/adaptivecards-site/themes/adaptivecards/scripts/generator-adaptiveassets.js index 90d547e5a8..ab077a9478 100644 --- a/source/nodejs/adaptivecards-site/themes/adaptivecards/scripts/generator-adaptiveassets.js +++ b/source/nodejs/adaptivecards-site/themes/adaptivecards/scripts/generator-adaptiveassets.js @@ -14,6 +14,7 @@ var md5 = require("md5"); var simpleAssets = [ "node_modules/adaptivecards/dist/*.*", "node_modules/adaptivecards-designer/dist/*.*", + "node_modules/adaptivecards-templating/dist/*.*", "node_modules/@fortawesome/fontawesome-free/css/all.min.css", "node_modules/@fortawesome/fontawesome-free/webfonts/*.*", "node_modules/highlightjs/highlight.pack.min.js", @@ -30,6 +31,11 @@ var customAssets = [ path: "../../../samples/v1.*/**/*.json", dest: function (p) { return "payloads/" + path.basename(p); } }, + { + // Sample template payloads + path: "../../../samples/Templates/**/*.json", + dest: function (p) { return "payloads/" + path.basename(p); } + }, { // Legacy JSON schema URL, it'll stay at 1.1 as a point-in-history and we're // deprecating that url path as it's not versioned diff --git a/source/nodejs/adaptivecards-site/themes/adaptivecards/scripts/generator-samples.js b/source/nodejs/adaptivecards-site/themes/adaptivecards/scripts/generator-samples.js index 2dc7f1a112..dc04547d13 100644 --- a/source/nodejs/adaptivecards-site/themes/adaptivecards/scripts/generator-samples.js +++ b/source/nodejs/adaptivecards-site/themes/adaptivecards/scripts/generator-samples.js @@ -7,41 +7,49 @@ var glob = require("glob"); var path = require("path"); var changeCase = require("change-case"); -var samplesPath = "../../../samples/v1.*/Scenarios/*.json"; +var scenariosSamplesPath = "../../../samples/v1.*/Scenarios/*.json"; hexo.extend.generator.register("generator-sampleBrowser", function(locals) { const url_for = hexo.extend.helper.get('url_for').bind(hexo); + var generated = []; + var designerSampleCatalog = []; + // Get all the samples from the Scenarios folder - var samples = glob.sync(samplesPath, { nocase: false }).map(function(samplePath, index) { + var scenarios = glob.sync(scenariosSamplesPath, { nocase: false }).map(function(samplePath, index) { + var fileNameWithoutExt = path.basename(samplePath, ".json"); return { jsonPath: samplePath, - jsonUrl: "../payloads/" + path.basename(samplePath), - htmlPath: "samples/" + path.basename(samplePath, ".json") + ".html", - name: changeCase.sentenceCase(path.basename(samplePath, ".json")), + jsonUrl: url_for(`../payloads/${path.basename(samplePath)}`), + templatePath: `../../../samples/templates/${fileNameWithoutExt}.template.json`, + templateUrl: url_for(`../payloads/${fileNameWithoutExt}.template.json`), + dataPath: `../../../samples/templates/${fileNameWithoutExt}.data.json`, + dataUrl: url_for(`../payloads/${fileNameWithoutExt}.data.json`), + htmlPath: `samples/${fileNameWithoutExt}.html`, + name: changeCase.sentenceCase(fileNameWithoutExt), index: index } - }); + }); - var generated = []; - var designerSampleCatalog = []; - - samples.forEach(function(sample, i) { + scenarios.forEach(function(sample, i) { var page = { path: sample.htmlPath, layout: "sample", data: { - title: "Samples", + title: "Samples and Templates", sample: sample, - samples: samples, + samples: scenarios, samplePath: sample.htmlPath, - jsonPath: sample.jsonPath + jsonPath: sample.jsonPath, + templatePath: sample.templatePath, + dataPath: sample.dataPath } }; designerSampleCatalog.push({ displayName: sample.name, - cardPayloadUrl: url_for("/payloads/" + path.basename(sample.jsonPath)) + cardPayloadUrl: sample.jsonUrl, + dataSampleUrl: sample.dataUrl }); // Generate an index.html for the first one @@ -50,12 +58,13 @@ hexo.extend.generator.register("generator-sampleBrowser", function(locals) { path: "samples/index.html", layout: "sample", data: { - title: "Samples", + title: "Samples and Templates", sample: sample, - samples: samples, + samples: scenarios, samplePath: sample.htmlPath, - jsonPath: sample.jsonPath - + jsonPath: sample.jsonPath, + templatePath: sample.templatePath, + dataPath: sample.dataPath } }) } diff --git a/source/nodejs/adaptivecards-site/themes/adaptivecards/scripts/helper-code-and-card.js b/source/nodejs/adaptivecards-site/themes/adaptivecards/scripts/helper-code-and-card.js index c89b0cba39..139914a1aa 100644 --- a/source/nodejs/adaptivecards-site/themes/adaptivecards/scripts/helper-code-and-card.js +++ b/source/nodejs/adaptivecards-site/themes/adaptivecards/scripts/helper-code-and-card.js @@ -3,26 +3,56 @@ "use strict"; var path = require("path"); +var fs = require("fs"); -hexo.extend.helper.register('code_and_card', function (jsonPath) { - const get_content = hexo.extend.helper.get('get_content').bind(hexo); +hexo.extend.helper.register('code_and_card', function (jsonPath, templatePath = undefined, dataPath = undefined) { const url_for = hexo.extend.helper.get('url_for').bind(hexo); + const payloadUrl = url_for(`/payloads/${path.basename(jsonPath)}`); - const designerUrl = url_for(`/designer/index.html?card=${encodeURIComponent(payloadUrl)}`); + let templateAttribute = null; + let dataAttribute = null; + let designerUrl = url_for(`/designer/index.html?card=${encodeURIComponent(payloadUrl)}`); - return ` + const templating = dataPath && fs.existsSync(dataPath); + + let div = `
- -
+
JSON
- 
${get_content(jsonPath)}
-
- + 
${fs.readFileSync(jsonPath)}
+
`; + + if (templating) { + let dataUrl = url_for(`/payloads/${path.basename(dataPath)}`); + let templateUrl = url_for(`/payloads/${path.basename(templatePath)}`); + templateAttribute = `data-template-url=${templateUrl}`; + dataAttribute = `data-data-url="${dataUrl}"`; + designerUrl = url_for(`/designer/index.html?card=${encodeURIComponent(templateUrl)}&data=${encodeURIComponent(dataUrl)}`); + div += ` +
+
+ Data JSON + +
+ 
${fs.readFileSync(dataPath)}
+
+ Template JSON + +
+ 
${fs.readFileSync(templatePath)}
+
`; + } + + div += `
Adaptive Card @@ -30,9 +60,9 @@ hexo.extend.helper.register('code_and_card', function (jsonPath) { Try it Yourself
-
${get_content(jsonPath)}
+
-
`; + return div; }); diff --git a/source/nodejs/adaptivecards-site/themes/adaptivecards/source/css/style.css b/source/nodejs/adaptivecards-site/themes/adaptivecards/source/css/style.css index 2d83f1269a..00118a5947 100644 --- a/source/nodejs/adaptivecards-site/themes/adaptivecards/source/css/style.css +++ b/source/nodejs/adaptivecards-site/themes/adaptivecards/source/css/style.css @@ -259,6 +259,10 @@ code { max-height: calc(100vh - 400px); } +code.code-short { + max-height: 200px !important; +} + .sidebar { position: fixed; top: 118px; @@ -493,9 +497,9 @@ dir { } @media screen and (min-width: 601px) { - .center-large { - text-align: center; - } + .center-large { + text-align: center; + } } @media screen and (max-width: 601px) { @@ -570,8 +574,8 @@ dir { width: 15px; } - -.homepage i.fas, .homepage i.far { +.homepage i.fas, +.homepage i.far { width: 20px; } @@ -652,3 +656,66 @@ dir { margin-top: 0; /* The UFH footer adds a bunch of margin we don't need */ font-size: 1em; } + +/* The switch - the box around the slider */ +.switch { + position: relative; + display: inline-block; + width: 55px; + height: 30px; +} + +/* Hide default HTML checkbox */ +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +/* The slider */ +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: 0.4s; + transition: 0.4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 21px; + width: 21px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: 0.4s; + transition: 0.4s; +} + +input:checked + .slider { + background-color: #2196f3; +} + +input:focus + .slider { + box-shadow: 0 0 1px #2196f3; +} + +input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} + +/* Rounded sliders */ +.slider.round { + border-radius: 30px; +} + +.slider.round:before { + border-radius: 50%; +} diff --git a/source/nodejs/adaptivecards-site/themes/adaptivecards/source/js/script.js b/source/nodejs/adaptivecards-site/themes/adaptivecards/source/js/script.js index c62602ec77..bde3f8703a 100644 --- a/source/nodejs/adaptivecards-site/themes/adaptivecards/source/js/script.js +++ b/source/nodejs/adaptivecards-site/themes/adaptivecards/source/js/script.js @@ -1,6 +1,11 @@ // Copyright (c) Microsoft Corporation. All rights reserved. // Licensed under the MIT License. $(function () { + if(localStorage.getItem("enable-templating") === null) { + localStorage.setItem("enable-templating", true); + } + + $("#enableTemplating").prop("checked", localStorage.getItem("enable-templating") === "true"); if (typeof AdaptiveCards !== 'undefined') { AdaptiveCards.AdaptiveCard.onExecuteAction = function (action) { @@ -330,7 +335,7 @@ $(function () { hljs.configure({ tabReplace: ' ' }); - + hljs.initHighlightingOnLoad(); } @@ -355,32 +360,93 @@ $(function () { } - $('.adaptivecard').each(function () { + function renderAllCards() { + var enableTemplating = localStorage.getItem("enable-templating") === "true"; + $(".show-with-templating").css("display", "none"); + $(".hide-with-templating").css("display", "block"); - var cardUrl = $(this).attr("data-card-url"); - var el = $(this); - if (cardUrl) { - $.getJSON(cardUrl, function (json) { renderCard(el, json); }); - } else { - renderCard($(this), el.text()); - } - }); + $(".adaptivecard").each(function () { + + var cardUrl = $(this).attr("data-card-url"); + var templateUrl = $(this).attr("data-template-url"); + var dataUrl = $(this).attr("data-data-url"); + var el = $(this); + + if (templateUrl && enableTemplating) { + + $(".show-with-templating").css("display", "block"); + $(".hide-with-templating").css("display", "none"); + + $.getJSON(templateUrl, function (templateJson) { + $.getJSON(dataUrl, function (dataJson) { + renderCard(el, templateJson, dataJson); + }); + }); + } + else if (cardUrl) { + $.getJSON(cardUrl, function (json) { renderCard(el, json); }); + } else { + renderCard($(this), el.text()); + } + }); + } + renderAllCards(); - function renderCard(el, json) { + function renderCard(el, json, dataJson) { if (typeof json === "string") json = JSON.parse(json); + if (dataJson && typeof dataJson === "string") + dataJson = JSON.parse(dataJson); + // TODO: clean this up to only provide custom host config options // it breaks on any rename as-is var adaptiveCard = new AdaptiveCards.AdaptiveCard(); adaptiveCard.hostConfig = new AdaptiveCards.HostConfig(hostConfig); - adaptiveCard.parse(json); - var renderedCard = adaptiveCard.render(); + var renderedCard; + + if (dataJson) { + var template = new ACData.Template(json); + var context = new ACData.EvaluationContext(); + + context.registerFunction("format", (param0, param1) => { + switch (param1) { + case ("%"): + return (param0 * 100).toFixed(2) + "%" + + default: + return `Unknown format: ${param1}` + } + }); + context.registerFunction("parseDateFromEpoch", (param) => { + try { + let d = new Date(param); + let timeZoneOffset = ("0" + new Date().getTimezoneOffset() / 60).slice(-2); + return `${d.toISOString().substr(0, 19)}-03:00`; + } catch { + return "Unable to parse epoch"; + } + + }); + + context.$root = dataJson; + adaptiveCard.parse(template.expand(context)); + renderedCard = adaptiveCard.render(); + } else { + adaptiveCard.parse(json); + renderedCard = adaptiveCard.render(); + } el.text('').append(renderedCard).show(); } + $("#enableTemplating").change(function () { + localStorage.setItem("enable-templating", this.checked); + renderAllCards(); + + }); + $("button.copy-code").click(function (e) { var content = $(this).parent().siblings("pre").text(); copyToClipboard(content); From 35149cb3ae9a118f22f51358791114a8933f6023 Mon Sep 17 00:00:00 2001 From: Matt Hidinger Date: Sat, 5 Oct 2019 14:19:01 -0700 Subject: [PATCH 11/38] fix json copy button --- .../adaptivecards-site/themes/adaptivecards/source/js/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/nodejs/adaptivecards-site/themes/adaptivecards/source/js/script.js b/source/nodejs/adaptivecards-site/themes/adaptivecards/source/js/script.js index bde3f8703a..cfb288aa31 100644 --- a/source/nodejs/adaptivecards-site/themes/adaptivecards/source/js/script.js +++ b/source/nodejs/adaptivecards-site/themes/adaptivecards/source/js/script.js @@ -448,7 +448,7 @@ $(function () { }); $("button.copy-code").click(function (e) { - var content = $(this).parent().siblings("pre").text(); + var content = $(this).parent().next("pre").text(); copyToClipboard(content); }); From 13904821754c480d2ad607948e4ee8f95eb954fa Mon Sep 17 00:00:00 2001 From: Matt Hidinger Date: Fri, 11 Oct 2019 13:06:44 -0700 Subject: [PATCH 12/38] small cleanup --- .../themes/adaptivecards/layout/_partial/head.ejs | 3 +-- .../themes/adaptivecards/layout/designer.ejs | 4 ++-- .../adaptivecards-site/themes/adaptivecards/layout/sample.ejs | 2 +- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/_partial/head.ejs b/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/_partial/head.ejs index dc2c78ab01..a3d8cc526a 100644 --- a/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/_partial/head.ejs +++ b/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/_partial/head.ejs @@ -20,7 +20,6 @@ <% if (title){ %><%= title %> | <% } %><%= config.title %> - @@ -57,5 +56,5 @@ - + \ No newline at end of file diff --git a/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/designer.ejs b/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/designer.ejs index dc7c3eb65c..14f9bc5d02 100644 --- a/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/designer.ejs +++ b/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/designer.ejs @@ -1,7 +1,7 @@ +<%- hashed_asset("node_modules/adaptivecards-designer/dist/adaptivecards-designer.css") %> <%- hashed_asset("node_modules/markdown-it/dist/markdown-it.min.js") %> <%- hashed_asset('node_modules/monaco-editor/min/vs/loader.js') %> <%- hashed_asset("node_modules/adaptivecards-designer/dist/adaptivecards-designer.min.js") %> -<%- hashed_asset("node_modules/adaptivecards-designer/dist/adaptivecards-designer.css") %>