[annotator-dev] Annotator + Plugin in IE8
Steph Skardal
steph at endpoint.com
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>
More information about the annotator-dev
mailing list