Skip to content
This repository was archived by the owner on Aug 24, 2021. It is now read-only.

Refactor load content in context #174

Open
anaprimawaty wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Refactor load content in context #174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0638c61
Removed inline JavaScript for Week 1 sub-section
anaprimawaty Apr 10, 2016
1b2e77b
Refactored load content in context feature further by introducing modals
anaprimawaty Apr 10, 2016
be90be9
Able to load content in specified location and support embedded links…
anaprimawaty Apr 15, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions contents/handbook-preliminaries.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,20 @@
<style>
span.highlight {
font-size: 200%;
font-weight: bold;
background-color: red;
}
</style>

<p>
<strong>Where is everything?</strong> CS2103/T-related information are mainly in one of these two places:
</p>
<ul>

<div class="embedded-link-bar">
<span class="highlight">Click For Embedded Content Inside Embedded Content >: </span><span class="embedded-link" data-url="handbook-preliminaries.html">Preliminaries</span></b></h1>
</div></br>

<li>
<strong><a href="schedule.html">The Schedule page</a></strong> (organized chronologically):
<span class="highlighted">That is the one page you need to refer weekly</span>.
Expand Down
49 changes: 28 additions & 21 deletions contents/week1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
<style>
span.highlight {
font-size: 200%;
font-weight: bold;
background-color: red;
}
</style>

<div class="things-to-do content-week1">
<h3 id="things-to-do-content-week1" class="buttoned"><span>Things to do</span></h3>
<div>
Expand Down Expand Up @@ -37,26 +45,27 @@ <h3>Have a look at the 'module handbook'</h3>
If you don't feel like reading everything in it (it contains a lot of text), at least skim through the headings to know what is in there. You can go back and read the details as and when you need them.<br>
<b>Handbook sections to read around this time:</b>
<ul>
<li>
General: <span onclick="getContentUsingAjax('handbook-preliminaries', '#embedded-week1-general');"><span class="embedded-link">Preliminaries</span></span> |
<span onclick="getContentUsingAjax('handbook-textBooks', '#embedded-week1-general');"><span class="embedded-link">Text Books</span></span> |
<span onclick="getContentUsingAjax('handbook-programmingLanguages', '#embedded-week1-general');"><span class="embedded-link">Programming Language</span></span> |
<span onclick="getContentUsingAjax('handbook-appendixA', '#embedded-week1-general');"><span class="embedded-link">Module Principles</span></span>
<div id="embedded-week1-general"></div>
<li class="embedded-link-bar">
General: <span class="embedded-link" data-url="handbook-preliminaries.html" data-modal-id="test">Preliminaries</span> |
<span class="embedded-link" data-url="handbook-textBooks.html">Text Books</span> |
<span class="embedded-link" data-url="handbook-programmingLanguages.html">Programming Language</span> |
<span class="embedded-link" data-url="handbook-appendixA.html">Module Principles</span>
</li>
<li>
Project: <span onclick="getContentUsingAjax('handbook-theProduct', '#embedded-week1-project');"><span class="embedded-link">The Product</span></span> |
<span onclick="getContentUsingAjax('handbook-projectScope', '#embedded-week1-project');"><span class="embedded-link">Project Scope</span></span> |
<span onclick="getContentUsingAjax('handbook-projectConstraints', '#embedded-week1-project');"><span class="embedded-link">Project Constraints</span></span> |
<span onclick="getContentUsingAjax('handbook-deliverables', '#embedded-week1-project');"><span class="embedded-link">Deliverables</span></span>
<div id="embedded-week1-project"></div>
<li class="embedded-link-bar">
Project: <span class="embedded-link" data-url="handbook-theProduct.html">The Product</span> |
<span class="embedded-link" data-url="handbook-projectScope.html">Project Scope</span> |
<span class="embedded-link" data-url="handbook-projectConstraints.html">Project Constraints</span> |
<span class="embedded-link" data-url="handbook-deliverables.html">Deliverables</span>
</li>
<li>
FAQ: <span onclick="getContentUsingAjax('handbook-faq-highWorkload', '#embedded-week1-faqs');"><span class="embedded-link">Why the workload is so high?</span></span> |
<span onclick="getContentUsingAjax('handbook-faq-beanCounting', '#embedded-week1-faqs');"><span class="embedded-link">Why so much bean counting?</span></span> |
<span onclick="getContentUsingAjax('handbook-faq-separateWebsite', '#embedded-week1-faqs');"><span class="embedded-link">Why you force me to visit a separate website instead of using IVLE?</span></span>
<div id="embedded-week1-faqs"></div>
<li class="embedded-link-bar">
FAQ: <span class="embedded-link" data-url="handbook-faq-highWorkload.html">Why the workload is so high?</span> |
<span class="embedded-link" data-url="handbook-faq-beanCounting.html">Why so much bean counting?</span> |
<span class="embedded-link" data-url="handbook-faq-separateWebsite.html">Why you force me to visit a separate website instead of using IVLE?</span>
</li>

<div class="embedded-link-bar" id="test">
<span class="highlight">Click on Preliminaries and Text Books ^</br>Content of Preliminaries loaded below this instead of directly below its link: </span>
</div>
</ul>
</div>
</div>
Expand All @@ -71,10 +80,8 @@ <h3>Brush up your Java/C++</h3>
</div>
<div class="things-to-do things-to-do-week1">
<h3>Attend Lecture 1 <span class="highlighted-darktext">(compulsory)</span></h3>
<div>
<span onclick="getContentUsingAjax('handbook-lectures', '#embedded-week1-lectures');"><span class="embedded-link">More about lectures</span></span>
<div id="embedded-week1-lectures">
</div>
<div class="embedded-link-bar">
<span class="embedded-link" data-url="handbook-lectures.html">More about lectures</span>
</div>
</div>
<div class="things-to-do things-to-do-week1">
Expand Down
52 changes: 52 additions & 0 deletions scripts/common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,55 @@ function pullContent(fileName, elementSelector, title, sectionName) {
});
}

function showContent(embeddedLink) {
var modal;
var modalId = embeddedLink.data('modal-id');
if (modalId == null) {
modal = embeddedLink.closest('.embedded-link-bar').find('.modal');
} else {
modal = $('#' + modalId).find('.modal');
}
var url = embeddedLink.data('url');

$.ajax({
type: 'GET',
url: url,
error: function() {

},
success: function(data) {
data = $(data);
addEmbeddedLinkBarModal(data);

$(modal).addClass('embedded');
$(modal).html(data);
$(modal).prepend('<div><span class="embeddedHeading">Extract from handbook</span><button class="btn-dismiss">x</button><br><br></div>');
}
});
}

function closeContent(embeddedLink) {
var modal = embeddedLink.closest('.embedded-link-bar').find('.modal');
$(modal).removeClass('embedded');
$(modal).html('');
}

function addEmbeddedLinkBarModal(data) {
data.find('.embedded-link-bar').each(function(i, embeddedLinkBar) {
embeddedLinkBar = $(embeddedLinkBar);
var modal = $('<div class="modal"></div>');
embeddedLinkBar.append(modal);

embeddedLinkBar.on('click', '.embedded-link', function() {
showContent($(this));
});

embeddedLinkBar.on('click', '.btn-dismiss', function() {
closeContent($(this));
});
});
}

function addCollapseAndExpandButtonsForComponents(accordionHeaderSelector, divId) {
$(accordionHeaderSelector).append('<button id="collapse-' + divId + '" class="btn-collapse">- -</button>' +
'<button id="expand-' + divId + '" class="btn-expand">+ +</button>');
Expand Down Expand Up @@ -192,6 +241,9 @@ function loadContent(week) {

},
success: function(data) {
data = $(data);
addEmbeddedLinkBarModal(data);

var components = ['things-to-do', 'activity', 'tutorial', 'lecture', 'deadline1', 'deadline2', 'ilo'];
$('#content-week' + week).html(data);
generateDates();
Expand Down