--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/graphics/graphics-path-tool-example.html Tue Jul 16 14:29:46 2013 +0200
@@ -0,0 +1,145 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+ <head>
+ <title>Graphics Path Tool</title>
+
+ <style>
+ </style>
+
+ <link rel="stylesheet" href="../../build/cssreset/cssreset-min.css" type="text/css" charset="utf-8">
+ <script src="../../build/yui/yui-min.js"></script>
+
+ </head>
+
+ <body class="yui3-skin-sam">
+ <style>
+html {
+ background-color:#000;
+}
+body{
+ font-family:verdana;
+ font-size:78%;
+}
+#mygraphiccontainer {
+ position:absolute;
+ top:100px;
+ left:100px;
+ width:1000px;
+ height:480px;
+ background-color:#333;
+}
+#pencil {
+ position:absolute;
+ top:200px;
+ left:200px;
+ z-index:10;
+ cursor:pointer;
+}
+.control-point{
+ border:solid 1px #fff;
+ position:absolute;
+ top:0;
+ left:0;
+ z-index:11;
+ color:#fff;
+ visibility:hidden;
+ cursor:pointer;
+}
+.control-point:hover{
+ border:solid 1px #f00;
+}
+.control-point .drag-disc{
+ position:absolute;
+ top:-10px;
+ left:-10px;
+ width:20px;
+ height:20px;
+ background-color:#fff;
+ -moz-border-radius:10px;
+ -webkit-border-radius:10px;
+ border-radius:10px;
+ filter:alpha(opacity=10);
+ opacity:0.1;
+}
+#pencil .pencil-img-container{
+ position:absolute;
+ top:-47px;
+ left:0px;
+ height:47px;
+ width:46px;
+ background-image:url(../assets/graphics/img/icon_pencil.png);
+ opacity:0.8;
+ filter:alpha(opacity=40);
+}
+#pencil .pencil-img-container-moving{
+ background-position:-46px, 0;
+}
+.pencil-xy{
+ margin: 0.3em;
+ width: 5em;
+ color: #ccc;
+}
+.obj-name{
+ width:100px;
+
+}
+.code-div{
+ position:absolute;
+ top: 10px;
+ right: 5px;
+ text-align:left;
+}
+#txt-code{
+ height:200px;
+ width:279px;
+}
+.code-div label{
+ color:#ccc;
+}
+.tips{
+ margin:1em;
+ color:#777;
+}
+.tips li,
+.code-div li {
+ margin-bottom: 0.3em;
+}
+</style>
+
+<ul class="tips">
+ <li>lineTo - Drag Pencil</li>
+ <li>moveTo - Shift + Drag</li>
+ <li>curveTo - Alt + Drag</li>
+ <li>New Path Object - Change 'Graphic Object Name', then click New button</li>
+</ul>
+<div id="mygraphiccontainer">
+ <div id="pencil">
+ <div class="pencil-img-container"></div>
+ </div>
+ <div class="control-point cp1"><div class="drag-disc"></div></div>
+ <div class="control-point cp2"><div class="drag-disc"></div></div>
+</div>
+<div class="code-div">
+ <ul>
+ <li>
+ <label>Graphic Object Name</label>
+ <input class="obj-name" type="text" value="bob"/>
+ <input type="button" value="New"/>
+ </li>
+ <li>
+ <label>Copy code from here</label>
+ </li>
+ <li>
+ <textarea id="txt-code" rows="8" cols="5000"></textarea>
+ </li>
+ <li>
+ <label>Pencil X,Y: </label> <span class="pencil-xy">200,200</span>
+ </li>
+ </ul>
+</div>
+
+
+
+ </body>
+ <script src="../assets/graphics/js/path-tool.js"></script>
+</html>
\ No newline at end of file