Skip to content
This repository has been archived by the owner on Nov 27, 2019. It is now read-only.

Commit

Permalink
add/remove containers dynamicaly in drake
Browse files Browse the repository at this point in the history
  • Loading branch information
@luckylooke
luckylooke committed Feb 18, 2018
1 parent e3f1ed1 commit dc07d6e
Show file tree
Hide file tree
Showing 7 changed files with 72 additions and 15 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
# 4.5.0 Wind River
- with "copy:'events'" option dragular clone element including event handlers binded on element (request #165)
- added helpers methods into drake for easier dynamic add/removal of containers of drake initialised earlier

# 4.4.6 Ghost in the shell
- isContainer docs augmentation
Expand Down
10 changes: 10 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -429,6 +429,16 @@ If an element managed by `drake` is currently being dragged, this method will gr

Removes all drag and drop events used by `dragularService` to manage drag and drop between the `containers`. If `.destroy` is called while an element is being dragged, the drag will be effectively cancelled.

### `drake.addContainers( containers )` *!!! Experimental !!!*

Method to add containers dynamicaly into drake initialised earlier.

### `drake.removeContainers( containers )` *!!! Experimental !!!*

Method to remove containers dynamicaly from drake initialised earlier.



# License

MIT
Expand Down
35 changes: 29 additions & 6 deletions docs/dist/examples.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -465,6 +465,8 @@ return /******/ (function(modules) { // webpackBootstrap
containersCtx: shared.containersCtx, // all contexts to containers
sanitizeContainersModel: depSanitize,
sanitizeContainers: sanitizeContainers,
addContainers: addContainers,
removeContainers: removeContainers,
isContainer: isContainer,
start: manualStart,
end: end,
Expand Down Expand Up @@ -1406,24 +1408,45 @@ return /******/ (function(modules) { // webpackBootstrap
release( {} );
}

function removeContainers( all ) {
function removeContainers( containers ) {

$rootScope.$applyAsync( function applyDestroyed() {

var changes = _isArray( all ) ? all : makeArray( all );
changes.forEach( function forEachContainer( container ) {
containers = _isArray( containers ) ? containers : makeArray( containers );
containers.forEach( function forEachContainer( container ) {

angular.forEach( o.nameSpace, function forEachNs( nameSpace ) {

var index;
index = shared.containers[ nameSpace ].indexOf( container );
shared.containers[ nameSpace ].splice( index, 1 );
shared.containersCtx[ nameSpace ].splice( index, 1 );

if ( -1 < (index = initialContainers.indexOf( container )))
initialContainers.splice( index, 1 );
} );
} );
} );
}

function addContainers( containers ) {

containers = _isArray( containers ) ? containers : makeArray( containers );
containers.forEach( function forEachContainer( container, i ) {

angular.forEach( o.nameSpace, function forEachNs( nameSpace ) {

shared.containers[ nameSpace ].push( container );
shared.containersCtx[ nameSpace ].push({
o: o,
m: getContainersModel( o )[ i ], // can be undefined
fm: o.containersFilteredModel[ i ] // can be undefined
});
initialContainers.push( container );
} );
} );
}

function scrollContainer( e ) {
if ( shared.target ) {
if ( e.originalEvent ) {
Expand Down Expand Up @@ -2967,10 +2990,10 @@ return /******/ (function(modules) { // webpackBootstrap
/* 31 */
/***/ (function(module, exports) {

'use strict'; module.exports = angular.module("templates", []).run(["$templateCache", function($templateCache) {$templateCache.put("exampleBasic/exampleBasic.html","<div class=\'parent\'>\n <h2>Basic</h2>\n <label>Move stuff between these two containers. Note how the stuff gets inserted near the mouse pointer? Great stuff.</label>\n <div class=\'wrapper\' ng-controller=\"Basic\">\n <div class=\'containerVertical\'>\n <div>Move me, but you can only drop me in one of these containers.</div>\n <div>If you try to drop me somewhere other than these containers, I\'ll just come back.</div>\n <div>Item 3.</div>\n <div>Item 6.</div>\n </div>\n <div class=\'containerVertical\'>\n <div>You can drop me in the left container, otherwise I\'ll stay here.</div>\n <div ng-click=\"clicked = !clicked\" ng-class=\"clicked && \'clickedClass\'\">Try to click me, dragular distinguish drag from click</div>\n <div>Item 5.</div>\n </div>\n </div>\n <pre>\n <code>\n// JS\n controller(\'Basic\', [\'$element\', \'dragularService\', function TodoCtrl($element, dragularService) {\n dragularService(\'.containerVertical\');\n }])\n </code>\n <code>\n// CSS\n.clickedClass {\n background-color: orange !important;\n}\n </code>\n <code>\n&lt;!-- HTML --&gt;\n &lt;div class=\'wrapper\' ng-controller=&quot;Basic&quot;&gt;\n &lt;div class=\'containerVertical\'&gt;\n &lt;div&gt;Move me, but you can only drop me in one of these containers.&lt;/div&gt;\n &lt;div&gt;If you try to drop me somewhere other than these containers, I\'ll just come back.&lt;/div&gt;\n &lt;div&gt;Item 3.&lt;/div&gt;\n &lt;div&gt;Item 6.&lt;/div&gt;\n &lt;/div&gt;\n &lt;div class=\'containerVertical\'&gt;\n &lt;div&gt;You can drop me in the left container, otherwise I\'ll stay here.&lt;/div&gt;\n &lt;div ng-click=\"clicked = !clicked\" ng-class=\"clicked && \'clickedClass\'\"&gt;Try to click me, dragular distinguish drag from click&lt;/div&gt;\n &lt;div&gt;Item 5.&lt;/div&gt;\n &lt;/div&gt;\n&lt;/div&gt;\n </code>\n </pre>\n</div>\n");
$templateCache.put("docsInstall/docsInstall.html","<h2>Install</h2>\n<p>download dragular.js and dragular.css from dist folder</p>\n<p>OR clone git</p>\n<pre><code>\ngit clone http://github.com/luckylooke/dragular.git\n</code></pre>\n<p>OR use npm</p>\n<pre><code>\n[sudo] npm install dragular\n</code></pre>\n<p>OR use bower</p>\n<pre><code>\nbower install dragular\n</code></pre>\n<p>AND include files into your project</p>\n<pre><code>\n&lt;link href=\'styles/dragular.css\' rel=\'stylesheet\' type=\'text/css\' /&gt;\n&lt;script src=\'scripts/dragular.js\'&gt;&lt;/script&gt;\n</code></pre>\n<p>AND put dragularModule into dependency array</p>\n<pre><code>\nvar app = angular.module(\'myApp\', [\'dragularModule\', \'otherDependencies\']);\n</code></pre>\n<p>DONE :)</p>\n");
$templateCache.put("exampleBoundingBox/exampleBoundingBox.html"," <div class=\'parent\'>\n <h2>BoundingBox</h2>\n <label>You can provide element in options.boundingBox to limit crossing element borders.</label>\n <div class=\'wrapper\' ng-controller=\"BoundingBox\">\n <div class=\'containerVertical\'>\n <div>This items cannot cross its example element, just try it your selves.</div>\n <div>Item 2.</div>\n <div>Item 3.</div>\n <div>Item 6.</div>\n </div>\n <div class=\'containerVertical\'>\n <div>This items cannot cross its example element, just try it your selves.</div>\n <div>Item 4.</div>\n <div>Item 5.</div>\n </div>\n </div>\n <pre>\n <code>\n dragularService([$element.children(), {\n boundingBox: $element\n });\n </code>\n </pre>\n </div>");
'use strict'; module.exports = angular.module("templates", []).run(["$templateCache", function($templateCache) {$templateCache.put("docsInstall/docsInstall.html","<h2>Install</h2>\n<p>download dragular.js and dragular.css from dist folder</p>\n<p>OR clone git</p>\n<pre><code>\ngit clone http://github.com/luckylooke/dragular.git\n</code></pre>\n<p>OR use npm</p>\n<pre><code>\n[sudo] npm install dragular\n</code></pre>\n<p>OR use bower</p>\n<pre><code>\nbower install dragular\n</code></pre>\n<p>AND include files into your project</p>\n<pre><code>\n&lt;link href=\'styles/dragular.css\' rel=\'stylesheet\' type=\'text/css\' /&gt;\n&lt;script src=\'scripts/dragular.js\'&gt;&lt;/script&gt;\n</code></pre>\n<p>AND put dragularModule into dependency array</p>\n<pre><code>\nvar app = angular.module(\'myApp\', [\'dragularModule\', \'otherDependencies\']);\n</code></pre>\n<p>DONE :)</p>\n");
$templateCache.put("exampleBasic/exampleBasic.html","<div class=\'parent\'>\n <h2>Basic</h2>\n <label>Move stuff between these two containers. Note how the stuff gets inserted near the mouse pointer? Great stuff.</label>\n <div class=\'wrapper\' ng-controller=\"Basic\">\n <div class=\'containerVertical\'>\n <div>Move me, but you can only drop me in one of these containers.</div>\n <div>If you try to drop me somewhere other than these containers, I\'ll just come back.</div>\n <div>Item 3.</div>\n <div>Item 6.</div>\n </div>\n <div class=\'containerVertical\'>\n <div>You can drop me in the left container, otherwise I\'ll stay here.</div>\n <div ng-click=\"clicked = !clicked\" ng-class=\"clicked && \'clickedClass\'\">Try to click me, dragular distinguish drag from click</div>\n <div>Item 5.</div>\n </div>\n </div>\n <pre>\n <code>\n// JS\n controller(\'Basic\', [\'$element\', \'dragularService\', function TodoCtrl($element, dragularService) {\n dragularService(\'.containerVertical\');\n }])\n </code>\n <code>\n// CSS\n.clickedClass {\n background-color: orange !important;\n}\n </code>\n <code>\n&lt;!-- HTML --&gt;\n &lt;div class=\'wrapper\' ng-controller=&quot;Basic&quot;&gt;\n &lt;div class=\'containerVertical\'&gt;\n &lt;div&gt;Move me, but you can only drop me in one of these containers.&lt;/div&gt;\n &lt;div&gt;If you try to drop me somewhere other than these containers, I\'ll just come back.&lt;/div&gt;\n &lt;div&gt;Item 3.&lt;/div&gt;\n &lt;div&gt;Item 6.&lt;/div&gt;\n &lt;/div&gt;\n &lt;div class=\'containerVertical\'&gt;\n &lt;div&gt;You can drop me in the left container, otherwise I\'ll stay here.&lt;/div&gt;\n &lt;div ng-click=\"clicked = !clicked\" ng-class=\"clicked && \'clickedClass\'\"&gt;Try to click me, dragular distinguish drag from click&lt;/div&gt;\n &lt;div&gt;Item 5.&lt;/div&gt;\n &lt;/div&gt;\n&lt;/div&gt;\n </code>\n </pre>\n</div>\n");
$templateCache.put("exampleBasicWithModel/exampleBasicWithModel.html","<div class=\'parent\'>\n <h2>Basic - with model</h2>\n <label>Move stuff between these two containers. Note how the stuff gets inserted near the mouse pointer? Great stuff.</label>\n <div class=\'wrapper\' ng-controller=\"BasicModel\">\n <div class=\'tableRow\'>\n <div class=\'containerVertical\'>\n <div ng-repeat=\"item in items1\">{{item.content}}</div>\n </div>\n <div class=\'containerVertical\' id=\"test\">\n <div ng-repeat=\"item in items2\">{{item.content}}</div>\n </div>\n </div>\n <div class=\"tableRow\">\n <div class=\'containerVertical\'>\n <pre>Items1:\n <br/>{{items1 | json}}</pre>\n </div>\n <div class=\'containerVertical\'>\n <pre>Items2:\n <br/>{{items2 | json}}</pre>\n </div>\n </div>\n </div>\n <pre>\n <code>\n// JS\n controller(\'BasicModel\', [\'$scope\', \'$element\', \'dragularService\', function TodoCtrl($scope, $element, dragularService) {\n $scope.items1 = [{\n content: \'Move me, but you can only drop me in one of these containers.\'\n }, {\n content: \'If you try to drop me somewhere other than these containers, I\\\'ll just come back.\'\n }, {\n content: \'Item 3\'\n }, {\n content: \'Item 4\'\n }];\n $scope.items2 = [{\n content: \'Item 5\'\n }, {\n content: \'Item 6\'\n }, {\n content: \'Item 7\'\n }, {\n content: \'Item 8\'\n }];\n var containers = $element.children().children();\n dragularService([containers[0],containers[1]],{\n containersModel: [$scope.items1, $scope.items2]\n });\n }])\n </code>\n <code>\n&lt;!-- HTML --&gt;\n&lt;div class=\'wrapper\' ng-controller=&quot;Basic&quot;&gt;\n &lt;div class=\'tableRow\'&gt;\n &lt;div class=\'containerVertical\'&gt;\n &lt;div ng-repeat=&quot;item in items1&quot;&gt;{{item.content}}&lt;/div&gt;\n &lt;/div&gt;\n &lt;div class=\'containerVertical\'&gt;\n &lt;div ng-repeat=&quot;item in items2&quot;&gt;{{item.content}}&lt;/div&gt;\n &lt;/div&gt;\n &lt;/div&gt;\n &lt;div class=&quot;tableRow&quot;&gt;\n &lt;div class=&quot;container&quot;&gt;\n &lt;div&gt;Items1:\n &lt;br/&gt;{{items1 | json}}&lt;/div&gt;\n &lt;/div&gt;\n &lt;div class=&quot;container&quot;&gt;\n &lt;div&gt;Items2:\n &lt;br/&gt;{{items2 | json}}&lt;/div&gt;\n &lt;/div&gt;\n &lt;/div&gt;\n&lt;/div&gt;\n </code>\n </pre>\n</div>\n");
$templateCache.put("exampleBoundingBox/exampleBoundingBox.html"," <div class=\'parent\'>\n <h2>BoundingBox</h2>\n <label>You can provide element in options.boundingBox to limit crossing element borders.</label>\n <div class=\'wrapper\' ng-controller=\"BoundingBox\">\n <div class=\'containerVertical\'>\n <div>This items cannot cross its example element, just try it your selves.</div>\n <div>Item 2.</div>\n <div>Item 3.</div>\n <div>Item 6.</div>\n </div>\n <div class=\'containerVertical\'>\n <div>This items cannot cross its example element, just try it your selves.</div>\n <div>Item 4.</div>\n <div>Item 5.</div>\n </div>\n </div>\n <pre>\n <code>\n dragularService([$element.children(), {\n boundingBox: $element\n });\n </code>\n </pre>\n </div>");
$templateCache.put("exampleBoundingBoxLockX/exampleBoundingBoxLockX.html","<div class=\'parent\'>\n <h2>BoundingBox and lockX</h2>\n <label>Movement can be locked to X or Y axis and also you can provide element in options.boundingBox to limit crossing element borders.</label>\n <div class=\'wrapper\' ng-controller=\"BoundingBoxLockX\">\n <div class=\'containerHorizontal\'>\n <div class=\'boundingBox\'>\n <div class=\"width25\">Items are locked in X axis movement and cannot cross its closest parent div.boundingBox, just try it your selves.</div>\n <div class=\"width25\">item 2</div>\n <div class=\"width25\">item 3</div>\n <div class=\"width25\">item 4</div>\n </div>\n </div>\n </div>\n <pre>\n <code>\n dragularService([$element.children()[0].children(), {\n boundingBox: $element.children()[0],\n lockX: true\n });\n </code>\n </pre>\n </div>");
$templateCache.put("exampleBoundingBoxLockY/exampleBoundingBoxLockY.html"," <div class=\'parent\'>\n <h2>BoundingBox and LockY</h2>\n <label>Movement can be locked to X or Y axis and also you can provide element in options.boundingBox to limit crossing element borders.</label>\n <div class=\'wrapper\' ng-controller=\"BoundingBoxLockY\">\n <div class=\'containerVertical\'>\n <div class=\'boundingBox\'>\n <div>Items are locked in Y axis movement and cannot cross its closest parent div.boundingBox, just try it your selves.</div>\n <div>item 2</div>\n <div>item 3</div>\n <div>item 4</div>\n <div>item 5</div>\n <div>item 6</div>\n </div>\n </div>\n </div>\n <pre>\n <code>\n dragularService([$element.children()[0].children(), {\n boundingBox: $element.children()[0],\n lockY: true\n });\n </code>\n </pre>\n </div>");
$templateCache.put("exampleCopy/exampleCopy.html","<div class=\'parent\'>\n <h2>Copy</h2>\n <label>Copying stuff is great too.</label>\n <div class=\'wrapper\' ng-controller=\"Copy\" ng-hide=\"globals.showModelExamples\">\n <div id=\'left2\' class=\'containerVertical\'>\n <div>Move me, and make copy on drop.</div>\n <div>If you try to drop me somewhere other than these containers, I\'ll just come back.</div>\n </div>\n <div id=\'right2\' class=\'containerVertical\'>\n <div>You can drop me in the left container, otherwise I\'ll stay here.</div>\n </div>\n </div>\n <pre>\n <code>\n// JS\n controller(\'Copy\', [\'$element\', \'dragularService\', function TodoCtrl($element, dragularService) {\n dragularService($element.children(), {\n copy: true\n });\n }])\n </code>\n <code>\n&lt;!-- HTML --&gt;\n&lt;div class=\'wrapper\' ng-controller=&quot;Copy&quot; ng-hide=&quot;globals.showModelExamples&quot;&gt;\n &lt;div id=\'left2\' class=\'containerVertical\'&gt;\n &lt;div&gt;Move me, and make copy on drop.&lt;/div&gt;\n &lt;div&gt;If you try to drop me somewhere other than these containers, I\'ll just come back.&lt;/div&gt;\n &lt;/div&gt;\n &lt;div id=\'right2\' class=\'containerVertical\'&gt;\n &lt;div&gt;You can drop me in the left container, otherwise I\'ll stay here.&lt;/div&gt;\n &lt;/div&gt;\n &lt;/div&gt;\n </code>\n </pre>\n</div>\n");
Expand Down
4 changes: 2 additions & 2 deletions docs/dist/examples.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/dist/examples.min.js.map
View file

Large diffs are not rendered by default.

Loading

0 comments on commit dc07d6e

Please sign in to comment.