Corrections of the code for the embed popup. Functions are now in the embed_popup.js
With chrome the player used to play the video even when it wasn't supposed to be displayed and kept playing when we hid the player. When we changed between div and iframe the player started even when it was suppose to be hidden. It's now solved.
--- a/src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/embed_popup.html Wed Oct 10 18:07:40 2012 +0200
+++ b/src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/embed_popup.html Thu Oct 11 16:39:05 2012 +0200
@@ -1,5 +1,4 @@
{% load i18n %}
-{% load set_var %}
{% load analytics %}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
@@ -16,57 +15,20 @@
<script type="text/javascript" src="{{LDT_MEDIA_PREFIX}}js/jquery.qtip.min.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
+ var iframe_url='{{iframe_url}}';
+ var polemic='{{polemic}}';
+ var show_mic_record='{{show_mic_record}}';
+ var annotations_list='{{annotations_list}}';
+ var player_id='{{player_id}}';
+ var translate_show="{% trans 'Show Player' %}";
+ var translate_hide="{% trans 'Hide Player' %}";
</script>
<script type="text/javascript" src="{{LDT_MEDIA_PREFIX}}js/embed_popup.js"></script>
<link rel="stylesheet" href="{{LDT_MEDIA_PREFIX}}css/workspace.css" type="text/css"/>
<link rel="stylesheet" href="{{LDT_MEDIA_PREFIX}}css/embed_popup.css" type="text/css"/>
<link rel="stylesheet" href="{{LDT_MEDIA_PREFIX}}css/jq-css/jquery.qtip.css" type="text/css"/>
- <script type="text/javascript">
- function iframe_event(){
- var code_embed=document.getElementById("player_id_code");
- iframeUrl= "{{iframe_url}}&polemic={{polemic}}&show_mic_record={{show_mic_record}}&annotations_list={{annotations_list}}";
- player_width=570;
- player_height=678;
- frame = document.createElement("iframe");
- frame.width = 570;
- frame.height = 678;
- frame.src = iframeUrl;
- frame.frameBorder = 0;
- frame.seamless = "seamless";
- $j("#wrapper_{{player_id}}").html(frame);
- iframe_code="<iframe src='"+iframeUrl+"' width='570' height='678' seamless='seamless'></iframe>";
- $j("#player_id_code").val(iframe_code);
- $j("#player_id_code").focus();
- $j("#player_id_code").select();
- }
- </script>
- <script type="text/javascript">
- function div_event(){
- var new_code=document.getElementById("embed_code_var").value;
- var code_embed=document.getElementById("player_id_code");
- $j("#wrapper_{{player_id}}").html(new_code);
- code_embed.value= new_code;
- $j("#player_id_code").focus();
- $j("#player_id_code").select();
- }
- </script>
-
- <script type="text/javascript">
- function toggle() {
- var element = document.getElementById("wrapper_{{player_id}}");
- var text = document.getElementById("displayPlayer");
- if(element.style.display==="none") {
- element.style.display="block";
- text.innerHTML = "{% trans 'Hide Player' %}";
- }
- else {
- element.style.display="none";
- text.innerHTML = "{% trans 'Show Player' %}";
- }
- }
- </script>
</head>
<body id="init_embed_popup">
@@ -77,7 +39,6 @@
<a id="displayPlayer" href="javascript:toggle();">{% trans 'Show Player' %}</a>
<div class="ldt_player" id="wrapper_{{player_id}}" style="display:none">
- {% include "ldt/ldt_utils/partial/embed_player.html" %}
</div>
<div id="button_row">
<div id="display_select">
@@ -89,9 +50,9 @@
<br></br>
<code id ="code_{{player_id}}" >
<div id="player_code">
- <br><div align="center">
- <input type="radio" name="player_code_type" value="div" checked onClick="div_event()" > {% trans 'Use the div integration mode' %}</input><br>
- <input type="radio" name="player_code_type" value="iframe" onClick="iframe_event()"> {% trans 'Use the iframe integration mode' %}</input><br>
+ <br><div>
+ <input type="radio" id="type_embed_div" name="player_code_type" value="div" checked onClick="div_event()" > {% trans 'Use the div integration mode' %}</input><br>
+ <input type="radio" id="type_embed_iframe" name="player_code_type" value="iframe" onClick="iframe_event()"> {% trans 'Use the iframe integration mode' %}</input><br>
</div></br>
<textarea id="player_id_code" readonly="readonly" class="ldt_player_code">{{ embed_rendered.player }}</textarea>
</div>
--- a/src/ldt/ldt/static/ldt/js/embed_popup.js Wed Oct 10 18:07:40 2012 +0200
+++ b/src/ldt/ldt/static/ldt/js/embed_popup.js Thu Oct 11 16:39:05 2012 +0200
@@ -69,4 +69,97 @@
});
+function toggle() {
+ wrapper="wrapper_"+player_id;
+ wrapper_id="#"+wrapper;
+ var element = document.getElementById(wrapper);
+ var text = document.getElementById("displayPlayer");
+ var type_embed=document.getElementById("type_embed_div");
+ if(element.style.display==="none") {
+ if (type_embed.checked){
+ var new_code=document.getElementById("embed_code_var").value;
+ $j(wrapper_id).html(new_code);
+ }
+ else{
+ wrapper = "#wrapper_"+player_id;
+ iframeUrl= iframe_url+"&polemic="+polemic+"&show_mic_record="+show_mic_record+"&annotations_list="+annotations_list+"";
+ player_width=570;
+ player_height=678;
+ if(annotations_list!='False'){
+ player_width+=430;
+ }
+ if(polemic!='False'){
+ player_height+=100;
+
+ }
+ if(show_mic_record!='False'){
+
+ player_height+=55;
+ }
+ frame = document.createElement("iframe");
+ frame.width = player_width;
+ frame.height = player_height;
+ frame.src = iframeUrl;
+ frame.frameBorder = 0;
+ frame.seamless = "seamless";
+ $j(wrapper).html(frame);
+
+ }
+ element.style.display="block";
+ text.innerHTML = translate_hide;
+ }
+ else {
+ $j(wrapper_id).html('');
+ element.style.display="none";
+ text.innerHTML = translate_show;
+ }
+}
+function div_event(){
+ wrapper = "wrapper_"+player_id;
+ wrapper_id = "#"+wrapper;
+ var element = document.getElementById(wrapper);
+ var new_code=document.getElementById("embed_code_var").value;
+ var code_embed=document.getElementById("player_id_code");
+ if(element.style.display=="block"){
+ $j(wrapper_id).html(new_code);
+ }
+ code_embed.value= new_code;
+ $j("#player_id_code").focus();
+ $j("#player_id_code").select();
+}
+
+function iframe_event(){
+ var code_embed=document.getElementById("player_id_code");
+ wrapper = "wrapper_"+player_id;
+ wrapper_id = "#"+wrapper;
+ var element = document.getElementById(wrapper);
+ iframeUrl= iframe_url+"&polemic="+polemic+"&show_mic_record="+show_mic_record+"&annotations_list="+annotations_list+"";
+ player_width=570;
+ player_height=678;
+ if(annotations_list!='False'){
+ player_width+=430;
+ }
+ if(polemic!='False'){
+ player_height+=100;
+
+ }
+ if(show_mic_record!='False'){
+
+ player_height+=55;
+ }
+
+ if(element.style.display=="block"){
+ frame = document.createElement("iframe");
+ frame.width = player_width;
+ frame.height = player_height;
+ frame.src = iframeUrl;
+ frame.frameBorder = 0;
+ frame.seamless = "seamless";
+ $j(wrapper_id).html(frame);
+ }
+ iframe_code="<iframe src='"+iframeUrl+"' width='"+player_width+"' height='"+player_height+"' seamless='seamless'></iframe>";
+ $j("#player_id_code").val(iframe_code);
+ $j("#player_id_code").focus();
+ $j("#player_id_code").select();
+}