Skip to content

C
course-discovery
Commit a4185ffc by Awais Committed by Awais Qureshi
Options

Implement ShowDiff for comparing changes. 

Fixing issue related with tinymce.

ECOM-7830
parent ec7a14e5
Showing with 202 additions and 142 deletions
course_discovery/conf/locale/en/LC_MESSAGES/django.po
...@@ -7,7 +7,7 @@ msgid "" ...@@ -7,7 +7,7 @@ msgid ""
msgstr "" msgstr ""
"Project-Id-Version: PACKAGE VERSION\n" "Project-Id-Version: PACKAGE VERSION\n"
"Report-Msgid-Bugs-To: \n" "Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2017-05-30 16:22+0500\n" "POT-Creation-Date: 2017-05-31 20:11+0500\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n" "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <LL@li.org>\n" "Language-Team: LANGUAGE <LL@li.org>\n"
......
course_discovery/conf/locale/en/LC_MESSAGES/djangojs.po
...@@ -7,7 +7,7 @@ msgid "" ...@@ -7,7 +7,7 @@ msgid ""
msgstr "" msgstr ""
"Project-Id-Version: PACKAGE VERSION\n" "Project-Id-Version: PACKAGE VERSION\n"
"Report-Msgid-Bugs-To: \n" "Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2017-05-30 16:22+0500\n" "POT-Creation-Date: 2017-05-31 20:11+0500\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n" "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <LL@li.org>\n" "Language-Team: LANGUAGE <LL@li.org>\n"
......
course_discovery/conf/locale/eo/LC_MESSAGES/django.po
...@@ -7,7 +7,7 @@ msgid "" ...@@ -7,7 +7,7 @@ msgid ""
msgstr "" msgstr ""
"Project-Id-Version: PACKAGE VERSION\n" "Project-Id-Version: PACKAGE VERSION\n"
"Report-Msgid-Bugs-To: \n" "Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2017-05-30 16:22+0500\n" "POT-Creation-Date: 2017-05-31 20:11+0500\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n" "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <LL@li.org>\n" "Language-Team: LANGUAGE <LL@li.org>\n"
......
course_discovery/conf/locale/eo/LC_MESSAGES/djangojs.po
...@@ -7,7 +7,7 @@ msgid "" ...@@ -7,7 +7,7 @@ msgid ""
msgstr "" msgstr ""
"Project-Id-Version: PACKAGE VERSION\n" "Project-Id-Version: PACKAGE VERSION\n"
"Report-Msgid-Bugs-To: \n" "Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2017-05-30 16:22+0500\n" "POT-Creation-Date: 2017-05-31 20:11+0500\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n" "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <LL@li.org>\n" "Language-Team: LANGUAGE <LL@li.org>\n"
......
course_discovery/static/js/publisher/comparing-objects.js
...@@ -43,9 +43,3 @@ function showDiffCourseDetails(currentObject, historyObject, $outputDiv) { ...@@ -43,9 +43,3 @@ function showDiffCourseDetails(currentObject, historyObject, $outputDiv) {
$outputDiv.html(decodeEntities(dmp.diff_prettyHtml(d))); $outputDiv.html(decodeEntities(dmp.diff_prettyHtml(d)));
$outputDiv.show(); $outputDiv.show();
} }
function decodeEntities(encodedString) {
var textArea = document.createElement('textarea');
textArea.innerHTML = encodedString;
return textArea.value;
}
course_discovery/static/js/publisher/course-edit-history-compare.js deleted 100644 → 0
$(document).ready(function () {
$('.history').each(function () {
if ($('#id_history_revision').val() > 0) {
var dmp = new diff_match_patch();
var element_id = this.id.split('_revision')[0];
var current_course_object = $('#' + element_id).val();
var history_object_value = $(this).val().trim();
var d = dmp.diff_main(history_object_value, current_course_object);
dmp.diff_cleanupEfficiency(d)
tinymce.get(element_id).setContent(decodeEntities(dmp.diff_prettyHtml(d)))
}
});
});
function decodeEntities(encodedString) {
var textArea = document.createElement('textarea');
textArea.innerHTML = encodedString;
return textArea.value;
}
function hasValidData(){
for (var i = 0; i < tinyMCE.editors.length; i++) {
var editor = tinyMCE.editors[i];
if (editor.dom.select('ins').length > 0) {
editor.focus();
return false;
}
if (editor.dom.select('del').length > 0) {
editor.focus();
return false;
}
}
return true;
}
course_discovery/static/js/publisher/decode-html.js 0 → 100644
var dmp = new diff_match_patch();
dmp.Diff_EditCost = 8;
diff_match_patch.prototype.diff_prettyHtml = function (diffs) {
var html = [];
var pattern_amp = /&/g;
var pattern_lt = /</g;
var pattern_gt = />/g;
var pattern_para = /\n/g;
for (var x = 0; x < diffs.length; x++) {
var op = diffs[x][0]; // Operation (insert, delete, equal)
var data = diffs[x][1]; // Text of change.
//var text = data.replace(pattern_amp, '&amp;').replace(pattern_lt, '&lt;')
// .replace(pattern_gt, '&gt;').replace(pattern_para, '&para;<br>');
var text = data.replace(pattern_amp, '&amp;').replace(pattern_lt, '&lt;')
.replace(pattern_gt, '&gt;').replace(pattern_para, '<br>');
switch (op) {
case DIFF_INSERT:
html[x] = '<ins style="background:#e6ffe6;display:inline-block; margin:0 3px">' + text + '</ins>';
break;
case DIFF_DELETE:
html[x] = '<del style="background:#ffe6e6;display:inline-block; margin:0 3px">' + text + '</del>';
break;
case DIFF_EQUAL:
html[x] = '<span>' + text + '</span>';
break;
}
}
return html.join('');
};
function decodeEntities(encodedString) {
var textArea = document.createElement('textarea');
textArea.innerHTML = encodedString;
return textArea.value;
}
course_discovery/static/js/publisher/tinymce-init.js
$(document).ready(function(){ $(document).ready(function () {
var dmp = new diff_match_patch();
dmp.Diff_EditCost = 8;
var tinymceConfig = { var tinymceConfig = {
plugins: [ plugins: [
'link lists charactercount paste' 'link lists charactercount paste'
], ],
toolbar: 'accept reject acceptall rejectall |undo redo | styleselect | bold italic | bullist numlist outdent indent | link anchor', toolbar: 'showdiff Accept Reject | undo redo | styleselect | bold italic | bullist numlist outdent indent | link anchor',
menubar: false, menubar: false,
statusbar: true, statusbar: true,
paste_remove_spans: true, paste_remove_spans: true,
...@@ -11,97 +15,75 @@ $(document).ready(function(){ ...@@ -11,97 +15,75 @@ $(document).ready(function(){
paste_as_text: true, paste_as_text: true,
paste_auto_cleanup_on_paste: true, paste_auto_cleanup_on_paste: true,
skin: false, skin: false,
forced_root_block : false, forced_root_block: false,
setup: function(editor) { setup: function (editor) {
function monitorNodeChange() { editor.addButton('showdiff', {
var btn = this; text: 'ShowDiff',
editor.on('NodeChange', function(e) {
var trackElem = getInsDelElement(e.element);
btn.disabled((trackElem == null) || (trackElem.nodeName != 'DEL' && trackElem.nodeName != 'INS'));
});
}
editor.addButton('accept', {
text: 'Accept',
icon: false, icon: false,
onclick: function() { onclick: function () {
acceptElement(getInsDelElement(editor.selection.getNode()));
},
onpostrender: monitorNodeChange
});
editor.addButton('reject', {
text: 'Reject', editor.focus();
icon: false, if ($('#id_history_revision').val()){
onclick: function() { var current_course_object = editor.getContent();
rejectElement(getInsDelElement(editor.selection.getNode())); var history_object_value = $('#' + editor.id + '_revision').val();
}, var comparision_dev = $('#' + editor.id + '_comparison');
onpostrender: monitorNodeChange var comparison_data = $('#' + editor.id + '_parent');
if (history_object_value === 'None')
history_object_value = '';
var d = dmp.diff_main(history_object_value, current_course_object);
dmp.diff_cleanupSemantic(d);
$(comparision_dev).html(decodeEntities(dmp.diff_prettyHtml(d)));
$(comparison_data).css({"display": "block"});
$(comparision_dev).show();
}
}
}); });
editor.addButton('acceptall', { editor.addButton('Accept', {
text: 'Accept All', text: 'Accept All',
icon: false, icon: false,
onclick: function() { onclick: function () {
editor.focus();
var nodes = $(editor.getBody())[0].childNodes; if ($('#id_history_revision').val()) {
$(nodes).each(function() { var comparision_dev = $('#' + editor.id + '_comparison');
acceptElement(this); var comparison_data = $('#' + editor.id + '_parent');
}); $(comparison_data).hide();
$(comparision_dev).hide();
}
} }
}); });
editor.addButton('rejectall', { editor.addButton('Reject', {
text: 'Reject All', text: 'Reject All',
icon: false, icon: false,
onclick: function() { onclick: function () {
editor.focus();
var nodes = $(editor.getBody())[0].childNodes; if ($('#id_history_revision').val()) {
$(nodes).each(function() { var comparision_dev = $('#' + editor.id + '_comparison');
rejectElement(this); var value = $('#' + editor.id + '_revision').val();
}); var comparison_data = $('#' + editor.id + '_parent');
if (value == 'None')
value = '';
editor.setContent(value);
editor.execCommand('undo');
$(comparision_dev).hide();
$(comparison_data).hide();
}
} }
}); });
} }
}; };
function acceptElement(trackElem){ tinymceConfig["selector"] = "textarea";
if (trackElem != null && trackElem.nodeName === 'INS') {
removeTrackingElement(trackElem);
}
if (trackElem.nodeName === 'DEL') {
trackElem.remove();
}
}
function rejectElement(trackElem){
if (trackElem != null && trackElem.nodeName === 'DEL') {
removeTrackingElement(trackElem);
}
if (trackElem.nodeName === 'INS') {
trackElem.remove();
}
}
function getInsDelElement(elem)
{
if (elem == null)
{
return null;
}
else if (elem.nodeName === 'INS' || elem.nodeName === 'DEL')
{
return elem;
}
return getInsDelElement(elem.parentElement);
}
function removeTrackingElement(elem)
{
$(elem).replaceWith($(elem).contents());
}
tinymceConfig["selector"]="textarea";
tinymce.init(tinymceConfig); tinymce.init(tinymceConfig);
tinymceConfig["selector"]= "#id_title"; tinymceConfig["selector"] = "#id_title";
tinymceConfig["toolbar"] = "accept reject acceptall rejectall"; tinymceConfig["toolbar"] = "showdiff Accept Reject";
tinymce.init(tinymceConfig); tinymce.init(tinymceConfig);
});
$(document).on('click', 'a#close-comparison', function(e){
e.preventDefault();
$(this).parent().hide();
}); });
course_discovery/static/sass/publisher/publisher.scss
...@@ -718,3 +718,60 @@ ...@@ -718,3 +718,60 @@
padding: 4px; padding: 4px;
background-color: #F2F2F2; background-color: #F2F2F2;
} }
.show-comparison-container {
position: relative;
.comparison-container {
@include left(0);
@include right(0);
background: rgba(0, 0, 0, .7);
position: absolute;
top: 0;
bottom: 20px;
width: 50%;
padding: 40px;
display: None;
.close {
@include right(25px);
background: #f2f2f2;
width: 30px;
height: 30px;
border-radius: 50%;
display: block;
position: absolute;
top: 25px;
line-height: 26px;
text-align: center;
color: #666;
font-weight: bold;
box-shadow: 0 0 4px rgba(0,0,0,.7);
-webkit-transition: all 0.3 ease;
-moz-transition: all 0.3 ease;
-ms-transition: all 0.3 ease;
-o-transition: all 0.3 ease;
transition: all 0.3 ease;
&:hover {
color: #333;
cursor: pointer;
background: #ccc;
}
&:focus,
&:active,
&:hover {
text-decoration: none;
}
}
.show-comparison-data {
background: #fff;
padding: 15px;
font-size: 14px;
height: 100%;
overflow: auto;
}
}
}
course_discovery/templates/publisher/course_detail.html
...@@ -231,6 +231,7 @@ ...@@ -231,6 +231,7 @@
{% endblock %} {% endblock %}
{% block extra_js %} {% block extra_js %}
<script src="{% static 'bower_components/google-diff-match-patch/diff_match_patch.js' %}"></script> <script src="{% static 'bower_components/google-diff-match-patch/diff_match_patch.js' %}"></script>
<script src="{% static 'js/publisher/decode-html.js' %}"></script>
<script src="{% static 'js/publisher/views/course_detail.js' %}"></script> <script src="{% static 'js/publisher/views/course_detail.js' %}"></script>
<script src="{% static 'js/publisher/organizations.js' %}"></script> <script src="{% static 'js/publisher/organizations.js' %}"></script>
<script src="{% static 'js/publisher/comparing-objects.js' %}"></script> <script src="{% static 'js/publisher/comparing-objects.js' %}"></script>
......
course_discovery/templates/publisher/course_edit_form.html
...@@ -38,8 +38,12 @@ ...@@ -38,8 +38,12 @@
<fieldset class="form-group grid-container grid-manual"> <fieldset class="form-group grid-container grid-manual">
<div class="field-title">{% trans "COURSE TITLE" %}</div> <div class="field-title">{% trans "COURSE TITLE" %}</div>
<div class="row"> <div class="row show-comparison-container">
<div class="col col-6 help-text"> <div class="col col-6 help-text">
<div id="id_title_parent" class="comparison-container">
<a id="close-comparison" class="close " href="#!">x</a>
<div id="id_title_comparison" class="show-comparison-data"></div>
</div>
<div class="row"> <div class="row">
<ul class="tabs"> <ul class="tabs">
<li class="course-tabs active" data-tab="tab-practices"> <li class="course-tabs active" data-tab="tab-practices">
...@@ -145,8 +149,12 @@ ...@@ -145,8 +149,12 @@
<div class="course-information"> <div class="course-information">
<fieldset class="form-group grid-container grid-manual"> <fieldset class="form-group grid-container grid-manual">
<div class="field-title">{% trans "SHORT DESCRIPTION" %}</div> <div class="field-title">{% trans "SHORT DESCRIPTION" %}</div>
<div class="row"> <div class="row show-comparison-container">
<div class="col col-6 help-text"> <div class="col col-6 help-text">
<div id="id_short_description_parent" class="comparison-container">
<a id="close-comparison" class="close " href="#!">x</a>
<div id="id_short_description_comparison" class="show-comparison-data"></div>
</div>
<div class="row"> <div class="row">
<ul class="tabs"> <ul class="tabs">
<li class="course-tabs active" data-tab="tab-practices"> <li class="course-tabs active" data-tab="tab-practices">
...@@ -187,8 +195,12 @@ ...@@ -187,8 +195,12 @@
</div> </div>
<div class="field-title">{% trans "LONG DESCRIPTION" %}</div> <div class="field-title">{% trans "LONG DESCRIPTION" %}</div>
<div class="row"> <div class="row show-comparison-container">
<div class="col col-6 help-text"> <div class="col col-6 help-text">
<div id="id_full_description_parent" class="comparison-container">
<a id="close-comparison" class="close " href="#!">x</a>
<div id="id_full_description_comparison" class="show-comparison-data"></div>
</div>
<div class="row"> <div class="row">
<ul class="tabs"> <ul class="tabs">
<li class="course-tabs active" data-tab="tab-practices"> <li class="course-tabs active" data-tab="tab-practices">
...@@ -236,8 +248,12 @@ ...@@ -236,8 +248,12 @@
<div class="field-title">{% trans "WHAT YOU WILL LEARN" %}</div> <div class="field-title">{% trans "WHAT YOU WILL LEARN" %}</div>
<div class="row"> <div class="row show-comparison-container">
<div class="col col-6 help-text"> <div class="col col-6 help-text">
<div id="id_expected_learnings_parent" class="comparison-container">
<a id="close-comparison" class="close " href="#!">x</a>
<div id="id_expected_learnings_comparison" class="show-comparison-data"></div>
</div>
<div class="row"> <div class="row">
<ul class="tabs"> <ul class="tabs">
<li class="course-tabs active" data-tab="tab-practices"> <li class="course-tabs active" data-tab="tab-practices">
...@@ -336,8 +352,12 @@ ...@@ -336,8 +352,12 @@
</div> </div>
<div class="field-title">{% trans "PREREQUISITES" %}</div> <div class="field-title">{% trans "PREREQUISITES" %}</div>
<div class="row"> <div class="row show-comparison-container">
<div class="col col-6 help-text"> <div class="col col-6 help-text">
<div id="id_prerequisites_parent" class="comparison-container">
<a id="close-comparison" class="close " href="#!">x</a>
<div id="id_prerequisites_comparison" class="show-comparison-data"></div>
</div>
<div class="row"> <div class="row">
<ul class="tabs"> <ul class="tabs">
<li class="course-tabs active" data-tab="tab-practices"> <li class="course-tabs active" data-tab="tab-practices">
...@@ -379,8 +399,12 @@ ...@@ -379,8 +399,12 @@
</div> </div>
<div class="field-title">{% trans "SYLLABUS" %}</div> <div class="field-title">{% trans "SYLLABUS" %}</div>
<div class="row"> <div class="row show-comparison-container">
<div class="col col-6 help-text"> <div class="col col-6 help-text">
<div id="id_syllabus_parent" class="comparison-container">
<a id="close-comparison" class="close " href="#!">x</a>
<div id="id_syllabus_comparison" class="show-comparison-data"></div>
</div>
<div class="row"> <div class="row">
<ul class="tabs"> <ul class="tabs">
<li class="course-tabs active" data-tab="tab-practices"> <li class="course-tabs active" data-tab="tab-practices">
...@@ -441,10 +465,14 @@ ...@@ -441,10 +465,14 @@
</div> </div>
<div class="field-title">{{ form.faq.label }}</div> <div class="field-title">{{ form.faq.label }}</div>
<div class="row"> <div class="row show-comparison-container">
<div class="col col-6 help-text"> <div class="col col-6 help-text">
<p>{% trans "Any frequently asked questions and the answers to those questions." %}</p> <p>{% trans "Any frequently asked questions and the answers to those questions." %}</p>
</div> </div>
<div id="id_faq_parent" class="comparison-container">
<a id="close-comparison" class="close " href="#!">x</a>
<div id="id_faq_comparison" class="show-comparison-data"></div>
</div>
<div class="col col-6 help-text"> <div class="col col-6 help-text">
<label class="field-label ">{{ form.faq.label }}</label> <label class="field-label ">{{ form.faq.label }}</label>
<input id="id_faq_revision" type="hidden" value="{{ history_object.faq }}" class="history"> <input id="id_faq_revision" type="hidden" value="{{ history_object.faq }}" class="history">
...@@ -519,8 +547,12 @@ ...@@ -519,8 +547,12 @@
{% endif %} {% endif %}
<div class="field-title">{{ form.learner_testimonial.label|upper }}</div> <div class="field-title">{{ form.learner_testimonial.label|upper }}</div>
<div class="row"> <div class="row show-comparison-container">
<div class="col col-6 help-text"> <div class="col col-6 help-text">
<div id="id_learner_testimonial_parent" class="comparison-container">
<a id="close-comparison" class="close " href="#!">x</a>
<div id="id_learner_testimonial_comparison" class="show-comparison-data"></div>
</div>
<div class="row"> <div class="row">
<ul class="tabs"> <ul class="tabs">
<li class="course-tabs active" data-tab="tab-practices"> <li class="course-tabs active" data-tab="tab-practices">
...@@ -544,6 +576,7 @@ ...@@ -544,6 +576,7 @@
</div> </div>
</div> </div>
<div class="col col-6 help-text"> <div class="col col-6 help-text">
<label class="field-label ">{{ form.learner_testimonial.label }}</label> <label class="field-label ">{{ form.learner_testimonial.label }}</label>
<input id="id_learner_testimonial_revision" type="hidden" value="{{ history_object.learner_testimonial }}" class="history"> <input id="id_learner_testimonial_revision" type="hidden" value="{{ history_object.learner_testimonial }}" class="history">
{{ form.learner_testimonial }} {{ form.learner_testimonial }}
...@@ -568,7 +601,7 @@ ...@@ -568,7 +601,7 @@
<a class="btn-cancel" href="{% url 'publisher:publisher_course_detail' course.id %}"> <a class="btn-cancel" href="{% url 'publisher:publisher_course_detail' course.id %}">
{% trans "Cancel" %} {% trans "Cancel" %}
</a> </a>
<button class="btn-brand btn-base btn-save" type="button" onclick="saveEditForm(); return false;">{% trans "UPDATE COURSE" %}</button> <button class="btn-brand btn-base btn-save" type="submit">{% trans "UPDATE COURSE" %}</button>
</div> </div>
</div> </div>
...@@ -592,17 +625,11 @@ ...@@ -592,17 +625,11 @@
<script src="{% static 'bower_components/tinymce/plugins/link/plugin.min.js' %}"></script> <script src="{% static 'bower_components/tinymce/plugins/link/plugin.min.js' %}"></script>
<script src="{% static 'bower_components/tinymce/plugins/anchor/plugin.min.js' %}"></script> <script src="{% static 'bower_components/tinymce/plugins/anchor/plugin.min.js' %}"></script>
<script src="{% static 'bower_components/tinymce/plugins/paste/plugin.min.js' %}"></script> <script src="{% static 'bower_components/tinymce/plugins/paste/plugin.min.js' %}"></script>
<script src="{% static 'bower_components/google-diff-match-patch/diff_match_patch.js' %}"></script>
<script src="{% static 'js/publisher/course-edit-history-compare.js' %}"></script> <script src="{% static 'bower_components/google-diff-match-patch/diff_match_patch.js' %}"></script>
<script src="{% static 'js/publisher/decode-html.js' %}"></script>
<script type="text/javascript"> <script src="{% static 'js/publisher/modal-screen.js' %}"></script>
function saveEditForm() {
if (hasValidData()) {
$('#frm_course_edit').submit();
}
}
</script>
{% endblock %} {% endblock %}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment