JSFiddle - React, Tailwind, and code Playground

by jonathanwest

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <div class="column" id="column1">
        <widget ng-repeat="widget in widgets | filter:{parent: 'column1'}" widget="widget" />
    </div>
    <div class="column" id="column2">
        <widget ng-repeat="widget in widgets | filter:{parent: 'column2'}" widget="widget" />
    </div>
</div>

CSS

#column1, #column2 {
    width: 45%;
    display: inline-block;
    vertical-align: top;
    min-height: 300px;
}
#column1 {
    background-color: palegreen;
}
#column2 {
    background-color: powderblue;
}
.widget {
    border: 1px solid black;
    margin: 5px;
    padding: 5px;
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.directive('widget', function() {
    return {
        restrict: "E",
        replace: true,
        template: '<div class="widget" ng-switch on="getType()"><div ng-switch-when="search"><search/></div><div ng-switch-when="todo"><todo/></div></div>',
        controller: function($scope) {
            $scope.getType = function() {
                return $scope.widget.type;
            }
        }
    }
});

myApp.directive('search', function() {
    return {
        restrict: "E",
        replace: true,
        template: '<div><p>Search</p><input type="text"/></div>'
    }
});

myApp.directive('todo', function() {
    return {
        restrict: "E",
        replace: true,
        template: '<span>todo directive<span>'
    }
});

function MyCtrl($scope) {
    $scope.widgets = [{"type":"search","parent":"column1"}, 
                      {"type":"todo","parent":"column2"},
                      {"type":"search","parent":"column2"}];
    

    $("#column1, #column2").sortable({
        connectWith: ".column"
    });
}