From: riccardo Date: Thu, 5 May 2011 14:23:34 +0000 (+0200) Subject: working on playlists popups and player... X-Git-Tag: 1.1~242 X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=bc85aa5758b4585749ae96db57ff3bef61aa3dd2;p=telemeta.git working on playlists popups and player... --- diff --git a/telemeta/htdocs/js/application.js b/telemeta/htdocs/js/application.js index 333a2d91..295405cd 100644 --- a/telemeta/htdocs/js/application.js +++ b/telemeta/htdocs/js/application.js @@ -1003,413 +1003,9 @@ function DivDialog(content){ - - -//var PopupManager={ -// -// //default properties: -// $J: jQuery, -// shadowOpacity: 0.4, -// shadowOffset: 5, -// zIndex: 1000, -// infoDialogMaxSizeInWindowPercent: 0.5, -// defaultClasses: 'control component', -// createPopupDiv: function(content){ -// var $J = this.$J; -// var wdw = $J(window); -// var div = $J('
').addClass(this.defaultClasses).css({ -// 'position':'absolute', -// 'zIndex':this.zIndex, -// 'visibility':'hidden', -// 'left':wdw.scrollLeft()+'px', -// 'top':wdw.scrollTop()+'px', -// 'overflow':'auto', -// 'padding':'1ex' -// }); -// div.appendTo('body'); //necessary to properly display the div size -// if(content instanceof $J){ -// div.append(content); -// }else if(typeof content == 'string'){ -// div.html(""+content); -// }else{ -// div.css('overflow',''); //clear overflow -// var container = $J('
').css('overflow','auto'); -// var table = $J(''); -// container.append(table); -// var insert = function(e1,e2){ -// var t1 = $J('').append(t1).append(t2)); -// } -// var title, component; -// for(var k in content){ -// var val = content[k]; -// if(val instanceof Function){ -// component = $J('').html(k).attr('href','#').click(function(evt){ -// val(); -// return false; -// }); -// insert(component); -// }else if(typeof val == 'string' || typeof val == 'number'){ -// title = $J('').html(k); -// component = $('').attr('type','text').val(val).attr('name',k); -// insert(title,component); -// }else if(val === true || val === false){ -// title = $J('').html(k); -// component = $('').attr('type','checkbox').attr('name',k); -// if(val){ -// component.attr('checked','checked'); -// }else{ -// component.removeAttr('checked'); -// } -// insert(title,component); -// } -// } -// } -// this.getId(div); //actually, sets an id (see below) -// return div; -// }, -// -// showInfoDialog: function(content, timeInMSec){ -// var remove = this.remove; -// var popup = this.createPopupDiv(content) -// this.setBounds(popup,this.infoDialogMaxSizeInWindowPercent); -// if(timeInMSec){ -// this.show(popup, function(){ -// setTimeout(function(){ -// remove(content) -// },timeInMSec); -// }) -// }else{ -// var focus = this.setPopupBehaviourAndReturnFocusElement(popup, true); //remove on hide -// this.show(popup); -// focus.focus(); -// } -// }, -// -// getId: function(div){ -// if(!(div.attr('id'))){ -// div.attr('id','popup_'+(new Date().getTime())); -// } -// return div.attr('id'); -// }, -// /** -// * sets dialogDiv (a jQuery object or a DivDialog, see below) as popup mode. In other words, -// * scans each sub-element of dialogDiv and assigns to it a onblur event: when the subselemnt looses the focus and the focus -// * is NOT given to another dialogDiv subelement, hides or removes (depending on removeOnHide param) dialogDiv. -// * The workaround is quite tricky and maybe not well formed, as it uses a timeout function. However, any other implementation was trickier -// * and with potential drawbacks. Note that any subelement of dialogDiv is assigned a "focus" attribute with the current time in millisecs -// */ -// bindPopupClick: function(invoker, popupDiv, removeOnBlur){ -// if(invoker.is('a') || invoker.is('input[type=button]') || invoker.is('button') || -// invoker.is('input[type=submit]')){ -// var $J = this.$J; -// var focusElm = this.setPopupBehaviourAndReturnFocusElement(popupDiv, removeOnBlur ? this.remove(popupDiv) : this.hide(popupDiv)); -// var id = this.getId(popupDiv); -// var me = this; -// invoker.unbind('click').bind('click',function(evt){ -// var pup = $J('#'+id); //dont do anything if the popup is already visible -// if(pup.length && pup.is(':visible')){ -// focusElm.focus(); -// return false; -// } -//// me.setBounds.apply(me, [popupDiv,invoker]); -//// me.show.apply(me,[popupDiv, function(){focusElm.focus();}]); -// me.show.apply(me,[popupDiv, function(){me.setBounds.apply(me, [popupDiv,invoker]);focusElm.focus();}]); -// return false; -// }); -// } -// }, -// -// //binds every child of popup that is focusable to a blur event -// //TODO: TEST IT WITH OTHER BROWSERS!!!! if not working, manda tutto affanculo and use click events -// setPopupBehaviourAndReturnFocusElement: function(popup, callbackOnBlur){ -// popup.attr('tabindex',0); -// var $J = this.$J; -// var elementsWithFocus = $J(popup).find('textarea,a,input'); -// var doc = document; -// var ret = elementsWithFocus.length ? $J(elementsWithFocus[0]) : popup; -// elementsWithFocus = elementsWithFocus.add(popup); -// //build the attribute focus to recognize subelement of popup -// var focusid = 'popupfocus'+(new Date().getTime()); -// var me = this; -// //bind the blur to each focusable element: -// elementsWithFocus.each(function(i,e){ -// var ee = $J(e); -// ee.attr(focusid,'true'); -// ee.attr('tabindex',i+1); -// ee.blur(function(){ -// //wait 250msec to see if the focus has been given to another popup focusable element: if yes, do nothing -// //otherwise execute callback -// setTimeout(function(){ -// var v = doc.activeElement; -// //consolelog(v); -// if(v && $J(v).attr(focusid)){ -// return; -// } -// if(callbackOnBlur){ -// me.hide.apply(me,[popup,callbackOnBlur]); -// }else{ -// me.hide.apply(me,[popup]); -// } -// },200) -// }); //set here another time delay. 300 seems to be the good compromise between visual hide and safetiness that -// //meanwhile the focus has already been given to the next component -// }); -// return ret; -// }, -// -// -// hideAllPopups: function(){ -// this.hide(this.$J('div[name^="popup_"]')); -// }, -// -// //show(div, argumentsAsInJQueryShow) -// //creates a shwdow and shows div and shadow -// show: function(){ -// var div = arguments[0]; -// div.css({ -// 'display':'none', -// 'visibility':'visible' -// }); -// var body = this.$J('body'); -// if(!div.parent().length){ -// div.appendTo('body'); -// } -// //TODO: avoid clone and empty? -// var shadow = div.clone(true,true).empty().css({ -// 'backgroundColor':'#000', -// 'borderColor':'#000', -// 'zIndex':this.zIndex-1 -// }).removeAttr('tabindex').fadeTo(0,this.shadowOpacity); -// var id = this.getId(div); -// shadow.attr('id',id+'_shadow'); //for use in hide -// body.append(shadow); -// -// var both = div.add(shadow); -// -// var me = this; -// var placeShadow = function(){ -// var rect = me.getBounds.apply(me,[div]); -// shadow.css({ -// 'left':(rect.x + me.shadowOffset)+'px', -// 'top':(rect.y + me.shadowOffset)+'px', -// 'width':(rect.width)+'px', -// 'height':(rect.height)+'px' -// }); -// } -// //calling show with the specified arguments: -// var args = []; -// for(var i=1; ispaceBelow){ -// popupMaxSize.height = (spaceAbove-popupDiv.shadowoffset); -// popupOffset.top = invokerOffset.top - popupDiv.outerHeight(true); -// -// //p.css({'maxHeight':(spaceAbove-p.shadowoffset)+'px', 'top':rect.y+'px'}); -// }else{ -// popupMaxSize.height =(spaceBelow-popupDiv.shadowoffset); -// popupOffset.top = (invokerOffset.top+invokerOuterHeight); -// //p.css({'maxHeight':(spaceBelow-p.shadowoffset)+'px', 'top':(offs.top+height)+'px'}); -// } -// this.setMaxSize(popupDiv, popupMaxSize); -// this.setMinSize(popupDiv, { -// width: argument.outerWidth() -// }); -// this.offset(popupDiv, popupOffset); -// -// consolelog('maxSize'); -// consolelog(popupMaxSize); -// consolelog('minWidth'); -// consolelog(argument.outerWidth()); -// consolelog('offset'); -// consolelog(popupOffset); -// consolelog('maxWidth: '+popupDiv.css('maxWidth')+' maxHeight: '+popupDiv.css('maxHeight')+ -// ' width: '+popupDiv.css('width')+' height: '+popupDiv.css('height')+' left '+popupDiv.css('left')+' top '+popupDiv.css('top')); -// }, -// //returns a dictionary with x,y,width and height keys representing the -// //rectangle where jQueryElement lies. width and height are jQuery.width() and jQuery.height() respectively -// //if jQueryElement is missing, jQuery(window) is used -// //jQueryElement must be display!=none -// getBounds: function(jQueryElement){ -// var ret = { -// x:0, -// y:0, -// width:0, -// height:0 -// }; -// if(!jQueryElement){ -// jQueryElement = this.$J(window); -// } -// if(jQueryElement[0] === window){ -// ret.x = jQueryElement.scrollLeft(); -// ret.y = jQueryElement.scrollTop(); -// }else{ -// var offs = jQueryElement.offset(); -// ret.x = offs.left; -// ret.y = offs.top; -// } -// ret.width = jQueryElement.width(); -// ret.height = jQueryElement.height(); -// return ret; -// } -// -// -//}; - function PopupDiv(content){ var $J = this.$J; + //var wdw = $J(window); var div = $J('
').addClass(this.defaultClasses).css({ 'position':'absolute', @@ -1421,186 +1017,374 @@ function PopupDiv(content){ 'padding':'1ex', 'border':'1px solid #666' }); - var header = $J('
').css('float','right'); + var header = $J('
'); //.css('float','right'); var container = $J('
').css('overflow','auto'); var footer = $J('
'); div.append(header).append(container).append(footer); + //defining immediately the method getDiv (because it is used below) + this.getDiv = function(){ + return div; + } //div.appendTo('body'); //necessary to properly display the div size if(content instanceof $J){ container.append(content); }else if(typeof content == 'string'){ container.html(""+content); - }else{ - div.css('overflow',''); //clear overflow - var table = $J('
'); -// var t2 = $J(''); -// if(e1){ -// t1.append(e1); -// } -// if(e2){ -// t2.append(e2); -// } -// table.append($J('
'); - container.append(table); + } + // else if(content instanceof Array){ + // for(var k=0; k').attr('href','#').html(value).click( + // function(){ + // if(optionalCallbackOnClick){ + // optionalCallbackOnClick(value); + // } + // } + // ))})(content[k]); + // } + //} + else{ + var leftElements = $J([]); + var rightElements = $J([]); + var maxw = [0,0]; var insert = function(e1,e2){ - var t1 = $J('').append(t1).append(t2)); + var lineDiv = $J('
'); + if(!e2){ + e2=e1; + e1 = $J(''); + } + rightElements = rightElements.add(e2); + leftElements = leftElements.add(e1); + container.append(lineDiv.append(e1).append(e2)); + return lineDiv; } var title, component; + + var max = Math.max; //instantiate once + var lineDiv = undefined; + var needAlign = false; + var lineDivs = $J([]); for(var k in content){ var val = content[k]; - if(val instanceof Function){ - component = $J('').html(k).attr('href','#').click(function(evt){ - val(); - return false; - }); - insert(component); - }else if(typeof val == 'string' || typeof val == 'number'){ + //alert(k); + // if(val instanceof Function){ + // //alert('inserting anchor/function'); + // component = $J('').html(k).attr('href','#').click(function(evt){ + // val(); + // return false; + // }); + // lineDivs = lineDivs.add(insert(component)); + // maxw[1] = max(maxw[1],k.length); + // }else + if(typeof val == 'string' || typeof val == 'number'){ + //alert('inserting string/number'); title = $J('').html(k); + maxw[0] = max(maxw[0],k.length); + maxw[1] = max(maxw[1],val.length); component = $('').attr('type','text').val(val).attr('name',k); - insert(title,component); + lineDivs = lineDivs.add(insert(title,component)); + needAlign = true; }else if(val === true || val === false){ - title = $J('').html(k); - component = $('').attr('type','checkbox').attr('name',k); + //alert('inserting boolean'); + var id = this.getId()+"_checkbox"; + title = $('').attr('type','checkbox').attr('name',k).attr('id',id); if(val){ - component.attr('checked','checked'); + title.attr('checked','checked'); }else{ - component.removeAttr('checked'); + title.removeAttr('checked'); + } + component = $J('
'); - var t2 = $J(''); - if(e1){ - t1.append(e1); - } - if(e2){ - t2.append(e2); - } - table.append($J('