Changes to PDoc template.

templates/html/assets/javascripts/application.js

@@ -4,7 +4,7 @@ if (typeof PDoc === "undefined") window.PDoc = {};
 (function() {  
   var PREVIOUS_HASH = null;
   
-  document.observe("dom:loaded", function() {    
+  Event.observe(window, "load", function() {    
     var hash = window.location.hash;
     if (hash && hash !== PREVIOUS_HASH) {
       document.fire("hash:changed",
@@ -258,25 +258,124 @@ Event.observe(window, 'load', function() {
   function menuButtonMouseOut(event) {
     var menuButton = $('api_menu_button');
     var menu = $('api_menu');
-    var target = event.element(), related = event.relatedTarget;
+    var target = event.element(), related = event.relatedTarget || event.toElement;
     
-    if (related === menu || related.descendantOf(menu)) return;
+    if (related && (related === menu || related.descendantOf(menu))) return;
     menu.hide();
   }
   
   function menuMouseOut(event) {
-    var menu = $('api_menu'), related = event.relatedTarget;
+    var menu = $('api_menu'), related = event.relatedTarget || event.toElement;
     if (related && !related.descendantOf(menu)) {
       arguments.callee.timer = Element.hide.delay(0.5, menu);
     } else {
-      window.clearTimeout(arguments.callee.timer)
+      window.clearTimeout(arguments.callee.timer);
     }
   }
   
+  function menuItemMouseOver(event) {
+    var element = event.element();    
+    if (element.tagName.toLowerCase() === 'a') {
+      element.addClassName('highlighted');
+    }
+  }
+  
+  function menuItemMouseOut(event) {
+    var element = event.element();    
+    if (element.tagName.toLowerCase() === 'a') {
+      element.removeClassName('highlighted');
+    }
+  }
+  
+  var MENU_ITEMS;
+  
   document.observe('dom:loaded', function() {
-    $('api_menu_button').observe('mouseover', menuButtonMouseOver);
-    $('api_menu_button').observe('mouseout',  menuButtonMouseOut);
+    MENU_ITEMS = $$('.api-box .menu-item a');
     
-    $('api_menu').observe('mouseout', menuMouseOut);
+    $('api_menu_button').observe('mouseenter', menuButtonMouseOver);
+    $('api_menu_button').observe('mouseleave', menuButtonMouseOut );
+    
+    $('api_menu').observe('mouseleave', menuMouseOut);
+    
+    if (Prototype.Browser.IE) {
+      $('api_menu').observe('mouseover', menuItemMouseOver);
+      $('api_menu').observe('mouseout',  menuItemMouseOut);
+    }
   });
-})();
+})();
+
+Form.GhostedField = Class.create({
+  initialize: function(element, title, options) {
+    this.element = $(element);
+    this.title = title;
+    
+    this.isGhosted = true;
+    
+    if (options.cloak) {
+      // Wrap the native getValue function so that it never returns the
+      // ghosted value. This is optional because it presumes the ghosted
+      // value isn't valid input for the field.
+      this.element.getValue = this.element.getValue.wrap(this.wrappedGetValue.bind(this));      
+    }    
+    
+    this.addObservers();
+    this.onBlur();
+  },
+  
+  wrappedGetValue: function($proceed) {
+    var value = $proceed();
+    return value === this.title ? "" : value;
+  },
+  
+  addObservers: function() {
+    this.element.observe('focus', this.onFocus.bind(this));
+    this.element.observe('blur',  this.onBlur.bind(this));
+    
+    var form = this.element.up('form');
+    if (form) {
+      form.observe('submit', this.onSubmit.bind(this));
+    }
+    
+    // Firefox's bfcache means that form fields need to be re-initialized
+    // when you hit the "back" button to return to the page.
+    if (Prototype.Browser.Gecko) {
+      window.addEventListener('pageshow', this.onBlur.bind(this), false);
+    }
+  },
+  
+  onFocus: function() {
+    if (this.isGhosted) {
+      this.element.setValue('');
+      this.setGhosted(false);
+    }
+  },
+  
+  onBlur: function() {
+    var value = this.element.getValue();
+    if (value.blank() || value == this.title) {
+      this.setGhosted(true);
+    } else {
+      this.setGhosted(false);
+    }
+  },
+  
+  setGhosted: function(isGhosted) {
+    this.isGhosted = isGhosted;
+    this.element[isGhosted ? 'addClassName' : 'removeClassName']('ghosted');
+    if (isGhosted) {
+      this.element.setValue(this.title);
+    }    
+  },
+
+  // Hook into the enclosing form's `onsubmit` event so that we clear any
+  // ghosted text before the form is sent.
+  onSubmit: function() {
+    if (this.isGhosted) {
+      this.element.setValue('');
+    }
+  }
+});
+
+document.observe("dom:loaded", function() {
+  new Form.GhostedField($('search'), "Search");
+});

templates/html/assets/stylesheets/api.css

@@ -4,22 +4,15 @@
 
 
 /* tag styles */
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  margin: 0;
-  padding: 0;
-}
-
 pre {
   padding: 0;
 }
 
 code {
   font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", monospace;
-  font-size: 13px;
+  font-size: 12px;
 }
 
-
 /* masthead */
 div#masthead {
   background: url(../images/header-stripe-small.png) repeat-x top left;
@@ -79,6 +72,10 @@ div#footer {
       width: 235px;
       float: left;
     }
+    
+  div.credits {
+    margin-left: 115px;
+  }
 
 
 .page-title span.type {
@@ -152,6 +149,13 @@ ul.method-details-list {
     ul.method-details-list li code {
       font-size: 12px;
     }
+    
+.method-description h4 .method-permalink a {
+  color: #aaa;
+  text-decoration: none;
+  border: 0;
+  font-size: 14px;
+}
 
 ul.argument-list {
   margin-top: -5px;
@@ -162,6 +166,7 @@ ul.argument-list {
   ul.argument-list li {
     list-style-type: disc;
     font-size: 90%;
+    margin-bottom: 0;
   }
   
     ul.argument-list li code {
@@ -207,12 +212,26 @@ ul.section-list {
   background-image: url(../images/constructor.png);
 }
 
-.section-method-list .section-title h3,
-.section-klass_methods .section-title h3,
-.section-instance_methods .section-title h3 {
+.section-method-list .section-title h3 {
   background-image: url(../images/method.png);
 }
 
+.section-klass_methods .section-title h3 {
+  background-image: url(../images/class_method.png);  
+}
+
+.section-klass_properties .section-title h3 {
+  background-image: url(../images/class_property.png);  
+}
+
+.section-instance_methods .section-title h3 {
+  background-image: url(../images/instance_method.png);
+}
+
+.section-instance_properties .section-title h3 {
+  background-image: url(../images/instance_property.png);  
+}
+
 .section-mixins .section-title h3 {
   background-image: url(../images/mixin.png);
 }
@@ -237,6 +256,14 @@ ul.section-list {
   background-image: url(../images/description.png);
 }
 
+.section-subclasses .section-title h3 {
+  background-image: url(../images/subclass.png);
+}
+
+.section-superclass .section-title h3 {
+  background-image: url(../images/superclass.png);
+}
+
 /* search box */
 
 .search-results {
@@ -246,9 +273,16 @@ ul.section-list {
   width: 233px;
   overflow: auto;
   overflow-y: scroll;
+  overflow-x: hidden;
   margin: 7px -11px 0;
   border: 1px solid #999;
+  top: 28px;
 }
+
+  * html .search-results {
+    left: 486px;
+    top: 30px;
+  }
   
     
 /* search result types */
@@ -262,13 +296,15 @@ ul.section-list {
   text-align: left;
   text-decoration: none;
   color: #333;
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid transparent;
+  border-top: 1px solid #fff;
+  border-bottom: 1px solid #fff;
+  white-space: nowrap;
   
 }
 
   .menu-item a:hover,
-  .menu-item.highlighted a {
+  .menu-item a.highlighted,
+  #menu .highlighted a {
     border-top: 1px solid #69f;
     border-bottom: 1px solid #69f;
     background-color: #f0f0ff;      
@@ -293,9 +329,12 @@ ul.section-list {
   background-image: url(../images/constructor.png);  
 }
 
-.menu-item a.class_property,
+.menu-item a.class_property {
+  background-image: url(../images/class_property.png);  
+}
+
 .menu-item a.instance_property {
-  background-image: url(../images/property.png);  
+  background-image: url(../images/instance_property.png);  
 }
 
 .menu-item a.namespace {
@@ -333,6 +372,12 @@ div#menu {
     float: right;
   }
   
+    * html #menu .api-box h2 a,
+    * html #menu .search-box {
+      height: 30px;
+      line-height: 30px;
+    }
+  
   #menu .api-box {
   }
   
@@ -355,11 +400,17 @@ div#menu {
       width: 233px;
       overflow: auto;
       overflow-y: scroll;
+      overflow-x: hidden;
       top: 35px;
       border: 1px solid #999;
       right: 5px;
     }
     
+      * html #menu .api-box .menu-items {
+        right: 10px;
+        top: 37px;
+      }
+    
       #menu .api-box ul,
       #menu .api-box li {
         margin: 0;
@@ -377,7 +428,7 @@ div#menu {
   
     #menu .search-box input {
       width: 150px;
-      padding: 3px 6px;
+      padding: 3px 10px;
       margin-top: 2px;
       border: 1px solid #999;
       border-radius: 10px;
@@ -385,6 +436,11 @@ div#menu {
       -moz-border-radius: 10px;
     }
     
+#menu #search.ghosted {
+  color: #aaa;
+  text-align: left;
+}
+    
 
 /* notes */
 

templates/html/assets/stylesheets/core.css

@@ -47,21 +47,21 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h4 {
-  font-size: 15px;
-  color: #444;
-  margin: 0 0 0.4em;
+  font-size: 17px;
+  color: #555;
+  margin: 1.0em 0 0.6em;
 }
 
 h5 {
-  font-size: 14px;
-  color: #222;
-  margin: 0 0 0.4em;
+  font-size: 15px;
+  color: #2a2a2a;
+  margin: 1.0em 0 0.6em;
 }
 
 h6 {
-  font-size: 13px;
+  font-size: 14px;
   color: #000;
-  margin: 0 0 0.4em;
+  margin: 1.0em 0 0.6em;
 }
 
 a img {
@@ -311,6 +311,7 @@ pre code {
     padding-right: 0;
     float: left;
     text-align: right;
+    overflow: hidden;
   }
 
     .page-content .section .section-title h3 {
@@ -414,3 +415,7 @@ div#masthead h1#logo {
   left: 60px;
 }
 
+div#masthead a {
+  text-decoration: none;
+}
+

templates/html/helpers.rb

@@ -24,6 +24,11 @@ module PDoc
             BlueCloth.new(markdown).to_html
           end
           
+          # Gah, what an ugly hack.
+          def inline_htmlize(markdown)
+            htmlize(markdown).gsub(/^<p>/, '').gsub(/<\/p>$/, '')
+          end
+          
           def javascript_include_tag(*names)
             names.map do |name|
               attributes = {
@@ -115,7 +120,13 @@ module PDoc
         
         module CodeHelper
           def method_synopsis(object)
-            if (object.methodized?)
+            if (object.is_a?(Documentation::Property))
+              return <<-EOS
+                <pre class="syntax"><code class="ebnf">#{ object.signature }</code></pre>
+                EOS
+            end
+            
+            if (object.is_a?(Documentation::InstanceMethod) && object.methodized?)
               return <<-EOS
                 <pre class="syntax"><code class="ebnf">#{ object.signature } -&gt; #{ auto_link(object.returns, false) }
 #{ object.generic_signature } -&gt; #{ auto_link(object.returns, false) }</code></pre>

templates/html/layout.erb

@@ -9,9 +9,8 @@
 	  <%= javascript_include_tag "application", "code_highlighter" %>
 
 	  <%= javascript_include_tag "item_index" %>
-	  
-	  
-	  <%= stylesheet_link_tag "grid", "highlighter", "core", "api" %>
+	  	  
+	  <%= stylesheet_link_tag "core", "api" %>
 	  
 	  <script type="text/javascript">PDoc.pathPrefix = '<%= path_prefix %>';</script>
   </head>
@@ -20,7 +19,9 @@
       
       <div id="masthead">
         <div id="masthead_content">
-          <h1 onclick="with (document.body) className = className ? '' : 'grid'" id="logo"><span class="replaced">Prototype JavaScript framework</span></h1>
+          <a href="http://prototypejs.org">
+            <h1 id="logo"><span class="replaced">Prototype JavaScript framework</span></h1>
+          </a>
         </div> <!-- #masthead_content -->
       </div> <!-- #masthead -->
       

templates/html/namespace.erb

@@ -1,6 +1,6 @@
 <% d = @doc_instance %>
 
-<% @title = "#{d.full_name} (#{d.type})" %>
+<% @title = "#{d.full_name} #{d.type}" %>
 
 <%= include "partials/breadcrumbs", :object => d %>
 
@@ -118,6 +118,20 @@
 
   <div class="section-content">
     <pre id="<%= dom_id(d.constructor) %>" class="syntax"><code><%= d.constructor.ebnf_expressions.join("\n").strip %></code></pre>
+    <% unless d.constructor.arguments.empty? %>
+      <ul class="argument-list">
+        <% d.constructor.arguments.each do |arg| %>
+          <li>
+            <code><%= arg.name %></code>
+            <% unless arg.types.empty? %>
+              (<%= arg.types.map { |t| auto_link_code(t, false) }.join(' | ') %>)
+            <% end %>
+            <%= ' &ndash; ' + inline_htmlize(arg.description) unless arg.description.empty? %>
+          </li>
+        <% end %>
+      </ul> <!-- .argument-list -->
+    <% end %>
+    
 
     <p><%= htmlize(d.constructor.description) %></p>
     

templates/html/partials/short_description.erb

@@ -1,8 +1,12 @@
 <li class="method-description">
-  <h4 id="<%= dom_id(object) %>"><%= object.name %></h4>
+  <h4 id="<%= dom_id(object) %>"><%= object.name %>
+    <span class="method-permalink"><a href="<%= path_to(object) %>">#</a></span></h4>
+
+  <% if object.signature %>
+    <%= method_synopsis(object) %>
+  <% end %>
   
   <% if object.is_a?(Documentation::Method) %>
-    <%= method_synopsis(object) %>
     <% unless object.arguments.empty? %>
       <ul class="argument-list">
         <% object.arguments.each do |arg| %>
@@ -11,7 +15,7 @@
             <% unless arg.types.empty? %>
               (<%= arg.types.map { |t| auto_link_code(t, false) }.join(' | ') %>)
             <% end %>
-            <%= ' &ndash; ' + arg.description unless arg.description.empty? %>
+            <%= ' &ndash; ' + inline_htmlize(arg.description) unless arg.description.empty? %>
           </li>
         <% end %>
       </ul> <!-- .argument-list -->

templates/html/section.erb

@@ -1,4 +1,4 @@
-<% @title = "#{@doc_instance.full_name} section" %>
+<% @title = "#{@doc_instance.full_name}" %>
 <% section = @doc_instance %>
 
 <%= include "partials/breadcrumbs", :object => section %>