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

* 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

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>

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>

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>

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>
<% }); %>