/
index.js
160 lines (145 loc) · 4.5 KB
/
index.js
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
//This creates the 3D model viewer. The urlid controls which model is in the viewer
function viewer(urlid){
var iframe = document.getElementById( 'api-frame' );
var version = '1.0.0';
//urlid is the searchterm that is passed in as the argument
var urlid = urlid;
var client = new Sketchfab( version, iframe );
client.init( urlid, {
success: function onSuccess( api ){
api.start();
api.addEventListener( 'viewerready', function() {
// API is ready to use
// Insert your code here
console.log( 'Viewer is ready' );
} );
},
error: function onError() {
console.log( 'Viewer error' );
}
});
}
//ajax call to sketchfab for the 3d model.
function getDataFromSketchfabApi(searchWord, callback){
const settings = {
url: 'https://api.sketchfab.com/v3/search',
data: {
type: 'models',
q: searchWord
},
dataType: 'json',
type: 'GET',
success: callback
}
$.ajax(settings)
}
//callback function for sketchfab ajax
function callbackSketchfab(response){
let counter = 0;
$('.carousel-item').remove();
const results = response.results;
response.results.forEach(result => {
const uid = result.thumbnails.images[3]['uid'];
const url = result.thumbnails.images[3]['url'];
const models = result.thumbnails.images;
models.forEach(modelLink => {
if(modelLink.url === url){
counter++;
renderSketchfabModels(url, uid, results, counter)
}
})
});
//sends the first model to the viewer when a search is executed
viewer(results[0].uid)
}
function renderSketchfabModels(imageUrl, imageUid, results, counter){
const sketchfabModelElementActive = `
<div class="carousel-item active">
<a class="modelLink" value="${imageUid}"><img class="d-block img-fluid modelImage" value="${imageUid}" src="${imageUrl}" ></a>
</div>
`;
const sketchfabModelElement = `
<div class="carousel-item">
<a class="modelLink" value="${imageUid}"><img class="d-block modelImage" value="${imageUid}" src="${imageUrl}" ></a>
</div>
`;
if(counter === 1){
$('.carousel-inner').append(sketchfabModelElementActive);
}else{
$('.carousel-inner').append(sketchfabModelElement);
}
// Adds ability to change model by clicking
$('.modelLink').on('click', function(event){
let uid = event.target;
let uidValue = $(uid).attr('value')
results.forEach(result => {
let clickedModel = result.thumbnails.images[3].uid
if(uidValue === clickedModel){
viewer(result.uid)
}
})
})
};
function getYouTubeApi(searchWord, callback){
const settings = {
url: 'https://www.googleapis.com/youtube/v3/search',
data: {
key: 'AIzaSyAQ0OepoUveleF_qPGSeKe8FxumuHc2eHQ',
q: `video game ${searchWord}`,
part: 'snippet'
},
dataType: 'json',
type: 'GET',
success: callback
};
$.ajax(settings)
};
function renderResult(title, thumbnail, link){
const searchElement = `
<div class="search-result-block">
<a target=“_blank” class="youTubeWinPop" href="https://www.youtube.com/watch?v=${link}">
<img class="youtubeImage" src="${thumbnail}" alt="description of thumbnail">
<p class="youtubeTitle">${title}</p>
</a>
</div>
`;
$('.videos').append(searchElement);
// $('.youTubeWinPop').on('click', function(){
// window.open(`https://www.youtube.com/watch?v=${link}`);
// })
};
//callback function for YouTube API
function callbackYouTubeSearchData(response){
response.items.forEach(item => {
const youTubeName = item.snippet.title;
const youTubeThumbnail = item.snippet.thumbnails.medium.url;
const youTubeLink = item.id.videoId;
renderResult(youTubeName, youTubeThumbnail, youTubeLink)
})
};
function watchSubmit(){
$('.js-search-form').submit(event => {
let counter = 0;
event.preventDefault();
const queryTarget = $(event.currentTarget).find('.js-query');
const query = queryTarget.val();
queryTarget.val("");
const hasSearchElement = $('.search-result-block');
const hasModelLink = $('.modelLink');
$("p").addClass("hidden");
if(counter === 0){
$("section").removeClass("hidden");
$("iframe").removeClass("hidden");
}
if($('.videos').length){
hasSearchElement.remove();
}
if($('.models').length){
hasModelLink.remove();
}
counter++;
getDataFromSketchfabApi(query, callbackSketchfab);
getYouTubeApi(query, callbackYouTubeSearchData);
})
};
$(watchSubmit);