From 0b770e1d5369a8aa19ed2e37c933e6df61a51f4a Mon Sep 17 00:00:00 2001 From: lduarte1991 Date: Mon, 28 Jul 2014 14:18:28 -0400 Subject: [PATCH] Annotations Tools: Fixing major Firefox/Tinymce bug in annotations - fixed issue in Firefox where the init gets called multiple times - fixed spacing issues and added more comments - fixed indentation, added missing parens in comment, and fixed typo --- .../js/vendor/ova/richText-annotator.js | 260 ++++++++++-------- 1 file changed, 143 insertions(+), 117 deletions(-) diff --git a/common/static/js/vendor/ova/richText-annotator.js b/common/static/js/vendor/ova/richText-annotator.js index 2179423382..4f7a08a596 100644 --- a/common/static/js/vendor/ova/richText-annotator.js +++ b/common/static/js/vendor/ova/richText-annotator.js @@ -23,125 +23,151 @@ var _ref, __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }; Annotator.Plugin.RichText = (function(_super) { - __extends(RichText, _super); - - - //Default tinymce configuration - RichText.prototype.options = { - tinymce:{ - selector: "li.annotator-item textarea", - skin: 'studio-tmce4', - formats: { - code: { - inline: 'code' - } - }, - codemirror: { - path: "/static/js/vendor" - }, - plugins: "image link codemirror", - menubar: false, - toolbar_items_size: 'small', - extended_valid_elements : "iframe[src|frameborder|style|scrolling|class|width|height|name|align|id]", - toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image rubric | code ", - resize: "both", - } - }; + __extends(RichText, _super); + + + // default tinymce configuration + RichText.prototype.options = { + tinymce:{ + selector: "li.annotator-item textarea", + skin: 'studio-tmce4', + formats: { + code: { + inline: 'code', + } + }, + codemirror: { + path: "/static/js/vendor", + }, + plugins: "image link codemirror", + menubar: false, + toolbar_items_size: 'small', + extended_valid_elements : "iframe[src|frameborder|style|scrolling|class|width|height|name|align|id]", + toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image rubric | code ", + resize: "both", + } + }; - function RichText(element,options) { - _ref = RichText.__super__.constructor.apply(this, arguments); - return _ref; - }; + function RichText(element,options) { + _ref = RichText.__super__.constructor.apply(this, arguments); + return _ref; + }; - RichText.prototype.pluginInit = function() { - console.log("RichText-pluginInit"); - var annotator = this.annotator, - editor = this.annotator.editor; - //Check that annotator is working - if (!Annotator.supported()) { - return; - } - - //Editor Setup - annotator.editor.addField({ - type: 'input', - load: this.updateEditor, - }); - - //Viewer setup - annotator.viewer.addField({ - load: this.updateViewer, - }); - - - annotator.subscribe("annotationEditorShown", function(){ - $(annotator.editor.element).find('.mce-tinymce')[0].style.display='block'; - annotator.editor.checkOrientation(); - }); - annotator.subscribe("annotationEditorHidden", function(){ - $(annotator.editor.element).find('.mce-tinymce')[0].style.display='none'; - }); - - //set listener for tinymce; - this.options.tinymce.setup = function(ed) { - ed.on('change', function(e) { - //set the modification in the textarea of annotator - $(editor.element).find('textarea')[0].value = tinymce.activeEditor.getContent(); - }); - //New button to add Rubrics of the url https://gteavirtual.org/rubric - ed.addButton('rubric', { - icon: 'rubric', - title : 'Insert a rubric', - onclick: function() { - ed.windowManager.open({ - title: 'Insert a public rubric of the webside https://gteavirtual.org/rubric ', - body: [ - {type: 'textbox', name: 'url', label: 'Url'} - ], - onsubmit: function(e) { - // Insert content when the window form is submitted - var url = e.data.url, - name = 'irb', - irb; - //get the variable 'name' from the given url - name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); - var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), - results = regex.exec(url); - - //the rubric id - irb = results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); - if (irb==''){ - ed.windowManager.alert('Error: The given webpage didn\'t have a irb variable in the url'); - }else{ - var iframeRubric = ""; - ed.setContent(ed.getContent()+iframeRubric); - $(editor.element).find('textarea')[0].value = ed.getContent(); - } - } - }); - ed.insertContent('Main button'); - ed.label = 'My Button'; - } - }); - }; - tinymce.init(this.options.tinymce); - }; - - RichText.prototype.updateEditor = function(field, annotation) { - var text = typeof annotation.text!='undefined'?annotation.text:''; - tinymce.activeEditor.setContent(text); - $(field).remove(); //this is the auto create field by annotator and it is not necessary - } - - RichText.prototype.updateViewer = function(field, annotation) { - var textDiv = $(field.parentNode).find('div:first-of-type')[0]; - textDiv.innerHTML =annotation.text; - $(textDiv).addClass('richText-annotation'); - $(field).remove(); //this is the auto create field by annotator and it is not necessary - } - - return RichText; + RichText.prototype.pluginInit = function() { + console.log("RichText-pluginInit"); + var annotator = this.annotator, + editor = this.annotator.editor; + // check that annotator is working + if (!Annotator.supported()) { + return; + } + + // editor Setup + annotator.editor.addField({ + type: 'input', + submit: this.submitEditor, + load: this.updateEditor, + }); + + // viewer setup + annotator.viewer.addField({ + load: this.updateViewer, + }); + + // makes sure that tinymce is hidden and shown along with the editor + annotator.subscribe("annotationEditorShown", function() { + $(annotator.editor.element).find('.mce-tinymce')[0].style.display = 'block'; + annotator.editor.checkOrientation(); + }); + annotator.subscribe("annotationEditorHidden", function() { + $(annotator.editor.element).find('.mce-tinymce')[0].style.display = 'none'; + }); + + // set listener for tinymce; + this.options.tinymce.setup = function(ed) { + + // note that the following does not work in Firefox, fix using submitEditor function + ed.on('change', function(e) { + // set the modification in the textarea of annotator + $(editor.element).find('textarea')[0].value = tinymce.activeEditor.getContent(); + }); + // new button to add Rubrics of the url https://gteavirtual.org/rubric + ed.addButton('rubric', { + icon: 'rubric', + title : 'Insert a rubric', + onclick: function() { + ed.windowManager.open({ + title: 'Insert a public rubric of the website https://gteavirtual.org/rubric', + body: [ + {type: 'textbox', name: 'url', label: 'Url'} + ], + onsubmit: function(e) { + // Insert content when the window form is submitted + var url = e.data.url; + var name = 'irb'; + var irb; + // get the variable 'name' from the given url + name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); + var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"); + var results = regex.exec(url); + + // the rubric id + irb = results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); + if (irb==''){ + ed.windowManager.alert('Error: The given webpage didn\'t have a irb variable in the url'); + }else{ + var iframeRubric = ""; + ed.setContent(ed.getContent()+iframeRubric); + $(editor.element).find('textarea')[0].value = ed.getContent(); + } + } + }); + ed.insertContent('Main button'); + ed.label = 'My Button'; + } + }); + }; + + // makes sure that tinymce is not initiated by checking if editors exist + if(tinymce.editors.length === 0) { + tinymce.init(this.options.tinymce); + } + }; + + /** + * Copies the content of annotation text and inserts it into the tinymce instance + */ + RichText.prototype.updateEditor = function(field, annotation) { + var text = typeof annotation.text != 'undefined' ? annotation.text : ''; + tinymce.activeEditor.setContent(text); + $(field).remove(); // this is the auto create field by annotator and it is not necessary + } + + /** + * Takes the text from the annotation text and makes sure it replaces the old text field + * with the richtext from tinymce. + */ + RichText.prototype.updateViewer = function(field, annotation) { + var textDiv = $(field.parentNode).find('div:first-of-type')[0]; + textDiv.innerHTML = annotation.text; + $(textDiv).addClass('richText-annotation'); + $(field).remove(); // this is the auto create field by annotator and it is not necessary + } + + /** + * Gets called before submission. It checks to make sure tinymce content is saved + */ + RichText.prototype.submitEditor = function(field, annotation) { + var tinymceText = tinymce.activeEditor.getContent(); + + // Firefox has an issue where the text is not saved ("on" function doesn't work). + // this helps save it anyway. + if (annotation.text !== tinymceText) { + annotation.text = tinymce.activeEditor.getContent(); + } + } + + return RichText; })(Annotator.Plugin); -