From 175c87c60ce87c5e783fdc19a9a35b57a1d85a11 Mon Sep 17 00:00:00 2001 From: Andreas Brachold Date: Wed, 27 May 2009 18:26:57 +0000 Subject: * jason: recordings - handle keywords as cloud --- skins/jason/favicon.ico | Bin 0 -> 1718 bytes skins/jason/jason.css | 27 +++++++ skins/jason/recordings.js | 195 ++++++++++++++++++++++++++++++---------------- 3 files changed, 156 insertions(+), 66 deletions(-) create mode 100644 skins/jason/favicon.ico diff --git a/skins/jason/favicon.ico b/skins/jason/favicon.ico new file mode 100644 index 0000000..615b445 Binary files /dev/null and b/skins/jason/favicon.ico differ diff --git a/skins/jason/jason.css b/skins/jason/jason.css index e182b2e..14a5c4e 100644 --- a/skins/jason/jason.css +++ b/skins/jason/jason.css @@ -425,3 +425,30 @@ color:#b03e28; .error { color:red; } + +.x-cloud-list { + padding:10px; +} + +.x-cloud-item { + display:inline; + padding-right:5px; +} +.x-cloud-item a { + text-decoration:none; + color:#555555; +} + +.x-cloud-item a:hover { + color:#002a85; + text-decoration:none; +} + +.x-cloud-item.smallest { font-size: 0.7em; } +.x-cloud-item.smaller { font-size: 0.8em; } +.x-cloud-item.small { font-size: 0.9em; } +.x-cloud-item.medium { font-size: 1.0em; } +.x-cloud-item.large { font-size: 1.1em; } +.x-cloud-item.larger { font-size: 1.1em; } +.x-cloud-item.largest { font-size: 1.3em; } + diff --git a/skins/jason/recordings.js b/skins/jason/recordings.js index 543c523..62e420b 100644 --- a/skins/jason/recordings.js +++ b/skins/jason/recordings.js @@ -85,7 +85,10 @@ Ext.xxv.slide = function(config){ Ext.xxv.slide.superclass.constructor.call(this, config); Ext.apply(this, config); - + + this.addEvents({ + 'selectKeyword' : true + }); }; Ext.extend(Ext.xxv.slide, Ext.Component, { @@ -105,9 +108,18 @@ Ext.extend(Ext.xxv.slide, Ext.Component, { this.addEvents({'selected' : true}); if (typeof(this.imageGap)=='undefined') { this.imageGap = 10 } this.tpl = new Ext.Template( + '', '
', '

{title}

', - '
{channel}{period}{cutlength}
', + '
', + '', + '{channel} - ', + '', + '{period}', + '', + ' ({cutlength})', + '', + '
', '

{subtitle} 

', '
{day:date} {start} - {stop}
', '
', @@ -120,7 +132,7 @@ Ext.extend(Ext.xxv.slide, Ext.Component, { '', '
', '
{content}
', - '
{keywords}
' + '' ); this.tpl.compile(); @@ -132,25 +144,18 @@ Ext.extend(Ext.xxv.slide, Ext.Component, { setvalue : function(data, first){ this.param = { - title: data.fulltitle + data: data + ,title: data.fulltitle ,subtitle: '' - ,channel: (!data.channel || data.channel.length <= 0) ? null : ( '' + data.channel + ' - ' ) + ,channel: data.channel ,day: data.day ,duration: data.duration ,start: data.day.dateFormat('H:i') ,stop: new Date(data.day.getTime() + (data.duration * 1000)).dateFormat('H:i') ,content: data.description.replace(/\r\n/g, '
') - ,cutlength: data.cutlength == data.duration ? null : (' (' + SecondsToHMS(data.cutlength) +')') + ,cutlength: data.cutlength == data.duration ? null : SecondsToHMS(data.cutlength) ,period: SecondsToHMS(data.duration) - ,marks: data.marks }; - if(data.keywords) { - var k = new Array(); - for(var j = 0, len = data.keywords.length; j < len; j++){ - k.push(data.keywords[j][0]); - } - this.param.keywords = k.join(', '); - } var title = data.title.split("~"); if(data.subtitle && data.subtitle.length >1) { @@ -196,23 +201,29 @@ Ext.extend(Ext.xxv.slide, Ext.Component, { render : function(ct, position){ + /** add preview images ************************************************/ + var inner= Ext.get("images-inner"); if(!inner) { this.param.cls = this.baseCls; if(position){ - this.el = this.tpl.insertBefore(position, this.param, true); + this.el = this.tpl.insertBefore(position, this.param, true); }else{ - this.el = this.tpl.append(ct, this.param, true); + this.el = this.tpl.append(ct, this.param, true); } if(this.id){ - this.el.dom.id = this.id; + this.el.dom.id = this.id; } inner= Ext.get("images-inner"); - if(this.slider) { - delete this.slider; - this.slider = null; - } + if(this.slider) { + delete this.slider; + this.slider = null; + } + if(this.cloudlist) { + delete this.cloudlist; + this.cloudlist = null; + } } var imagesWrap = Ext.get(inner.dom.firstChild); this.divImages = Ext.get(imagesWrap.dom.firstChild); @@ -279,56 +290,96 @@ Ext.extend(Ext.xxv.slide, Ext.Component, { },this); },this); - if(this.slider) { - this.slider.sliders.clear(); - } else { + /** add cutmark slider **************************************************/ + if(this.slider) { + this.slider.sliders.clear(); + } else { this.slider = new Ext.ux.SlideZone('slider-inner', { type: 'horizontal', size: usableWidth-32, sliderWidth: 16, sliderHeight: 24, - maxValue: this.param.duration, + maxValue: this.param.data.duration, minValue: 0, //sliderSnap: 1, allowSliderCrossing: true - }); - this.ts = new Ext.ux.ThumbSlider({ - value: 0 - ,name: 'cutpoint_thumb' - ,cls: 'x-slide-zone-bottom' - ,allowMove: true - }); - this.ts.on('drag', - function() { - var v = parseInt(this.ts.value * 1000); - this.fireEvent('selected', this, new Date((minTime().getTime())+v), null, null); - },this); - } - - if(this.param.marks && this.param.marks.length) { - var cutpoint = this.param.marks.split(","); - for(var i = 0, len = cutpoint.length; i < len; i += 2){ - var first = HMSToSeconds(cutpoint[i]); - var second; - if(i+1 < cutpoint.length) { - second = HMSToSeconds(cutpoint[i+1]); - } else { - second = this.param.duration; - } - var rs = new Ext.ux.RangeSlider({ - value: [first,second] - ,name: 'cutpoint_'+i - ,cls: 'x-slide-zone-top' - ,allowMove: false - }); - this.slider.add(rs); - } - } - this.slider.add(this.ts); - }, + }); + this.ts = new Ext.ux.ThumbSlider({ + value: 0 + ,name: 'cutpoint_thumb' + ,cls: 'x-slide-zone-bottom' + ,allowMove: true + }); + this.ts.on('drag', + function() { + var v = parseInt(this.ts.value * 1000); + this.fireEvent('selected', this, new Date((minTime().getTime())+v), null, null); + },this); + } - CanShift: function(direction) { + if(this.param.data.marks && this.param.data.marks.length) { + var cutpoint = this.param.data.marks.split(","); + for(var i = 0, len = cutpoint.length; i < len; i += 2){ + var first = HMSToSeconds(cutpoint[i]); + var second; + if(i+1 < cutpoint.length) { + second = HMSToSeconds(cutpoint[i+1]); + } else { + second = this.param.data.duration; + } + var rs = new Ext.ux.RangeSlider({ + value: [first,second] + ,name: 'cutpoint_'+i + ,cls: 'x-slide-zone-top' + ,allowMove: false + }); + this.slider.add(rs); + } + } + this.slider.add(this.ts); + /** add keywords tagcloud ***********************************************/ + if(!this.cloudlist && this.param.data.keywords && this.param.data.keywords.length) { + var cont = Ext.get(ct.dom.lastChild); + this.cloudlist = cont.createChild({tag: "ol", cls: "x-cloud-list"}); + for(var i = 0, len = this.param.data.keywords.length; i < len; i++){ + var child = this.cloudlist.createChild({ + tag: "li", + cls: "x-cloud-item "+this.getWeight(this.param.data.keywords[i][1]), + html: ''+this.param.data.keywords[i][0]+'' + }); + + child.on('click', this.onSelectKeyWord, this); + } + } + } + /**************************************************************************/ + ,onSelectKeyWord : function(e, t){ + + var item = t.parentNode; + var tag = item.firstChild.innerHTML; + + this.fireEvent('selectKeyword', tag); + + // Prevent the link href from being followed + Ext.EventObject.stopEvent(e); + } + /**************************************************************************/ + ,getWeight : function(weight){ + var nmax = 100; + var nmin = 0; + + var styles = new Array('smallest','smaller','small','medium','large','larger','largest'); + var value = weight / (nmax - nmin) * 6; + if(value >= 6.0) + return styles[6]; + if(value <= 0.0) + return styles[0]; + + return styles[Math.round(value)]; + } + /**************************************************************************/ + ,CanShift: function(direction) { if (!this.curPage){ this.offsetLeft=this.divImages.getLeft(); } @@ -337,9 +388,9 @@ Ext.extend(Ext.xxv.slide, Ext.Component, { return -1; } return newPage; - }, + } - Shift: function(direction) { + ,Shift: function(direction) { var newPage = this.CanShift(direction); if (newPage<0 || newPage >= this.maxPages){ return; @@ -648,7 +699,7 @@ Ext.xxv.recordingsDataView = function(viewer, preview, store, config) { return data; } ,listeners: { - 'selectionchange': {fn:this.doClick, scope:this, buffer:100} + 'selectionchange': {fn:this.doClick, scope:this, buffer:100} ,'contextmenu' : {fn:this.onContextClick, scope:this} ,'dblclick' : {fn:this.doDblclick, scope:this} // ,'loadexception' : {fn:this.onLoadException, scope:this} @@ -748,6 +799,15 @@ Ext.extend(Ext.xxv.recordingsDataView, Ext.DataView, { } } + ,doSelectKeyword : function(tag) { + if(tag) { + delete(this.store.baseParams['data']); + this.store.title = tag; + this.store.baseParams.cmd = 'rk'; + this.store.baseParams.data = tag; + this.store.load({params:{start:0, limit:this.store.autoLoad.params.limit}}); + } + } ,doDblclick : function() { var selNode = this.getSelectedNodes(); if(selNode && selNode.length > 0){ @@ -1275,10 +1335,13 @@ function createRecordingsView(viewer,id) { imageHeight:120, imageWidth:160, autoWidth: true, - listeners:{ + listeners:{ selected: function(slide, time, e, ele){ this.ownerCt.timefield.setValue(time); - } + } + ,'selectKeyword': function(tag) { + viewer.gridRecordings.doSelectKeyword(tag); + } }, images:[] }], -- cgit v1.2.3