class OpenVerse { //page_count constructor () { //register your key at https://api.openverse.org/v1/ and replace client_id, client_secret and name bellow this.key = { "client_id":"qAhddE2SZtqHsDpKiOXet0BtRnAdUjxGqPg9OyN3", "client_secret":"IhEO5FIClqRHTEA3rWWAJsb7sjuZfqUUPd1ij2AZvyB4ACcoIoV9ROySCxGwBXO3T6gxWjTtEtuVEwEmusXHeQD4MD1vFhz6Kb1g7eI6FUI4YUoMr2xZBq3oqUxM0Z8e", "name":"Vvveb", "grant_type" : "client_credentials" }; this.accessToken = { "access_token" : "DLBYIcfnKfolaXKcmMC8RIDCavc2hW", "scope" : "read write groups", "expires_in" : 36000, "token_type" : "Bearer" }; this.filters = { "license" :["BY-ND", "PDM", "BY-NC", "BY-NC-SA", "BY-NC-ND", "BY-SA", "BY", "CC0"], "license_type" :["all", "all-cc", "commercial", "modification"], "categories" :["illustration", "photograph", "digitized_artwork"], "aspect_ratio" :["tall", "wide", "square"], "size" :["small", "medium", "large"], "source" :["woc_tech", "wikimedia", "wellcome_collection", "thorvaldsensmuseum", "thingiverse", "svgsilh", "statensmuseum", "spacex", "smithsonian_zoo_and_conservation", "smithsonian_postal_museum", "smithsonian_portrait_gallery", "smithsonian_national_museum_of_natural_history", "smithsonian_libraries", "smithsonian_institution_archives", "smithsonian_hirshhorn_museum", "smithsonian_gardens", "smithsonian_freer_gallery_of_art", "smithsonian_cooper_hewitt_museum", "smithsonian_anacostia_museum", "smithsonian_american_indian_museum", "smithsonian_american_history_museum", "smithsonian_american_art_museum", "smithsonian_air_and_space_museum", "smithsonian_african_art_museum", "smithsonian_african_american_history_museum", "sketchfab", "sciencemuseum", "rijksmuseum", "rawpixel", "phylopic", "nypl", "nasa", "museumsvictoria", "met", "mccordmuseum", "iha", "geographorguk", "floraon", "flickr", "europeana", "eol", "digitaltmuseum", "deviantart", "clevelandmuseum", "brooklynmuseum", "bio_diversity", "behance", "animaldiversity", "WoRMS", "CAPL", "500px"] }, this.baseUrl = 'https://api.openverse.org/v1/images?format=json&filter_dead=true&'; this.currentUrl = this.baseUrl; this.filtersParameters = ""; } authenticate() { let url = "https://api.openverse.org/v1/auth_tokens/token/"; let self = this; return; const formData = new FormData(); for (const key in this.key) { formData.append(key, this.key[key]); } fetch(url, { method: "POST", //credentials: 'include', headers: { //'Access-Control-Allow-Origin': '*', "Access-Control-Allow-Origin": location.origin, "Access-Control-Allow-Credentials" : "true", "Access-Control-Allow-Methods": "GET, POST, PATCH, DELETE, PUT, OPTIONS", "Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With, Origin, X-Api-Key", "Access-Control-Request-Headers": "Content-Type, Authorization", "Authorization": "Bearer " + this.accessToken.access_token, //"Content-Type": "application/json", "Content-Type": "application/x-www-form-urlencoded" }, body: new URLSearchParams(this.key), }) .then((response) => { if (!response.ok) { throw new Error(response) } return response.text() }) .then((data) => { this.accessToken = data; console.log('OpenVerse Authentication:' , data); }) .catch(error => { console.log(error.statusText); displayToast("danger", "Error", "Openverse authentication failed!"); }); } setFiltersParams(filtersParameters) { this.filtersParameters = filtersParameters; } getResults(callback) { this.currentUrl = this.baseUrl + this.filtersParameters; fetch(this.currentUrl, { method: "GET", //credentials: 'include', headers: { "Content-Type": "application/json", //'Access-Control-Allow-Origin': '*', "Access-Control-Allow-Origin": location.origin, "Access-Control-Allow-Credentials" : "true", "Access-Control-Allow-Methods": "GET, POST, PATCH, DELETE, PUT, OPTIONS", "Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With, Origin, X-Api-Key", "Access-Control-Request-Headers": "Content-Type, Authorization", "Authorization": "Bearer " + this.accessToken.access_token, }, }) .then((response) => { if (!response.ok) { throw new Error(response) } return response.json() }) .then((data) => { callback(data); }) .catch(error => { console.log(error.statusText); displayToast("danger", "Error", "Openverse error!"); }); } } class OpenVerseDisplay extends OpenVerse { constructor () { super(); } getFiltersHtml() { let html = ""; for (name in this.filters) { let values = this.filters[name]; html += "
"; html += ""; html += ""; html += "
"; } return generateElements(html)[0]; } showLoading() { document.getElementById("openverse-results").innerHTML = ` `; } setFilters() { this.filtersParameters = new URLSearchParams(new FormData(document.getElementById("openverse-form"))).toString(); //this.setFiltersParams(filters); } displayResults(data) { var items = []; console.log(data['results']); data['results'].forEach( val =>{ //let value = data['results'][key]; console.log(val); let item = `
    • `; items.push( item ); }); document.getElementById("openverse-results").innerHTML = items.join(""); //pagination const maxpages = 15; let pages = data['page_count']; let visiblePages = 5; let pagenum = openverse.pageNo ? openverse.pageNo : 1; let pageStop = 1; let currentPage = openverse.pageNo; if (pages > maxpages) { if (pagenum > visiblePages) { if ((pagenum + visiblePages) > pages) { currentPage = pages - maxpages - 1; pageStop = pages; } else { currentPage = pagenum - visiblePages; pageStop = pagenum + visiblePages; } } else { currentPage = 1; pageStop = maxpages; } } let pagination = ''; let active = ''; //next let prev = Math.max(pagenum - 1, 1); pagination += `
    • `; for (let i = currentPage; i <= pageStop; i++) { if (i == pagenum) { active = "active"; } else { active = ""; } pagination += `
    • `; } //next let next = Math.min(pagenum + 1, pages); pagination += `
    • `; pagination += `
    total pages ${data['page_count']}
    `; console.log(items.join("")); console.log(pagination); document.getElementById("openverse-pagination").innerHTML = pagination; } page(pageNo) { this.pageNo = pageNo; this.filtersParameters = (new URLSearchParams(new FormData(document.getElementById("openverse-form"))).toString()) + "&page=" + pageNo; this.showLoading(); this.getResults(this.displayResults); } search() { this.pageNo = 1; this.setFilters(); this.showLoading(); this.getResults(this.displayResults); } toggleBtn() { return generateElements(` `)[0]; } displayPanel() { return generateElements(``)[0]; } paginationContainer() { return generateElements(``)[0]; } topPanel() { return generateElements(`
    `)[0]; } init() { let self = this ; this.authenticate(); document.querySelector("#MediaModal .top-panel").append(self.topPanel()); document.querySelector("#MediaModal .display-panel").append(self.displayPanel()); document.querySelector("#MediaModal .top-right .align-right").append(self.toggleBtn()); document.querySelector("#MediaModal .modal-footer .align-left").append(self.paginationContainer()); document.querySelector("#openverse-filters").prepend(self.getFiltersHtml()); document.querySelector("#openverse-search-btn").addEventListener("click", function (e) { self.search();e.preventDefault(); } ); //if openverse enabled hide media images document.querySelector("#openverse-form").addEventListener("show.bs.collapse", function (e){ if (e.target.id == "openverse-form") { document.querySelector("#MediaModal #openverse-results").style.display = ''; document.querySelector("#MediaModal #openverse-pagination").style.display = ''; document.querySelector("#MediaModal #media-files").style.display = 'none'; } }); document.querySelector("#openverse-form").addEventListener("hide.bs.collapse", function (e){ if (e.target.id == "openverse-form") { document.querySelector("#MediaModal #openverse-results").style.display = 'none'; document.querySelector("#MediaModal #openverse-pagination").style.display = 'none'; document.querySelector("#MediaModal #media-files").style.display = ''; } }); } } let openverse = new OpenVerseDisplay(); window.addEventListener("mediaModal:init", () => openverse.init());