Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add share link button when hide from toc is enabled in sections (#34043)

Browse Source 
* feat: add share link modal when hide from toc is enabled

Adds a new button in the child subsections of sections with Hide From TOC enabled.
This button displays a new modal with two tabs. The first tab displays a button
that allows you to copy the link of that subsection to the clipboard. The second
tab displays a button that allows you to copy the embedded link of the same
subsection to the clipboard.

Ref: https://openedx.atlassian.net/wiki/spaces/OEPM/pages/3853975595/Feature+Enhancement+Proposal+Hide+Sections+from+course+outline
This commit is contained in:
Bryann Valderrama
2024-03-07 13:12:17 -05:00
committed by GitHub
parent c848767369
commit 19bc5c802c
17 changed files with 516 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cms/templates/course_outline.html
View File

@@ -29,7 +29,7 @@ from django.urls import reverse
<%block name="header_extras">
<link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
% for template_name in ['course-outline', 'xblock-string-field-editor', 'basic-modal', 'modal-button', 'course-outline-modal', 'due-date-editor', 'self-paced-due-date-editor', 'release-date-editor', 'grading-editor', 'publish-editor', 'staff-lock-editor', 'unit-access-editor', 'discussion-editor', 'content-visibility-editor', 'verification-access-editor', 'timed-examination-preference-editor', 'access-editor', 'settings-modal-tabs', 'show-correctness-editor', 'highlights-editor', 'highlights-enable-editor', 'course-highlights-enable', 'course-video-sharing-enable', 'summary-configuration-editor', 'tag-count']:
% for template_name in ['course-outline', 'xblock-string-field-editor', 'basic-modal', 'modal-button', 'course-outline-modal', 'due-date-editor', 'self-paced-due-date-editor', 'release-date-editor', 'grading-editor', 'publish-editor', 'staff-lock-editor', 'unit-access-editor', 'discussion-editor', 'content-visibility-editor', 'verification-access-editor', 'timed-examination-preference-editor', 'access-editor', 'settings-modal-tabs', 'show-correctness-editor', 'highlights-editor', 'highlights-enable-editor', 'course-highlights-enable', 'course-video-sharing-enable', 'summary-configuration-editor', 'tag-count', 'subsection-share-link-modal-tabs', 'full-page-share-link-editor', 'embed-link-share-link-editor']:
<script type="text/template" id="${template_name}-tpl">
<%static:include path="js/${template_name}.underscore" />
</script>

11
cms/templates/js/course-outline.underscore
View File

@@ -419,8 +419,15 @@ if (is_proctored_exam) {
<div class="status-messages">
<% for (var i=0; i<statusMessages.length; i++) { %>
<div class="status-message">
<span class="icon fa <%- statusMessages[i].iconClass %>" aria-hidden="true"></span>
<p class="status-message-copy"><%- statusMessages[i].text %></p>
<div>
<span class="icon fa <%- statusMessages[i].iconClass %>" aria-hidden="true"></span>
<p class="status-message-copy"><%- statusMessages[i].text %></p>
</div>
<% if (enableHideFromTOC && xblockInfo.isSequential()) { %>
<button type="button" class="button btn-primary subsection-share-link-button">
<span class="icon fa fa-link icon-share-link"></span><%- gettext('Share') %>
</button>
<% } %>
</div>
<% } %>
</div>

20
cms/templates/js/embed-link-share-link-editor.underscore Normal file
View File

@@ -0,0 +1,20 @@
<div class="modal-section-content">
<div class="subsection-share-link-container">
<div>
<p>
<%- gettext('Embed your subsection content directly on a page using an iframe, and view it withput the LMS header and footer.') %>
</p>
<button
type="button"
id="embed-link-button"
data-clipboard-text="<%- embedLmsUrl %>"
title="<%- gettext('Click to copy link to clipboard') %>"
class="button btn-primary copy-link-button"
>
<span class="icon fa fa-clipboard icon-copy-clipboard"></span>
<span class="copy-link-button-text"><%- gettext('Copy link') %></span>
</button>
</div>
<img class="share-link-animated-svg" src="/static/studio/images/subsection-embed.svg">
</div>
</div>

20
cms/templates/js/full-page-share-link-editor.underscore Normal file
View File

@@ -0,0 +1,20 @@
<div class="modal-section-content">
<div class="subsection-share-link-container">
<div>
<p>
<%- gettext('When sharing this link with your learners, they will see the content of the subsection along with the header and footer of your LMS.') %>
</p>
<button
type="button"
id="full-page-link-button"
data-clipboard-text="<%- lmsUrl %>"
title="<%- gettext('Click to copy link to clipboard') %>"
class="button btn-primary copy-link-button"
>
<span class="icon fa fa-clipboard icon-copy-clipboard"></span>
<span class="copy-link-button-text"><%- gettext('Copy link') %></span>
</button>
</div>
<img class="share-link-animated-svg" src="/static/studio/images/subsection-full-page.svg">
</div>
</div>

10
cms/templates/js/subsection-share-link-modal-tabs.underscore Normal file
View File

@@ -0,0 +1,10 @@
<ul class="subsection-share-link-tabs-header">
<% _.each(tabs, function(tab) { %>
<li class="subsection-share-link-tab-buttons">
<button type="button" class="subsection-share-link-tab-button" data-tab="<%- tab.name %>"><%- tab.displayName %></button>
</li>
<% }); %>
</ul>
<% _.each(tabs, function(tab) { %>
<div class='subsection-share-link-tab <%- tab.name %>'></div>
<% }); %>