eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #327 from pateljannat/image-in-lesson-webform

Browse Source 
feat: image markdown extension
This commit is contained in:
Jannat Patel
2022-04-25 11:42:58 +05:30
committed by GitHub
parent f047be816a 674c6a1684
commit 3bbe5d33d3
5 changed files with 136 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
lms/lms/doctype/course_lesson/course_lesson.json
View File

@@ -10,9 +10,9 @@
"field_order": [
"chapter",
"course",
"include_in_preview",
"column_break_4",
"title",
"include_in_preview",
"index_label",
"section_break_6",
"body",
@@ -75,7 +75,6 @@
"fetch_from": "chapter.course",
"fieldname": "course",
"fieldtype": "Link",
"hidden": 1,
"label": "Course",
"options": "LMS Course",
"read_only": 1
@@ -83,7 +82,7 @@
],
"index_web_pages_for_search": 1,
"links": [],
"modified": "2022-03-14 18:56:31.969801",
"modified": "2022-04-22 12:59:23.641915",
"modified_by": "Administrator",
"module": "LMS",
"name": "Course Lesson",

96
lms/lms/web_form/lesson/lesson.js
View File

@@ -1,16 +1,94 @@
frappe.ready(function() {
frappe.web_form.after_save = () => {
frappe.call({
frappe.web_form.after_load = () => {
add_file_upload_component();
fetch_course();
};
frappe.web_form.after_save = () => {
show_success_message();
};
$(document).on("click", ".add-attachment", (e) => {
show_upload_modal();
});
$(document).on("click", ".copy-link", (e) => {
frappe.utils.copy_to_clipboard($(e.currentTarget).data("link"));
$(".attachments").collapse("hide");
});
});
const fetch_course = () => {
frappe.call({
method: "lms.lms.doctype.course_lesson.course_lesson.get_lesson_info",
args: {
"chapter": frappe.web_form.doc.chapter
"chapter": frappe.web_form.doc.chapter
},
callback: (data) => {
frappe.msgprint(__(`Lesson has been saved successfully. Go back to the chapter and add this lesson to the lessons table.`));
setTimeout(() => {
window.location.href = `/courses/${data.message}`;
}, 3000);
this.course = data.message;
}
});
};
});
}
const show_upload_modal = () => {
new frappe.ui.FileUploader({
folder: "Home/Attachments",
restrictions: {
allowed_file_types: ['image/*']
},
on_success: (file_doc) => {
$(".attachments").append(build_attachment_table(file_doc));
let count = $(".attachment-count").data("count") + 1;
$(".attachment-count").data("count", count);
$(".attachment-count").html(__(`${count} attachments`));
$(".attachments").removeClass("hide");
},
});
};
const show_success_message = () => {
frappe.msgprint(__(`Lesson has been saved successfully. Go back to the chapter and add this lesson to the lessons table.`));
setTimeout(() => {
window.location.href = `/courses/${this.course}`;
}, 2000);
};
const add_file_upload_component = () => {
$(get_attachment_controls_html()).insertBefore($(`[data-fieldname="include_in_preview"]`).first());
};
const get_attachment_controls_html = () => {
return `
<div class="attachments-parent">
<div class="attachment-controls">
<div class="show-attachments" data-toggle="collapse" data-target="#collapse-attachments" aria-expanded="false">
<svg class="icon icon-sm">
<use class="" href="#icon-attachment">
</svg>
<span class="attachment-count" data-count="0">0 {{ _("attachments") }}</span>
</div>
<div class="add-attachment">
<span class="button is-secondary">
<svg class="icon icon-sm">
<use class="" href="#icon-upload">
</svg>
{{ _("Upload Attachments") }}
</span>
</div>
</div>
<table class="attachments common-card-style collapse hide" id="collapse-attachments"></table>
</div>
`;
};
const build_attachment_table = (file_doc) => {
return $(`
<tr class="attachment-row">
<td>${file_doc.file_name}</td>
<td class=""><a class="button is-secondary button-links copy-link" data-link="![](${file_doc.file_url})"
data-name="${file_doc.file_name}" > {{ _("Copy Link") }} </a></td>
</tr>
`);
};

10
lms/lms/web_form/lesson/lesson.json
View File

@@ -11,17 +11,17 @@
"apply_document_permissions": 1,
"button_label": "Save",
"creation": "2022-03-07 18:41:42.549831",
"custom_css": "",
"custom_css": "#introduction {\n font-size: var(--text-base);\n}",
"doc_type": "Course Lesson",
"docstatus": 0,
"doctype": "Web Form",
"idx": 0,
"introduction_text": "<div class=\"ql-editor read-mode\"><p><br></p><p><br></p><p>Create lessons for your course. You can add some additional content to the lesson using a special syntax. The table below mentions all types of dynamic content that you can add to the lessons and the syntax for the same.</p><p><br></p><table class=\"table table-bordered\"><tbody><tr><td data-row=\"row-wxk1\"><strong>Content Type</strong></td><td data-row=\"row-wxk1\"><strong>Syntax</strong></td></tr><tr><td data-row=\"row-lawj\">Video</td><td data-row=\"row-lawj\">{{ Video(\"url_of_source\") }}</td></tr><tr><td data-row=\"insert-table\">YouTube Video</td><td data-row=\"insert-table\">{{ YouTubeVideo(\"unique_embed_id\") }}</td></tr><tr><td data-row=\"insert-row-below\">Exercise</td><td data-row=\"insert-row-below\">{{ Exercise(\"exercise_name\") }}</td></tr><tr><td data-row=\"row-3b6n\">Quiz</td><td data-row=\"row-3b6n\">{{ Quiz(\"lms_quiz_name\") }}</td></tr><tr><td data-row=\"row-r57s\">Assignment</td><td data-row=\"row-r57s\">{{ Assignment(\"id-filetype\") }}</td></tr></tbody></table></div>",
"introduction_text": "<div class=\"ql-editor read-mode\">\n <p>Create lessons for your course. For adding content, use markdown syntax. You can add some additional content to the lesson using a special syntax. The table below mentions all types of dynamic content that you can add to the lessons and the syntax for the same.</p>\n <table class=\"table table-bordered\">\n <tbody>\n <tr>\n <td data-row=\"row-wxk1\">\n <strong>Content Type</strong>\n </td>\n <td data-row=\"row-wxk1\">\n <strong> Syntax </strong>\n </td>\n </tr>\n <tr>\n <td data-row=\"row-r57s\"> Assignment </td>\n <td data-row=\"row-r57s\">{{ Assignment(\"id-filetype\") }}</td>\n </tr>\n <tr>\n <td data-row=\"row-3b6n\"> Quiz </td>\n <td data-row=\"row-3b6n\">{{ Quiz(\"lms_quiz_name\") }}</td>\n </tr>\n <tr>\n <td data-row=\"insert-table\"> YouTube Video </td>\n <td data-row=\"insert-table\">{{ YouTubeVideo(\"unique_embed_id\") }}</td>\n </tr>\n </tbody>\n </table>\n <p> <b> Note: </b> You can also attach videos from Vimeo by including the iframe embed of the video to the lesson. </p>\n</div>",
"is_multi_step_form": 0,
"is_standard": 1,
"login_required": 1,
"max_attachment_size": 0,
"modified": "2022-03-14 18:49:33.526455",
"modified": "2022-04-25 10:26:12.691050",
"modified_by": "Administrator",
"module": "LMS",
"name": "lesson",
@@ -34,7 +34,7 @@
"show_in_grid": 0,
"show_sidebar": 0,
"sidebar_items": [],
"success_url": "/lesson",
"success_url": "",
"title": "Lesson",
"web_form_fields": [
{
@@ -80,7 +80,7 @@
"fieldname": "body",
"fieldtype": "Text",
"hidden": 0,
"label": "Body",
"label": "Content",
"max_length": 0,
"max_value": 0,
"read_only": 0,

29
lms/public/css/style.css
View File

@@ -1414,3 +1414,32 @@ pre {
.btn-outline-primary {
border: 1px solid var(--primary-color);
}
.show-attachments {
padding-right: 0.5rem;
display: flex;
align-items: center;
}
.attachment-controls {
display: flex;
align-items: center;
width: fit-content;
cursor: pointer;
}
.attachments {
flex-direction: column;
padding: 0.5rem 0;
margin-top: 1rem;
position: absolute;
z-index: 1;
width: fit-content;
border-collapse: separate;
border-spacing: 1rem 0.5rem;
}
.attachments-parent {
float: right;
font-size: var(--text-sm);
}

13
lms/public/icons/symbol-defs.svg
View File

@@ -28,4 +28,17 @@
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
<svg width="16" height="16" viewBox="0 0 16 16" id="icon-upload" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899
4.41015 14.5 8 14.5Z" stroke="#505A62" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 4.75V11.1351" stroke="#505A62" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.29102 7.45833L7.99935 4.75L10.7077 7.45833" stroke="#505A62" stroke-miterlimit="10" stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
<svg width="14" height="14" id="icon-attachment" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.6004 6.68841L7.6414 11.5616C6.23259 12.946 3.8658 12.946 2.45699 11.5616C1.04819 10.1772
1.04819 7.85132 2.45699 6.4669L6.85247 2.14749C7.86681 1.15071 9.44467 1.15071 10.459 2.14749C11.4733
3.14428 11.4733 4.69483 10.459 5.69162L6.40165 9.62339C5.83813 10.1772 4.93649 10.1772 4.42932 9.62339C3.8658
9.06962 3.8658 8.18359 4.42932 7.68519L7.81045 4.36257" stroke="#2D95F0" stroke-miterlimit="10" stroke-linecap="round"/>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 10 KiB