New Framework Angular

by Greggg

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-sanitize.js"></script>
<script src="//cdn.rawgit.com/cauburtin/Sortable/dev/Sortable.js"></script>
<body ng-controller="main">
    <div class="admin-sidebar"> 
        <div ng-sortable="{handle: '.tile_handle',group: {name:'stuff',pull:'clone',put:false}, animation: 100}">
        <element ng-repeat="e in clones" e="e"></element>
        </div>
    </div>
    <div class="page">
        <element e="items"></element>
        <pre>{{items | json}}</pre>
    </div>
    
    <script type="text/ng-template" id="homepage">
        <div class="tile_handle">{{e.template}} template <a ng-click="edit()" class="edit">E</a></div>
        <modal></modal>
		<span ng-bind-html="e.html"></span>
        <div ng-sortable="{handle: '.tile_handle',group: 'stuff', animation: 100}">
        <element ng-repeat="e in filter(e.items,'main')" e="e"></element>
        </div>
        <div ng-sortable="{handle: '.tile_handle',group: 'stuff', animation: 100}">
        <element ng-repeat="e in filter(e.items,'footer')" e="e"></element>
        </div>
	</script>
    
    <script type="text/ng-template" id="simple">
        <div class="tile_handle">{{e.template}} template <a ng-click="edit()" class="edit">E</a></div>
        <modal></modal>
		<span ng-bind-html="e.html"></span>
        <div ng-sortable="{handle: '.tile_handle',group: 'stuff', animation: 100}">
		<element ng-repeat="e in e.items" e="e"></element>
        </div>
	</script>
    <script type="text/ng-template" id="column">
        <div class="tile_handle">{{e.template}} template <a ng-click="edit()" class="edit">E</a></div>
        <modal></modal>
		<span ng-bind-html="e.html |...

CSS

.edit {
    cursor: pointer;
}
element, label {
    display: block;
}
element {
   padding:1em
}
html, body {
    height: 100%
}
/*.footer {
    position: absolute;
    bottom: 0;
}*/
.tile_handle {
	background: gray;
	cursor: move;
}

.sortable-ghost {
  opacity: .6;
}

.admin-sidebar {
    float:left;
    width:100px;
}
.page {
    margin-left: 100px
}

JavaScript

var expando = 'Sortable:ng-sortable';
var cloneId=0;
angular.module('app', ['ngSanitize'])
.constant('ngSortableConfig', {
    onEnd: function(e) {
        console.log('default onEnd', e);
    },
    onStart: function(e) {
        console.log('default onStart', e);
        if (e.models[e.oldIndex].id.startsWith('clone'))
            e.models[e.oldIndex].id+=cloneId++;
    }
})
.controller('main', function($scope){ 
    $scope.clones = [
        {id:'clone',html:'.',template:'column',items:[]},
        {id:'clone',html:'ok',template:'simple',items:[]},
        {id:'clone',template:'text',html:'hello'}
    ];
    $scope.items = {
        id: '1_home_page',
        style: {'border-style': 'solid'},
        template: 'simple', // test with 'homepage' footer isn't draggable above main
        items: [{
            id: '2',
            type: 'main',
            style: {'background': 'green'},
            template: 'column',
            items: [{
                id: '3',
                html: '<span style="color: yellow;">Child ID3</span>'
            }, {
                id: '4',
                html: '<span style="color: yellow;">Child ID4</span>'
            }, {
                id: '5',
                html: '<span style="color: yellow;">Child ID5</span>'
            }]
        }, {
            id: '6',
            type: 'main',
            style: {'background': 'red'},
            template: 'column',
            items: [{
                id: '7',
                html: '<span style="color: yellow;">Child ID7</span>'
            }, {
                id: '8',
                html: '<span style="color: yellow;">Child ID8</span>'
            }, {
                id: '9',
                html: '<span style="color: yellow;">Child ID9</span>'
            }]
        }, {
            id: '10',
            type: 'footer',
            class: 'footer',
            html: 'footer'
        }]
    };
})
.filter('trustAsHtml', function($sce) { return $sce.trustAsHtml;...