modify sample template and add new css/script for new numbered code.

The line numbers are included inside the <pre> block initially, but
hidden, so this script moves the numbers to a separate block on
the left and makes them non-selectable. Also includes script for
features like single-click to highlight a line of code and double-click
to invoke the link for that line.

Change-Id: I17ebb1255ff036948028b4722cc8e9758fb96553

diff --git a/tools/droiddoc/templates-sdk/assets/css/default.css b/tools/droiddoc/templates-sdk/assets/css/default.css
index 3f19286..4c01c2e 100644 (file)
--- a/tools/droiddoc/templates-sdk/assets/css/default.css
+++ b/tools/droiddoc/templates-sdk/assets/css/default.css
@@ -2451,6 +2451,46 @@ Lightbox
 Styles for samples project trees and code browsing in resources tab 
 */
 
+#codesample-wrapper {
+  width:1000px;
+  overflow:visible;
+}
+pre#codesample-block {
+  float:left;
+  overflow:visible;
+  background:transparent;
+  border:none;
+}
+pre#codesample-block .code-line:hover {
+  background:#e7e7e7;
+}
+pre#codesample-line-numbers {
+  float:left;
+  width:2em;
+  background:transparent;
+  border:none;
+  border-right:1px solid #ccc;
+  padding-left:0;
+  font-family:monospace;
+  text-align:right;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  user-select: none;
+}
+pre#codesample-line-numbers a {
+  color:#999;
+}
+pre#codesample-line-numbers.hidden {
+  display:none;
+}
+pre#codesample-block span.code-line {
+  width:100%;
+  display:inline-block;
+}
+
 .structure-dir {
 background-image:url(../../assets/images/folder.png);
 background-repeat:no-repeat;

diff --git a/tools/droiddoc/templates-sdk/assets/js/docs.js b/tools/droiddoc/templates-sdk/assets/js/docs.js
index 2e0a672..4b7b47a 100644 (file)
--- a/tools/droiddoc/templates-sdk/assets/js/docs.js
+++ b/tools/droiddoc/templates-sdk/assets/js/docs.js
@@ -663,10 +663,10 @@ if ((agent.indexOf("mobile") != -1) ||      // android, iphone, ipod
 }
 
 
-addLoadEvent( function() {
+$(document).ready(function() {
   $("pre:not(.no-pretty-print)").addClass("prettyprint");
   prettyPrint();
-} );
+});
 
 
 
@@ -2861,3 +2861,62 @@ var control = mac ? e.metaKey && !e.ctrlKey : e.ctrlKey; // get ctrl key
     ensureAllInheritedExpanded();
   }
 });
+
+
+
+
+
+
+/* On-demand functions */
+
+/** Move sample code line numbers out of PRE block and into non-copyable column */
+function initCodeLineNumbers() {
+  var numbers = $("#codesample-block a.number");
+  if (numbers.length) {
+    $("#codesample-line-numbers").removeClass("hidden").append(numbers);
+  }
+
+  $(document).ready(function() {
+    // select entire line when clicked
+    $("span.code-line").click(function() {
+      if (!shifted) {
+        selectText(this);
+      }
+    });
+    // invoke line link on double click
+    $(".code-line").dblclick(function() {
+      document.location.hash = $(this).attr('id');
+    });
+    // highlight the line when hovering on the number
+    $("#codesample-line-numbers a.number").mouseover(function() {
+      var id = $(this).attr('href');
+      $(id).css('background','#e7e7e7');
+    });
+    $("#codesample-line-numbers a.number").mouseout(function() {
+      var id = $(this).attr('href');
+      $(id).css('background','none');
+    });
+  });
+}
+
+// create SHIFT key binder to avoid the selectText method when selecting multiple lines
+var shifted = false;
+$(document).bind('keyup keydown', function(e){shifted = e.shiftKey; return true;} );
+
+// courtesy of jasonedelman.com
+function selectText(element) {
+    var doc = document
+        , range, selection
+    ;
+    if (doc.body.createTextRange) { //ms
+        range = doc.body.createTextRange();
+        range.moveToElementText(element);
+        range.select();
+    } else if (window.getSelection) { //all others
+        selection = window.getSelection();        
+        range = doc.createRange();
+        range.selectNodeContents(element);
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }
+}
\ No newline at end of file

diff --git a/tools/droiddoc/templates-sdk/sample.cs b/tools/droiddoc/templates-sdk/sample.cs
index 763ba3f..a150c15 100644 (file)
--- a/tools/droiddoc/templates-sdk/sample.cs
+++ b/tools/droiddoc/templates-sdk/sample.cs
@@ -94,7 +94,7 @@
       </div>
     <?cs else ?>
       <?cs if:tab1 ?><div id="title-tabs-wrapper"><?cs /if ?>
-        <h1 itemprop="name" <?cs if:tab1 ?>class="with-title-tabs"<?cs /if ?>>"<?cs var:page.title ?>"</h1><?cs
+        <h1 itemprop="name" <?cs if:tab1 ?>class="with-title-tabs"<?cs /if ?>><?cs var:page.title ?></h1><?cs
           if:tab1 ?><ul id="title-tabs">
               <li class="selected"><a href="<?cs var:tab1.link ?>"><?cs var:tab1 ?></a></li>
               <?cs if:tab2 ?>
@@ -118,20 +118,15 @@
 
 <?cs var:summary ?>
 
-<p>The file containing the source code shown below is located in the corresponding directory in <code>&lt;sdk&gt;/samples/android-&lt;version&gt;/...</code></p>
-
 <!-- begin file contents -->
-<div class="sampleEmbed">
-  <code class="prettyprint">
-    <ol class="lineNumbers">
-      <?cs var:fileContents ?>
-    </ol>
-  </code>
+<div id="codesample-wrapper">
+<pre id="codesample-line-numbers" class="no-pretty-print hidden"></pre>
+<pre id="codesample-block"><?cs var:fileContents ?></pre>
 </div>
-
-
 <!-- end file contents -->
-
+<script type="text/javascript">
+  initCodeLineNumbers();
+</script>