}
this.markers = markers;
},
- //static variables to retireve the Marker Html Elements (MHE)
+ //static constant variables to retireve the Marker Html Elements (MHE)
//to be used with the function below getHtmElm, eg:
//getHtmElm(marker, this.MHE_OFFSET_LABEL)
MHE_INDEX_LABEL:'indexLabel',
MHE_EDIT_BUTTON:'editButton',
MHE_OK_BUTTON:'okButton',
MHE_DELETE_BUTTON:'deleteButton',
+ //static constant variables for edit mode:
+ EDIT_MODE_SAVED:0,
+ EDIT_MODE_EDIT_TEXT:1,
+ EDIT_MODE_MARKER_MOVED:2,
+
//function to retreve html elements in the edit div associated with marker:
getHtmElm: function(marker, elementName){
//return marker.div.children('[name="'+elementName+'"]');
return marker.div.find('*[name="'+elementName+'"]');
},
- toArray: function() {
- return [].concat(this.markers);
- },
-
- byIndex: function(index) {
- return this.markers[index];
- },
+ // toArray: function() {
+ // return [].concat(this.markers);
+ // },
+ //
+ // byIndex: function(index) {
+ // return this.markers[index];
+ // },
+ //
+ //used by controller._onMarkerMove
byId: function(id) {
var marker = null;
for (var i in this.markers) {
desc: description,
isNew: true
};
- this.add(marker);
- //fire the click event on the edit button (anchor)
- var eB =
- this.getHtmElm(marker, this.MHE_EDIT_BUTTON);
- eB.trigger('click');
+ this.add(marker, this.EDIT_MODE_EDIT_TEXT);
},
-
- add: function(marker) {
+ //editMode is optional, in case it defaults to
+ //EDIT_MODE_SAVED:0
+ add: function(marker, editMode) {
var idx = this.insertionIndex(marker);
//adding the div
marker.div = this.createDiv(marker,idx);
});
this.fireRefreshLabels(idx+1,this.markers.length);
//this._reorder(marker.offset);
+ this.fireEditMode(marker,editMode);
return marker;
},
}
var oldIndex = this.indexOf(marker);
marker.offset = offset;
- marker.offset = offset;
+ //marker.offset = offset;
var newIndex = this.insertionIndex(marker);
//change marker time
//$($( marker.div.children()[0] ).children()[1]).html(this.formatMarkerOffset(offset));
if(newIndex>oldIndex){
newIndex--;
}
- //trigger the edit button in order to let appear the ok button to save the new offset
- //must be done here because we might return in a moment
- this.getHtmElm(marker, this.MHE_EDIT_BUTTON).trigger('click');
+ //fire edit mode
+ this.fireEditMode(marker, this.EDIT_MODE_MARKER_MOVED);
+
if(newIndex==oldIndex){
return;
}
//$($( marker.div.children()[1] )).focus();
//this.getHtmElm(marker,this.MHE_DESCRIPTION_TEXT).focus();
- this.getHtmElm(marker,this.MHE_DESCRIPTION_TEXT).select();
+ //this.getHtmElm(marker,this.MHE_DESCRIPTION_TEXT).select();
var i1= Math.min(oldIndex,newIndex);
var i2= Math.max(oldIndex,newIndex);
//var mrks = this.markers;
var div = this.divContainer;
var markerDiv;
if(div){
- var indexLabel, descriptionText, offsetLabel, closeButton, okbutton, header, editButton, descriptionLabel;
+ var indexLabel, descriptionText, offsetLabel, closeButton, okButton, header, editButton, descriptionLabel;
var margin = '1ex';
//index label
});
//ok button
.attr("name", this.MHE_OK_BUTTON)
.attr('title','save marker description and offset')
.css({
markerDiv = $J('<div/>')
.append(header)
.append(descriptionText)
- .append(okbutton)
+ .append(okButton)
.css({
paddingBottom:'1em',
paddingTop:'1ex',
//ACTIONS TO BUTTONS:
////first define this keyword inside functions
var klass = this;
+ //reference to fireEditMode
+ var func_fem = this.fireEditMode;
+ var editModeEditText = this.EDIT_MODE_EDIT_TEXT;
//action for edit
editButton.unbind('click').click( function(){
- marker.desc = descriptionText.val();
- editButton.hide('fast');
- descriptionText.show(400, function(){this.select();});
- descriptionLabel.hide(); //without arguments, otherwise alignement problems arise )in chrome)
- okbutton.show('fast');
+ func_fem.apply(klass,[marker,editModeEditText,editButton, descriptionText,
+ descriptionLabel, okButton]);
});
- // ok button
- //reference the send function (to be passed below):
- var send = this.sendHTTP;
- //reference to setLabelDescription
- var sld = this.setLabelDescription;
- //set the ok function
- //we clear all the click event handlers from ok and assign a new one:
- okbutton.unbind('click').click( function(){
- marker.desc = descriptionText.val();
- descriptionLabel.attr('title',marker.desc);
- editButton.show(); //we cannot show it fast because the sld function below needs
- //the edit button displayed to calculate the size. Without argument the editbutton
- //is shown immediately
- descriptionLabel.show(); //same as aboe: without arguments
- descriptionText.hide('fast');
- okbutton.hide('fast');
- send(marker);
- sld.apply(klass,[marker]);
+ //action for ok button
+ var editModeSaved = this.EDIT_MODE_SAVED;
+ var func_send = this.sendHTTP;
+ okButton.unbind('click').click( function(){
+ if(marker.desc !== descriptionText.val()){ //strict equality needed. See note below
+ marker.desc = descriptionText.val();
+ func_send(marker);
+ }
+ func_fem.apply(klass,[marker,editModeSaved,editButton, descriptionText,
+ descriptionLabel, okButton]);
});
//action for removing
return markerDiv;
},
+ //sets the edit mode in the div associated to marker. Last 4 arguments are optional
+ fireEditMode: function(marker, editMode, editButton, descriptionText,
+ descriptionLabel, okButton){
+ var e = this.getHtmElm;
+ if(editButton == undefined){
+ editButton = e(marker,this.MHE_EDIT_BUTTON);
+ }
+ if(descriptionLabel == undefined){
+ descriptionLabel = e(marker,this.MHE_DESCRIPTION_LABEL);
+ }
+ if(descriptionText == undefined){
+ descriptionText = e(marker,this.MHE_DESCRIPTION_TEXT);
+ }
+ if(okButton == undefined){
+ okButton = e(marker,this.MHE_OK_BUTTON);
+ }
+ var speed = 400; //fast is 200 slow is 600 (see jQuery help)
+// var func_fem = this.fireEditMode;
+// var func_send = this.sendHTTP;
+ var klass = this;
+ //var editModeSaved = this.EDIT_MODE_SAVED;
+ if(editMode == this.EDIT_MODE_EDIT_TEXT){ //edit text
+ descriptionLabel.hide(); //without arguments, otherwise alignement problems arise (in chrome)
+ editButton.hide(speed);
+ descriptionText.show(speed, function(){
+ this.select();
+ });
+ okButton.show(speed);
+
+// okButton.unbind('click').click( function(){
+// if(marker.desc !== descriptionText.val()){ //strict equality needed. See note below
+// marker.desc = descriptionText.val();
+// func_send(marker);
+// }
+// func_fem.apply(klass,[marker,editModeSaved,editButton, descriptionText,
+// descriptionLabel, okButton]);
+// });
+ }else if(editMode == this.EDIT_MODE_MARKER_MOVED){
+ editButton.show(speed, function(){
+ descriptionLabel.show();
+ });
+ //if then a user types the edit button, this function is called with
+ //editMode=1 (this.EDIT_MODE_EDIT_TEXT). Which means (see okbutton click binding above) marker will be saved
+ //ONLY if text is different from marker.desc. However, as the offset has changed we want to
+ //save IN ANY CASE, so we set marker.desc undefined. This way, text will be always different and
+ //we will save the marker in any case
+ marker.desc = undefined;
+ descriptionText.hide(speed);
+ okButton.show(speed);
+// okButton.unbind('click').click( function(){
+// func_send(marker);
+// func_fem.apply(klass,[marker,editModeSaved,editButton, descriptionText,
+// descriptionLabel, okButton]);
+// });
+ }else if(editMode == this.EDIT_MODE_SAVED){
+ var function_sld = klass.setLabelDescription;
+ editButton.show(speed, function(){
+ function_sld.apply(klass,[marker]);
+ descriptionLabel.show();
+ });
+ descriptionText.hide(speed);
+ okButton.hide(speed);
+ }
+ },
+
+// fireMarkerMoved: function(marker){
+// marker.desc = descriptionText.val();
+// editButton.hide('fast');
+// descriptionText.show(400, function(){
+// this.select();
+// });
+// descriptionLabel.hide(); //without arguments, otherwise alignement problems arise )in chrome)
+// okbutton.show('fast');
+// },
+
setLabelDescription: function(marker){
var mDiv = marker.div;
var e = this.getHtmElm;
load_player({{ item.approx_duration.as_seconds }});\r
</script>\r
\r
+<!-- script for tabs-->\r
+<script type="text/javascript">\r
+ // $(document).ready(function() {\r
+ //\r
+ // //When page loads...\r
+ // $(".tab_content").hide(); //Hide all content\r
+ // $("ul.tabs li:first").addClass("active").show(); //Activate first tab\r
+ // $(".tab_content:first").show(); //Show first tab content\r
+ //\r
+ // //On Click Event\r
+ // $("ul.tabs li").click(function() {\r
+ //\r
+ // $("ul.tabs li").removeClass("active"); //Remove any "active" class\r
+ // $(this).addClass("active"); //Add "active" class to selected tab\r
+ // $(".tab_content").hide(); //Hide all tab content\r
+ //\r
+ // var activeTab = $(this).find("a").attr("href");\r
+ // //Find the href attribute value to identify the active tab + content\r
+ // $(activeTab).fadeIn(); //Fade in the active ID content\r
+ // return false;\r
+ // });\r
+ //\r
+ // });\r
+ $(document).ready(function() {\r
+\r
+ //When page loads...\r
+ //$(".tab_content").hide(); //Hide all content\r
+\r
+ var h1 = '5ex';\r
+ var h2 = '4ex';\r
+ var w = '10ex';\r
+ var bottom='0px';\r
+\r
+ $("#tabs_container").css({'position':'relative','height':h1});\r
+\r
+ var tabs = $('a[class^="tab_"]');\r
+\r
+ tabs.css('position','absolute');\r
+ tabs.css('height',h2);\r
+ //tabs.css('zIndex','10');\r
+ tabs.css('top','1ex');\r
+ tabs.css('bottom',bottom);\r
+ tabs.css('width',w);\r
+ tabs.css('textAlign','center');\r
+ //tabs.css('backgroundColor','#ffffff');\r
+\r
+ var tabA = $(tabs[0]);\r
+ var tabM = $(tabs[1]);\r
+\r
+ tabM.css('left',w);\r
+\r
+ tabA.click(function() {\r
+ tabA.removeClass("tab_unselected").addClass("tab_selected");\r
+ tabM.removeClass("tab_selected").addClass("tab_unselected");\r
+ $("#"+tabA.attr("name")).show('fast');\r
+ $("#"+tabM.attr("name")).hide();\r
+\r
+ });\r
+\r
+ tabM.click(function() {\r
+ tabM.removeClass("tab_unselected").addClass("tab_selected");\r
+ tabA.removeClass("tab_selected").addClass("tab_unselected");\r
+ $("#"+tabM.attr("name")).show('fast');\r
+ $("#"+tabA.attr("name")).hide();\r
+\r
+ });\r
+\r
+ tabA.trigger("click");\r
+ \r
+// $("ul.tabs li:first").addClass("active").show(); //Activate first tab\r
+// $(".tab_content:first").show(); //Show first tab content\r
+//\r
+// //On Click Event\r
+// $("ul.tabs li").click(function() {\r
+//\r
+// $("ul.tabs li").removeClass("active"); //Remove any "active" class\r
+// $(this).addClass("active"); //Add "active" class to selected tab\r
+// $(".tab_content").hide(); //Hide all tab content\r
+//\r
+// var activeTab = $(this).find("a").attr("href");\r
+// //Find the href attribute value to identify the active tab + content\r
+// $(activeTab).fadeIn(); //Fade in the active ID content\r
+// return false;\r
+// });\r
+\r
+ });\r
+\r
+</script>\r
+\r
{% endblock %}\r
\r
\r
{% if item %}\r
{% block submenu %}\r
<div>\r
- <table>\r
- <tr>\r
- <td align="left">\r
- <a href="{% url telemeta-item-dublincore item.public_id %}">Dublin Core</a>\r
- </td>\r
- <td align="right">\r
- {% if user.is_authenticated and user.is_staff%} \r
- <a href="{% url telemeta-item-detail-edit item.public_id %}"><img src="/images/edit_page.png" alt="EDIT"></a>\r
- {% endif %}\r
- <a href="{% url telemeta-item-detail previous %}"><img src="/images/previous.png" alt="PREVIOUS"></a>\r
- <a href="{% url telemeta-item-detail next %}"><img src="/images/next.png" alt="NEXT"></a>\r
- </td>\r
- </tr>\r
- </table>\r
+ <tr>\r
+ <td align="left">\r
+
<a href="{% url telemeta-item-dublincore item.public_id %}">Dublin Core</a>
\r+ </td>\r
+ <td align="right">\r
+ {% if user.is_authenticated and user.is_staff%}\r
+
<a href="{% url telemeta-item-detail-edit item.public_id %}"><img src="/images/edit_page.png" alt="EDIT"></a>
\r+ {% endif %}\r
+
<a href="{% url telemeta-item-detail previous %}"><img src="/images/previous.png" alt="PREVIOUS"></a>
\r+
<a href="{% url telemeta-item-detail next %}"><img src="/images/next.png" alt="NEXT"></a>
\r+ </td>\r
+ </tr>\r
+ </table>\r
</div>\r
{% endblock %}\r
\r
</div>\r
</div>\r
\r
- \r
- \r
- \r
- <div class="item_visualization" id="item_visualization_id">\r
- <form id="visualizer_id_form" method="get" action="#">\r
- <!--\r
- <select name="visualizer_id" onchange="this.form.submit()">\r
- {% for v in visualizers %}\r
- <option value="{{ v.id }}" {% ifequal v.id visualizer_id %} selected="selected" {% endifequal %}>\r
- {{v.name}}</option>\r
- {% endfor %}\r
- </select>\r
- -->\r
- Visualization :\r
- <select id="visualizer_id" name="visualizer_id">\r
- {% for v in visualizers %}\r
- <option value="{% url telemeta-item-visualize item.public_id,v.id,"WIDTH","HEIGHT" %}">\r
- {{v.name}}</option>\r
+\r
+\r
+\r
+ <div class="item_visualization" id="item_visualization_id">\r
+ <form id="visualizer_id_form" method="get" action="#">\r
+ <!--\r
+ <select name="visualizer_id" onchange="this.form.submit()">\r
+ {% for v in visualizers %}\r
+ <option value="{{ v.id }}" {% ifequal v.id visualizer_id %} selected="selected" {% endifequal %}>\r
+ {{v.name}}</option>\r
+ {% endfor %}\r
+ </select>\r
+ -->\r
+ Visualization :\r
+ <select id="visualizer_id" name="visualizer_id">\r
+ {% for v in visualizers %}\r
+ <option value="{% url telemeta-item-visualize item.public_id,v.id,"WIDTH","HEIGHT" %}">\r
+ {{v.name}}</option>\r
+ {% endfor %}\r
+ </select>\r
+ <input type="submit" value="Set" />\r
+ </form>\r
+\r
+\r
+ <!--\r
+ <form method="get" action="#">\r
+ <p> Vamp plugin analysis</p>\r
+ <select name="vamp_id">\r
+ {% for plugin in vamp_plugins %}\r
+ <option value="{{ plugin }}" {% ifequal plugin vamp_id %} selected="selected" {% endifequal %}>\r
+ {{ plugin }}</option>\r
{% endfor %}\r
- </select>\r
- <input type="submit" value="Set" />\r
- </form>\r
+ </select>\r
+ <input type="submit" value="Get" />\r
+ </form>\r
+ -->\r
+ </div>\r
+\r
+ <div id="tabs_container">\r
+ <!-- <ul class="tabs_" >\r
+ <li><a href="#">Analysis</a></li>\r
+ <li><a href="#">Markers</a></li>\r
+ </ul>-->\r
+ <a class="tab_analysis" name ="analyzer_div_id" href="#">Analysis</a>\r
+ <a class="tab_markers" name="markers_div_id" href="#">Markers</a>\r
+ </div>\r
+ <!--<div class="tab_container_">-->\r
+ <!-- <div id="tab1" class="tab_content">\r
+ Content\r
+ </div>\r
+ <div id="tab2" class="tab_content">\r
+ Content\r
+ </div>\r
+ </div>-->\r
+ <div class="markers" id="markers_div_id"></div>\r
\r
- <div class="markers_div" id="markers_div_id"></div>\r
- \r
- <div class="analyzer">\r
+ <div class="analyzer" id="analyzer_div_id">\r
<table width="100%">\r
<tr class="analyzer-title">\r
<td>Property</td>\r
{% endfor %}\r
</table>\r
</div>\r
-\r
- \r
- <!--\r
- <form method="get" action="#">\r
- <p> Vamp plugin analysis</p>\r
- <select name="vamp_id">\r
- {% for plugin in vamp_plugins %}\r
- <option value="{{ plugin }}" {% ifequal plugin vamp_id %} selected="selected" {% endifequal %}>\r
- {{ plugin }}</option>\r
- {% endfor %}\r
- </select>\r
- <input type="submit" value="Get" />\r
- </form>\r
- -->\r
- </div>\r
+ <!--</div>-->\r
\r
+\r
{% if audio_export_enabled %}\r
<div class="exporter">\r
<p>{% trans "Download:" %}\r
projects / telemeta.git / commitdiff