Fix tags-annotator UI bug; Enable plugin

Identify cause of UI bugginess to be UL elements containing tag tokens They are unintentionally duplicated before and after Annotator controls by code searching for all UL elements in the Annotator editor See in Annotator CoffeeScript: https://github.com/openannotation/annotator/blob/865840ba641c168b24a99af28f390e9778105cea/src/editor.coffee#L267 See in resulting JavaScript: https://github.com/openannotation/annotator/blob/865840ba641c168b24a99af28f390e9778105cea/pkg/annotator.js#L1605 Fix by changing to OL elements and updating corresponding CSS
Willa-Cather-Archive · May 18, 2016 · c6b2ba0 · c6b2ba0
1 parent 7e72696
commit c6b2ba0
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 15 deletions.
diff --git a/public/js/annotonia/annotonia.js b/public/js/annotonia/annotonia.js
@@ -71,7 +71,7 @@ $(function ($) {
     $('body')
       .annotator()
       .annotator('addPlugin', 'Filter')
-//      .annotator('addPlugin', 'HighlightTags', optionsTags)
+      .annotator('addPlugin', 'HighlightTags', optionsTags)
 //      .annotator('addPlugin', 'Offline', optionsOffline)
       .annotator('addPlugin', 'RichText', optionsRichText)
       .annotator('addPlugin', 'Store', optionsStore)

diff --git a/public/js/annotonia/tags-annotator/build/tags-annotator.min.css b/public/js/annotonia/tags-annotator/build/tags-annotator.min.css
diff --git a/public/js/annotonia/tags-annotator/src/tags-annotator.css b/public/js/annotonia/tags-annotator/src/tags-annotator.css
@@ -62,32 +62,32 @@ div.token-input-dropdown p {
     color: #777;
 }
 
-div.token-input-dropdown ul {
+div.token-input-dropdown ol {
     margin: 0;
     padding: 0;
 }
 
-div.token-input-dropdown ul li {
+div.token-input-dropdown ol li {
     background-color: #fff;
     padding: 3px;
     margin: 0;
     list-style-type: none;
 }
 
-div.token-input-dropdown ul li.token-input-dropdown-item {
+div.token-input-dropdown ol li.token-input-dropdown-item {
     background-color: #fff;
 }
 
-div.token-input-dropdown ul li.token-input-dropdown-item2 {
+div.token-input-dropdown ol li.token-input-dropdown-item2 {
     background-color: #fff;
 }
 
-div.token-input-dropdown ul li em {
+div.token-input-dropdown ol li em {
     font-weight: bold;
     font-style: normal;
 }
 
-div.token-input-dropdown ul li.token-input-selected-dropdown-item {
+div.token-input-dropdown ol li.token-input-selected-dropdown-item {
     background-color: #3b5998;
     color: #fff;
 }

diff --git a/public/js/annotonia/tags-annotator/src/tags-annotator.js b/public/js/annotonia/tags-annotator/src/tags-annotator.js
@@ -333,7 +333,7 @@ $.TokenList = function (input, url_or_data, settings) {
     var selected_dropdown_item = null;
 
     // The list to store the token items in
-    var token_list = $("<ul />")
+    var token_list = $("<ol />")
         .addClass(settings.classes.tokenList)
         .click(function (event) {
             var li = $(event.target).closest("li");
@@ -694,7 +694,7 @@ $.TokenList = function (input, url_or_data, settings) {
     function populate_dropdown (query, results) {
         if(results && results.length) {
             dropdown.empty();
-            var dropdown_ul = $("<ul>")
+            var dropdown_ol = $("<ol>")
                 .appendTo(dropdown)
                 .mouseover(function (event) {
                     select_dropdown_item($(event.target).closest("li"));
@@ -711,7 +711,7 @@ $.TokenList = function (input, url_or_data, settings) {
 
                 this_li = find_value_and_highlight_term(this_li ,value[settings.propertyToSearch], query);            
 
-                this_li = $(this_li).appendTo(dropdown_ul);
+                this_li = $(this_li).appendTo(dropdown_ol);
 
                 if(index % 2) {
                     this_li.addClass(settings.classes.dropdownItem);
@@ -729,9 +729,9 @@ $.TokenList = function (input, url_or_data, settings) {
             show_dropdown();
 
             if(settings.animateDropdown) {
-                dropdown_ul.slideDown("fast");
+                dropdown_ol.slideDown("fast");
             } else {
-                dropdown_ul.show();
+                dropdown_ol.show();
             }
         } else {
             if(settings.noResultsText) {
@@ -1175,7 +1175,7 @@ Annotator.Plugin.HighlightTags = (function(_super) {
 
             // otherwise we prepare to loop through them
             var nonFlagTags = true;
-            var tokenList = "<ul class=\"token-input-list\">";
+            var tokenList = "<ol class=\"token-input-list\">";
 
             for (tagnum = 0; tagnum < annotation.tags.length; ++tagnum){
                 if (typeof this.annotator.plugins["Flagging"] !== 'undefined') {
@@ -1202,7 +1202,7 @@ Annotator.Plugin.HighlightTags = (function(_super) {
                     tokenList += "<li class=\"token-input-token\"><p>"+ annotation.tags[tagnum]+"</p></span></li>";
                 }
             }
-            tokenList += "</ul>";
+            tokenList += "</ol>";
             $(field).append(tokenList);
 
             // the field for tags is removed also if all the tags ended up being flags