function make_info_plugin_html(id, parent_container, settings) { prnt = parent_container.find('.jp-interface'); var info_opts_div = $('
'); var maincontainer = $('
'); //these divs need to be inserted as first children of the jp-interface div prnt.prepend(info_opts_div); prnt.prepend(maincontainer); info_but = complaint_but = ''; if(settings.info) { $('
').appendTo(maincontainer); info_but = $(''); } if(settings.complaint) { complaint_container = $('
').appendTo(maincontainer); form = $('
').appendTo(complaint_container); formdiv = $('
').appendTo(form); $('').appendTo(formdiv); $('').appendTo(formdiv); $('').appendTo(formdiv); $('').appendTo(formdiv); $('').appendTo(formdiv); $('').appendTo(formdiv); $('').appendTo(formdiv); $('').appendTo(formdiv); $('').appendTo(formdiv); $('').appendTo(formdiv); complaint_but = $(''); } if(info_but) info_but.appendTo(info_opts_div); if(complaint_but) complaint_but.appendTo(info_opts_div); } /** * The plugin that gives the user more information about the media and an option to file a complaint. */ function PluginInfo(opts) { //default option settings this.defaults = { info : true, // should info be shown about the media? complaint : true // should a form for filing a complaint be shown? }; /* 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); //get the info link on the right player (there might be more on one page) var info_link = this.findInterfaceElement('.jp-info-complaint'); var info_buttons = this.findInterfaceElement('.jp-info-options'); var info_interfaces = this.findInterfaceElement('.jp-info-interfaces'); //when clicking on info link, show all info options and pause player var myself = this; info_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 if(info_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}); //show/hide div with all info options info_buttons.toggle(); info_interfaces.toggle(); var info_height = info_buttons.outerHeight(); info_buttons.css('margin-top', '-'+info_height+'px'); current_item = myself.getCurrentItem(); //pause the player myself.playerhandler.pause(); }); if(this.options.info) this.setupInfo(); if(this.options.complaint) this.setupComplaint(); // add listeners for player events this.playerhandler.options.playercontainer.on('player_item_loaded', function(e) { myself.item_loaded(); }); } this.showInterface = function(interface_div) { var info_interfaces = this.findInterfaceElement('.jp-info-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 info_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. Or when it's the information block which might contain more or less info than last time if(!parseFloat(interface_div.css('margin-top')) || interface_div.hasClass('jp-infocontent')) { var interface_height = interface_div.outerHeight(); var info_buttons = this.findInterfaceElement('.jp-info-options'); info_margin = parseFloat(info_buttons.css('margin-top')); interface_div.css('margin-top', info_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.setupInfo = function() { //get the right links and containers on the right player (there might be more in one page) var info_button = this.findInterfaceElement('.jp-info'); var info_container = this.findInterfaceElement('.jp-infocontent'); var myself = this; //when clicking on infolink, show info and pause player info_button.bind('click', function() { //clear old info from container so we can add new stuff info_container.html(''); myself.toggleSelectedState($(this)); //pause the player myself.playerhandler.pause(); //curent item in playlist. current_item = myself.getCurrentItem(); if(current_item.attributes.title) { $('

Titel

').appendTo(info_container); $('

'+ current_item.attributes.title +'

').appendTo(info_container); } if(current_item.attributes.description) { $('

Omschrijving

').appendTo(info_container); $('

'+ current_item.attributes.description +'

').appendTo(info_container); } if(current_item.attributes.tags) { $('

Trefwoorden

').appendTo(info_container); $('

'+ current_item.attributes.tags +'

').appendTo(info_container); } if(current_item.attributes.created) { $('

Aangemaakt op

').appendTo(info_container); $('

'+ current_item.attributes.created +'

').appendTo(info_container); } //show/hide info myself.showInterface(info_container); }); } this.setupComplaint = function() { var myself = this; //get the right links and containers on the right player (there might be more in one page) var complaint_link = this.findInterfaceElement('.jp-complaint'); var complaint_form_div = this.findInterfaceElement('.jp-complaint-container'); var complaint_form = this.findInterfaceElement('.complaint_form'); //when clicking on complaint link, show form and pause player complaint_link.bind('click', function() { //show/hide tell a friend form myself.showInterface(complaint_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('.complaint_form input[type="submit"]').bind('click', function() { $(this).parents('form').trigger('submit'); complaint_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. */ complaint_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="cid"]').val(current_item.attributes.cid); $(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 setupComplaint /** * 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-info-options').hide(); this.findInterfaceElement('.jp-info-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 cid, sending a complaint is not possible (cid is needed to get recipient address) so don't show the link if(!this.getCurrentItem().attributes.cid) this.findInterfaceElement('.jp-complaint').hide(); else this.findInterfaceElement('.jp-complaint').css('display', 'inline-block');//show would result in display:inline (because it is a span), screwing up the layout this.findInterfaceElement('.jp-info-complaint').css('display', 'inline-block');//show would result in display:inline (because it is a span), screwing up the layout } }