Integrated string helper for VC (regex don't work yet)
diff --git a/dev/js/spec/vcSpec.js b/dev/js/spec/vcSpec.js
index e1ef441..98ffc3f 100644
--- a/dev/js/spec/vcSpec.js
+++ b/dev/js/spec/vcSpec.js
@@ -1957,6 +1957,69 @@
var sv = stringValClass.create();
expect(sv.regex()).toBe(false);
expect(sv.value()).toBe('');
+
+ sv = stringValClass.create('Baum');
+ expect(sv.regex()).toBe(false);
+ expect(sv.value()).toBe('Baum');
+
+ sv = stringValClass.create('Baum', false);
+ expect(sv.regex()).toBe(false);
+ expect(sv.value()).toBe('Baum');
+
+ sv = stringValClass.create('Baum', true);
+ expect(sv.regex()).toBe(true);
+ expect(sv.value()).toBe('Baum');
+ });
+
+ it('should be modifiable', function () {
+ var sv = stringValClass.create();
+ expect(sv.regex()).toBe(false);
+ expect(sv.value()).toBe('');
+
+ expect(sv.value('Baum')).toBe('Baum');
+ expect(sv.value()).toBe('Baum');
+
+ expect(sv.regex(true)).toBe(true);
+ expect(sv.regex()).toBe(true);
+ });
+
+ it('should have a toggleble regex value', function () {
+ var sv = stringValClass.create();
+ expect(sv.regex()).toBe(false);
+
+ sv.toggleRegex();
+ expect(sv.regex()).toBe(true);
+
+ sv.toggleRegex();
+ expect(sv.regex()).toBe(false);
+ });
+
+ it('should have an element', function () {
+ var sv = stringValClass.create('der');
+ expect(sv.element().nodeName).toBe('DIV');
+ expect(sv.element().firstChild.nodeName).toBe('INPUT');
+ expect(sv.element().firstChild.value).toBe('der');
+ });
+
+ it('should have a classed element', function () {
+ var sv = stringValClass.create();
+ console.log(sv.element());
+ expect(sv.element().classList.contains('regex')).toBe(false);
+ expect(sv.regex()).toBe(false);
+ sv.toggleRegex();
+ expect(sv.element().classList.contains('regex')).toBe(true);
+ });
+
+ it('should be storable', function () {
+ var sv = stringValClass.create();
+ var count = 1;
+ sv.store = function (value, regex) {
+ expect(regex).toBe(true);
+ expect(value).toBe('tree');
+ };
+ sv.regex(true);
+ sv.value('tree');
+ sv.element().lastChild.click();
});
});
});
diff --git a/dev/js/src/vc/doc.js b/dev/js/src/vc/doc.js
index 23cec07..66dfc6e 100644
--- a/dev/js/src/vc/doc.js
+++ b/dev/js/src/vc/doc.js
@@ -418,12 +418,12 @@
// Click on the match operator, show me the menu
_changeValue : function (e) {
+ var v = this.value();
+ var that = this;
// Show datepicker
if (this.type() === 'date') {
var dp = KorAP._vcDatePicker;
-
- var v = this.value();
if (v !== undefined) {
var d = v.split('-', 3);
@@ -435,8 +435,7 @@
dp.select(d[0], d[1], d[2]);
};
- var that = this;
-
+ // Todo: change this
dp.onclick(function (selected) {
// There are values selected
@@ -476,9 +475,31 @@
});
}
else {
- // TODO: Just kidding - this is temporary!
- this.value(window.prompt('Enter new value'));
- this.update();
+ var regex = this.type() === 'regex' ? true : false;
+ var str = stringValClass.create(this.value(), regex);
+ var strElem = str.element();
+
+
+ str.store = function (value, regex) {
+ that.value(value);
+ if (regex === true)
+ that.type('regex');
+ else
+ that.type('string');
+
+ that._element.removeChild(
+ this._element
+ );
+ that.update();
+ };
+
+ // Insert element
+ this._element.insertBefore(
+ strElem,
+ this._valueE
+ );
+
+ str.focus();
};
},
diff --git a/dev/js/src/vc/stringval.js b/dev/js/src/vc/stringval.js
index e07b6a4..f9aa593 100644
--- a/dev/js/src/vc/stringval.js
+++ b/dev/js/src/vc/stringval.js
@@ -2,18 +2,24 @@
* Add string values to the virtual collection
*/
define({
+
+ /**
+ * Create new string value helper.
+ */
create : function () {
var regex = false;
var value = '';
if (arguments.length == 2) {
regex = arguments[1];
};
- if (arguments.length > 1) {
+ if (arguments.length >= 1) {
value = arguments[0];
};
return Object.create(this)._init(value, regex);
},
+
+ // Initialize the string value
_init : function (value, regex) {
this.element();
this.value(value);
@@ -21,6 +27,12 @@
return this;
},
+
+ /**
+ * Get or set the regex boolean value.
+ *
+ * @param bool Either true or false
+ */
regex : function (bool) {
if (arguments.length === 1) {
if (bool) {
@@ -34,6 +46,11 @@
return this._regex;
},
+
+ /**
+ * Toggle the regex, make it either true,
+ * if it is false, or make it false, if it is true.
+ */
toggleRegex : function () {
if (this._regex === false)
this.regex(true);
@@ -41,6 +58,9 @@
this.regex(false);
},
+ /**
+ * Get or set the string value.
+ */
value : function (val) {
if (arguments.length === 1) {
this._value = val;
@@ -48,44 +68,93 @@
};
return this._value;
},
-
+
+
+ // Update dom element
_update : function () {
- this._input.firstChild.data = this._value;
+ this._input.value = this._value;
if (this._regex) {
this._element.classList.add('regex');
}
else {
- this._element.classList.add('regex');
+ this._element.classList.remove('regex');
};
},
+
+ /**
+ * Store the string value.
+ * This method should be overwritten.
+ * The method receives the the value and the regex.
+ */
+ store : function (v,r) {},
+
+
+ focus : function () {
+ this._element.children[0].focus();
+ },
+
+ /**
+ * Get the associated dom element.
+ */
element : function () {
if (this._element !== undefined)
return this._element;
+ // Create element
this._element = document.createElement('div');
- var cl = this._element.classList;
- cl.add('vc-value');
- if (this.regex())
+ var e = this._element;
+ e.setAttribute('tabindex', 0);
+ e.style.outline = 0;
+
+ var cl = e.classList;
+ cl.add('value');
+ if (this.regex() === true)
cl.add('regex');
- this._input = this._element.appendChild(
+ // Add input field
+ this._input = e.appendChild(
document.createElement('input')
);
- this._input.appendChild(
- document.createTextNode(this.value())
- );
-
- this._element.appendChild(
- document.createElement('div')
- ).addEventListener('click', function (e) {
- this.toggleRegex();
- }.bind(this));
-
- var go = this._element.appendChild(
- document.createElement('span')
+ if (this.value() !== undefined)
+ this._input.value = this.value();
+
+ this._input.addEventListener(
+ 'blur',
+ function () {
+ this.store(this.value(), this.regex());
+ }.bind(this)
);
- return this._element;
+ this._input.addEventListener(
+ 'keypress',
+ function (e) {
+ if (e.keyCode == 13) {
+ this.value(this._input.value);
+ this.store(this.value(), this.regex());
+ return false;
+ };
+ }.bind(this)
+ );
+
+ // Add regex button
+ var re = e.appendChild(
+ document.createElement('div')
+ );
+ re.addEventListener('click', function (e) {
+ this.toggleRegex();
+ e.halt();
+ }.bind(this));
+ re.appendChild(document.createTextNode('RE'));
+
+ // Add store button
+ /*
+ e.appendChild(
+ document.createElement('div')
+ ).addEventListener('click', function () {
+ this.store(this.value(), this.regex());
+ }.bind(this));
+ */
+ return e;
}
});
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index d13ba6e..1f73cef 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -207,6 +207,47 @@
.menu {
display: inline-block;
}
+
+ div.value {
+ position: absolute;
+ display: inline-block;
+ @include choose-item;
+ box-shadow: $choose-box-shadow;
+ padding: 4pt;
+ margin-top: -2pt;
+ border: {
+ width: $border-size;
+ style: solid;
+ radius: $standard-border-radius;
+ }
+ input {
+ border-width: 0;
+ }
+ > div {
+ padding: 2pt;
+ cursor: pointer;
+ font: {
+ size: 80%;
+ style: italic;
+ }
+ display: inline-block;
+ @include choose-item;
+ border: {
+ width: $border-size;
+ style: solid;
+ radius: $standard-border-radius;
+ }
+
+ &:hover {
+ @include choose-hover;
+ }
+ }
+ &.regex {
+ > div {
+ @include choose-active;
+ }
+ }
+ }
}