index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Pixabay Image Search</title>
        <link rel="stylesheet" type="text/css" href="css/basic.css"/>
        <script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="locales/locales.js"></script>
    </head>

    <body>
    <!--<p id="lang"></p>-->
    </body>

    <script type="text/javascript">
        /* 
           This script makes use of the Pixabay image search API, documented here:
           https://pixabay.com/api/docs/
        */

        var API_KEY = '2261217-168750d9eaaa0051ca20fa425';


        // Number of results per page
        var limit = 10; 

        // Maximum number of pages to display
        var maxPages = 10;

        // Minimum size of pictures to search for
        var minHeight = 150;
        var minWidth = 150;

        // Image type to retrieve. Can be "photo", "illustration", "vector" or "all".
        var imageType = "all";

        // Default language to search in, if the application can't return a suitable one
        var searchLanguage = "en";

        // Language for the widget (languages can be added in locales/locales.js)
        var locale = locales["en"];
        
        // Fetch 960px images instead of the default 640px. However the API doesn't
        // provide size information in this case, so it is disabled by default.
        var fetchMediumResImages = false;

        // ---------------------
        // Globals
        // ---------------------
        var currentIndex = 0;
        var currentTerm = "";
        var filtersDisplayed = false; 
        
        // Pixabay's supported search languages
        var availableLanguages = ['cs', 'da', 'de', 'en', 'es', 'fr', 'id', 'it', 'hu', 'nl', 'no', 
            'pl', 'pt', 'ro', 'sk', 'fi', 'sv', 'tr', 'vi', 'th', 'bg', 'ru', 'el', 'ja', 'ko', 'zh'];

        // ---------------------

        $(document).ready(loadPage)

        /* Initialize the page layout */
        function loadPage() {

            // Get OpenBoard's current language
            var appLanguage = window.sankore ? sankore.locale().substr(0,2) : searchLanguage;
            
            // Set it as search language, if possible
            if (availableLanguages.indexOf(appLanguage) > -1)
                searchLanguage = appLanguage;

            // And as the widget's language
            if (locales[searchLanguage] != undefined)
                locale = locales[searchLanguage];

            var mode = false; //search or view mode
            var hide = false; //hide or no main panel

            // basic containers and elements    
            
            var search = $("<div id='search' class='search'>").appendTo("body");

            var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search);
            var subSearchFilter = $("<div id='subSearchFilter' class='subSearch'>").appendTo(search);

            var searchInput = $("<input id='searchInput' class='searchInput' type='text'/>").appendTo(subSearchInput);
            var searchButton = $("<div id='searchButton' class='searchButton'>").appendTo(subSearchInput);

            var toggleFilters = $("<div id='toggleFilters' class='toggleFilters'>").appendTo(subSearchInput);

            var selectFilter = $("<select id='typeFilter' class='filterSelect'>")
            .append($("<option value='all'>"+locale.def_opts_val_image+"</option>"))
            .append($("<option value='photo'>"+locale.image_type_photo+"</option>"))
            .append($("<option value='illustration'>"+locale.image_type_illustration+"</option>"))
            .append($("<option value='vector'>"+locale.image_type_vector+"</option>"))
            $("<div class='filterContainer'>").append("<span>"+locale.image_type_title+":</span><br/>").append(selectFilter).appendTo(subSearchFilter);

            var searchResult = $("<div id='searchResult'>").appendTo("body");

            var disc_nav_cont = $("<div id='disc_nav_cont' class='disc_nav_cont'>").appendTo("body");    
            var disclaimer = $("<div id='disclaimer' class='disclaimer'>"+locale.disclaimer_title+"<div>").appendTo(disc_nav_cont);

            
            // Functions
                        
            searchButton.click(function(){
                if(!hide){
                    runSearch(searchInput.val(), 0);
                }
            });
            
            searchInput.keydown(function(event){
                if(!hide){
                    if((event.keyCode == 0xA)||(event.keyCode == 0xD)){
                        runSearch(searchInput.val(), 0);
                    }
                }
            });
            
            ($(".imgContainer").live("click",function(){
                sankore.sendFileMetadata(createMetaData($(this)));
            }));


            toggleFilters.click(function(){
                if(filtersDisplayed){
                    subSearchFilter.hide();
                    toggleFilters.css("background-image","url(images/down.png)");
                    filtersDisplayed = false;
                } else {
                    subSearchFilter.css("display","inline-block");
                    toggleFilters.css("background-image","url(images/up.png)");
                    filtersDisplayed = true;
                }
            });
            
        }

        function updateFilters() {
            var value = $("#typeFilter option:selected").val();
            imageType = value;
        }

        function runSearch(term, index) {
            updateFilters();

            currentTerm = term;
            currentIndex = index;
            var page = index+1; // Page numbers start at 1 on Pixabay
            var url = "https://pixabay.com/api/?key="+API_KEY
                        +"&q="+escape(term)
                        +"&per_page="+limit
                        +"&page="+page
                        +"&min_width="+minWidth
                        +"&minHeight="+minHeight
                        +"&image_type="+imageType
                        +"&lang="+searchLanguage
                        +"&safesearch=true";

            //console.log(url);
            //document.getElementById("lang").innerHTML = "Language: " + searchLanguage;

            $.ajax({
                url: url,
                success: searchComplete,
                error: searchFail,
                dataType: "json"
            });
        }

        function searchComplete(json) {
            // Grab our content div, clear it.
            var totalResults = json.totalHits;
            var contentDiv = $('#searchResult').empty();
            // Loop through our results, printing them to the page.
            var results = json.hits;

            if (results.length == 0)
                $("<p>"+locale.no_result+"</p>").appendTo(contentDiv);

            for (var i = 0; i < results.length; i++) {
                var result = results[i];

                /* 
                   Images are displayed in an `imgContainer` element. It contains
                   the image itself (`newImg`) but also some hidden fields containing
                   metadata that is sent to OpenBoard if the user clicks the image
                */

                // Image element
                var imgContainer = $("<div class='imgContainer' draggable='true'>");
                var newImg = document.createElement('img');

                newImg.src = result.previewURL;

                var imgWidth = (result.previewWidth > minWidth)?result.previewWidth:minWidth;
                var imgHeight = (result.previewHeight > minHeight)?result.previewHeight:minHeight;
                imgContainer.width(imgWidth).height(imgHeight);
                imgContainer.append($(newImg));

                // Metadata to send to OpenBoard
                var iUrl = $("<input type='hidden'/>");
                var iContent = $("<input type='hidden'/>");
                var iHeight = $("<input type='hidden'/>");
                var iWidth = $("<input type='hidden'/>");
                var iThumbnailUrl = $("<input type='hidden'/>");
                var iTitle = $("<input type='hidden'/>");

                var imageURL = result.webformatURL;
                if (fetchMediumResImages)
                    imageURL = getMediumResURL(result);

                iUrl.attr("value", imageURL);
                iContent.attr("value", result.type);
                iHeight.attr("value", result.webformatHeight);
                iWidth.attr("value", result.webformatWidth);
                iThumbnailUrl.attr("value", result.previewURL);
                iTitle.attr("value", getImageTitle(result));
                

                imgContainer.append(iUrl);
                imgContainer.append(iContent);
                imgContainer.append(iHeight);
                imgContainer.append(iWidth);
                imgContainer.append(iThumbnailUrl);
                imgContainer.append(iTitle);

                // Add the image to the page
                imgContainer.appendTo(contentDiv);

            }
            // Now add links to additional pages of search results.
            addPaginationLinks(totalResults);
        }


        function addPaginationLinks(totalResults) {
            var curPage = currentIndex; 
            var pagesDiv = $("<div id='resultFooter' class='resultFooter'>");

            var highestPageNumber = maxPages;
            if (totalResults/limit < maxPages)
                highestPageNumber = totalResults/limit;

            for (var i = 0; i < highestPageNumber; i++) {
                var link = $("<a class='pager_button'></a>").attr('href', 'javascript:gotoPage('+i+');').html(i+1).appendTo(pagesDiv);
                if (curPage == i) 
                    link.addClass('active');
            }

            $("#disc_nav_cont #resultFooter").remove();
            pagesDiv.insertBefore($('#disclaimer'));
            
            $(".imgContainer").each(function(){
                this.addEventListener("dragstart", imageDragging, false);
            })
            
            $(".imgContainer").each(function(){
                this.addEventListener("dragenter", imageDragenter, false);
            })
            
            $(".imgContainer").each(function(){
                this.addEventListener("dragleave", imageDragleave, false);
            })
            
            $(".imgContainer").each(function(){
                this.addEventListener("dragover", imageDragover, false);
            })
        }

        function searchFail(jqXHR, textStatus, errorThrown) {
            alert('Couldn\'t connect to Pixabay: ' + textStatus + ' ' + errorThrown);
        }

         function imageDragging(e){
            e.dataTransfer.setData("text/plain",$(this).find("input:hidden").eq(0).val());
        }
        
        function imageDragleave(e){
            return false;
        }
        
        function imageDragover(e){
            return false;
        }
        
        function imageDragenter(e){
            return false;
        }
       
        function gotoPage(i) { 
            runSearch(currentTerm, i);             
        } 

        function createMetaData(parent){
            var meta = "";
            //alert($(this).find("input:hidden").eq(0).val());
            meta = "<metadata><data><key>Type</key><value>Image</value></data><data><key>Url</key><value>" + 
                parent.find("input:hidden").eq(0).val() + 
                "</value></data><data><key>Content</key><value>" + 
                parent.find("input:hidden").eq(1).val() +
                "</value></data><data><key>Height</key><value>" + 
                parent.find("input:hidden").eq(2).val() +
                "</value></data><data><key>Width</key><value>" +
                parent.find("input:hidden").eq(3).val() +
                "</value></data><data><key>thumbnailUrl</key><value>" +
                parent.find("input:hidden").eq(4).val() +
                "</value></data><data><key>Title</key><value>" +
                parent.find("input:hidden").eq(5).val() +
                "</value></data></metadata>";
            return meta;
        }
        
        function getImageTitle(image) {
            // Pixabay images don't have a title, but we can fetch the first tag and use that as a title.

            var firstTag = image.tags.split(",")[0]
            //console.log(firstTag);
            return firstTag;
        }

        function getMediumResURL(image) {
            // Pixabay automatically returns a 640px "webformat" picture; we can't request a larger one
            // in the search request, but we can manually fetch one (up to 960px)

            var url = image.webformatURL;

            medResURL = url.replace("_640.", "_960.");

            return medResURL;
        }

    </script>

</html>