Example_1.html

HTML5, CSS and JavaScript

The following code block includes the HTML, CSS, and JavaScript for the Example_1.html page.
Developer note:
The following code example is editable.
After editing, click in the lower-right corner of the code block to restore the original code.
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>example.lookup</title>
        <style>
         html, body {
             font-family: 'Roboto', 'Arial', sans-serif;
             margin: 0;
             padding: 10px;
             height: 100%;
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
             background: #f5f6fa;
         }
         body>header>h2 {
             margin-top: 0;
         }
         .args { color: steelblue; }
        </style>
    </head>
    <body>
        <header>
            <h2>example.lookup(<i class='args'>furl, format, apiParams, delay, maxTries</i>) </h2>
            <p>
                Pass a 'furl' url param to this page and it will call example.lookup() to return a fully populated "SearchResult" ready to be rendered.<br>
                You can pass in the 'env' url param as 'stage', 'canary', or 'prod'.<br>
                You can pass in the 'format' url param as 'info', 'place', 'mrec1', etc...
            </p>
            <p>
                <a href="lookup.html?env=canary&furl=func://askme.com/cloudSearch-showProductById?q=toaster&format=mrec1">Example</a>
            </p>
        </header>
        <section id="main-content"></section>
        <script src="../example.js"></script>
        <script>
            var urlParams;
            (window.onpopstate = function () {
             var match,
                pl     = /\+/g,
                search = /([^&=]+)=?([^&]*)/g,
                decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
                query  = window.location.search.substring(1);
                urlParams = {};
                while (match = search.exec(query))
                    urlParams[decode(match[1])] = decode(match[2]);
                example.init({
                    env: urlParams["env"] || "stage",
                    credentials: {
                        partnerId: 2892812238,
                        partnerSecret: 'ypzpzt2gux3mscdwkksp3mdgxngxqr4h'
                    },
                    container: "#main-content"
                });
                if(urlParams["furl"]){
                    var furl = urlParams["furl"];
                    example.lookup(furl, urlParams['format'] || 'info', null, 1000, 3)
                    .then(function(searchResult){
                        // This searchResult should have all the data need to render a <Card/> component.
                        var output = '<h3>Populated SearchResult</h3>';
                        output += JSON.stringify(searchResult, null, 4);
                        document.getElementById('main-content').innerHTML = output;
                    }, function(err){
                        var output = '<h3>Failed to get content for furl: ' + err + '</h3>';
                        document.getElementById('main-content').innerHTML = output;
                    })
                }
            })();
        </script>
    </body>
</html>