\r
//field must be a dictionary of label:defaultValues (both strings)\r
//callbackOnOk is the callback to be executed on ok, if null ok will simply hide the dialog\r
- //otherwise it must be a function accepting\r
createDivDialog : function(field,callbackOnOk){\r
\r
var $J = this._cfg_.jQuery;\r
//popupDialog(element,table,onOk);\r
return $J('<div/>').append(table).append(subdiv);\r
}\r
-\r
}\r
\r
/**\r
c.log(text);\r
}\r
}\r
-}
\ No newline at end of file
+}\r
+\r
+\r
+//var PopupClass=function(innerHTML,event){\r
+// var $J = jQuery; //reference to jQuery\r
+// var className = 'component'; //the optional div class name\r
+// var div = $J('<div/>').css({ //create the div (the popup)\r
+// position: 'absolute',\r
+// overflow:'auto', //necessary to properly display the content\r
+// display: 'none',\r
+// zIndex:1000\r
+// });\r
+// if(className){\r
+// div.addClass(className);\r
+// };\r
+//\r
+// if(content instanceof $J){\r
+// div.append(content);\r
+// }else{\r
+// div.html(content);\r
+// }\r
+// //create the div shadow\r
+// var divShadow = div.clone(false,false).empty().css({'zIndex':999,'borderColor':'#000','display':'none','backgroundColor':'#000'}).insertAfter(div);\r
+// //append to the body\r
+// var body = $J('body');\r
+// body.append(div);\r
+// divShadow.insertAfter(div);\r
+// div = div.add(divShadow);\r
+// //set the id\r
+// var time = new Date().getTime();\r
+// div.attr('id','popup_'+time);\r
+// divShadow.attr('id','popupshadow_'+time);\r
+// //make thid class a jQuery object:\r
+// $J.extend(this,div);\r
+// //override some methods:\r
+// //\r
+// //private function which binds/unbinds click and key events\r
+// var toggleBind = function(element, callback){\r
+// var clickNamespace = "click.popup__"+time;\r
+// var keydownNamespace = "keyup.popup__"+time;\r
+// element.unbind(clickNamespace);\r
+// element.unbind(keydownNamespace);\r
+// if(callback){\r
+// element.bind(clickNamespace, callback);\r
+// element.bind(keydownNamespace,callback);\r
+// }\r
+// };\r
+//\r
+// var doc = $J(document); //reference to the document\r
+//\r
+// //hide:\r
+// var hide = this.hide;\r
+// this.hide = function(){\r
+// toggleBind(doc);\r
+// };\r
+//\r
+// //remove:\r
+// var me = this;\r
+// var remove = this.remove;\r
+// this.remove = function(){\r
+// me.hide();\r
+// remove.apply(me,arguments);\r
+// };\r
+//\r
+// //show:\r
+// var shadowOffset = 5; //the shadow offset, change to increment/ decrement\r
+// var show = this.show;\r
+//\r
+// this.show = function(){\r
+// place($J(me[0]),event);\r
+// var position = $J(me[0]).offset();\r
+// $J(me[1]).css({\r
+// 'top': (position.top + shadowOffset),\r
+// 'left': (position.left + shadowOffset),\r
+// 'width': div.outerWidth(true),\r
+// 'height': div.outerHeight(true)\r
+// });\r
+// toggleBind(doc, me.hide);\r
+//\r
+// if(arguments.length>0){\r
+// var oldCallback = arguments[arguments.length-1];\r
+// arguments[arguments.length-1] = function(){\r
+// $J(me[1]).fadeTo(0,0.4,oldCallback);\r
+// }\r
+// show.apply(me, arguments);\r
+// }else{\r
+// show.apply(me);\r
+// $J(me[1]).fadeTo(0,0.4);\r
+// }\r
+//\r
+// };\r
+//\r
+//\r
+//\r
+//\r
+//\r
+// _cfg_:{\r
+// jQuery:jQuery,\r
+// div: function(){\r
+// var div = this.jQuery('<div/>').css({ //this is _cfg_\r
+// position: 'absolute',\r
+// overflow:'auto', //necessary to properly display the content\r
+// display: 'none',\r
+// border: '1px solid #e1e1e1',\r
+// zIndex:1000\r
+// });\r
+// if(this.className){\r
+// div.addClass(this.className);\r
+// }\r
+// return div;\r
+// },\r
+// className: 'component',\r
+// // mouseDownNamespace : "mousedown.popup__",\r
+// // keyDownNamespace : "keydown.popup__",\r
+//\r
+// //namespace: 'popup__', //used for namespaces when binding click to document\r
+// handlersToRestore: [],\r
+// event: null,\r
+// divsToDelete:null,\r
+// toggleBind: function(element, functionE){\r
+// var clickNamespace = "click.popup__";\r
+// var keydownNamespace = "keyup.popup__";\r
+// element.unbind(clickNamespace);\r
+// element.unbind(keydownNamespace);\r
+// if(functionE){\r
+// element.bind(clickNamespace, functionE);\r
+// element.bind(keydownNamespace,functionE);\r
+// }\r
+// }\r
+// },\r
+//\r
+// isShowing: function(){\r
+// return this._cfg_.divsToDelete ? true : false;\r
+// },\r
+//\r
+//\r
+// hide: function(){\r
+// var toggleBind = this._cfg_.toggleBind;\r
+//\r
+// var $J = this._cfg_.jQuery;\r
+//\r
+// toggleBind($J(document));\r
+// if(this._cfg_.divsToDelete){\r
+// for(var i=0; i < this._cfg_.divsToDelete.length; i++){\r
+// this._cfg_.divsToDelete[i].empty().remove();\r
+// }\r
+// }\r
+// if(this._cfg_.event && this._cfg_.handlersToRestore){\r
+// var type = this._cfg_.event.type; //which should be the same as h.type below, without namespaces?\r
+// var invokerElement = this._cfg_.event.target;\r
+// if(invokerElement){\r
+// var e = $J(invokerElement);\r
+// toggleBind(e);\r
+// if(type){\r
+// //e.unbind(type);\r
+// for(var i=0; i<this._cfg_.handlersToRestore.length; i++){\r
+// var h = this._cfg_.handlersToRestore[i];\r
+// var functionCode = h.handler;\r
+// var namespace = ""+h.namespace;\r
+// if(namespace.length>0){\r
+// namespace="."+namespace;\r
+// }\r
+// var what = h.type+ namespace;\r
+// e.bind(what, functionCode);\r
+// }\r
+// }\r
+// }\r
+// }\r
+// this._cfg_.event=null;\r
+// this._cfg_.handlersToRestore=null;\r
+// },\r
+//\r
+// show:function(content, optionalEvent){\r
+// consolelog("showing popup:"+optionalEvent);\r
+// //if showing, hide\r
+// if(this.isShowing()){\r
+// this.hide();\r
+// }\r
+//\r
+// var $J = this._cfg_.jQuery;\r
+// var div = this._cfg_.div();\r
+// //toggleBind sets the functions to hiding/keep shown the popup when clicking or\r
+// //using the keyboard keys\r
+// var toggleBind = this._cfg_.toggleBind;\r
+//\r
+// //remove the callback on invoker so that clicking on invoker does nothing\r
+// //moreover, toggleBind on invoker so that clicking invoker doesn't hide the popup\r
+// this.oldCallback = undefined;\r
+// var oldHandlers=[];\r
+// var invokerElement = optionalEvent && optionalEvent.target ? $J(optionalEvent.target) : undefined;\r
+// if(invokerElement){\r
+// optionalEvent.stopPropagation(); //othewrwise the popup hides immediately\r
+// //cause the event is catched from the document click (added later, see below)\r
+// // but apparently as soon as we add it it catches even the current event)\r
+// var type = optionalEvent.type;\r
+// var clickEvents =invokerElement.data("events")[type];\r
+// $J.each(clickEvents, function(key, value) {\r
+// oldHandlers.push(value);\r
+// })\r
+// invokerElement.unbind(type); //remove (temporarily) the binding to the event.\r
+// //for instance, if we show the popup by clicking invoker, when the popup is shown do nothing\r
+// //on clicking invoker until popup.hide is called\r
+// toggleBind(invokerElement,function(e){ //add bindings to stop cancel the popup in case the invoker is clicked again\r
+// e.stopPropagation();\r
+// return false;\r
+// });\r
+// }\r
+// //store the functions removed from invoker, if any, to restore them in this.hide\r
+// this._cfg_.handlersToRestore = oldHandlers;\r
+// this._cfg_.event = optionalEvent;\r
+//\r
+// //toggleBind on each child of content so that clicking and pressing keys on\r
+// //a child doesn't hide the popup\r
+// var children = $J(content).find('*');\r
+// $J(children).each(function(){\r
+// toggleBind($(this),function(e){\r
+// e.stopPropagation();\r
+// return false;\r
+// });\r
+// });\r
+// //showing\r
+// var doc = $J(document);\r
+// $J('body').append(div);\r
+//\r
+// content.css('position','static'); //this is really important to place the content in the normal flow\r
+// //within the div. static is the default\r
+// content.show(); //in case the div is display:none\r
+// div.append(content);\r
+//\r
+// //positioning div: center of the screen if no invoker, below the invoker otherwise\r
+// var wdow = $J(window); //reference the window object (doing it once speeds up a bit performances)\r
+// var windowH = wdow.height();\r
+// var windowW = wdow.width();\r
+// var position = div.offset();\r
+// var shadowOffset=5;\r
+// var size = {\r
+// width:div.outerWidth(true)+shadowOffset,\r
+// height:div.outerHeight(true)+shadowOffset\r
+// };\r
+// if(invokerElement){\r
+// position = invokerElement.offset();\r
+// position.top+= invokerElement.outerHeight(true);\r
+// }else{\r
+// position.top = wdow.scrollTop()+ (windowH-size.height)/2;\r
+// position.left = wdow.scrollLeft()+(windowW-size.width)/2;\r
+// }\r
+// //position div. This must be done immediately cause here below we want to get the div offset\r
+// //(div position in absolute - ie, document's - coordinates)\r
+// div.css({\r
+// 'top': position.top,\r
+// 'left': position.left,\r
+// 'right': 'auto', //in case right has been set by some css class rule\r
+// 'bottom': 'auto' //see above...\r
+// });\r
+// //set the maximum size\r
+// //due to overflow:auto a scrollbar will automatically appear\r
+// var max = Math.max; //reference max immediately (speeds up performances a bit)\r
+// var maxSize = {\r
+// width: max(20,windowW + wdow.scrollLeft() -position.left-shadowOffset),\r
+// height: max(20, (windowH + wdow.scrollTop() -position.top- shadowOffset))\r
+// }\r
+// //position div and size:\r
+// var divPadding = {\r
+// left: div.outerWidth()-div.width(),\r
+// top:div.outerHeight()-div.height()\r
+// }; //setting width on a div means the width(),\r
+// //but calculations here are made according to outerWidth(true), so we need this variable (se below)\r
+//\r
+// //the shadow in the background will be created according to the actual div size\r
+// //However, since we do not specify neither width nor height, the calculation of the div size\r
+// //works if maxWidth and maxHeight do set a width and height. In order to do so, they\r
+// //must be lower or equal to the actual div width and height. That's why the "min" here below:'\r
+// div.css({\r
+// 'maxWidth': Math.min(div.width(), maxSize.width-divPadding.left),\r
+// 'maxHeight': Math.min(div.height(), maxSize.height-divPadding.top)\r
+// });\r
+//\r
+// //last thing: if invoker element exist, set width at least invoker element width\r
+// if(invokerElement){\r
+// var iEw = invokerElement.outerWidth(); //no margins considered\r
+// if(iEw<maxSize.width && iEw>div.outerWidth()){\r
+// div.css({\r
+// 'minWidth':iEw-divPadding.left\r
+// });\r
+// }\r
+// }\r
+// //now we can build the divShadow\r
+// var divShadow = div.clone(false,false).empty().css({'zIndex':999,'borderColor':'#000','display':'none','backgroundColor':'#000'}).insertAfter(div);\r
+// //store the divs to be removed\r
+// this._cfg_.divsToDelete = [div,divShadow];\r
+// //add a listener to the document. If one of the content children is clicked/keypressed,\r
+// //we won't come here. Otherwise hide popup\r
+// var me = this;\r
+// var hide = this.hide;\r
+// toggleBind(doc,function(e){\r
+// hide.apply(me);\r
+// e.stopPropagation();\r
+// });\r
+// div.show(300, function(){ //basically in between fast (200) and slow (600)\r
+// //position div shadow:\r
+// divShadow.show();\r
+// consolelog(div.outerHeight(true)+" "+div.outerHeight(false));\r
+// consolelog(divShadow.outerHeight(true)+" "+divShadow.outerHeight(false));\r
+//\r
+// //set focus to the first input component, if any. Otherwise try with anchors, otherwise do nothing\r
+// var inputs = $J(div).find(':input');\r
+// if(inputs && inputs[0]){\r
+// inputs[0].focus();\r
+// }else{\r
+// inputs = $J(div).find('a');\r
+// if(inputs && inputs[0]){\r
+// inputs[0].focus();\r
+// }\r
+// }\r
+//\r
+// divShadow.fadeTo(0,0.4, function(){\r
+// divShadow.css({\r
+// 'top': (position.top+shadowOffset),\r
+// 'left': (position.left+shadowOffset),\r
+// 'width': div.outerWidth(true),\r
+// 'height': div.outerHeight(true)\r
+// });\r
+//\r
+// });\r
+// });\r
+// return false; //to avoid scrolling if we clicked on an anchor\r
+// },\r
+//\r
+// //field must be a dictionary of label:defaultValues (both strings)\r
+// //callbackOnOk is the callback to be executed on ok, if null ok will simply hide the dialog\r
+// createDivDialog : function(field,callbackOnOk){\r
+//\r
+// var $J = this._cfg_.jQuery;\r
+// var table = $J('<table/>');\r
+// var fieldElms = {};\r
+// for(var label in field){\r
+// var input = $('<input/>')\r
+// .attr('type','text').val(field[label]).attr("name",label);\r
+// table.append($J('<tr/>')\r
+// .append($J('<td/>').html(label))\r
+// .append($J('<td/>').append(input)));\r
+// fieldElms[label]=input;\r
+// }\r
+//\r
+// var p = this;\r
+// var onCancel= function(){\r
+// p.hide();\r
+// return false;\r
+// };\r
+//\r
+// var onOk= function(){\r
+// if(callbackOnOk){\r
+// var ret = {};\r
+// var inputs = table.find("input");\r
+// $J.each(inputs, function(key,value){\r
+// var v = $J(value);\r
+// ret[v.attr('name')] = v.val();\r
+// });\r
+// callbackOnOk(ret);\r
+// return false;\r
+// }else{\r
+// return onCancel();\r
+// }\r
+// };\r
+// var subdiv = $J('<div/>').css({\r
+// 'padding':'1ex',\r
+// 'float':'right'\r
+// }).\r
+// append(\r
+// $J('<a/>').\r
+// html('Ok').\r
+// addClass('component_icon').\r
+// addClass('button').\r
+// addClass('icon_ok').\r
+// attr('href','#').\r
+// click(function(){\r
+// return onOk();\r
+// })\r
+// );\r
+// if(callbackOnOk){\r
+// subdiv.append(\r
+// $J('<a/>').\r
+// html('Cancel').\r
+// addClass('component_icon').\r
+// addClass('button').\r
+// addClass('icon_cancel').\r
+// attr('href','#').\r
+// click(function(){\r
+// return onCancel();\r
+// })\r
+// );\r
+// }\r
+// //popupDialog(element,table,onOk);\r
+// return $J('<div/>').append(table).append(subdiv);\r
+// }\r
+//}
\ No newline at end of file
var map = player.getMarkerMap();
var indexToShow = map.insertionIndex(player.getSoundPosition());
- var mydiv = this.$J('<div/>').addClass('markerDiv').css({'position':'absolute','zIndex':1000});
+ var mydiv = this.$J('<div/>').addClass('markerDiv').css({
+ 'position':'absolute',
+ 'zIndex':1000
+ });
var ruler = player.getRuler();
// });
var me=this;
//attaching event to the image. Note that attaching an event to a transparent div is buggy in IE
-// if($J.browser.msie){
-//
-// }
- consolelog('ope');
- consolelog(jQueryObjs.find('.ts-image').length);
- jQueryObjs.find('.ts-image').click(function(event){
- alert('g');
- consolelog(event);
-
-// me.setSoundPosition( me.getSoundDuration()/$J(this).width());
- });
-
+ // if($J.browser.msie){
+ //
+ // }
+
var rewind_ = this.rewind;
var forward_ = this.forward;
return false;
});
+ //binds click for the pointer: TODO: change this way of getting the tsviweer!!!!
+ var v = $J('#player').find('.ts-viewer');
+ v.unbind('click').click(function(evt){
+ var w = v.width();
+ var x = evt.pageX - v.offset().left; //using absolute coordinates allows us to
+ //avoid checking whether or not we are clicking on a vertical marker line, on a subdiv etcetera
+ var sd = me.getSoundDuration();
+ me.setSoundPosition(sd*x/w);
+ ruler.movePointer(ruler.toSoundPosition(x));
+ });
+
+
//finally, load markers and bind events for markers (see method below):
this.loadMarkers(isInteractive);
getImageUrl: function(){
return this.$J('#visualizer_id').get(0).value;
},
- refreshImage: function(optionalImgTagElm){
+ refreshImage: function(optionalImgJQueryElm){
var image;
- if(optionalImgTagElm){
- image = optionalImgTagElm;
+ if(optionalImgJQueryElm){
+ image = optionalImgJQueryElm;
}else{
image = this.getElements().find('.ts-image');
}
loadMarkers: function(isInteractive_){
//ruler.bind('markermoved',this.markerMoved,this);
+ var $J = this.$J; //reference to jQuery
var itemId = ITEM_PUBLIC_ID;
//
//add binding to the setMarker button (html anchor):
var setMarkerButton = player.getElements().find('.ts-set-marker');
+ var tab = $J('#tab_markers');
if(setMarkerButton){
if(isInteractive_){
setMarkerButton.show().attr('href','#').unbind('click').bind('click', function(){
+ if(tab && tab.length){
+ tab.trigger('click');
+ }
map.add(player.getSoundPosition());
return false;
});
// setUpPlayerTabs([jQuery('#tab_analysis'), jQuery('#tab_markers')],
// [jQuery('#analyzer_div_id'), jQuery('#markers_div_id')], tabIndex,
// 'tab_selected','tab_unselected');
- setUpPlayerTabs(jQuery('#tab_analysis').add(jQuery('#tab_markers')),
- [jQuery('#analyzer_div_id'), jQuery('#markers_div_id')], tabIndex,
+ setUpPlayerTabs($J('#tab_analysis').add($J('#tab_markers')),
+ [$J('#analyzer_div_id'), $J('#markers_div_id')], tabIndex,
'tab_selected','tab_unselected');
};
json([itemId],"telemeta.get_markers", onSuccess);
projects / telemeta.git / commitdiff