mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-09 02:12:22 +02:00
Code Issues Projects Releases Wiki Activity

MDL-68446 drag to image qtypes: remove hard-coded image size limits

Browse Source
This commit is contained in:
Huong Nguyen 2020-04-28 14:42:52 +07:00 committed by Tim Hunt
parent f570a79071
commit d0311165a7
11 changed files with 8 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
question/type/ddimageortext/amd/build/form.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
question/type/ddimageortext/amd/build/form.min.js.map
View File

File diff suppressed because one or more lines are too long

27
question/type/ddimageortext/amd/src/form.js
View File

@ -48,13 +48,8 @@ define(['jquery', 'core/dragdrop'], function($, dragDrop) {
/**
* Initialise the form javascript features.
*
* @param {Object} maxBgImageSize object with two properties: width and height.
* @param {Object} maxDragImageSize object with two properties: width and height.
*/
init: function(maxBgImageSize, maxDragImageSize) {
dragDropToImageForm.maxBgImageSize = maxBgImageSize;
dragDropToImageForm.maxDragImageSize = maxDragImageSize;
init: function() {
dragDropToImageForm.fp = dragDropToImageForm.filePickers();
$('#id_previewareaheader').append(
@ -108,27 +103,10 @@ define(['jquery', 'core/dragdrop'], function($, dragDrop) {
* After the background image is loaded, continue setting up the preview.
*/
afterPreviewImageLoaded: function() {
var bgImg = $('fieldset#id_previewareaheader .dropbackground');
dragDropToImageForm.constrainImageSize(bgImg, dragDropToImageForm.maxBgImageSize);
dragDropToImageForm.createDropZones();
M.util.js_complete('dragDropToImageForm');
},
/**
* Limits an image display size to the given maximums.
*
* @param {jQuery} img the image.
* @param {Object} maxSize with width and height properties.
*/
constrainImageSize: function(img, maxSize) {
var reduceby = Math.max(img.width() / maxSize.width,
img.height() / maxSize.height);
if (reduceby > 1) {
img.css('width', Math.floor(img.width() / reduceby));
}
img.addClass('constrained');
},
/**
* Create, or recreate all the drop zones.
*/
@ -532,9 +510,6 @@ define(['jquery', 'core/dragdrop'], function($, dragDrop) {
return {
/**
* Initialise the form JavaScript features.
*
* @param {Object} maxBgImageSize object with two properties: width and height.
* @param {Object} maxDragImageSize object with two properties: width and height.
*/
init: dragDropToImageForm.init
};

12
question/type/ddimageortext/edit_ddimageortext_form.php
View File

@ -108,17 +108,7 @@ class qtype_ddimageortext_edit_form extends qtype_ddtoimage_edit_form_base {
public function js_call() {
global $PAGE;
$maxbgimagesize = [
'width' => QTYPE_DDIMAGEORTEXT_BGIMAGE_MAXWIDTH,
'height' => QTYPE_DDIMAGEORTEXT_BGIMAGE_MAXHEIGHT
];
$maxdragimagesize = [
'width' => QTYPE_DDIMAGEORTEXT_DRAGIMAGE_MAXWIDTH,
'height' => QTYPE_DDIMAGEORTEXT_DRAGIMAGE_MAXHEIGHT
];
$PAGE->requires->js_call_amd('qtype_ddimageortext/form', 'init',
[$maxbgimagesize, $maxdragimagesize]);
$PAGE->requires->js_call_amd('qtype_ddimageortext/form', 'init');
}
// Drag items.

12
question/type/ddimageortext/questiontype.php
View File

@ -27,11 +27,6 @@ defined('MOODLE_INTERNAL') || die();
require_once($CFG->dirroot . '/question/type/ddimageortext/questiontypebase.php');
define('QTYPE_DDIMAGEORTEXT_BGIMAGE_MAXWIDTH', 600);
define('QTYPE_DDIMAGEORTEXT_BGIMAGE_MAXHEIGHT', 400);
define('QTYPE_DDIMAGEORTEXT_DRAGIMAGE_MAXWIDTH', 150);
define('QTYPE_DDIMAGEORTEXT_DRAGIMAGE_MAXHEIGHT', 100);
/**
* The drag-and-drop onto image question type class.
*
@ -114,9 +109,6 @@ class qtype_ddimageortext extends qtype_ddtoimage_base {
}
if ($formdata->drags[$dragno]['dragitemtype'] == 'image') {
self::constrain_image_size_in_draft_area($draftitemid,
QTYPE_DDIMAGEORTEXT_DRAGIMAGE_MAXWIDTH,
QTYPE_DDIMAGEORTEXT_DRAGIMAGE_MAXHEIGHT);
file_save_draft_area_files($draftitemid, $formdata->context->id,
'qtype_ddimageortext', 'dragimage', $drag->id,
array('subdirs' => 0, 'maxbytes' => 0, 'maxfiles' => 1));
@ -135,10 +127,6 @@ class qtype_ddimageortext extends qtype_ddtoimage_base {
list($sql, $params) = $DB->get_in_or_equal(array_values($olddragids));
$DB->delete_records_select('qtype_ddimageortext_drags', "id $sql", $params);
}
self::constrain_image_size_in_draft_area($formdata->bgimage,
QTYPE_DDIMAGEORTEXT_BGIMAGE_MAXWIDTH,
QTYPE_DDIMAGEORTEXT_BGIMAGE_MAXHEIGHT);
file_save_draft_area_files($formdata->bgimage, $formdata->context->id,
'qtype_ddimageortext', 'bgimage', $formdata->id,
array('subdirs' => 0, 'maxbytes' => 0, 'maxfiles' => 1));

44
question/type/ddimageortext/questiontypebase.php
View File

@ -102,50 +102,6 @@ class qtype_ddtoimage_base extends question_type {
}
}
public static function constrain_image_size_in_draft_area($draftitemid, $maxwidth, $maxheight) {
global $USER;
$usercontext = context_user::instance($USER->id);
$fs = get_file_storage();
$draftfiles = $fs->get_area_files($usercontext->id, 'user', 'draft', $draftitemid, 'id');
if ($draftfiles) {
foreach ($draftfiles as $file) {
if ($file->is_directory()) {
continue;
}
$imageinfo = $file->get_imageinfo();
$width = $imageinfo['width'];
$height = $imageinfo['height'];
$mimetype = $imageinfo['mimetype'];
switch ($mimetype) {
case 'image/jpeg' :
$quality = 80;
break;
case 'image/png' :
$quality = 8;
break;
default :
$quality = null;
}
$newwidth = min($maxwidth, $width);
$newheight = min($maxheight, $height);
if ($newwidth != $width || $newheight != $height) {
$newimagefilename = $file->get_filename();
$newimagefilename =
preg_replace('!\.!', "_{$newwidth}x{$newheight}.", $newimagefilename, 1);
$newrecord = new stdClass();
$newrecord->contextid = $usercontext->id;
$newrecord->component = 'user';
$newrecord->filearea = 'draft';
$newrecord->itemid = $draftitemid;
$newrecord->filepath = '/';
$newrecord->filename = $newimagefilename;
$fs->convert_image($newrecord, $file, $newwidth, $newheight, true, $quality);
$file->delete();
}
}
}
}
/**
* Convert files into text output in the given format.
* This method is copied from qformat_default as a quick fix, as the method there is

2
question/type/ddmarker/amd/build/form.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
question/type/ddmarker/amd/build/form.min.js.map
View File

File diff suppressed because one or more lines are too long

24
question/type/ddmarker/amd/src/form.js
View File

@ -351,11 +351,6 @@ define(['jquery', 'core/dragdrop', 'qtype_ddmarker/shapes'], function($, dragDro
*/
var dragDropForm = {
/**
* @var {object} with properties width and height.
*/
maxSizes: null, // Object containing maximum sizes for the background image.
/**
* @var {object} for interacting with the file pickers.
*/
@ -373,11 +368,8 @@ define(['jquery', 'core/dragdrop', 'qtype_ddmarker/shapes'], function($, dragDro
/**
* Initialise the form.
*
* @param {Object} maxBgimageSize object with two properties width and height.
*/
init: function(maxBgimageSize) {
dragDropForm.maxSizes = maxBgimageSize;
init: function() {
dragDropForm.fp = dragDropForm.filePickers();
dragDropForm.noDropZones = dragDropForm.form.getFormValue('nodropzone', []);
dragDropForm.setupPreviewArea();
@ -578,26 +570,12 @@ define(['jquery', 'core/dragdrop', 'qtype_ddmarker/shapes'], function($, dragDro
*/
afterPreviewImageLoaded: function() {
var bgImg = $('fieldset#id_previewareaheader .dropbackground');
dragDropForm.constrainImageSize();
// Place the dropzone area over the background image (adding one to account for the border).
$('#ddm-dropzone').css('position', 'relative').css('top', (bgImg.height() + 1) * -1);
$('#ddm-droparea').css('height', bgImg.height() + 20);
dragDropForm.updateSvgDisplay();
},
/**
* Limits the background image display size.
*/
constrainImageSize: function() {
var bgImg = $('fieldset#id_previewareaheader .dropbackground');
var reduceby = Math.max(bgImg.width() / dragDropForm.maxSizes.width,
bgImg.height() / dragDropForm.maxSizes.height);
if (reduceby > 1) {
bgImg.css('width', Math.floor(bgImg.width() / reduceby));
}
bgImg.addClass('constrained');
},
/**
* Draws or re-draws all dropzones in the preview area based on form data.
* Call this function when there is a change in the form data.

5
question/type/ddmarker/edit_ddmarker_form.php
View File

@ -53,10 +53,7 @@ class qtype_ddmarker_edit_form extends qtype_ddtoimage_edit_form_base {
public function js_call() {
global $PAGE;
$maxsize = ['width' => QTYPE_DDMARKER_BGIMAGE_MAXWIDTH,
'height' => QTYPE_DDMARKER_BGIMAGE_MAXHEIGHT];
$PAGE->requires->js_call_amd('qtype_ddmarker/form', 'init', [$maxsize]);
$PAGE->requires->js_call_amd('qtype_ddmarker/form', 'init');
}

7
question/type/ddmarker/questiontype.php
View File

@ -28,9 +28,6 @@ defined('MOODLE_INTERNAL') || die();
require_once($CFG->dirroot . '/question/type/ddimageortext/questiontypebase.php');
define('QTYPE_DDMARKER_BGIMAGE_MAXWIDTH', 600);
define('QTYPE_DDMARKER_BGIMAGE_MAXHEIGHT', 400);
/**
* Question hint for ddmarker.
*
@ -151,10 +148,6 @@ class qtype_ddmarker extends qtype_ddtoimage_base {
list($sql, $params) = $DB->get_in_or_equal(array_values($olddragids));
$DB->delete_records_select('qtype_ddmarker_drags', "id $sql", $params);
}
self::constrain_image_size_in_draft_area($formdata->bgimage,
QTYPE_DDMARKER_BGIMAGE_MAXWIDTH,
QTYPE_DDMARKER_BGIMAGE_MAXHEIGHT);
file_save_draft_area_files($formdata->bgimage, $formdata->context->id,
'qtype_ddmarker', 'bgimage', $formdata->id,
array('subdirs' => 0, 'maxbytes' => 0, 'maxfiles' => 1));