RDFS = 'http://www.w3.org/2000/01/rdf-schema#'

Polymer

    is: "edit-choice",

    properties:

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

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

        label: {type: String, notify: true}

    observers: [

      '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()

    gotGraph: ->

      @graph.runHandler(@updateLabel.bind(@))

    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.over {

 background: red;

         }

     a {

         color: #5555e0;

         padding: 3px;

         display: inline-block;

     }

    </style>

    <div id="box"

         on-dragenter="dragover"

         on-dragover="dragover"

         on-dragend="dragleave"

         on-dragleave="dragleave"

         on-drop="drop">

      <a href="{{uri}}"><!-- type icon goes here -->{{label}}</a>

      <!-- <button on-click="unlink">Unlink</button>  -->

    </div>

  </template>

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

</dom-module>