[annotator-dev] Annotator + Plugin in IE8

Tue Oct 22 19:27:24 UTC 2013

After troubleshooting several issues, I've finally got my proof of 
concept working in IE8, FF, and Chrome. Note that several of my issues 
are related to the fact that I am using a custom plugin that requires 
fields to be added to the annotator form. It's possible the plugin works 
well in IE8 if you aren't modifying the viewer, except for the first 
error described below.

Here's a full list of the IE8 compatibility issues in case anyone wants 
to try to implement:
* "Annotator.supported" is a method that examines if the getSelection 
method exists. From my experience, it is evalulated before ierange is 
loaded, so Annotator.supported evaluated as false and did not complete 
the annotator plugin initialization. I commented out the return to get 
this to work:
        if (!Annotator.supported()) {
+        //return this;
-        return this;
        }

* wrappInner inside the _setupWrapper method failed on an article DOM 
element, but did not fail on a div DOM element. I can only conclude that 
wrapInner may not be compatible with HTML5 elements, but I didn't 
investigate further. I changed my markup to annotate a div instead of an 
article.

* In the addField method, IE8 fails to set the "placeholder" attribute 
on the new field. I commented that out and it worked. I did not 
experiment with how that affected later data, but I'm sure there's a 
work-around, such as setting a data value.

* Also in the addField method, IE8 dies on the call "input[0].type = 
'checkbox';". I tried calling input.attr('type', 'checkbox'), which IE8 
still didn't like, so instead I modified the input creation logic so 
that I did not have to set the type:
@@ -1408,19 +1408,19 @@
            input = $('<textarea />');
            break;
          case 'input':
+          input = $('<input type="text" />');
          case 'checkbox':
+          input = $('<input type="checkbox" />');
-          input = $('<input />');
            break;
          case 'select':
            input = $('<select />');
        }
        element.append(input);
        input.attr({
+        id: field.id //,
+        //placeholder: field.label
-        id: field.id,
-        placeholder: field.label
        });
        if (field.type === 'checkbox') {
-        input[0].type = 'checkbox';

* Once I got through the above issues, the functionality was working as 
expected, except for some CSS incompatibility issues. rgba is not 
supported in IE8, so I made some modifications to the CSS to set the 
background and highlight color.

The compareDocumentPosition didn't appear to be affect functionality, 
although IE9 in compatibility mode still reports it.

Steph



On 10/21/2013 12:29 PM, Randall Leeds wrote:
>
> The error about compareDocument Position is the first one to tackle. 
> It could be causing the other failures.
>
> I would check whether that's supported by IE8 and, if not, what 
> polyfill might provide it.
>
> On Oct 21, 2013 7:30 AM, "Steph Skardal" <steph at endpoint.com 
> <mailto:steph at endpoint.com>> wrote:
>
>     Hi,
>
>     I saw Nick's response regarding ierange, but I'm not sure how to
>     verify whether or not IERange is being pulled in. There was
>     nothing in the IE developer tools that indicates issues related to
>     IERange. Can you elaborate on what type of errors are expected if
>     IERange is the source of the problem?
>
>     Steph
>
>
>
>     On 10/21/2013 09:40 AM, Andrew Magliozzi wrote:
>>     Hi Steph and Annotator-Devs,
>>
>>     If memory serves, @Randall offered to help a week or so back.
>>      Also, Nick had some suggestions, reproduced here:
>>
>>
>>         Annotator should automatically pull in IERange [1] if it
>>         detects a DOM without support for W3C Range [2].
>>
>>         [1]: https://code.google.com/p/ierange/
>>         [2]:
>>         https://github.com/okfn/annotator/blob/2fee8/src/annotator.coffee#L732-L733
>>
>>
>>     For the group, Steph is reporting the following:
>>
>>         In IE8. error "'compareDocumentPosition' is null or not an
>>         object". When a user tries to highlight / annotate text in
>>         IE8, a number of errors are reported that "'this.viewer.hide'
>>         is null or not an object" and "'this.adder' is null or not an
>>         object".
>>
>>
>>     Any ideas what's going on or how we could help Steph?  Her plugin
>>     code is here: https://github.com/stephskardal/h2o-annotator
>>
>>     Cheers,
>>     Andrew
>>
>>
>>
>>     On Fri, Oct 18, 2013 at 11:21 AM, Steph Skardal
>>     <steph at endpoint.com <mailto:steph at endpoint.com>> wrote:
>>
>>         Bump. Any help here?
>>
>>         Thanks,
>>
>>         Steph
>>
>>
>>
>>
>>
>>
>>         On 10/16/2013 10:50 AM, Steph Skardal wrote:
>>>         Hi all,
>>>
>>>         I'm trying to get annotator plus a plugin to work in IE8.
>>>
>>>         I've got a proof of concept app up at:
>>>         https://github.com/stephskardal/h2o-annotator. The proof of
>>>         concept is built to emulate functionality that already
>>>         exists, but on top of the annotator plugin. It works as
>>>         expected in Chrome & Firefox (minus a few small CSS issues
>>>         that I plan to fix later). The proof of concept plugin takes
>>>         some functionality from the categories plugin in that it
>>>         adds additional checkboxes.
>>>
>>>         It doesn't work in IE8. When the page loads in IE8,
>>>         developer tools reports an error "'compareDocumentPosition'
>>>         is null or not an object". When a user tries to highlight /
>>>         annotate text in IE8, a number of errors are reported that
>>>         "'this.viewer.hide' is null or not an object" and
>>>         "'this.adder' is null or not an object".
>>>
>>>         I don't know if these errors are related to ierange not
>>>         being pulled in. Can anyone provide guidance on how to get
>>>         this working in IE8?
>>>
>>>         Thanks,
>>>
>>>         Steph
>>
>>
>>         _______________________________________________
>>         annotator-dev mailing list
>>         annotator-dev at lists.okfn.org
>>         <mailto:annotator-dev at lists.okfn.org>
>>         http://lists.okfn.org/mailman/listinfo/annotator-dev
>>         Unsubscribe: http://lists.okfn.org/mailman/options/annotator-dev
>>
>>
>
>
>     _______________________________________________
>     annotator-dev mailing list
>     annotator-dev at lists.okfn.org <mailto:annotator-dev at lists.okfn.org>
>     http://lists.okfn.org/mailman/listinfo/annotator-dev
>     Unsubscribe: http://lists.okfn.org/mailman/options/annotator-dev
>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.okfn.org/pipermail/annotator-dev/attachments/20131022/b1993ef1/attachment-0002.html>
