1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
// Sample using Enyo to handle Art4apps library
// Item component with image, text and sound
enyo.kind({
name: "Item.Element",
kind: enyo.Control,
published: { image: "", sound: "", text: "" },
ontap: "taped",
components: [
{ name: "itemImage", classes: "itemImage", kind: "Image", ontap: "taped" },
{ name: "itemText", classes: "itemText", ontap: "taped" },
{ name: "itemSound", classes: "itemSound", kind: "HTML5.Audio", preload: "auto", autobuffer: true, controlsbar: true }
],
// Constructor
create: function() {
this.inherited(arguments);
this.imageChanged();
this.soundChanged();
this.textChanged();
},
// Image setup
imageChanged: function() {
if (this.image.length != 0) {
this.$.itemImage.setAttribute("src", this.image);
this.$.itemImage.show();
} else {
this.$.itemImage.hide();
}
},
// Sound setup
soundChanged: function() {
this.$.itemSound.setSrc(this.sound);
},
// Text setup
textChanged: function() {
if (this.text.length != 0) {
this.$.itemText.setContent(this.text);
this.$.itemText.show();
} else {
this.$.itemText.show();
}
},
// Play sound when image taped
taped: function() {
if (this.$.itemSound.paused())
this.$.itemSound.play();
else
this.$.itemSound.pause();
}
});
// Main app class
enyo.kind({
name: "TestArt4Apps",
kind: enyo.Control,
components: [
{ components: [
{ content: "Click image or use control bar to hear the word.", classes: "title" },
{ kind: "Item.Element", text: "Alligator", image: "images/alligator.png", sound: ["audio/alligator.ogg", "audio/alligator.mp3"], classes: "item" },
{ kind: "Item.Element", text: "Girl", image: "images/girl.png", sound: ["audio/girl.ogg", "audio/girl.mp3"], classes: "item" },
{ kind: "Item.Element", text: "Sandwich", image: "images/sandwich.png", sound: ["audio/sandwich.ogg", "audio/sandwich.mp3"], classes: "item" },
{ classes: "footer", components: [
{ content: "Images and sounds CC BY-SA from", classes: "licence" },
{ tag: "a", attributes: {"href":"http://art4apps.org/"}, content: "Art4Apps", classes: "licence" }
]}
]}
],
// Constructor
create: function() {
this.inherited(arguments);
}
});
|
