index.html 12.8 KB
Newer Older
1 2 3 4 5 6 7
<!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>
8
        <script type="text/javascript" src="locales/locales.js"></script>
9 10 11
    </head>

    <body>
12
    <!--<p id="lang"></p>-->
13 14 15 16 17 18 19 20
    </body>

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

21
        var API_KEY = '2261217-168750d9eaaa0051ca20fa425';
22 23 24 25 26 27 28 29 30 31 32


        // 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;
33

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

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

40
        // Language for the widget (languages can be added in locales/locales.js)
41
        var locale = locales["en"];
42
        
43 44 45
        // 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;
46 47 48

        // ---------------------
        // Globals
49
        // ---------------------
50 51
        var currentIndex = 0;
        var currentTerm = "";
52
        var filtersDisplayed = false; 
53 54 55 56 57
        
        // 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'];

58 59 60 61
        // ---------------------

        $(document).ready(loadPage)

62
        /* Initialize the page layout */
63
        function loadPage() {
64

65 66 67
            // Get OpenBoard's current language
            var appLanguage = window.sankore ? sankore.locale().substr(0,2) : searchLanguage;
            
68
            // Set it as search language, if possible
69
            if (availableLanguages.indexOf(appLanguage) > -1)
70 71 72 73 74
                searchLanguage = appLanguage;

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

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

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

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

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

89 90 91 92 93 94 95 96 97
            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);

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

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

103 104 105
            

            // Functions
106 107 108 109 110 111 112 113 114 115 116
                        
            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);
117 118
                    }
                }
119
            });
120 121
            
            ($(".imgContainer").live("click",function(){
122 123
                sankore.sendFileMetadata(createMetaData($(this)));
            }));
124 125 126 127 128 129 130 131 132 133 134 135 136


            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;
                }
            });
137 138
            
        }
139

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

145
        function runSearch(term, index) {
146 147
            updateFilters();

148 149 150 151 152 153 154 155 156 157 158 159
            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";
160

161
            //console.log(url);
162
            //document.getElementById("lang").innerHTML = "Language: " + searchLanguage;
163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178

            $.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;

179 180
            if (results.length == 0)
                $("<p>"+locale.no_result+"</p>").appendTo(contentDiv);
181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196

            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;

197 198
                var imgWidth = (result.previewWidth > minWidth)?result.previewWidth:minWidth;
                var imgHeight = (result.previewHeight > minHeight)?result.previewHeight:minHeight;
199 200 201 202 203 204 205 206 207 208 209
                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'/>");

210 211 212 213 214
                var imageURL = result.webformatURL;
                if (fetchMediumResImages)
                    imageURL = getMediumResURL(result);

                iUrl.attr("value", imageURL);
215 216 217 218 219
                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));
220
                
221 222 223 224 225 226 227 228 229 230

                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);
231 232

            }
233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250
            // 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');
251
            }
252 253 254

            $("#disc_nav_cont #resultFooter").remove();
            pagesDiv.insertBefore($('#disclaimer'));
255
            
256 257 258
            $(".imgContainer").each(function(){
                this.addEventListener("dragstart", imageDragging, false);
            })
259
            
260 261 262
            $(".imgContainer").each(function(){
                this.addEventListener("dragenter", imageDragenter, false);
            })
263
            
264 265 266
            $(".imgContainer").each(function(){
                this.addEventListener("dragleave", imageDragleave, false);
            })
267
            
268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323
            $(".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;
        }

324 325 326 327 328 329 330 331 332 333
        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;
        }
334 335

    </script>
336 337

</html>