diff --git a/light9/web/edit-choice.coffee b/light9/web/edit-choice.coffee --- a/light9/web/edit-choice.coffee +++ b/light9/web/edit-choice.coffee @@ -1,4 +1,44 @@ RDFS = 'http://www.w3.org/2000/01/rdf-schema#' + + + +window.setupDrop = (senseElem, highlightElem, coordinateOriginElem, onDrop) -> + + highlight = -> highlightElem.classList.add('dragging') + unhighlight = -> highlightElem.classList.remove('dragging') + + senseElem.addEventListener 'drag', (event) => + + senseElem.addEventListener 'dragstart', (event) => + + senseElem.addEventListener 'dragend', (event) => + + senseElem.addEventListener 'dragover', (event) => + event.preventDefault() + event.dataTransfer.dropEffect = 'copy' + highlight() + + senseElem.addEventListener 'dragenter', (event) => + highlight() + + senseElem.addEventListener 'dragleave', (event) => + unhighlight() + + senseElem.addEventListener 'drop', (event) -> + event.preventDefault() + uri = event.dataTransfer.getData('text/uri-list') + + pos = if coordinateOriginElem? + root = coordinateOriginElem.getBoundingClientRect() + $V([event.pageX - root.left, event.pageY - root.top]) + else + null + + onDrop(uri, pos) + unhighlight() + + + Polymer is: "edit-choice", properties: @@ -10,19 +50,10 @@ Polymer 'gotGraph(graph, uri)' ] - dragover: (event) -> - event.preventDefault() - event.dataTransfer.dropEffect = 'copy' - @$.box.classList.add('over') - - dragleave: (event) -> - @$.box.classList.remove('over') - - drop: (event) -> - event.preventDefault() - @uri = event.dataTransfer.getData('text/uri-list') - @updateLabel() - @$.box.classList.remove('over') + ready: -> + setupDrop @$.box, @$.box, null, (uri) => + @uri=uri + @updateLabel() gotGraph: -> @graph.runHandler(@updateLabel.bind(@)) diff --git a/light9/web/edit-choice.html b/light9/web/edit-choice.html --- a/light9/web/edit-choice.html +++ b/light9/web/edit-choice.html @@ -8,9 +8,9 @@ display: inline-block; background: #141448; } - #box.over { - background: red; - } + #box.dragging { + background: rgba(126, 52, 245, 0.0784313725490196); + } a { color: #5555e0; padding: 3px; @@ -18,12 +18,7 @@ } -