Modify vc
diff --git a/public/css/vc.css b/public/css/vc.css
index 0474e36..0b25c66 100644
--- a/public/css/vc.css
+++ b/public/css/vc.css
@@ -9,9 +9,10 @@
background-color: #7ba400;
color: white;
font-family: tahoma, verdana, arial;
+ font-size: 10pt;
}
-.vc span + span {
+.vc .doc > span + span {
margin-left: 5pt;
}
@@ -19,13 +20,18 @@
position: relative;
background-color: #7ba400;
color: white;
- margin-left: 2em;
display: inline-block;
border-radius: 10px;
- border-width: 0 3px 0 3px;
border-style: solid;
- padding-left: 10px;
- padding-right: 10px;
+
+ /* See margin-left in docGroup::before */
+ margin-left: 2.8em;
+ border-width: 0 3px 0 3px;
+ padding: .6em .5em;
+}
+
+.vc > .docGroup {
+ margin-left: 0;
}
.vc .operators {
@@ -36,13 +42,10 @@
line-height: 0;
}
-.vc .operators > span,
-.vc .docGroup::before {
+.vc .operators > span {
+ cursor: pointer;
font-size: 9pt;
line-height: 1.3em;
-}
-
-.vc .operators > span {
padding: 0 4px;
display: inline-block;
}
@@ -52,6 +55,12 @@
color: #7ba400;
}
+.vc .doc > .operators > span.and {
+ border-radius: inherit;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
.vc .operators > span.or {
background-color: #ffa500;
color: white;
@@ -63,23 +72,101 @@
color: white;
}
+.vc .doc > .operators > span.delete {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+.vc .doc > .operators {
+ margin-left: 10px;
+}
+
+.vc .docGroup[data-operation=or] > .doc::before,
+.vc .docGroup[data-operation=or] > .docGroup::before {
+ content: "oder";
+}
+
+.vc .docGroup[data-operation=and] > .doc::before,
+.vc .docGroup[data-operation=and] > .docGroup::before {
+ content: "und";
+}
+
+.vc .docGroup[data-operation] > .doc:first-child::before,
+.vc .docGroup[data-operation] > .docGroup:first-child::before {
+ content: '';
+}
+
+.vc .docGroup[data-operation] > .doc::before,
+.vc .docGroup[data-operation] > .docGroup::before {
+ display: inline-block;
+ text-align: right;
+ width: 2.2em;
+}
+
+
+.vc .docGroup[data-operation] > .doc::before {
+ padding-right: 1.2em;
+}
+
+.vc .docGroup[data-operation] > .docGroup::before {
+ position: absolute;
+}
+
+.vc .docGroup[data-operation] > .doc::before {
+ margin-right: .1em;
+}
+
+.vc .docGroup > .docGroup::before {
+ margin-left: -3.4em;
+}
+
+/*
.vc .docGroup[data-operation=and]::before,
.vc .docGroup[data-operation=and] .operators {
background-color: white;
}
+*/
+
+.vc .docGroup[data-operation] > .doc::before,
+.vc .docGroup[data-operation] > .docGroup::before {
+ color: #496000;
+}
.vc .docGroup[data-operation=or] {
border-color: #ffa500;
}
-.vc .docGroup[data-operation=or]::before,
-.vc .docGroup[data-operation=or] .operators {
+.vc .docGroup[data-operation=or] > .operators {
border-color: #ffa500;
background-color: #ffa500;
color: white;
}
-.vc .docGroup::before,
+.docGroup > .operators {
+ z-index: 30;
+}
+
+.docGroup .docGroup > .operators {
+ z-index: 31;
+}
+
+.docGroup .docGroup .docGroup > .operators {
+ z-index: 32;
+}
+
+.docGroup .docGroup .docGroup .docGroup > .operators {
+ z-index: 33;
+}
+
+.docGroup .docGroup .docGroup .docGroup .docGroup > .operators {
+ z-index: 34;
+}
+
+.vc .doc > span.key,
+.vc .doc > span.value {
+ font-weight: bold;
+}
+
.vc .operators {
color: #7ba400;
border-color: white;
@@ -88,7 +175,6 @@
border-style: solid;
}
-.vc .docGroup::before,
.vc .docGroup > .operators {
position: absolute;
display: block;
@@ -96,29 +182,9 @@
vertical-align: middle;
}
-
-
-.vc .docGroup::before {
- width: 3em;
- /* width */
- left: -3em;
- /* border sizes (own and reals) */
- margin-left: -5px;
- border-width: 2px 0 2px 2px;
- border-top-left-radius: 7px;
- border-bottom-left-radius: 7px;
-}
-
-.vc .docGroup[data-operation=and]::before {
- content: "und";
-}
-
-.vc .docGroup[data-operation=or]::before {
- content: "oder";
-}
-
.vc .doc > .operators {
display: inline-block;
+ border-color: #ffa500;
border-width: 2px 2px 2px 2px;
border-radius: 7px;
}
@@ -129,6 +195,7 @@
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
margin-left: 100%;
+ padding: 0;
}
.vc .docGroup:hover {
diff --git a/public/js/demo/vc.html b/public/js/demo/vc.html
index 6c306b0..d4924e4 100644
--- a/public/js/demo/vc.html
+++ b/public/js/demo/vc.html
@@ -29,6 +29,24 @@
"key":"Veröffentlichungsort",
"value":"hihi",
"match":"match:eq"
+ },
+ {
+ "@type":"korap:docGroup",
+ "operation":"operation:or",
+ "operands":[
+ {
+ "@type":"korap:doc",
+ "key":"Titel",
+ "value":"Baum",
+ "match":"match:eq"
+ },
+ {
+ "@type":"korap:doc",
+ "key":"Veröffentlichungsort",
+ "value":"hihi",
+ "match":"match:eq"
+ }
+ ]
}
]
},
diff --git a/public/js/spec/vcSpec.js b/public/js/spec/vcSpec.js
index ce2ca4a..2010adf 100644
--- a/public/js/spec/vcSpec.js
+++ b/public/js/spec/vcSpec.js
@@ -631,7 +631,46 @@
it('should be based on a nested docGroup', function () {
var vc = KorAP.VirtualCollection.render({
"@type" : "korap:docGroup",
- "operation" : "operation:or",
+ "operation" : "operation:and",
+ "operands" : [
+ {
+ "@type": 'korap:doc',
+ "key": 'pubDate',
+ "match": 'match:geq',
+ "value": '2014-05-12',
+ "type": 'type:date'
+ },
+ {
+ "@type": 'korap:doc',
+ "key": 'pubDate',
+ "match": 'match:leq',
+ "value": '2014-12-05',
+ "type": 'type:date'
+ },
+ {
+ "@type": 'korap:doc',
+ "key": 'foo',
+ "match": 'match:eq',
+ "value": 'bar',
+ "type": 'type:string'
+ }
+ ]
+ });
+
+ var docGroup = vc.root();
+ var doc = docGroup.getOperand(1);
+ expect(doc.key()).toEqual("pubDate");
+ expect(docGroup.delOperand(doc)).toEqual(true);
+ doc = docGroup.getOperand(1);
+ expect(doc.key()).toEqual("foo");
+ });
+
+ it('should be modifiable', function () {
+ var vc = KorAP.VirtualCollection.render();
+
+ var vc = KorAP.VirtualCollection.render({
+ "@type" : "korap:docGroup",
+ "operation" : "operation:and",
"operands" : [
{
"@type": 'korap:doc',
@@ -641,37 +680,19 @@
"type": 'type:string'
},
{
- "@type" : "korap:docGroup",
- "operation" : "operation:and",
- "operands" : [
- {
- "@type": 'korap:doc',
- "key": 'pubDate',
- "match": 'match:geq',
- "value": '2014-05-12',
- "type": 'type:date'
- },
- {
- "@type": 'korap:doc',
- "key": 'pubDate',
- "match": 'match:leq',
- "value": '2014-12-05',
- "type": 'type:date'
- }
- ]
+ "@type": 'korap:doc',
+ "key": 'pubDate',
+ "match": 'match:eq',
+ "value": '2014-12-05',
+ "type": 'type:date'
}
]
});
+
expect(vc.element().getAttribute('class')).toEqual('vc');
- expect(vc.element().firstChild.getAttribute('class')).toEqual('docGroup');
- expect(vc.element().firstChild.children[0].getAttribute('class')).toEqual('doc');
- var dg = vc.element().firstChild.children[1];
- expect(dg.getAttribute('class')).toEqual('docGroup');
- expect(dg.children[0].getAttribute('class')).toEqual('doc');
- expect(dg.children[1].getAttribute('class')).toEqual('doc');
- expect(dg.children[2].getAttribute('class')).toEqual('operators');
- expect(vc.element().firstChild.children[2].getAttribute('class')).toEqual('operators');
- });
+ expect(vc.root().element().getAttribute('class')).toEqual('docGroup');
+ expect(vc.root().operation()).toEqual('and');
+ });
});
describe('KorAP.Operators', function () {
diff --git a/public/js/src/vc.js b/public/js/src/vc.js
index fe702a7..fbdc118 100644
--- a/public/js/src/vc.js
+++ b/public/js/src/vc.js
@@ -96,6 +96,20 @@
}
};
+ KorAP._or = function (e) {
+ var obj = this.parentNode.refTo;
+ };
+
+ KorAP._and = function (e) {
+ var obj = this.parentNode.refTo;
+ };
+
+ KorAP._delete = function (e) {
+ var obj = this.parentNode.refTo;
+ obj.parent().delOperand(obj);
+ // Todo: CLEAR ALL THE THINGS!
+ };
+
/**
* Operators for criteria
*/
@@ -115,6 +129,8 @@
var op = this._element;
+ op.refTo = this.parent();
+
// Remove everything underneath
_removeChildren(op);
@@ -122,6 +138,7 @@
if (this._and === true) {
var andE = document.createElement('span');
andE.setAttribute('class', 'and');
+ andE.addEventListener('click', KorAP._and, false);
andE.appendChild(document.createTextNode(KorAP.Locale.AND));
op.appendChild(andE);
};
@@ -130,6 +147,7 @@
if (this._or === true) {
var orE = document.createElement('span');
orE.setAttribute('class', 'or');
+ orE.addEventListener('click', KorAP._or, false);
orE.appendChild(document.createTextNode(KorAP.Locale.OR));
op.appendChild(orE);
};
@@ -139,11 +157,19 @@
var delE = document.createElement('span');
delE.setAttribute('class', 'delete');
delE.appendChild(document.createTextNode(KorAP.Locale.DEL));
+ delE.addEventListener('click', KorAP._delete, false);
op.appendChild(delE);
};
return op;
},
+
+ // Be aware! This may be cyclic
+ parent : function (obj) {
+ if (arguments.length === 1)
+ this._parent = obj;
+ return this._parent;
+ },
element : function () {
// Return existing element
@@ -208,7 +234,6 @@
op.element()
);
-
return this.element();
},
element : function () {
@@ -564,6 +589,21 @@
return this._operands[index];
},
+ // Delete operand from group
+ delOperand : function (obj) {
+ for (var i in this._operands) {
+ if (this._operands[i] === obj) {
+ this._operands.splice(i,1);
+
+ // Todo: Update has to check
+ // that this may mean the group is empty etc.
+ this.update();
+ return true;
+ };
+ };
+ return false;
+ },
+
// Deserialize from json
fromJson : function (json) {
if (json === undefined)
@@ -638,12 +678,15 @@
this._parent = obj;
return this._parent;
},
+
+ // Be aware! This may be cyclic
operators : function (and, or, del) {
if (arguments === 0)
return this._ops;
this._ops = KorAP.Operators.create(
and, or, del
);
+ this._ops.parent(this);
return this._ops;
},
toJson : function () {