diff --git a/demo/demo.css b/demo/demo.css
index 9a8592e25..aba5523ff 100644
--- a/demo/demo.css
+++ b/demo/demo.css
@@ -19,6 +19,7 @@ body {
.container {
display: -ms-flexbox;
+ display: -webkit-flex;
display: flex;
-ms-flex-pack: justify;
diff --git a/demo/demo.js b/demo/demo.js
index e516724e0..f588a8f4b 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -12,25 +12,25 @@ var editor;
var selfieCard = {
name: 'selfie-card',
display: {
- setup(element, options, env, payload) {
+ setup: function(element, options, env, payload) {
removeChildren(element);
if (payload.imageSrc) {
element.appendChild(
- $(`
-
-
-
You look nice today.
-
-
- `)[0]
+ $('' +
+ '' +
+ '
' +
+ '
You look nice today.
' +
+ '
' +
+ '
' +
+ '')[0]
);
} else {
- element.appendChild($(`
-
- Hello there!
-
-
`)[0]
+ element.appendChild($('' +
+ '' +
+ 'Hello there!' +
+ '' +
+ '
')[0]
);
}
@@ -40,16 +40,16 @@ var selfieCard = {
}
},
edit: {
- setup(element, options, env) {
+ setup: function(element, options, env) {
removeChildren(element);
- const vid = $(`
-
-
-
-
-
- `);
+ var vid = $('' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '
' +
+ '');
element.appendChild(vid[0]);
var canvas = document.getElementById("canvas"),
@@ -68,7 +68,7 @@ var selfieCard = {
$('#snap').click(function() {
context.drawImage(video, 0, 0, 160, 120);
- let imageSrc = canvas.toDataURL('image/png');
+ var imageSrc = canvas.toDataURL('image/png');
env.save({imageSrc: imageSrc});
});
}, errBack);
@@ -80,7 +80,7 @@ var simpleCard = {
name: 'simple-card',
display: {
setup: function(element) {
- let card = document.createElement('span');
+ var card = document.createElement('span');
card.innerHTML = 'Hello, world';
element.appendChild(card);
}
@@ -92,10 +92,10 @@ var cardWithEditMode = {
display: {
setup: function(element, options, env) {
removeChildren(element);
- let card = document.createElement('div');
+ var card = document.createElement('div');
card.innerHTML = 'I am in display mode';
- let button = document.createElement('button');
+ var button = document.createElement('button');
button.innerText = 'Change to edit';
button.onclick = env.edit;
@@ -106,10 +106,10 @@ var cardWithEditMode = {
edit: {
setup: function(element, options, env) {
removeChildren(element);
- let card = document.createElement('div');
+ var card = document.createElement('div');
card.innerHTML = 'I am in edit mode';
- let button = document.createElement('button');
+ var button = document.createElement('button');
button.innerText = 'Change to display';
button.onclick = env.save;
@@ -129,10 +129,10 @@ var cardWithInput = {
if (payload.name) {
text = 'Hello, ' + payload.name + '!';
}
- let card = document.createElement('div');
+ var card = document.createElement('div');
card.innerText = text;
- let button = document.createElement('button');
+ var button = document.createElement('button');
button.innerText = 'Edit';
button.onclick = env.edit;
@@ -143,13 +143,13 @@ var cardWithInput = {
edit: {
setup: function(element, options, env) {
removeChildren(element);
- let card = document.createElement('div');
+ var card = document.createElement('div');
card.innerHTML = 'What is your name?';
- let input = document.createElement('input');
+ var input = document.createElement('input');
input.placeholder = 'Enter your name...';
- let button = document.createElement('button');
+ var button = document.createElement('button');
button.innerText = 'Save';
button.onclick = function() {
var name = input.value;