liff_share_message.js

window.onload = function() {
    const useNodeJS = true;   // if you are not using a node server, set this value to false
    const defaultLiffId = "";   // change the default LIFF value if you are not using a node server

    // DO NOT CHANGE THIS
    let myLiffId = "";

    // if node is used, fetch the environment variable and pass it to the LIFF method
    // otherwise, pass defaultLiffId
    if (useNodeJS) {
        fetch('/send-id')
            .then(function(reqResponse) {
                return reqResponse.json();
            })
            .then(function(jsonResponse) {
                myLiffId = jsonResponse.id;
                initializeLiffOrDie(myLiffId);
            })
            .catch(function(error) {
            });
    } else {
        myLiffId = defaultLiffId;
        initializeLiffOrDie(myLiffId);
    }
};

var _title = "";
var _description = "";
var _image = "";
var _url = "";
var _aspectRatio = "20:13"

function initializeLiffOrDie(myLiffId) {
    if (!myLiffId) {
    } else {
        initializeLiff(myLiffId);
    }
}

function initializeLiff(myLiffId) {
    liff
        .init({
            liffId: myLiffId
        })
        .then(() => {
            initializeApp();
        })
        .catch((err) => {
        });
}

function previewUrlInfo(url, isAutoSend = false) {
        var oldUrl = new URL(url);
        console.log('url:' + oldUrl.href);
        fetch('/parse',
            {
                method: 'POST', 
                headers: { 'Content-Type': 'application/json' }, 
                body: JSON.stringify({ url: oldUrl.href }),
            })
        .then(function(reqResponse) {
            return reqResponse.json();
        })
        .then(function(jsonResponse) {
            _title = jsonResponse.title;
            _description = jsonResponse.description;
            _image = jsonResponse.image;
            _url = url;

            document.getElementById('title').textContent = _title;
            document.getElementById('description').textContent = _description;

            const previewPictureDiv = document.getElementById('previewPictureDiv');
            if (previewPictureDiv.firstElementChild) {
                previewPictureDiv.removeChild(previewPictureDiv.firstElementChild);
            }
            const img = document.createElement('img');
            img.onload = function () {
                console.log(this.width + 'x' + this.height);
                _aspectRatio = this.width + ":" + this.height;
                // send the message after image is fetched.
                if (isAutoSend) {
                    setTimeout(function () { sendFlexMessage(); }, 1000);
                }
            }
            img.src = _image;
            img.alt = 'Preview Picture';
            previewPictureDiv.appendChild(img);

            togglePreviewData();
        })
        .catch(function(error) {
            console.log('parse API error' + error);
        });

}

function initializeApp() {
    // scenario: the shared url is brought from url path
    // by pass '?url='
    var urlParam = "";
    if (window.location.search.startsWith('?url=')) {
        urlParam = window.location.search.substring(5);
    }
    if(urlParam != "") {
        console.log(urlParam);
        gtag('event','external', {'url': urlParam});

        document.getElementById("sharedUrl").value = urlParam;
        previewUrlInfo(urlParam, true);
    }

    registerButtonHandlers();

    // check if the user is logged in/out, and disable inappropriate button
    if (liff.isLoggedIn()) {
        document.getElementById("liffLoginButton").classList.add('hidden');
    } else {
    }
}

function registerButtonHandlers() {
    // get preview 
    document.getElementById('getPreviewButton').addEventListener('click', function() {
                var url = document.getElementById("sharedUrl").value;
                gtag('event','internal', {'url': url});
                previewUrlInfo(url);
    });

    document.getElementById('shareTargetPicker').addEventListener('click', function () {
        sendFlexMessage();
    });

    // login call, only when external browser is used
    document.getElementById('liffLoginButton').addEventListener('click', function() {
        if (!liff.isLoggedIn()) {
            // set `redirectUri` to redirect the user to a URL other than the front page of your LIFF app.
            liff.login();
        }
    });
}

function sendFlexMessage() {
    liff.shareTargetPicker([
        createFlexMessageData(_title, _description, _image, _url, _aspectRatio)
    ]
    ).then(function (res) {
        liff.closeWindow();
    }).catch(function (res) {
        document.getElementById('shareTargetPickerMessage').textContent = "Sending Failed:" + JSON.stringify(res);
    });
}

function createFlexMessageData(title, description, image, url, aspectRatio) {
    var myFlexContent = {
         // 可以利用 flex message simulator 建立 https://developers.line.biz/flex-simulator/
      };

    var flex = {
        "type": "flex",
        "altText": _title,
        "contents": myFlexContent,
      };

    return flex;
}

function sendAlertIfNotInClient() {
    alert('This button is unavailable as LIFF is currently being opened in an external browser.');
}

function togglePreviewData() {
    toggleElement('previewInfo');
}

function toggleElement(elementId) {
    const elem = document.getElementById(elementId);
    if (elem.offsetWidth > 0 && elem.offsetHeight > 0) {
        elem.style.display = 'none';
    } else {
        elem.style.display = 'block';
    }
}