Code samples for Widget Framework

[dropdown:How to trigger a popup opening and embed THRON Player on element click]Once a content list element is clicked the THRONContentListElementClick is invoked. To this specific function you will have to pass two parameters: the first one is the contentId of the element clicked, the second is the id of the widget on which the specific element has been clicked. This function needs to be re-defined in order to customize the desired behavior.

Let's see an example on how to open a popup with a THRON Player embedded in order to display the content which has been clicked. In order to do so we are going to use the popup functionality provided by JqueryUI, by following these steps:

 

First of all make sure that JqueryUI and the embed script of THRON Player are included in the <head> tag of your page:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="//[clientId]-cdn.thron.com/shared/ce/bootstrap/1/scripts/embeds-min.js"></script>

where [clientId] is the domain name used to access your THRON, usually matches your company name.

Now, in the body of your page, make sure to include a new <div> which will be used in order to include the new popup within which THRON Player will be embedded:

<div id="dialog-embed">
   <div id="embedContainer" style="width:640px; height:376px;"></div>
</div>

The <div> with the "dialog-embed" id is the one that will initialize the popup, while the one with the "embed-container" id is the one that will initialize the player.

Finally, in the body of your page enter the following script which handles the creation of the popup, and redefines the function invoked on click, making sure that the content is embedded and popup is opened:

<script>
    var dialog = null;
    $(document).ready(function() {
        dialog = $("#dialog-embed").dialog({
            autoOpen: false,
            height: "auto",
            width: "auto",
            modal: true,
            dialogClass: "embedDialog",
            close: function(event, ui) {
                $("#embedContainer").width(640);
                $("#embedContainer").height(376);
                THRONContentExperience("#embedContainer").destroy();
            },
            open: function(event, ui) {
                $(".ui-widget-overlay").on("click", function() {
                    $("#dialog-embed").dialog("close");
                });
            }
        });

        dialog.dialog("option", "position", {
            my: "center",
            at: "center",
            of: window
        });
    });

    THRONContentSlideElementClick = function(contentId) {
        var options = {
            clientId: "<clientId>",
            xcontentId: contentId,
            sessId: "<pkey or session token>"

        };
        THRONContentExperience("embedContainer", options);
        dialog.dialog("open");
    }
</script>

Where <widgetName> is the name which has been automatically generated for the widget and which can be retrived in the embed code provided by the Widget Framework editor.

The whole block included in the THRONPlayer function is a standard embed code. More information on how to generate an embed code can be found in this article, in the "Code Samples" tab.[/dropdown]

[dropdown: How to trigger multiple content download on contentListSelection widget]

The following steps are presented to give an example of how to customize the behavior of the contentListSelection widget after the selection of a set of content, to make sure that such selection is downloaded.

Be aware that instead of <clientId> you will have to put your own clientId, while instead of <widgetName>, the name of the widget that has been created and which an be retrieved in the embed code obtained from the Widget Framework editor.

First thing to do is to add the following functions' definition into your page. These functions will trigger content download via javascript:

<script>
    downloadSelected = function () {
        var headers = {};
        headers["X-TOKENID"] = < widgetName > .xTokenId;
        headers["Accept"] = "application/json";
        headers["ContentType"] = "application/json";

        var prepareParams = {
            "criteria": {
                "xcontentIds": < widgetName > .selectedItemsList
            }
        };
        window.THRON.WidgetFramework.jQuery.ajax({
            type: 'GET',
            url: '//' + < clientId > +'-view.thron.com/api/xcontents/resources/archive/prepare/' + <
                clientId > ,
            dataType: 'jsonp',
            crossDomain: true,
            data: {
                "param": JSON.stringify(prepareParams),
                "tokenId": < widgetName > .xTokenId
            },
            headers: headers,
            context: this,
            success: function (data) {
                confirmDownload(data.downloadId);
            }
        });
    }

    confirmDownload = function (downloadId) {

        var args = {
            "tokenId": < widgetName > .xTokenId,
            "downloadId": downloadId
        };
        var location = '//' + < clientId > +'-view.thron.com/api/xcontents/resources/archive/download/' + <
            clientId > ;
        var form = '';
        $.each(args, function (key, value) {
            value = value.split('"').join('\"')
            form += '<input type="hidden" name="' + key + '" value="' + value +
                '" enctype="application/x-www-form-urlencoded">';
        });
        var formTag = $('<form action="' + location + '" method="POST" target="_blank">' + form + '</form>');
        formTag.appendTo($(document.body)).submit();
        formTag.remove();
    }
</script>

Now you have to make sure that the downloadSelected function is invoked once a set of content has been selected into the widget. To invoke such function we recommend the inclusion of a button to be clicked; in order to include it you should insert the following code in the body of your page:

<div id="downloadButton" class="disabled"></div>

then, to add the onClick event on this element you must include the following javascript, which will trigger the downloadSelected function:

window.THRON.WidgetFramework.jQuery(document).ready(function() {

$("#downloadButton").on("click",function(){
downloadSelected();
});

});

[/dropdown]

Was this article helpful?
0 out of 0 found this helpful

Have any question?

Open a ticket
Comments