mirror of
https://github.com/wisemapping/wisemapping-open-source.git
synced 2025-04-08 23:14:29 +08:00
220 lines
8.4 KiB
HTML
220 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>WiseMApping Workspace</title>
|
|
|
|
<!--Table Styles-->
|
|
|
|
<!--Less CSS Framework-->
|
|
<link rel="stylesheet/less" type="text/css" href="css/styles.less">
|
|
<link rel="stylesheet/less" type="text/css" href="css/table.less">
|
|
<script src="js/less-1.1.3.min.js" type="text/javascript"></script>
|
|
|
|
|
|
<!--jQuery DataTables-->
|
|
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
|
|
<script type="text/javascript" language="javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
|
|
<link href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet">
|
|
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
|
|
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.plugins.js"></script>
|
|
<script type="text/javascript" charset="utf-8">
|
|
$(function() {
|
|
$('#map-table').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="maps"></table>' );
|
|
var table = $('#maps').dataTable( {
|
|
"bProcessing" : true,
|
|
"sAjaxSource" : "json_source.txt",
|
|
"aoColumns": [
|
|
{
|
|
"sTitle" : '<input type="checkbox" id="selectAll"/>',
|
|
"sClass" : "center select", "sWidth" : "15px",
|
|
"bSortable" : false, "bSearchable" : false,
|
|
"fnRender" : function(obj) {
|
|
var id = obj.aData[0];
|
|
return '<input type="checkbox" id="'+id+'"/>';
|
|
}
|
|
},
|
|
{
|
|
"sTitle" : "Titre",
|
|
"fnRender" : function(obj) {
|
|
var tagsList = obj.aData[2].toString().split(",");
|
|
var tagsHtml = ""
|
|
for (var i in tagsList) {
|
|
tagsHtml += " <span class='tag'>"+tagsList[i]+"</span>";
|
|
}
|
|
return obj.aData[1] + tagsHtml;
|
|
}
|
|
},
|
|
{ "sTitle" : "Tags", "bVisible" : false },
|
|
{ "sTitle": "Utillisateurs" },
|
|
{
|
|
"sTitle" : "date",
|
|
"sType" : "es_date",
|
|
"bVisible" : false, "bSearchable" : false,
|
|
"fnRender" :function(obj) {
|
|
return obj.aData[4];
|
|
}
|
|
},
|
|
{
|
|
"sTitle": "Derniere modification",
|
|
"fnRender" : function(obj) {
|
|
return obj.aData[4] + " " + obj.aData[5];
|
|
},
|
|
"iDataSort" : 4
|
|
},
|
|
{
|
|
"sTitle": "Details",
|
|
"sClass": "center",
|
|
"sWidth" : "15px",
|
|
"bSortable" : false, "bSearchable" : false,
|
|
"fnRender" : function(obj) {
|
|
return '<span class="ui-icon ui-icon-circle-triangle-e" style="margin: 0 auto;"></span>';
|
|
}
|
|
}
|
|
|
|
],
|
|
"bAutoWidth" : false,
|
|
// "bLengthChange": false,
|
|
// "bInfo": false,
|
|
// "bPaginate": false,
|
|
"oLanguage" : {
|
|
"sSearch" : "Rechercher",
|
|
"sInfo" : "Affichage de _START_ à _END_ de _TOTAL_ entrées"
|
|
}
|
|
});
|
|
|
|
$('#maps_filter').appendTo("#toolbar");
|
|
$("#maps_length").appendTo("#buttons");
|
|
|
|
$('input:checkbox[id="selectAll"]').click(function() {
|
|
$("#maps").dataTableExt.selectAllMaps();
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<!--Tags-->
|
|
<script type="text/javascript" charset="utf-8">
|
|
|
|
var tags = ['ThinkMapping', 'Akostic', 'Clients', 'Favoris'];
|
|
|
|
$(function() {
|
|
for (i in tags) {
|
|
var outerDiv = $('<div class="tag">'+tags[i]+'</div>');
|
|
var icon = $('<span class="ui-icon ui-icon-folder-collapsed"></span>');
|
|
outerDiv.append(icon);
|
|
$("#tags-list").append(outerDiv);
|
|
}
|
|
|
|
$("#tags-actions button" ).button({
|
|
icons: { primary: "ui-icon-plusthick" }
|
|
});
|
|
|
|
$("#tags-list .tag").each(function(index) {
|
|
$(this).click(function() {
|
|
console.log("ddfsfds");
|
|
})
|
|
})
|
|
});
|
|
</script>
|
|
|
|
<!--Buttons-->
|
|
<script type="text/javascript" charset="utf-8">
|
|
$(function() {
|
|
$("#buttons .show-tags").button({
|
|
icons: { primary: "ui-icon-folder-open" }
|
|
}).click(function() {
|
|
if ($("#tags").css("opacity") == 0) {
|
|
$("#tags").css("opacity", 1);
|
|
$("#maps").animate({
|
|
width: "77%"
|
|
}, 1000);
|
|
} else {
|
|
$("#maps").animate({
|
|
width: "100%"
|
|
}, 1000, function() {
|
|
$("#tags").css("opacity", 0);
|
|
});
|
|
}
|
|
});
|
|
$("#buttons .share").button({
|
|
icons: { primary: "ui-icon-transferthick-e-w" }
|
|
}).click(function() {
|
|
var selectedMaps = $('#maps').dataTableExt.getSelectedMaps();
|
|
var html2 = $('#share-dialog-modal p span').html(selectedMaps.toString());
|
|
|
|
if (selectedMaps.length > 0) {
|
|
$( "#share-dialog-modal" ).dialog({
|
|
height: 140,
|
|
modal: true,
|
|
buttons: {
|
|
"Delete": function() {
|
|
$( this ).dialog( "close" );
|
|
},
|
|
Cancel: function() {
|
|
$( this ).dialog( "close" );
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});;
|
|
|
|
$("#buttons .delete").button({
|
|
icons: { primary: "ui-icon-trash" }
|
|
}).click(function() {
|
|
var selectedMaps = $('#maps').dataTableExt.getSelectedMaps();
|
|
var html2 = $('#delete-dialog-modal p span').html(selectedMaps.toString());
|
|
|
|
if (selectedMaps.length > 0) {
|
|
$( "#delete-dialog-modal" ).dialog({
|
|
height: 140,
|
|
modal: true,
|
|
buttons: {
|
|
"Delete": function() {
|
|
$( this ).dialog( "close" );
|
|
},
|
|
Cancel: function() {
|
|
$( this ).dialog( "close" );
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
})
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="wrapper">
|
|
<div id="toolbar" class="toolbar">
|
|
|
|
</div>
|
|
|
|
<div id="buttons">
|
|
<div id="delete-dialog-modal" title="Delete maps" style="display: none">
|
|
<p>Are you sure you want to delete maps <span></span> ?</p>
|
|
</div>
|
|
<button class="show-tags">Organiser</button>
|
|
|
|
<div id="share-dialog-modal" title="Share maps" style="display: none">
|
|
<p>Are you sure you want to share maps <span></span> ?</p>
|
|
</div>
|
|
<button class="share">Partager</button>
|
|
<button class="delete">Supprimer</button>
|
|
</div>
|
|
|
|
<div>
|
|
<div id="tags">
|
|
<h2>Mes dossiers:</h2>
|
|
<div id="tags-list"></div>
|
|
<div id="tags-actions">
|
|
<button>Nouveau Dossier</button>
|
|
</div>
|
|
</div>
|
|
<div id="map-table"></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |