More on tagger
diff --git a/dev/demo/taggerdemo.js b/dev/demo/taggerdemo.js
index f0da311..f30c23a 100644
--- a/dev/demo/taggerdemo.js
+++ b/dev/demo/taggerdemo.js
@@ -9,9 +9,7 @@
require(['tagger', 'lib/domReady'], function (tagger, domReady) {
domReady(function(){
- console.log('Hey');
- var t = document.getElementById('tagger');
- gTagger = tagger.create(t);
+ gTagger = tagger.create(document.getElementById('tagger'));
});
});
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 9aa410d..1ead697 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -8,6 +8,7 @@
'vc/array',
'lib/alertify',
'session',
+ 'tagger',
'api',
'mailToChiffre',
'lib/highlight/highlight.pack',
@@ -20,7 +21,8 @@
hintArray,
vcArray,
alertifyClass,
- sessionClass) {
+ sessionClass,
+ tagger) {
// Set hint array for hint helper
KorAP.hintArray = hintArray;
diff --git a/dev/js/src/palette.js b/dev/js/src/palette.js
new file mode 100644
index 0000000..8c9f3fa
--- /dev/null
+++ b/dev/js/src/palette.js
@@ -0,0 +1,80 @@
+define(['util'],function () {
+ /*
+ * Created with http://tools.medialab.sciences-po.fr/iwanthue/
+ * and H: 0-360, C: 0.4-2.1, L: 0.7-1.5, 64 colors
+ */
+ var palette = [
+ '9C8AC7',
+ '6DED31',
+ 'DF7F23',
+ '5AECD1',
+ 'F54597',
+ 'D4D275',
+ 'E6A8A1',
+ '67E682',
+ '719A93',
+ 'E67AE6',
+ 'E8F03F',
+ 'F45042',
+ '6D9C25',
+ 'D0C3D9',
+ 'E37076',
+ '509A58',
+ 'BE9962',
+ 'D88AB6',
+ '71ABCE',
+ '62DCEB',
+ 'D4B73C',
+ 'A0E5B0',
+ '5BBB26',
+ 'A7E230',
+ '7E8EEA',
+ 'D1856B',
+ '59E9A9',
+ 'F24A61',
+ 'A6D455',
+ 'AEE38B',
+ '4DA385',
+ '999C46',
+ 'AFDDDE',
+ 'BA85E0',
+ 'B68C31',
+ '8AA46C',
+ 'D9874C',
+ 'A18EA8',
+ 'E56BAC',
+ 'ECA72F',
+ '3AE152',
+ '5B9EDF',
+ 'E9672F',
+ '43B046',
+ 'E96D59',
+ 'D6B3E6',
+ 'E6BB6A',
+ '92C5A9',
+ 'BE7C85',
+ '9C9B1E',
+ 'CCD896',
+ '84E861',
+ 'DA7093',
+ 'DDEA6F',
+ 'BCC92E',
+ '59C9BD',
+ '52A8B0',
+ '51BC7C',
+ '7EB051',
+ 'F0D036',
+ 'D970C5',
+ 'E95F7D',
+ 'EF9798',
+ 'ED5490'
+ ];
+
+ KorAP.Palette = {
+ getC : function (index) {
+ return '#' + palette[index % 64];
+ }
+ };
+
+ return KorAP.Palette;
+});
diff --git a/dev/js/src/tagger.js b/dev/js/src/tagger.js
index dc7be4d..4ff7c03 100644
--- a/dev/js/src/tagger.js
+++ b/dev/js/src/tagger.js
@@ -1,10 +1,11 @@
-define([], function () {
+define(['palette'], function (p) {
// "use strict";
return {
create : function (elem) {
var obj = Object.create(this);
+ obj._nr = 0;
obj._elem = elem;
elem.appendChild(
document.createElement('div')
@@ -25,8 +26,12 @@
obj._cat = [];
},
+
addTag : function (name) {
this._cat.push(name);
+
+ this._nr++;
+
var cat = document.createElement('span');
cat.appendChild(
document.createTextNode(name)
@@ -34,6 +39,9 @@
cat.appendChild(
document.createElement('span')
).setAttribute('class','close');
+
+ cat.style.backgroundColor = p.getC(this._nr);
+
this._elem.firstChild.appendChild(cat);
}
};
diff --git a/dev/scss/main/tagger.scss b/dev/scss/main/tagger.scss
index f794f0e..c3a08be 100644
--- a/dev/scss/main/tagger.scss
+++ b/dev/scss/main/tagger.scss
@@ -2,6 +2,7 @@
@import "../util";
$border-size: 1px;
+$tagcolor: rgba(0,0,0,0.5);
.tagger {
display: table;
@@ -18,23 +19,30 @@
// The tag
> span {
+ font-size: 80%;
display: inline-block;
white-space: nowrap;
background-color: $dark-orange;
- padding: 0 4px;
- color: rgba(0,0,0,0.3);
+ padding: 2px 6px;
+ color: $tagcolor;
+ text-shadow: 1px 1px 0px rgba(255,255,255,0.3);
margin-right: 2px;
box-shadow: $choose-box-shadow;
- border: $choose-border;
- border-radius: $standard-border-radius;
-
+ cursor: pointer;
+ border: {
+ width: $border-size;
+ style:solid;
+ color: rgba(0,0,0,0.3);
+ radius: $standard-border-radius;
+ }
> span {
- cursor: pointer;
+ cursor: crosshair;
&::after {
font-size: 70%;
vertical-align: top;
- margin-left: 2px;
- color: rgba(0,0,0,0.2);
+ padding-left: 3px;
+ color: $tagcolor;
+ text-shadow: none;
font-family: 'FontAwesome';
content: $fa-close;
}