You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.3 KiB
JavaScript
59 lines
1.3 KiB
JavaScript
import $ from 'jquery';
|
|
import _ from 'lodash';
|
|
import DOMAttachedObject from 'vj/components/DOMAttachedObject';
|
|
import { delay } from 'vj/utils';
|
|
import Marker from './Marker';
|
|
|
|
export default class MarkerReactive extends DOMAttachedObject {
|
|
static DOMAttachKey = 'vjMarkerReactiveInstance';
|
|
|
|
static initFromDOM($dom) {
|
|
return MarkerReactive.getOrConstruct($dom);
|
|
}
|
|
|
|
static initAll() {
|
|
$('[data-marker-enabled]').get().forEach((dom) => MarkerReactive.initFromDOM($(dom)));
|
|
}
|
|
|
|
constructor($target) {
|
|
super($target);
|
|
this._onMouseUp = this.onMouseUp.bind(this);
|
|
this.bindEventHandlers();
|
|
}
|
|
|
|
bindEventHandlers() {
|
|
this.$dom.on('mouseup', this._onMouseUp);
|
|
}
|
|
|
|
unbindEventHandlers() {
|
|
this.$dom.off('mouseup', this._onMouseUp);
|
|
}
|
|
|
|
async onMouseUp(ev) {
|
|
await delay(1);
|
|
if (!window.getSelection) {
|
|
return;
|
|
}
|
|
const selection = window.getSelection();
|
|
if (!selection || selection.rangeCount === 0) {
|
|
return;
|
|
}
|
|
const range = selection.getRangeAt(0);
|
|
if (range.collapsed) {
|
|
return;
|
|
}
|
|
Marker.showAtPosition(this.$dom, ev.clientX, ev.clientY);
|
|
}
|
|
|
|
detach() {
|
|
if (this.detached) {
|
|
return;
|
|
}
|
|
this.unbindEventHandlers();
|
|
Marker.close();
|
|
super.detach();
|
|
}
|
|
}
|
|
|
|
_.assign(MarkerReactive, DOMAttachedObject);
|