Added tagger widget
diff --git a/Gruntfile.js b/Gruntfile.js
index 7dd4651..b75ca2f 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -114,7 +114,7 @@
files: ['dev/scss/{util,base,fonts,kalamar,media}.scss',
'dev/scss/footer/footer.scss',
'dev/scss/header/{header,hint,menu,searchbar,vc,datepicker}.scss',
- 'dev/scss/main/{alertify,koralquery,highlight,kwic,logos,' +
+ 'dev/scss/main/{alertify,koralquery,highlight,kwic,logos,tagger,' +
'main,matchinfo,pagination,query,'+
'resultinfo,sidebar,tutorial}.scss'
],
diff --git a/dev/demo/tagger.html b/dev/demo/tagger.html
new file mode 100644
index 0000000..ee4e8c8
--- /dev/null
+++ b/dev/demo/tagger.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Tagger demo</title>
+ <meta charset="utf-8" />
+ <script data-main="taggerdemo.js" src="../js/lib/require.js" async="async"></script>
+ <link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
+ <style type="text/css" rel="stylesheet">
+.info {
+ background-color: #ddd;
+ color: black;
+ padding: 1em;
+ font-family: mono;
+}
+body {
+ margin: 0;
+ background-color: #ddd;
+}
+span.close::after {
+ content: 'x'
+}
+
+ </style>
+ </head>
+ <body>
+ <main>
+ <div class="tagger" id="tagger"></div>
+ </main>
+ </body>
+</html>
+
diff --git a/dev/demo/taggerdemo.js b/dev/demo/taggerdemo.js
new file mode 100644
index 0000000..f0da311
--- /dev/null
+++ b/dev/demo/taggerdemo.js
@@ -0,0 +1,17 @@
+requirejs.config({
+ baseUrl: '../js/src',
+ paths : {
+ 'lib': '../lib'
+ }
+});
+
+var gTagger;
+
+require(['tagger', 'lib/domReady'], function (tagger, domReady) {
+ domReady(function(){
+ console.log('Hey');
+ var t = document.getElementById('tagger');
+ gTagger = tagger.create(t);
+ });
+});
+
diff --git a/dev/js/src/tagger.js b/dev/js/src/tagger.js
new file mode 100644
index 0000000..dc7be4d
--- /dev/null
+++ b/dev/js/src/tagger.js
@@ -0,0 +1,40 @@
+define([], function () {
+
+ // "use strict";
+
+ return {
+ create : function (elem) {
+ var obj = Object.create(this);
+ obj._elem = elem;
+ elem.appendChild(
+ document.createElement('div')
+ );
+ var newCat = elem.appendChild(
+ document.createElement('input')
+ );
+
+ newCat.setAttribute('type', 'text');
+
+ newCat.addEventListener('keypress', function (e) {
+ var key = e.keyCode || e.which;
+ if (key === 13) {
+ obj.addTag(this.value);
+ this.value = '';
+ };
+ });
+
+ obj._cat = [];
+ },
+ addTag : function (name) {
+ this._cat.push(name);
+ var cat = document.createElement('span');
+ cat.appendChild(
+ document.createTextNode(name)
+ );
+ cat.appendChild(
+ document.createElement('span')
+ ).setAttribute('class','close');
+ this._elem.firstChild.appendChild(cat);
+ }
+ };
+});
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index 2bd308d..8702e9d 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -8,6 +8,7 @@
@import "sidebar"; // Navigation on the left side
@import "tutorial"; // Embedded and non-embedded tutorial
@import "koralquery"; // KoralQuery
+@import "tagger"; // Tagger
@import "alertify";
div.intro {
diff --git a/dev/scss/main/tagger.scss b/dev/scss/main/tagger.scss
new file mode 100644
index 0000000..f794f0e
--- /dev/null
+++ b/dev/scss/main/tagger.scss
@@ -0,0 +1,55 @@
+@charset "utf-8";
+@import "../util";
+
+$border-size: 1px;
+
+.tagger {
+ display: table;
+ border-collapse: collapse;
+ width: 100%;
+ font-size: 100%;
+
+ // The tag list
+ > div {
+ display: table-cell;
+ font-size: inherit;
+ white-space: nowrap;
+ width: 0;
+
+ // The tag
+ > span {
+ display: inline-block;
+ white-space: nowrap;
+ background-color: $dark-orange;
+ padding: 0 4px;
+ color: rgba(0,0,0,0.3);
+ margin-right: 2px;
+ box-shadow: $choose-box-shadow;
+ border: $choose-border;
+ border-radius: $standard-border-radius;
+
+ > span {
+ cursor: pointer;
+ &::after {
+ font-size: 70%;
+ vertical-align: top;
+ margin-left: 2px;
+ color: rgba(0,0,0,0.2);
+ font-family: 'FontAwesome';
+ content: $fa-close;
+ }
+ }
+ }
+ }
+
+ // The tag input field
+ input[type=text] {
+ display: table-cell;
+ width: 100%;
+ border: none;
+ background-color: $light-grey;
+ font-size: inherit;
+ }
+}
+
+