iqvoc 4.8.0 → 4.8.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9b8de83acfbd976ee0ca242e30bc93722a47f887
-  data.tar.gz: 243e34d21b8f03ed7e6860cda58e1a7fb976b9f4
+  metadata.gz: 038475af916c1873dc4eaa7f8ee52ee3d78cec08
+  data.tar.gz: 3005a742d1462b5a9491db6c4e10d3db96ca73e8
 SHA512:
-  metadata.gz: 1fc14d620e132f68f6dd955150aedb3fcca9017c0492508352c2fe93bacaf7b59fccfc04715e8f435a62d287990256bfbd6e506de5554ecbc02a4c99c894fc0f
-  data.tar.gz: 7ffbeaf92fa1f46f1a7fa391fd6a585d19bde9fbbad09ebbc5d543b206d09d1437af9f3eb9c9e7a7aae81d31726deb02389ee7c7cc4e47b728baee0ba17c7fd3
+  metadata.gz: bbf91a5ef677366b2e2ce7aa6cbe44971344f825877ec4ed9f11d088b8645a9e4b7ee2191916312e10813855d5e77ba55767dbf1ccf34a1bdf8627f8360a0ba5
+  data.tar.gz: b0e8bff4c19e677ba5a41a8fe223b214d36b0331e4b8600c9f6ad2c79fd2b7966b15aea2c32203e9a2a19118ab575f35b815a084b792a9adab38f6920209a278

data/CHANGELOG.md

@@ -1,3 +1,8 @@
+## [4.8.1]
+
+  * Changed: New, responsive datepicker
+  * Fixed: Several UI glitches
+
 ## [4.8.0]
 
   * Added: Rails 4.2

data/app/assets/javascripts/framework.js

@@ -1,8 +1,9 @@
 //= require jquery-1.7.1
 //= require rails
-//= require jquery-ui
-//= require jquery-ui.datepicker-de
+//= require pickadate/picker
+//= require pickadate/picker.date
 //= require tree.jquery.js
+//= require typeahead.jquery.js
 //= require URI.js
 //= require storage
 //= require bootstrap/collapse

data/app/assets/javascripts/iqvoc/autocomplete.js

@@ -0,0 +1,42 @@
+IQVOC.autocomplete = (function($) {
+
+// `field` is the input field to be augmented
+// `source` is a function expected to calculate the results - it is invoked with
+// the respective query string and a callback and expected to invoke that
+// callback with an array of `{ value, label }` objects
+// `options` is an object with optional members `displayKey`, `noResultsMsg` and
+// `onSelect`
+// TODO: built-in support for loading indicator?
+function augment(field, source, options) {
+  field = field.jquery ? field : $(field);
+
+  options = options || {};
+  options.noResultsMsg = options.noResultsMsg || "no results";
+  options.displayKey = options.displayKey || "value";
+
+  field.typeahead({
+    minLength: 3,
+    highlight: true
+  }, {
+    source: source,
+    displayKey: options.displayKey,
+    templates: {
+      empty: function() {
+        var el = $("<p />").text(options.noResultsMsg);
+        return $("<div />").append(el).html();
+      },
+      suggestion: function(item) {
+        var el = $("<p />").text(item.label);
+        return $("<div />").append(el).html();
+      }
+    }
+  }).bind("typeahead:selected", function(ev, selected, name) {
+    if(options.onSelect) {
+      options.onSelect.call(this, ev, selected); // TODO: document
+    }
+  });
+}
+
+return augment;
+
+}(jQuery));

data/app/assets/javascripts/iqvoc/concept_mapper.js

@@ -23,11 +23,11 @@ function ConceptMapper(selector) {
   this.container = $("<div />").addClass("concept-mapper control-group");
 
   this.bootstrapInputGroup = $('<div class="input-group" />');
-  this.indicatorWrapper = $('<span class="input-group-addon" />');
+  this.indicator = $('<span class="indicator input-group-addon" />');
 
   this.input = this.bootstrapInputGroup
                   .append($("<input />").attr("type", "text").addClass("form-control"))
-                  .append(this.indicatorWrapper)
+                  .append(this.indicator)
                   .prependTo(this.container);
 
   $("<button />").addClass("btn btn-default fa fa-plus").
@@ -47,7 +47,8 @@ ConceptMapper.prototype.onConfirm = function(ev) {
   var textArea = document.getElementsByName(textAreaName)[0];
   textArea = $(textArea);
 
-  var newURI = this.input.find('input').val();
+  // FIXME: last input the correct one
+  var newURI = $(this.input.find('input')[1]).val();
   var newValue = $.trim(textArea.val() + this.delimiter + newURI);
 
   textArea.val(newValue);

data/app/assets/javascripts/iqvoc/entityselect.js.erb

@@ -18,34 +18,16 @@ var EntitySelector = function(node) {
   this.entities = this.getSelection();
   this.uriTemplate = this.el.data("entity-uri");
 
-  var self = this;
-  var noResultsMsg = this.el.data("no-results-msg");
-
   var selection = this.el.data("entities") || [];
+  var self = this;
   selection = $.map(selection, function(entity, i) {
     return self.createEntity(entity);
   });
   selection = $('<ul class="entity_list" />').append(selection);
 
-  this.input = $('<input type="text" class="form-control" />').autocomplete({
-    minLength: 3,
-    source: $.proxy(this, "onInput"), // XXX: discards original `this` context
-    search: function(ev, ui) { self.indicator.addClass("active"); },
-    focus: function(ev, ui) { return false; },
-    select: this.onSelect,
-    response: function(ev, ui) {
-      if(!ui.content.length && noResultsMsg) {
-        ui.content.push({ label: noResultsMsg, value: "" });
-      }
-    }
-  }).on("keydown", function(ev) {
-    if(ev.which === 13) { // Enter; prevent form submission
-      ev.preventDefault();
-    }
-  });
-
+  var input = $('<input type="text" class="form-control" />');
   this.inputGroup = $('<div class="input-group" />').
-    append(this.input, this.indicator);
+    append(input, this.indicator);
   this.container.append(this.inputGroup, selection).
     insertAfter(node).prepend(node);
 
@@ -56,6 +38,12 @@ var EntitySelector = function(node) {
       prependTo(this.inputGroup);
   }
 
+  IQVOC.autocomplete(input, $.proxy(this, "onInput"), {
+    noResultsMsg: this.el.data("no-results-msg"),
+    onSelect: this.onSelect,
+    displayKey: "label"
+  });
+
   if(this.singular && this.entities.length) {
     this.inputGroup.hide();
   }
@@ -79,27 +67,28 @@ EntitySelector.sourceSelectors = {
   }
 };
 $.extend(EntitySelector.prototype, {
-  onInput: function(req, callback) {
-    var self = this;
+  onInput: function(query, callback) {
+    this.indicator.addClass("active");
 
+    var self = this;
     var responder = function(data, status, xhr) { // TODO: rename, move elsewhere
       data = self.processResponse(data);
-      self.input.autocomplete("option", "autoFocus", data.length === 1);
       callback(data);
       self.indicator.removeClass("active");
     };
 
     var sourceSelector = this.el.data("source-selector") || "default";
     EntitySelector.sourceSelectors[sourceSelector].call(this, function(uri) { // XXX: direct `EntitySelector` reference limits subclassing
-      $.getJSON(uri, { query: req.term }, responder); // TODO: error handling
+      $.getJSON(uri, { query: query }, responder); // TODO: error handling
     });
   },
-  onSelect: function(ev, ui) {
-    var el = $(this).val(""),
-      widget = el.closest(".entity_select").data("widget");
-    if(widget.add(ui.item.value)) {
+  onSelect: function(ev, item) {
+    var el = $(this).val("")
+    var widget = el.closest(".entity_select").data("widget");
+
+    if(widget.add(item.value)) {
       var entity = widget.
-          createEntity({ id: ui.item.value, name: ui.item.label });
+          createEntity({ id: item.value, name: item.label });
       var list = widget.container.find("ul").append(entity);
       // force redraw to work around Safari rendering bug -- FIXME: crude and uninformed
       list.css("overflow", "auto");

data/app/assets/javascripts/iqvoc/federated_concept_mapper.js

@@ -11,11 +11,6 @@ var baseClass = IQVOC.ConceptMapper;
 function FederatedConceptMapper(selector) {
   baseClass.apply(this, arguments);
 
-  this.noResultsMsg = {
-    label: this.root.data("no-results-msg"),
-    value: ''
-  };
-
   var sources = this.root.data("datasets");
   if(!sources) { // fall back to non-federated base class only
     return;
@@ -28,37 +23,27 @@ function FederatedConceptMapper(selector) {
   this.source = $("<select />").addClass("form-control").append(sources).
       insertBefore(this.input);
 
-  this.indicator = $("<i />").addClass("fa fa-refresh fa-spin").
-    css("visibility", "hidden"); // TODO: use `.indicator[.active]` instead; cf. EntitySelector
-  this.indicatorWrapper.append(this.indicator);
+  this.indicator.append('<i class="fa fa-refresh fa-spin" />');
 
   var self = this;
-  this.input.find('input').autocomplete({ // TODO: extract autocomplete extension into subclass
-    source: $.proxy(this, "onChange"),
-    search: function(ev, ui) {
-      if(self.source.val() === "_custom") {
-        return false;
-      } else {
-        self.indicator.css("visibility", "visible");
-      }
-    },
-    response: function(ev, ui) {
-      if (!ui.content.length) {
-        ui.content.push(self.noResultsMsg);
-      }
-      self.indicator.css("visibility", "hidden");
-    },
-    minLength: 2
+  var input = this.input.find("input")
+
+  IQVOC.autocomplete(input, $.proxy(this, "onChange"), {
+    noResultsMsg: this.root.data("no-results-msg"),
   });
+
 }
 FederatedConceptMapper.prototype = new baseClass();
-FederatedConceptMapper.prototype.onChange = function(req, callback) {
+FederatedConceptMapper.prototype.onChange = function(query, callback) {
   var self = this;
+
+  self.indicator.addClass("active");
+
   $.ajax({
     type: "GET",
     url: this.root.data("remote-proxy-url"),
     data: {
-      prefix: encodeURIComponent(req.term), // FIXME: (double-)encoding should not be necessary
+      prefix: encodeURIComponent(query), // FIXME: (double-)encoding should not be necessary
       dataset: this.source.find("option:selected").text(),
       layout: 0
     },
@@ -67,6 +52,9 @@ FederatedConceptMapper.prototype.onChange = function(req, callback) {
       var args = Array.prototype.slice.apply(arguments);
       args.push(callback);
       return self.onResults.apply(self, args);
+    },
+    complete: function() {
+      self.indicator.removeClass("active");
     }
   });
 };

data/app/assets/javascripts/iqvoc/iqvoc.js

@@ -67,8 +67,6 @@ return {
 jQuery(document).ready(function($) {
   "use strict";
 
-  IQVOC.quicksearch(".quicksearch");
-
   var locale = document.documentElement.getAttribute("lang");
 
   // language selection
@@ -150,8 +148,21 @@ jQuery(document).ready(function($) {
   });
 
   // Datepicker
-  $.datepicker.setDefaults($.datepicker.regional[locale]);
-  $("input.datepicker").datepicker({ dateFormat: "yy-mm-dd" });
+  if (locale === "de") {
+    $.extend( $.fn.pickadate.defaults, {
+      monthsFull: [ 'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember' ],
+      monthsShort: [ 'Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez' ],
+      weekdaysFull: [ 'Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag' ],
+      weekdaysShort: [ 'So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa' ],
+      today: 'Heute',
+      clear: 'Löschen',
+      firstDay: 1
+    });
+  }
+  $("input.datepicker").pickadate({
+    editable: true,
+    format: 'yyyy-mm-dd'
+  });
 
   // Dashboard table row highlighting and click handling
   $("tr.highlightable")

data/app/assets/javascripts/iqvoc/manifest.js

@@ -1,5 +1,4 @@
 //= require iqvoc/iqvoc
-//= require iqvoc/quicksearch
 //= require iqvoc/onebox
 //= require iqvoc/langselect
 //= require iqvoc/entityselect
@@ -9,3 +8,4 @@
 //= require iqvoc/concept_mapping_manager
 //= require iqvoc/label_resolver
 //= require iqvoc/treeview
+//= require iqvoc/autocomplete

data/app/assets/stylesheets/_framework.scss

@@ -3,8 +3,6 @@
 @import 'bootstrap-sprockets';
 @import 'bootstrap';
 
-@import 'jquery-ui';
-@import 'jquery-ui.structure';
-@import 'jquery-ui.theme';
-
 @import 'font-awesome';
+@import 'pickadate/classic';
+@import 'pickadate/classic.date';

data/app/assets/stylesheets/iqvoc/_manifest.scss

@@ -4,8 +4,6 @@
 @import 'iqvoc/settings/variables';
 @import 'iqvoc/settings/bootstrap';
 
-@import 'iqvoc/hacks/jquery-ui_extensions';
-
 @import 'iqvoc/components/treeview';
 @import 'iqvoc/components/components';
 @import 'iqvoc/components/panels';
@@ -15,5 +13,7 @@
 @import 'iqvoc/components/entity_select';
 @import 'iqvoc/components/modals';
 @import 'iqvoc/components/label-list';
+@import 'iqvoc/components/typeahead';
+@import 'iqvoc/components/datepicker';
 
 @import 'iqvoc/hacks/hacks';

data/app/assets/stylesheets/iqvoc/components/_datepicker.scss

@@ -0,0 +1,7 @@
+.picker--opened .picker__holder {
+  @include flat-box-shadow();
+}
+
+.picker__holder {
+  border-radius: 0;
+}

data/app/assets/stylesheets/iqvoc/components/typeahead.scss

@@ -0,0 +1,56 @@
+.twitter-typeahead { width:100%; }
+
+.twitter-typeahead .tt-query,
+.twitter-typeahead .tt-hint {
+  margin-bottom: 0;
+}
+
+.tt-dropdown-menu {
+  min-width: 160px;
+  margin-top: 2px;
+  padding: 5px 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0,0,0,.2);
+  *border-right-width: 2px;
+  *border-bottom-width: 2px;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+  -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+  box-shadow: 0 5px 10px rgba(0,0,0,.2);
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  width:100%;
+}
+
+.tt-dropdown-menu > div > p {
+  padding: 3px 20px;
+  margin: 0;
+}
+
+.tt-suggestion {
+  display: block;
+  padding: 3px 20px;
+}
+
+.tt-suggestion p { margin: 0; }
+
+.tt-cursor {
+  color: #fff;
+  background-color: #0081c2;
+  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
+  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
+  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
+}
+
+.tt-cursor a { color: #fff; }
+
+.input-group span.twitter-typeahead { display: block !important; }
+.input-group span.twitter-typeahead .tt-dropdown-menu { top: 32px !important; }

data/app/assets/stylesheets/iqvoc/hacks/_hacks.scss

@@ -6,3 +6,7 @@ fieldset > div:first-of-type, ol:first-of-type, p {
   -webkit-margin-top-collapse: separate;
   margin-top: 27px;
 }
+
+.fa {
+  font-family: FontAwesome;
+}

data/app/assets/stylesheets/iqvoc/settings/_bootstrap-variables.scss

@@ -49,10 +49,10 @@
 //
 //## Font, line-height, and color for body text, headings, and more.
 
-$font-family-sans-serif:  'Fira Sans', Helvetica, Arial, sans-serif;
+$font-family-sans-serif:  'Fira Sans Regular', Helvetica, Arial, sans-serif;
 // $font-family-serif:       Georgia, "Times New Roman", Times, serif
 //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
-// $font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace
+$font-family-monospace:   'Fira Mono Regular', Menlo, Monaco, Consolas, 'Courier New', monospace;
 // $font-family-base:        $font-family-sans-serif
 
 // $font-size-base:          14px
@@ -270,12 +270,12 @@ $headings-font-family:    'Fira Sans ExtraLight', Helvetica, Arial, sans-serif;
 //
 // Note: These variables are not generated into the Customizer.
 
-// $zindex-navbar:            1000
-// $zindex-dropdown:          1000
-// $zindex-popover:           1060
-// $zindex-tooltip:           1070
-// $zindex-navbar-fixed:      1030
-// $zindex-modal:             1040
+$zindex-navbar:            10000;
+$zindex-dropdown:          10000;
+$zindex-popover:           10600;
+$zindex-tooltip:           10700;
+$zindex-navbar-fixed:      10300;
+$zindex-modal:             10400;
 
 
 //== Media queries breakpoints

data/app/assets/stylesheets/iqvoc/settings/_bootstrap.scss

@@ -62,3 +62,8 @@ form#search {
   @include flat-box-shadow();
   border-radius: 0;
 }
+
+label, th {
+  font-family: 'Fira Sans Bold';
+  font-weight: 700;
+}

data/app/assets/stylesheets/iqvoc/settings/_fonts.scss

@@ -1,118 +1,79 @@
-@font-face{
+@font-face {
   font-family: 'Fira Sans Light SC';
   src: font-url('FiraSans-Light-SC.eot');
-  src: local('Fira Sans Light SC'),
-  font-url('FiraSans-Light-SC.eot') format('embedded-opentype'),
+  src: font-url('FiraSans-Light-SC.eot') format('embedded-opentype'),
   font-url('FiraSans-Light-SC.woff2') format('woff2'),
   font-url('FiraSans-Light-SC.woff') format('woff'),
   font-url('FiraSans-Light-SC.ttf') format('truetype');
   font-style: normal;
 }
 
-@font-face{
-  font-family: 'Fira Sans Light';
-  src: font-url('FiraSans-Light.eot');
-  src: local('Fira Sans Light'),
-  font-url('FiraSans-Light.eot') format('embedded-opentype'),
-  font-url('FiraSans-Light.woff') format('woff'),
-  font-url('FiraSans-Light.ttf') format('truetype');
-  font-weight: 300;
-  font-style: normal;
-}
-
-@font-face{
+@font-face {
   font-family: 'Fira Sans ExtraLight';
   src: font-url('FiraSans-ExtraLight.eot');
-  src: local('Fira Sans ExtraLight'),
-  font-url('FiraSans-ExtraLight.eot') format('embedded-opentype'),
+  src: font-url('FiraSans-ExtraLight.eot') format('embedded-opentype'),
   font-url('FiraSans-ExtraLight.woff') format('woff'),
   font-url('FiraSans-ExtraLight.ttf') format('truetype');
   font-style: normal;
 }
 
-@font-face{
+@font-face {
   font-family: 'Fira Sans Regular';
   src: font-url('FiraSans-Regular.eot');
-  src: local('Fira Sans Regular'),
-  font-url('FiraSans-Regular.eot') format('embedded-opentype'),
+  src: font-url('FiraSans-Regular.eot') format('embedded-opentype'),
   font-url('FiraSans-Regular.woff') format('woff'),
   font-url('FiraSans-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
 }
 
-@font-face{
-  font-family: 'Fira Sans Book';
-  src: font-url('FiraSans-Book.eot');
-  src: local('Fira Sans Regular'),
-  font-url('FiraSans-Book.eot') format('embedded-opentype'),
-  font-url('FiraSans-Book.woff') format('woff'),
-  font-url('FiraSans-Book.ttf') format('truetype');
-  font-style: normal;
-}
-
-@font-face{
+@font-face {
   font-family: 'Fira Sans Regular Italic';
   src: font-url('FiraSans-Italic.eot');
-  src: local('Fira Sans Regular Italic'),
-  font-url('FiraSans-Italic.eot') format('embedded-opentype'),
+  src: font-url('FiraSans-Italic.eot') format('embedded-opentype'),
   font-url('FiraSans-Italic.woff') format('woff'),
   font-url('FiraSans-Italic.ttf') format('truetype');
   font-weight: 400;
   font-style: italic;
 }
 
-@font-face{
-  font-family: 'Fira Sans Medium';
-  src: font-url('FiraSans-Medium.eot');
-  src: local('Fira Sans Medium'),
-  font-url('FiraSans-Medium.eot') format('embedded-opentype'),
-  font-url('FiraSans-Medium.woff') format('woff'),
-  font-url('FiraSans-Medium.ttf') format('truetype');
-  font-weight: 500;
-  font-style: normal;
-}
-
-@font-face{
-  font-family: 'Fira Sans Medium Italic';
-  src: font-url('FiraSans-MediumItalic.eot');
-  src: local('Fira Sans Medium Italic'),
-  font-url('FiraSans-MediumItalic.eot') format('embedded-opentype'),
-  font-url('FiraSans-MediumItalic.woff') format('woff'),
-  font-url('FiraSans-MediumItalic.ttf') format('truetype');
-  font-weight: 500;
-  font-style: italic;
-}
-
-@font-face{
+@font-face {
   font-family: 'Fira Sans Bold';
   src: font-url('FiraSans-Bold.eot');
-  src: local('Fira Sans Bold'),
-  font-url('FiraSans-Bold.eot') format('embedded-opentype'),
+  src: font-url('FiraSans-Bold.eot') format('embedded-opentype'),
   font-url('FiraSans-Bold.woff') format('woff'),
   font-url('FiraSans-Bold.ttf') format('truetype');
   font-weight: 700;
   font-style: normal;
 }
 
-@font-face{
+@font-face {
   font-family: 'Fira Sans Bold Italic';
   src: font-url('FiraSans-BoldItalic.eot');
-  src: local('Fira Sans Bold Italic'),
-  font-url('FiraSans-BoldItalic.eot') format('embedded-opentype'),
+  src: font-url('FiraSans-BoldItalic.eot') format('embedded-opentype'),
   font-url('FiraSans-BoldItalic.woff') format('woff'),
   font-url('FiraSans-BoldItalic.ttf') format('truetype');
   font-weight: 700;
   font-style: italic;
 }
 
-@font-face{
+@font-face {
   font-family: 'Fira Mono Regular';
   src: font-url('FiraMono-Regular.eot');
-  src: local('Fira Mono'),
-  font-url('FiraMono-Regular.eot') format('embedded-opentype'),
+  src: font-url('FiraMono-Regular.eot') format('embedded-opentype'),
   font-url('FiraMono-Regular.woff') format('woff'),
   font-url('FiraMono-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
 }
+
+/* @font-face {
+  font-family: 'Fira Sans Light';
+  src: font-url('FiraSans-Light.eot');
+  src: local('Fira Sans Light'),
+  font-url('FiraSans-Light.eot') format('embedded-opentype'),
+  font-url('FiraSans-Light.woff') format('woff'),
+  font-url('FiraSans-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+} */