remix_example/remix_new_01.html

   1 <html>
   2         <head>
   3 <title>remix</title>
   4                 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5                 <meta  name="robots" content="noindex" /> <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/bin/view/Main/WebRss" />
   6                 <link rel="icon" href="http://en.flossmanuals.net/floss/pub/TWiki/FlossSkin2/fl2.ico" type="image/x-icon" /> <link rel="shortcut icon" href="http://en.flossmanuals.net/floss/pub/TWiki/FlossSkin2/fl2.ico" type="image/x-icon" />
   7
   8
   9 <style type="text/css">
  10 /*margin and padding on body element
  11   can introduce errors in determining
  12   element position and are not recommended;
  13   we turn them off as a foundation for YUI
  14   CSS treatments. */
  15 body {
  16         margin:0;
  17         padding:0;
  18 }
  19 </style>
  20
  21 <link rel="stylesheet" type="text/css" href="js/fonts-min.css" />
  22 <script type="text/javascript" src="js/yahoo-dom-event.js"></script>
  23 <script type="text/javascript" src="js/animation-min.js"></script>
  24 <script type="text/javascript" src="js/dragdrop-min.js"></script>
  25
  26 <style type="text/css">
  27 img {
  28         display:block;
  29 }
  30 * {margin:0}
  31 </style>
  32 <style>
  33
  34 #header
  35 {
  36 position:absolute;
  37 top:23px;
  38 width:100%;
  39 background-image:
  40 url('http://en.flossmanuals.net/floss/pub/TWiki/FlossSkin2/header_bg.gif');
  41 background-position: 600px 0px; /* this places the orange background at
  42 an offset, making sure it doesn't underlap the left side of the gif */
  43 background-repeat: no-repeat;
  44          }
  45          #header_imagemap
  46          {
  47          margin-left: 352px;
  48          border: 0px
  49          }
  50 h1 {
  51 color:#ff7f00;
  52 }
  53 h2 {
  54 color:#ff7f00;
  55 }
  56 h3 {
  57 color:#000000;
  58 }
  59 </style>
  60
  61
  62   <style type="text/css" media="screen">
  63     A {
  64        text-decoration: None;
  65     }
  66
  67     .heder { color: red; background-color: #ff7f00}
  68
  69     .topic { color: black; }
  70
  71     .title { color: black; background-color: #f0f0f0}
  72
  73         div.workarea { padding:10px; float:left }
  74
  75 ul.draglist {
  76     position: relative;
  77     width: 200px;
  78     height:240px;
  79     background: #f7f7f7;
  80     border: 1px solid gray;
  81     list-style: none;
  82     margin:0;
  83     padding:0;
  84 }
  85
  86 ul.draglist li {
  87     margin: 1px;
  88     cursor: move;
  89     zoom: 1;
  90 }
  91
  92 ul.draglist_alt {
  93     position: relative;
  94     width: 200px;
  95     list-style: none;
  96     margin:0;
  97     padding:0;
  98     /*
  99        The bottom padding provides the cushion that makes the empty
 100        list targetable.  Alternatively, we could leave the padding
 101        off by default, adding it when we detect that the list is empty.
 102     */
 103     padding-bottom:20px;
 104 }
 105
 106 ul.draglist_alt li {
 107     margin: 1px;
 108     cursor: move;
 109 }
 110
 111
 112 li.list1 {
 113     background-color: #D1E6EC;
 114     border:1px solid #7EA6B2;
 115 }
 116
 117 li.list2 {
 118     background-color: #D8D4E2;
 119     border:1px solid #6B4C86;
 120 }
 121
 122 #user_actions { float: right; }
 123
 124   </style>
 125
 126         </head>
 127 <body  onload="init()" background="http://en.flossmanuals.net/floss/pub/TWiki/FlossSkin2/background.gif" style="margin:0;color:#000000;text-decoration:none;">
 128 <div id="header"><img id="header_imagemap" width="465" height="95" alt="FlossManuals menu" src='http://en.flossmanuals.net/floss/pub/TWiki/FlossSkin2/top_remix.gif' border=0 usemap='#map'></div>
 129 <map name="map">
 130 <!-- #$-:Image Map file created by GIMP Imagemap Plugin -->
 131 <!-- #$-:GIMP Imagemap Plugin by Maurits Rijk -->
 132 <!-- #$-:Please do not edit lines starting with "#$" -->
 133 <!-- #$VERSION:2.0 -->
 134 <!-- #$AUTHOR:reset -->
 135 <area shape="rect" coords="90,57,152,84" href="/read" />
 136 <area shape="rect" coords="159,57,219,84" href="/write" />
 137 <area shape="rect" coords="226,58,287,84" href="/remix" />
 138 <area shape="rect" coords="293,58,353,84" href="/about" />
 139 <area shape="rect" coords="401,63,424,79" href="http://en.flossmanuals.net/read" />
 140 <area shape="rect" coords="427,63,448,79" href="http://nl.flossmanuals.net/read" />
 141 <area shape="rect" coords="398,38,424,59" href="http://fa.flossmanuals.net" />
 142 </map>
 143 </div>
 144 <div style="position:absolute;left:20px;top:140px;">
 145 <img src="http://en.flossmanuals.net/floss/pub/TWiki/FlossSkin2/remixarrow.gif" border=0>
 146 <br>
 147 <img src="http://en.flossmanuals.net/floss/pub/TWiki/FlossSkin2/remix_text.gif" border=0>
 148 </div>
 149                 <div style="position:absolute;left:270px;top:130px;">
 150                 <table  cellpadding="0" cellspacing="0" summary="" style="table-layout:fixed; width:730px; border: 5px solid #666666;padding-right: 0px; padding-left: 0px; padding-bottom: 0px; padding-top: 0px; margin-left: 10px; margin-top: 10px; background:#FFF7F0;">
 151                         <tr>
 152                         <td width=100%>
 153                         <div class="ds-contentcontainer">
 154                         <div style="margin-left:1.2em;">
 155                         <br>
 156  <img src="http://en.flossmanuals.net/floss/pub/TWiki/FlossSkin2/text_remix.gif">
 157                         <br>
 158                         <br>
 159                         <p>
 160                         <font color="#666666">You can remix your own manuals. Select a manual (or manuals) in Step one with the drop down menu and drag chapters to the box on the right. Choose an output format (html/pdf) in step two and tweak the style. In step three you can export the remix and also use the (beta) ajax provided to put a live manual in your web page.</font>                        </p>
 161                         <br>
 162 <p />
 163 <!-- HEAD -->
 164 <div id="step1" style="border:1px solid #ff7f00;float: left;padding-left: 20px; padding-right: 20px; background-color: white; margin-right: 20px;color:black;">
 165 <a href="javascript:void(0)" onClick="setTab(1)"><b><font color=black>STEP 1. REMIX<?font></b></a>
 166 </div>
 167
 168 <div id="step2" style="border:1px solid #ff7f00;float: left; padding-left: 20px; padding-right: 20px; background-color: #ff7f00; margin-right: 20px">
 169 <a href="javascript:void(0)" onClick="setTab(2)"><b><font color=black>STEP 2. STYLE</font></b></a>
 170 </div>
 171
 172 <div id="step3" style="border:1px solid #ff7f00;float: left; padding-left: 20px; padding-right: 20px; background-color: #ff7f00;">
 173 <a href="javascript:void(0)" onClick="setTab(3)"><b><font color=black>STEP 3. EXPORT</font></b></a>
 174 </div>
 175
 176 <div style="margin-bottom: 20px; clear: both"/>
 177 <!-- /HEAD -->
 178
 179 <!-- start of table -->
 180 <div id="block1">
 181 <table border="0" style="border: 0px;">
 182
 183
 184  <tr>
 185   <td valign="top">
 186
 187   <div class="workarea">
 188   <h3>List 2</h3>
 189   <ul id="ul2" class="draglist">
 190     <li class="list1" id="li1_1">list 1, item 1</li>
 191     <li class="list1" id="li1_2">list 1, item 2</li>
 192     <li class="list1" id="li1_3">list 1, item 3</li>
 193   </ul>
 194 </div>
 195
 196 <div class="workarea">
 197   <h3>List 2</h3>
 198   <ul id="ul2" class="draglist">
 199     <li class="list2" id="li2_1">list 2, item 1</li>
 200     <li class="list2" id="li2_2">list 2, item 2</li>
 201     <li class="list2" id="li2_3">list 2, item 3</li>
 202   </ul>
 203 </div>
 204
 205   </td>
 206
 207
 208
 209  </tr>
 210 </table>
 211 </div>
 212
 213
 214
 215                         </div>
 216                         </div>
 217                         </td>
 218                         </tr>
 219                 </table>
 220                 </div>
 221
 222         <script type="text/javascript">
 223
 224 (function() {
 225
 226 var Dom = YAHOO.util.Dom;
 227 var Event = YAHOO.util.Event;
 228 var DDM = YAHOO.util.DragDropMgr;
 229
 230 //////////////////////////////////////////////////////////////////////////////
 231 // example app
 232 //////////////////////////////////////////////////////////////////////////////
 233 YAHOO.example.DDApp = {
 234     init: function() {
 235
 236         var rows=3,cols=2,i,j;
 237         for (i=1;i<cols+1;i=i+1) {
 238             new YAHOO.util.DDTarget("ul"+i);
 239         }
 240
 241         for (i=1;i<cols+1;i=i+1) {
 242             for (j=1;j<rows+1;j=j+1) {
 243                 new YAHOO.example.DDList("li" + i + "_" + j);
 244             }
 245         }
 246
 247         Event.on("showButton", "click", this.showOrder);
 248         Event.on("switchButton", "click", this.switchStyles);
 249     },
 250
 251     showOrder: function() {
 252         var parseList = function(ul, title) {
 253             var items = ul.getElementsByTagName("li");
 254             var out = title + ": ";
 255             for (i=0;i<items.length;i=i+1) {
 256                 out += items[i].id + " ";
 257             }
 258             return out;
 259         };
 260
 261         var ul1=Dom.get("ul1"), ul2=Dom.get("ul2");
 262         alert(parseList(ul1, "List 1") + "\n" + parseList(ul2, "List 2"));
 263
 264     },
 265
 266     switchStyles: function() {
 267         Dom.get("ul1").className = "draglist_alt";
 268         Dom.get("ul2").className = "draglist_alt";
 269     }
 270 };
 271
 272 //////////////////////////////////////////////////////////////////////////////
 273 // custom drag and drop implementation
 274 //////////////////////////////////////////////////////////////////////////////
 275
 276 YAHOO.example.DDList = function(id, sGroup, config) {
 277
 278     YAHOO.example.DDList.superclass.constructor.call(this, id, sGroup, config);
 279
 280     this.logger = this.logger || YAHOO;
 281     var el = this.getDragEl();
 282     Dom.setStyle(el, "opacity", 0.67); // The proxy is slightly transparent
 283
 284     this.goingUp = false;
 285     this.lastY = 0;
 286 };
 287
 288 YAHOO.extend(YAHOO.example.DDList, YAHOO.util.DDProxy, {
 289
 290     startDrag: function(x, y) {
 291         this.logger.log(this.id + " startDrag");
 292
 293         // make the proxy look like the source element
 294         var dragEl = this.getDragEl();
 295         var clickEl = this.getEl();
 296         Dom.setStyle(clickEl, "visibility", "hidden");
 297
 298         dragEl.innerHTML = clickEl.innerHTML;
 299
 300         Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
 301         Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
 302         Dom.setStyle(dragEl, "border", "2px solid gray");
 303     },
 304
 305     endDrag: function(e) {
 306
 307         var srcEl = this.getEl();
 308         var proxy = this.getDragEl();
 309
 310         // Show the proxy element and animate it to the src element's location
 311         Dom.setStyle(proxy, "visibility", "");
 312         var a = new YAHOO.util.Motion(
 313             proxy, {
 314                 points: {
 315                     to: Dom.getXY(srcEl)
 316                 }
 317             },
 318             0.2,
 319             YAHOO.util.Easing.easeOut
 320         )
 321         var proxyid = proxy.id;
 322         var thisid = this.id;
 323
 324         // Hide the proxy and show the source element when finished with the animation
 325         a.onComplete.subscribe(function() {
 326                 Dom.setStyle(proxyid, "visibility", "hidden");
 327                 Dom.setStyle(thisid, "visibility", "");
 328             });
 329         a.animate();
 330     },
 331
 332     onDragDrop: function(e, id) {
 333
 334         // If there is one drop interaction, the li was dropped either on the list,
 335         // or it was dropped on the current location of the source element.
 336         if (DDM.interactionInfo.drop.length === 1) {
 337
 338             // The position of the cursor at the time of the drop (YAHOO.util.Point)
 339             var pt = DDM.interactionInfo.point;
 340
 341             // The region occupied by the source element at the time of the drop
 342             var region = DDM.interactionInfo.sourceRegion;
 343
 344             // Check to see if we are over the source element's location.  We will
 345             // append to the bottom of the list once we are sure it was a drop in
 346             // the negative space (the area of the list without any list items)
 347             if (!region.intersect(pt)) {
 348                 var destEl = Dom.get(id);
 349                 var destDD = DDM.getDDById(id);
 350                 destEl.appendChild(this.getEl());
 351                 destDD.isEmpty = false;
 352                 DDM.refreshCache();
 353             }
 354
 355         }
 356     },
 357
 358     onDrag: function(e) {
 359
 360         // Keep track of the direction of the drag for use during onDragOver
 361         var y = Event.getPageY(e);
 362
 363         if (y < this.lastY) {
 364             this.goingUp = true;
 365         } else if (y > this.lastY) {
 366             this.goingUp = false;
 367         }
 368
 369         this.lastY = y;
 370     },
 371
 372     onDragOver: function(e, id) {
 373
 374         var srcEl = this.getEl();
 375         var destEl = Dom.get(id);
 376
 377         // We are only concerned with list items, we ignore the dragover
 378         // notifications for the list.
 379         if (destEl.nodeName.toLowerCase() == "li") {
 380             var orig_p = srcEl.parentNode;
 381             var p = destEl.parentNode;
 382
 383             if (this.goingUp) {
 384                 p.insertBefore(srcEl, destEl); // insert above
 385             } else {
 386                 p.insertBefore(srcEl, destEl.nextSibling); // insert below
 387             }
 388
 389             DDM.refreshCache();
 390         }
 391     }
 392 });
 393
 394 Event.onDOMReady(YAHOO.example.DDApp.init, YAHOO.example.DDApp, true);
 395
 396 })();
 397
 398
 399 </script>
 400
 401         </body>
 402 </html>