background-color: #fff;\r
color: #555;\r
border: 1px solid #adadad;\r
- width: 301px;\r
+ /*width: 301px;height: 17px;*/\r
padding: 2px;\r
- height: 17px;\r
margin: 5px 0 0;\r
font-size: 1em;\r
}\r
padding: 1em;\r
}\r
\r
-/*\r
-code for tabs. See link http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/\r
-There is also a plugin jQuery UI, but is heavy, hard to understand (compared to implementing it on my own)\r
-and heavy for the page (the re are tons of files to download and include in the page)\r
-Example usage:\r
- <ul class="tabs">\r
- <li><a href="#tab1">Gallery</a></li>\r
- <li><a href="#tab2">Submit</a></li>\r
- </ul>\r
-\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
-*/\r
-\r
-\r
-\r
-\r
-\r
-\r
.tab_unselected {\r
- background-color: #999999;\r
- color: #666666;\r
- border: 1px solid #999999;\r
+ background-color: #cccccc;\r
+ font-weight: normal;\r
+ color: #333333;\r
+ border: 1px solid #cccccc;\r
z-index: 0;\r
}\r
.tab_selected {\r
background-color: #ffffff;\r
color: #000000;\r
+ font-weight: bold;\r
border-top: 1px solid #999999;\r
border-right: 1px solid #999999;\r
border-left: 1px solid #999999;\r
_onMarkerMove: function(e, data) {
if (this.cfg.map) {
+ selectMarkerTab(); //defined in mediaitem|_detail.html
this.cfg.map.move(this.cfg.map.byId(data.id), data.offset);
}
},
_onMarkerAdd: function(e, data) {
if (this.cfg.map) {
+ selectMarkerTab(); //defined in mediaitem|_detail.html
//this.refreshMarkersText(this.cfg.map);
- this.cfg.map.addNew(data.offset, '');
+ this.cfg.map.addNew(data.offset);
//this.updateMarkersDiv(this.cfg.map, data.offset);
}
};
map.add(marker);
}
+ //We call mediaitem_detail.setUpTabs from controller once all markers have been loaded
+ //this because setLabelDescription, which sets the label text according to the div width,
+ //needs to have all elements visible.
+ setUpTabs(); //which hides the marker div. Call with argument 1 to set up marker div
+ //as visible as startup
}
}
},
- addNew: function(offset, description){
+ addNew: function(offset){
var id = this.uniqid();
var marker = {
id: id,
offset: offset,
- desc: description,
+ desc: undefined,
isNew: true
};
this.add(marker, this.EDIT_MODE_EDIT_TEXT);
},
- //editMode is optional, in case it defaults to
- //EDIT_MODE_SAVED:0
- add: function(marker, editMode) {
+ //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);
//description label
descriptionLabel = $J('<span/>')
.attr("name",this.MHE_DESCRIPTION_LABEL)
- .attr('title',marker.desc)
+ .attr('title',marker.desc ? marker.desc : "")
.css({
fontWeight:'bold',
marginRight:margin
}))
.css({
float:'right',
+ marginRight:margin
});
//add all elements to header:
//description text
descriptionText = $J('<textarea/>')
.attr("name", this.MHE_DESCRIPTION_TEXT)
- .val(marker.desc)
+ .val(marker.desc ? marker.desc : "")
.css({
margin:0,
padding:0,
- display: 'none',
width:'100%'
});
.css({
paddingBottom:'1em',
paddingTop:'1ex',
+ paddingLeft:'1ex',
+ paddingRight:'1ex',
//borderTop: '1px solid #666666',
borderBottom: '1px solid #999999'
});
var editModeEditText = this.EDIT_MODE_EDIT_TEXT;
//action for edit
editButton.unbind('click').click( function(){
- func_fem.apply(klass,[marker,editModeEditText,editButton, descriptionText,
+ func_fem.apply(klass,[marker,editModeEditText,editButton, descriptionText,
descriptionLabel, okButton]);
+ return false; //avoid scrolling of the page on anchor click
});
//action for ok button
}
func_fem.apply(klass,[marker,editModeSaved,editButton, descriptionText,
descriptionLabel, okButton]);
+ return false; //avoid scrolling of the page on anchor click
});
//action for removing
closeButton.unbind('click').click( function(){
remove.apply(klass,[marker]);
- //remove(klass, marker);
+ return false; //avoid scrolling of the page on anchor click
});
//insert the new div created
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
});
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(!descriptionText.is(':visible')){
+ 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);
+ //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){
+ }else{
var function_sld = klass.setLabelDescription;
editButton.show(speed, function(){
function_sld.apply(klass,[marker]);
}
},
-// 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');
-// },
+ //sets the length of the label description. Note that all elements must be visible.
+ //Therefore, we call nediaitem_detail.setUpTabs from controller once all markers have been loaded
setLabelDescription: function(marker){
var mDiv = marker.div;
var e = this.getHtmElm;
- var space = mDiv.innerWidth()-e(marker, this.MHE_INDEX_LABEL).outerWidth(true)-e(marker, this.MHE_OFFSET_LABEL).outerWidth(true)-
+ var space = mDiv.width()-e(marker, this.MHE_INDEX_LABEL).outerWidth(true)-e(marker, this.MHE_OFFSET_LABEL).outerWidth(true)-
e(marker, this.MHE_EDIT_BUTTON).outerWidth(true)-e(marker, this.MHE_DELETE_BUTTON).outerWidth(true);
var labelDesc = e(marker, this.MHE_DESCRIPTION_LABEL);
var str='';
var format = (hours<10 ? "0"+hours : hours )+":"+
(minutes<10 ? "0"+minutes : minutes )+":"+
(seconds<10 ? "0"+seconds : seconds )+"."+
- msec;
+ (msec<10 ? "0"+msec : msec );
return format;
},
var section = $J('<div/>')
.addClass($N.cssPrefix + 'section')
.css({
- fontSize: this.cfg.fontSize + 'px',
+ fontSize: this.cfg.fontSize + 'px',
fontFamily: 'monospace',
width: pixelWidth,
overflow: 'hidden'
return;
}
this.debug("draw ruler, duration: " + this.duration);
- if (this.layout)
+ if (this.layout){
this.layout.remove();
+ }
this.layout = $J('<div/>')
.addClass($N.cssPrefix + 'layout')
.css({
this._drawMarkers();
},
+ _drawMarkers: function() {
+ if (this.cfg.map) {
+ $J(this.markers).each(function(i, m) {
+ m.clear();
+ });
+ this.markers = new Array();
+ this.cfg.map.each(this.attach(function(i, m) {
+ this.markers.push(this._drawMarker(m, i));
+ }));
+ }
+ },
+
_createPointer: function() {
if (this.pointer) {
this.pointer.clear();
viewer: this.waveContainer,
fontSize: this.cfg.fontSize,
zIndex: 1000,
+ top:0,
className: 'pointer',
tooltip: 'Move head'
});
+// //create the label
+// var tsMainLabel = $.find('.' + $N.cssPrefix + 'label');
+// if(tsMainLabel){
+// var label = tsMainLabel.find('#' + $N.cssPrefix + 'pointerOffset');
+// if(!label){
+// label = $("<span/>").id('#' + $N.cssPrefix + 'pointerOffset').css('zIndex','10').appendTo(tsMainLabel);
+// this.pointer.label = label;
+// }
+// }
+
this.pointer
- .setText($N.Util.makeTimeLabel(0))
+ .setText("+")
+ //.setText($N.Util.makeTimeLabel(0))
.observe('move', this.attach(this._onPointerMove));
},
- _drawMarkers: function() {
- if (this.cfg.map) {
- $J(this.markers).each(function(i, m) {
- m.clear();
- });
- this.markers = new Array();
- this.cfg.map.each(this.attach(function(i, m) {
- this.markers.push(this._drawMarker(m, i));
- }));
- }
- },
-
_movePointer: function(offset) {
- if (offset < 0)
+ if (offset < 0){
offset = 0;
- else if (offset > this.duration)
+ }else if (offset > this.duration){
offset = this.duration;
-
+ }
pixelOffset = offset / this.duration * this.width;
if (this.pointer) {
this.pointer.move(pixelOffset);
- this.pointer.setText($N.Util.makeTimeLabel(offset));
+ //this.pointer.setText($N.Util.makeTimeLabel(offset));
}
this.pointerPos = offset;
},
if(data.finish) {
this.fire('move', {
offset: this.pointerPos
- });
+ });
this.mouseDown = false;
}
return false;
this.mouseDown = false;
this.fire('move', {
offset: this.pointerPos
- });
+ });
return false;
}
},
\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
+ function setUpTabs(selIndex) {//called from within controller.js once all markers have been loaded.\r
+ //this is because we need all divs to be visible to calculate size. selIndex is optional, it defaults to 0\r
+ //\r
+ //declare variables:\r
+ var tabContainerHeight = '5ex'; //height for the tab container\r
+ var tabHeight = '3.5ex'; //height for the tab. Must be lower than tabContainerHeight\r
+ var tabPaddingTop ='.8ex'; //padding top of each tab. Increasing it will increase also the tab height, so\r
+ //compensate by decreasing tabHeight, in case. In any case, must be lower or equal to tabContainerHeight-tabHeight\r
+ var tabWidth = '10ex'; //width of each tab. Each tab from index 1 to n will be at left=n*tabWidth\r
+ var tabBottom ='-1px'; //bottom of each tab. Must be equal and opposite to the border of the div below the tab\r
+\r
+ //retrieve tab container:\r
+ var tabContainer = $("#tabs_container"); //change if tabContainer has to be retrieved diferently\r
+ //retrieve the tabs by checking the elements whose class name starts with "tab_"\r
+ //var tabs = $('a[class^="tab_"]'); //change if the tabs have to be determined differently.\r
+ var tabs = tabContainer.find('a[id^="tab_"]');\r
+ //function that retrieves the div relative to a tab (the div will be set visible.invisible according to tab click):\r
+ var tab2div = function(tab){\r
+ return $("#"+tab.attr("name"));\r
+ //ie, returns the element whose id is equal to the tab name.\r
+ //change here if div has to be determined differently\r
+ };\r
+ var selectedTabClassName = "tab_selected"; //change if needed\r
+ var unselectedTabClassName = "tab_unselected"; //change if needed\r
+ var tabClicked = function(index) {\r
+ for(var i=0; i<tabs.length; i++){\r
+ var t = $(tabs[i]);\r
+ if(i===index){\r
+ t.removeClass(unselectedTabClassName).addClass(selectedTabClassName);\r
+ tab2div(t).fadeIn('slow');\r
+ }else{\r
+ t.removeClass(selectedTabClassName).addClass(unselectedTabClassName);\r
+ tab2div(t).hide();\r
+ }\r
+ }\r
+ return false; //returning false avoids scroll of the anchor to the top of the page\r
+ //if the tab is an anchor, of course\r
+ };\r
+ //end of variables declaration\r
+\r
+ //tabContainer default css:\r
+ tabContainer.css({'position':'relative','height':tabContainerHeight});\r
+ //tabs default css:\r
+ tabs.css({'position':'absolute',\r
+ 'height':tabHeight,\r
+ 'bottom':tabBottom,\r
+ 'paddingTop':tabPaddingTop,\r
+ 'width':tabWidth,\r
+ 'color': '#000000',\r
+ 'left':0, //this will be overridden for tabs from 1 to n (see below)\r
+ 'textAlign':'center'});\r
+ //setting the left property for all tabs from 1 to n\r
+ var left = parseFloat(tabWidth); //note that 40%, 33.3ex will be converted\r
+ //succesfully to 40 and 33.3 respectively\r
+ if(!isNaN(left)){\r
+ //retrieve the unit\r
+ var s = new String(left);\r
+ var unit = '';\r
+ if(s.length<tabWidth.length){\r
+ unit = tabWidth.substring(s.length,tabWidth.length);\r
+ }\r
+ for(var i=1; i<tabs.length; i++){\r
+ $(tabs[i]).css('left',(left*i)+unit);\r
+ }\r
+ }\r
+\r
+ for (var i=0;i<tabs.length;i++){\r
+ // introduce a new scope (round brackets)\r
+ //otherwise i is retrieved from the current scope and will be always equal to tabs.length\r
+ //due to this loop\r
+ (function(tabIndex){\r
+ $(tabs[i]).click(function(){return tabClicked(tabIndex);});\r
+ })(i);\r
+ }\r
+ \r
+ if(!(selIndex)){\r
+ selIndex = 0;\r
+ }\r
+ $(tabs[selIndex]).trigger("click");\r
+ }\r
+\r
+ function selectMarkerTab(){\r
+ $('#tab_markers').trigger("click");\r
+ }\r
</script>\r
\r
{% endblock %}\r
\r
\r
<div class="item_visualization" id="item_visualization_id">\r
+ \r
<form id="visualizer_id_form" method="get" action="#">\r
<!--\r
<select name="visualizer_id" onchange="this.form.submit()">\r
{% endfor %}\r
</select>\r
-->\r
- Visualization :\r
+ <img src="/images/plots.png" style="vertical-align:middle" /> 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
<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="analyzer" id="analyzer_div_id">\r
- <table width="100%">\r
- <tr class="analyzer-title">\r
- <td>Property</td>\r
- <td>Value</td>\r
- <td>Unit</td>\r
- </tr>\r
- {% for analyser in analysers %}\r
- <tr class="analyzer-line">\r
- <td>\r
- {{ analyser.name }}\r
- </td>\r
- <td>\r
- {{ analyser.value }}\r
- </td>\r
- <td>\r
- {{ analyser.unit }}\r
- </td>\r
- </tr>\r
- {% endfor %}\r
- </table>\r
+ <a id="tab_analysis" name ="analyzer_div_id" href="#">Analysis</a>\r
+ <a id="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>-->\r
- \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="analyzer" id="analyzer_div_id">\r
+ <table width="100%">\r
+ <tr class="analyzer-title">\r
+ <td>Property</td>\r
+ <td>Value</td>\r
+ <td>Unit</td>\r
+ </tr>\r
+ {% for analyser in analysers %}\r
+ <tr class="analyzer-line">\r
+ <td>\r
+ {{ analyser.name }}\r
+ </td>\r
+ <td>\r
+ {{ analyser.value }}\r
+ </td>\r
+ <td>\r
+ {{ analyser.unit }}\r
+ </td>\r
+ </tr>\r
+ {% endfor %}\r
+ </table>\r
+ </div>\r
+ <!--</div>-->\r
+\r
\r
{% if audio_export_enabled %}\r
<div class="exporter">\r
- <p>{% trans "Download:" %}\r
+ <p><img src="/images/download.png" style="vertical-align:middle"/> {% trans "Download:" %}\r
{% for format in export_formats %}\r
<a href="{% url telemeta-item-export item.public_id,format.extension %}">{{ format.name }}</a>\r
{% endfor %}</p>\r
projects / telemeta.git / commitdiff
