Blocks Sandbox

by Chase Wilson

HTML

<script src="https://rawgit.com/requirejs/almond/master/almond.js"></script>
<script src="https://agroism.s3.amazonaws.com/Demos/blocks/blocks.min.js"></script>
<div class="menu-wrapper">
    <div class="menu-inner">
        <h2 >Modules</h2>
        <div class="block-draggable" data-module="app/header" draggable="true">
            <h3>Header</h3>
        </div>
        <div class="block-draggable" data-module="app/footer" draggable="true">
            <h3>Footer</h3>
        </div>
    </div>
</div>

CSS

[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

body,html {height: 100%} 

.menu-wrapper {
    background: #eee;
    width: 100px;
    padding: 5px;
    border-radius: 5px;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index:4
}
.menu-wrapper .menu-inner {
    
}
.menu-wrapper h2 {
    padding: 0 5px 5px;
    font: bold 14px/14px helvetica;
}
.menu-wrapper .block-draggable {
    margin: 3px 0 0;
    cursor: move;
} 
.menu-wrapper .block-draggable:first-child {
    margin-top: 0;
}
.menu-wrapper .block-draggable.dragging h3{
  background: #ccc
}
.menu-wrapper .block-draggable h3 {
    padding: 5px;
    font: 14px/14px sans-serif;
    background: #fff;
}

.global-wrapper {
    min-height: 100%;
    position:relative
}
.global-wrapper .global-inner {
    padding-bottom: 100px;
}

.global-wrapper .footer-wrapper {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
header {
  min-height: 50px;
  box-shadow: 0 0 5px rgba(0,0,0,.5);    
}
header.hover {
    border: 2px #999 dashed;
    min-height: 100px;
    border-radius: 5px;
}

footer {
    height: 100px;
    background: #efefef
}
footer.hover {
    border: 2px #999 dashed;
    border-radius: 5px;
}

JavaScript

define('app/header',['blocks/block'], function (Block) {
    return function () {
        return new Block({
            "template":"<h1>Hello there sir, I'm a header</h1>"
        })
    }
})
            
            
define('app/footer',['blocks/block'], function (Block) {
    return function () {
        return new Block({
            "template":"<h1>Goodbye sir, I'm a footer</h1>"
        })
    }
})

// This is the main layout that creates the drop-zones.
// This should be simplified somehow...
define('app/layout',['blocks/block'], function (Block) {
    return function () {
        return new Block({
            "template":"\
                <div class=\"global-wrapper\">\
                <div class=\"global-inner\">\
                    <header bind=\"header\"></header>\
                    <div class=\"footer-wrapper\">\
                        <footer bind=\"footer\"></footer>\
                    </div>\
                </div>\
                </div>",
            "events": {
                "header":{
                    "dragenter":function (e) {
                        e.preventDefault()
                        this.addClass( 'hover' )
                    },
                    "dragleave":function (e, self) {
                        this.removeClass('hover')
                    },
                    "dragover":function (e) {
                        e.preventDefault()
                    },
                    "drop":function (e, self) {
                        if ( draggedEl ) {                            
                            var mod = require(draggedEl.dataset.module)
                            var leMod = new mod()
                            self.setChild('header', new mod)
                            this.removeClass('hover')
                        }
                    }
                },
                "footer":{
                    "dragenter":function (e) {
                        e.preventDefault()
                       ...