yaz/commit

converting to new model where matching tags are explictly stored in the RDF db

authorMichiel Hildebrand
Wed Feb 2 16:22:01 2011 +0100
committerMichiel Hildebrand
Wed Feb 2 16:22:01 2011 +0100
commit8eb623f03219ced659e4d6523f2d777d81f927ad
treee991d4e5c50546ef612c719a4e2f3f1a782cacb6
parent0a03b05d1f7278aaf280f436b83c0a3e9a101556
Diff style: patch stat
diff --git a/web/css/player.css b/web/css/player.css
index 41ae2fc..e5c2168 100644
--- a/web/css/player.css
+++ b/web/css/player.css
@@ -46,7 +46,7 @@
 	/*border-top: 1px solid #f2f2f2;*/
 }
 .yui3-tag-carousel li.focus .label {
-    font-size: 175%;
+    font-size: 125%;
 }
 .yui3-tag-carousel li.scored {
     background-color: #EEE;
@@ -54,7 +54,7 @@
 	-moz-border-radius: 4px;
 	border-radius: 4px;
 }
-.yui3-tag-carousel li.hidden {
+.yui3-tag-carousel li .hidden {
 	display: none;
 }
 .yui3-tag-carousel li .label {
@@ -67,25 +67,27 @@
 }
 
 .yui3-tag-carousel li .edit,
-.yui3-tag-carousel li .remove {
+.yui3-tag-carousel li .remove,
+.yui3-tag-carousel li .confirm,
+.yui3-tag-carousel li .score {
 	float: right;
-	padding: 0 4px;
+	color: #222;
+	background-color: #CCC;
+	padding: 1px 6px;
+	-moz-border-radius: 6px;
+	border-radius: 6px;
+	font-weight: bold;
 }
 .yui3-tag-carousel li .edit a,
-.yui3-tag-carousel li .remove a {
-	color: #AAA;
+.yui3-tag-carousel li .remove a,
+.yui3-tag-carousel li .confirm a {
+	color: #222;
 }
 .yui3-tag-carousel li .edit a:hover,
-.yui3-tag-carousel li .remove a:hover {
+.yui3-tag-carousel li .remove a:hover,
+.yui3-tag-carousel li .confirm a:hover {
 	color: red;
-}
-.yui3-tag-carousel li .confirm {
-	float: right;
-	background-color: #DDD;
-	padding: 4px 6px;
-	-moz-border-radius: 8px;
-	border-radius: 8px;
-	font-weight: bold;
+	text-decoration: none;
 }
 
 
diff --git a/web/js/game/input.js b/web/js/game/input.js
index e99529d..ef90959 100644
--- a/web/js/game/input.js
+++ b/web/js/game/input.js
@@ -54,29 +54,18 @@ YUI.add('game-input', function(Y) {
 		destructor : function() {
 		},
 		
-		updateTags : function(matched) {
-			var tags =  this.get("tags");
-			var i=0, j=0, length=tags.length;
-			for(i; i < matched.length; i++) {
-				var match = matched[i];
-				while(j<length&&(match.label!==tags[j].label)) {
-					j++;
-				}
-				var tag = tags[j];
-				if(tag&&(tag.match!==match.match)) {
-					if(tag.match !== match.match) {
-						tag.match = match.match;
-						tag.node.addClass(match.match);
-					}
-					if(tag.order !== match.order) {
-						tag.order !== match.order;
-						tag.node.addClass(this.orderClass(match));
-					}
+		updateTags : function(tags) {
+			for(var i=0; i < tags.length; i++) {
+				var tag = tags[i];
+				console.log(tag);
+				var node = this._tagNode(tag.annotation);
+				if(tag.score) {
+					node.one('.score').setContent(tag.score);
 				}
+				this._setStyle(node, tag);
 			}
-			this.set("tags", tags);
 		},
-
+	
 		_renderTagList : function() {							
 			// add list
 			var	list = this.output.one("."+GameInput.LIST_CLASS);
@@ -91,39 +80,48 @@ YUI.add('game-input', function(Y) {
 			var tags = this.get("tags");
  			if(tags) {
 				for(var i=0; i < tags.length; i++) {
-					this.list.append(this.formatTag(tags[i]));
+					this.addTag(tags[i]);
 				}
 			}
 		},
 		
 		formatTag : function(tag) {
-			return "<li class='"
-				+this.matchClass(tag)+" "
-				+this.typeClass(tag)+" "
-				+this.orderClass(tag)+"'>"
-				+tag.label+"</li>";
-		},
-		
-		matchClass : function(tag) {
-			return tag.match||"tag";
-		},
-		typeClass : function(tag) {
-			return (tag.type=="uri"||tag.uri) ? "uri" : "literal";
-		},
-		orderClass : function(tag) {
-			return (tag.match&&tag.order===1) ? "first" : "";
+			var score = (tag.match&&tag.match.score) ? tag.match.score : "";
+			return = '<li><span class="label">'
+				+tag.label+'</span>'
+				+'<span class="score">'+score+'</span></li>';
 		},
 		
 		addTag : function(tag) {
 			this.input.set("value", "");
 			tag.node = Y.Node.create(this.formatTag(tag));
+			this._setStyle(tag.node, tag);
 			this.set("tags", tag);
 			this.list.prepend(tag.node);
 		},
 		
+		_setStyle : function(node, tag) {
+			var match = tag.match;
+			if(match) {
+				node.addClass(match.type);
+				if(match.order===1) {
+					node.addClass("first");
+				}
+			}
+		},
+		
+		_tagNode : function(id) {
+			var tags = this.get("tags");
+			for (var i=0; i < tags.length; i++) {
+				if(tags[i].annotation == id) {
+					return tags[i].node;
+				}
+			}
+		}
+		
 		_onKeyDown : function(e) {
 			if(e.charCode === 13) {
-				var tag = {label:this.input.get("value")};
+				var tag = this.input.get("value");
 				this.fire("enter", tag);
 				if(this.get("autoAddTag")) {
 					this.addTag(tag);
diff --git a/web/js/tagcarousel/tagcarousel.js b/web/js/tagcarousel/tagcarousel.js
index 0d35399..9d2cb8b 100644
--- a/web/js/tagcarousel/tagcarousel.js
+++ b/web/js/tagcarousel/tagcarousel.js
@@ -129,16 +129,15 @@ YUI.add('tag-carousel', function(Y) {
 				match = item.match,
 				html = "";
 				
-			if(this.get("confirm")&&match) {
-				html += '<div class="label match">'+label;
-				if(match.type=="exact") {
-					html += '</div>';
-				} else {
-					html += match.type=='stem' ? ' = ' : (match.type=='specific' ? ' &lt; ' : ' gt ')
-					html += match.value.value;
-					html += '</div>';
-					html += '<div class="confirm"><a href="javascript:{}">?</a></div>';
+			if(this.get("confirm")&&(match&&!match.score)) {
+				var sep = match.type=='specific' ? '&lt;' : (match.type=='generic' ? '&gt;' : '=')
+				html += '<div class="label match">'
+					+label
+					+" "+sep+" "
+					+match.value.value;
+					+'</div>';
 				}
+				html += '<div class="confirm"><a href="javascript:{}">?</a></div>';
 			}
 			else {
 				html += '<div class="label">'+label+'</div>';				
@@ -147,12 +146,15 @@ YUI.add('tag-carousel', function(Y) {
 			if(item.count) {
 				html += '<div class="count">'+item.count+'</div>';
 			}
-			if(this.get("edit")) {
+			if(this.get("edit")&&!(match&&match.score)) {
 				html += '<div class="edit"><a href="javascript:{}">e</a></div>';
 			}
 			if(this.get("remove")) {
 				html += '<div class="remove"><a href="javascript:{}">x</a></div>';
 			}
+			if(match&&match.score) {
+				html += '<div class="score">'+match.score+'</div>';
+			}
 			
 			if(item.uri) {
 				return '<a href="javascript:{}">'+html+'</a>';
@@ -268,14 +270,15 @@ YUI.add('tag-carousel', function(Y) {
 		},
 		
 		scoreIndex : function(index, score, type) {
-			if(score>0) {
-				var item = this.listNode.all("li").item(index);
+			var item = this.listNode.all("li").item(index);
+			if(type=='edit'&&score>0) {
 				item.addClass('scored');
-				if(type=='edit') {
-					item.one('.edit').setContent(score);
-				} else if(type=='confirm') {
-					item.one('.confirm').setContent(score);
-				}
+				item.one('.score').setContent(score);
+				item.one('.edit').addClass("hidden");
+			} else if(type=='confirm') {
+				item.addClass('scored');
+				item.one('.score').setContent(score);
+				item.one('.confirm').addClass("hidden");
 			}
 		},