The Interfaces Sock

Trevor Nash

Melvaig Software Engineering Limited

Table of Contents

1. Sock Interfaces Kit

Editing

Chapter 1. Sock Interfaces Kit

Table of Contents

Editing

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>