This PR provides for a conflict-free instance of Handlebars

Other software that may include Mirador may also include Handlebars. This is problematic since Mirador configures the global instance of Handlebars. This commit addresses the problem by giving Mirador an instance specific version of the library.
ProjectMirador · Mar 15, 2017 · 810ed3a · 810ed3a
1 parent 50b1730
commit 810ed3a
Show file tree

Hide file tree

Showing 27 changed files with 49 additions and 38 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -49,6 +49,8 @@ module.exports = function(grunt) {
 
   // source files
   sources = [
+    'js/src/mirador.js', 
+    'js/src/utils/handlebars.js',
     'js/src/*.js',
     'js/src/viewer/*.js',
     'js/src/manifests/*.js',

diff --git a/js/src/annotations/annotationTooltip.js b/js/src/annotations/annotationTooltip.js
@@ -433,7 +433,7 @@
     },
 
     //when this is being used to edit an existing annotation, insert them into the inputs
-    editorTemplate: Handlebars.compile([
+    editorTemplate: $.Handlebars.compile([
       '<form id="annotation-editor-{{windowId}}" class="annotation-editor annotation-tooltip" {{#if id}}data-anno-id="{{id}}"{{/if}}>',
       '<div>',
       // need to add a delete, if permissions allow
@@ -445,7 +445,7 @@
       '</form>'
     ].join('')),
 
-    viewerTemplate: Handlebars.compile([
+    viewerTemplate: $.Handlebars.compile([
       '<div class="all-annotations" id="annotation-viewer-{{windowId}}">',
       '{{#each annotations}}',
       '<div class="annotation-display annotation-tooltip" data-anno-id="{{id}}">',

diff --git a/js/src/annotations/tinymce-annotation-editor.js b/js/src/annotations/tinymce-annotation-editor.js
@@ -136,7 +136,7 @@
       });
     },
 
-    editorTemplate: Handlebars.compile([
+    editorTemplate: $.Handlebars.compile([
       '<textarea class="text-editor" placeholder="{{t "comments"}}…">{{#if content}}{{content}}{{/if}}</textarea>',
       '<input id="tags-editor-{{windowId}}" class="tags-editor" placeholder="{{t "addTagsHere"}}…" {{#if tags}}value="{{tags}}"{{/if}}>'
     ].join(''))

diff --git a/js/src/utils/handlebars.js b/js/src/utils/handlebars.js
@@ -0,0 +1,7 @@
+(function($) {
+
+  $.Handlebars = (function() {
+    return Handlebars.create();
+  })();
+
+}(Mirador));
diff --git a/js/src/viewer.js b/js/src/viewer.js
@@ -62,10 +62,10 @@
       this.element.css('background-color', '#333').css('background-image','url('+backgroundImage+')').css('background-position','left top')
       .css('background-repeat','repeat');
 
-      //register Handlebars helper
-      Handlebars.registerHelper('t', function(i18n_key) {
+      //register $.Handlebars helper
+      $.Handlebars.registerHelper('t', function(i18n_key) {
         var result = i18next.t(i18n_key);
-        return new Handlebars.SafeString(result);
+        return new $.Handlebars.SafeString(result);
       });
 
       //check all buttons in mainMenu.  If they are all set to false, then don't show mainMenu

diff --git a/js/src/viewer/bookmarkPanel.js b/js/src/viewer/bookmarkPanel.js
@@ -62,7 +62,7 @@
       jQuery(this.element).show({effect: "slide", direction: "up", duration: 300, easing: "swing"});
     },
 
-    template: Handlebars.compile([
+    template: $.Handlebars.compile([
        '<div id="bookmark-panel">',
          '<h3>{{t "bookmarkTitle"}}</h3>',
          '<span>',

diff --git a/js/src/viewer/mainMenu.js b/js/src/viewer/mainMenu.js
@@ -112,7 +112,7 @@
             });
         },
 
-        template: Handlebars.compile([
+        template: $.Handlebars.compile([
         '{{#if userLogo}}',
           '<ul class="user-logo {{mainMenuCls}}">',
             '{{userlogo userLogo}}',
@@ -244,14 +244,14 @@
         }
     };
 
-    Handlebars.registerHelper('userbtns', function (userButtons) {
-        return new Handlebars.SafeString(
+    $.Handlebars.registerHelper('userbtns', function (userButtons) {
+        return new $.Handlebars.SafeString(
             jQuery('<ul class="user-buttons ' + this.mainMenuCls +'"></ul>').append(processUserButtons(userButtons)).get(0).outerHTML
         );
     });
 
-    Handlebars.registerHelper('userlogo', function (userLogo) {
-        return new Handlebars.SafeString(
+    $.Handlebars.registerHelper('userlogo', function (userLogo) {
+        return new $.Handlebars.SafeString(
             processUserBtn(userLogo).get(0).outerHTML
         );
     });

diff --git a/js/src/viewer/manifestListItem.js b/js/src/viewer/manifestListItem.js
@@ -36,7 +36,7 @@
       this.maxPreviewImagesWidth = this.resultsWidth - (this.repoWidth + this.margin + this.metadataWidth + this.margin + this.remainingWidth);
       this.maxPreviewImagesWidth = this.maxPreviewImagesWidth * 0.95;
 
-      Handlebars.registerHelper('pluralize', function(count, singular, plural) {
+      $.Handlebars.registerHelper('pluralize', function(count, singular, plural) {
         if (count === 1) {
           return singular;
         } else {
@@ -246,7 +246,7 @@
       var _this = this;
     },
 
-    template: Handlebars.compile([
+    template: $.Handlebars.compile([
       '<li data-index-number={{index}}>',
       '<div class="repo-image">',
         '{{#if repoImage}}',

diff --git a/js/src/viewer/manifestsPanel.js b/js/src/viewer/manifestsPanel.js
@@ -140,7 +140,7 @@
           _this.element.find('#manifest-search').keyup();
         },
 
-        template: Handlebars.compile([
+        template: $.Handlebars.compile([
           '<div id="manifest-select-menu">',
           '<div class="container">',
             '<div class="manifest-panel-controls">',

diff --git a/js/src/viewer/workspacePanel.js b/js/src/viewer/workspacePanel.js
@@ -111,7 +111,7 @@
       _this.hide();
     },
 
-    template: Handlebars.compile([
+    template: $.Handlebars.compile([
                                  '<div id="workspace-select-menu">',
                                  '<h1>{{t "changeLayout"}}</h1>',
                                  '<h3 class="grid-text"></h3>',

diff --git a/js/src/widgets/annotationsTab.js b/js/src/widgets/annotationsTab.js
@@ -180,7 +180,7 @@
                 this.element.hide();
             }
         },
-        template: Handlebars.compile([
+        template: $.Handlebars.compile([
             '<div class="annotationsPanel">',
             '<ul class="annotationSources">',
             '{{#each annotationSources}}',

diff --git a/js/src/widgets/bookView.js b/js/src/widgets/bookView.js
@@ -78,7 +78,7 @@
       }
     },
 
-    template: Handlebars.compile([
+    template: $.Handlebars.compile([
                                  '<div class="book-view">',
                                  '</div>'
     ].join('')),

diff --git a/js/src/widgets/contextControls.js b/js/src/widgets/contextControls.js
@@ -255,7 +255,7 @@
       });
     },
 
-    annotationTemplate: Handlebars.compile([
+    annotationTemplate: $.Handlebars.compile([
                                    '{{#if showEdit}}',
                                    '<a class="mirador-osd-pointer-mode hud-control selected" title="{{t "pointerTooltip"}}">',
                                    '<i class="fa fa-mouse-pointer"></i>',
@@ -297,7 +297,7 @@
                                    '{{/if}}'
     ].join('')),
 
-    manipulationTemplate: Handlebars.compile([
+    manipulationTemplate: $.Handlebars.compile([
                                    '{{#if showRotate}}',
                                    '<a class="hud-control mirador-osd-rotate-right" title="{{t "rotateRightTooltip"}}">',
                                    '<i class="fa fa-lg fa-rotate-right"></i>',
@@ -346,7 +346,7 @@
     ].join('')),
 
     // for accessibility, make sure to add aria-labels just like above
-    editorTemplate: Handlebars.compile([
+    editorTemplate: $.Handlebars.compile([
                                  '<div class="mirador-osd-context-controls hud-container">',
                                    '<a class="mirador-osd-back hud-control" role="button">',
                                    '<i class="fa fa-lg fa-arrow-left"></i>',

diff --git a/js/src/widgets/hud.js b/js/src/widgets/hud.js
@@ -206,7 +206,7 @@
       });
     },
 
-    template: Handlebars.compile([
+    template: $.Handlebars.compile([
                                  '<div class="mirador-hud">',
                                  '{{#if showNextPrev}}',
                                  '<a class="mirador-osd-previous hud-control ">',

diff --git a/js/src/widgets/imageView.js b/js/src/widgets/imageView.js
@@ -90,7 +90,7 @@
       }
     },
 
-    template: Handlebars.compile([
+    template: $.Handlebars.compile([
                                  '<div class="image-view">',
                                  '</div>'
     ].join('')),

diff --git a/js/src/widgets/layersTab.js b/js/src/widgets/layersTab.js
@@ -97,7 +97,7 @@
       }
     },
 
-    template: Handlebars.compile([
+    template: $.Handlebars.compile([
       '<div class="layersPanel">',
       '</div>',
       ].join(''))

diff --git a/js/src/widgets/metadataView.js b/js/src/widgets/metadataView.js
@@ -237,7 +237,7 @@
       return textWithLinks;
     },
 
-    template: Handlebars.compile([
+    template: $.Handlebars.compile([
     '<div class="sub-title">{{t "details"}}:</div>',
         '<div class="{{metadataListingCls}}">',
           '{{#each details}}',

diff --git a/js/src/widgets/sidePanel.js b/js/src/widgets/sidePanel.js
@@ -194,7 +194,7 @@
       }
     },
 
-    template: Handlebars.compile([
+    template: $.Handlebars.compile([
       '<div class="tabContentArea">',
       '<ul class="tabGroup">',
       '</ul>',

diff --git a/js/src/widgets/tabs.js b/js/src/widgets/tabs.js
@@ -98,7 +98,7 @@
             this.element.find(tabClass).addClass('selected');
 
         },
-        template: Handlebars.compile([
+        template: $.Handlebars.compile([
           '<ul class="tabGroup">',
             '{{#each tabs}}',
             '<li class="tab {{this.options.id}} {{#unless @index}}selected{{/unless}}" data-tabId="{{this.options.id}}">',

diff --git a/js/src/widgets/thumbnailsView.js b/js/src/widgets/thumbnailsView.js
@@ -171,7 +171,7 @@
       }
     },
 
-    template: Handlebars.compile([
+    template: $.Handlebars.compile([
                                  '<div class="{{thumbnailCls}}">',
                                  '<ul class="{{listingCssCls}}" role="list" aria-label="Thumbnails">',
                                  '{{#thumbs}}',

diff --git a/js/src/widgets/toc.js b/js/src/widgets/toc.js
@@ -372,7 +372,7 @@
       });
     },
 
-    emptyTemplate: Handlebars.compile([
+    emptyTemplate: $.Handlebars.compile([
       '<ul class="toc">',
       '<li class="leaf-item open">',
       '<h2><span>{{t "noIndex"}}</span></h2>',
@@ -381,7 +381,7 @@
 
     template: function(tplData) {
 
-      var template = Handlebars.compile([
+      var template = $.Handlebars.compile([
         '<ul class="toc">',
         '{{#nestedRangeLevel ranges}}',
         '<li class="{{#if children}}has-child{{else}}leaf-item{{/if}}">',
@@ -398,7 +398,7 @@
 
       var previousTemplate;
 
-      Handlebars.registerHelper('nestedRangeLevel', function(children, options) {
+      $.Handlebars.registerHelper('nestedRangeLevel', function(children, options) {
         var out = '';
 
         if (options.fn !== undefined) {
@@ -413,7 +413,7 @@
         return out;
       });
 
-      Handlebars.registerHelper('tocLevel', function(id, label, level, children) {
+      $.Handlebars.registerHelper('tocLevel', function(id, label, level, children) {
         var caret = '<i class="fa fa-caret-right toc-caret"></i>',
             cert = '<i class="fa fa-certificate star"></i>';
         return '<h' + (level+1) + '><a class="toc-link" data-rangeID="' + id + '">' + caret + cert + '<span>' + label + '</span></a></h' + (level+1) + '>';

diff --git a/js/src/workspaces/slot.js b/js/src/workspaces/slot.js
@@ -272,7 +272,7 @@
     },
 
     // template should be based on workspace type
-    template: Handlebars.compile([
+    template: $.Handlebars.compile([
                                  '<div id="{{slotID}}" class="{{workspaceSlotCls}}">',
                                  '<div class="slotIconContainer">',
                                  // '<a href="javascript:;" class="mirador-btn mirador-icon-window-menu" title="Replace object"><i class="fa fa-table fa-lg fa-fw"></i>',

diff --git a/js/src/workspaces/window.js b/js/src/workspaces/window.js
@@ -927,7 +927,7 @@
     },
 
     // template should be based on workspace type
-    template: Handlebars.compile([
+    template: $.Handlebars.compile([
                                  '<div class="window">',
                                  '<div class="manifest-info">',
                                  '<div class="window-manifest-navigation">',

diff --git a/karma.conf.js b/karma.conf.js
@@ -38,6 +38,8 @@ module.exports = function(config) {
       'node_modules/sinon/pkg/sinon.js',
       'node_modules/jasmine-jquery/lib/jasmine-jquery.js',
       // app
+      'js/src/mirador.js', 
+      'js/src/utils/handlebars.js',
       'js/src/*.js',
       'js/src/viewer/*.js',
       'js/src/manifests/*.js',

diff --git a/spec/annotations/osd-svg-overlay.test.js b/spec/annotations/osd-svg-overlay.test.js
@@ -14,9 +14,9 @@ describe('Overlay', function() {
 
   beforeEach(function() {
     //register Handlebars helper
-    Handlebars.registerHelper('t', function(i18n_key) {
+    Mirador.Handlebars.registerHelper('t', function(i18n_key) {
       var result = i18next.t(i18n_key);
-      return new Handlebars.SafeString(result);
+      return new Mirador.Handlebars.SafeString(result);
     });
 
     var id = 'test';

diff --git a/spec/annotations/tinymce-annotation-editor.test.js b/spec/annotations/tinymce-annotation-editor.test.js
@@ -2,9 +2,9 @@ describe('TinyMCEAnnotationBodyEditor', function() {
   var subject;
 
   beforeEach(function() {
-    Handlebars.registerHelper('t', function(i18n_key) {
+    Mirador.Handlebars.registerHelper('t', function(i18n_key) {
       var result = i18next.t(i18n_key);
-      return new Handlebars.SafeString(result);
+      return new Mirador.Handlebars.SafeString(result);
     });
     subject = new Mirador.TinyMCEAnnotationBodyEditor();
   });

diff --git a/spec/utils/handlebars.test.js b/spec/utils/handlebars.test.js