[REFACTOR] Cleaned up the display of the author api demo, added some

comments in the code etc.

www/authorapi.php

@@ -47,45 +47,64 @@
     <p>Below is an edit page for a fictional Content/Learning Management System.</p>
     <p>The buttons on the right show how you might integrate the Author API to search for, and add items &mdash;
     allowing your authors to integrate rich content items into existing pages.</p>
-    <p>There is also a preview button which integrates the <a href="./itemsapi_inline.php">Items</a>
-    API &mdash; showing a full preview of your content embedded with items from the Item Bank.</p>
-    <p>Place the mouse cursor in the edit box below, where you want an item to appear. Click the "Add Item(s)" button
+    <p>There is also a preview button which integrates the <a href="./itemsapi_inline.php">Items API</a>
+    &mdash; showing a full preview of your content embedded with items from the Item Bank.</p>
+    <p>Place your cursor in the edit box below, where you want an item to appear. Click the "Add Item(s)" button
     and select your items from the Learnosity Item Bank.</p>
     <br>
 </section>
 
-<div class="panel panel-default">
+<div class="panel panel-info">
     <div class="panel-heading"><span class="glyphicon glyphicon-edit"></span> Custom Content Management System – Edit Page</div>
     <div class="panel-body">
         <div class="row">
             <div class="col-md-8">
-                <div id="editor">&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget velit libero. Aenean
-placerat lacus nunc, et lobortis augue venenatis sed. Vestibulum ornare malesuada ligula a
-molestie.&lt;/p&gt;
-
-&lt;p&gt;Mauris eget condimentum diam, id porttitor lacus. Phasellus faucibus condimentum mi, id
-hendrerit sem cursus ut. Nam purus nisi, vehicula non laoreet a, volutpat at felis. Mauris
-molestie congue felis et ultrices. Aenean fermentum leo sit amet metus molestie, molestie
-pulvinar tellus tristique. Curabitur vulputate bibendum erat, vitae ultricies kneque.&lt;/p&gt;</div>
+                <div id="editor"><?php echo htmlspecialchars('<h1>Sample content page</h1>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget velit libero.
+Aenean placerat lacus nunc, et lobortis augue venenatis sed. Vestibulum ornare
+malesuada ligula a molestie.</p>
+
+<p>Mauris eget condimentum diam, id porttitor lacus. Phasellus faucibus
+condimentum mi, id hendrerit sem cursus ut. Nam purus nisi, vehicula non laoreet
+a, volutpat at felis. Mauris molestie congue felis et ultrices. Aenean fermentum
+leo sit amet metus molestie, molestie pulvinar tellus tristique. Curabitur
+vulputate bibendum erat, vitae ultricies kneque.</p>
+<br>') . PHP_EOL; ?>
+</div>
             </div>
             <div class="col-md-4 text-center">
-                <button type="button" class="btn btn-default btn" data-toggle="modal" data-target="#authorModal">Add Item(s) <span class="glyphicon glyphicon-import"></span></button>
-                <button type="button" class="btn btn-default btn" onclick="signItemsRequest();">Preview Item(s) <span class="glyphicon glyphicon-search"></span></button>
+                <button type="button" class="btn btn-info btn" data-toggle="modal" data-target="#authorModal">Add Item(s) <span class="glyphicon glyphicon-import"></span></button>
+                <button type="button" class="btn btn-info btn" onclick="signItemsRequest();">Preview Item(s) <span class="glyphicon glyphicon-search"></span></button>
             </div>
         </div>
     </div>
 </div>
 
+<!--
+********************************************************************
+*
+* Load a fake editor (ACE Editor) to simulate integrating with
+* a Content/Learning management system
+*
+********************************************************************
+-->
 <script src="./static/vendor/ace/ace-builds/src-min-noconflict/ace.js"></script>
 <script>
     var editor = ace.edit('editor');
     editor.setTheme('ace/theme/clouds');
     editor.getSession().setMode('ace/mode/html');
     editor.setShowPrintMargin(false);
+    editor.navigateFileEnd();
+    editor.focus();
 </script>
 
-
-
+<!--
+********************************************************************
+*
+* Setup the Author API modal, using bootstrap 3.0
+*
+********************************************************************
+-->
 <div class="modal fade" id="authorModal">
     <div class="modal-dialog">
         <div class="modal-content">
@@ -104,14 +123,32 @@
     </div>
 </div>
 
-
-
-
+<!--
+********************************************************************
+*
+* This is the HTML hook to load the Items API preview into
+*
+********************************************************************
+-->
 <div id="render-items"></div>
 
-
-
-
+<!--
+********************************************************************
+*
+* Load the Author and Items API JavaScript files.
+*
+* The onItemClick() function adds an HTML hook (span) into the
+* content editor. This is the tag that an item loads into.
+*
+* The signItemsRequest() function parses the content block for
+* item hooks and sends a request to the server to sign the request
+* packet. The response is the HTML of a modal window with the
+* Items API initialised to render whatever was found in the content
+* editor window (if anything).
+* See ./src/views/modals/itemsinline.php
+*
+********************************************************************
+-->
 <script src="http://authorapi.learnosity.com/"></script>
 <script src="http://items.learnosity.com/"></script>
 <script>
@@ -120,9 +157,7 @@
 
     config.ui = {
         onItemClick: function (item) {
-            hook = '<span class="learnosity-item" data-reference="'
-                + item.reference
-                + '"></span>';
+            hook = '<span class="learnosity-item" data-reference="' + item.reference + '"></span>';
             editor.insert(hook);
             $('#authorModal').modal('hide');
         }

www/static/css/main.css

@@ -113,10 +113,11 @@ td {
     width: 100%;
     height: 300px;
     border: 1px solid #eee !important;
+    font-size: 13px !important;
 }
 
 .modal-dialog {
-   width:70%;
+   width: 70%;
 }
 
 @media (max-width: 768px) {

www/xhr.php

@@ -6,7 +6,8 @@
 |--------------------------------------------------------------------------
 |
 | Use this script to generate a new signature and initialisation
-| packet for a Learnosity service.
+| packet for a Learnosity service, or to generate the new signature
+| but return an HTML packet from an initialised service.
 |
 | Main use case right now is to sign an 'items' packet from the Author
 | API for previewing.