# The Interfaces Sock

### Trevor Nash

Melvaig Software Engineering Limited

## Chapter 1. Sock Interfaces Kit

## Editing

Sock has an interface for drag and drop editing. These objects may be used to include this mechanism in your own output files. For an example see the Web Sock.

The icon `m21-edit-drag.gif` is used to indicate a position in a file which may be edited. This may be included in an HTML file by instantiating the object ski:edit-drag-source. This element has the attributes:

- @m21.dir, which should be the path to a directory containg `m21-edit-drag.gif` (mandatory)

- @file, the name of the file to be edited. This may be either an absolute path or a relative path. If it is a relative path it will be interpreted in the context of the URL of the HTML page. Typically obtained with

      substring-after(saxon:systemId(), '/')

  The substring operation is required because the attribute takes a file name, not a URI. (mandatory)

- @line, the line number to position the editor at. Typically obtained with saxon:lineNumber(). (mandatory).

For Object ski:edit-drag-source replacement:

    <sk:replace>
                <img class="m21edit" src="{@m21.dir}/m21-edit-drag.gif" file="{@file}" line="{@line}" onDragStart="fOnDragStart();"/>
       </sk:replace>

A short piece of JavaScript is needed. This is included by instatiating ski:edit-script inside the head element of the HTML page. This element has no attributes or content.

For Object ski:edit-script replacement:

    <sk:replace>
       <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">

       function fGoToLine(obj) {
          return "<xref xmlns='http://melvaig.com/m21' base='"
                   +document.URL+"' file='"
                   +obj.file+"' line='"+obj.line+"'/>"
       }

       function fOnDragStart() {
          obj = window.event.srcElement

          if (obj.className == "m21edit") {

             if (!window.event.dataTransfer) {

                alert("This version of IE does not support Drag and Drop")
                return
             }
             window.event.dataTransfer.clearData(); // remove image information
             window.event.dataTransfer.setData("Text", fGoToLine(obj));
    	 window.event.dataTransfer.effectAllowed="copy";
          }
       }

    </SCRIPT>
       </sk:replace>