function make_share_plugin_html(id, parent_container, settings) { prnt = parent_container.find('.jp-interface'); var share_opts_div = $('
'); var maincontainer = $('
'); //these divs need to be inserted as first children of the jp-interface div prnt.prepend(share_opts_div); prnt.prepend(maincontainer); tell_friend_but = download_but = link_but = embed_but = ''; if(settings.tellfriend) { friend_container = $('
').appendTo(maincontainer); form = $('
').appendTo(friend_container); formdiv = $('
').appendTo(form); $('').appendTo(formdiv); $('').appendTo(formdiv); $('').appendTo(formdiv); $('').appendTo(formdiv); $('').appendTo(formdiv); $('').appendTo(formdiv); $('').appendTo(formdiv); $('').appendTo(formdiv); $('').appendTo(formdiv); $('').appendTo(formdiv); $('').appendTo(formdiv); tell_friend_but = $(''); } if(settings.link) { download_container = $('').appendTo(maincontainer); form = $('').appendTo(download_container); $('').appendTo(form); $('').appendTo(form); link_but = $(''); } if(settings.download) { $('').appendTo(maincontainer); download_but = $(''); } if(settings.socials) { socials_div = $('
').appendTo(share_opts_div); $('').appendTo(socials_div); $('').appendTo(socials_div); $('').appendTo(socials_div); $('').appendTo(socials_div); } if(settings.embed) { embed_container = $('
').appendTo(maincontainer); $('

Klik om te selecteren:

').appendTo(embed_container); form = $('
').appendTo(embed_container); $('').appendTo(form); $('').appendTo(form); $('').appendTo(form); $('').appendTo(form); $('').appendTo(form); $('').appendTo(form); embed_but = $(''); } if(tell_friend_but || download_but || link_but || embed_but){ non_socials_div = $('
').appendTo(share_opts_div); if(tell_friend_but) tell_friend_but.appendTo(non_socials_div); if(link_but) link_but.appendTo(non_socials_div); if(download_but) download_but.appendTo(non_socials_div); if(embed_but) embed_but.appendTo(non_socials_div); } } /** * The plugin that gives the user several means (according to options) of sharing * the playing media. */ function PluginShare(opts) { //default option settings this.defaults = { tellfriend : true, // should tell a friend (send mail about media) be enabled? link : true, // should the link to the media context be shown? socials : false, // should sharing on social sites be enabled? download : false, // should download links for the media file be shown? embed : false // enable embedding }; /* merge defaults and opts, without modifying defaults, merged result resides in this.options */ this.options = $.extend({}, this.defaults, opts); this.playerhandler = null; // something to store the playerhandler in on which we're working this.select_class = 'icon_selected'; this.old_autohide = false; // store autohide options of player for putting them back later after disabling autohide for use of plugin interface /**************** Setting Up The Plugin *******************************************************/ this.getCurrentItem = function () { return this.playerhandler.current_item; } /** * Finds the interface element that is connected to the given playerhandler so that * using the elements in one player does not affect other players on the page. * Returns a jquery object for the searched element. */ this.findInterfaceElement = function(css_class) { return this.playerhandler.options.playercontainer.find(css_class); } /** * Set up plugin by connecting listeners to the right interface elements */ this.connectPlugin = function(playerhandler) { this.playerhandler = playerhandler; this.playerhandler.addPlugin(this); var myself = this; //get the share link on the right player (there might be more on one page) var share_link = this.findInterfaceElement('.jp-share'); var share_buttons = this.findInterfaceElement('.jp-share-options'); var share_interfaces = this.findInterfaceElement('.jp-sharing-interfaces'); //when clicking on share link, show all sharing options and pause player share_link.bind('click', function() { if(!myself.old_autohide) // only when old autohide settings have not been set yet, save them myself.old_autohide = myself.playerhandler.options.playerdiv.jPlayer("option", "autohide"); // keep the old settings for putting them back on closing of interface //show/hide div with all sharing options share_buttons.toggle(); if(share_interfaces.is(':visible')) //share interfaces were visible and will be hidden //restore old autohide settings again myself.playerhandler.options.playerdiv.jPlayer("option", "autohide", myself.old_autohide); else //stop autohiding if it is on, user wants to do something with the interface myself.playerhandler.options.playerdiv.jPlayer("option", "autohide", {restored:false, full:false}); share_interfaces.toggle(); var share_height = share_buttons.outerHeight(); share_buttons.css('margin-top', '-'+share_height+'px'); current_item = myself.getCurrentItem(); //pause the player myself.playerhandler.pause(); }); if(myself.options.link) myself.setupLink(); if(myself.options.download) myself.setupDownloads(); if(this.options.socials) this.setupSocials(); if(this.options.tellfriend) this.setupTellAFriend(); if(this.options.embed) this.setupEmbed(); var myself = this; // add listeners for player events this.playerhandler.options.playercontainer.on('player_item_loaded', function(e) { myself.item_loaded(); }); } this.showInterface = function(interface_div) { var share_interfaces = this.findInterfaceElement('.jp-sharing-interfaces'); //check if the element was visible already, if so we want to just hide it if(interface_div.css("display") == 'block') { interface_div.hide(); } else { //else we want to hide all interfaces and only show the one that was requested //first hide all interfaces share_interfaces.find('.single-interface').hide(); //now show the one that we want to see interface_div.show(); //only go find out and calculate margin when it was not already set. if(!parseFloat(interface_div.css('margin-top'))) { var interface_height = interface_div.outerHeight(); var share_buttons = this.findInterfaceElement('.jp-share-options'); share_margin = parseFloat(share_buttons.css('margin-top')); interface_div.css('margin-top', share_margin - interface_height+'px'); } } } this.toggleSelectedState = function(clicked_element) { if(clicked_element.hasClass(this.select_class)) { clicked_element.removeClass(this.select_class); } else { //remove the icon_selected class from all elements that had it this.findInterfaceElement('.'+ this.select_class).removeClass(this.select_class); //add the class back again on the clicked element clicked_element.addClass(this.select_class); } } this.setupLink = function() { //get the right links and containers on the right player (there might be more in one page) var link_button = this.findInterfaceElement('.jp-link'); var link_form_div = this.findInterfaceElement('.jp-medialink'); var link_input = link_form_div.find('input[name="select_link"]'); var myself = this; //when clicking on tell a friend link, show form and pause player link_button.bind('click', function() { myself.toggleSelectedState($(this)); //pause the player myself.playerhandler.pause(); //curent item in playlist. current_item = myself.getCurrentItem(); link_input.val(current_item.attributes.sharelink);//put current items link in it //show/hide link form myself.showInterface(link_form_div); }); //when clicking on the link input field, select the text inside link_input.click(function() { this.select(); }); } this.setupTellAFriend = function() { var myself = this; //get the right links and containers on the right player (there might be more in one page) var friends_link = this.findInterfaceElement('.jp-forward'); var friends_form_div = this.findInterfaceElement('.jp-tellafriend'); var friends_form = this.findInterfaceElement('.tellafriend_form'); //when clicking on tell a friend link, show form and pause player friends_link.bind('click', function() { //show/hide tell a friend form myself.showInterface(friends_form_div); myself.toggleSelectedState($(this)); //pause the player myself.playerhandler.pause(); }); /** * This is a roundabout way to have clicking on the submit button actually submit the form. * The gui classed div inside which the form lives eats the click on the submit, so we have * to catch it via jquery. */ this.findInterfaceElement('.tellafriend_form input[type="submit"]').bind('click', function() { $(this).parents('form').trigger('submit'); friends_link.removeClass(myself.select_class); }); /** * On submitting the tell a friend form, the cid of the current item * is put into a hidden field and all data is passed to a preview/confirmation popup. * The form itself is hidden and the player is paused. */ friends_form.bind('submit', function() { //pause the player myself.playerhandler.pause(); //curent item in playlist. current_item = myself.getCurrentItem(); //set values of hidden fields of this form $(this).find('input[name="media_title"]').val(current_item.attributes.title); $(this).find('input[name="media_context_url"]').val(current_item.attributes.sharelink); //hide form again (div that the form resides in) $(this).parent().hide(); //open popup and pass form info to the popup window.open('', 'formpopup', 'width=600,height=500,resizeable,scrollbars'); this.target = 'formpopup'; }); }// end setupTellAFriend this.setupSocials = function() { var myself = this; //get the right socials link on the right player (there might be more in one page) var socials_link = this.findInterfaceElement('.jp-socials .plugin-icon'); //when clicking on link of social, build link to redirect script socials_link.bind('click', function() { //pause the player myself.playerhandler.pause(); socialname = $(this).attr('title'); //curent item in playlist. current_item = myself.getCurrentItem(); var params = {}; params.socialname = socialname; params.cid = current_item.attributes.cid; params.media_title = current_item.attributes.title; params.media_type = current_item.type; params.media_context_url = current_item.attributes.sharelink; window.open('/krn/sendSocial.php?' + $.param(params)); }); }// end setupSocials this.setupDownloads = function () { var myself = this; //get the right links and containers on the right player (there might be more in one page) var downloads_link = this.findInterfaceElement('.jp-download'); var download_container = this.findInterfaceElement('.jp-download-links'); //when clicking on tell a friend link, show form and pause player downloads_link.bind('click', function() { myself.toggleSelectedState($(this)); //pause the player myself.playerhandler.pause(); //because the code below is heavier, we now do check if it is necessary to run it by seeing if we have something to put the result in if(download_container.length) { //curent item in playlist. current_item = myself.getCurrentItem(); download_container.html('');//empty first so there's nothing left of last item listItem = ''; var first = true; if(myself.playerhandler.playableByJplayer()) {//video or sound //loop over all attributes of the current item and make for every format property (m4v, ogv, flv etc.) a download link $.each(current_item.attributes, function(property,value) { if($.jPlayer.prototype.format[property]) { // Check if property is a media format for jPlayer. if(first) { first = false; } else { listItem += " | "; } //we need an onclick because the jplayer eats clicks on itself and calls preventDefault, preventing normal action of a tag. listItem += '' + property + ''; } }); } else if(current_item.type == 'image') //shows link with linktext being the extension of the file without the dot, so 'gif' or 'jpg' //(turn url to array elements splitted on . and returns last array element (extension)) //we need an onclick because the jplayer eats clicks on itself and calls preventDefault, preventing normal action of a tag. listItem += '' + current_item.attributes.url.split('.').pop() + ''; if(listItem) download_container.html('

Download: ' + listItem+'

');//put current items link in it } //show/hide tell a downloads link myself.showInterface(download_container); }); } this.setupEmbed = function() { var myself = this; //get the right links and containers on the right player (there might be more in one page) var embed_link = this.findInterfaceElement('.jp-embed'); var embed_container = this.findInterfaceElement('.jp-embed-code'); var embed_input_large = embed_container.find('input[name="select_code_large"]'); var embed_input_medium = embed_container.find('input[name="select_code_medium"]'); var embed_input_small = embed_container.find('input[name="select_code_small"]'); var code_common_start = ''; var iframe_large = code_common_start + 'width:775px;height:480px;' + code_common_end; var iframe_medium = code_common_start + 'width:550px;height:354px;' + code_common_end; var iframe_small = code_common_start + 'width:400px;height:270px;' + code_common_end; var host = window.location.protocol + '//'+ window.location.hostname; //when clicking on embed link, show form and pause player embed_link.bind('click', function() { myself.toggleSelectedState($(this)); //pause the player myself.playerhandler.pause(); //curent item in playlist. current_item = myself.getCurrentItem(); var playerreq = current_item.attributes.playerreq; embed_input_large.val(iframe_large.replace('src=""', 'src="' + host + '/ply/winEmbed.php?playerreq=' + playerreq +'"'));//put in current items embed code embed_input_medium.val(iframe_medium.replace('src=""', 'src="' + host + '/ply/winEmbed.php?playerreq=' + playerreq +'"'));//put in current items embed code embed_input_small.val(iframe_small.replace('src=""', 'src="' + host + '/ply/winEmbed.php?playerreq=' + playerreq +'"'));//put in current items embed code //show/hide embed form myself.showInterface(embed_container); }); //when clicking on the input field, select the text inside var all_inputs = embed_container.find('input.embed_code'); all_inputs.click(function() { this.select(); }); } /** * Called by playerhandler on play (either first play or resume after pause). * Hide sharing interface so user has to open it again manually, * triggering reloads of cid and other usefull info inside the share interface. */ this.play_resumed = this.play_started = function() { this.findInterfaceElement('.jp-share-options').hide(); this.findInterfaceElement('.jp-sharing-interfaces').hide(); } /** * Called by playerhandler on loading of item. */ this.item_loaded = function() { //hide the single interface that might still be left open from last played media. So user has to manually open it again and it can be refreshed this.findInterfaceElement('.single-interface').hide(); //remove the icon_selected class from all elements that had it $('.'+this.select_class).removeClass(this.select_class); //if there's no share link, sharing is not possible so don't show the link if(!this.getCurrentItem().attributes.sharelink) this.findInterfaceElement('.jp-share').hide(); else this.findInterfaceElement('.jp-share').css('display', 'inline-block');//show would result in display:inline (because it is a span), screwing up the layout //text items can never be downloaded, so don't show the link if(this.getCurrentItem().type == 'text') this.findInterfaceElement('.jp-download').hide(); else this.findInterfaceElement('.jp-download').show(); //if there's no playerreq, embedding is not possible so don't show the link if(!this.getCurrentItem().attributes.playerreq) this.findInterfaceElement('.jp-embed').hide(); else this.findInterfaceElement('.jp-embed').css('display', 'inline-block');//show would result in display:inline (because it is a span), screwing up the layout } }