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:

        graph: {type: Object, notify: true},

        uri: {type: String, notify: true},

        label: {type: String, notify: true}

    observers: [

      'gotGraph(graph, uri)'

      ]

    ready: ->

      setupDrop @$.box, @$.box, null, (uri) =>

        @uri=uri

        @updateLabel()

    gotGraph: ->

      @graph.runHandler(@updateLabel.bind(@), "edit-choice #{@uri}")

    updateLabel: ->

      @label = try

          @graph.stringValue(@uri, RDFS + 'label')

        catch

          @uri

<link rel="import" href="/lib/polymer/polymer.html">

<!-- see light9/editchoice.py for gtk version -->

<dom-module id="edit-choice">

  <template>

    <style>

     #box {

         display: inline-block;

         background: #141448;

     }

     #box.dragging {

         background: rgba(126, 52, 245, 0.0784313725490196);

     }

     a {

         color: #8e8eff;

         padding: 3px;

         display: inline-block;

         font-size: 145%;

     }

    </style>

    <div id="box">

    </div>

  </template>

  <script src="edit-choice.js"></script>

</dom-module>

<link rel="import" href="/lib/polymer/polymer.html">

<link rel="import" href="/lib/paper-dialog/paper-dialog.html">

<link rel="import" href="/lib/paper-button/paper-button.html">

<link rel="stylesheet" href="/style.css">

<dom-module id="resource-display">

  <template>

    <style>

     :host {

         display: inline-block;

         zvertical-align: top;

         zborder: 2px rgba(84, 84, 84, 0.27) outset;

         zborder-radius: 9px;

         zpadding: 2px;

     }

    </style>

    <template is="dom-if" if="{{rename}}">

      <button on-click="onRename">Rename</button>

      <paper-dialog id="renameDialog" modal

                    on-iron-overlay-closed="onRenameClosed">

        <p>

          New label:

          <input id="renameTo" autofocus type="text"

                 value="{{renameTo::input}}"

                 on-keydown="onRenameKey">

        </p>

        <div class="buttons">

          <paper-button dialog-dismiss>Cancel</paper-button>

          <paper-button dialog-confirm>OK</paper-button>

        </div>

      </paper-dialog>

    </template>

  </template>

  <script>

   Polymer({

       is: "resource-display",

       properties: {

           graph: { type: Object },

           uri: { type: String },

           label: { type: String },

           rename: { type: Boolean },

           minor: { type: Boolean },

           resClasses: { type: String, computed: '_resClasses(minor)', value: 'resource' },

           renameTo: { type: String, notify: true },

       },

       observers: ['onUri(graph, uri)'],

       _resClasses: function(minor) {

           return minor ? 'resource minor' : 'resource';

       },

       onUri: function(graph, uri) {

           this.graph.runHandler(this.setLabel.bind(this), `label ${this.uri}`);

       },

       setLabel: function() {

           if (!this.uri) {

               this.label = "<no uri>";

               return;

           }

           try {

               this.label = this.graph.stringValue(this.uri,

                                                   this.graph.Uri('rdfs:label'));

           } catch(e) {

               this.label = null;