workaround for #2531184. Changed Graphics path utility from example t…

…o a section on the page with a header
tripp · Dec 2, 2011 · 90bd96b · 90bd96b
1 parent 2e7280e
commit 90bd96b
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 11 deletions.
diff --git a/src/graphics/docs/component.json b/src/graphics/docs/component.json
@@ -69,20 +69,14 @@
 			"modules" : ["graphics"],
 			"tags" : ["graphics"],
             		"hideTableOfContents": true
-		},
-		{
-			"name" : "graphics-pathutility",
-			"displayName" : "Path Drawing Utility",
-			"description" : "A helper utility for interactively composing path code.",
-			"modules" : ["graphics"],
-			"tags" : ["graphics, utility, drawing"],
-            		"hideTableOfContents": true
 		}
 	],	
     "pages": {
         "graphics-pathutility-example": {
-            "displayName": "Graphics: Path Drawing Utility",
             "layout"     : "graphics-pathutility-example"
+        },
+        "graphics-pathutility": {
+            "displayName": "Graphics: Path Drawing Utility"
         }
     }	
 }
diff --git a/src/graphics/docs/graphics-pathutility.mustache b/src/graphics/docs/graphics-pathutility.mustache
@@ -8,7 +8,7 @@
 
 <div class="example newwindow">
     <a href="graphics-pathutility-example.html" target="_blank" class="button">
-        View Example in New Window
+        Run Utility in New Window
     </a>
 </div>
 

diff --git a/src/graphics/docs/graphics-violin.mustache b/src/graphics/docs/graphics-violin.mustache
@@ -33,6 +33,9 @@ The Graphics code to render this example is 18KB.
 {{>graphics-violin-source}}
 </div>
 
+<h2>Graphics Utility for Paths</h2>
+{{>graphics-pathutility-promotion}}
+
 <h2>HTML</h2>
 ```
 <div id="#outerframe">

diff --git a/src/graphics/docs/index.mustache b/src/graphics/docs/index.mustache
@@ -105,6 +105,8 @@ var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"}),
         y: 100
     });
 ```
+<h3>Graphics Utility for Paths</h3>
+{{>graphics-pathutility-promotion}}
 
 <h3 id="aboutgraphic">Working with the Graphic Class</h3>
 <p>The `Graphics` module uses different technologies based on browser capabilities. The `Graphics` module normalizes these different technologies with a consistent API. Ideally, you should not
@@ -477,7 +479,6 @@ a `Path` instance, its drawing methods need to be leveraged. These drawing metho
                <p><strong>Note: </strong>This property currently has no effect on Android or IE 6 - 8.</p>
            </dd>
         </dl>
-
 <h2 id="issues">Known Issues</h2>
 <ul class="spaced">
     <li>

diff --git a/src/graphics/docs/partials/graphics-pathutility-promotion.mustache b/src/graphics/docs/partials/graphics-pathutility-promotion.mustache
@@ -0,0 +1,22 @@
+<!-- doesn't contain the header because it may be h3 or h2 -->
+    <p>
+        <div style="float:right; margin: 6px 0 8px 8px;">
+            <a href="graphics-pathutility.html">
+                <img style="border: 1px solid #bfbfbf; height:149px; width:395px;" alt="Screen capture of Graphics path utility" src="../assets/graphics/img/pathutility-capture.png">
+
+            </a>
+            <div>
+            <a href="graphics-pathutility.html" class="button">Read More</a>
+            </div>
+        </div>
+        Try this simple <a href="graphics-pathutility.html">utility</a> that helps you by generating code while you interactively
+        draw graphic paths. 
+    </p>
+    <p>
+        As you drag the pencil icon, corresponding graphics code is auto-generated. 
+        This code can be copied and pasted into a graphics instance to reproduce 
+        the paths you created with the pencil.
+    </p>
+    <p>    
+        The <a href="graphics-violin.html">violin example</a> was created with this utility.
+    </p>