• Create Project
  • Search for People
  • Play Skillsrank
  • Saved Favorites
  • Community Friends
  • Activity Log
  • Developer Console
  • Programming Help
  • Advanced Topics
  • Internal API
  • WebScript Guide
  • What's Popular
  • Search by Tags
    •  
    Source: site.view [edit]
    Function name: searchCartoonsRenderNew
    Arguments: data
    Description: User interface for search results. Shows thumbnails, tag cloud, etc.
    Page type: html
    Render function:  
    Module: perfectCartoon

    Page source:

    <html>   
    
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Cartoon Search | Find the Cartoon you need!</title>
    <link rel="stylesheet" href="/css/basic.css" type="text/css" />
    <webl>WubCall("perfectCartoon.css", []);</webl>
    <webl>var db = data.db ? "production";
          if db == "staging" then
             "";
          else
             `<meta name="pinterest" content="nopin" />`
          end;
    </webl>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="/js/jquery.galleriffic.js"></script>
        <script type="text/javascript" src="/js/jquery.opacityrollover.js"></script>
        <script type="text/javascript">
jQuery(document).ready(function($) {
    $('div.content').css('display', 'block');

    var onMouseOutOpacity = 0.67; // initial opacity
    $('#thumbs ul.thumbs li, div.navigation a.pageLink').opacityrollover({ // onhover styles
        mouseOutOpacity:   onMouseOutOpacity,
        mouseOverOpacity:  1.0,
        fadeSpeed:         'fast',
        exemptionSelector: '.selected'
    });
  
    document.body.style.webkitTouchCallout='none';
    
    var gallery = $('#thumbs').galleriffic({ // initialization of Galleriffic plugin
        delay:                     2500,
        numThumbs:                 8,
        preloadAhead:              8,
        enableTopPager:            false,
        enableBottomPager:         false,
        imageContainerSel:         '#slideshow',
        controlsContainerSel:      '#controls',
        captionContainerSel:       '#caption',
        loadingContainerSel:       '#loading',
        renderSSControls:          false,
        renderNavControls:         true,
        playLinkText:              'Play Slideshow',
        pauseLinkText:             'Pause Slideshow',
        prevLinkText:              'Previous Photo',
        nextLinkText:              'Next Photo',
        nextPageLinkText:          'Next &rsaquo;',
        prevPageLinkText:          '&lsaquo; Prev',
        enableHistory:             true,
        autoStart:                 false,
        syncTransitions:           true,
        defaultTransitionDuration: 900,
        onSlideChange:             function(prevIndex, nextIndex) {
            this.find('ul.thumbs').children()
                .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                .eq(nextIndex).fadeTo('fast', 1.0);
        },
        onPageTransitionOut:       function(callback) {
            this.fadeTo('fast', 0.0, callback);
        },
        onPageTransitionIn:        function() {
            var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
            var nextPageLink = this.find('a.next').css('visibility', 'hidden');

            if (this.displayedPage > 0)
                prevPageLink.css('visibility', 'visible');

            var lastPage = this.getNumPages() - 1;
            if (this.displayedPage < lastPage)
                nextPageLink.css('visibility', 'visible');

            this.fadeTo('fast', 1.0);
        }
    });

    gallery.find('a.prev').click(function(e) { // other event handlers - Prev/Next links
        gallery.previousPage();
        e.preventDefault();
    });

    gallery.find('a.next').click(function(e) {
        gallery.nextPage();
        e.preventDefault();
    });

});    
        </script>
    
        
    
        <script type="text/javascript">
      $(function() {
        var catTags = [
            <webl>
              var html = "";
              every tag in data.tags do
                  if (html != "") then
                     html = html + ", "
                  end;
                  html = html + `"` + tag + `"`
              end;
              html;
           </webl>    
        ];
        $( "#catTags" ).autocomplete({
          source: catTags
        });
      });
      $(function() {
        var authorTags = [
            <webl>
              var html = "";
              every author in data.authors do
                  if (html != "") then
                     html = html + ", "
                  end;
                  html = html + `"` + author + `"`
              end;
              html;
            </webl>    
        ];
        $( "#authorTags" ).autocomplete({
          source: authorTags
        });
      });      
  </script>
    
  </head>

    
  <body>
    <div id="page">
        <div class="container">
          
        <webl>
           var html = `<div><a href="/"><img class="centered" src="/images/perfect-cartoon-logo-final.png"></a></div>` + "\n";         
           var db = data.db ? "production";
           //         <!-- Display STAGING banner -->
           if db == "staging" then
              html = "<h2>STAGING DATABASE!</h2>\n"
           end;
          
           html = html + "<center><br><b>Topic, Category, Author or HumorPoint You Would Like To Make</b></center>\n";

           var searchField = "Search...";
           if data.q != `` then 
              searchField = data.q
           end;
           var caption = "Caption...";
           if data.c != `` then 
              caption = data.c
           end;
           var tags = "Category...";
           if data.t != `` then 
              tags = data.t
           end;
           var author = "Author...";
           if data.a != `` then 
              author = data.a
           end;
          
           html = html + `        
        <form class="searchform" action="/doit/" method="get">
           <input name="cmdline" value='searchCartoons(query, "", "", "", db)' type="hidden"/>
           <input name="db" value="` + data.db + `" type="hidden" />
           <input class="searchfield" name="query" type="text" value="` + searchField + `" 
                onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
          <input class="searchbutton" type="submit" value="Go" style="cursor:pointer;" />
        </form>          
        
        <a class="toggleAdvanced" onclick='$("#advancedSearch").fadeToggle(600);'>Advanced Search</a>
        <div id="advancedSearch">
           <form class="searchform" action="/doit/" method="get" style="width:400;">
              <input name="cmdline" value='searchCartoons("", caption, tags, author, db)' type="hidden"/>
              <input name="db" value="` + data.db + `" type="hidden" />

              <input class="searchfield" name="caption" id="caption" style="width:120;" 
                   value="` + caption + `"
                   onfocus="if (this.value == 'Caption...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Caption...';}" />

              <input class="searchfield" name="tags" id="catTags" style="width:120;" 
                   value="` + tags + `"
                   onfocus="if (this.value == 'Category...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Category...';}" />

             <input class="searchfield" name="author" id="authorTags" style="width:120;" 
                   value="` + author + `"
                   onfocus="if (this.value == 'Author...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Author...';}" />

   	         <input class="searchbutton" type="submit" value="Go" style="cursor:pointer;" />
           </form>
       </div>`;                    
          
           var embed = data.embed ? false;
           if (embed) then
              html = "";
           end;          
           html;                    
        </webl>
                  

            <div class="navigation-container">
                <div id="thumbs" class="navigation">
                    <a class="pageLink prev" style="visibility: hidden;" href="#" title="Previous Page"></a>

                    <ul class="thumbs">
                      
                      
                      
                       <webl>
                           var html = "";
                           var db = (data.db ? "production");
                           var res = data.res ? [];
                           if res == nil then
                              res = []
                           end;
                           var i = 0;
                           every r in res do      
                              i = i + 1;
                              var fTitle = r.title ? "";
                              var fImgUrl = r.imgUrl ? "";
                              var fNewYorker = r.newYorker ? "no";
                              var fHandScore = r.handScore ? "0";
                              var fTags = r.tags ? "";
                              var fAuthor = r.author ? "";
                              var fPageUrl = r.pageUrl ? "";
                              if (data.showTips == false) or (data.showTips=="nonNY" and fNewYorker=="yes") then
                                 fTitle = "";
                              end;
                              var handScore = " (" + ToString(fHandScore) + ")\n" + fTags;
                              if db != "staging" then
                                 handScore = ""
                              end;
              
                              html = html + "<li>\n" +
                                       `<a class="thumb" name="photo` + ToString(i) + `" href="` + fImgUrl + `" title="` + fTitle + `">
                                           <img src="` + fImgUrl + `" alt="` + fTitle + `" />
                                       </a>
                                       <div class="caption">
                                           <div class="image-title">` + fTitle + `</div>
                                           <div class="image-desc">HTML <b>description</b></div>
                                           <div class="download"><a href="http://www.script-tutorials.com/demos/156/images/pic1.jpg">Download Original</a></div>
                                       </div>
                                   </li>` + "\n";
                           end;
                           html;
                       </webl>                      
                      
                    </ul>
                    <a class="pageLink next" style="visibility: hidden;" href="#" title="Next Page"></a>
                </div>
            </div>
            <div class="content">
                <div class="slideshow-container">
                    <div id="controls" class="controls"></div>
                    <div id="loading" class="loader"></div>
                    <div id="slideshow" class="slideshow"></div>
                </div>
                <div id="caption" class="caption-container">
                    <div class="photo-index"></div>
                </div>
            </div>
            <div style="clear: both;"></div>

        </div>
    </div>
  </body>
</html>