Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
erp5
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Klaus Wölfel
erp5
Commits
de1f4a97
Commit
de1f4a97
authored
4 years ago
by
Ludovic Kiefer
Committed by
Romain Courteaud
4 years ago
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
erp5_run_my_doc: reorder slides during drag and drop
parent
2b80b8a5
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
115 additions
and
22 deletions
+115
-22
bt5/erp5_run_my_doc/SkinTemplateItem/portal_skins/erp5_run_my_doc/slideeditor.gadget.js.js
...tem/portal_skins/erp5_run_my_doc/slideeditor.gadget.js.js
+115
-22
No files found.
bt5/erp5_run_my_doc/SkinTemplateItem/portal_skins/erp5_run_my_doc/slideeditor.gadget.js.js
View file @
de1f4a97
...
@@ -495,6 +495,80 @@
...
@@ -495,6 +495,80 @@
]);
]);
}
}
function
recordSlidePosition
(
gadget
)
{
// [x,y] coordinates of the slides
gadget
.
slide_coordinate
=
[];
// store the data-slide-index of slides in the order we want to show them
// the key is the slide position into the list
// the value is the value of its data-slide-index converted to int
gadget
.
slide_order
=
[];
gadget
.
slide_order_start
=
[];
//used to restore the slides positions
// Don't forget that the last element is the "add slide" button
var
slide_list
=
gadget
.
element
.
querySelector
(
"
div.slide_list
"
).
children
,
i
,
coordinate
;
for
(
i
=
0
;
i
<
slide_list
.
length
-
1
;
i
+=
1
)
{
coordinate
=
slide_list
[
i
].
getBoundingClientRect
();
gadget
.
slide_coordinate
[
i
]
=
[
coordinate
.
x
,
coordinate
.
y
];
gadget
.
slide_order
[
i
]
=
i
;
gadget
.
slide_order_start
[
i
]
=
i
;
}
}
function
moveSlide
(
gadget
,
dragged_id
,
hovered_id
)
{
// dragged_id : data-slide-index of the dragged slide (Int)
// hovered_id : data-slide-index of the hovered slide (Int)
var
slide_list
=
gadget
.
element
.
querySelector
(
"
div.slide_list
"
).
children
,
j
,
i
,
dragged_index
,
hovered_index
,
moved
,
slide
,
pos_x
,
pos_y
;
// reset slides positions on dragend event
if
(
dragged_id
===
-
1
)
{
for
(
j
=
0
;
j
<
gadget
.
slide_order
.
length
;
j
+=
1
)
{
gadget
.
slide_order
[
j
]
=
gadget
.
slide_order_start
[
j
];
slide_list
[
j
].
style
.
left
=
"
0
"
;
slide_list
[
j
].
style
.
top
=
"
0
"
;
slide_list
[
j
].
style
.
position
=
"
relative
"
;
}
return
;
}
// we move this slide (position in the list of slides)
dragged_index
=
gadget
.
slide_order
.
indexOf
(
dragged_id
);
// over this slide (position in the list of slides)
hovered_index
=
gadget
.
slide_order
.
indexOf
(
hovered_id
);
// drop the moved slide from the list
moved
=
gadget
.
slide_order
.
splice
(
dragged_index
,
1
);
// insert the moved slide on the right position into the list
gadget
.
slide_order
.
splice
(
hovered_index
,
0
,
moved
[
0
]);
// where to drop the slide (on drop event)
gadget
.
hovered_slide
=
hovered_index
.
toString
();
for
(
i
=
0
;
i
<
gadget
.
slide_order
.
length
;
i
+=
1
)
{
// Find slide that should be shown at that index
slide
=
slide_list
[
gadget
.
slide_order
[
i
]];
//displace the slide at this relative position (CSS only, DOM unchanged)
pos_x
=
gadget
.
slide_coordinate
[
gadget
.
slide_order
[
i
]
][
0
];
pos_y
=
gadget
.
slide_coordinate
[
gadget
.
slide_order
[
i
]
][
1
];
slide
.
style
.
left
=
(
gadget
.
slide_coordinate
[
i
][
0
]
-
pos_x
).
toString
()
+
"
px
"
;
slide
.
style
.
top
=
(
gadget
.
slide_coordinate
[
i
][
1
]
-
pos_y
).
toString
()
+
"
px
"
;
slide
.
style
.
position
=
"
relative
"
;
}
}
///////////////////////////////////////////////////
///////////////////////////////////////////////////
// Gadget
// Gadget
///////////////////////////////////////////////////
///////////////////////////////////////////////////
...
@@ -727,29 +801,32 @@
...
@@ -727,29 +801,32 @@
// Drag / drop management
// Drag / drop management
///////////////////////////////////////////////////
///////////////////////////////////////////////////
.
onEvent
(
"
dragstart
"
,
function
(
evt
)
{
.
onEvent
(
"
dragstart
"
,
function
(
evt
)
{
var
tag_name
=
evt
.
target
.
tagName
;
var
closest_section
=
evt
.
target
.
closest
(
'
section
'
),
if
(
tag_name
!==
'
SECTION
'
)
{
gadget
=
this
;
if
(
closest_section
===
null
)
{
return
;
return
;
}
}
// Store index of the dragged slide
evt
.
target
.
classList
.
add
(
'
drag
'
);
evt
.
target
.
classList
.
add
(
'
drag
'
);
recordSlidePosition
(
this
);
// Store index of the dragged slide
evt
.
dataTransfer
.
effectAllowed
=
'
move
'
;
evt
.
dataTransfer
.
effectAllowed
=
'
move
'
;
evt
.
dataTransfer
.
setData
(
'
application/x-dragged-slide
'
,
evt
.
dataTransfer
.
setData
(
'
application/x-dragged-slide
'
,
evt
.
target
.
getAttribute
(
'
data-slide-index
'
));
evt
.
target
.
getAttribute
(
'
data-slide-index
'
));
gadget
.
dragged_slide
=
evt
.
target
.
getAttribute
(
'
data-slide-index
'
);
},
false
,
false
)
},
false
,
false
)
.
onEvent
(
"
dragend
"
,
function
(
evt
)
{
.
onEvent
(
"
dragend
"
,
function
(
evt
)
{
var
tag_name
=
evt
.
target
.
tagName
;
moveSlide
(
this
,
-
1
,
-
1
);
if
(
tag_name
!==
'
SECTION
'
)
{
var
closest_section
=
evt
.
target
.
closest
(
'
section
'
);
if
(
closest_section
===
null
)
{
return
;
return
;
}
}
evt
.
target
.
classList
.
remove
(
'
drag
'
);
evt
.
target
.
classList
.
remove
(
'
drag
'
);
},
false
,
false
)
},
false
,
false
)
.
onEvent
(
"
dragover
"
,
function
(
evt
)
{
.
onEvent
(
"
dragover
"
,
function
(
evt
)
{
var
tag_name
=
evt
.
target
.
tagName
;
var
closest_section
=
evt
.
target
.
closest
(
'
section
'
)
;
if
(
tag_name
!==
'
SECTION
'
)
{
if
(
closest_section
===
null
)
{
return
;
return
;
}
}
if
(
evt
.
preventDefault
)
{
if
(
evt
.
preventDefault
)
{
...
@@ -759,29 +836,47 @@
...
@@ -759,29 +836,47 @@
},
false
,
false
)
},
false
,
false
)
.
onEvent
(
"
dragenter
"
,
function
(
evt
)
{
.
onEvent
(
"
dragenter
"
,
function
(
evt
)
{
var
tag_name
=
evt
.
target
.
tagName
;
var
closest_section
=
evt
.
target
.
closest
(
'
section
'
),
if
(
tag_name
!==
'
SECTION
'
)
{
gadget
,
dragged
,
hovered
;
if
(
closest_section
===
null
)
{
return
;
return
;
}
}
// Provide a visual feedback to the user
// Provide a visual feedback to the user
// Showing where the slide can be dropped
// Showing where the slide can be dropped
if
(
evt
.
target
.
getAttribute
(
'
data-slide-index
'
))
{
gadget
=
this
;
evt
.
target
.
classList
.
add
(
'
over
'
);
dragged
=
gadget
.
dragged_slide
;
hovered
=
closest_section
.
getAttribute
(
'
data-slide-index
'
);
if
(
dragged
!==
hovered
)
{
if
(
closest_section
.
getAttribute
(
'
data-slide-index
'
))
{
moveSlide
(
this
,
parseInt
(
dragged
,
10
),
parseInt
(
hovered
,
10
));
}
}
}
},
false
,
false
)
},
false
,
false
)
.
onEvent
(
"
dragleave
"
,
function
(
evt
)
{
.
onEvent
(
"
dragleave
"
,
function
(
evt
)
{
var
tag_name
=
evt
.
target
.
tagName
;
//exits if mouse is indirectly over a section
if
(
tag_name
!==
'
SECTION
'
)
{
if
(
evt
.
relatedTarget
)
{
return
;
var
closest_section
=
evt
.
relatedTarget
.
closest
(
'
section
'
),
closest_slidelist
;
if
(
closest_section
!==
null
)
{
return
;
}
closest_slidelist
=
evt
.
relatedTarget
.
closest
(
'
div.slide_list
'
);
if
(
closest_slidelist
===
null
)
{
// We are no longer over the slides, reset slide's positions
moveSlide
(
this
,
-
1
,
-
1
);
}
}
}
evt
.
target
.
classList
.
remove
(
'
over
'
);
},
false
,
false
)
},
false
,
false
)
.
onEvent
(
"
drop
"
,
function
(
evt
)
{
.
onEvent
(
"
drop
"
,
function
(
evt
)
{
var
gadget
=
this
,
var
gadget
=
this
,
tag_name
=
evt
.
target
.
tagName
,
tag_name
=
evt
.
target
.
closest
(
'
section
'
).
tagName
,
slide_list
,
slide_list
,
source_index
,
source_index
,
destination_index
;
destination_index
;
...
@@ -794,17 +889,15 @@
...
@@ -794,17 +889,15 @@
evt
.
preventDefault
();
// Necessary. Allows us to drop.
evt
.
preventDefault
();
// Necessary. Allows us to drop.
}
}
// Remove the over class
evt
.
target
.
classList
.
remove
(
'
over
'
);
source_index
=
evt
.
dataTransfer
.
getData
(
'
application/x-dragged-slide
'
);
source_index
=
evt
.
dataTransfer
.
getData
(
'
application/x-dragged-slide
'
);
if
(
source_index
&&
evt
.
target
.
getAttribute
(
'
data-slide-index
'
))
{
if
(
source_index
&&
gadget
.
hovered_slide
)
{
source_index
=
parseInt
(
source_index
=
parseInt
(
source_index
,
source_index
,
10
10
);
);
destination_index
=
parseInt
(
destination_index
=
parseInt
(
evt
.
target
.
getAttribute
(
'
data-slide-index
'
)
,
gadget
.
hovered_slide
,
10
10
);
);
...
...
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment