Merge pull request #1567 from ProjectMirador/develop

Merge develop into master

.gitignore

@@ -3,6 +3,7 @@ _SpecRunner.html
 bkp
 css/discovery.css
 css/mirador.css
+css/jquery-ui-scoped.css
 dev.html
 discovery.html
 js/discovery

CONTRIBUTING.md

@@ -77,8 +77,6 @@ Mirador uses the node.js runtime for its development environment, and to bundle
 #### The NPM package manager
 Dependencies are managed primarily with the NPM package manager, and releases are primarily distributed over npm. It is recommended that any new dependencies being added are tracked with a specific version in the `package.json` and installed with npm. The final build dependency is then copied into the `js/lib` directory for inclusion into Mirador. Only this copied final version of the dependency should be versioned (added to git).
 #### Javascript Resources
-#### Bower Package Manager [DEPRECATED]
-Some resources are managed with bower, but this is being phased out. It is recommended that no new dependency be added through bower unless it is truly unavailable on NPM.
 ### Project Management with Grunt
 [Grunt](http://gruntjs.com/) is a utility for managing repetitive tasks involved in the development process, such as building, linting, format-checking, and compressing files, running tests and generating coverage reports, and reloading the browser on file changes (for interactive feedback during feature development). A variety of tasks have been automated for developer convenience.
 #### Building and Compressing

Gruntfile.js

 module.exports = function(grunt) {
 
   // ----------
-  grunt.loadNpmTasks('grunt-contrib-compress');
   grunt.loadNpmTasks('grunt-contrib-concat');
   grunt.loadNpmTasks('grunt-contrib-jshint');
   grunt.loadNpmTasks("gruntify-eslint");
@@ -14,6 +13,7 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-cssmin');
   grunt.loadNpmTasks('grunt-contrib-copy');
   grunt.loadNpmTasks('grunt-githooks');
+  grunt.loadNpmTasks('grunt-css-selectors');
 
   // ----------
   var distribution = 'build/mirador/mirador.js',
@@ -29,7 +29,8 @@ module.exports = function(grunt) {
     'node_modules/bootstrap/js/transition.js',
     'node_modules/bootbox/bootbox.js',
     'node_modules/jquery.scrollto/jquery.scrollTo.min.js',
-    'js/lib/jquery.qtip.min.js',
+    'node_modules/jstree/dist/jstree.min.js',
+    'node_modules/qtip2/dist/jquery.qtip.min.js',
     'node_modules/javascript-state-machine/state-machine.min.js',
     'node_modules/tinymce/tinymce.min.js',
     'node_modules/handlebars/dist/handlebars.js',
@@ -44,9 +45,9 @@ module.exports = function(grunt) {
     'node_modules/i18next/i18next.min.js',
     'node_modules/i18next-browser-languagedetector/i18nextBrowserLanguageDetector.min.js',
     'node_modules/i18next-xhr-backend/i18nextXHRBackend.min.js',
-    'bower_components/simplePagination.js/jquery.simplePagination.js',
+    'node_modules/simple-pagination.js/jquery.simplePagination.js',
     'js/lib/modernizr.custom.js',
-    'js/lib/sanitize-html.min.js',
+    'node_modules/sanitize-html/dist/sanitize-html.min.js',
     'node_modules/iiif-evented-canvas/dist/iiif-evented-canvas.umd.min.js',
     'node_modules/iiif-layout-functions/dist/iiif-layout-functions.umd.min.js',
     'node_modules/select2/dist/js/select2.full.min.js'
@@ -94,13 +95,15 @@ module.exports = function(grunt) {
           'css/bootstrap.modals.css',
           'css/normalize.css',
           'node_modules/font-awesome/css/font-awesome.min.css',
-          'css/jquery-ui.min.css',
-          'css/jquery.qtip.min.css',
+          'css/jquery-ui-scoped.css',
+          'node_modules/jstree/dist/themes/default/style.min.css',
+          'css/collection-tree-mod.css',
+          'node_modules/qtip2/dist/jquery.qtip.min.css',
           'node_modules/spectrum-colorpicker/spectrum.css',
           'node_modules/select2/dist/css/select2.min.css',
           'css/mirador.css',
           'css/material-icons.css',
-          'bower_components/simplePagination.js/simplePagination.css'
+          'node_modules/simple-pagination.js/simplePagination.css'
         ],
         dest: 'build/mirador/css/mirador-combined.css'
       }
@@ -171,9 +174,6 @@ module.exports = function(grunt) {
         }, {
           src: 'js/lib/parse.min.js',
           dest: 'build/mirador/parse.min.js'
-        }, {
-          src: 'js/lib/ZeroClipboard.swf',
-          dest: 'build/mirador/ZeroClipboard.swf'
         }, {
           expand: true,
           src: 'locales/**',
@@ -182,25 +182,6 @@ module.exports = function(grunt) {
       }
     },
 
-    compress: {
-      zip: {
-        options: {
-          archive: 'build/mirador.zip'
-        },
-        files: [
-          { expand: true, cwd: 'build/', src: ['mirador/**'] }
-        ]
-      },
-      tar: {
-        options: {
-          archive: 'build/mirador.tar'
-        },
-        files: [
-          { expand: true, cwd: 'build/', src: [ 'mirador/**' ] }
-        ]
-      }
-    },
-
     connect: {
       server: {
         options: {
@@ -269,6 +250,19 @@ module.exports = function(grunt) {
       ci: {
         src: 'reports/coverage/PhantomJS*/lcov.info'
       }
+    },
+
+    css_selectors: {
+      options: {
+        mutations: [{
+          prefix: '.mirador-container'
+        }]
+      },
+      your_target: {
+        files: {
+          'css/jquery-ui-scoped.css': ['css/jquery-ui.min.css']
+        }
+      }
     }
   });
 
@@ -286,27 +280,22 @@ module.exports = function(grunt) {
   });
   // ----------
   // Lint task
-  grunt.registerTask('lint', ['jshint', 'eslint'])
+  grunt.registerTask('lint', ['jshint', 'eslint']);
+
+  // ----------
+  // jQueryUI CSS task.
+  // Scopes all jQueryUI CSS selectors with '.mirador-container'.
+  grunt.registerTask('jqueryui_css', ['css_selectors']);
 
   // ----------
   // Build task.
   // Cleans out the build folder and builds the code and images into it, checking lint.
-  grunt.registerTask('build', [ 'clean:build', 'git-describe', 'lint', 'less', 'concat:css', 'uglify', 'cssmin', 'copy']);
+  grunt.registerTask('build', [ 'clean:build', 'git-describe', 'lint', 'less', 'jqueryui_css', 'concat', 'uglify', 'cssmin', 'copy']);
 
   // ----------
   // Dev Build task.
   // Build, but skip the time-consuming and obscurantist minification and uglification.
-  grunt.registerTask('dev_build', [ 'clean:build', 'git-describe', 'lint', 'less', 'concat', 'copy']);
-
-  // ----------
-  // Package task.
-  // Builds and creates the .zip and .tar files.
-  grunt.registerTask('package', ['build', 'compress']);
-
-  // ----------
-  // Publish task.
-  // Cleans the built files out of the release folder and copies newly built ones over.
-  grunt.registerTask('publish', ['package', 'clean:release', 'copy:release']);
+  grunt.registerTask('dev_build', [ 'clean:build', 'git-describe', 'lint', 'less', 'jqueryui_css', 'concat', 'copy']);
 
   // ----------
   // Default task.

README.md

@@ -2,24 +2,25 @@
 [![Stories in Ready](https://badge.waffle.io/ProjectMirador/mirador.svg?label=ready&title=Ready)](http://waffle.io/iiif/mirador)
 
 # Mirador
-![mirador banner](http://projectmirador.github.io/mirador/img/banner.jpg)
+![mirador banner](https://projectmirador.github.io/mirador/img/banner.jpg)
 **Mirador is a multi-repository, configurable, extensible, and easy-to-integrate viewer and annotation creation and comparison environment for IIIF resources, ranging from deep-zooming artwork, to complex manuscript objects. It provides a tiling windowed environment for comparing multiple image-based resources, synchronised structural and visual navigation of content using openSeadragon, Open Annotation compliant annotation creation and viewing on deep-zoomable canvases, metadata display, bookreading, and bookmarking.**
 
 ### [See a Demo](http://projectmirador.org/demo/)
 ### [Getting Started](http://projectmirador.org/docs/docs/getting-started.html)
 
 ### Run in Development
-Mirador uses [node.js](http://nodejs.org/) and a build system to assemble, test, and manage the development resources. If you have never used these tools before, you may need to install them.
+Mirador uses [Node.js](https://nodejs.org/) and a build system to assemble, test, and manage the development resources. If you have never used these tools before, you may need to install them.
 
- 1. Install Node, if you haven't already (available at the link above)  
- 1. Clone the mirador repository (if you haven't already done so above)
- 1. On the command line, go into the mirador folder
- 1. Install all dependencies with `npm install`. Run `npm start'.
+ 1. Install [Node.js](https://nodejs.org/)
+ 2. Install the Grunt command line runner i.e. `npm install -g grunt-cli`
+ 1. Clone the Mirador repository
+ 1. Change into the Mirador directory
+ 1. Install all dependencies with `npm install`. Run `npm start`.
  
 ### Run Tests
 `npm test`
 
-For more information, see the [Docs](http://projectmirador.org/docs/docs/getting-started.html), submit an [issue](https://github.com/projectmirador/mirador/issues), or ask on [slack](http://bit.ly/iiif-slack).
+For more information, see the [Docs](http://projectmirador.org/docs/docs/getting-started.html), submit an [issue](https://github.com/projectmirador/mirador/issues), or ask on [Slack](http://bit.ly/iiif-slack).
 
 ### Project Diagnostics
  [![Coverage Status](https://coveralls.io/repos/github/ProjectMirador/mirador/badge.svg?branch=master&upToDate=true)](https://coveralls.io/github/ProjectMirador/mirador?branch=master&upToDate=true)

bin/create_release.sh

 # remove previous packages
-rm -rf build/mirador*
+rm -rf build dist
 
 # build package
-node_modules/.bin/grunt package
+node_modules/.bin/grunt build
 
 # mk tmp release dir
 mkdir -p build/tmp/build/mirador
 
-# unzip build
-unzip build/mirador.zip -d build/tmp/build
+# copy mirador build into tmp folder
+cp -r build/mirador/* build/tmp/build/mirador
 
-# add example
+# add example(s)
 cp examples/example.html build/tmp/build
 
 cd build/tmp
@@ -22,4 +22,10 @@ mv build/build.zip ../
 tar -czvf build/build.tar.gz build/
 mv build/build.tar.gz ../
 
-cd -
+# remove temporary files
+cd .. && rm -rf tmp
+
+# make npm dist directory
+cd ..
+mkdir dist
+cp -r build/mirador/* dist

bin/update_demo.sh

@@ -2,7 +2,7 @@
 rm -rf build/mirador*
 
 # build package
-node_modules/.bin/grunt package
+node_modules/.bin/grunt build
 
 # mk tmp release dir
 mkdir build/tmp
@@ -27,6 +27,7 @@ cp -R build/tmp/mirador/themes demo
 
 # Copy over files
 cp build/tmp/mirador/mirador.min.js demo
+cp build/tmp/mirador/mirador.js demo
 cp build/tmp/mirador/ZeroClipboard.swf demo
 
 # Clean up extra files

bower.json

@@ -20,9 +20,6 @@
     "tests"
   ],
   "dependencies": {
-    "sanitize-html": "~1.11.4",
-    "qtip2": "~2.2.1",
-    "simplePagination.js": "*"
   },
   "resolutions": {
     "jquery": ">=1.7.2"

css/jquery.qtip.min.css

-/* qTip2 v2.2.1 | Plugins: tips modal viewport svg imagemap ie6 | Styles: core basic css3 | qtip2.com | Licensed MIT | Sat Sep 06 2014 23:12:07 */
-
-.qtip{position:absolute;left:-28000px;top:-28000px;display:none;max-width:280px;min-width:50px;font-size:10.5px;line-height:12px;direction:ltr;box-shadow:none;padding:0}.qtip-content{position:relative;padding:5px 9px;overflow:hidden;text-align:left;word-wrap:break-word}.qtip-titlebar{position:relative;padding:5px 35px 5px 10px;overflow:hidden;border-width:0 0 1px;font-weight:700}.qtip-titlebar+.qtip-content{border-top-width:0!important}.qtip-close{position:absolute;right:-9px;top:-9px;z-index:11;cursor:pointer;outline:0;border:1px solid transparent}.qtip-titlebar .qtip-close{right:4px;top:50%;margin-top:-9px}* html .qtip-titlebar .qtip-close{top:16px}.qtip-icon .ui-icon,.qtip-titlebar .ui-icon{display:block;text-indent:-1000em;direction:ltr}.qtip-icon,.qtip-icon .ui-icon{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;text-decoration:none}.qtip-icon .ui-icon{width:18px;height:14px;line-height:14px;text-align:center;text-indent:0;font:400 bold 10px/13px Tahoma,sans-serif;color:inherit;background:-100em -100em no-repeat}.qtip-default{border:1px solid #F1D031;background-color:#FFFFA3;color:#555}.qtip-default .qtip-titlebar{background-color:#FFEF93}.qtip-default .qtip-icon{border-color:#CCC;background:#F1F1F1;color:#777}.qtip-default .qtip-titlebar .qtip-close{border-color:#AAA;color:#111}.qtip-light{background-color:#fff;border-color:#E2E2E2;color:#454545}.qtip-light .qtip-titlebar{background-color:#f1f1f1}.qtip-dark{background-color:#505050;border-color:#303030;color:#f3f3f3}.qtip-dark .qtip-titlebar{background-color:#404040}.qtip-dark .qtip-icon{border-color:#444}.qtip-dark .qtip-titlebar .ui-state-hover{border-color:#303030}.qtip-cream{background-color:#FBF7AA;border-color:#F9E98E;color:#A27D35}.qtip-cream .qtip-titlebar{background-color:#F0DE7D}.qtip-cream .qtip-close .qtip-icon{background-position:-82px 0}.qtip-red{background-color:#F78B83;border-color:#D95252;color:#912323}.qtip-red .qtip-titlebar{background-color:#F06D65}.qtip-red .qtip-close .qtip-icon{background-position:-102px 0}.qtip-red .qtip-icon,.qtip-red .qtip-titlebar .ui-state-hover{border-color:#D95252}.qtip-green{background-color:#CAED9E;border-color:#90D93F;color:#3F6219}.qtip-green .qtip-titlebar{background-color:#B0DE78}.qtip-green .qtip-close .qtip-icon{background-position:-42px 0}.qtip-blue{background-color:#E5F6FE;border-color:#ADD9ED;color:#5E99BD}.qtip-blue .qtip-titlebar{background-color:#D0E9F5}.qtip-blue .qtip-close .qtip-icon{background-position:-2px 0}.qtip-shadow{-webkit-box-shadow:1px 1px 3px 1px rgba(0,0,0,.15);-moz-box-shadow:1px 1px 3px 1px rgba(0,0,0,.15);box-shadow:1px 1px 3px 1px rgba(0,0,0,.15)}.qtip-bootstrap,.qtip-rounded,.qtip-tipsy{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}.qtip-rounded .qtip-titlebar{-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}.qtip-youtube{-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 0 3px #333;-moz-box-shadow:0 0 3px #333;box-shadow:0 0 3px #333;color:#fff;border:0 solid transparent;background:#4A4A4A;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#4A4A4A),color-stop(100%,#000));background-image:-webkit-linear-gradient(top,#4A4A4A 0,#000 100%);background-image:-moz-linear-gradient(top,#4A4A4A 0,#000 100%);background-image:-ms-linear-gradient(top,#4A4A4A 0,#000 100%);background-image:-o-linear-gradient(top,#4A4A4A 0,#000 100%)}.qtip-youtube .qtip-titlebar{background-color:transparent}.qtip-youtube .qtip-content{padding:.75em;font:12px arial,sans-serif;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#4a4a4a, EndColorStr=#000000);-ms-filter:"progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4a4a4a,EndColorStr=#000000);"}.qtip-youtube .qtip-icon{border-color:#222}.qtip-youtube .qtip-titlebar .ui-state-hover{border-color:#303030}.qtip-jtools{background:#232323;background:rgba(0,0,0,.7);background-image:-webkit-gradient(linear,left top,left bottom,from(#717171),to(#232323));background-image:-moz-linear-gradient(top,#717171,#232323);background-image:-webkit-linear-gradient(top,#717171,#232323);background-image:-ms-linear-gradient(top,#717171,#232323);background-image:-o-linear-gradient(top,#717171,#232323);border:2px solid #ddd;border:2px solid rgba(241,241,241,1);-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 0 12px #333;-moz-box-shadow:0 0 12px #333;box-shadow:0 0 12px #333}.qtip-jtools .qtip-titlebar{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171, endColorstr=#4A4A4A);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A)"}.qtip-jtools .qtip-content{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A, endColorstr=#232323);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323)"}.qtip-jtools .qtip-content,.qtip-jtools .qtip-titlebar{background:0 0;color:#fff;border:0 dashed transparent}.qtip-jtools .qtip-icon{border-color:#555}.qtip-jtools .qtip-titlebar .ui-state-hover{border-color:#333}.qtip-cluetip{-webkit-box-shadow:4px 4px 5px rgba(0,0,0,.4);-moz-box-shadow:4px 4px 5px rgba(0,0,0,.4);box-shadow:4px 4px 5px rgba(0,0,0,.4);background-color:#D9D9C2;color:#111;border:0 dashed transparent}.qtip-cluetip .qtip-titlebar{background-color:#87876A;color:#fff;border:0 dashed transparent}.qtip-cluetip .qtip-icon{border-color:#808064}.qtip-cluetip .qtip-titlebar .ui-state-hover{border-color:#696952;color:#696952}.qtip-tipsy{background:#000;background:rgba(0,0,0,.87);color:#fff;border:0 solid transparent;font-size:11px;font-family:'Lucida Grande',sans-serif;font-weight:700;line-height:16px;text-shadow:0 1px #000}.qtip-tipsy .qtip-titlebar{padding:6px 35px 0 10px;background-color:transparent}.qtip-tipsy .qtip-content{padding:6px 10px}.qtip-tipsy .qtip-icon{border-color:#222;text-shadow:none}.qtip-tipsy .qtip-titlebar .ui-state-hover{border-color:#303030}.qtip-tipped{border:3px solid #959FA9;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#F9F9F9;color:#454545;font-weight:400;font-family:serif}.qtip-tipped .qtip-titlebar{border-bottom-width:0;color:#fff;background:#3A79B8;background-image:-webkit-gradient(linear,left top,left bottom,from(#3A79B8),to(#2E629D));background-image:-webkit-linear-gradient(top,#3A79B8,#2E629D);background-image:-moz-linear-gradient(top,#3A79B8,#2E629D);background-image:-ms-linear-gradient(top,#3A79B8,#2E629D);background-image:-o-linear-gradient(top,#3A79B8,#2E629D);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8, endColorstr=#2E629D);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D)"}.qtip-tipped .qtip-icon{border:2px solid #285589;background:#285589}.qtip-tipped .qtip-icon .ui-icon{background-color:#FBFBFB;color:#555}.qtip-bootstrap{font-size:14px;line-height:20px;color:#333;padding:1px;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box}.qtip-bootstrap .qtip-titlebar{padding:8px 14px;margin:0;font-size:14px;font-weight:400;line-height:18px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.qtip-bootstrap .qtip-titlebar .qtip-close{right:11px;top:45%;border-style:none}.qtip-bootstrap .qtip-content{padding:9px 14px}.qtip-bootstrap .qtip-icon{background:0 0}.qtip-bootstrap .qtip-icon .ui-icon{width:auto;height:auto;float:right;font-size:20px;font-weight:700;line-height:18px;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20)}.qtip-bootstrap .qtip-icon .ui-icon:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.4;filter:alpha(opacity=40)}.qtip:not(.ie9haxors) div.qtip-content,.qtip:not(.ie9haxors) div.qtip-titlebar{filter:none;-ms-filter:none}.qtip .qtip-tip{margin:0 auto;overflow:hidden;z-index:10}.qtip .qtip-tip,x:-o-prefocus{visibility:hidden}.qtip .qtip-tip,.qtip .qtip-tip .qtip-vml,.qtip .qtip-tip canvas{position:absolute;color:#123456;background:0 0;border:0 dashed transparent}.qtip .qtip-tip canvas{top:0;left:0}.qtip .qtip-tip .qtip-vml{behavior:url(#default#VML);display:inline-block;visibility:visible}#qtip-overlay{position:fixed;left:0;top:0;width:100%;height:100%}#qtip-overlay.blurs{cursor:pointer}#qtip-overlay div{position:absolute;left:0;top:0;width:100%;height:100%;background-color:#000;opacity:.7;filter:alpha(opacity=70);-ms-filter:"alpha(Opacity=70)"}.qtipmodal-ie6fix{position:absolute!important}
\ No newline at end of file

css/less/main.less

@@ -25,3 +25,4 @@
 @import 'panels/bottom-panel';
 @import 'panels/layers-tab';
 @import 'panels/search-tab';
+@import 'panels/collection-tree-mod';

css/less/panels/side-panel.less

@@ -52,7 +52,7 @@
       list-style-type: none;
       border-left:0;
       border-right:0;
-      padding:10px 10px 0 10px;
+      padding:10px 10px 10px 10px;
     }
 
     .annotationListItem:after {
@@ -125,10 +125,26 @@
     margin-top: 8px;
   }
 
-  .annotationsPanel ul {
+  .annotationsPanel {
+    margin: 0;
+    margin-bottom: 10px;
+    padding-bottom: 100px;
+    overflow-y: scroll;
+    width: 280px;
+    padding-right: 10px;
+    position: absolute;
+    box-sizing: border-box;
+    left: 0;
+    top: 0px;
+    bottom: 0;
+    list-style-type: none;
+    font-size: 75%;
+
+    ul {
       padding:0;
       margin:0;
      }
+   }
 
   .toc {
     margin:0;

css/less/window.less

@@ -6,6 +6,7 @@
     overflow: hidden;
     background-color: @black-33;
     top: 0%;
+    z-index: 1;
   }
 
   .manifest-info {

css/less/workspace.less

@@ -28,6 +28,9 @@
 
     .remove-slot-option {
       position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
       margin: 10px;
       color: @gray;
       cursor: pointer;

docs/getting-started.md

@@ -30,7 +30,7 @@ To initialize Mirador, it needs to be attached to an existing HTML **div** throu
       $(function() {
         Mirador({
           id: "viewer",
-          data: [/* Manifests and collections here *]
+          data: [/* Manifests and collections here */]
         });
       });
     </script>
@@ -43,11 +43,11 @@ To initialize Mirador, it needs to be attached to an existing HTML **div** throu
 
 Changing the height and width of Mirador's root element allows you to place it in an HTML page with other content.
 
-#### Manifests
+#### Manifests and Collections
 
-There are several different ways to add a manifest to your Mirador instance.
+There are several different ways to add content to your Mirador instance.
 
-The first way is to pass an object into the data array that identifies the desired manifestUri:
+The first way is to pass an object into the data array that identifies the desired manifest URI:
 
 ```` javascript
 Mirador({
@@ -58,7 +58,7 @@ Mirador({
 });
 ````
 
-Second, you can pass in an object pointing to a collectionUri, which contains a list of manifests that Mirador will parse:
+Second, you can pass in an object pointing to a collection URI, which contains a list of manifests that Mirador will parse:
 
 ```` javascript
 Mirador({
@@ -70,13 +70,15 @@ Mirador({
 ]);
 ````
 
-Note that the current version of Mirador can **only **parse collections that are one level deep. So if your collection data is a collection of collections, Mirador will not be able to find all of your manifests. However, supporting more deeply nested collections is on the Mirador roadmap.
+The current version of Mirador supports collections of any nesting depth. Collections are displayed on the content tree as folder entries, which can be clicked on to display manifests filed under them. Sub-collections can also be accessed by clicking on the drop-down caret (if available).
+
+![Collection tree](image_collection_tree.png)
 
 Within the application itself, there are two other ways for end users to add manifests to Mirador:
 
-1. If showAddFromURLBox has not been disabled, an end user can add a known IIIF manifest URL through the Add new object from URL box:
+1. If showAddFromURLBox has not been disabled, an end user can add a known IIIF manifest or collection URL through the Add new object from URL box:
 
-![image alt text](image_1.png)
+![image alt text](image_add_object_box.png)
 
 2. Mirador can handle an end user dropping a IIIF manifest into a window using [IIIF Drag-and-drop](http://zimeon.github.io/iiif-dragndrop/):
 

index.html

@@ -67,20 +67,24 @@
            { "manifestUri": "https://data.ucd.ie/api/img/manifests/ucdlib:30708", "location": "University College Dublin"},
            { "manifestUri": "http://dzkimgs.l.u-tokyo.ac.jp/iiif/zuzoubu/12b02/manifest.json", "location": "University of Tokyo"},
            { "manifestUri": "http://www2.dhii.jp/nijl/NIJL0018/099-0014/manifest_tags.json", "location": "NIJL"},
-           { "manifestUri": "http://digi.vatlib.it/iiif/MSS_Vat.lat.3225/manifest.json", "location": "Vatican Library"},
+           { "manifestUri": "https://digi.vatlib.it/iiif/MSS_Vat.lat.3225/manifest.json", "location": "Vatican Library"},
            { "manifestUri": "http://media.nga.gov/public/manifests/nga_highlights.json", "location": "National Gallery of Art"},
            { "manifestUri": "http://demos.biblissima-condorcet.fr/iiif/metadata/BVMM/chateauroux/manifest.json", "location": "Biblissima"},
            { "manifestUri": "https://manifests.britishart.yale.edu/Osbornfa1", "location": "Yale Beinecke"},
            /* { "manifestUri": "http://demos.biblissima-condorcet.fr/iiif/metadata/florus-dispersus/manifest.json", "location": "Biblissima"}*/
-           { "manifestUri": "https://media.nga.gov/public/manifests/multispectral_demo.json", "location": "National Gallery of Art"}
+           { "manifestUri": "https://media.nga.gov/public/manifests/multispectral_demo.json", "location": "National Gallery of Art"},
+           { "manifestUri": "https://scta.info/iiif/codex/sorb/manifest"},
+           { "manifestUri": "https://scta.info/iiif/graciliscommentary/lon/manifest"},
+           { "manifestUri": "https://scta.info/iiif/plaoulcommentary/sorb/manifest"}
          ],
          "windowObjects": [],
          "annotationEndpoint": { "name":"Local Storage", "module": "LocalStorageEndpoint" },
          "sidePanelOptions" : {
            "tocTabAvailable": true,
            "layersTabAvailable": true,
-           "searchTabAvailable": true
-         }
+           "searchTabAvailable": true,
+           "annotations" : true
+         },
       });
      });
     </script>

js/lib/isfahan.js

@@ -45,6 +45,7 @@ var Isfahan = function(configObject) {
     n = group.length,
     x = rect.x,
     y = rect.y,
+    d,
     o;
     var offset = 0;
     while (++i < n) {