Not working on iOS 12

[marialaraa]

On this operating system if the user add one annotator then he is unable to add a new one. The only option is to refresh the site and then he would be able add a new one.

Any idea of how to solve this problem?

[amlanroy-ust]

Me also facing the same issues. Need solution for this at earliest.
@VaishNathani please check similar issue
@sroyLM

[BigBlueHat]

Sadly this has been an issue from the beginning. It also keeps hypothes.is from loading properly on an Annotator.js site or vice versa.

What are your current use cases where you need to load it twice?

[amlanroy-ust]

@BigBlueHat
Thanks for Your valuable response,
we have multiple annotations in multiple pages of our app. So only first time we are able to annotate in IOS 12. Second time when we are trying to annotate in different text/string, not able to annotate.

[BigBlueHat]

@amlanroy-ust that's likely a different problem. You shouldn't need two instances of annotator.js loaded on a page to deal with two separate annotations. Once it's in place, it should be usable for multiple highlights/annotations.

That said, I'd not focus too heavily on Annotator.js as it's developers have moved on to other things. Most notably, the Apache Annotator project aims to provide the library bits for creating similar user experiences in browsers.

Depending on how far along you are down the implementation road, you may want to consider the libraries their plus your own UX code.

[amlanroy-ust]

@BigBlueHat
I think you got me wrong, I mean to say I need to do multiple annotate for multiple text/string. You are right that only one instance is needed, I too have only one instance of annotator.js loaded in my page. I can able to do only one annotate in any text, but next time when I am going to annotate for any other text I can't. And this is happening only for IOS 12 version, other than that annotation is working fine.

[BigBlueHat]

@amlanroy-ust ah. This is a different problem then what @marialaraa had posted about, I believe.

If possible, I'd recommend posting an example page that others can load on iOS 12 devices to test. However, I'd also recommend not investing in anything Annotator.js based for the future as it's a stalled project which is actively being replace by Apache Annotator.

@marialaraa please let me know if your situation is any of the ones described above. Thanks!

[melissajeon]

I have tested on iOS 12 and it doesn't annotate more than one time I need to refresh if I want to annotate multiple time just like @amlanroy-ust and @marialaraa have mentioned above. I have tested on iOS 11 and it working perfectly fine. Please resolve this issue.

[danielignatius]

It is certainly stopped working from iOS 12 onwards. Our users can't do multiple annotate without refreshing the page. Could this be assigned to someone as soon as possible?

[tilgovi]

@danielignatius if you fix the issue, I might be able to review it and merge it, but no one is actively maintaining this project.

[marialaraa]

The same as @danielignatius.
Has someone find a solution?

[melissajeon]

I have found a temporary fix to iOS 12 issue. This fix would allow the users to annotate more than once without refreshing the page. If you can guys take it from here and improve it that would be great.

Comment out on hide return _this.element.find(":focus").blur(); inside of
function Editor(editor, options) in annotator.touch.js

Then I applied setTimeout for textarea blur and focus for few functions in annotator-full.js
This one is working for me for now.

if (isMobile.any()) {
	$('.annotator-item textarea').trigger('blur');
	setTimeout(function(){
		$('.annotator-item textarea').trigger('focus');
		setTimeout(function(){
			$('.annotator-item textarea').trigger('blur');
		},5);
	},5);
}

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

Annotator.prototype.onAdderClick = function (event) {
	cancel = function () {
		if (isMobile.any()) {
			$('.annotator-item textarea').trigger('blur');
			setTimeout(function(){
				$('.annotator-item textarea').trigger('focus');
				setTimeout(function(){
					$('.annotator-item textarea').trigger('blur');
				},5);
			},5);
		}
		cleanup();
		return _this.deleteAnnotation(annotation)
	};
}

Annotator.prototype.onEditAnnotation = function (annotation) {
	cleanup = function () {
		if (isMobile.any()) {
			$('.annotator-item textarea').trigger('blur');
			setTimeout(function(){
				$('.annotator-item textarea').trigger('focus');
				setTimeout(function(){
					$('.annotator-item textarea').trigger('blur');
				},5);
			},5);
		}
		_this.unsubscribe("annotationEditorHidden", cleanup);
		return _this.unsubscribe("annotationEditorSubmit", update)
	};
};

Store.prototype.annotationCreated = function (annotation) {
	var _this = this;

	if (__indexOf.call(this.annotations, annotation) < 0) {
		this.registerAnnotation(annotation);
		return this._apiRequest("create", annotation, function (data) {
			if (data.id == null) {
				console.warn(Annotator._t("Warning: No ID returned from server for annotation "), annotation)
			}

			if (isMobile.any()) {
				$('.annotator-item textarea').trigger('blur');
				setTimeout(function(){
					$('.annotator-item textarea').trigger('focus');
					setTimeout(function(){
						$('.annotator-item textarea').trigger('blur');
					},5);
				},5);
			}
	            
			return _this.updateAnnotation(annotation, data)
		})
	} else {
		return this.updateAnnotation(annotation, {})
	}
};

Store.prototype.annotationUpdated = function (annotation) {
	var _this = this;
	if (__indexOf.call(this.annotations, annotation) >= 0) {
		return this._apiRequest("update", annotation, function (data) {
            if (isMobile.any()) {
		$('.annotator-item textarea').trigger('focus');
			setTimeout(function(){
				$('.annotator-item textarea').trigger('blur');
			},5);
	   }
		return _this.updateAnnotation(annotation, data)
		})
	}
};

[amlanroy-ust]

@melissajeon
@mayurdawda
Hi melissajeon, I can understand your first change in annotator.touch.js.
But in 2nd change you mention this change is in annotator.full.js. In my case I am using annotator.min.js. annotator.full.js file not found in annotator plugins. Also in "http://docs.annotatorjs.org/en/v1.2.x/getting-started.html" annotator-full.min.js cdn is present but that cdn is not opening. So can you please share your files here? or if you have a demo project in git please share. It will be a great help for me.

[melissajeon]

Hi @amlanroy-ust , sorry I just remember that I unminified the annotator.full.min.js(version 1.2.10) for my self. I reckon you can unminify annotator-full.min.js or annotator.min.js and find those functions then insert setTimeout snippet at correct places.

download link: https://github.com/openannotation/annotator/releases/tag/v1.2.10

[amlanroy-ust]

@melissajeon
Hi melissajeon, I have made changes in annotator.full.min.js(version 1.2.10) as you mentioned. But it also giving error as "annotator.full.min.map.js not found". can you please share your files?

[melissajeon]

Hi @amlanroy-ust based on #458
you need to remove the last line which is //# sourceMappingURL=_annotator-full.min.map
and sorry, I can't share my file. My file is customised for my current working project.