-
-/*.ts-skin-lab .ts-player {
- padding: 0;
- clear: both;
- background: white;
- border: solid 1px #ADADAD;
- margin-top: 2px;
-}
-
-.ts-skin-lab .ts-player .ts-wave {
- height: 130px;
-}
-.ts-skin-lab .ts-player .ts-wave .ts-image {
- width: 360px;
- height: 130px;
- background: transparent;
-}*/
-
#player_maximized .ts-player .ts-wave, #player_maximized .ts-player .ts-image {
height: 170px;
}
-/*.ts-skin-lab .ts-player .ts-viewer {
- margin: 0;
- border: 0;
-}*/
-/*.ts-skin-lab .ts-player .ts-viewer .ts-pointer {
- background: #BB0000;
- color: #DDD;
- border: solid 1px #BB0000;
-}
-.ts-skin-lab .ts-player .ts-viewer .ts-pointer {
- color: #BB0000;
- background: white;
- padding: 0 0.5em;
- border: solid 1px #BB0000;
-}*/
-/*class for the canvas (svg) associated to a marker. If svg is not supported, a parser in the palyer
-converts these values (nb: not all are supported) to specigic vml attributes. In this case, however, ONLY CLASSES WRITTEN
-ALONE ARE PARSED (eg ".ts-blabla, .ts-marker-canvas{...}" WILL NOT BE RECOGNIZED)*/
-/*.ts-skin-lab .ts-player .ts-wave .ts-image-canvas .ts-svg-pointer-line {
- fill: #BB0000;
- stroke-width:0;
-}*/
-/*.ts-skin-lab .ts-player .ts-viewer .ts-marker {
- padding: 0 0.5em;
- background: #e65911;
- color: #FFF;
-}*/
-/*class for the canvas (svg) associated to a marker. If svg is not supported, a parser in the palyer
-converts these values (nb: not all are supported) to specigic vml attributes. In this case, however, ONLY CLASSES WRITTEN
-ALONE ARE PARSED (eg ".ts-blabla, .ts-marker-canvas{...}" WILL NOT BE RECOGNIZED)*/
-/*.ts-skin-lab .ts-player .ts-wave .ts-image-canvas .ts-svg-marker-line {
- fill: #e65911;
- stroke-width:0;
-}*/
-
-/*.ts-skin-lab .ts-player .ts-ruler .ts-section .ts-label {
- background: #595959;
- color: white;
-}
-
-.ts-skin-lab .ts-player .ts-ruler .ts-section .ts-lines {
- background: #2e2e2e;
- color: #ADADAD;
- border-bottom: solid 1px #adadad;
-}*/
-
.ts-skin-lab .ts-player .ts-control {
background: url('../images/player_controlbg.png');
}
font-size: 50%;
padding-left: 2ex;
padding-right: 2ex;
- /*-moz-border-radius: 1ex;
- -webkit-border-radius: 1ex;
- border-radius: 1ex;
- border: 1px solid #ddd;
- background-color: #fff;
-
- */
position: relative;
top: -1px;
line-height: 1.5em;
#player_maximized {
margin: 10px 0 15px 0;
display: none;
-}
-
-/*#player .ts-visualizer{
- margin:5px;
-}
-
-.ts-skin-lab .ts-player .ts-ruler{
- color: white;
- background-color: #2E2E2E;
- font-size: 10px;
- line-height: 13px;
-}
-.ts-skin-lab .ts-player .ts-ruler .ts-svg-ruler-upper-rect{
- fill: #595959;
- stroke-width:0;
- stroke: #595959; to be sure...
-}
-.ts-skin-lab .ts-player .ts-ruler .ts-svg-ruler-lines{
- stroke-width:1;
- stroke:#ADADAD;
-}*/
\ No newline at end of file
+}
\ No newline at end of file
* which might be in conflict with jQuery dollar sign.\r
*/\r
\r
-\r
-\r
//returns the full path of the current url location removing the last slash '/' followed by one or more '#', if any\r
function urlNormalized(){\r
var sPath = window.location.href;\r
\r
};\r
\r
-///**\r
-// * Returns an uniqid by creating the current local time in millisecond + a random number. Used for markers and some json calls\r
-// */\r
-//var uniqid = function() {\r
-// var d = new Date();\r
-// return new String(d.getTime() + '' + Math.floor(Math.random() * 1000000)).substr(0, 18);\r
-//};\r
-\r
/**\r
* function for writing to the console. Catches errors, if any (eg, console == undefined) and does nothing in case\r
*/\r
}else{
this.$J( this.div.children()[index] ).before(div);
}
- //this.setIndex(this.length-1,d); //length has been increased when calling super
+
this._super(div,index);
if(isNew){
this.setEditMode(index,true);
});
this.setOffset(me[to],newOffset);
- //TODO: create a function?
this.setEditMode(to,true);
return to;
},
e_descriptionText.removeAttr('readonly').removeClass('markersdivUneditable');
e_titleText.removeAttr('readonly').removeClass('markersdivUneditable');
e_okButton.add(e_okButton.parent()).show(); //hiding also the parent div saves space (padding bottom hidden)
- e_titleText.select(); //TODO: this does NOT set the focus on the div. Why?
+ e_titleText.select();
editButton.hide();
- //e_titleText.focus();
}else{
e_descriptionText.attr('readonly','readonly').addClass('markersdivUneditable');
e_titleText.attr('readonly','readonly').addClass('markersdivUneditable');
}
this.fire('edit',{'value':value, 'index':index});
- //var e_addplaylistButton = div.find('.markersdivAddPlaylist');
this.stretch(e_titleText);
},
setIndex: function(div,index){
- //div.attr('id','_markerdiv'+index);
div.find('.ts-marker').html(index+1);
var me = this;
var e_indexLabel = div.find('.ts-marker');
var div = this.$J('<div/>').attr('tabindex','0').addClass("markerdiv").html(html_);
div.find('a').attr('href','#');
- var e_indexLabel = div.find('.ts-marker');
- //var e_offsetLabel =div.find('.markersdivOffset');
var e_okButton = div.find('.markersdivSave');
var e_editButton = div.find('.markersdivEdit');
var e_deleteButton = div.find('.markersdivDelete');
//set defualt element values regardeless of the marker state (for debugging, comment it if not needed)
//e_indexLabel.attr('title',marker.toString());
this.setIndex(div, index);
-
- //e_offsetLabel.html(this.makeTimeLabel(marker.offset));
- this.setOffset(div,marker.offset);
- //set visibility and attach events according to the marker state:
- //first, is editing or not
- //var isEditing = marker.isEditable && marker.isModified;
- // (!marker.isSavedOnServer || !(this.e_editButton.is(':visible')));
- //if(!isEditing){
+ this.setOffset(div,marker.offset);
+
e_descriptionText.val(marker.desc ? marker.desc : "");
e_titleText.val(marker.title ? marker.title : "");
- //}
-
+
e_okButton.add(e_okButton.parent()).hide(); //hiding also the parent div saves space (padding bottom hidden)
e_editButton.show();
e_deleteButton.show();
}
if(!marker.canBeSetEditable){ //marker is editable means that author is superuser or author == getCurrentUserName().
- //addToPlaylist visibility is skipped because it depends on other circumstances (see above)
e_editButton.hide();
e_deleteButton.hide();
e_okButton.unbind('click')
});
}
return false; //avoid scrolling of the page on anchor click
- })
-
+ });
-
//action for ok button
e_okButton.unbind('click').click( function(){
//if(marker.desc !== descriptionText.val()){ //strict equality needed. See note below
* Class for loading a player. Requires a div#player, jQuery and all timeside javascript (player.js, markermap.js etcetera)
*/
-//var player; //global player variable
function togglePlayerMaximization() {
var $ = jQuery;
},maxTime);
- //var msgElm = $J('#loading_span_text').html('Loading sound info...');
- //var uinqid_ = Timeside.utils.uniqid; //defined in application.js
var pFloat = parseFloat;
//load analyser xml and proceed on success:
$J.ajax({
- url: analizerUrl, //'analyze/xml',
+ url: analizerUrl,
dataType: 'xml',
error:function(){
end('Error loading analyzer');
analyzerContentArray.push(elm.attr('unit'));
analyzerContentArray.push('</td></tr>');
});
-
- //loaded analizer, loading player
- //msgElm.html('Loading markers...');
-
+
var duration = $J(data).find('#duration').attr('value');
duration = duration.split(":");
//format duration
isSavedOnServer: true
};
markerMap.push(marker);
- //mapAdd.apply(map,[result[i]]);
}
- //add markers to ruler and div
- // map.each(function(i,marker){
- // rulerAdd.apply(ruler,[marker, i]);
- // mapuiAdd.apply(mapUI,[marker, i]);
- // });
-
- //tabIndex = result.length>0 ? 1 : 0;
}
//defining the marker callback:
map.toArray()[idx].isEditable = data.value;
player.getRuler().setEditable(idx,data.value, false);
}
- }); // {'value':value, 'index':index});
+ });
//bind save marker -> player save
var map = player.getMarkerMap();
defaultCloseOperation: 'hide'
});
var popupShowFunction = function(data){
- // if(popupTimeoutId !== undefined){
- // cT(popupTimeoutId);
- // }
- // popupTimeoutId=undefined;
-
popupdiv.refresh(data.marker.desc,data.marker.title);
if(!popupdiv.isShowing()){
popupdiv.show();
}
- // var index = data.index;
- // if(index+1 == map.length || map.toArray()[index+1].offset-data.marker.offset>3){
- // popupTimeoutId = popupdiv.setTimeout('close',3000);
- // }
};
if(POPUP_TIMEOUT<0){
player.bind('markerCrossed',popupShowFunction);
if(popupTimeoutId !== undefined){
clearHidePopupTimeout(popupTimeoutId);
}
- popupTimeoutId=undefined;
-
-
-
+ popupTimeoutId=undefined;
popupShowFunction(data);
-
if(POPUP_TIMEOUT<0){
return;
}
if(popupdiv.isShowing()){
popupdiv.close();
}
- // if(POPUP_TIMEOUT<0){
- // return;
- // }
- // popupTimeoutId = popupdiv.setTimeout('close',POPUP_TIMEOUT*1000);
});
}
}
}
//and niow call json method to load markers (load player also onError, no markers will be loaded)
json([itemId],"telemeta.get_markers", onSuccess,onSuccess);
- //function(container, soundUrl, durationInMsec, visualizers, markerMap, showAddMarkerButton, onError, onReady){
- //Timeside.load(playerDiv,soundUrl,,timeInMSecs,visualizers,markerMap,)
- //load_player(soundUrl, timeInMSecs, itemId, visualizers, currentUserName);
}
});
*/
function setUpPlayerTabs() {//called from within controller.js once all markers have been loaded.
//this is because we need all divs to be visible to calculate size. selIndex is optional, it defaults to 0
- //
-
+
var $J = jQuery;
var tabs_ = arguments[0];
var divs_ = arguments[1]; //they might be ctually any content, div is a shoertand
-function PopupDiv(){var a=jQuery;var b=this;var c={};if(arguments.length&&arguments[0]){c=arguments[0]}var d=a('<div/>');var e=a('<div/>').append(a('<a/>').attr('href','#').click(function(){b.close('closeClicked');return false})).append(' ').append(a('<div/>').css('clear','both'));var g=a('<div/>').css('overflow','auto');var h=a('<div/>').append(a('<a/>').attr('href','#').click(function(){b.trigger('ok');return false}));d.append(e).append(g).append(h);this.getDiv=function(){return d};var i={};this.getListeners=function(){return i};var k;var j;for(k in PopupDiv){var f=PopupDiv[k];if(PopupDiv.hasOwnProperty(k)&&(typeof f!=='function')){if(!j){j={}}j[k]=f}}if(j){var l=true;var m=undefined;if(typeof Object.getPrototypeOf!=="function"){if(typeof this.__proto__==="object"){m=this.__proto__}else{m=this;l=false}}else{m=Object.getPrototypeOf(this)}for(k in j){if(j.hasOwnProperty(k)){m[k]=j[k];if(l){delete PopupDiv[k]}}}}for(k in c){if(c.hasOwnProperty(k)){if(k==='onOk'||k==='onShow'||k==='onClose'){this.bind(k.substring(2).toLowerCase(),c[k])}else if(k=='content'){this.setContent(c[k])}else{this[k]=c[k]}}}if(!this.popupCss){this.popupCss={}}}(function(p){var $=jQuery;var z=window;var A=document;var B=$(z);var C='popup_'+(new Date().getTime());p.isClickElement=function(a){return a&&a.length==1&&a instanceof $&&a[0]!==z&&a[0]!==A&&(a.is('a')||a.is('input[type=button]')||a.is('button')||a.is('input[type=submit]'))};p.getId=function(){var a=this.getDiv();if(!(a.attr('id'))){a.attr('id',C+'_'+(new Date().getTime()))}return a.attr('id')};p.shadowOffset=4;p.invoker=B;p.bounds={'top':0.25,'left':0.25,'right':0.25,'bottom':0.25};p.boundsExact=false;p.popupClass='';p.popupCss={};p.showOk=false;p.showClose=false;p.title="";p.okButtonClass='';p.okButtonAlign='right';p.closeButtonClass='';p.titleClass='';p.okButtonTitle='Ok';p.closeButtonTitle='x';p.defaultCloseOperation='hide';p.focusable=false;p.fadInTime='fast';p.fadeOutTime=0;p.shadowOpacity=0.25;p.zIndex=10000;p.listItemClass='';p.listItemCss='';p.getFormData=function(){var c=this.find('input,select,textarea');var d={};var f=this.getFormDataAttrName();c.each(function(i,e){var a=$(e);var b=a.attr(f);if(b){d[b]=a.val()}});return d};p.find=function(a){return this.getDiv().children().eq(1).find(a)};p.bind=function(a,b){var c=this.getListeners();if(c.hasOwnProperty(a)){c[a].push(b)}else{c[a]=[b]}};p.unbind=function(a){var b=this.getListeners();if(a&&b.hasOwnProperty(a)){delete b[a]}else if(!a){for(var k in b){if(b.hasOwnProperty(k)){delete b[k]}}}};p.trigger=function(a){var b=this.getListeners();var c=this;if(b.hasOwnProperty(a)){var d=b[a];var i=0;if(a=='ok'){var e=this.getFormData();for(i=0;i<d.length;i++){d[i].apply(c,[e])}this.close('okClicked')}else if(a=='close'){var f="";if(arguments&&arguments.length>1&&typeof arguments[1]==='string'){f=arguments[1]}for(i=0;i<d.length;i++){d[i].apply(c,[f])}}else{for(i=0;i<d.length;i++){d[i].apply(c)}}}};p.setContent=function(d){var e=this.getDiv();var f=$($(e).children()[1]);f.empty();var g=this.getFormDataAttrName();if(d instanceof $){f.append(d)}else if(d instanceof Array){var j=this;var l=$('<input/>').attr('type','hidden').attr(g,'selIndex');var m=function(a,b,c){b.click(function(){c.val(a);j.trigger('ok');return false}).focus(function(){c.val(a)})};var n=$([]);for(var h=0;h<d.length;h++){var o=d[h];var a=$('<a/>').attr('href','#').html(""+o);n=n.add(a);m(h,a,l);f.append(a)}n.css({'margin':'2px'});if(this.listItemClass){n.addClass(this.listItemClass)}if(this.listItemCss){n.css(this.listItemCss)}n.css({'position':'','display':'block'});f.append(l)}else if(d&&d.constructor==Object){var p=$([]);var q=$([]);var r=[0,0];var s=function(a,b){var c=$('<div/>');if(!b){b=a;a=$('<span/>')}q=q.add(b);p=p.add(a);f.append(c.append(a).append(b));return c};var t,component;var u=Math.max;var v=undefined;var w=$([]);for(var k in d){if(d.hasOwnProperty(k)){var x=d[k];if(typeof x=='string'||typeof x=='number'){t=$('<span/>').html(k);r[0]=u(r[0],k.length);r[1]=u(r[1],x.length);component=$('<input/>').attr('type','text').val(x).attr(g,k);w=w.add(s(t,component))}else if(x===true||x===false){var y=this.getId()+"_checkbox";t=$('<input/>').attr('type','checkbox').attr(g,k).attr('id',y);if(x){t.attr('checked','checked')}else{t.removeAttr('checked')}component=$('<label/>').attr('for',y).html(k);r[1]=u(r[1],k.length);w=w.add(s($('<span/>').append(t),component))}else if(x instanceof Array){t=$('<span/>').html(k);r[0]=u(r[0],k.length);component=$('<select/>').attr('size',1).attr(g,k);for(var i=0;i<x.length;i++){component.append($('<option/>').val(x[i]).html(x[i]));r[1]=u(r[1],x[i].length)}w=w.add(s(t,component))}if(v){v.css('marginBottom','1ex')}}}w.css({'white-space':'nowrap','marginBottom':'0.5ex'});$(w[w.length-1]).css('marginBottom','');p.add(q).css({'display':'inline-block','margin':'0px','padding':'0px'});p.css({'textAlign':'right','marginRight':'0.5ex','width':Math.round((3/5)*r[0])+'em'});q.css({'width':Math.round((3/5)*u(r[0],r[1]))+'em'})}else{f.append(""+d)}};p.setFocusCycleRoot=function(b){var c=this.getDiv();var d=this.getFocusAttr();var f=this.isClickElement(this.invoker);var g=c.children();var h=$(g[0]);var j=$(g[1]);var k=$(g[2]);var l=j.find('input[type!=hidden],select,textarea,a');var m=l.length?$(l[0]):j;if(this.showClose){l=l.add(h.find('a'))}if(this.showOk||this.title){l=l.add(h.find(':text'));if(this.showOk){l=l.add(k.find('a'))}}c.add(j).css('outline','#FFF none 0px');l=l.add(c).add(j);var n="blur."+this.getId();if(!b){l.each(function(i,a){$(a).unbind(n).removeAttr('tabindex').removeAttr(d)});this.getFirstFocusableElement=function(){return undefined};if(f){this.invoker.removeAttr('tabindex').removeAttr(d)}return}if(f){this.invoker.attr('tabindex',0).attr(d,'true')}var o=A;var p=this;l.each(function(i,e){var a=$(e);a.attr(d,'true');a.attr('tabindex',i+1);a.unbind(n).bind(n,function(){setTimeout(function(){var v=o.activeElement;if((v&&$(v).attr(d))||p.__isClosing){return}p.close('focusLost')},200)})});this.getFirstFocusableElement=function(){return m}};p.getFirstFocusableElement=function(){return undefined};p.refresh=function(a,b){var c=this.isShowing();var d=this.focusable;if(a!==undefined){this.setContent(a);if(c&&d){this.setFocusCycleRoot(this.focusable)}}if(b!=undefined){if(c){this.setTitle(b)}else{this.title=b}}if(!c){return}this.setBounds();if(d){this.getFirstFocusableElement().focus()}};p.setTitle=function(a){var b=this.getDiv().children().eq(0);var c=b.contents().filter(function(){return this.nodeType==3});var d=c.get(0);if(!a){a=' '}if(d.textContent){d.textContent=a}else if(d.nodeValue){d.nodeValue=a}};p.isShowing=function(){return this.getDiv().is(':visible')};p.show=function(){var c=this.getDiv();var d=this;var e=this.invoker;var f=this.isClickElement(e);this._isClickElement=f;this.setBounds=f?this._setBoundsAsPopup:this._setBoundsInside;this.setOffset=f?this._setOffsetAsPopup:this._setOffsetInside;if(this.popupClass){c.removeClass().addClass(this.popupClass);this.popupClass=''}if(this.popupCss){c.css(this.popupCss);this.popupCss=''}this.setFocusCycleRoot(this.focusable);var g=c.children();var i=$(g[0]);var j=i.find('a').eq(0);if(this.showClose||this.title){i.css({'paddingBottom':'0.25em'});if(this.titleClass&&this.title){i.attr('class',this.titleClass);this.titleClass=''}if(this.showClose){j.css('marginLeft','0.5em').attr('class',this.closeButtonClass).html(this.closeButtonTitle).css({'display':'inline-block','float':'right'})}else{j.hide()}this.setTitle(this.title)}var k=$(g[2]);var l=k.find('a').eq(0);if(this.showOk){k.css({'paddingTop':'0.25em','textAlign':this.okButtonAlign});l.attr('class',this.okButtonClass);l.html(this.okButtonTitle);l.css({'float':'none','display':'inline-block'})}if(!c.parent().length){c.appendTo('body')}if(f){this['_tmpHandlers'+this.getId()]=undefined;var m=this.getFirstFocusableElement();if(m){var n=[];var o='click';var p=e.data("events")[o];$.each(p,function(a,b){n.push(b)});e.unbind(o);this['_tmpHandlers'+this.getId()]=n;e.unbind(o).bind(o,function(a){if(c.length&&c.is(':visible')){m.focus();return false}d.close.apply(d);return false})}}this.setBounds();var q=this._getShadow();var r=this.setOffset;var s=function(){var w=B.width();var h=B.height();d._resizeTimeInterval=setInterval(function(){var a=B.width();var b=B.height();if(a!==w||b!==h){setTimeout(function(){if(!d.isShowing()||d.__isClosing){return}if(B.width()===a&&B.height()===b){r.apply(d)}},100)}},200);d.trigger('show');if(q!==undefined){q.fadeTo(d.fadInTime,d.shadowOpacity,function(){var v=d.getFirstFocusableElement();if(v){v.focus()}})}else{var v=d.getFirstFocusableElement();if(v){v.focus()}}};c.show(this.fadInTime,function(){s()})};p.refreshShadow=function(){var a=this._getShadow();var b=this.shadowOffset;if(!b&&a!==undefined){a.remove()}else if(b){var c=this.getDiv();if(a===undefined){a=c.clone(false,false).empty().css({'backgroundColor':'#000','borderColor':'#000','display':'block','zIndex':this.zIndex-1}).removeAttr('tabindex').removeAttr(this.getFocusAttr()).fadeTo(0,0).attr('id',this.getShadowDivId()).insertAfter(c)}var d=this.getBounds.apply(this);a.css({'left':(d.x+b)+'px','top':(d.y+b)+'px','width':(d.width)+'px','height':(d.height)+'px'})}};p._getShadow=function(){var a=this.getDiv().next('div');if(a&&a.length&&a.attr('id')===this.getShadowDivId()){return a}return undefined};p._setBoundsAsPopup=function(){var a=this.invoker;this.preSizeFcn();var b=this.getDiv();var c=this.shadowOffset;var d=this.getBoundsOf(B);var e=a.offset();var f=a.outerHeight();var g=e.top-d.y;var h=d.height-f-g;var i=g>h&&b.outerHeight(false)+c>h;var j=a.outerWidth();var k=d.x+d.width-e.left;var l=e.left+j-d.x;var m=l>k&&b.outerWidth(false)+c>k;this.setMaxSize({height:(i?g:h),width:(m?l:k)});this.setMinSize({width:a.outerWidth()+this.shadowOffset});this.postSizeFcn()};p._setBoundsInside=function(){var a=this.invoker;var b=this.bounds;var c=this.boundsExact;var d=this.getDiv();this.preSizeFcn();var e=this.getBoundsOf(a);var x=e.x;var y=e.y;var w=e.width;var h=e.height;var f=parseInt;var g={top:b['top'],left:b['left'],bottom:b['bottom'],right:b['right']};for(var k in g){if(g.hasOwnProperty(k)){if(g[k]<=0){g[k]=0}else if(g[k]<=1){g[k]=k=='top'||k=='bottom'?h*g[k]:w*g[k]}else{g[k]=f(g[k])}}}var i={'width':w-g['left']-g['right']+this.shadowOffset,'height':h-g['top']-g['bottom']+this.shadowOffset};this.setMaxSize({width:i.width,height:i.height});if(c){this.setMinSize({width:i.width,height:i.height})}this.postSizeFcn()};p.preSizeFcn=function(){var a=this.getDiv();var b=a.children();b.css('display','none');var c=b.eq(1);if(this.showClose||this.title){c=c.add(b.eq(0))}if(this.showOk){c=c.add(b.eq(2))}c=c.add(a);c.css({'display':'block','float':'','overflow':'visible'});c.css({'maxHeight':'','maxWidth':'','minHeight':'','minWidth':'','height':'','width':'','overflow':'','visibility':'visible','float':''});a.css({'margin':'0px','zIndex':this.zIndex,'position':'absolute'});var d=this.getBoundsOf();a.css({'left':d.x+'px','top':d.y+'px'})};p.postSizeFcn=function(){var a=this.getDiv();var b=a.children();var c=b.eq(0);var d=b.eq(1);var e=b.eq(2);var f=(a.height()-c.outerHeight(true)-e.outerHeight(true)-(d.outerHeight(true)-d.height()));if(f>0){d.css('height',f+'px')}d.css('overflow','auto');this.setOffset()};p._setOffsetAsPopup=function(){var a=this.getDiv();var b=this.shadowOffset;var c=this.getBoundsOf(B);var d=this.invoker;var e=d.offset();var f=d.outerHeight();var g=e.top-c.y;var h=c.height-f-g;var i=g>h&&a.outerHeight(false)+b>h;var j=d.outerWidth();var k=c.x+c.width-e.left;var l=e.left+j-c.x;var m=l>k&&a.outerWidth(false)+b>k;var n={'left':m?e.left+j-a.outerWidth(true)-b:e.left,'top':(i?e.top-a.outerHeight(true):e.top+f)};a.css({'top':n.top+'px','left':n.left+'px'});this.refreshShadow()};p._setOffsetInside=function(){var a=this.getDiv();var b=this.invoker;var c=this.getBoundsOf(b);var d=this.bounds;var x=c.x;var y=c.y;var w=c.width;var h=c.height;var e=parseInt;var f={top:d['top'],left:d['left'],bottom:d['bottom'],right:d['right']};for(var k in f){if(f.hasOwnProperty(k)){if(f[k]<=0){f[k]=0}else if(f[k]<=1){f[k]=k=='top'||k=='bottom'?h*f[k]:w*f[k]}else{f[k]=e(f[k])}}}var g={'width':w-f['left']-f['right']+this.shadowOffset,'height':h-f['top']-f['bottom']+this.shadowOffset};var i=a.outerWidth(true);var j=a.outerHeight(true);var l=0;var m=0;if(i<g.width){l=(g.width-i)/2}if(j<g.height){m=(g.height-j)/2}a.css({'left':(x+f['left']+l)+'px','top':(y+f['top']+m)+'px'});this.refreshShadow()};p.getBounds=function(){return this.getBoundsOf(this.getDiv())};p.getBoundsOf=function(a){var b={x:0,y:0,width:0,height:0};if(!a||!(a instanceof $)){a=B}if(a[0]===z){b.x=a.scrollLeft();b.y=a.scrollTop()}else{var c=a.offset();b.x=c.left;b.y=c.top}b.width=a.width();b.height=a.height();return b};p.setMaxSize=function(a){var b=this.getDiv();this._convertSize(b,a);var c;if(a.hasOwnProperty('width')){if(!c){c={}}c.maxWidth=a.width+'px'}if(a.hasOwnProperty('height')){if(!c){c={}}c.maxHeight=a.height+'px'}if(c){b.css(c)}return a};p.setMinSize=function(a){var b=this.getDiv();this._convertSize(b,a);var c;if(a.hasOwnProperty('width')){if(!c){c={}}c.minWidth=a.width+'px'}if(a.hasOwnProperty('height')){if(!c){c={}}c.minHeight=a.height+'px'}if(c){b.css(c)}return a};p._convertSize=function(a,b){var c={'width':a.outerWidth(true)-a.width(),'height':a.outerHeight(true)-a.height()};if(b.hasOwnProperty('width')){b.width-=(c.width+this.shadowOffset)}if(b.hasOwnProperty('height')){b.height-=(c.height+this.shadowOffset)}};p.offset=function(a){var b=this.getDiv();b.offset(a)};p.close=function(){this.__isClosing=true;if(this._resizeTimeInterval!==undefined){clearInterval(this._resizeTimeInterval);this._resizeTimeInterval=undefined}this.setFocusCycleRoot(false);var c=this.getDiv();var d=this._getShadow();if(d!==undefined){d.remove()}var e=this;var f=this.defaultCloseOperation=='remove';c.hide(this.fadeOutTime,function(){if(f){c.remove()}var a='_tmpHandlers'+e.getId();if(e[a]){var b=e[a];delete e[a];e.invoker.unbind('click');for(var k=0;k<b.length;k++){var h=b[k];e.invoker.bind(h.type+(h.namespace?"."+h.namespace:""),h.handler)}}delete e['__isClosing'];if(arguments&&arguments.length>0&&typeof arguments[0]==='string'){e.trigger('close',arguments[0])}else{e.trigger('close')}})};p.setTimeout=function(a,b){var c=this;var t=undefined;if(a==='show'){t=setTimeout(function(){c.show()},b)}else if(a==='close'){t=setTimeout(function(){c.close()},b)}return t};p.getShadowDivId=function(){return this.getId()+"_shadow"};p.getFocusAttr=function(){return this.getId()+"_focus"};p.getFormDataAttrName=function(){return this.getId()+"_data"}})(PopupDiv.prototype);
\ No newline at end of file
+/* popupdiv minified with packer (http://dean.edwards.name/packer/)*/
+function PopupDiv(){var a=jQuery;var b=this;var c={};if(arguments.length&&arguments[0]){c=arguments[0]}var d=a('<div/>');var e=a('<div/>').append(a('<a/>').attr('href','#').click(function(){b.close('closeClicked');return false})).append(' ').append(a('<div/>').css('clear','both'));var g=a('<div/>').css('overflow','auto');var h=a('<div/>').append(a('<a/>').attr('href','#').click(function(){b.trigger('ok');return false}));d.append(e).append(g).append(h);this.getDiv=function(){return d};var i={};this.getListeners=function(){return i};var k;var j;for(k in PopupDiv){var f=PopupDiv[k];if(PopupDiv.hasOwnProperty(k)&&(typeof f!=='function')){if(!j){j={}}j[k]=f}}if(j){var l=true;var m=undefined;if(typeof Object.getPrototypeOf!=="function"){if(typeof this.__proto__==="object"){m=this.__proto__}else{m=this;l=false}}else{m=Object.getPrototypeOf(this)}for(k in j){if(j.hasOwnProperty(k)){m[k]=j[k];if(l){delete PopupDiv[k]}}}}for(k in c){if(c.hasOwnProperty(k)){if(k==='onOk'||k==='onShow'||k==='onClose'){this.bind(k.substring(2).toLowerCase(),c[k])}else if(k=='content'){this.setContent(c[k])}else{this[k]=c[k]}}}if(!this.popupCss){this.popupCss={}}}(function(p){var $=jQuery;var z=window;var A=document;var B=$(z);var C='popup_'+(new Date().getTime());p.isClickElement=function(a){return a&&a.length==1&&a instanceof $&&a[0]!==z&&a[0]!==A&&(a.is('a')||a.is('input[type=button]')||a.is('button')||a.is('input[type=submit]'))};p.getId=function(){var a=this.getDiv();if(!(a.attr('id'))){a.attr('id',C+'_'+(new Date().getTime()))}return a.attr('id')};p.shadowOffset=4;p.invoker=B;p.bounds={'top':0.25,'left':0.25,'right':0.25,'bottom':0.25};p.boundsExact=false;p.popupClass='';p.popupCss={};p.showOk=false;p.showClose=false;p.title="";p.okButtonClass='';p.okButtonAlign='right';p.closeButtonClass='';p.titleClass='';p.okButtonTitle='Ok';p.closeButtonTitle='x';p.defaultCloseOperation='hide';p.focusable=false;p.fadInTime='fast';p.fadeOutTime=0;p.shadowOpacity=0.25;p.zIndex=10000;p.listItemClass='';p.listItemCss='';p.getFormData=function(){var c=this.find('input,select,textarea');var d={};var f=this.getFormDataAttrName();c.each(function(i,e){var a=$(e);var b=a.attr(f);if(b){d[b]=a.val()}});return d};p.find=function(a){return this.getDiv().children().eq(1).find(a)};p.bind=function(a,b){var c=this.getListeners();if(c.hasOwnProperty(a)){c[a].push(b)}else{c[a]=[b]}};p.unbind=function(a){var b=this.getListeners();if(a&&b.hasOwnProperty(a)){delete b[a]}else if(!a){for(var k in b){if(b.hasOwnProperty(k)){delete b[k]}}}};p.trigger=function(a){var b=this.getListeners();var c=this;if(b.hasOwnProperty(a)){var d=b[a];var i=0;if(a=='ok'){var e=this.getFormData();for(i=0;i<d.length;i++){d[i].apply(c,[e])}this.close('okClicked')}else if(a=='close'){var f="";if(arguments&&arguments.length>1&&typeof arguments[1]==='string'){f=arguments[1]}for(i=0;i<d.length;i++){d[i].apply(c,[f])}}else{for(i=0;i<d.length;i++){d[i].apply(c)}}}};p.setContent=function(d){var e=this.getDiv();var f=$($(e).children()[1]);f.empty();var g=this.getFormDataAttrName();if(d instanceof $){f.append(d)}else if(d instanceof Array){var j=this;var l=$('<input/>').attr('type','hidden').attr(g,'selIndex');var m=function(a,b,c){b.click(function(){c.val(a);j.trigger('ok');return false}).focus(function(){c.val(a)})};var n=$([]);for(var h=0;h<d.length;h++){var o=d[h];var a=$('<a/>').attr('href','#').html(""+o);n=n.add(a);m(h,a,l);f.append(a)}n.css({'margin':'2px'});if(this.listItemClass){n.addClass(this.listItemClass)}if(this.listItemCss){n.css(this.listItemCss)}n.css({'position':'','display':'block'});f.append(l)}else if(d&&d.constructor==Object){var p=$([]);var q=$([]);var r=[0,0];var s=function(a,b){var c=$('<div/>');if(!b){b=a;a=$('<span/>')}q=q.add(b);p=p.add(a);f.append(c.append(a).append(b));return c};var t,component;var u=Math.max;var v=undefined;var w=$([]);for(var k in d){if(d.hasOwnProperty(k)){var x=d[k];if(typeof x=='string'||typeof x=='number'){t=$('<span/>').html(k);r[0]=u(r[0],k.length);r[1]=u(r[1],x.length);component=$('<input/>').attr('type','text').val(x).attr(g,k);w=w.add(s(t,component))}else if(x===true||x===false){var y=this.getId()+"_checkbox";t=$('<input/>').attr('type','checkbox').attr(g,k).attr('id',y);if(x){t.attr('checked','checked')}else{t.removeAttr('checked')}component=$('<label/>').attr('for',y).html(k);r[1]=u(r[1],k.length);w=w.add(s($('<span/>').append(t),component))}else if(x instanceof Array){t=$('<span/>').html(k);r[0]=u(r[0],k.length);component=$('<select/>').attr('size',1).attr(g,k);for(var i=0;i<x.length;i++){component.append($('<option/>').val(x[i]).html(x[i]));r[1]=u(r[1],x[i].length)}w=w.add(s(t,component))}if(v){v.css('marginBottom','1ex')}}}w.css({'white-space':'nowrap','marginBottom':'0.5ex'});$(w[w.length-1]).css('marginBottom','');p.add(q).css({'display':'inline-block','margin':'0px','padding':'0px'});p.css({'textAlign':'right','marginRight':'0.5ex','width':Math.round((3/5)*r[0])+'em'});q.css({'width':Math.round((3/5)*u(r[0],r[1]))+'em'})}else{f.append(""+d)}};p.setFocusCycleRoot=function(b){var c=this.getDiv();var d=this.getFocusAttr();var f=this.isClickElement(this.invoker);var g=c.children();var h=$(g[0]);var j=$(g[1]);var k=$(g[2]);var l=j.find('input[type!=hidden],select,textarea,a');var m=l.length?$(l[0]):j;if(this.showClose){l=l.add(h.find('a'))}if(this.showOk||this.title){l=l.add(h.find(':text'));if(this.showOk){l=l.add(k.find('a'))}}c.add(j).css('outline','#FFF none 0px');l=l.add(c).add(j);var n="blur."+this.getId();if(!b){l.each(function(i,a){$(a).unbind(n).removeAttr('tabindex').removeAttr(d)});this.getFirstFocusableElement=function(){return undefined};if(f){this.invoker.removeAttr('tabindex').removeAttr(d)}return}if(f){this.invoker.attr('tabindex',0).attr(d,'true')}var o=A;var p=this;l.each(function(i,e){var a=$(e);a.attr(d,'true');a.attr('tabindex',i+1);a.unbind(n).bind(n,function(){setTimeout(function(){var v=o.activeElement;if((v&&$(v).attr(d))||p.__isClosing){return}p.close('focusLost')},200)})});this.getFirstFocusableElement=function(){return m}};p.getFirstFocusableElement=function(){return undefined};p.refresh=function(a,b){var c=this.isShowing();var d=this.focusable;if(a!==undefined){this.setContent(a);if(c&&d){this.setFocusCycleRoot(this.focusable)}}if(b!=undefined){if(c){this.setTitle(b)}else{this.title=b}}if(!c){return}this.setBounds();if(d){this.getFirstFocusableElement().focus()}};p.setTitle=function(a){var b=this.getDiv().children().eq(0);var c=b.contents().filter(function(){return this.nodeType==3});var d=c.get(0);if(!a){a=' '}if(d.textContent){d.textContent=a}else if(d.nodeValue){d.nodeValue=a}};p.isShowing=function(){return this.getDiv().is(':visible')};p.show=function(){var c=this.getDiv();var d=this;var e=this.invoker;var f=this.isClickElement(e);this._isClickElement=f;this.setBounds=f?this._setBoundsAsPopup:this._setBoundsInside;this.setOffset=f?this._setOffsetAsPopup:this._setOffsetInside;if(this.popupClass){c.removeClass().addClass(this.popupClass);this.popupClass=''}if(this.popupCss){c.css(this.popupCss);this.popupCss=''}this.setFocusCycleRoot(this.focusable);var g=c.children();var i=$(g[0]);var j=i.find('a').eq(0);if(this.showClose||this.title){i.css({'paddingBottom':'0.25em'});if(this.titleClass&&this.title){i.attr('class',this.titleClass);this.titleClass=''}if(this.showClose){j.css('marginLeft','0.5em').attr('class',this.closeButtonClass).html(this.closeButtonTitle).css({'display':'inline-block','float':'right'})}else{j.hide()}this.setTitle(this.title)}var k=$(g[2]);var l=k.find('a').eq(0);if(this.showOk){k.css({'paddingTop':'0.25em','textAlign':this.okButtonAlign});l.attr('class',this.okButtonClass);l.html(this.okButtonTitle);l.css({'float':'none','display':'inline-block'})}if(!c.parent().length){c.appendTo('body')}if(f){this['_tmpHandlers'+this.getId()]=undefined;var m=this.getFirstFocusableElement();if(m){var n=[];var o='click';var p=e.data("events")[o];$.each(p,function(a,b){n.push(b)});e.unbind(o);this['_tmpHandlers'+this.getId()]=n;e.unbind(o).bind(o,function(a){if(c.length&&c.is(':visible')){m.focus();return false}d.close.apply(d);return false})}}this.setBounds();var q=this._getShadow();var r=this.setOffset;var s=function(){var w=B.width();var h=B.height();d._resizeTimeInterval=setInterval(function(){var a=B.width();var b=B.height();if(a!==w||b!==h){setTimeout(function(){if(!d.isShowing()||d.__isClosing){return}if(B.width()===a&&B.height()===b){r.apply(d)}},100)}},200);d.trigger('show');if(q!==undefined){q.fadeTo(d.fadInTime,d.shadowOpacity,function(){var v=d.getFirstFocusableElement();if(v){v.focus()}})}else{var v=d.getFirstFocusableElement();if(v){v.focus()}}};c.show(this.fadInTime,function(){s()})};p.refreshShadow=function(){var a=this._getShadow();var b=this.shadowOffset;if(!b&&a!==undefined){a.remove()}else if(b){var c=this.getDiv();if(a===undefined){a=c.clone(false,false).empty().css({'backgroundColor':'#000','borderColor':'#000','display':'block','zIndex':this.zIndex-1}).removeAttr('tabindex').removeAttr(this.getFocusAttr()).fadeTo(0,0).attr('id',this.getShadowDivId()).insertAfter(c)}var d=this.getBounds.apply(this);a.css({'left':(d.x+b)+'px','top':(d.y+b)+'px','width':(d.width)+'px','height':(d.height)+'px'})}};p._getShadow=function(){var a=this.getDiv().next('div');if(a&&a.length&&a.attr('id')===this.getShadowDivId()){return a}return undefined};p._setBoundsAsPopup=function(){var a=this.invoker;this.preSizeFcn();var b=this.getDiv();var c=this.shadowOffset;var d=this.getBoundsOf(B);var e=a.offset();var f=a.outerHeight();var g=e.top-d.y;var h=d.height-f-g;var i=g>h&&b.outerHeight(false)+c>h;var j=a.outerWidth();var k=d.x+d.width-e.left;var l=e.left+j-d.x;var m=l>k&&b.outerWidth(false)+c>k;this.setMaxSize({height:(i?g:h),width:(m?l:k)});this.setMinSize({width:a.outerWidth()+this.shadowOffset});this.postSizeFcn()};p._setBoundsInside=function(){var a=this.invoker;var b=this.bounds;var c=this.boundsExact;var d=this.getDiv();this.preSizeFcn();var e=this.getBoundsOf(a);var x=e.x;var y=e.y;var w=e.width;var h=e.height;var f=parseInt;var g={top:b['top'],left:b['left'],bottom:b['bottom'],right:b['right']};for(var k in g){if(g.hasOwnProperty(k)){if(g[k]<=0){g[k]=0}else if(g[k]<=1){g[k]=k=='top'||k=='bottom'?h*g[k]:w*g[k]}else{g[k]=f(g[k])}}}var i={'width':w-g['left']-g['right']+this.shadowOffset,'height':h-g['top']-g['bottom']+this.shadowOffset};this.setMaxSize({width:i.width,height:i.height});if(c){this.setMinSize({width:i.width,height:i.height})}this.postSizeFcn()};p.preSizeFcn=function(){var a=this.getDiv();var b=a.children();b.css('display','none');var c=b.eq(1);if(this.showClose||this.title){c=c.add(b.eq(0))}if(this.showOk){c=c.add(b.eq(2))}c=c.add(a);c.css({'display':'block','float':'','overflow':'visible'});c.css({'maxHeight':'','maxWidth':'','minHeight':'','minWidth':'','height':'','width':'','overflow':'','visibility':'visible','float':''});a.css({'margin':'0px','zIndex':this.zIndex,'position':'absolute'});var d=this.getBoundsOf();a.css({'left':d.x+'px','top':d.y+'px'})};p.postSizeFcn=function(){var a=this.getDiv();var b=a.children();var c=b.eq(0);var d=b.eq(1);var e=b.eq(2);var f=(a.height()-c.outerHeight(true)-e.outerHeight(true)-(d.outerHeight(true)-d.height()));if(f>0){d.css('height',f+'px')}d.css('overflow','auto');this.setOffset()};p._setOffsetAsPopup=function(){var a=this.getDiv();var b=this.shadowOffset;var c=this.getBoundsOf(B);var d=this.invoker;var e=d.offset();var f=d.outerHeight();var g=e.top-c.y;var h=c.height-f-g;var i=g>h&&a.outerHeight(false)+b>h;var j=d.outerWidth();var k=c.x+c.width-e.left;var l=e.left+j-c.x;var m=l>k&&a.outerWidth(false)+b>k;var n={'left':m?e.left+j-a.outerWidth(true)-b:e.left,'top':(i?e.top-a.outerHeight(true):e.top+f)};a.css({'top':n.top+'px','left':n.left+'px'});this.refreshShadow()};p._setOffsetInside=function(){var a=this.getDiv();var b=this.invoker;var c=this.getBoundsOf(b);var d=this.bounds;var x=c.x;var y=c.y;var w=c.width;var h=c.height;var e=parseInt;var f={top:d['top'],left:d['left'],bottom:d['bottom'],right:d['right']};for(var k in f){if(f.hasOwnProperty(k)){if(f[k]<=0){f[k]=0}else if(f[k]<=1){f[k]=k=='top'||k=='bottom'?h*f[k]:w*f[k]}else{f[k]=e(f[k])}}}var g={'width':w-f['left']-f['right']+this.shadowOffset,'height':h-f['top']-f['bottom']+this.shadowOffset};var i=a.outerWidth(true);var j=a.outerHeight(true);var l=0;var m=0;if(i<g.width){l=(g.width-i)/2}if(j<g.height){m=(g.height-j)/2}a.css({'left':(x+f['left']+l)+'px','top':(y+f['top']+m)+'px'});this.refreshShadow()};p.getBounds=function(){return this.getBoundsOf(this.getDiv())};p.getBoundsOf=function(a){var b={x:0,y:0,width:0,height:0};if(!a||!(a instanceof $)){a=B}if(a[0]===z){b.x=a.scrollLeft();b.y=a.scrollTop()}else{var c=a.offset();b.x=c.left;b.y=c.top}b.width=a.width();b.height=a.height();return b};p.setMaxSize=function(a){var b=this.getDiv();this._convertSize(b,a);var c;if(a.hasOwnProperty('width')){if(!c){c={}}c.maxWidth=a.width+'px'}if(a.hasOwnProperty('height')){if(!c){c={}}c.maxHeight=a.height+'px'}if(c){b.css(c)}return a};p.setMinSize=function(a){var b=this.getDiv();this._convertSize(b,a);var c;if(a.hasOwnProperty('width')){if(!c){c={}}c.minWidth=a.width+'px'}if(a.hasOwnProperty('height')){if(!c){c={}}c.minHeight=a.height+'px'}if(c){b.css(c)}return a};p._convertSize=function(a,b){var c={'width':a.outerWidth(true)-a.width(),'height':a.outerHeight(true)-a.height()};if(b.hasOwnProperty('width')){b.width-=(c.width+this.shadowOffset)}if(b.hasOwnProperty('height')){b.height-=(c.height+this.shadowOffset)}};p.offset=function(a){var b=this.getDiv();b.offset(a)};p.close=function(){this.__isClosing=true;if(this._resizeTimeInterval!==undefined){clearInterval(this._resizeTimeInterval);this._resizeTimeInterval=undefined}this.setFocusCycleRoot(false);var c=this.getDiv();var d=this._getShadow();if(d!==undefined){d.remove()}var e=this;var f=this.defaultCloseOperation=='remove';c.hide(this.fadeOutTime,function(){if(f){c.remove()}var a='_tmpHandlers'+e.getId();if(e[a]){var b=e[a];delete e[a];e.invoker.unbind('click');for(var k=0;k<b.length;k++){var h=b[k];e.invoker.bind(h.type+(h.namespace?"."+h.namespace:""),h.handler)}}delete e['__isClosing'];if(arguments&&arguments.length>0&&typeof arguments[0]==='string'){e.trigger('close',arguments[0])}else{e.trigger('close')}})};p.setTimeout=function(a,b){var c=this;var t=undefined;if(a==='show'){t=setTimeout(function(){c.show()},b)}else if(a==='close'){t=setTimeout(function(){c.close()},b)}return t};p.getShadowDivId=function(){return this.getId()+"_shadow"};p.getFocusAttr=function(){return this.getId()+"_focus"};p.getFormDataAttrName=function(){return this.getId()+"_data"}})(PopupDiv.prototype);
pFloat: parseFloat, //reference to function parseFloat for faster lookup
//overridden
add: function(newMarker) {
- //var markers = this.toArray();
-
if(!('offset' in newMarker)){
return -1;
}
if(!('isEditable' in newMarker)){
newMarker.isEditable = false;
}
- var marker = newMarker; //this.createMarker(obj);
+ var marker = newMarker;
var idx = this.insertionIndex(marker);
if(idx>=0){ //it exists? there is a problem....
this.debug('markermap.add: adding an already existing marker!!'); //should not happen. however...
if(newIndex > oldIndex){
newIndex--;
}
-
- //realIndex is the REAL INDEX AT WHICH WILL BE the moving marker M AFTER move.
- //It newIndex = oldIndex+1
- //we move M IMMEDIATELY AFTER ITSELF, which means, after removing M, that M has realIndex=n, as before
-
newIndex = this._super(oldIndex,newIndex);
if(newIndex <0){
fromIndex: oldIndex,
toIndex: newIndex,
oldOffset: oldOffset
- //,newIndex: realIndex
});
return newIndex;
},
}
}
return 0;
- //var ret = a < b ? -1 : (a>b ? 1 : (markerInMap.id === newMarker.id ? 0 : -1));
- //return ret;
};
if(!(typeof object == 'object')){
var offset;
return a < b ? -1 : (a>b ? 1 : 0);
};
}
- //var pInt = parseInt; //reference to parseInt outside the loop below
- //(to increase algorithm performances)
-
+
var data = this.toArray();
var low = 0;
var high = data.length-1;
this.soundPosition = sound.position ? this.toSec(sound.position) : 0;
-
-
- // if(sound.readyState != 3){
+
// /*sound.readyState
// * Numeric value indicating a sound's current load status
// * 0 = uninitialised
// * 2 = failed/error
// * 3 = loaded/success
// */
- // sound.options.whileloading=function(){
- //
- // }
- // };
+ //
- // var currentMarkerIndex=0;
- // this.getCurrentMarkerIndex = function(){
- // return currentMarkerIndex;
- // };
-
-
//initializing markermap and markerui
var map = new Timeside.classes.MarkerMap();
this.getMarkerMap = function(){
}
}
-
- //sets up the player interface and loads the markers. There is theoretically no need for this method, as it might be included in
- //the init constructor, it is separated for "historical" reasons: this method stems from the old _setupInterface,
- //which was a separate method in the old player code. Future releases might include it in the init constructor
- // setupInterface: function(markersArray) {
-
-
//var $J = this.$J; //defined in the super constructor
var me=this;
//build the innerHTML as array, then join it. This is usually faster than string concatenation in some browsers.
- //Note that the player image (see below) is given a src with a temporary 1x1 pixels transparent image
- //Basically, NOT specifying any src for image tags can be harmful,
+ //Note that the player image (see below) is not created now, however, if it was, it should be given a src
+ //as NOT specifying any src for image tags can be harmful,
//see http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/ and
//http://geekswithblogs.net/bcaraway/archive/2007/08/24/114945.aspx for details
var html = [
"<div class='ts-wait'></div>",
"</div>"];
- //removed"
- //this.getContainer().html(html.join(''));
- //var container = this.getContainer();
- //removed"
- //added"
container.html(html.join(''));
- //added"
-
+
var control = container.find('.ts-control');
//bind events to buttons:
var setMarkerButton = control.find('.ts-set-marker');
- //removed"
- //var canAddMarkers = this.canAddMarker();
- //removed"
-
if(canAddMarkers){
setMarkerButton.show().attr('href','#').unbind('click').bind('click', function(){
me.addMarker(me.soundPosition);
return vol;
};
function setVolume(event,volumeElement){
- //var ticks = [18,26,33,40,47];
var x = event.pageX - volumeElement.offset().left; //using absolute coordinates allows us to
//avoid using layerX (not supported in all browsers) and clientX (which needs the window scrollLeft variable)
me.setSoundVolume(getVol(x));
'display':'inline-block',
'overflow':'hidden'
});
-
var waitImg = control.find('.ts-wait');
waitImg.html('wait').css({
'position':'absolute'
});
-
var div = control.find('.ts-volume-wrapper-div');
div.css({
'position':'absolute',
});
//END NECESSARY CSS
-
//creating the ruler
var waveImage = container.find('.ts-image-canvas');
var ruler = new Timeside.classes.Ruler(ruler_, waveImage, this.getSoundDuration());
me.fire('markerMouseEvent',data);
});
-
//setting image size (if provided) and resize player. Note that _setImageSize (with underscore) is intended to be
//a private method (faster). setImageSize (without underscore) is the public method to use outside of player object
if(soundImgSize){
this._setImageSize('','',container, wave,true); //calls this.resize which calls ruler.resize
}
- //this.resize(); //which calls also ruler.resize() (see below)
-
-
//binds click for the pointer:
var v = wave; //.add(ruler);
v.unbind('click').click(function(evt){
// this.getSound().stop(); //calling this.pause() hides the waiting bar, which is not the case here
// this.soundPosition = newPositionInSeconds;
// this.play();
-
- //however, if this.isPlaying() we first call stop otherwise some fast pointer move effect is undesiderable
-
+ //however, that causes fast pointer move effect is undesiderable
//So:
var wasPlaying = this.isPlaying();
if(wasPlaying){
return false;
},
- setWaitElement: function(element){
-
- },
-
getWaitElement: function(){
return this.getContainer().find('.ts-control').find('.ts-wait');
},
- //msg string: undefined: do nothing, empty: hide, otherwise show wait with html = msg
setWait: function(msg){
var wait = undefined;
height = wave.height();
if (height) {
-
//set image, imagecontainer and canvas (container on imagecontainer for lines and pointer triangles) css
var elements = wave.find('.ts-image-container').css('zIndex','0')
.add(wave.find('.ts-image-canvas').css('zIndex','1')); //the two children of ts-wave. Set also the zIndex
- //in order to visualize the canvas OVER the wav image
-
- //elements.css('width', 'auto'); // for IE6. We leave it although IE6 is not anymore supported
+ //in order to visualize the canvas OVER the wav image
var style = {
width: wave.width(),
height: height
}
//refreshing images:
-
this.refreshImage();
this.getRuler().resize();
},
}
var player= this;
- //var waitString = 'refreshing img';
if(imageNotYetCreated){
image = this.$J('<img/>');
//init constructor: soundDuration is IN SECONDS!!! (float)
init: function(rulerContainer, waveContainer, soundDuration){
this._super();
- //var cssPref = this.cssPrefix;
-
+
this.getSoundDuration= function(){
return soundDuration;
};
-
this.getWaveContainer =function(){
return waveContainer;
};
- //TODO: we dont need containerWiever here!!!
- //better: it is usefult only for the canvas defined below. However...
+
this.getContainerWidth =function(){
return waveContainer.width();
};
- //private function used in resize() defined below
- //var container = viewer.find('.' + cssPref + 'ruler');
-
this.getRulerContainer = function(){
return rulerContainer;
}
if(h2){
h = h2;
}
- //TODO: set height in div ruler????
- //rulerContainer.css('height',h+'px');
var obj = this.calculateRulerElements(rulerContainer.width(),h,firstSpan.outerWidth());
this.drawRuler(rulerContainer,h,obj.path);
this._super(pointerOrMarker,index); //add at the end
//note that setText is called BEFORE move as move must have the proper label width
this.each(index, function(i,rulermarker){
- rulermarker.setIndex(i,i!=index);
- //rulermarker.setIndex.apply(rulermarker, [i,i!=indexIfMarker]); //update label width only if it is not this marker added
- //as for this marker we update the position below (move)
+ rulermarker.setIndex(i,i!=index);//update label width only if it is not this marker added
});
}else{
//note that setText is called BEFORE move as move must have the proper label width
}
//proceed with events and other stuff: move (called AFTER setText or setText)
pointerOrMarker.move(this.toPixelOffset(soundPosition));
-
- //pointer.setText(markerClass== 'pointer' ? this.makeTimeLabel(0) : this.length);
-
- //click on labels stop propagating. Always:
+ //set mouse events:
var isPointer = markerClass === 'pointer';
this._setEditable(pointerOrMarker, isMovable, isPointer);
return pointerOrMarker;
lbl.unbind('.'+eventNamespace); //this should delete all previous events
- //TODO: check!!!!
lbl.bind('mouseenter.'+eventNamespace,function(evt){
me.fire(mme,{
pointerOrMarker.isMovedByMouse = true;
}
- //preventClickFire = false;
-
var launchDragStart = true;
- var startX = evt.pageX; //lbl.position().left-container.position().left;
+ var startX = evt.pageX;
var startPos = lbl.position().left+lbl.width()/2;
evt.stopPropagation(); //dont notify the ruler or other elements;
this.positionInPixels = 0;
this.positionAsViewerRatio = 0;
- var arrowBaselineWidth = 9; //2*((fontSize - 1) >>> 1)+1; //if fontsize:10 or 9, tW:9, if fontSize:8 or 7, tW:7, and so on
+ var arrowBaselineWidth = 9;
var canvas = undefined;
var canvasClass = cssPref + 'svg-'+className+'-line';
}
}
},
- //isMovedByMouse: false, //flag to be set by the ruler (see add method) when mouse is moving this rulermarker
+
//sets the text of the marker, if the text changes the marker width and optionalUpdateLabelPosition=true,
//re-arranges the marker position to be center-aligned with its vertical line (the one lying on the wav image)
setText: function(text, optionalUpdateLabelPosition) {
} else if (pixelOffset >= width) {
pixelOffset = width - 1;
}
- //defined in the conmstructor (it depends on wehter the current browser supports SVG or not)
+ //defined in the init method (it depends on wehter the current browser supports SVG or not)
this.moveCanvas(pixelOffset);
this.positionInPixels = pixelOffset;
var label = this.getLabel();
var width = optionalContainerWidth;
var pixelOffset = this.positionInPixels;
- var labelWidth = label.outerWidth(); //consider margins and padding //label.width();
+ var labelWidth = label.outerWidth(); //consider margins and padding
var labelPixelOffset = pixelOffset - labelWidth / 2;
if (labelPixelOffset < 0){
labelPixelOffset = 0;
* 3 methods defining listeners, events fire and bind (aloing the lines of jQuery.bind, unbind and trigger.
* the only difference is that 'trigger' is 'fire' here). namespaces are allowed as in jQuery
*/
-
bind : function(eventType, callback, optionalThisArgInCallback){
if(!callback || typeof callback !== 'function'){
this.debug('TimesideClass.bind: cannot bind '+eventType+' to callback: the latter is null or not a function');
};
this.length = me.length; //in order to match the javascript array property
},
- //length:0, //implement it as public property to be consistent with Array length property. Be careful however to NOT TO modify directly this property!!!
//adds at the end of the array. If index is missing the object is appended at the end
add : function(object, index){
var array = this.toArray();
this.debug('TimesideClass.each: each called without arguments!!!');
return;
case 1:
- //callback = arg[0];
startInclusive = 0;
endExclusive = l;
break;
}
startInclusive = arg[0]=== undefined ? 0 : arg[0];
endExclusive = l;
- //callback = arg[len-1];
break;
default:
startInclusive = arg[0]=== undefined ? 0 : arg[0];
endExclusive = arg[1]=== undefined ? l : arg[1];
- //callback = arg[len-1];
}
callback = arg[len-1];
if(!(callback instanceof Function)){
var val = style[availableAttrs[k]];
if(val){
attr[availableAttrs[k]] = val;
- //console.log(val); //REMOVE THIS
}
}
}
},
Raphael: function(element,w,h){
-
-
//pass jQueryElm.get(0) as first argument, in case)
if(raphael_papers[element]){
return raphael_papers[element];
ts.utils.loadScripts(thisScriptPath,ts_scripts, function() {
var p = new ts.classes.Player(playerDiv, sound, durationInMsec, soundImgFcn, soundImgSize,
markersArray,newMarkerCallback);
- //p.setupInterface(markerMap || []);
ts.player = p;
onReady(p);
return false;
/*
-* Style for the timeside player. The skeleton of the player must be embedded inside a div of class C (in this case
-* C = 'ts-skin-lab') and reads:
-*
-* <div class='ts-viewer'>
-* <div class='ts-ruler'></div> >>RULER CONTAINER
-* <div class='ts-wave'> >>PLAYER BODY CONTAINER which includes:
-* <div class='ts-image-canvas'></div> >>MARKER LINES CONTAINER
-* <div class='ts-image-container'> >>WAVE IMAGE CONTAINER
-* <img class='ts-image'/>
-* </div>
-* </div>
-* </div>
-* <div class='ts-control'>", >>CONTROLS (BUTTONS) CONTAINER
-* <a class='ts-play ts-button'></a>
-* <a class='ts-pause ts-button'></a>
-* <a class='ts-rewind ts-button'></a>
-* <a class='ts-forward ts-button'></a>
-* <a class='ts-set-marker ts-button'></a>
-* <a class='ts-volume-speaker ts-button'></a>
-* <div class='ts-volume-wrapper-div'>
-* <a class='ts-volume-bar-container'>
-* <span class='ts-volume-bar'></span>
-* </a>
-* </div>
-* <div class='ts-wait'></div>
-* </div>
-*
-* IMPORTANT NOTES: ======================================================
-* 1) Css rules here should deal only with player APPEARENCE, not player LAYOUT and POSITIONING. For instance, some styles properties,
-* namely position and overflow of divs, are unnecessary here, as they will be overridden by javascript code,
-* because otherwise they might break the player layout.
-* 2) .ts-marker and .ts-pointer fontSize should be changed according to .ts-ruler fontSize. In general, change the latter without
-* specifying a font for the formers, which will inherit it. The player internally calculates a default ruler height before housing
-* pointer and markers in order to paint its ruler lines. If font sizes of ruler vs. pointer and markers are different, the latters
-* might overlap vertically. On the other hand, if pointers and markers have strong borders/padding,
-* playing around with different font size and line heights might be the solution to avoid vartical overlap
-* 3) canvas classes (classes beginning with '.ts-svg-') have specific svg-css syntax (have a look)
-* Svg is not supported in IE7-8, as usual, and apparently even 9 (it should be, it is not according to Raphael function detecting svg support),
-* In this cases, raphael library will care about building VML canvas, and a parser inside the player will read class rules and send them to raphael library
-* in the form of a map suitable for the 'attr' function in Raphael. Note that:
-* a) Many but not all css properties are supported for conversion.
-* b) The parser READS ONLY STAND ALONE RULES, SO BE CAREFUL: If we want,eg, define css for '.ts-svg-marker-line', write something
-* like:
-* .aClass .ts-marker-canvas'{...}
-* will not be rendered
+* Style for the timeside player. The player div is supposed to be of class .ts-player. Change if needed
+* For details, see http://code.google.com/p/timeside/wiki/UiGuide?ts=1308677096&updated=UiGuide#CSS_and_skins
*/
-.ts-skin-lab .ts-player {
+.ts-player {
padding: 0;
border: solid 1px #ADADAD;
margin-top: 2px;
}
-.ts-skin-lab .ts-player .ts-ruler{
+.ts-player .ts-ruler{
color: white;
background-color: #2E2E2E;
font-size: 10px;
line-height: 13px;
}
/*svg style, MUST BE A SINGLE SELECTOR. FOR INSTANCE, THIS DOES NOT WORK WHEN SVG IS NOT SUPPORTED:
- ".ts-skin-lab .ts-player .ts-ruler .ts-svg-ruler-upper-rect" */
+ ".ts-player .ts-ruler .ts-svg-ruler-upper-rect" */
.ts-svg-ruler-upper-rect{
fill: #595959;
stroke-width:0;
stroke: #595959; /*to be sure...*/
}
/*svg style, MUST BE A SINGLE SELECTOR. FOR INSTANCE, THIS DOES NOT WORK WHEN SVG IS NOT SUPPORTED:
- ".ts-skin-lab .ts-player .ts-ruler .ts-svg-ruler-lines"*/
+ ".ts-player .ts-ruler .ts-svg-ruler-lines"*/
.ts-svg-ruler-lines{
stroke-width:1;
stroke: #ADADAD;
}
/*wave:*/
-.ts-skin-lab .ts-player .ts-wave {
+.ts-player .ts-wave {
height: 130px;
}
-/*.ts-skin-lab .ts-player .ts-viewer .ts-marker {*/
-.ts-skin-lab .ts-player .ts-ruler .ts-marker {
+/*.ts-player .ts-viewer .ts-marker {*/
+.ts-player .ts-ruler .ts-marker {
padding: 0 0.5em;
background: #e65911;
color: #FFF;
text-decoration: none;
- /*color: white;
- background: #7290bc;*/
}
/*svg style, MUST BE A SINGLE SELECTOR. FOR INSTANCE, THIS DOES NOT WORK WHEN SVG IS NOT SUPPORTED:
- ".ts-skin-lab .ts-player .ts-wave .ts-image-canvas .ts-svg-marker-line" */
+ ".ts-player .ts-wave .ts-image-canvas .ts-svg-marker-line" */
.ts-svg-marker-line {
fill: #e65911;
stroke-width:0;
}
-/*.ts-skin-lab .ts-player .ts-viewer a.ts-pointer {*/
-.ts-skin-lab .ts-player .ts-ruler a.ts-pointer {
+/*.ts-player .ts-viewer a.ts-pointer {*/
+.ts-player .ts-ruler a.ts-pointer {
color: #BB0000;
background-color: white;
padding: 0 0.5em;
/*color: #3c4251; #6A0307 !important;*/
}
/*svg style, MUST BE A SINGLE SELECTOR. FOR INSTANCE, THIS DOES NOT WORK WHEN SVG IS NOT SUPPORTED:
- ".ts-skin-lab .ts-player .ts-wave .ts-image-canvas .ts-svg-pointer-line" */
+ ".ts-player .ts-wave .ts-image-canvas .ts-svg-pointer-line" */
.ts-svg-pointer-line {
fill: #BB0000;
stroke-width:0;
}
-.ts-skin-lab .ts-player .ts-wave .ts-image {
+.ts-player .ts-wave .ts-image {
background: #090e0d ;
}
-.ts-skin-lab .ts-player .ts-control {
+.ts-player .ts-control {
background: url('img/controlbg.png');
}
/** display (inline-block) and overflow of a is set inside javascript*/
-.ts-skin-lab .ts-player .ts-control .ts-button {
+.ts-player .ts-control .ts-button {
background-repeat: no-repeat;
height:28px;
width:28px;
}
-.ts-skin-lab .ts-player .ts-control .ts-play {
+.ts-player .ts-control .ts-play {
background-image: url('img/play.png');
}
-.ts-skin-lab .ts-player .ts-control .ts-pause {
+.ts-player .ts-control .ts-pause {
background-image: url('img/pause.png');
}
-.ts-skin-lab .ts-player .ts-control .ts-rewind {
+.ts-player .ts-control .ts-rewind {
background-image: url('img/rewind.png');
}
-.ts-skin-lab .ts-player .ts-control .ts-forward {
+.ts-player .ts-control .ts-forward {
background-image: url('img/forward.png');
}
-.ts-skin-lab .ts-player .ts-control .ts-set-marker {
+.ts-player .ts-control .ts-set-marker {
background-image: url('img/setmarker.png');
}
-.ts-skin-lab .ts-player .ts-control .ts-volume-speaker-on {
+.ts-player .ts-control .ts-volume-speaker-on {
background-image: url('img/volumeon.png');
width:24px;
}
-.ts-skin-lab .ts-player .ts-control .ts-volume-speaker-off {
+.ts-player .ts-control .ts-volume-speaker-off {
background-image: url('img/volumeoff.png');
width:24px;
}
-.ts-skin-lab .ts-player .ts-control .ts-volume-bar-container {
+.ts-player .ts-control .ts-volume-bar-container {
background: url('img/controlbg-inverted.png');
background-position: -3px left;
background-repeat: repeat-x;
border-radius: 5px;
}
-
-.ts-skin-lab .ts-player .ts-control .ts-volume-bar { /*width will be changed inside the code*/
+.ts-player .ts-control .ts-volume-bar { /*width will be changed inside the code*/
background-color: #e4eaf1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
-
-
/*position is set to absolute inside javascript*/
-.ts-skin-lab .ts-player .ts-control .ts-wait {
+.ts-player .ts-control .ts-wait {
background-repeat: no-repeat;
background-image: url('img/wait3.gif');
text-align: right;
projects / telemeta.git / commitdiff