Advanced Demo to demonstrate new features

Author: marceljuenemann

demo/advanced/advanced-frame.html

@@ -0,0 +1,16 @@
+<h1>Demo: Advanced Features</h1>
+
+<div class="alert alert-success">
+    TODO
+</div>
+
+<div class="advancedDemo row">
+    <div ng-repeat="containers in model" class="col-md-4">
+        <div class="dropzone box box-yellow" ng-include="'advanced/advanced.html'"></div>
+    </div>
+</div>
+
+<div view-source="advanced"></div>
+
+<h2>Generated Model</h2>
+<pre>{{modelAsJson}}</pre>

demo/advanced/advanced.css

@@ -0,0 +1,75 @@
+/***************************** Required styles *****************************/
+
+/**
+ * For the correct positioning of the placeholder element, the dnd-list and
+ * it's children must have position: relative
+ */
+.advancedDemo ul[dnd-list],
+.advancedDemo ul[dnd-list] > li {
+	position: relative;
+}
+
+/***************************** Dropzone Styling *****************************/
+
+/**
+ * The dnd-list should always have a min-height,
+ * otherwise you can't drop to it once it's empty
+ */
+.advancedDemo .dropzone ul[dnd-list] {
+    min-height: 42px;
+    margin: 0px;
+    padding-left: 0px;
+}
+
+/**
+ * The dnd-lists's child elements currently MUST have
+ * position: relative. Otherwise we can not determine
+ * whether the mouse pointer is in the upper or lower
+ * half of the element we are dragging over. In other
+ * browsers we can use event.offsetY for this.
+ */
+.advancedDemo .dropzone li {
+    background-color: #fff;
+    border: 1px solid #ddd;
+    display: block;
+    padding: 0px;
+}
+
+/**
+ * Reduce opacity of elements during the drag operation. This allows the user
+ * to see where he is dropping his element, even if the element is huge. The
+ * .dndDragging class is automatically set during the drag operation.
+ */
+.advancedDemo .dropzone .dndDragging {
+    opacity: 0.7;
+}
+
+/**
+ * The dndDraggingSource class will be applied to the source element of a drag
+ * operation. It makes sense to hide it to give the user the feeling that he's
+ * actually moving it. Note that the source element has also .dndDragging class.
+ */
+.advancedDemo .dropzone .dndDraggingSource {
+    display: none;
+}
+
+/**
+ * An element with .dndPlaceholder class will be added as child of the dnd-list
+ * while the user is dragging over it.
+ */
+.advancedDemo .dropzone .dndPlaceholder {
+    background-color: #ddd;
+    min-height: 42px;
+    display: block;
+    position: relative;
+}
+
+/***************************** Element type specific styles *****************************/
+
+.advancedDemo .dropzone .item {
+    padding: 10px 15px;
+}
+
+.advancedDemo .dropzone .container-element {
+    margin: 10px;
+}

demo/advanced/advanced.html

@@ -0,0 +1,20 @@
+<h3>Dropzone {{$index + 1}}</h3>
+<ul dnd-list="containers" dnd-allowed-types="['containerType']">
+    <li ng-repeat="items in containers"
+        dnd-draggable="items"
+        dnd-type="'containerType'"
+        dnd-moved="containers.splice($index, 1)">
+        <div class="container-element box box-blue">
+            <h3>Container</h3>
+            <ul dnd-list="items" dnd-allowed-types="['itemType']">
+                <li ng-repeat="item in items"
+                    dnd-draggable="item"
+                    dnd-type="'itemType'"
+                    dnd-moved="items.splice($index, 1)">
+                    <div class="item">{{item}}</div>
+                </li>
+            </ul>
+            <div class="clearfix"></div>
+        </div>
+    </li>
+</ul>

demo/advanced/advanced.js

@@ -0,0 +1,24 @@
+/**
+ * The controller doesn't do much more than setting the initial data model
+ */
+angular.module("demo").controller("AdvancedDemoController", function($scope) {
+
+    $scope.model = [
+        [
+            ['Item 1', 'Item 2', 'Item 3'],
+            ['Item 4', 'Item 5', 'Item 6']
+        ],
+        [
+            ['Item 7', 'Item 8', 'Item 9'],
+            ['Item 10', 'Item 11', 'Item 12']
+        ],
+        [
+            ['Item 13', 'Item 14', 'Item 15'],
+            ['Item 16', 'Item 17', 'Item 18']
+        ]];
+
+    $scope.$watch('model', function(model) {
+        $scope.modelAsJson = angular.toJson(model, true);
+    }, true);
+
+});

demo/framework/demo-framework.js

@@ -13,6 +13,10 @@ angular.module("demo", ["ngRoute", "dndLists"])
                 templateUrl: 'types/types-frame.html',
                 controller: 'TypesDemoController'
             })
+            .when('/advanced', {
+                templateUrl: 'advanced/advanced-frame.html',
+                controller: 'AdvancedDemoController'
+            })
             .otherwise({redirectTo: '/nested'});
     })
 
@@ -26,6 +30,7 @@ angular.module("demo", ["ngRoute", "dndLists"])
                     {label: "Nested Containers", href: "#/nested"},
                     {label: "Simple Demo", href: "#/simple"},
                     {label: "Item Types", href: "#/types"},
+                    {label: "Advanced Demo", href: "#/advanced"},
                     {label: "Github", href: "https://github.com/marceljuenemann/angular-drag-and-drop-lists"}
                 ];
 

demo/index.html

@@ -19,6 +19,7 @@
     <link rel="stylesheet" type="text/css" href="simple/simple.css" />
     <link rel="stylesheet" type="text/css" href="nested/nested.css" />
     <link rel="stylesheet" type="text/css" href="types/types.css" />
+    <link rel="stylesheet" type="text/css" href="advanced/advanced.css" />
 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min.js"></script>
     <script src="framework/vendor/prism.js"></script>
@@ -27,6 +28,7 @@
     <script src="simple/simple.js"></script>
     <script src="nested/nested.js"></script>
     <script src="types/types.js"></script>
+    <script src="advanced/advanced.js"></script>
 
 </head>
 <body ng-app="demo">