p.focusable = false;\r
p.fadInTime = 'fast',\r
p.fadeOutTime = 0,\r
- p.shadowOpacity = 0.3;\r
+ p.shadowOpacity = 0.25;\r
p.zIndex = 10000;\r
// p.listItemClass = '';\r
\r
\r
})(PopupDiv.prototype);\r
\r
-//default PopupDiv properties in telemeta\r
-//PopupDiv.listItemClass = 'component_icon list_item icon_playlist';\r
-PopupDiv.shadowOffset = 4;\r
-PopupDiv.popupClass = 'control component';\r
-PopupDiv.popupCss = {\r
- 'border':'1px solid #666',\r
- 'padding':'1ex'\r
-};\r
-PopupDiv.okButtonTitle = 'Ok';\r
-PopupDiv.okButtonClass = 'component_icon button icon_ok';\r
-PopupDiv.closeButtonTitle = '';\r
-PopupDiv.closeButtonClass = 'markersdivDelete';\r
-PopupDiv.fadInTime = 'fast',\r
- PopupDiv.fadeOutTime = 0,\r
- PopupDiv.shadowOpacity = 0.3;\r
+////default PopupDiv properties in telemeta\r
+////PopupDiv.listItemClass = 'component_icon list_item icon_playlist';\r
+//PopupDiv.shadowOffset = 4;\r
+//PopupDiv.popupClass = 'control component';\r
+//PopupDiv.popupCss = {\r
+// 'border':'1px solid #666',\r
+// 'padding':'1ex'\r
+//};\r
+//PopupDiv.okButtonTitle = 'Ok';\r
+//PopupDiv.okButtonClass = 'component_icon button icon_ok';\r
+//PopupDiv.closeButtonTitle = '';\r
+//PopupDiv.closeButtonClass = 'markersdivDelete';\r
+//PopupDiv.fadInTime = 'fast',\r
+// PopupDiv.fadeOutTime = 0,\r
+// PopupDiv.shadowOpacity = 0.3;\r
\r
\r
\r
+/**
+ * TimeSide - Web Audio Components
+ * Copyright (c) 2011 Parisson
+ * Author: Riccardo Zaccarelli <riccardo.zaccarelli gmail.com>
+ * License: GNU General Public License version 2.0
+ */
+
+/**
+ * Class for managing translations in telemeta.
+ */
+
var localeStrings = {
'title': gettext('title'),
'description': gettext('description'),
+/**
+ * TimeSide - Web Audio Components
+ * Copyright (c) 2011 Parisson
+ * Author: Riccardo Zaccarelli <riccardo.zaccarelli gmail.com>
+ * 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 : [],
});
},
+
/*shows the popup for adding an item to the playlist*/
showAddToPlaylist: function(anchorElement,resourceType,objectId, optionalOkMessage){
var ar = [];
}
var addFcn = this.addToPlaylist;
new PopupDiv({
- defaultCloseOperation: 'remove',
- focusable:true,
invoker:anchorElement,
content: ar,
ok:function(data){
callbackok = function(){
var p =new PopupDiv({
content : "<div class='component_icon icon_ok'>"+optionalOkMessage+"</div>",
- defaultCloseOperation: 'remove'
+ focusable: false
});
p.bind('show', function(){
- this.closeLater(2500)
+ this.closeLater(1500);
});
p.show();
}
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]){
+/**
+ * TimeSide - Web Audio Components
+ * Copyright (c) 2011 Parisson
+ * Author: Riccardo Zaccarelli <riccardo.zaccarelli gmail.com> and Olivier Guilyardi <olivier samalyse com>
+ * 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) {
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){
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
});
/**
* TimeSide - Web Audio Components
- * Author: Riccardo Zaccarelli and Olivier Guilyardi <olivier samalyse com>
+ * Copyright (c) 2011 Parisson
+ * Author: Riccardo Zaccarelli <riccardo.zaccarelli gmail.com> and Olivier Guilyardi <olivier samalyse com>
* 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.
//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] = [];
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;
obj.callback(dataArgument);
}
}
- };
- },
+ },
/* creates all elements in skeleton and appends them in container. Returns
* the jQuery object representing all elements created
<script src="{% url telemeta-timeside "src/playlist.js" %}" type="text/javascript"></script>
<script>
jQuery(window).ready(function(){
-// jQuery('#_new_playlist').bind("click.bla",function(e){var p = popup;
-// return p.show(p.createDivDialog({'title':'','description':''}, function(data){playlistUtils.add(data)}),e);
-// });
-var a = jQuery('#_new_playlist');
-a.unbind('click').click(function(){playlistUtils.showAdd(a);});
- //playlistUtils.bindToNewPlaylistAction(jQuery('#_new_playlist'));
+
+ var a = jQuery('#_new_playlist');
+ a.unbind('click').click(function(){playlistUtils.showAdd(a);});
});
</script>
{% block content %}
<div class="module-set" style="width: 33%">
-{% block modules %}
-{% include "telemeta/inc/module_revisions.html" %}
-{% endblock %}
+ {% block modules %}
+ {% include "telemeta/inc/module_revisions.html" %}
+ {% endblock %}
</div>
<div class="home-description">
-<h1><img src="{% url telemeta-images "playlist_title.png" %}" style="vertical-align:middle" /> {% trans "Playlists" %}</h1>
-<a href=# id="_new_playlist" style="float:right" class="component_icon button icon_add">
-{% trans "Add" %}</a>
- {% for playlist in playlists %}
- <table class="listing" style="width:100%;margin-top: 3em">
- <tr>
- <td style="border-bottom:1px solid #6A0307;color:#6A0307;font-size: 100%">{{ playlist.playlist.title }}</td>
- <td style="width:66ex; padding-right: 0; border-bottom:1px solid #6A0307; text-align:right">
- <a href="{% url telemeta-playlist-csv-export playlist.playlist.public_id 'collections' %}" class="component_icon button icon_csv">CSV Collections</a>
- <a href="{% url telemeta-playlist-csv-export playlist.playlist.public_id 'items' %}" class="component_icon button icon_csv">CSV Items</a>
- <a href="#" id="{{playlist.playlist.public_id}}" onclick="playlistUtils.remove(this.id);return false;" class="component_icon button icon_cancel">{% trans "Delete" %}</a>
- </td>
- </tr>
- </table>
-
+
<h1><img src="{% url telemeta-images "playlist_title.png" %}" style="vertical-align:middle" /> {% trans "Playlists" %}</h1>
+
<a href=# id="_new_playlist" style="float:right" class="component_icon button icon_add">
+ {% trans "Add" %}</a>
+ {% for playlist in playlists %}
+
<table class="listing" style="width:100%;margin-top: 3em">
+ <tr>
+ <td style="border-bottom:1px solid #6A0307;color:#6A0307;font-size: 100%">{{ playlist.playlist.title }}</td>
+ <td style="width:66ex; padding-right: 0; border-bottom:1px solid #6A0307; text-align:right">
+
<a href="{% url telemeta-playlist-csv-export playlist.playlist.public_id 'collections' %}" class="component_icon button icon_csv">CSV Collections</a>
+
<a href="{% url telemeta-playlist-csv-export playlist.playlist.public_id 'items' %}" class="component_icon button icon_csv">CSV Items</a>
+
<a href="#" id="{{playlist.playlist.public_id}}" onclick="playlistUtils.remove(this.id);return false;" class="component_icon button icon_cancel">{% trans "Delete" %}</a>
+ </td>
+ </tr>
+ </table>
+
<table class="listing" width="100%">
<tr>
<th class="highlight">{% trans "Title" %}</th>
<th>{% trans "Sound" %}</th>
<th>{% trans "Action" %}</th>
</tr>
-
+
{% for resource in playlist.resources %}
<tr {% if not forloop.counter0|divisibleby:"2" %}class="odd"{% endif %}>
<td>
- {% if resource.type == "item" and not resource.element == None %}
- <a href="{% url telemeta-item-detail resource.element.public_id %}">{{ resource.element }}</a>
- {% endif %}
- {% if resource.type == "collection" and not resource.element == None %}
- <a href="{% url telemeta-collection-detail resource.element.public_id %}">{{ resource.element }}</a>
- {% endif %}
- {% if resource.type == "marker" and not resource.element == None %}
- <a href="{% url telemeta-item-detail-marker resource.element.public_id %}">{{ resource.element }}</a>
- {% endif %}
- {% if resource.element == None %}{% trans "deleted" %}{% endif %}
+ {% if resource.type == "item" and not resource.element == None %}
+
<a href="{% url telemeta-item-detail resource.element.public_id %}">{{ resource.element }}</a>
+ {% endif %}
+ {% if resource.type == "collection" and not resource.element == None %}
+
<a href="{% url telemeta-collection-detail resource.element.public_id %}">{{ resource.element }}</a>
+ {% endif %}
+ {% if resource.type == "marker" and not resource.element == None %}
+
<a href="{% url telemeta-item-detail-marker resource.element.public_id %}">{{ resource.element }}</a>
+ {% endif %}
+ {% if resource.element == None %}{% trans "deleted" %}{% endif %}
</td>
<td>{{ resource.type }}</td>
<td>
{{ resource.element.public_id }}
</td>
<td>{{ resource.element.apparent_collector }}</td>
-
+
<td>
- {% 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 %}
</td>
<td align="center" style="vertical-align:middle">
{% if resource.element.file or resource.element.has_mediafile %}
-
<img src="images/ok.png" alt="yes" style="vertical-align:middle" /></a>
+ <img src="images/ok.png" alt="yes" style="vertical-align:middle" /></a>
{% endif %}
</td>
<td style="vertical-align:middle">
- <a href="#" onclick="playlistUtils.removeResource('{{resource.public_id}}');return false;" class="component_icon button icon_cancel" style="padding: 4px 12px;"></a>
+
<a href="#" onclick="playlistUtils.removeResource('{{resource.public_id}}');return false;" class="component_icon button icon_cancel" style="padding: 4px 12px;"></a>
</td>
</tr>
- {% endfor %}
+ {% endfor %}
</table>
- {% endfor %}
+ {% endfor %}
</div>
{% endblock %}
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 %}
};
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()});
projects / telemeta.git / commitdiff