From 0877af5583e17137c41d15da437ad36fca5e553a Mon Sep 17 00:00:00 2001 From: riccardo Date: Wed, 23 Feb 2011 18:12:56 +0100 Subject: [PATCH] Added tabs (still to be fixed, especially didnt check cross-browser) and ok button capabilities (move marker: show only ok - add marker: show ok + text) and edit button capabilities (edit performed after move marker and edit clicked: save on ok clicked. Edit performed normally: save only if text has changed on ok clicked) --- telemeta/htdocs/css/telemeta.css | 53 ++++- telemeta/htdocs/timeside/src/markermap.js | 164 ++++++++++---- .../telemeta_default/mediaitem_detail.html | 213 +++++++++++++----- 3 files changed, 321 insertions(+), 109 deletions(-) diff --git a/telemeta/htdocs/css/telemeta.css b/telemeta/htdocs/css/telemeta.css index f73b3663..c4dbdd31 100644 --- a/telemeta/htdocs/css/telemeta.css +++ b/telemeta/htdocs/css/telemeta.css @@ -107,7 +107,7 @@ a img { border: none; } -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } -#rightcol .analyzer, #rightcol .exporter { +#rightcol .analyzer, #rightcol .exporter, .markers { text-align: left; position: relative; } @@ -134,13 +134,13 @@ a img { border: none; } font-size: 1em; } -.analyzer { +.analyzer, .markers { background-color: #fff; color: #000; border: 1px solid #adadad; width: 356px; padding: 2px; - margin: 5px 0 0; + /*margin: 5px 0 0;*/ font-size: 1em; } @@ -751,10 +751,43 @@ a.image-link { padding: 1em; } -/*.ts-marker-button { - border: solid #00190a 1px; - padding: .5ex .5ex .5ex .5ex; - background-color:#00890a; - color: #ffffff; - font-weight: bold; -}*/ +/* +code for tabs. See link http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/ +There is also a plugin jQuery UI, but is heavy, hard to understand (compared to implementing it on my own) +and heavy for the page (the re are tons of files to download and include in the page) +Example usage: + + +
+
+ +
+
+ +
+
+*/ + + + + + + +.tab_unselected { + background-color: #999999; + color: #666666; + border: 1px solid #999999; + z-index: 0; +} +.tab_selected { + background-color: #ffffff; + color: #000000; + border-top: 1px solid #999999; + border-right: 1px solid #999999; + border-left: 1px solid #999999; + border-bottom: 1px solid #ffffff; + z-index: 10; +} diff --git a/telemeta/htdocs/timeside/src/markermap.js b/telemeta/htdocs/timeside/src/markermap.js index c5daf04e..e59671bf 100644 --- a/telemeta/htdocs/timeside/src/markermap.js +++ b/telemeta/htdocs/timeside/src/markermap.js @@ -18,7 +18,7 @@ TimeSide(function($N, $J) { } 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', @@ -28,6 +28,11 @@ TimeSide(function($N, $J) { 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+'"]'); @@ -35,14 +40,16 @@ TimeSide(function($N, $J) { 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) { @@ -74,15 +81,12 @@ TimeSide(function($N, $J) { 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); @@ -102,6 +106,7 @@ TimeSide(function($N, $J) { }); this.fireRefreshLabels(idx+1,this.markers.length); //this._reorder(marker.offset); + this.fireEditMode(marker,editMode); return marker; }, @@ -136,7 +141,7 @@ TimeSide(function($N, $J) { } 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)); @@ -145,9 +150,9 @@ TimeSide(function($N, $J) { 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; } @@ -166,7 +171,7 @@ TimeSide(function($N, $J) { //$($( 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; @@ -218,7 +223,7 @@ TimeSide(function($N, $J) { 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 @@ -304,7 +309,7 @@ TimeSide(function($N, $J) { }); //ok button - okbutton = $J('') + okButton = $J('') .attr("name", this.MHE_OK_BUTTON) .attr('title','save marker description and offset') .css({ @@ -320,7 +325,7 @@ TimeSide(function($N, $J) { markerDiv = $J('
') .append(header) .append(descriptionText) - .append(okbutton) + .append(okButton) .css({ paddingBottom:'1em', paddingTop:'1ex', @@ -331,33 +336,25 @@ TimeSide(function($N, $J) { //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 @@ -382,6 +379,81 @@ TimeSide(function($N, $J) { 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; diff --git a/telemeta/templates/telemeta_default/mediaitem_detail.html b/telemeta/templates/telemeta_default/mediaitem_detail.html index 4f798e96..d20ea3a5 100644 --- a/telemeta/templates/telemeta_default/mediaitem_detail.html +++ b/telemeta/templates/telemeta_default/mediaitem_detail.html @@ -26,26 +26,115 @@ load_player({{ item.approx_duration.as_seconds }}); + + + {% endblock %} {% if item %} {% block submenu %}
- - - - - -
- Dublin Core - - {% if user.is_authenticated and user.is_staff%} - EDIT - {% endif %} - PREVIOUS - NEXT -
+ + + + + +
+ Dublin Core + + {% if user.is_authenticated and user.is_staff%} + EDIT + {% endif %} + PREVIOUS + NEXT +
{% endblock %} @@ -76,32 +165,63 @@
- - - -
-
- -  Visualization : - + {% for v in visualizers %} + + {% endfor %} + + +
+ + + +
+ +
+ + Analysis + Markers +
+ + +
-
- -
+
@@ -123,22 +243,9 @@ {% endfor %}
Property
- - - -
+ + {% if audio_export_enabled %}

{% trans "Download:" %} -- 2.39.5