Drag & drop
basicslide loaderdrag & drop
Console
PMA.UI version: 2.43.3
Drag & drop example.
drag_n_drop.html
1<!doctype >
2<html lang="en">
3
4<head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=10">
7 <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
8
9 <!-- Include PMA.UI required libraries downloaded or from CDN -->
10 <script src="./pma.ui/jquery-3.1.0.js"></script>
11 <link href="./pma.ui/font-awesome.min.css" type="text/css" rel="stylesheet">
12
13 <!-- Include PMA.UI script & css -->
14 <script src="./pma.ui/pma.ui.js"></script>
15 <link href="./pma.ui/pma.ui.css" type="text/css" rel="stylesheet">
16
17 <!-- Include custom script & css -->
18 <script src="./js/drag_n_drop.js"></script>
19 <link href="./css/drag_n_drop.css" type="text/css" rel="stylesheet">
20
21 <title>Drag & drop</title>
22</head>
23
24<body>
25 <!-- Create a draggable element and attach the events -->
26 <div class="draggable" draggable="true" ondragstart="drag(event)">Drag me over the slideloader or the gallery!</div>
27
28 <!-- The element that will host the gallery -->
29 <div id="gallery"></div>
30
31 <!-- The element that will host the slide loader -->
32 <div id="viewer"></div>
33</body>
34
35</html>drag_n_drop.css
1html,
2body
3{
4 height: 100%;
5 padding: 0px;
6 margin: 0px;
7}
8
9#gallery
10{
11 width: 100%;
12}
13
14#viewer
15{
16 height: calc(100vh - 167px);
17 width: 100%;
18}
19
20.draggable
21{
22 width: 90%;
23 margin: 0 auto;
24 padding: 5px 20px;
25 border: 1px dotted black
26}
drag_n_drop.js
1// Initial declarations
2var serverUrl = "https://host.pathomation.com/pma.core.2/";
3var serverUsername = "PMA_UI_demo";
4var serverPassword = "PMA_UI_demo";
5var galleryElementSelector = "#gallery";
6var slideLoaderElementSelector = "#viewer";
7var caller = "DemoPortal";
8var galleryMode = "horizontal";
9var directoryPath = "Reference/3DHistech";
10var thumbnailWidth = 150;
11var thumbnailHeight = 100;
12var slidePath = "Reference/3DHistech/CMU-1.mrxs";
13
14function drag(ev) {
15 // Define object of MIME TYPE "application/x-pma-node" (PMA.UI.Components.DragDropMimeType)
16 // and of the type PMA.UI.Components~dragDropObject that will be passed to viewer or gallery.
17 ev.dataTransfer.setData(PMA.UI.Components.DragDropMimeType, JSON.stringify({
18 serverUrl: serverUrl,
19 path: slidePath,
20 isFolder: false
21 }));
22}
23
24jQuery(function () {
25 console.log(`PMA.UI version: ${PMA.UI.getVersion()}`);
26
27 // Create a context
28 var context = new PMA.UI.Components.Context({ caller: caller });
29
30 // Add an autologin authentication provider
31 new PMA.UI.Authentication.AutoLogin(context, [{ serverUrl: serverUrl, username: serverUsername, password: serverPassword }]);
32
33 // Create a tree view that will display the contents of PMA.core servers
34 var gallery = new PMA.UI.Components.Gallery(context, {
35 element: galleryElementSelector,
36 thumbnailWidth: thumbnailWidth,
37 thumbnailHeight: thumbnailHeight,
38 mode: galleryMode,
39 });
40
41 // Create an image loader that will allow us to load images easily
42 var slideLoader = new PMA.UI.Components.SlideLoader(context, {
43 element: slideLoaderElementSelector,
44 });
45
46 // Load the contents of a directory
47 gallery.loadDirectory(serverUrl, directoryPath);
48
49 // Listen for the slide selected event by the gallery
50 gallery.listen(PMA.UI.Components.Events.SlideSelected, function (args) {
51 console.log("Slide selected");
52 console.log(args);
53 // Load the image selected from treeview
54 slideLoader.load(serverUrl, args.path);
55 });
56
57 // Listen for the slide deselected event by the gallery
58 gallery.listen(PMA.UI.Components.Events.SlideDeSelected, function (args) {
59 console.log("Slide deselected");
60 console.log(args);
61 // Clear slide loader
62 slideLoader.load(serverUrl, null);
63 });
64
65 // Listen for the slide selected event by the gallery
66 gallery.listen(PMA.UI.Components.Events.Dropped, function (args) {
67 console.log("Slide info dropped on gallery");
68 console.log(args);
69 });
70
71 // Listen for the slide loaded event by the slide loader
72 slideLoader.listen(PMA.UI.Components.Events.SlideLoaded, function (args) {
73 console.log("Slide loaded");
74 console.log(args);
75 });
76
77 // Listen for the slide info error event by slide loader
78 slideLoader.listen(PMA.UI.Components.Events.SlideInfoError, function (args) {
79 console.log("Slide info error");
80 console.log(args);
81 });
82
83 // Listen for the slide info error event by slide loader
84 slideLoader.listen(PMA.UI.Components.Events.BeforeDrop, function (args) {
85 console.log("Slide info dropped on viewer");
86 console.log(args);
87 });
88});