web/LdtPlayer-release.js
changeset 15 6d9cd6f47d95
parent 12 dbcb0dc6a844
child 17 283abdcf7134
equal deleted inserted replaced
14:d72aa3951218 15:6d9cd6f47d95
  8668       });
  8668       });
  8669     }
  8669     }
  8670 };
  8670 };
  8671 
  8671 
  8672 
  8672 
  8673 IriSP.annotation_template = "{{! template for an annotation displayed in a segmentWidget }}<div title='{{divTitle}}' id='{{id}}'	class='Ldt-iri-chapter' 	style='left: {{startPourcent}}%;          width: {{endPourcent}}%;          background-color:#{{hexa_color}};' 	></div>";
  8673 IriSP.annotation_template = "{{! template for an annotation displayed in a segmentWidget }}<div title='{{divTitle}}' id='{{id}}'	class='Ldt-iri-chapter' 	style='left: {{startPourcent}}%;          width: {{endPourcent}}%;          background:#{{hexa_color}};' 	></div>";
  8674 IriSP.annotationWidget_template = "{{! template for the annotation widget }}<div class='Ldt-AnnotationsWidget'>  <!-- ugly div because we want to have a double border -->  <div class='Ldt-Annotation-DoubleBorder'>      <div class='Ldt-AnnotationContent'>        <div class='Ldt-AnnotationShareIcons'>         <a class='Ldt-fbShare' href=''><img src='{{img_dir}}/facebook.png' alt='share on facebook'></img></a>         <a class='Ldt-TwShare' href=''><img src='{{img_dir}}/twitter.png' alt='share on twitter'></img></a>         <a class='Ldt-GplusShare' href=''><img src='{{img_dir}}/google.png' alt='share on google+'></img></a>      </div>		  <div class='Ldt-SaTitle'></div>	  	<div class='Ldt-SaDescription'></div>    </div>  </div></div>";
  8674 IriSP.annotationWidget_template = "{{! template for the annotation widget }}<div class='Ldt-AnnotationsWidget'>  <!-- ugly div because we want to have a double border -->  <div class='Ldt-Annotation-DoubleBorder'>      <div class='Ldt-AnnotationContent'>        <div class='Ldt-AnnotationShareIcons'>         <a class='Ldt-fbShare' href=''><img src='{{img_dir}}/facebook.png' alt='share on facebook'></img></a>         <a class='Ldt-TwShare' href=''><img src='{{img_dir}}/twitter.png' alt='share on twitter'></img></a>         <a class='Ldt-GplusShare' href=''><img src='{{img_dir}}/google.png' alt='share on google+'></img></a>      </div>		  <div class='Ldt-SaTitle'></div>	  	<div class='Ldt-SaDescription'></div>    </div>  </div></div>";
  8675 IriSP.annotation_loading_template = "{{! template shown while the annotation widget is loading }}<div id='Ldt-load-container'><div id='Ldt-loader'>&nbsp;</div> Chargement... </div>";
  8675 IriSP.annotation_loading_template = "{{! template shown while the annotation widget is loading }}<div id='Ldt-load-container'><div id='Ldt-loader'>&nbsp;</div> Chargement... </div>";
  8676 IriSP.arrowWidget_template = "<div class='Ldt-arrowWidget'></div>";
  8676 IriSP.arrowWidget_template = "<div class='Ldt-arrowWidget'></div>";
  8677 IriSP.overlay_marker_template = "{{! the template for the small white bars which is z-indexed over our segment widget }}<div class='positionMarker'></div>";
  8677 IriSP.overlay_marker_template = "{{! the template for the small white bars which is z-indexed over our segment widget }}<div class='positionMarker' style='background-color: #F7268E;'></div>";
  8678 IriSP.player_template = "{{! template for the radio player }}<div class='Ldt-controler demo'>	<div class='Ldt-LeftPlayerControls'>    <div class='Ldt-button Ldt-CtrlPlay'></div>		<div class='Ldt-button Ldt-CtrlAnnotate'></div>    <div class='Ldt-button Ldt-CtrlSearch'></div>	</div>		<div class='Ldt-RightPlayerControls'>    <div class='Ldt-Time'>      <div class='Ldt-ElapsedTime'></div>      <div class='Ldt-TimeSeparator'>/</div>      <div class='Ldt-TotalTime'></div>    </div>		<div class='Ldt-button Ldt-CtrlSound'></div>	</div></div>";
  8678 IriSP.player_template = "{{! template for the radio player }}<div class='Ldt-controler demo'>	<div class='Ldt-LeftPlayerControls'>    <div class='Ldt-button Ldt-CtrlPlay'></div>		<div class='Ldt-button Ldt-CtrlAnnotate'></div>    <div class='Ldt-button Ldt-CtrlSearch'></div>	</div>		<div class='Ldt-RightPlayerControls'>    <div class='Ldt-Time'>      <div class='Ldt-ElapsedTime'></div>      <div class='Ldt-TimeSeparator'>/</div>      <div class='Ldt-TotalTime'></div>    </div>		<div class='Ldt-button Ldt-CtrlSound'></div>	</div></div>";
  8679 IriSP.search_template = "{{! template for the search container }}<div class='LdtSearchContainer'	style='margin-left: {{margin_left}}; position: absolute; margin-top: -60px;'>	<div class='LdtSearch'		style='display: none; background-color: #EEE; width: 165px; boder: 1px; border-color: #CFCFCF; position: absolute; text-align: center;'>		<input class='LdtSearchInput'			style='margin-top: 2px; margin-bottom: 2px;' />	</div></div><div class='cleaner'></div>";
  8679 IriSP.search_template = "{{! template for the search container }}<div class='LdtSearchContainer'	style='margin-left: {{margin_left}}; position: absolute; margin-top: -60px;'>	<div class='LdtSearch'		style='display: none; background-color: #EEE; width: 165px; boder: 1px; border-color: #CFCFCF; position: absolute; text-align: center;'>		<input class='LdtSearchInput'			style='margin-top: 2px; margin-bottom: 2px;' />	</div></div><div class='cleaner'></div>";
  8680 IriSP.share_template = "{{! social network sharing template }}<a onclick='__IriSP.MyApiPlayer.share(\'delicious\');' title='partager avec delicious'><span class='share shareDelicious'>&nbsp;</span></a>		<a onclick='__IriSP.MyApiPlayer.share(\'facebook\');' title='partager avec facebook'> <span class='share shareFacebook'>&nbsp;</span></a><a onclick='__IriSP.MyApiPlayer.share(\'twitter\');' title='partager avec twitter'>  <span class='share shareTwitter'>&nbsp;</span></a><a onclick='__IriSP.MyApiPlayer.share(\'myspace\');' title='partager avec Myspace'>  <span class='share shareMySpace'>&nbsp;</span></a>";
  8680 IriSP.share_template = "{{! social network sharing template }}<a onclick='__IriSP.MyApiPlayer.share(\'delicious\');' title='partager avec delicious'><span class='share shareDelicious'>&nbsp;</span></a>		<a onclick='__IriSP.MyApiPlayer.share(\'facebook\');' title='partager avec facebook'> <span class='share shareFacebook'>&nbsp;</span></a><a onclick='__IriSP.MyApiPlayer.share(\'twitter\');' title='partager avec twitter'>  <span class='share shareTwitter'>&nbsp;</span></a><a onclick='__IriSP.MyApiPlayer.share(\'myspace\');' title='partager avec Myspace'>  <span class='share shareMySpace'>&nbsp;</span></a>";
  8681 IriSP.sliderWidget_template = "{{! template for the slider widget - it's composed of two divs we one overlayed on top    of the other }}<div class='Ldt-sliderBackground'></div><div class='Ldt-sliderForeground'></div><div class='Ldt-sliderPositionMarker'></div>";
  8681 IriSP.sliderWidget_template = "{{! template for the slider widget - it's composed of two divs we one overlayed on top    of the other }}<div class='Ldt-sliderBackground'></div><div class='Ldt-sliderForeground'></div><div class='Ldt-sliderPositionMarker'></div>";
  8682 IriSP.tooltip_template = "{{! template used by the jquery ui tooltip }}<div class='Ldt-tooltip'>  <div class='title'>{{title}}</div>  <div class='time'>{{begin}} : {{end}} </div>  <div class='description'>{{description}}</div></div>";
  8682 IriSP.tooltip_template = "{{! template used by the jquery ui tooltip }}<div class='Ldt-tooltip'>  <div class='title'>{{title}}</div>  <div class='time'>{{begin}} : {{end}} </div>  <div class='description'>{{description}}</div></div>";
 10489     if (i == 0) {
 10489     if (i == 0) {
 10490 
 10490 
 10491       endPourcent -= onePxPercent;
 10491       endPourcent -= onePxPercent;
 10492     }
 10492     }
 10493     
 10493     
 10494     var divTitle = annotation.content.title.substr(0,55);
 10494     var divTitle = (annotation.content.title + " - " + annotation.content.description).substr(0,55);
 10495 
 10495 
 10496     if (typeof(annotation.content.color) !== "undefined")
 10496     if (typeof(annotation.content.color) !== "undefined")
 10497       var color = annotation.content.color;
 10497       var color = annotation.content.color;
 10498     else
 10498     else
 10499       var color = annotation.color;
 10499       var color = annotation.color;
 10500     
 10500     
 10501     var hexa_color = IriSP.DEC_HEXA_COLOR(color);
 10501     var hexa_color = IriSP.DEC_HEXA_COLOR(color);
 10502     console.log(hexa_color);
 10502     
 10503     if (hexa_color === "FFCC00")
 10503     if (hexa_color === "FFCC00")
 10504       hexa_color = "333";
 10504       hexa_color = "333";
 10505     
 10505     
 10506     var annotationTemplate = Mustache.to_html(IriSP.annotation_template,
 10506     var annotationTemplate = Mustache.to_html(IriSP.annotation_template,
 10507         {"divTitle" : divTitle, "id" : id, "startPourcent" : startPourcent,
 10507         {"divTitle" : divTitle, "id" : id, "startPourcent" : startPourcent,
 10528           var correction = IriSP.jQuery(this).outerWidth() / 2;
 10528           var correction = IriSP.jQuery(this).outerWidth() / 2;
 10529 
 10529 
 10530           var offset_x = offset.left + correction - 106;
 10530           var offset_x = offset.left + correction - 106;
 10531           if (offset_x < 0)
 10531           if (offset_x < 0)
 10532             offset_x = 0;
 10532             offset_x = 0;
 10533 
 10533                     
 10534           self.TooltipWidget.show(divTitle, color, offset_x, event.pageY - 160);
 10534           self.TooltipWidget.show(divTitle, color, offset_x, event.pageY - 160);
 10535     } })(divTitle)).mouseout(function(){
 10535     } })(divTitle)).mouseout(function(){
 10536       IriSP.jQuery(this).animate({opacity: 0.3}, 5);
 10536       IriSP.jQuery(this).animate({opacity: 0.3}, 5);
 10537       self.TooltipWidget.hide();
 10537       self.TooltipWidget.hide();
 10538     });
 10538     });
 10543   }
 10543   }
 10544 };
 10544 };
 10545 
 10545 
 10546 /* restores the view after a search */
 10546 /* restores the view after a search */
 10547 IriSP.SegmentsWidget.prototype.clear = function() {
 10547 IriSP.SegmentsWidget.prototype.clear = function() {
 10548   //this.selector.children(".Ldt-iri-chapter").css('border','none').animate({opacity:0.3}, 100);
 10548   this.selector.children(".Ldt-iri-chapter").css('border','none').animate({opacity:0.3}, 100);
 10549 };
 10549 };
 10550 
 10550 
 10551 IriSP.SegmentsWidget.prototype.clickHandler = function(annotation) {
 10551 IriSP.SegmentsWidget.prototype.clickHandler = function(annotation) {
 10552   this._Popcorn.trigger("IriSP.SegmentsWidget.click", annotation.id);
 10552   this._Popcorn.trigger("IriSP.SegmentsWidget.click", annotation.id);
 10553   var begin = (+ annotation.begin) / 1000;
 10553   var begin = (+ annotation.begin) / 1000;
 10755 };
 10755 };
 10756 
 10756 
 10757 /* this widget displays a small tooltip */
 10757 /* this widget displays a small tooltip */
 10758 IriSP.TooltipWidget = function(Popcorn, config, Serializer) {
 10758 IriSP.TooltipWidget = function(Popcorn, config, Serializer) {
 10759   IriSP.Widget.call(this, Popcorn, config, Serializer);
 10759   IriSP.Widget.call(this, Popcorn, config, Serializer);
       
 10760   this._shown = false;
 10760 };
 10761 };
 10761 
 10762 
 10762 
 10763 
 10763 IriSP.TooltipWidget.prototype = new IriSP.Widget();
 10764 IriSP.TooltipWidget.prototype = new IriSP.Widget();
 10764 
 10765 
 10773 IriSP.TooltipWidget.prototype.clear = function() {
 10774 IriSP.TooltipWidget.prototype.clear = function() {
 10774 	this.selector.find(".tiptext").text("");
 10775 	this.selector.find(".tiptext").text("");
 10775 };
 10776 };
 10776 
 10777 
 10777 IriSP.TooltipWidget.prototype.show = function(text, color, x, y) {
 10778 IriSP.TooltipWidget.prototype.show = function(text, color, x, y) {
 10778   if (this.selector.find(".tiptext").text() == text)
 10779   if (this._shown === true || this.selector.find(".tiptext").text() == text)
 10779     return;
 10780     return;
 10780 
 10781 
 10781   this.selector.find(".tipcolor").css("background-color", color);
 10782   this.selector.find(".tipcolor").css("background-color", color);
 10782 	this.selector.find(".tiptext").text(text);
 10783 	this.selector.find(".tiptext").text(text);
 10783   this.selector.find(".tip").css("left", x).css("top", y);
 10784   this.selector.find(".tip").css("left", x).css("top", y);
       
 10785   
       
 10786   this._shown = true;
 10784 };
 10787 };
 10785 
 10788 
 10786 IriSP.TooltipWidget.prototype.hide = function() {
 10789 IriSP.TooltipWidget.prototype.hide = function() {
 10787   this.clear();
 10790   this.clear();
 10788   this.selector.find(".tip").css("left", -10000).css("top", -100000);
 10791   this.selector.find(".tip").css("left", -10000).css("top", -100000);
       
 10792   
       
 10793   this._shown = false;
 10789 };
 10794 };
 10790 /* a widget that displays tweet - used in conjunction with the polemicWidget */
 10795 /* a widget that displays tweet - used in conjunction with the polemicWidget */
 10791 
 10796 
 10792 IriSP.TweetsWidget = function(Popcorn, config, Serializer) {
 10797 IriSP.TweetsWidget = function(Popcorn, config, Serializer) {
 10793   IriSP.Widget.call(this, Popcorn, config, Serializer);
 10798   IriSP.Widget.call(this, Popcorn, config, Serializer);