Merge pull request #8765 from edx/christina/lms-requirejs/notes

Optimize edxnotes files.

common/djangoapps/pipeline_mako/templates/static_content.html

@@ -60,7 +60,11 @@ source, template_path = _loader.load_template_source(path)
                     ${caller.body()}
                 });
             % else:
-                require(['${staticfiles_storage.url(module_name + ".js")}'], function () {
+                ## The "raw" parameter is specified to avoid the URL from being further maninpulated by
+                ## static_replace calls (as woudl happen if require_module is used within courseware).
+                ## Without specifying "raw", a call to static_replace would result in the MD5 hash being
+                ## being appended more than once, causing the import to fail in production environments.
+                require(['${staticfiles_storage.url(module_name + ".js") + "?raw"}'], function () {
                     require(['${module_name}'], function (${class_name}) {
                         ${caller.body()}
                     });

common/templates/edxnotes_wrapper.html

@@ -3,6 +3,7 @@ import json
 from django.utils.translation import ugettext as _
 from student.models import anonymous_id_for_user
 %>
+<%namespace name='static' file='/static_content.html'/>
 <%
     if user:
         params.update({'user': anonymous_id_for_user(user, None)})
@@ -10,11 +11,7 @@ from student.models import anonymous_id_for_user
 <div id="edx-notes-wrapper-${uid}" class="edx-notes-wrapper">
     <div class="edx-notes-wrapper-content">${content}</div>
 </div>
-<script type="text/javascript">
-    (function (require) {
-        require(['js/edxnotes/views/visibility_decorator'], function(EdxnotesVisibilityDecorator) {
-            var element = document.getElementById('edx-notes-wrapper-${uid}');
-            EdxnotesVisibilityDecorator.factory(element, ${json.dumps(params)}, ${edxnotes_visibility});
-        });
-    }).call(this, require || RequireJS.require);
-</script>
+<%static:require_module module_name="js/edxnotes/views/notes_visibility_factory" class_name="NotesVisibilityFactory">
+    var element = document.getElementById('edx-notes-wrapper-${uid}');
+    NotesVisibilityFactory.VisibilityDecorator.factory(element, ${json.dumps(params)}, ${edxnotes_visibility});
+</%static:require_module>

lms/static/js/edxnotes/models/note.js

 ;(function (define) {
 'use strict';
-define(['backbone', 'js/edxnotes/utils/utils', 'underscore.string'], function (Backbone, Utils) {
+define(['backbone', 'js/edxnotes/utils/utils', 'underscore.string'], function (Backbone, Utils, str) {
     var NoteModel = Backbone.Model.extend({
         defaults: {
             'id': null,
@@ -47,7 +47,7 @@ define(['backbone', 'js/edxnotes/utils/utils', 'underscore.string'], function (B
             var message = this.get('quote');
 
             if (!this.get('is_expanded') && this.get('show_link')) {
-                message = _.str.prune(message, this.textSize);
+                message = str.prune(message, this.textSize);
             }
 
             return message;

lms/static/js/edxnotes/plugins/events.js

 ;(function (define, undefined) {
 'use strict';
 define([
-    'underscore', 'annotator_1.2.9', 'underscore.string'
+    'underscore', 'annotator_1.2.9'
 ], function (_, Annotator) {
     /**
      * Modifies Annotator.Plugin.Store.annotationCreated to make it trigger a new

lms/static/js/edxnotes/views/toggle_notes_factory.js → lms/static/js/edxnotes/views/notes_visibility_factory.js

@@ -3,8 +3,8 @@
 define([
     'jquery', 'underscore', 'backbone', 'gettext',
     'annotator_1.2.9', 'js/edxnotes/views/visibility_decorator', 'js/utils/animation'
-], function($, _, Backbone, gettext, Annotator, EdxnotesVisibilityDecorator) {
-    var ToggleNotesView = Backbone.View.extend({
+], function($, _, Backbone, gettext, Annotator, VisibilityDecorator) {
+    var ToggleVisibilityView = Backbone.View.extend({
         events: {
             'click .action-toggle-notes': 'toggleHandler'
         },
@@ -52,14 +52,14 @@ define([
         },
 
         enableNotes: function () {
-            _.each($('.edx-notes-wrapper'), EdxnotesVisibilityDecorator.enableNote);
+            _.each($('.edx-notes-wrapper'), VisibilityDecorator.enableNote);
             this.actionLink.addClass('is-active');
             this.label.text(gettext('Hide notes'));
             this.actionToggleMessage.text(gettext('Notes visible'));
         },
 
         disableNotes: function () {
-            EdxnotesVisibilityDecorator.disableNotes();
+            VisibilityDecorator.disableNotes();
             this.actionLink.removeClass('is-active');
             this.label.text(gettext('Show notes'));
             this.actionToggleMessage.text(gettext('Notes hidden'));
@@ -93,12 +93,16 @@ define([
         }
     });
 
-    return function (visibility, visibilityUrl) {
-        return new ToggleNotesView({
-            el: $('.edx-notes-visibility').get(0),
-            visibility: visibility,
-            visibilityUrl: visibilityUrl
-        });
+    return {
+        ToggleVisibilityView: function (visibility, visibilityUrl) {
+            return new ToggleVisibilityView({
+                el: $('.edx-notes-visibility').get(0),
+                visibility: visibility,
+                visibilityUrl: visibilityUrl
+            });
+        },
+        VisibilityDecorator: VisibilityDecorator
     };
+
 });
 }).call(this, define || RequireJS.define);

lms/static/js/spec/edxnotes/views/toggle_notes_factory_spec.js → lms/static/js/spec/edxnotes/views/notes_visibility_factory_spec.js

 define([
-    'jquery', 'annotator_1.2.9', 'common/js/spec_helpers/ajax_helpers', 'js/edxnotes/views/visibility_decorator',
-    'js/edxnotes/views/toggle_notes_factory', 'js/spec/edxnotes/helpers',
+    'jquery', 'underscore', 'annotator_1.2.9', 'common/js/spec_helpers/ajax_helpers',
+    'js/edxnotes/views/notes_visibility_factory', 'js/spec/edxnotes/helpers',
     'js/spec/edxnotes/custom_matchers', 'jasmine-jquery'
 ], function(
-    $, Annotator, AjaxHelpers, VisibilityDecorator, ToggleNotesFactory, Helpers,
-    customMatchers
+    $, _, Annotator, AjaxHelpers, NotesVisibilityFactory, Helpers, customMatchers
 ) {
     'use strict';
     describe('EdxNotes ToggleNotesFactory', function() {
@@ -23,13 +22,13 @@ define([
                 'js/fixtures/edxnotes/edxnotes_wrapper.html',
                 'js/fixtures/edxnotes/toggle_notes.html'
             );
-            VisibilityDecorator.factory(
+            NotesVisibilityFactory.VisibilityDecorator.factory(
                 document.getElementById('edx-notes-wrapper-123'), params, true
             );
-            VisibilityDecorator.factory(
+            NotesVisibilityFactory.VisibilityDecorator.factory(
                 document.getElementById('edx-notes-wrapper-456'), params, true
             );
-            this.toggleNotes = ToggleNotesFactory(true, '/test_url');
+            this.toggleNotes = NotesVisibilityFactory.ToggleVisibilityView(true, '/test_url');
             this.button = $('.action-toggle-notes');
             this.label = this.button.find('.utility-control-label');
             this.toggleMessage = $('.action-toggle-message');
@@ -37,7 +36,7 @@ define([
         });
 
         afterEach(function () {
-            VisibilityDecorator._setVisibility(null);
+            NotesVisibilityFactory.VisibilityDecorator._setVisibility(null);
             _.invoke(Annotator._instances, 'destroy');
             $('.annotator-notice').remove();
         });

lms/static/js/spec/main.js

@@ -580,7 +580,7 @@
         'lms/include/js/spec/edxnotes/views/tabs/course_structure_spec.js',
         'lms/include/js/spec/edxnotes/views/tabs/tags_spec.js',
         'lms/include/js/spec/edxnotes/views/visibility_decorator_spec.js',
-        'lms/include/js/spec/edxnotes/views/toggle_notes_factory_spec.js',
+        'lms/include/js/spec/edxnotes/views/notes_visibility_factory_spec.js',
         'lms/include/js/spec/edxnotes/models/tab_spec.js',
         'lms/include/js/spec/edxnotes/models/note_spec.js',
         'lms/include/js/spec/edxnotes/plugins/accessibility_spec.js',

lms/static/lms/js/build.js

@@ -19,6 +19,8 @@
          */
         modules: getModulesList([
             'js/discovery/discovery_factory',
+            'js/edxnotes/views/notes_visibility_factory',
+            'js/edxnotes/views/page_factory',
             'js/groups/views/cohorts_dashboard_factory',
             'js/search/course/course_search_factory',
             'js/search/dashboard/dashboard_search_factory',

lms/templates/edxnotes/edxnotes.html

@@ -102,17 +102,14 @@ import json
 </script>
 % endfor
 </%block>
-<%block name="js_extra">
+
 % if notes:
-<script type="text/javascript">
-  (function (require) {
-      require(['js/edxnotes/views/page_factory'], function (NotesPageFactory) {
-          var pageView = new NotesPageFactory({
-              notesList: ${notes},
-              debugMode: ${debug}
-          });
-    });
-  }).call(this, require || RequireJS.require);
-</script>
+    <%block name="js_extra">
+    <%static:require_module module_name="js/edxnotes/views/page_factory" class_name="NotesPageFactory">
+        NotesPageFactory({
+            notesList: ${notes if notes is not None else []},
+            debugMode: ${debug}
+        });
+    </%static:require_module>
+    </%block>
 % endif
-</%block>

lms/templates/edxnotes/toggle_notes.html

@@ -3,6 +3,7 @@ import json
 from django.utils.translation import ugettext as _
 from django.core.urlresolvers import reverse
 %>
+<%namespace name='static' file='/static_content.html'/>
 <%page args="course"/>
 
 <%
@@ -20,10 +21,7 @@ from django.core.urlresolvers import reverse
     % endif
   </button>
 </div>
-<script type="text/javascript">
-  (function (require) {
-      require(['js/edxnotes/views/toggle_notes_factory'], function(ToggleNotesFactory) {
-          ToggleNotesFactory(${json.dumps(edxnotes_visibility)}, '${edxnotes_visibility_url}');
-      });
-  }).call(this, require || RequireJS.require);
-</script>
+
+<%static:require_module module_name="js/edxnotes/views/notes_visibility_factory" class_name="NotesVisibilityFactory">
+    NotesVisibilityFactory.ToggleVisibilityView(${json.dumps(edxnotes_visibility)}, '${edxnotes_visibility_url}');
+</%static:require_module>