Working Example

minimal title

Page Code

// For full API documentation, including code examples, visit http://wix.to/94BuAAs

 

$w.onReady(function () {

    //Declare message handler

    $w('#html1').onMessage(processMessage);

    setTimeout(() => {

        sendActionToHTMLComponent('pageReady');

    }, 1000);

    

});

 

function loadTextBox()

{

    let text = $w('#textToCopy').value;

    sendActionToHTMLComponent('load', text);

}

 

function sendActionToHTMLComponent (action, payload) {

    let htmlMessage = {'action':action, 'payload':payload};

    $w('#html1').postMessage(htmlMessage);

}

 

function processMessage(message) {

    let data = message.data;

    let action = (data.action ? data.action : 'oops');

    switch (action) {

        case 'copied':

         setStatusMessage("Copy Complete");

            break;

        case 'load':

         setStatusMessage("Text "+data.payload);

            break;

        case 'htmlComponentReady':

            setStatusMessage("Copy Component Loaded and Ready");

            loadTextBox();

            break;

        default:

         setStatusMessage(action);

            break;

    }

}

 

function setStatusMessage(message) {

    $w('#statusMessage').text = (message?message:'');

}

 

export function textToCopy_change(event) {

    loadTextBox();

}

HTML Component Code

<!doctype html>

<html>

    <head>
        <div id='styles'>
        <style>
        #copyButton {
            background-color: #8FB02B;
            border-color: white;
            border-width: 3px;
            width: 140px;
            height: 40px;
        }

        #cutPaste {
            width: 340px;
            height: 200px;
            margin: 10px;
        }

        body {
            background-color: #FD882B;
        }
        </style>
        </div>
        <script type="text/javascript">

            // Used to catch messages posted from the Wix Page Code

            window.addEventListener('message', (event) => {
                if (event.data) {
                    processMessage(event.data);
                }
            });

           

           // Tells the Page code that the HTML compomnent is ready

           // May need a setTimeout delay if this loads before the page code does.

           function htmlComponentReady() {
                sendAction('htmlComponentReady');
            }

 

            function initialization () {
                // Add code to perform initialization here
            }

 

​            // Convenience function to send an action command to the wix page

            function sendAction(action, payload) {

                // Use force use of 'action'property in the wix message
                sendMessageToWixPage(action, 'action', payload);
            }

 

            // Builds the message to be sent to the Wix Code page and posts it

            function sendMessageToWixPage(message, type, payload) {
                logStatus('sendMessageToWixPage('+message+', '+type+', '+(payload?payload:'')+')');
                let key = (type ? type : 'error');
                if (message) {

                    let theData = {};
                    theData[key] = message;
                    if (payload) {
                        theData.payload = payload;
                    }

                    window.parent.postMessage(theData, '*');
                }
            }

 

            // The sendMessageToWixPage function sets the action property to error automatically

            // if the only parameter is a message

            function sendError(error) {
                sendMessageToWixPage(error);
            }

 

            // Add the text from the page message to the HTML Page

            function loadText (text) {
                // Create a text area to populate
                let selectArea = document.getElementById('cutPaste');
                selectArea.value = text;
                logStatus('Selected area value set to - '+selectArea.value);
                return 'loaded';
            }

 

            // This is the function that performs the copy to the computer pasteboard

            // It performs the basic area selection needed by the browser and then calls the 

            // document.execCommand('copy') to perform the copy

            function copyText () {
                // Create a text area to populate
                let selectArea = document.getElementById('cutPaste');
                selectArea.select();
                logStatus('dataSelected');
                document.execCommand('copy');
                sendAction('copied');
            }
            

            // In bound message handler 
            function processMessage(message) {
                if (message['action']) {

                    let action = message.action;
                    logStatus('processMessage('+JSON.stringify(message)+')');
                    switch (action) {
                        case 'load':
                        {
                            let textPayload = (message.payload ? message.payload : "");
                            logStatus('load requested');
                            sendAction('load', loadText(textPayload));
                        }
                        break;

                        case 'pageReady':
                        {
                            htmlComponentReady();
                        }
                        break;

                        default:
                        {
                            logStatus('No Action');
                        }
                        break;
                    }
                }
            }

        </script>
    </head>

    <body onload="start();">
        <input readonly id='cutPaste' type="text"\>
        <button id='copyButton' onclick="copyText();">copy</button>
        <p>COPY HTML Component Loading...</p>

        <div id='theStatus'></div>
        
        <script type="text/javascript">

            function logStatus(statusInfo) {

                let message = document.getElementById('theStatus').innerHTML;
                document.getElementById('theStatus').innerHTML = message +'<br>' +statusInfo;
            }

            function start () {
                if (document.readyState === "complete") {
                    initialization();
                }
            }

        </script>
    </body>

</html>

© 2018 by Steve Cropper. Proudly created with Wix.com

  • Google+ - White Circle
  • Facebook - White Circle
  • Twitter - White Circle
This site was designed with the
.com
website builder. Create your website today.
Start Now