From: riccardo Date: Fri, 11 Mar 2011 18:47:50 +0000 (+0100) Subject: Added marker permission javascript side, changed some code structure because of the... X-Git-Tag: 1.1~393 X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=679fe9f33450ac34d5b8a237f6ece40d335b0d93;p=telemeta.git Added marker permission javascript side, changed some code structure because of the current needs of synchronizing marker rulers, divs and maps --- diff --git a/telemeta/htdocs/css/telemeta.css b/telemeta/htdocs/css/telemeta.css index 6ff72197..e41fa931 100644 --- a/telemeta/htdocs/css/telemeta.css +++ b/telemeta/htdocs/css/telemeta.css @@ -13,7 +13,7 @@ body { } a:link, a:visited { -/* border-bottom:1px dotted #BBB; */ + /* border-bottom:1px dotted #BBB; */ color: #BB0000; text-decoration:none; } @@ -194,27 +194,27 @@ ul.continents ul li a { line-height: 1.8em; } input, textarea, select { margin: 2px } input, select { vertical-align: middle } input[type=button], input[type=submit], input[type=reset] { - background: #f2f2f2; - color: #444; - border: 3px double #ccc; - padding: .1em .5em; - font-weight: bold; - cursor: pointer; + background: #f2f2f2; + color: #444; + border: 3px double #ccc; + padding: .1em .5em; + font-weight: bold; + cursor: pointer; } input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover { - background: #8D8C94; - color: #fff; + background: #8D8C94; + color: #fff; } input[type=button][disabled], input[type=submit][disabled], input[type=reset][disabled] { - background: #f6f6f6; - border-style: solid; - color: #999; + background: #f6f6f6; + border-style: solid; + color: #999; } input[type=text], input[type=password], input.textwidget, textarea { border: 1px solid #ccc; } input[type=text], input[type=password], input.textwidget { padding: .25em .1em } input[type=text]:focus, input[type=password]:focus, input.textwidget:focus, textarea:focus { - border-color: #aaa; + border-color: #aaa; } option { border-bottom: 1px dotted #d7d7d7; } fieldset { border: 1px solid #d7d7d7; padding: .5em; margin: 0 } @@ -227,12 +227,12 @@ label.disabled { color: #d7d7d7 } .buttons form, .buttons form div { display: inline } .buttons input { margin: 1em .5em .1em 0 } .inlinebuttons input { - font-size: 70%; - border-width: 1px; - border-style: dotted; - margin: 0; - padding: 0.1em; - background: none; + font-size: 70%; + border-width: 1px; + border-style: dotted; + margin: 0; + padding: 0.1em; + background: none; } /* Quick search */ @@ -377,19 +377,19 @@ form.login .submit { .nav h2, .nav hr { display: none } .nav ul { font-size: 14px; list-style: none; margin: 0px; text-align: left; } .nav li { - display: inline; - padding: 0em; - white-space: nowrap; + display: inline; + padding: 0em; + white-space: nowrap; } .nav li.last { border-right: 1px solid #000000; } /* Main navigation bar (borrowed from Trac) */ #menu { - background-color: #6a0307 ; - font: normal verdana,'Bitstream Vera Sans',helvetica,arial,sans-serif; - padding: 0em 0em 0.75em 0em; - border-bottom: .5em solid #6a0307; - border-top: .7em solid #6a0307; + background-color: #6a0307 ; + font: normal verdana,'Bitstream Vera Sans',helvetica,arial,sans-serif; + padding: 0em 0em 0.75em 0em; + border-bottom: .5em solid #6a0307; + border-top: .7em solid #6a0307; } #menu li { background-color: #6a0307; padding: .5em 0; } @@ -404,10 +404,10 @@ form.login .submit { #menu li.last { border-right: 0px solid #000; } #menu :link, #menu :visited { - border-bottom: none; - color: #FFF; - font-weight: bold; - padding: .2em 20px; + border-bottom: none; + color: #FFF; + font-weight: bold; + padding: .2em 20px; } * html #menu :link, * html #menu :visited { background-position: 1px 0 } /* @@ -426,17 +426,17 @@ form.login .submit { #menu .active :link:hover, #menu .active :visited:hover { background-color: #FFF; color: #6a0307; - + }*/ #menu .active, #menu :link:hover, #menu :visited:hover{ - background-color: #FFF; - color: #6a0307; - text-decoration:none; - border-bottom: .4em solid #FFF; - border-top: 2px solid #FFF; + background-color: #FFF; + color: #6a0307; + text-decoration:none; + border-bottom: .4em solid #FFF; + border-top: 2px solid #FFF; background-color: #FFF; /*border-bottom: .5em solid #6a0307;*/ - + -webkit-border-top-left-radius:5px 5px; moz-border-radius-topleft: 5px 5px; border-top-left-radius: 5px 5px; @@ -448,14 +448,14 @@ form.login .submit { /* Footer (borrowed from Trac) */ #footer { - background: #6a0307; - clear: both; - color: #FFF; - font-size: 10px; - border-top: 1px solid; - height: 31px; - padding: 0.5em; - margin-top: 2.5em; + background: #6a0307; + clear: both; + color: #FFF; + font-size: 10px; + border-top: 1px solid; + height: 31px; + padding: 0.5em; + margin-top: 2.5em; } #footer :link, #footer :visited { color: #FFF; } #footer hr { display: none } @@ -463,15 +463,15 @@ form.login .submit { #footer #telemeta_powered:hover { background: transparent } #footer p { margin: 0 } #footer p.left { - float: left; - margin-left: 1em; - padding: 0 1em; - border-left: 1px solid #d7d7d7; - border-right: 1px solid #d7d7d7; + float: left; + margin-left: 1em; + padding: 0 1em; + border-left: 1px solid #d7d7d7; + border-right: 1px solid #d7d7d7; } #footer p.right { - float: right; - text-align: right; + float: right; + text-align: right; } /* Homepage */ @@ -707,8 +707,8 @@ table.listing thead th a { } table.listing th.asc a, table.listing th.desc a { font-weight: bold } table.listing th.asc a, table.listing th.desc a { - background-position: 100% 50%; - background-repeat: no-repeat; + background-position: 100% 50%; + background-repeat: no-repeat; } table.listing th.asc a { background-image: url(../images/asc.png) } table.listing th.desc a { background-image: url(../images/desc.png) } @@ -724,7 +724,7 @@ table.listing tbody td.tmp { width: 100%; } table.listing tbody td a:hover, table.listing tbody th a:hover { - background-color: transparent; + background-color: transparent; } table.listing tbody tr { border-top: 1px solid #ddd } table.listing tbody tr.even { background-color: #fcfcfc } @@ -831,3 +831,93 @@ a.image-link { border-bottom: 1px solid #ffffff; z-index: 10; } + +.markersdivButton{ + /*padding: 0.3em 0.8em 0.8em 0.8em; + margin: 0 0 1.5em 1.5em;*/ + + -moz-border-radius: 6px 6px 6px 6px; + -webkit-border-radius: 6px 6px 6px 6px; + border-radius: 6px 6px 6px 6px; +} + +.markersdivUneditable{ + border: 0px !important; +} + +.markersdivIndexLabel{ + color: #fff; + background-image:url("/images/marker_tiny.png"); + background-repeat:no-repeat; + background-position:center center; + font-size: 90%; + font-weight:bold; + display:inline-block; + width:3ex; + text-align: center; + font-family: monospace; + margin-right:2ex; +} +.markersdivOffset{ + margin-right:1ex; + font-style: italic; +} +.markersdivTopElement{ + vertical-align:middle; +} +.markersdivTitle{ + font-weight:bold; + margin:0; + padding:0; + /*margin-right:margin*/ +} +.markersdivEdit, .markersdivEdit:hover, .markersdivEdit:visited, +.markersdivEdit:link, .markersdivEdit:link:hover, .markersdivEdit:visited:hover{ + font-weight:bold; + border:1px dotted #333333; + float:right; + color:#000; + background-image: url('/images/edit_marker.png'); + background-repeat:no-repeat; + background-position: center left; + border:2px solid #666; + height:1ex; + padding:0px 1ex 2ex 3ex; /*top right bottom left*/ + font-size: 70%; + margin-left: 1ex; + margin-right:1ex; + position:relative; + top:-0.5ex; +} +.markersdivDelete{ + border:0px; + float:right; + background-image: url('/images/del_marker.png'); + background-repeat: no-repeat; + background-position: center center; + padding:1ex 1ex 1ex 1ex;/*top right bottom left. The padding is only to show the element */ +} +.markersdivDescription{ + margin:1ex 0px 0ex 0px; /*top right bottom left*/ + font-family: sans-serif; + padding:0; + width:100%; +} +.markersdivSave, .markersdivSave:hover, .markersdivSave:visited, +.markersdivSave:link, .markersdivSave:link:hover, .markersdivSave:visited:hover{ + background-color: #087714; + color: #fff; + font-weight: bold; + padding: 0.3em 0.8em 0.3em 0.8em; + /*here below the 3 lines to properly display top margin without
or including the element ina div*/ + display: block; + margin-top: 1ex; + width:3ex; + /* margin:1ex 0px 0px 0px;*/ /*top right bottom left*/ +} + +.markerdiv{ + padding:1ex 1ex 1.2ex 1ex; /*top right bottom left*/ + border: 1px solid #aaaaaa; + margin-bottom: 1ex; +} diff --git a/telemeta/htdocs/images/edit_marker.png b/telemeta/htdocs/images/edit_marker.png index b40bbae4..277a9005 100644 Binary files a/telemeta/htdocs/images/edit_marker.png and b/telemeta/htdocs/images/edit_marker.png differ diff --git a/telemeta/htdocs/timeside/src/controller.js b/telemeta/htdocs/timeside/src/controller.js index 1abaa3f5..9a7fd174 100644 --- a/telemeta/htdocs/timeside/src/controller.js +++ b/telemeta/htdocs/timeside/src/controller.js @@ -14,17 +14,20 @@ TimeSide(function($N) { this.configure(cfg, { player: null, soundProvider: null, - map: null + map: null, + divmarkers:[] }); if (this.cfg.player && !$N.isInstanceOf(this.cfg.player, 'Player')) { this.cfg.player = new $N.Player(this.cfg.player); } this._setupPlayer(); + //setting the divmarkers + //this.cfg.map.observe('add') }, _setupPlayer: function() { - this.attach(this.updateMarkersDiv); + this.cfg.player .setSoundProvider(this.cfg.soundProvider) .setMarkerMap(this.cfg.map) @@ -32,10 +35,16 @@ TimeSide(function($N) { .observe('pause', $N.attachFunction(this.cfg.soundProvider, this.cfg.soundProvider.pause)) .observe('move', this.attach(this._onMove)) .observe('markeradd', this.attach(this._onMarkerAdd)) + //player markermove listens for changes of ruler markermove which listens + //foir changes in each marker move .observe('markermove', this.attach(this._onMarkerMove)) .draw(); this.loadHTTP(); + + this.cfg.map.observe('add',this.attach(this._onMarkerMapAdd)); + this.cfg.map.observe('remove',this.attach(this._onMarkerMapRemove)); + this.cfg.map.observe('moved',this.attach(this._onMarkerMapMoved)); }, @@ -44,24 +53,96 @@ TimeSide(function($N) { this.cfg.soundProvider.seek(data.offset); }, - + //called whenever a marker is moved in the ruler BUT NOT in the map _onMarkerMove: function(e, data) { if (this.cfg.map) { $N.Util.selectMarkerTab(); //defined in utils.js - this.cfg.map.move(this.cfg.map.byId(data.id), data.offset); + this.cfg.map.move(data.index, data.offset); + //this will fire the method below + } + }, + + _onMarkerMapMoved:function(e, data){ + var from = data.fromIndex; + var to = data.toIndex; + if(from===to){ + //just update the div in order to show the new time offset + //and start edit + this.cfg.divmarkers[from].setIndex(to); + return; } + this.cfg.player.ruler.move(from,to); + var m = this.cfg.divmarkers.splice(from,1)[0]; //remove + this.cfg.divmarkers.splice(to,0,m); //add + this.updateIndices(from,to); }, + //called whenever a marker is added to the ruler BUT NOT in the map _onMarkerAdd: function(e, data) { if (this.cfg.map) { $N.Util.selectMarkerTab(); //defined in mediaitem|_detail.html + var idx = this.cfg.map.add(data.offset); //this will call the method below _onMarkerMapAdd, + //which btw adds a new div to divmarkers + //now update the indices for the div (which also sets the event bindings as clicks etc... + this.updateIndices(idx); + } + }, + //fired from markermap, attached as listener above in + //this.cfg.map.observe('add',this.attach(this._onMarkerMapAdd)); + //this method basically adds the html elements, but updateIndices must be called elsewhere after this function + //(see _onMarkerAdd and loadHTTP) + _onMarkerMapAdd: function(e, data) { + if (this.cfg.map) { + //$N.Util.selectMarkerTab(); //defined in mediaitem|_detail.html + //this.refreshMarkersText(this.cfg.map); + //var idx = this.cfg.map.add(data.offset); + //alert('df'); + var idx = data.index; + var divMarker = new $N.DivMarker(this.cfg.map); + this.cfg.divmarkers.splice(idx,0, divMarker); + this.cfg.player.ruler.add(data.marker, idx); + } + }, + + //fired from markermap, attached as listener above in + //this.cfg.map.observe('add',this.attach(this._onMarkerMapAdd)); + _onMarkerMapRemove: function(e, data) { + if (this.cfg.map) { + //$N.Util.selectMarkerTab(); //defined in mediaitem|_detail.html //this.refreshMarkersText(this.cfg.map); - this.cfg.map.addNew(data.offset); - //this.updateMarkersDiv(this.cfg.map, data.offset); + //var idx = this.cfg.map.add(data.offset); + //alert('df'); + var idx = data.index; + var divRemoved = this.cfg.divmarkers.splice(idx,1)[0]; //there is only one element removed + divRemoved.remove(); + this.cfg.player.ruler.remove(idx); + if(idx0){ var result = data.result; for(var i =0; i< result.length; i++){ - var marker = { - id: result[i].public_id, - offset: result[i].time, - desc: result[i].description - }; - map.add(marker); + map.add(result[i]); } - //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. - $N.Util.setUpTabs(); - //setUpTabs(); //which hides the marker div. Call with argument 1 to set up marker div - //as visible as startup + //we call now updateindices + update.apply(me); + } } - //me._setupPlayer(); + //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. + $N.Util.setUpTabs(); + //setUpTabs(); //which hides the marker div. Call with argument 1 to set up marker div + //as visible as startup } }); - //var g = 9; + //var g = 9; } diff --git a/telemeta/htdocs/timeside/src/marker.js b/telemeta/htdocs/timeside/src/marker.js index 5805dc03..bd54550e 100644 --- a/telemeta/htdocs/timeside/src/marker.js +++ b/telemeta/htdocs/timeside/src/marker.js @@ -27,20 +27,28 @@ TimeSide(function($N, $J) { fontSize: 10, zIndex: null, className: [null, 'required'], - id: null, + index: null, tooltip: null, canMove: false }); this.cfg.rulerLayout = $J(this.cfg.rulerLayout); this.cfg.viewer = $J(this.cfg.viewer); - this.id = cfg.id; this.width = this.cfg.viewer.width(); this.painter = new jsGraphics(this.cfg.viewer.get(0)); this._create(); if(this.cfg.canMove){ this._observeMouseEvents(); } + //if it is the pointer, cfg.index is undefined + if(cfg.index !== undefined && cfg.className!='pointer'){ + this.setIndex(cfg.index); + } + }, + + setIndex: function(index){ + this.index = index; + this.setText(index+1); }, free: function($super) { @@ -220,7 +228,7 @@ TimeSide(function($N, $J) { if (this.mouseDown) { this.mouseDown = false; this.fire('move', { - id: this.id, + index: this.index, offset: this.position, finish: true }); diff --git a/telemeta/htdocs/timeside/src/markermap.js b/telemeta/htdocs/timeside/src/markermap.js index 9d857be5..3b4deeda 100644 --- a/telemeta/htdocs/timeside/src/markermap.js +++ b/telemeta/htdocs/timeside/src/markermap.js @@ -18,544 +18,158 @@ TimeSide(function($N, $J) { } this.markers = markers; }, - //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_OFFSET_LABEL:'offsetLabel', - MHE_DESCRIPTION_TEXT:'descriptionText', - MHE_DESCRIPTION_LABEL:'descriptionLabel', - 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, - //authentication ,sg - AUTHENTICATION_MSG :"You must be logged in and have the permission to edit/add/delete markers", + + get: function(index){ + return this.markers[index]; - //function to retreve html elements in the edit div associated with marker: - getHtmElm: function(marker, elementName){ - //return marker.div.children('[name="'+elementName+'"]'); - //children returns only the first level children, we must use: - return marker.div.find('*[name="'+elementName+'"]'); - }, - - // 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) { - if (this.markers[i].id == id) { - marker = this.markers[i]; - break; - } - } - return marker; - }, - - indexOf: function(marker) { - var index = null; - for (var i in this.markers) { - if (this.markers[i].id == marker.id) { - index = parseInt(i); - break; - } - } - return index; }, - addNew: function(offset){ - var id = this.uniqid(); - var marker = { - id: id, - offset: offset, - 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) { - var idx = this.insertionIndex(marker); + add: function(obj) { + var marker = this.createMarker(obj); + var idx = this.indexOf(marker); + //adding the div - marker.div = this.createDiv(marker,idx); + //marker.div = this.createDiv(marker,idx); //setting focus and label description //set label description - this.setLabelDescription(marker); + //this.setLabelDescription(marker); //finally, set the focus to the text //this.getHtmElm(marker,this.MHE_DESCRIPTION_TEXT).focus(); this.markers.splice(idx,0,marker); - //calls core.js $N.attachFunction - //which calls ruler.js onMapAdd + //notifies controller.onMarkerMapAdd this.fire('add', { marker: marker, index: idx }); - this.fireRefreshLabels(idx+1,this.markers.length); + //this.fireRefreshLabels(idx+1,this.markers.length); //this._reorder(marker.offset); - this.fireEditMode(marker,editMode); - return marker; + //this.fireEditMode(marker); + return idx; }, - - remove: function(marker) { - if (marker) { - var i = this.indexOf(marker); - this.markers.splice(i, 1); - marker.div.remove(); - this.fire('remove', { - marker: marker - }); - - this.fireRefreshLabels(i,this.markers.length); - this.removeHTTP(marker); - + //argument is either an object loaded from server or a number specifying the marker offset + createMarker: function(argument){ + var marker = null; + if(typeof argument == 'object'){ + var editable = CURRENT_USER_NAME === argument.author; + marker = { + id: argument.public_id, + offset: argument.time, + desc: argument.description, + title: argument.title, + author: argument.author, + isEditable: editable, + isSaved: true + + }; + }else if(typeof argument == 'number'){ + marker = { + id: undefined, //before was: this.uniqid(), + //now an undefined id means: not saved on server (see sendHTTP below) + offset: parseFloat(argument), + desc: "", + title: "", + author: CURRENT_USER_NAME, + isEditable: true, + isSaved: false + }; } return marker; - }, - // compare: function(marker1, marker2) { - // if (marker1.offset > marker2.offset){ - // return 1; - // } - // if (marker1.offset < marker2.offset){ - // return -1; - // } - // return 0; - // }, - move: function(marker, offset) { - if(offset===marker.offset){ - return; - } - var oldIndex = this.indexOf(marker); - marker.offset = offset; - //marker.offset = offset; - var newIndex = this.insertionIndex(marker); - //change marker time - //$($( marker.div.children()[0] ).children()[1]).html(this.formatMarkerOffset(offset)); - this.getHtmElm(marker,this.MHE_OFFSET_LABEL).html(this.formatMarkerOffset(offset)); - // marker.div[this.MHE_OFFSET_LABEL].html(this.formatMarkerOffset(offset)); - if(newIndex>oldIndex){ - newIndex--; - } - //fire edit mode - this.fireEditMode(marker, this.EDIT_MODE_MARKER_MOVED); - - if(newIndex==oldIndex){ - return; - } - var l = this.markers.length; - this.markers.splice(oldIndex,1); - this.markers.splice(newIndex,0,marker); - //The .detach() method is the same as .remove(), except that .detach() keeps - //all jQuery data associated with the removed elements. - //This method is useful when removed elements are to be reinserted into the DOM at a later time. - marker.div.detach(); - if(newIndex==l-1){ - this.divContainer.append(marker.div); - }else{ - $( this.divContainer.children()[newIndex] ).before(marker.div); - } - //$($( marker.div.children()[1] )).focus(); - - //this.getHtmElm(marker,this.MHE_DESCRIPTION_TEXT).focus(); - //this.getHtmElm(marker,this.MHE_DESCRIPTION_TEXT).select(); - var i1= Math.min(oldIndex,newIndex); - var i2= Math.max(oldIndex,newIndex); - //var mrks = this.markers; - - this.fireRefreshLabels(i1,i2+1); - - - - - //this._reorder(offset); }, - fireRefreshLabels: function(firstIndex,lastIndex){ - if(lastIndex<=firstIndex){ - return; - } - for (var i=firstIndex; i