Update SlideShareWidget with buttons down the slides. Synchro can be disabled/enabled.
--- a/src/css/LdtPlayer.css Thu Apr 26 12:09:56 2012 +0200
+++ b/src/css/LdtPlayer.css Fri Apr 27 11:52:05 2012 +0200
@@ -977,6 +977,39 @@
.Ldt-SlideShare {
font-size: 14px;
}
-.Ldt-SlideShare .sync_links{
- text-align: right;
+.Ldt-SlideShare .SlideShareButtons{
+ background: url("./imgs/slideshare_btn_bg.png") repeat-x scroll 0 0 #F8F6F7;
+ height: 25px;
+ margin-top: -4px;
+ border-bottom: 1px solid #bababa;
+ border-left: 1px solid #bababa;
+ border-right: 1px solid #bababa;
+}
+.Ldt-SlideShare .SlideShareButtons ul{
+ margin-top: 2px;
+ padding-left: 0px;
+}
+.Ldt-SlideShare .SlideShareButtons ul, .Ldt-SlideShare .SlideShareButtons ul li{
+ float: left;
+ list-style: none;
}
+.SlideShareButtons .ss_sync_on, .SlideShareButtons .ss_sync_off, .SlideShareButtons .ss_link, .SlideShareButtons .ss_tooltip{
+ width: 30px;
+ height: 20px;
+}
+.Ldt-SlideShare .SlideShareButtons .ss_sync_on{
+ background: url("./imgs/slideshare_btn_sync_violet.png") center no-repeat;
+ border-right: 1px solid #BABABA;
+}
+.Ldt-SlideShare .SlideShareButtons .ss_sync_off{
+ background: url("./imgs/slideshare_btn_sync_grey.png") center no-repeat;
+ border-right: 1px solid #BABABA;
+}
+.Ldt-SlideShare .SlideShareButtons .ss_link{
+ background: url("./imgs/slideshare_btn_link.png") center no-repeat;
+ border-right: 1px solid #BABABA;
+}
+.Ldt-SlideShare .SlideShareButtons .ss_tooltip{
+ background: url("./imgs/slideshare_btn_info.png") center no-repeat;
+ border-left: 1px solid #BABABA;
+}
Binary file src/css/imgs/slideshare_btn_bg.png has changed
Binary file src/css/imgs/slideshare_btn_info.png has changed
Binary file src/css/imgs/slideshare_btn_link.png has changed
Binary file src/css/imgs/slideshare_btn_sync_grey.png has changed
Binary file src/css/imgs/slideshare_btn_sync_violet.png has changed
--- a/src/js/widgets/slideShareWidget.js Thu Apr 26 12:09:56 2012 +0200
+++ b/src/js/widgets/slideShareWidget.js Fri Apr 27 11:52:05 2012 +0200
@@ -2,6 +2,15 @@
/** A widget to display slide show from embed slide share */
IriSP.SlideShareWidget = function(Popcorn, config, Serializer) {
IriSP.Widget.call(this, Popcorn, config, Serializer);
+ // Default flash embed size
+ this.embed_width = 425;
+ this.embed_height = 355;
+ if(this._config.embed_width){
+ this.embed_width = this._config.embed_width;
+ }
+ if(this._config.embed_height){
+ this.embed_height = this._config.embed_height;
+ }
};
IriSP.SlideShareWidget.prototype = new IriSP.Widget();
@@ -17,11 +26,6 @@
var templ = Mustache.to_html(IriSP.slideShareWidget_template);
this.selector.append(templ);
- // Synchro management
- this._disableUpdate = false;
- this.selector.find('.sync_on').click(function(event) { self.syncHandler.call(self, event); });
- this.selector.find('.sync_off').click(function(event) { self.unSyncHandler.call(self, event); });
-
// global variables used to keep the position and width of the zone.
this.zoneLeft = 0;
this.zoneWidth = 0;
@@ -31,6 +35,16 @@
this.lastSSId = "";
this.containerDiv = this.selector.find('.SlideShareContainer');
+ // Synchro management
+ this._disableUpdate = false;
+ this.buttonsDiv = this.selector.find('.SlideShareButtons');
+ this.buttonsDiv.width(this.embed_width - 2); // -2 because of css borders 328 -> 235px
+ this.buttonsDiv.find('.left_icon').css("margin-left",(this.embed_width-96)+"px");
+ this.buttonsDiv.find('.ss_sync_on').click(function(event) { self.unSyncHandler.call(self, event); });
+ this.buttonsDiv.find('.ss_sync_off').click(function(event) { self.syncHandler.call(self, event); });
+ this.buttonsDiv.find('.ss_sync_off').hide();
+ this.buttonsDiv.hide();
+
// Update the slide from timeupdate event
this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.slideShareUpdater));
@@ -82,6 +96,7 @@
forceEmpty = true;
}
else{
+ this.buttonsDiv.show();
var description_ar = this.lastSSFullUrl.split("#id=");
var slideNb = 1;
if(description_ar[1]){
@@ -102,6 +117,11 @@
if(slideNb){
embed_code = embed_code.replace(new RegExp("ssplayer2.swf\\?","g"), "ssplayer2.swf?startSlide=" + slideNb + "&");
}
+ // The embed always send the default width and height, so we can easily change them.
+ embed_code = embed_code.replace(new RegExp("425","g"), self.embed_width);
+ embed_code = embed_code.replace(new RegExp("355","g"), self.embed_height);
+ // We hide the title upon the slides.
+ embed_code = embed_code.replace(new RegExp("block"), "none");
self.containerDiv.html(embed_code);
},
error: function(jqXHR, textStatus, errorThrown){
@@ -113,8 +133,8 @@
this.lastSSUrl = description_ar[0];
this.lastSSId = "";
// In this case, we only have an id that is meant to build the flash embed
- embed_code = '<div style="width:425px"><embed src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=' + this.lastSSUrl + '&startSlide=' + slideNb + '" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" width="425" height="355"></embed></div>';
- self.containerDiv.html(embed_code);
+ embed_code = '<div style="width:425px"><embed src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=' + this.lastSSUrl + '&startSlide=' + slideNb + '" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" width="'+this.embed_width+'" height="'+this.embed_height+'"></embed></div>';
+ this.containerDiv.html(embed_code);
}
else{
// If the presentation was already loaded, we only use the ss js api to load the wanted slide number
@@ -141,18 +161,23 @@
this.lastSSUrl = "";
this.lastSSId = "";
this.containerDiv.html("");
+ this.buttonsDiv.hide();
}
};
// Functions to stop or trigger sync between timeupdate event and slides
-IriSP.SlideShareWidget.prototype.unSyncHandler = function(params) {
+IriSP.SlideShareWidget.prototype.unSyncHandler = function() {
//console.log("slideShare NO SYNC !");
this._disableUpdate = true;
+ this.buttonsDiv.find('.ss_sync_on').hide();
+ this.buttonsDiv.find('.ss_sync_off').show();
};
-IriSP.SlideShareWidget.prototype.syncHandler = function(params) {
+IriSP.SlideShareWidget.prototype.syncHandler = function() {
//console.log("slideShare SYNC PLEASE !");
this._disableUpdate = false;
+ this.buttonsDiv.find('.ss_sync_on').show();
+ this.buttonsDiv.find('.ss_sync_off').hide();
};
--- a/src/templates/slideShareWidget.html Thu Apr 26 12:09:56 2012 +0200
+++ b/src/templates/slideShareWidget.html Fri Apr 27 11:52:05 2012 +0200
@@ -1,2 +1,4 @@
{{! template for the slideShare widget of the other }}
-<div class='Ldt-SlideShare'><!--p> class='sync_links'><a class='sync_on'>Synchronise</a> - <a class='sync_off'>Ne synchronise pas</a></p--><div class='SlideShareContainer'></div></div>
\ No newline at end of file
+<div class='Ldt-SlideShare'><!--p> class='sync_links'><a class='sync_on'>Synchronise</a> - <a class='sync_off'>Ne synchronise pas</a></p--><div class='SlideShareContainer'></div>
+ <div class='SlideShareButtons'><ul><li><div class='ss_sync_on'></div><div class='ss_sync_off'></div></li><li><div class='ss_link'></div></li><li class='left_icon'><div class='ss_tooltip'></div></li></ul></div>
+</div>
\ No newline at end of file
--- a/test/integration/test-slideshare.htm Thu Apr 26 12:09:56 2012 +0200
+++ b/test/integration/test-slideshare.htm Fri Apr 27 11:52:05 2012 +0200
@@ -63,7 +63,9 @@
}]
}, {
type : "SlideShareWidget",
- container : "MySlideShareContainer"
+ container : "MySlideShareContainer",
+ embed_width : 330,
+ embed_height : 250
}, {
type : "createAnnotationWidget",
polemic_mode : false,
@@ -98,7 +100,7 @@
IriSP.initPlayer(config, json_url);
</script>
- <div id="MySlideShareContainer" style="float: left; width: 400px;"></div>
- <div id="MyListContainer" style="float: left; width: 400px;"></div>
+ <div id="MySlideShareContainer" style="float: left; width: 400px; margin-left: 5px;"></div>
+ <div id="MyListContainer" style="float: left; width: 400px; margin-left: 5px;"></div>
</body>
</html>
