Fix CSS for Virtual Collection Builder
diff --git a/dev/demo/vc.html b/dev/demo/vc.html
index 9eb7648..bc8c340 100644
--- a/dev/demo/vc.html
+++ b/dev/demo/vc.html
@@ -21,6 +21,8 @@
padding: 1em;
font-family: mono;
}
+
+
</style>
</head>
<body>
diff --git a/dev/js/src/util.js b/dev/js/src/util.js
index b3bb423..f3df4fc 100644
--- a/dev/js/src/util.js
+++ b/dev/js/src/util.js
@@ -41,6 +41,21 @@
KorAP.API = KorAP.API || {};
KorAP.Locale = KorAP.Locale || {};
+ var loc = KorAP.Locale;
+ loc.OR = loc.OR || 'or';
+ loc.AND = loc.AND || 'and';
+
+ // Add new stylesheet object lazily to document
+ KorAP.newStyleSheet = function () {
+ if (KorAP._sheet === undefined) {
+ var sElem = document.createElement('style');
+ document.head.appendChild(sElem);
+ KorAP._sheet = sElem.sheet;
+ };
+ return KorAP._sheet;
+ };
+
+
// Default log message
KorAP.log = KorAP.log || function (type, msg) {
console.log(type + ": " + msg);
diff --git a/dev/js/src/vc.js b/dev/js/src/vc.js
index 65ac5ca..4598275 100644
--- a/dev/js/src/vc.js
+++ b/dev/js/src/vc.js
@@ -38,13 +38,13 @@
], function (unspecDocClass, docClass, docGroupClass) {
"use strict";
+ // ???
KorAP._validStringMatchRE = new RegExp("^(?:eq|ne|contains|excludes)$");
- // KorAP._validRegexMatchRE = new RegExp("^(?:eq|ne)$");
KorAP._validDateMatchRE = new RegExp("^[lg]?eq$");
KorAP._validDateRE = new RegExp("^(?:\\d{4})(?:-\\d\\d(?:-\\d\\d)?)?$");
- // KorAP._validGroupOpRE = new RegExp("^(?:and|or)$");
- // KorAP._quote = new RegExp("([\"\\\\])", 'g');
+ KorAP._overrideStyles = false;
+ var loc = KorAP.Locale;
/**
* Virtual Collection
@@ -54,8 +54,36 @@
return null;
},
+ _init : function () {
+ if (!KorAP._overrideStyles) {
+ var sheet = KorAP.newStyleSheet();
+
+ // Add css rule for OR operations
+ sheet.insertRule(
+ '.vc .docGroup[data-operation=or] > .doc::before,' +
+ '.vc .docGroup[data-operation=or] > .docGroup::before ' +
+ '{ content: "' + loc.OR + '" }',
+ 0
+ );
+
+ // Add css rule for AND operations
+ sheet.insertRule(
+ '.vc .docGroup[data-operation=and] > .doc::before,' +
+ '.vc .docGroup[data-operation=and] > .docGroup::before ' +
+ '{ content: "' + loc.AND + '" }',
+ 1
+ );
+
+ console.log(sheet);
+
+ KorAP._overrideStyles = true;
+ };
+
+ return this;
+ },
+
create : function () {
- return Object.create(this);
+ return Object.create(this)._init();
},
clean : function () {
@@ -67,7 +95,7 @@
},
render : function (json) {
- var obj = Object.create(this);
+ var obj = Object.create(this)._init();
if (json !== undefined) {
// Root object
diff --git a/dev/js/src/vc/docgroup.js b/dev/js/src/vc/docgroup.js
index 5e5f010..0db4b4c 100644
--- a/dev/js/src/vc/docgroup.js
+++ b/dev/js/src/vc/docgroup.js
@@ -12,6 +12,8 @@
var _validGroupOpRE = new RegExp("^(?:and|or)$");
+ var loc = KorAP.Locale;
+
var docGroupClass = {
_ldType : "docGroup",
diff --git a/dev/js/src/vc/operators.js b/dev/js/src/vc/operators.js
index 9b0ebd1..91f009f 100644
--- a/dev/js/src/vc/operators.js
+++ b/dev/js/src/vc/operators.js
@@ -4,8 +4,6 @@
define(['util'], function () {
var loc = KorAP.Locale;
- loc.AND = loc.AND || 'and';
- loc.OR = loc.OR || 'or';
loc.DEL = loc.DEL || '×';
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index 992fac0..c5d7e7e 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -1,99 +1,104 @@
@charset "utf-8";
@import "../util";
-$left-padding: 28pt; // 2.8em;
+$left-padding: 4em; // 32pt; // 2.8em;
$border-size: 2px;
+$bracket-size: .4em; // 4pt;
+/**
+ * Virtual Collection Builder
+ */
.vc {
- background-color: $light-green;
- margin-top: 10px;
+ margin-top: 4pt;
+
+ /**
+ * Rules for all docGroups
+ */
.docGroup {
position: relative;
display: inline-block;
+ margin-left: $left-padding; // 28pt
+
+ .docGroup { display: block; }
+
color: $nearly-white;
-
- margin-left: $left-padding; // 2.8em
-
- // .6em .5em
- border-width: 0 (2 * $border-size);
-
- padding: {
- top: 10pt;
- bottom: 2pt;
- left: 0pt;
- right: 6pt;
- }
-
+ padding: 4pt 2pt 4pt 0pt;
border: {
radius: $standard-border-radius * 2;
style: solid;
+ width: 0 $bracket-size; // .6em .5em
}
- .docGroup {
- display: block;
+ // Whiten on hover
+ &:hover {
+ background-color: rgba(255,255,255,.06);
}
+ &[data-operation] {
+ > .doc:first-child::before,
+ > .docGroup:first-child::before {
+ content: none;
+ }
+ > .doc::before,
+ > .docGroup::before {
+ display: inline-block;
+ position: absolute;
+ text-align: right;
+ width: $left-padding;
+ margin-left: -1 * ($left-padding + .5em); // -28pt
+ color: $dark-green;
+ }
+ > .docGroup::before {
+ margin-left: -1 * ($left-padding + .5em) + (-1 * $bracket-size);
+ }
+ }
+
+ // Or operation
+ &[data-operation=or] {
+ border-color: $dark-orange;
+ > .doc::before,
+ > .docGroup::before {
+ // This will be overruled by JS!
+ content: "or";
+ }
+ }
+
+ // And operation
+ &[data-operation=and] {
+ > .doc::before,
+ > .docGroup::before {
+ // This will be overruled by JS!
+ content: "and";
+ }
+ }
+
+
+ /**
+ * All operators on groups
+ */
> .operators {
position: absolute;
display: block;
top: 10px;
vertical-align: middle;
left: 3px;
- border-width: 2px 2px 2px 0;
- border-top-right-radius: 7px;
- border-bottom-right-radius: 7px;
+ > span:first-child {
+ border: {
+ top-left-radius: 0;
+ bottom-left-radius: 0;
+ }
+ }
margin-left: 100%;
padding: 0;
}
-
- &:hover {
- background-color: rgba(255,255,255,.05);
- }
-
- &[data-operation=or] {
- border-color: $dark-orange;
- > .doc::before,
- > .docGroup::before {
- content: "or";
- }
- > .operators {
- border-color: $dark-orange;
- background-color: $dark-orange;
- color: $nearly-white;
- }
- }
-
- &[data-operation=and] {
- > .doc::before,
- > .docGroup::before {
- content: "and";
- }
- }
-
- &[data-operation] {
- > .doc:first-child::before,
- > .docGroup:first-child::before {
- content: '';
- }
- > .doc::before,
- > .docGroup::before {
- display: inline-block;
- text-align: right;
-// width: 2.2em;
- width: $left-padding;
- color: $dark-green;
- }
- > .doc::before {
- padding-right: 1.2em;
- margin-right: .1em;
- }
- > .docGroup::before {
- position: absolute;
- }
- }
}
+
+ /**
+ * All document rules
+ */
.doc {
+ padding-left: $left-padding;
> span + span {
margin-left: 5pt;
}
@@ -101,28 +106,13 @@
> span.value {
font-weight: bold;
}
+
+ /**
+ * All operators on docs
+ */
> .operators {
display: inline-block;
- border-color: $dark-orange;
- border-width: 2px 2px 2px 2px;
- border-radius: 7px;
-
margin-left: 10px;
- > span {
- &.and {
- border: {
- radius: inherit;
- top-right-radius: 0;
- bottom-right-radius: 0;
- }
- &.delete {
- border: {
- top-left-radius: 0;
- bottom-left-radius: 0;
- }
- }
- }
- }
}
> span.key {
position: relative;
@@ -139,9 +129,11 @@
display: inline-block;
color: $dark-orange;
&::after {
- font-family: FontAwesome;
- font-style: normal;
- font-weight: normal;
+ font: {
+ family: FontAwesome;
+ style: normal;
+ weight: normal;
+ }
content: $fa-rewrite;
text-decoration: underline;
}
@@ -151,36 +143,43 @@
}
}
+ /**
+ * All operators
+ */
.operators {
opacity: 0;
white-space: nowrap;
padding: 0;
font-size: 0;
line-height: 0;
- color: $light-green;
- border-color: $nearly-white;
text-align: center;
- font-weight: bold;
- border-style: solid;
> span {
+ box-shadow: $choose-box-shadow;
cursor: pointer;
font-size: 9pt;
- line-height: 1.3em;
+ line-height: 1.5em;
padding: 0 4px;
display: inline-block;
- &.and {
- background-color: $nearly-white;
- color: $light-green;
+ @include choose-item;
+ border-style: solid;
+ border-width: $border-size 0;
+ &:hover {
+ @include choose-hover;
}
- &.or {
- background-color: $dark-orange;
- color: $nearly-white;
+ &:first-child {
+ border: {
+ left-width: $border-size;
+ top-left-radius: $standard-border-radius;
+ bottom-left-radius: $standard-border-radius;
+ }
}
- &.delete {
- background-color: red;
- border-radius: inherit;
- color: $nearly-white;
+ &:last-child {
+ border: {
+ right-width: $border-size;
+ top-right-radius: $standard-border-radius;
+ bottom-right-radius: $standard-border-radius;
+ }
}
}
}
@@ -189,12 +188,6 @@
margin-left: 0;
}
-
- .docGroup > .docGroup::before {
- background-color: red;
- margin-left: -1 * $left-padding; // -3.4em;
- }
-
.doc, .docGroup {
&:hover > .operators {
opacity: 1;
@@ -204,15 +197,10 @@
}
-/*
-.vc .docGroup[data-operation=and]::before,
-.vc .docGroup[data-operation=and] .operators {
- background-color: white;
-}
-*/
-
+/**
+ * The z-index cascade for groups.
+ */
$dg-index : 30;
-
.docGroup {
> .operators {
z-index: $dg-index;