index.html - google-ajax-examples - This is a placeholder for examples of various Google APIs and their use via JavaScript

Source path: svn/ trunk/ interactive_samples/ index.html

‹r537

r566

<!DOCTYPE html>
<html>
<!-- copyright (c) 2009 Google inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * Author: Ben Lisbakken
-->
<head>
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <META NAME="Description" CONTENT="The AJAX Code Playground is an educational tool to show code examples for various Google Javascript APIs.">
  <!-- CSS -->
  <link rel="stylesheet" href="css/yui-reset.css" type="text/css">
  <link rel="stylesheet" href="css/styles.css" type="text/css">
  <!-- JavaScript -->
  <title>Google Code Playground</title>
  <script src="codemirror/js/prod_codemirrorz_5b6d8fa21fb3d7fd8f309cf6e62b8c1b.js" type="text/javascript" charset="utf-8"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/jquery-ui-packed.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
  function pgSamplesLoadedCB(codeObj) {
    window.codeArray = codeObj.codeArray;
  }
  
  </script>
  {% if toc %}
    <script src="{{ toc }}" type="text/javascript" charset="utf-8"></script>
  {% endif %}
  <!--
    Undesirable to put inline script in between script includes
    but this is the best way to load saved examples
  -->
  <script type="text/javascript" charset="utf-8">
    {% if usersSamplesJSON %}
      var userJSON = {{ usersSamplesJSON }};
    if (typeof userJSON != 'undefined' && userJSON.length) {
      codeArray = userJSON.concat(codeArray);
    }
    {% endif %}
    var curAPITypes = '{{ curAPITypes }}';
    var expandedCategory = '{{ expandedCategory }}';
  </script>
  <script src="js/interactive_logic.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
    var loginUrl = '{{ loginUrl }}';
    var logoutUrl = '{{ logoutUrl }}';
    function init() {
      if (jQuery.browser.msie) {
        CFInstall.check({
          mode : 'overlay',
          destination: window.location.href
        });
      } else {
        is.init(document.getElementById('editor'));
      }
    }

    $(window).bind('load', function() {
      init();
    });
  </script>
</head>
<body>

<div id="container">
  <div id="whiteTopBar">
    <div id="loggedInBar">{% if userEmail %} {{ userEmail }} <span style="font-weight: normal">|</span> <a href="http://spreadsheets.google.com/viewform?hl=en&formkey=cFM5OU5yN3BrRzhOOEhFc2VBMmlQU2c6MA" style="color: #C00000;font-weight: bold;" target="_blank">Tell us what you think</a> <span style="font-weight: normal">|</span> <a href="{{ logoutUrl }}">Sign out</a></div>{% else %} <a href="http://spreadsheets.google.com/viewform?hl=en&formkey=cFM5OU5yN3BrRzhOOEhFc2VBMmlQU2c6MA" style="color: #C00000;font-weight: bold;" target="_blank">Tell us what you think</a> <span style="font-weight: normal">|</span> <a href="{{ loginUrl }}">Sign in</a></div> {% endif %}
    
    <div id="googleCodeLogo" class="clearfix">
      <a href="http://code.google.com/"><img border=0 src="images/code_logo.png" title="Google Logo"></a>
    </div>
    
    <h1>Code Playground</h1>
  </div>
  
  <div class="pane-row" id="codeRow">
    <div class="pane" id="selectCodeContainer">
      <div class="pane-header">
        <h2>Pick an API</h2>
        <input type="text" placeholder="Search" id="search">
      </div>
      <div class="pane-content">
        <div id="selectCode" class="pane-row-heighter"></div>
      </div>
    </div>
  
    <div class="pane" id="codeContainer">
      <div class="pane-header">
        <h2>Edit Code</h2>
        <div id="demoTitle"></div>
        <div class="pane-buttons">
          <button id="docsButton" onClick="is.viewDocs();" title="View the documentation for this sample.">
            <span class="docs-icon icon-text">View Docs</span>
          </button>
          <button id="toggleEditHTMLButton" onClick="is.toggleEditHTML();" title="Toggle between Javascript and HTML editing.">
            <span class="html-icon icon-text">Edit HTML</span>
          </button>
          <button id="codeMenuButton" class="dropdown">
            <span class="dropdown-icon icon-only">&nbsp;</span>
          </button>
          <div class="dropdown-content" id="codeMenuDropdown">
            <div onClick="is.uiEffects.toggleDropdown($('#codeMenuDropdown'));is.linkCode();return false;">
              <span class="export-icon icon-text">Export</span>
            </div>
            {% if loginUrl %}
            <div onClick="is.uiEffects.toggleDropdown($('#codeMenuDropdown'));is.confirmLogin('{{ loginUrl }}', true);return false;">
              <span class="save-icon icon-text">Save</span>
            </div>
            {% else %}
            <div onClick="is.uiEffects.toggleDropdown($('#codeMenuDropdown'));is.saveCode();return false;">
              <span class="save-icon icon-text">Save</span>
            </div>
            {% endif %}
          </div>
        </div>
      </div>
      <div class="pane-content">
        <div id="edit" class="pane-row-heighter">
          <span id="editJS"></span>
          <span id="editMixed"></span>
        </div>
      </div>
    </div>
    
    <script type="text/javascript" charset="utf-8">
    var options = {}
    if (!location.host.match(/localhost/) && !location.href.match(/\/\/172/)) {
      options.defaultSample = true;
    }
    var mixedEditor = new CodeMirror(document.getElementById('editMixed'), {
      parserfile: ["prod_mixed_5ca7530f0218ca2f6b1bfc8ffc1bbbf0.js"],
      stylesheet: ["codemirror/css/xmlcolors.css", "codemirror/css/jscolors.css", "codemirror/css/csscolors.css"],
      autoMatchParens : true,
      path : 'codemirror/js/',
      height : '320px',
      content: '',
      textWrapping: false,
      lineNumbers: true,
      breakPoints: false,
      onLoad: function() {is.runBox.runCode(options);}
    });
    var jsEditor = new CodeMirror(document.getElementById('editJS'), {
      parserfile: ["prod_js_only_8cbac90cb8e8e9b015f995a7ff89cab1.js"],
      stylesheet: 'codemirror/css/jscolors.css',
      autoMatchParens : true,
      path : 'codemirror/js/',
      height : '320px',
      content: '',
      textWrapping: false,
      lineNumbers: true,
      breakPoints: true,
      onLoad: function() {is.runBox.runCode(options);}
    });
    </script>
  </div>
  
  <div class="pane-row-sizer"></div>
  
  <div class="pane-row" id="outputRow">
    <div class="pane" id="outputContainer">
      <div class="pane-header">
        <h2>Output</h2>
        <div class="pane-buttons">
          <button onClick="is.runBox.runCode({debugMode: true});" title="Run this sample in 'Debug Mode' which enables breakpoints and inserts Firebug Lite.">
            <span class="debug-icon icon-text">Debug Code</span>
          </button>
        
          <button onClick="is.runBox.runCode();" title="Run this sample.">
            <span class="run-icon icon-text">Run Code</span>
          </button>
        </div>
      </div>
      <div class="pane-content">
        <div id="runbox"></div>
      </div>
    </div>
  </div>
  
  <div class="pane-row-sizer"></div>
  
  <div id="footer">
    ©2009 Google -
    <a href="http://code.google.com/">Code Home</a> - <a href="http://www.google.com/accounts/TOS">Site Terms of Service</a> -
    <a href="http://www.google.com/privacy.html">Privacy Policy</a> -
    <a href="http://code.google.com/more/">Site Directory</a> -
    <a href="http://code.google.com/p/google-ajax-examples/issues/list" target="_blank">Report Bug</a>
  </div>
</div>

<div id="HTMLforInlineJavascript" style="display:none;">&nbsp;</div>

<!--
There's a bug in jQuery UI where if you drag over an iFrame
then you can't drag anymore.  Putting an invisible div over the
iFrame fixes it.
-->
<div id="dragsafe"></div>

<form action="http://savedbythegoog.appspot.com/add" id="linkCodeForm" method="POST" target="_blank">
  <input type="hidden" id="codeHolder" name="code" />
</form>
<div id="grayOverlay"></div>

<div id="saveDiv" class="dialog">
  <h2 style="height:20px">Save Code</h2>
  <form action="save" method="POST" id="saveForm">
    <input type="hidden" name="boilerplateLoc" value="" id="boilerplateLoc">
    <input name="jscode" id="jscodeSaveForm" style="display: none;" />
    <input type="hidden" name="id" value="" id="idSaveForm">
    <input type="hidden" name="type" value="{{curAPITypes}}">
    <input type="hidden" name="sc" id="safetyCookie">
    <table id="saveFormTable">
      <tr>
        <td style="vertical-align: top;" class="formLabel">Sample Name:</td>
        <td>
          <div>
            <input type="text" id="saveSampleName" name="sampleName" value="My Sample" />
            <div class="explain">
              This is the display name of the sample.  It must have a unique name.
            </div>
          </div>
        </td>
      </tr>

      <tr>
        <td style="vertical-align: top;" class="formLabel">Tags:</td>
        <td>
          <div>
            <input type="text" id="tagsSaveForm" name="tags" value="tag1, tag2, tag3" />
            <div class="explain">
              Tags associated with this sample.  They will be used for the search bar.
            </div>
          </div>
        </td>
      </tr>
    </table>
    <div class="dialog-buttons">
      <button onClick="$('#saveForm').submit();">
        <span class="save-icon icon-text">Save</span>
      </button>
    
      <button class="negative" onClick="is.uiEffects.closeDialog('saveDiv');return false;">
        <span class="cancel-icon icon-text">Cancel</span>
      </button>
    </div>
  </form>
</div>

<div id="getChromeFrameDiv" class="dialog">
  <h2>Get Chrome Frame</h2>
  <p>The Playground no longer supports Internet Explorer.  Please <a href="http://www.google.com/chromeframe" target="_blank">install the Chrome Frame plugin</a> to use the Playground.</p>
  
  <div class="dialog-buttons">
    <button class="negative" onClick="is.uiEffects.closeDialog('getChromeFrameDiv');return false;">
      <span class="cancel-icon icon-text">Close</span>
    </button>
  </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
if (window.location.href.match(/code\.google\.com/)) {
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript" charset="utf-8">
try { 
  var pageTracker = _gat._getTracker("UA-18071-1");
} catch(err) {
  if (window.location.href.match(/code\.google\.com/)) {
    var nocacheParam = '?nocache=' + (new Date()).getTime();
    var url = '//code.google.com/apis/ajax/playground/ga_error' + nocacheParam;
    $.get(url, function(data, success) {});
  }
}
</script>
</body>
</html>

Show details Hide details

Change log

r555 by lisbakke on Nov 14, 2011 Diff

Fix mixed content.

Go to:

Project members, sign in to write a code review

Older revisions

r537 by lisbakke on Aug 23, 2010 Diff

More on playground widget.

r534 by lisbakke on Aug 20, 2010 Diff

Playground widget initial checkin.

r502 by lisbakke on Apr 12, 2010 Diff

Changing Meta description of the
Playground so that it shows up well
under google.com's description.

All revisions of this file

File info

Size: 11503 bytes, 290 lines

View raw file

File properties

svn:mime-type: text/html
svn:executable: *