From: riccardo Date: Mon, 9 May 2011 14:44:41 +0000 (+0200) Subject: Some performance optimization (moved some methods to ptototype chain) X-Git-Tag: 1.1~232 X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=6564160545db4c6d7ac78f50b457ca0d48b62956;p=telemeta.git Some performance optimization (moved some methods to ptototype chain) -------------f This line and the following will be ignored -------------- modified: telemeta/htdocs/js/application.js telemeta/htdocs/js/locale.js telemeta/htdocs/timeside/src/playlist.js telemeta/htdocs/timeside/src/rulermarker.js telemeta/htdocs/timeside/src/timeside.js telemeta/templates/telemeta_default/home.html telemeta/templates/telemeta_default/mediaitem_detail.html unknown: telemeta/htdocs/js/soundmanager2-jsmin.js telemeta/htdocs/js/soundmanager2-nodebug.js telemeta/htdocs/swf/soundmanager2_debug.swf telemeta/htdocs/swf/soundmanager2_flash9_debug.swf telemeta/htdocs/timeside/skins/lab/img/empty.png --- diff --git a/telemeta/htdocs/js/application.js b/telemeta/htdocs/js/application.js index abba1314..7efd5ad8 100644 --- a/telemeta/htdocs/js/application.js +++ b/telemeta/htdocs/js/application.js @@ -729,7 +729,7 @@ function PopupDiv(){ p.focusable = false; p.fadInTime = 'fast', p.fadeOutTime = 0, - p.shadowOpacity = 0.3; + p.shadowOpacity = 0.25; p.zIndex = 10000; // p.listItemClass = ''; @@ -1544,21 +1544,21 @@ function PopupDiv(){ })(PopupDiv.prototype); -//default PopupDiv properties in telemeta -//PopupDiv.listItemClass = 'component_icon list_item icon_playlist'; -PopupDiv.shadowOffset = 4; -PopupDiv.popupClass = 'control component'; -PopupDiv.popupCss = { - 'border':'1px solid #666', - 'padding':'1ex' -}; -PopupDiv.okButtonTitle = 'Ok'; -PopupDiv.okButtonClass = 'component_icon button icon_ok'; -PopupDiv.closeButtonTitle = ''; -PopupDiv.closeButtonClass = 'markersdivDelete'; -PopupDiv.fadInTime = 'fast', - PopupDiv.fadeOutTime = 0, - PopupDiv.shadowOpacity = 0.3; +////default PopupDiv properties in telemeta +////PopupDiv.listItemClass = 'component_icon list_item icon_playlist'; +//PopupDiv.shadowOffset = 4; +//PopupDiv.popupClass = 'control component'; +//PopupDiv.popupCss = { +// 'border':'1px solid #666', +// 'padding':'1ex' +//}; +//PopupDiv.okButtonTitle = 'Ok'; +//PopupDiv.okButtonClass = 'component_icon button icon_ok'; +//PopupDiv.closeButtonTitle = ''; +//PopupDiv.closeButtonClass = 'markersdivDelete'; +//PopupDiv.fadInTime = 'fast', +// PopupDiv.fadeOutTime = 0, +// PopupDiv.shadowOpacity = 0.3; diff --git a/telemeta/htdocs/js/locale.js b/telemeta/htdocs/js/locale.js index 8c1486a1..c2de5388 100644 --- a/telemeta/htdocs/js/locale.js +++ b/telemeta/htdocs/js/locale.js @@ -1,3 +1,14 @@ +/** + * TimeSide - Web Audio Components + * Copyright (c) 2011 Parisson + * Author: Riccardo Zaccarelli + * License: GNU General Public License version 2.0 + */ + +/** + * Class for managing translations in telemeta. + */ + var localeStrings = { 'title': gettext('title'), 'description': gettext('description'), diff --git a/telemeta/htdocs/timeside/src/playlist.js b/telemeta/htdocs/timeside/src/playlist.js index 817ba68a..ed320d9e 100644 --- a/telemeta/htdocs/timeside/src/playlist.js +++ b/telemeta/htdocs/timeside/src/playlist.js @@ -1,3 +1,27 @@ +/** + * TimeSide - Web Audio Components + * Copyright (c) 2011 Parisson + * Author: Riccardo Zaccarelli + * License: GNU General Public License version 2.0 + */ + +/** + * Class for managing playlists in telemeta. + * Requires jQuery and PopupDiv + */ + +//default PopupDiv properties for playlists (mainly for css appearence) +PopupDiv.popupClass = 'control component'; +PopupDiv.popupCss = { + 'border':'1px solid #999', + 'padding':'1ex' +}; +PopupDiv.okButtonTitle = 'Ok'; +PopupDiv.okButtonClass = 'component_icon button icon_ok'; +PopupDiv.closeButtonTitle = ''; +PopupDiv.closeButtonClass = 'markersdivDelete'; +PopupDiv.defaultCloseOperation = 'remove'; +PopupDiv.focusable = true; var playlistUtils = { playlists : [], @@ -10,6 +34,7 @@ var playlistUtils = { }); }, + /*shows the popup for adding an item to the playlist*/ showAddToPlaylist: function(anchorElement,resourceType,objectId, optionalOkMessage){ var ar = []; @@ -25,8 +50,6 @@ var playlistUtils = { } var addFcn = this.addToPlaylist; new PopupDiv({ - defaultCloseOperation: 'remove', - focusable:true, invoker:anchorElement, content: ar, ok:function(data){ @@ -37,11 +60,11 @@ var playlistUtils = { callbackok = function(){ var p =new PopupDiv({ content : "
"+optionalOkMessage+"
", - defaultCloseOperation: 'remove' + focusable: false }); p.bind('show', function(){ - this.closeLater(2500) + this.closeLater(1500); }); p.show(); } @@ -66,10 +89,7 @@ var playlistUtils = { var playlist = this; new PopupDiv({ 'content':dd, - focusable:true, invoker:anchorElement, - defaultCloseOperation:'remove', - showclose:true, showok:true, ok:function(data){ if(!data[t] && !data[d]){ diff --git a/telemeta/htdocs/timeside/src/rulermarker.js b/telemeta/htdocs/timeside/src/rulermarker.js index 6e516074..1e3803b9 100644 --- a/telemeta/htdocs/timeside/src/rulermarker.js +++ b/telemeta/htdocs/timeside/src/rulermarker.js @@ -1,3 +1,15 @@ +/** + * TimeSide - Web Audio Components + * Copyright (c) 2011 Parisson + * Author: Riccardo Zaccarelli and Olivier Guilyardi + * License: GNU General Public License version 2.0 + */ + +/** + * Class representing a RulerMarker in TimesideUI + * Requires jQuery and all associated player classes + */ + var RulerMarker = TimesideClass.extend({ init: function(rulerLayout, viewer, className) { @@ -79,40 +91,150 @@ var RulerMarker = TimesideClass.extend({ return label; } - - //CODE HERE BELOW IS EXECUTED ONLY IF THE MARKER HAS CAN MOVE IMPLEMENTED. + + //CODE HERE BELOW IS EXECUTED ONLY IF THE MARKER HAS CAN MOVE IMPLEMENTED (see Ruler???). //Otherwise, no mouse event can call these methods //re-implement function move - var position = 0; - var relativePosition = 0; //position in percentage of container width, set it in move and use it in refreshPosition - - var mRound = Math.round; //instantiate the functio once +// var position = 0; +// var relativePosition = 0; //position in percentage of container width, set it in move and use it in refreshPosition +// +// var mRound = Math.round; //instantiate the functio once + +// this.move = function(pixelOffset) { +// var width = viewer.width(); +// if (position != pixelOffset) { +// if (pixelOffset < 0) { +// pixelOffset = 0; +// } else if (pixelOffset >= width) { +// pixelOffset = width - 1; +// } +// nodes.each(function(i, node) { +// $J(node).css('left', mRound(node.originalPosition + pixelOffset) + 'px'); +// }); +// position = pixelOffset; +// this.refreshLabelPosition(width); +// //store relative position (see refreshPosition below) +// relativePosition = pixelOffset == width-1 ? 1 : pixelOffset/width; +// } +// return this; +// }; +// +// this.refreshLabelPosition = function(optionalContainerWidth){ +// if(!(optionalContainerWidth)){ +// optionalContainerWidth = viewer.width(); +// } +// var width = optionalContainerWidth; +// var pixelOffset = position; +// var labelWidth = label.outerWidth(); //consider margins and padding //label.width(); +// var labelPixelOffset = pixelOffset - labelWidth / 2; +// if (labelPixelOffset < 0){ +// labelPixelOffset = 0; +// }else if (labelPixelOffset + labelWidth > width){ +// labelPixelOffset = width - labelWidth; +// } +// label.css({ +// left: mRound(labelPixelOffset) + 'px' +// }); +// +// }; +// +// //function called on ruler.resize. Instead of recreating all markers, simply redraw them +// this.refreshPosition = function(){ +// var width = viewer.width(); +// //store relativePosition: +// var rp = relativePosition; +// this.move(mRound(relativePosition*width)); +// //reset relative position, which does not have to change +// //but in move might have been rounded: +// relativePosition = rp; +// //last thing: resize the vertical line. +// //Assumptions (having a look at the web page element with a debugger and the code above +// //which uses jsgraphics): +// //The line is the first item (see drawLine above) +// //not only the height, but also the height of the clip property must be set +// var h = viewer.height(); +// $J(nodes[0]).css({ +// 'height':h+'px', +// 'clip': 'rect(0px 1px '+h+'px 0px)' +// }); +// } +// +// this.remove = function() { +// painter.clear(); +// $J(painter.cnv).remove(); +// label.remove(); +// return this; +// }; + + this.getViewer = function(){ + return viewer; + } + this.getPainter = function(){ + return painter; + } + + this.positionInPixels = 0; + this.positionAsViewerRatio = 0; + + }, + + //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) { + var label = this.getLabel(); + if (label) { + text += ''; + var labelWidth = this._textWidth(text, this.getFontSize()) + 10; + var oldWidth = label.width(); + if (oldWidth != labelWidth) { + label.css({ + width: labelWidth+'px' + }); + } + label.find('span').html(text); + if(oldWidth != labelWidth && optionalUpdateLabelPosition){ + consolelog('refreshing label position'); + this.refreshLabelPosition(); + } + } + return this; + }, + + + getNodes: function(){ + return this.$J(this.getPainter().cnv).children(); + }, + //these methods are executed only if marker is movable (see Ruler.js) - this.move = function(pixelOffset) { - var width = viewer.width(); - if (position != pixelOffset) { + move : function(pixelOffset) { + var width = this.getViewer().width(); + if (this.positionInPixels != pixelOffset) { if (pixelOffset < 0) { pixelOffset = 0; } else if (pixelOffset >= width) { pixelOffset = width - 1; } + var nodes = this.getNodes(); + var $J = this.$J; + var mRound = this.mRound; nodes.each(function(i, node) { $J(node).css('left', mRound(node.originalPosition + pixelOffset) + 'px'); }); - position = pixelOffset; + this.positionInPixels = pixelOffset; this.refreshLabelPosition(width); //store relative position (see refreshPosition below) - relativePosition = pixelOffset == width-1 ? 1 : pixelOffset/width; + this.positionAsViewerRatio = pixelOffset == width-1 ? 1 : pixelOffset/width; } return this; - }; + }, - this.refreshLabelPosition = function(optionalContainerWidth){ + refreshLabelPosition : function(optionalContainerWidth){ if(!(optionalContainerWidth)){ - optionalContainerWidth = viewer.width(); + optionalContainerWidth = this.getViewer().width(); } + var label = this.getLabel(); var width = optionalContainerWidth; - var pixelOffset = position; + var pixelOffset = this.positionInPixels; var labelWidth = label.outerWidth(); //consider margins and padding //label.width(); var labelPixelOffset = pixelOffset - labelWidth / 2; if (labelPixelOffset < 0){ @@ -121,60 +243,43 @@ var RulerMarker = TimesideClass.extend({ labelPixelOffset = width - labelWidth; } label.css({ - left: mRound(labelPixelOffset) + 'px' + left: this.mRound(labelPixelOffset) + 'px' }); - }; + }, //function called on ruler.resize. Instead of recreating all markers, simply redraw them - this.refreshPosition = function(){ - var width = viewer.width(); + refreshPosition : function(){ + var width = this.getViewer().width(); //store relativePosition: - var rp = relativePosition; - this.move(mRound(relativePosition*width)); + var rp = this.positionAsViewerRatio; + this.move(this.mRound(this.positionAsViewerRatio*width)); //reset relative position, which does not have to change //but in move might have been rounded: - relativePosition = rp; + this.positionAsViewerRatio = rp; //last thing: resize the vertical line. //Assumptions (having a look at the web page element with a debugger and the code above //which uses jsgraphics): //The line is the first item (see drawLine above) //not only the height, but also the height of the clip property must be set - var h = viewer.height(); + var h = this.getViewer().height(); + var nodes = this.getNodes(); + var $J = this.$J; $J(nodes[0]).css({ 'height':h+'px', 'clip': 'rect(0px 1px '+h+'px 0px)' }); - } + }, - this.remove = function() { + remove : function() { + var painter = this.getPainter(); + var label = this.getLabel(); painter.clear(); $J(painter.cnv).remove(); label.remove(); return this; - }; - }, + }, - //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) { - var label = this.getLabel(); - if (label) { - text += ''; - var labelWidth = this._textWidth(text, this.getFontSize()) + 10; - var oldWidth = label.width(); - if (oldWidth != labelWidth) { - label.css({ - width: labelWidth+'px' - }); - } - label.find('span').html(text); - if(oldWidth != labelWidth && optionalUpdateLabelPosition){ - consolelog('refreshing label position'); - this.refreshLabelPosition(); - } - } - return this; - } + mRound: Math.round }); diff --git a/telemeta/htdocs/timeside/src/timeside.js b/telemeta/htdocs/timeside/src/timeside.js index 7a1f9915..16b6bb0c 100644 --- a/telemeta/htdocs/timeside/src/timeside.js +++ b/telemeta/htdocs/timeside/src/timeside.js @@ -1,9 +1,14 @@ /** * TimeSide - Web Audio Components - * Author: Riccardo Zaccarelli and Olivier Guilyardi + * Copyright (c) 2011 Parisson + * Author: Riccardo Zaccarelli and Olivier Guilyardi * License: GNU General Public License version 2.0 */ +/** + * Base class defining classes for TimesideUI + */ + /* Simple JavaScript Inheritance * By John Resig http://ejohn.org/ * MIT Licensed. @@ -236,13 +241,20 @@ var TimesideClass = Class.extend({ //the map for listeners. Must be declared in the init as it's private and NOT shared by all instances //(ie, every instance has its own copy) - var listenersMap={}; + this.listenersMap={}; //follows jquery bind. Same as adding a listener for a key - this.bind = function(key, callback, optionalThisArgInCallback){ + + }, + + /** + *methods defining listeners, events fire and bind: + */ + bind : function(key, callback, optionalThisArgInCallback){ if(!(callback && callback instanceof Function)){ this.debug('cannot bind '+key+' to callback: the latter is null or not a function'); return; } + var listenersMap = this.listenersMap; var keyAlreadyRegistered = (key in listenersMap); if(!keyAlreadyRegistered){ listenersMap[key] = []; @@ -251,18 +263,22 @@ var TimesideClass = Class.extend({ callback:callback, optionalThisArgInCallback:optionalThisArgInCallback }); - }; - this.unbind = function(){ + }, + unbind : function(){ + var listenersMap = this.listenersMap; if(arguments.length>0){ var key = arguments[0]; if(key in listenersMap){ delete listenersMap[key]; } }else{ - listenersMap={}; + for(key in listenersMap){ + delete listenersMap[key]; + } } - }; - this.fire = function(key, dataArgument){ + }, + fire : function(key, dataArgument){ + var listenersMap = this.listenersMap; if(!(key in listenersMap)){ this.debug(key+' fired but no binding associated to it'); return; @@ -277,8 +293,7 @@ var TimesideClass = Class.extend({ obj.callback(dataArgument); } } - }; - }, + }, /* creates all elements in skeleton and appends them in container. Returns * the jQuery object representing all elements created diff --git a/telemeta/templates/telemeta_default/home.html b/telemeta/templates/telemeta_default/home.html index 518f1c71..6b2ba4c0 100644 --- a/telemeta/templates/telemeta_default/home.html +++ b/telemeta/templates/telemeta_default/home.html @@ -6,12 +6,9 @@ @@ -21,27 +18,27 @@ a.unbind('click').click(function(){playlistUtils.showAdd(a);}); {% block content %}
-{% block modules %} -{% include "telemeta/inc/module_revisions.html" %} -{% endblock %} + {% block modules %} + {% include "telemeta/inc/module_revisions.html" %} + {% endblock %}
-

{% trans "Playlists" %}

- -{% trans "Add" %} - {% for playlist in playlists %} - - - - - -
{{ playlist.playlist.title }} - CSV Collections - CSV Items - {% trans "Delete" %} -
- +

{% trans "Playlists" %}

+ + {% trans "Add" %} + {% for playlist in playlists %} + + + + + +
{{ playlist.playlist.title }} + CSV Collections + CSV Items + {% trans "Delete" %} +
+ @@ -52,47 +49,47 @@ a.unbind('click').click(function(){playlistUtils.showAdd(a);}); - + {% for resource in playlist.resources %} - + - {% endfor %} + {% endfor %}
{% trans "Title" %}{% trans "Sound" %} {% trans "Action" %}
- {% if resource.type == "item" and not resource.element == None %} - {{ resource.element }} - {% endif %} - {% if resource.type == "collection" and not resource.element == None %} - {{ resource.element }} - {% endif %} - {% if resource.type == "marker" and not resource.element == None %} - {{ resource.element }} - {% endif %} - {% if resource.element == None %}{% trans "deleted" %}{% endif %} + {% if resource.type == "item" and not resource.element == None %} + {{ resource.element }} + {% endif %} + {% if resource.type == "collection" and not resource.element == None %} + {{ resource.element }} + {% endif %} + {% if resource.type == "marker" and not resource.element == None %} + {{ resource.element }} + {% endif %} + {% if resource.element == None %}{% trans "deleted" %}{% endif %} {{ resource.type }} {{ resource.element.public_id }} {{ resource.element.apparent_collector }} - {% if resource.element.recorded_from_date %} + {% if resource.element.recorded_from_date %} {{ resource.element.recorded_from_date.year }} {% if resource.element.recorded_to_date and not resource.element.recorded_to_date.year|equals:resource.element.recorded_from_date.year %} - - {{ resource.element.recorded_to_date.year }} + - {{ resource.element.recorded_to_date.year }} + {% endif %} {% endif %} - {% endif %} {% if resource.element.file or resource.element.has_mediafile %} - yes + yes {% endif %} - +
- {% endfor %} + {% endfor %}
{% endblock %} diff --git a/telemeta/templates/telemeta_default/mediaitem_detail.html b/telemeta/templates/telemeta_default/mediaitem_detail.html index 8ab3048e..9a3bd778 100644 --- a/telemeta/templates/telemeta_default/mediaitem_detail.html +++ b/telemeta/templates/telemeta_default/mediaitem_detail.html @@ -37,9 +37,6 @@ p.showAddToPlaylist(anchor,'item','{{item.public_id}}',gettrans('item added to the selected playlist'));return false; }); -// anchor.click(function(evtObj_){ -// p.showPopupAddToPlaylist(evtObj_,'item','{{item.public_id}}',gettrans('item added to the selected playlist'));return false; -// }); } {% endif %} }; @@ -55,7 +52,7 @@ var _sound_manager_loaded=false; var _jQuery_loaded = false; - jQuery(document).ready(function(){ + jQuery(window).ready(function(){ _jQuery_loaded=true; if(_sound_manager_loaded){ loadScripts(scripts, function(){loadPlayer('{% url telemeta-item-analyze-xml item.public_id %}',$('.ts-wave a').attr('href'));setupPlaylist()});