@docapost-agility/mka
Version:
Mouse keyboard action
1,150 lines (1,109 loc) • 39.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mouse and Keyboard Actions</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
</head>
<body>
<div class="container">
<h2>Dossier</h2>
<div class="row folders-container">
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="folder">
<div class="thumbnail">
<div class="caption">
<h3>Folder</h3>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="folder">
<div class="thumbnail">
<div class="caption">
<h3>Folder</h3>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="folder">
<div class="thumbnail">
<div class="caption">
<h3>Folder</h3>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="folder">
<div class="thumbnail">
<div class="caption">
<h3>Folder</h3>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="folder">
<div class="thumbnail">
<div class="caption">
<h3>Folder</h3>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="folder">
<div class="thumbnail">
<div class="caption">
<h3>Folder</h3>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="folder">
<div class="thumbnail">
<div class="caption">
<h3>Folder</h3>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="folder">
<div class="thumbnail">
<div class="caption">
<h3>Folder</h3>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="folder">
<div class="thumbnail">
<div class="caption">
<h3>Folder</h3>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="folder">
<div class="thumbnail">
<div class="caption">
<h3>Folder</h3>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="folder">
<div class="thumbnail">
<div class="caption">
<h3>Folder</h3>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="folder">
<div class="thumbnail">
<div class="caption">
<h3>Folder</h3>
</div>
</div>
</div>
</div>
</div>
<h3>Nombre d'element sélectionné <span id="mka-count-items">0</span></h3>
<h3>Nombre de dossier sélectionné <span id="mka-count-folders">0</span></h3>
<a onclick="switchMode()">Switch mode</a>
<div id="itemsListContainer">
<ul id="itemsList" class="list-group">
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">ITEMZER</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="2">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 2</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="3">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 3</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 4</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="5">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 5</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
</ul>
</div>
<div id="itemsListContainer2">
<ul id="itemsList2" class="list-group">
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">ITEMZER</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="2">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 2</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="3">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 3</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 4</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="5">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 5</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
<li class="list-group-item" item-id="1">
<div class="card">
<div class="card-block">
<h4 class="card-title">Item 1</h4>
</div>
</div>
</li>
</ul>
</div>
</div>
<script src="build/mka.js"></script>
<style>
#itemsListContainer {
background-color: #f8f8f8;
border: 1px solid #ededed;
margin-bottom: 1000px;
margin-top: 40px;
overflow: auto;
height: 800px;
}
#itemsListContainer.grid {
height: auto;
}
#itemsList {
padding: 50px;
margin-bottom: 0;
}
.grid #itemsList {
height: auto;
width: 2500px;
}
.grid #itemsList li.list-group-item {
display: inline-block;
margin: 0 0 1em;
width: 180px;
height: 120px;
}
.folder {
text-align: center;
}
.mka-elt-selecting, .mka-elt-selecting .thumbnail {
background-color: #D1EEFF;
}
.mka-elt-selected, .mka-elt-selected .thumbnail {
background-color: #bebebe;
}
.on-drag {
background-color: #cbcbcb ;
opacity: 0.7;
}
.folders-container {
background-color: #efefef;
min-height: 400px;
border: 1px solid #afafaf;
padding: 15px 0;
}
#wrapper-drag {
position: relative;
}
.drag-class-sample {
/* Sample class for onDragItemClass*/
color: white;
background: #403A3E;
background: -webkit-linear-gradient(to right, #BE5869, #403A3E);
background: linear-gradient(to right, #BE5869, #403A3E);
border: 1px solid #403A3E;
padding: 5px;
text-align: center;
width: 250px;
}
.drag-class-sample span {
/* Sample class for onDragItemClass span */
color: white;
background: #cc2b5e;
background: -webkit-linear-gradient(to right, #753a88, #cc2b5e);
background: linear-gradient(to right, #753a88, #cc2b5e);
}
</style>
<script type="text/javascript">
var switchMode = function () {
var list = document.getElementById("itemsListContainer");
if (list.classList.contains("grid")) {
list.classList.remove("grid");
} else {
list.classList.add("grid");
}
}
var getContextMenuItems = function (selection) {
var menu = [];
menu.push({
title: "action 1",
action: function () {
console.log("action 1");
}
});
menu.push({
title: "action 3",
action: function () {
console.log("action 3");
}
});
if (selection.length > 1) {
menu.push({
title: "action multiple",
action: function () {
console.log("action multiple");
}
});
}
var htmlMenu = document.createElement('ul');
menu.forEach(function (item) {
var li = document.createElement('li');
li.innerHTML = item.title;
li.onclick = item.action;
htmlMenu.appendChild(li);
});
return htmlMenu;
}
var getContextMenuFolders = function (selection) {
var htmlMenu = '<ul>' +
'<li onclick="console.log(\'action dossier 1\');">action dossier 1</li>' +
'<li onclick="console.log(\'action dossier 3\');">action dossier 3</li>' +
'</ul>';
return htmlMenu;
}
var dbClick = function (elt) {
console.log('dbclick', elt);
}
var drop = function (elts, zone) {
console.log('drop', elts);
console.log('dropZone', zone);
}
var deleteItems = function (elements) {
elements.forEach(function (elt) {
if (elt.parentNode) {
elt.parentNode.removeChild(elt);
}
})
}
var deleteFolders = function (elements) {
elements.forEach(function (elt) {
if (elt.parentNode && elt.parentNode.parentNode) {
elt.parentNode.parentNode.removeChild(elt.parentNode);
}
})
}
document.getElementById('itemsList').mkaInit({
"eltsSelectable": "li.list-group-item",
"onDragItemClass": "drag-class-sample",
"dragNdrop": drop,
"droppableElements": ".folders-container .folder",
"rightClick": getContextMenuItems,
"dbClick": dbClick,
"lasso": true,
"selectAllShortcut": true,
"copyPaste": true,
"deleteShortcut": deleteItems,
"count": "mka-count-items",
"pasteFunction": function (items) {
console.log(items);
var data = [];
items.forEach(function (elt) {
console.log(elt.getAttribute("item-id"));
data.push(elt.getAttribute("item-id"));
});
console.group("Call WS with :");
console.group(data);
console.groupEnd();
},
"onSelectionUpdate": function (elts){
console.log(elts);
}
// "dropFunction" : function(ids) {
// console.log(ids);
// console.log("drop du client");
// }
});
document.getElementById('itemsList2').mkaInit({
"eltsSelectable": "li.list-group-item",
"onDragItemClass": "drag-class-sample",
"dragNdrop": drop,
"droppableElements": ".folders-container .folder",
"rightClick": getContextMenuItems,
"dbClick": dbClick,
"lasso": true,
"selectAllShortcut": true,
"copyPaste": true,
"deleteShortcut": deleteItems,
"count": "mka-count-items",
"pasteFunction": function (items) {
console.log(items);
var data = [];
items.forEach(function (elt) {
console.log(elt.getAttribute("item-id"));
data.push(elt.getAttribute("item-id"));
});
console.group("Call WS with :");
console.group(data);
console.groupEnd();
},
"onSelectionUpdate": function (elts){
console.log(elts);
}
// "dropFunction" : function(ids) {
// console.log(ids);
// console.log("drop du client");
// }
});
document.getElementsByClassName('folders-container').item(0).mkaInit({
"eltsSelectable": ".folder",
"onDragItemClass": "drag-class-sample",
"dragNdrop": true,
"rightClick": getContextMenuFolders,
"dbClick": dbClick,
"lasso": true,
"selectAllShortcut": true,
"copyPaste": true,
"deleteShortcut": deleteFolders,
"count": "mka-count-folders",
"pasteFunction": function (items) {
console.log(items);
var data = [];
items.forEach(function (elt) {
console.log(elt.getAttribute("item-id"));
data.push(elt.getAttribute("item-id"));
});
console.group("Call WS with :");
console.group(data);
console.groupEnd();
}
// "dropFunction" : function(ids) {
// console.log(ids);
// console.log("drop du client");
// }
});
</script>
</body>
</html>