-
-
Save robert-carroll/568e641149ef1b6bb9b97d1c7aa90367 to your computer and use it in GitHub Desktop.
Syllabus Links Options BETA... DO NOT PRODUCTION THIS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function () { | |
'use strict'; | |
if (/^\/courses\/\d+\/assignments\/syllabus/.test(window.location.pathname)) { | |
const syllabuslinks = {}; | |
syllabuslinks.editor = (mtx, obs) => { | |
let RCE = document.getElementById('course_syllabus_body_ifr'); | |
let links_tab_btns = document.querySelectorAll('#editor_tabs div > div > div > div > div') | |
let last_btn = [].slice.call(links_tab_btns).pop() | |
let toggler = document.getElementById('rc-syllabus-links-toggler'); | |
let links_tab = document.querySelectorAll('#editor_tabs span[role=tablist] div')[0]; | |
if (RCE && last_btn && !toggler) { | |
syllabuslinks.options(); | |
obs.disconnect(); | |
// options disappear when the user clicks the editor tabs | |
links_tab.addEventListener('click', () => { | |
const watch_tabs = document.getElementById('editor_tabs'); | |
const tabs_observer = new MutationObserver(syllabuslinks.editor); | |
tabs_observer.observe(watch_tabs, { childList: true, subtree: true }); | |
}); | |
} | |
const watch = document.getElementById('content'); | |
const observer = new MutationObserver(syllabuslinks.editor); | |
observer.observe(watch, { childList: true, subtree: true }); | |
}; | |
syllabuslinks.options = () => { | |
let html = | |
`<p>Enable and disable the visibility and use of Syllabus Assignment Links</p> | |
<div class="al-dropdown__container" style="width: 100%;"> | |
<a class="al-trigger btn btn-block" role="button" href="#"> | |
<i class="icon-mini-arrow-down"></i> Syllabus Links | |
<span class="screenreader-only">Syllabus Links Options</span> | |
</a> | |
<ul id="rc-syllabus-links-toggler-opts" class="al-options" role="menu" tabindex="0" aria-hidden="true" aria-expanded="false" aria-activedescendant="toolbar-2"> | |
<li role="presentation"> | |
<a href="#" data-settrigger="cleanup" tabindex="-1" role="menuitem">Enable Links (Default)</a> | |
</li> | |
<li role="presentation"> | |
<a href="#" data-settrigger="disable" tabindex="-1" role="menuitem">Disable</a> | |
</li> | |
<li role="presentation"> | |
<a href="#" data-settrigger="dates" tabindex="-1" role="menuitem">Disable x Days Ahead</a> | |
</li> | |
<li role="presentation"> | |
<a href="#" data-settrigger="remove" tabindex="-1" role="menuitem">Remove Assignments</a> | |
</li> | |
</ul> | |
</div>`; | |
let links_tab_btns = document.querySelectorAll('#editor_tabs :nth-child(7) div') //('#editor_tabs div > div > div > div > div') | |
let last_btn = [].slice.call(links_tab_btns).pop(); | |
last_btn = last_btn.parentNode.parentNode.parentNode; | |
let link_opts = document.createElement('div'); | |
link_opts.id = 'rc-syllabus-links-toggler'; | |
link_opts.className = last_btn.getAttribute('class'); | |
last_btn.insertBefore(link_opts, last_btn.nextSibling) | |
.insertAdjacentHTML('afterbegin', html); | |
let rce = tinyMCE.activeEditor; | |
let sl_id = 'rc-syllabus-links'; | |
if (rce.dom.get(sl_id)) { | |
let current = rce.dom.get(sl_id).textContent; | |
//let option = document.querySelector(`a[data-settrigger=${current}]`); | |
//option.classList.add('selected'); | |
syllabuslinks.selected_opt(current); | |
} | |
syllabuslinks.setopt(); | |
}; | |
syllabuslinks.setopt = () => { | |
let options_list = document.querySelectorAll('#rc-syllabus-links-toggler-opts li a'); | |
let rce = tinyMCE.activeEditor; | |
let sl_id = 'rc-syllabus-links'; | |
let get_days_txt = 'Enter the number of days until links are enabled, by due date'; | |
options_list.forEach(opt => { | |
opt.addEventListener('click', function (e) { | |
e.preventDefault(); | |
let trigger = this.dataset.settrigger; | |
let rce_syllabus_links = rce.dom.get(sl_id); | |
// rce is active | |
if (rce.hidden == false) { | |
// remove the rce element, starting fresh | |
if (rce_syllabus_links) | |
rce.dom.remove(rce.dom.select(`#${sl_id}`)[0].parentNode, false) | |
// if clearing to default | |
if (trigger == 'cleanup') { | |
syllabuslinks.selected_opt(trigger); | |
return; | |
} | |
// add | |
rce.dom.add(rce.getBody(), 'code', { 'id': sl_id }, trigger); | |
// handle date options | |
if (trigger == 'dates') { | |
let days = prompt(get_days_txt); | |
rce.dom.setAttrib(rce.dom.select(`#${sl_id}`), { 'data-days': days }); | |
} | |
// html editor is active | |
} else if(rce.hidden == true) { | |
let html_editor = document.getElementById('course_syllabus_body'), | |
syllabus_body = html_editor.textContent, | |
attrdays = ''; | |
// remove the rce element, starting fresh | |
syllabus_body = syllabus_body.replace(/<p><code id=\"rc-.+\"(\sdata-days=\"\d+\")?>(cleanup|dates|disable|remove)<\/code><\/p>/gm, ''); | |
// if clearing to default | |
if (trigger == 'cleanup') { | |
html_editor.value = syllabus_body; | |
syllabuslinks.selected_opt(trigger); | |
return; | |
} | |
// handle date options | |
if (trigger == 'dates') { | |
let days = prompt(get_days_txt); | |
attrdays = ` data-days="${days}"`; | |
} | |
html_editor.value = `${syllabus_body}\n<p><code id="${sl_id}"${attrdays}>${trigger}</code></p>`; | |
} | |
syllabuslinks.selected_opt(trigger); | |
}); | |
}); | |
}; | |
syllabuslinks.selected_opt = item => { | |
let options = document.querySelectorAll(`a[data-settrigger]`); | |
options.forEach(o => o.classList.remove('selected')); | |
document.querySelector(`a[data-settrigger=${item}]`) | |
.classList.add('selected'); | |
}; | |
// if the user has some of the approved roles | |
if (['teacher','admin','root_admin'].some(a => ENV.current_user_roles.includes(a))) { | |
syllabuslinks.editor(); | |
} else return false; | |
} | |
})(); | |
// TODO: | |
// if rce has element - get trigger value and 'select' the correct dropdown choice | |
// figure out - how to update when in HTML editor, or indicate we cannot update when HTML editor is active | |
// reduce redunancies | |
// /<code id=\"rc-syllabus-links\"(\sdata-days=\"\d+\")?>dates<\/code>/gm | |
// /<code id=\"rc-syllabus-links\"(\sdata-days=\"\d+\")?>(dates|disable|remove)<\/code>/gm |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment