L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-59691 assignfeedback_editpdf: Allow comment placement to all edges

Browse Source 
Plus a couple of extra usability improvements:
- Collapse comment during move to allow precise placement
- Change cursor style to indicate that dragging is possible
This commit is contained in:
Tony Butler
2018-04-09 16:56:35 +01:00
parent 8531f802ec
commit 3eef55dda4
6 changed files with 279 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mod/assign/feedback/editpdf/styles.css
+7 -2
View File
@@ -27,7 +27,12 @@
}
.assignfeedback_editpdf_widget .drawingregion[data-currenttool=select] .drawingcanvas {
cursor: pointer;
cursor: default;
}
.assignfeedback_editpdf_widget .drawingregion[data-currenttool=select] .commentdrawable textarea,
.assignfeedback_editpdf_widget .drawingregion[data-currenttool=select] .commentdrawable svg {
cursor: move;
}
.assignfeedback_editpdf_widget .drawingregion {
@@ -337,7 +342,7 @@ ul.assignfeedback_editpdf_menu {
}
.assignfeedback_editpdf_widget .commentdrawable {
display: inline-block;
display: flex;
z-index: 1;
}
mod/assign/feedback/editpdf/yui/build/moodle-assignfeedback_editpdf-editor/moodle-assignfeedback_editpdf-editor-debug.js
Vendored
+89 -31
View File
@@ -2626,35 +2626,37 @@ var COMMENT = function(editor, gradeid, pageno, x, y, width, colour, rawtext) {
*/
this.attach_events = function(node, menu) {
var container = node.ancestor('div'),
label = node.ancestor('label');
label = node.ancestor('label'),
marker = label.next('svg');
// Function to collapse a comment to a marker icon.
node.collapse = function(delay) {
node.collapse.delay = Y.later(delay, node, function() {
container.addClass('commentcollapsed');
if (editor.collapsecomments) {
container.addClass('commentcollapsed');
}
});
};
// Function to expand a comment.
node.expand = function() {
container.removeClass('commentcollapsed');
if (node.getData('dragging') !== true) {
if (node.collapse.delay) {
node.collapse.delay.cancel();
}
container.removeClass('commentcollapsed');
}
};
// Expand comment on mouse over (under certain conditions) or click/tap.
container.on('mouseenter', function() {
if (editor.currentedit.tool === 'comment' || editor.currentedit.tool === 'select' || this.editor.get('readonly')) {
node.expand();
if (node.collapse.delay) {
node.collapse.delay.cancel();
}
}
}, this);
container.on('click', function() {
container.on('click|tap', function() {
node.expand();
node.focus();
if (node.collapse.delay) {
node.collapse.delay.cancel();
}
}, this);
// Functions to capture reverse tabbing events.
@@ -2714,9 +2716,7 @@ var COMMENT = function(editor, gradeid, pageno, x, y, width, colour, rawtext) {
// Collapse comment on blur.
container.on('blur', function() {
node.active = false;
if (editor.collapsecomments) {
node.collapse(800);
}
node.collapse(800);
}, this);
if (!this.editor.get('readonly')) {
@@ -2753,38 +2753,37 @@ var COMMENT = function(editor, gradeid, pageno, x, y, width, colour, rawtext) {
node.on('gesturemovestart', function(e) {
if (editor.currentedit.tool === 'select') {
e.preventDefault();
node.setData('dragging', true);
node.setData('offsetx', e.clientX - node.getX());
node.setData('offsety', e.clientY - node.getY());
if (editor.collapsecomments) {
node.setData('offsetx', 8);
node.setData('offsety', 8);
} else {
node.setData('offsetx', e.clientX - container.getX());
node.setData('offsety', e.clientY - container.getY());
}
}
});
node.on('gesturemoveend', function() {
if (editor.currentedit.tool === 'select') {
node.setData('dragging', false);
this.editor.save_current_page();
}
}, null, this);
node.on('gesturemove', function(e) {
if (editor.currentedit.tool === 'select') {
var x = e.clientX - node.getData('offsetx'),
y = e.clientY - node.getData('offsety'),
nodewidth,
nodeheight,
newlocation,
windowlocation,
bounds;
nodewidth = parseInt(node.getStyle('width'), 10);
nodeheight = parseInt(node.getStyle('height'), 10);
if (node.getData('dragging') !== true) {
// Collapse comment during move.
node.collapse(0);
node.setData('dragging', true);
}
newlocation = this.editor.get_canvas_coordinates(new M.assignfeedback_editpdf.point(x, y));
bounds = this.editor.get_canvas_bounds(true);
bounds.x = 0;
bounds.y = 0;
bounds.width -= nodewidth + 42;
bounds.height -= nodeheight + 8;
// Clip to the window size - the comment size.
bounds.width -= 24;
bounds.height -= 24;
// Clip to the window size - the comment icon size.
newlocation.clip(bounds);
this.x = newlocation.x;
@@ -2796,6 +2795,63 @@ var COMMENT = function(editor, gradeid, pageno, x, y, width, colour, rawtext) {
this.drawable.store_position(container, windowlocation.x, windowlocation.y);
}
}, null, this);
node.on('gesturemoveend', function() {
if (editor.currentedit.tool === 'select') {
if (node.getData('dragging') === true) {
node.setData('dragging', false);
}
this.editor.save_current_page();
}
}, null, this);
marker.on('gesturemovestart', function(e) {
if (editor.currentedit.tool === 'select') {
e.preventDefault();
node.setData('offsetx', e.clientX - container.getX());
node.setData('offsety', e.clientY - container.getY());
node.expand();
}
});
marker.on('gesturemove', function(e) {
if (editor.currentedit.tool === 'select') {
var x = e.clientX - node.getData('offsetx'),
y = e.clientY - node.getData('offsety'),
newlocation,
windowlocation,
bounds;
if (node.getData('dragging') !== true) {
// Collapse comment during move.
node.collapse(100);
node.setData('dragging', true);
}
newlocation = this.editor.get_canvas_coordinates(new M.assignfeedback_editpdf.point(x, y));
bounds = this.editor.get_canvas_bounds(true);
bounds.x = 0;
bounds.y = 0;
bounds.width -= 24;
bounds.height -= 24;
// Clip to the window size - the comment icon size.
newlocation.clip(bounds);
this.x = newlocation.x;
this.y = newlocation.y;
windowlocation = this.editor.get_window_coordinates(newlocation);
container.setX(windowlocation.x);
container.setY(windowlocation.y);
this.drawable.store_position(container, windowlocation.x, windowlocation.y);
}
}, null, this);
marker.on('gesturemoveend', function() {
if (editor.currentedit.tool === 'select') {
if (node.getData('dragging') === true) {
node.setData('dragging', false);
}
this.editor.save_current_page();
}
}, null, this);
this.menu = new M.assignfeedback_editpdf.commentmenu({
buttonNode: this.menulink,
@@ -4450,13 +4506,15 @@ EDITOR.prototype = {
* @method expandCollapseComments
*/
expandCollapseComments: function() {
var comments = Y.all('.commentdrawable');
if (this.collapsecomments) {
this.collapsecomments = false;
comments.removeClass('commentcollapsed');
} else {
this.collapsecomments = true;
comments.addClass('commentcollapsed');
}
this.redraw();
},
/**
mod/assign/feedback/editpdf/yui/build/moodle-assignfeedback_editpdf-editor/moodle-assignfeedback_editpdf-editor-min.js
Vendored
+5 -5
View File
File diff suppressed because one or more lines are too long
mod/assign/feedback/editpdf/yui/build/moodle-assignfeedback_editpdf-editor/moodle-assignfeedback_editpdf-editor.js
Vendored
+89 -31
View File
@@ -2626,35 +2626,37 @@ var COMMENT = function(editor, gradeid, pageno, x, y, width, colour, rawtext) {
*/
this.attach_events = function(node, menu) {
var container = node.ancestor('div'),
label = node.ancestor('label');
label = node.ancestor('label'),
marker = label.next('svg');
// Function to collapse a comment to a marker icon.
node.collapse = function(delay) {
node.collapse.delay = Y.later(delay, node, function() {
container.addClass('commentcollapsed');
if (editor.collapsecomments) {
container.addClass('commentcollapsed');
}
});
};
// Function to expand a comment.
node.expand = function() {
container.removeClass('commentcollapsed');
if (node.getData('dragging') !== true) {
if (node.collapse.delay) {
node.collapse.delay.cancel();
}
container.removeClass('commentcollapsed');
}
};
// Expand comment on mouse over (under certain conditions) or click/tap.
container.on('mouseenter', function() {
if (editor.currentedit.tool === 'comment' || editor.currentedit.tool === 'select' || this.editor.get('readonly')) {
node.expand();
if (node.collapse.delay) {
node.collapse.delay.cancel();
}
}
}, this);
container.on('click', function() {
container.on('click|tap', function() {
node.expand();
node.focus();
if (node.collapse.delay) {
node.collapse.delay.cancel();
}
}, this);
// Functions to capture reverse tabbing events.
@@ -2714,9 +2716,7 @@ var COMMENT = function(editor, gradeid, pageno, x, y, width, colour, rawtext) {
// Collapse comment on blur.
container.on('blur', function() {
node.active = false;
if (editor.collapsecomments) {
node.collapse(800);
}
node.collapse(800);
}, this);
if (!this.editor.get('readonly')) {
@@ -2753,38 +2753,37 @@ var COMMENT = function(editor, gradeid, pageno, x, y, width, colour, rawtext) {
node.on('gesturemovestart', function(e) {
if (editor.currentedit.tool === 'select') {
e.preventDefault();
node.setData('dragging', true);
node.setData('offsetx', e.clientX - node.getX());
node.setData('offsety', e.clientY - node.getY());
if (editor.collapsecomments) {
node.setData('offsetx', 8);
node.setData('offsety', 8);
} else {
node.setData('offsetx', e.clientX - container.getX());
node.setData('offsety', e.clientY - container.getY());
}
}
});
node.on('gesturemoveend', function() {
if (editor.currentedit.tool === 'select') {
node.setData('dragging', false);
this.editor.save_current_page();
}
}, null, this);
node.on('gesturemove', function(e) {
if (editor.currentedit.tool === 'select') {
var x = e.clientX - node.getData('offsetx'),
y = e.clientY - node.getData('offsety'),
nodewidth,
nodeheight,
newlocation,
windowlocation,
bounds;
nodewidth = parseInt(node.getStyle('width'), 10);
nodeheight = parseInt(node.getStyle('height'), 10);
if (node.getData('dragging') !== true) {
// Collapse comment during move.
node.collapse(0);
node.setData('dragging', true);
}
newlocation = this.editor.get_canvas_coordinates(new M.assignfeedback_editpdf.point(x, y));
bounds = this.editor.get_canvas_bounds(true);
bounds.x = 0;
bounds.y = 0;
bounds.width -= nodewidth + 42;
bounds.height -= nodeheight + 8;
// Clip to the window size - the comment size.
bounds.width -= 24;
bounds.height -= 24;
// Clip to the window size - the comment icon size.
newlocation.clip(bounds);
this.x = newlocation.x;
@@ -2796,6 +2795,63 @@ var COMMENT = function(editor, gradeid, pageno, x, y, width, colour, rawtext) {
this.drawable.store_position(container, windowlocation.x, windowlocation.y);
}
}, null, this);
node.on('gesturemoveend', function() {
if (editor.currentedit.tool === 'select') {
if (node.getData('dragging') === true) {
node.setData('dragging', false);
}
this.editor.save_current_page();
}
}, null, this);
marker.on('gesturemovestart', function(e) {
if (editor.currentedit.tool === 'select') {
e.preventDefault();
node.setData('offsetx', e.clientX - container.getX());
node.setData('offsety', e.clientY - container.getY());
node.expand();
}
});
marker.on('gesturemove', function(e) {
if (editor.currentedit.tool === 'select') {
var x = e.clientX - node.getData('offsetx'),
y = e.clientY - node.getData('offsety'),
newlocation,
windowlocation,
bounds;
if (node.getData('dragging') !== true) {
// Collapse comment during move.
node.collapse(100);
node.setData('dragging', true);
}
newlocation = this.editor.get_canvas_coordinates(new M.assignfeedback_editpdf.point(x, y));
bounds = this.editor.get_canvas_bounds(true);
bounds.x = 0;
bounds.y = 0;
bounds.width -= 24;
bounds.height -= 24;
// Clip to the window size - the comment icon size.
newlocation.clip(bounds);
this.x = newlocation.x;
this.y = newlocation.y;
windowlocation = this.editor.get_window_coordinates(newlocation);
container.setX(windowlocation.x);
container.setY(windowlocation.y);
this.drawable.store_position(container, windowlocation.x, windowlocation.y);
}
}, null, this);
marker.on('gesturemoveend', function() {
if (editor.currentedit.tool === 'select') {
if (node.getData('dragging') === true) {
node.setData('dragging', false);
}
this.editor.save_current_page();
}
}, null, this);
this.menu = new M.assignfeedback_editpdf.commentmenu({
buttonNode: this.menulink,
@@ -4450,13 +4506,15 @@ EDITOR.prototype = {
* @method expandCollapseComments
*/
expandCollapseComments: function() {
var comments = Y.all('.commentdrawable');
if (this.collapsecomments) {
this.collapsecomments = false;
comments.removeClass('commentcollapsed');
} else {
this.collapsecomments = true;
comments.addClass('commentcollapsed');
}
this.redraw();
},
/**
mod/assign/feedback/editpdf/yui/src/editor/js/comment.js
Vendored
+85 -29
View File
@@ -249,35 +249,37 @@ var COMMENT = function(editor, gradeid, pageno, x, y, width, colour, rawtext) {
*/
this.attach_events = function(node, menu) {
var container = node.ancestor('div'),
label = node.ancestor('label');
label = node.ancestor('label'),
marker = label.next('svg');
// Function to collapse a comment to a marker icon.
node.collapse = function(delay) {
node.collapse.delay = Y.later(delay, node, function() {
container.addClass('commentcollapsed');
if (editor.collapsecomments) {
container.addClass('commentcollapsed');
}
});
};
// Function to expand a comment.
node.expand = function() {
container.removeClass('commentcollapsed');
if (node.getData('dragging') !== true) {
if (node.collapse.delay) {
node.collapse.delay.cancel();
}
container.removeClass('commentcollapsed');
}
};
// Expand comment on mouse over (under certain conditions) or click/tap.
container.on('mouseenter', function() {
if (editor.currentedit.tool === 'comment' || editor.currentedit.tool === 'select' || this.editor.get('readonly')) {
node.expand();
if (node.collapse.delay) {
node.collapse.delay.cancel();
}
}
}, this);
container.on('click', function() {
container.on('click|tap', function() {
node.expand();
node.focus();
if (node.collapse.delay) {
node.collapse.delay.cancel();
}
}, this);
// Functions to capture reverse tabbing events.
@@ -337,9 +339,7 @@ var COMMENT = function(editor, gradeid, pageno, x, y, width, colour, rawtext) {
// Collapse comment on blur.
container.on('blur', function() {
node.active = false;
if (editor.collapsecomments) {
node.collapse(800);
}
node.collapse(800);
}, this);
if (!this.editor.get('readonly')) {
@@ -376,38 +376,37 @@ var COMMENT = function(editor, gradeid, pageno, x, y, width, colour, rawtext) {
node.on('gesturemovestart', function(e) {
if (editor.currentedit.tool === 'select') {
e.preventDefault();
node.setData('dragging', true);
node.setData('offsetx', e.clientX - node.getX());
node.setData('offsety', e.clientY - node.getY());
if (editor.collapsecomments) {
node.setData('offsetx', 8);
node.setData('offsety', 8);
} else {
node.setData('offsetx', e.clientX - container.getX());
node.setData('offsety', e.clientY - container.getY());
}
}
});
node.on('gesturemoveend', function() {
if (editor.currentedit.tool === 'select') {
node.setData('dragging', false);
this.editor.save_current_page();
}
}, null, this);
node.on('gesturemove', function(e) {
if (editor.currentedit.tool === 'select') {
var x = e.clientX - node.getData('offsetx'),
y = e.clientY - node.getData('offsety'),
nodewidth,
nodeheight,
newlocation,
windowlocation,
bounds;
nodewidth = parseInt(node.getStyle('width'), 10);
nodeheight = parseInt(node.getStyle('height'), 10);
if (node.getData('dragging') !== true) {
// Collapse comment during move.
node.collapse(0);
node.setData('dragging', true);
}
newlocation = this.editor.get_canvas_coordinates(new M.assignfeedback_editpdf.point(x, y));
bounds = this.editor.get_canvas_bounds(true);
bounds.x = 0;
bounds.y = 0;
bounds.width -= nodewidth + 42;
bounds.height -= nodeheight + 8;
// Clip to the window size - the comment size.
bounds.width -= 24;
bounds.height -= 24;
// Clip to the window size - the comment icon size.
newlocation.clip(bounds);
this.x = newlocation.x;
@@ -419,6 +418,63 @@ var COMMENT = function(editor, gradeid, pageno, x, y, width, colour, rawtext) {
this.drawable.store_position(container, windowlocation.x, windowlocation.y);
}
}, null, this);
node.on('gesturemoveend', function() {
if (editor.currentedit.tool === 'select') {
if (node.getData('dragging') === true) {
node.setData('dragging', false);
}
this.editor.save_current_page();
}
}, null, this);
marker.on('gesturemovestart', function(e) {
if (editor.currentedit.tool === 'select') {
e.preventDefault();
node.setData('offsetx', e.clientX - container.getX());
node.setData('offsety', e.clientY - container.getY());
node.expand();
}
});
marker.on('gesturemove', function(e) {
if (editor.currentedit.tool === 'select') {
var x = e.clientX - node.getData('offsetx'),
y = e.clientY - node.getData('offsety'),
newlocation,
windowlocation,
bounds;
if (node.getData('dragging') !== true) {
// Collapse comment during move.
node.collapse(100);
node.setData('dragging', true);
}
newlocation = this.editor.get_canvas_coordinates(new M.assignfeedback_editpdf.point(x, y));
bounds = this.editor.get_canvas_bounds(true);
bounds.x = 0;
bounds.y = 0;
bounds.width -= 24;
bounds.height -= 24;
// Clip to the window size - the comment icon size.
newlocation.clip(bounds);
this.x = newlocation.x;
this.y = newlocation.y;
windowlocation = this.editor.get_window_coordinates(newlocation);
container.setX(windowlocation.x);
container.setY(windowlocation.y);
this.drawable.store_position(container, windowlocation.x, windowlocation.y);
}
}, null, this);
marker.on('gesturemoveend', function() {
if (editor.currentedit.tool === 'select') {
if (node.getData('dragging') === true) {
node.setData('dragging', false);
}
this.editor.save_current_page();
}
}, null, this);
this.menu = new M.assignfeedback_editpdf.commentmenu({
buttonNode: this.menulink,
mod/assign/feedback/editpdf/yui/src/editor/js/editor.js
Vendored
+4 -2
View File
@@ -1234,13 +1234,15 @@ EDITOR.prototype = {
* @method expandCollapseComments
*/
expandCollapseComments: function() {
var comments = Y.all('.commentdrawable');
if (this.collapsecomments) {
this.collapsecomments = false;
comments.removeClass('commentcollapsed');
} else {
this.collapsecomments = true;
comments.addClass('commentcollapsed');
}
this.redraw();
},
/**