TIP: How to add ‘paste’ feature.

Bringing your stacks to the web

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

Post Reply
seaniepie
Posts: 154
Joined: Wed Sep 07, 2011 10:56 am

TIP: How to add ‘paste’ feature.

Post by seaniepie » Sun Jul 21, 2019 10:39 pm

You would think something as basic as copy/paste would be easy but native Javascript makes it not so easy. However, most browsers, including chrome, safari and firefox, have both the clipboardData API and onPaste/onCopy/onCut event handlers included. So, for a simple paste function one method is this:

Add this after the other scripts in your standalone html:

Code: Select all

        <script type="text/javascript">
            var canvas = document.getElementById('canvas');
            canvas.onpaste = function(event){
                var clipboardText = event.clipboardData.getData('Text');
                var myStack = document.liveCode.findStackWithName('myStandalone');
                myStack.js2LC_paste(clipboardText);
            };
	</script>
This adds a listener ('onPaste') to the standalone canvas and passes this event (as 'event') into a function which collects the 'Text' data (which you could swap out for 'text/html' if that is better for your needs). This 'clipboardText' is then sent back to LiveCode (in this case a stack called 'myStandalone') via your handler ('js2LC_paste').

In your LC stack you would have this as your handler:

Code: Select all

on js2lc_Paste pData
   put the selectedField into tFld // returns 'field n' where n is the field number on this card.
   if tFld is not empty then
      put focusedObject() into tFldID // returns the long object ID of the field.
      put the selectedchunk into tChunk // returns 'char n1 to n2 of field n3' where n1=startChar, n2=endChar, n3=field number on card
      put (word -4 of tChunk + len(pData)) into tLoc
      put the text of tFldID into tText
      put pData into char (word -4 of tChunk) of tText // replaces the last char placed ('v') with paste text.
      set the text of tFldID to tText
      select char tLoc to tLoc -1 of tFldID
   end if
end js2lc_Paste
Initially, because the standalone cannot yet in v9.5.0 handle modifier keys directly as commandKeyDown, etc, a 'v' will appear in your field but this will be quickly replaced by your clipboard text and then place the cursor at the end of your pasted text.

I'll put the 'Copy' and 'Cut' scripts here too shortly.

Pi

seaniepie
Posts: 154
Joined: Wed Sep 07, 2011 10:56 am

Re: TIP: How to add ‘paste’ feature.

Post by seaniepie » Mon Jul 22, 2019 2:47 pm

There is an issue apparently with Chrome because it won't allow you to attach the onPaste event handler to an object like Canvas. So you have to point it at the Document. So it needs to be:

Code: Select all

document.onpaste = function(event){
This does mean you need to handle whether something other than the canvas is currently focused so that they can accept the pasted data instead, but this will work in both Safari and Chome. I don't use Firefox so I don't know if it works on that.

Now it seems as though the backspace key doesn't work in Chrome either :roll: All these 'simple' elementary things missing. :?

Pi

seaniepie
Posts: 154
Joined: Wed Sep 07, 2011 10:56 am

Re: TIP: How to add ‘paste’ feature.

Post by seaniepie » Mon Jul 22, 2019 6:01 pm

Another pain in the difference between Chrome and Safari is that Safari will still print the 'v' on paste but Chrome does not. So we need to determine if it is Chrome or Safari and either replace the 'v' or not. So we use this to detect the browser type:

Code: Select all

var isChrome = (navigator.userAgent).includes("Chrome");
Send this message back to LC:

Code: Select all

myStack.js2LC_paste(clipboardText,isChrome);
And then handle this in LC using:

Code: Select all

on js2lc_Paste pData,pIsChrome
   put the selectedField into tFld // returns 'field n' where n is the field number on this card.
   if tFld is not empty then
      put focusedObject() into tFldID // returns the long object ID of the field.
      put the selectedchunk into tChunk // returns 'char n1 to n2 of field n3' where n1=startChar, n2=endChar, n3=field number on card
      put (word -4 of tChunk + len(pData)) into tLoc
      put the text of tFldID into tText
      if pIsChrome then -- isChrome?
         put pData into char (word 2 of tChunk)+1 to (word 4 of tChunk) of tText // For Chrome
      else
         put pData into char (word 4 of tChunk) of tText // replaces the last char placed ('v') in Safari.
      end if
      set the text of tFldID to tText
      select char tLoc to tLoc -1 of tFldID
   end if
end js2lc_Paste
Nightmares!

Post Reply

Return to “HTML5”