JSFiddle - React, Tailwind, and code Playground

by Teppo Jussmäki

HTML

<script src="http://github.com/Mtillmann/mootools-canvas-lib/raw/master/mcl-min.js"></script>
<canvas id="canvas_area" width="500" height="500"></canvas>
<div id="node" class="nodeclass" style="left:200px; top:250px;"><h1 id="ha">Title&nbsp;I</h1><p id="p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus adipiscing ante et mi aliquet non lobortis nisi auctor. Sed erat odio, sodales nec suscipit eget, ...</p></div>
<div id="effect" class="effectclass" style="left:100px; top:80px;"><h1>Title&nbsp;II</h1><p>Testi</p></div>
<p>Drawing on a &lt;canvas&gt with coordinates from &lt;div&gt; elements...

CSS

div.nodeclass {
    border:10px #AA00AA solid;
    background:#FFFFFF;
    width:0px;
    height:0px;
    position:absolute;
    cursor:move border-radius:10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    opacity:0.85;
}

div h1 { 
    font:bold 12px Georgia,serif;
    padding: 2px;
    margin: 2px;
    background-color:white;
    float:left;
    -moz-border-radius: 4px;
}
div p {
   float:left;
   font-size:12px;
   opacity: 0.0;
   margin: 5px;
   min-width:180px;
}

div.effectclass {
    border:7px #22AA22 solid;
    background:#FFFFFF;
    width:0px;
    height:0px;
    position:absolute;
    cursor:move border-radius:7px;
    -moz-border-radius: 7px;
    border-radius: 10px;
    opacity: 0.85;
}

JavaScript

CANVAS.init({
    canvasElement: 'canvas_area',
    enableMouse : true
});

CANVAS.layers.add(new Layer({ id: 'ground' }));
CANVAS.layers.add(new Layer({ id: 'lines'  }));

var node = $('node').set({
    selected: false,
    //content: $('node.p'),
    events:{ dblclick: function(){
        var content = this.getElementsByTagName("p");
        var title = this.getElementsByTagName("h1");
        if(!this.selected){
            this.morph({'height': '200px','width': '200px', 'z-index': '1'});
            content[0].morph({'opacity': '1.0'});
            title[0].morph({'font-size': '24px'});
        } else if(this.selected) {
            content[0].morph({'opacity': '0.0'});
            this.morph({'height': '0px','width': '0px', 'z-index': '0'});
            title[0].morph({'font-size': '12px'});
        }
        this.selected = !this.selected;
    }}
});
//new Drag(node);
new Drag.Move(node, {handle: 'ha'});

var eff = $('effect').set({
    selected: false,
    //content: $('node.p'),
    events:{ dblclick: function(){
        var content = this.getElementsByTagName("p");
        var title = this.getElementsByTagName("h1");
        if(!this.selected){
            this.morph({'height': '200px','width': '200px', 'z-index': '1'});
            content[0].morph({'opacity': '1.0'});
            title[0].morph({'font-size': '24px'});
        } else if(this.selected) {
            content[0].morph({'opacity': '0.0'});
            this.morph({'height': '0px','width': '0px', 'z-index': '0'});
            title[0].morph({'font-size': '12px'});
        }
        this.selected = !this.selected;
    }}
});

new Drag(eff);



//node.addEvents({
//   dblclick: function(){
//        this.morph({'height': '200px','width': '200px'});
        //this.selected = TRUE;
//    }});

//var myEffect = new Fx.Morph(node, {
//    duration: 'short',
//    transition: Fx.Transitions.Sine.easeOut,
 //   events: { onDraw: function() {
 //       node.height = 200;
 //       node.width = 200;
...