Merge "Localize 'New Constraint' for corpusByMatch assistant"
diff --git a/Changes b/Changes
index d149d19..a0c1aca 100755
--- a/Changes
+++ b/Changes
@@ -2,6 +2,8 @@
         - Support attachements in metadata fields (#77).
         - Added ping request option to Piwik.
         - Fix handling of login errors.
+        - Added Statistics reload option (hebasta, #66).
+        - Fixed VC query serialization.
 
 0.31 2018-11-30
         - Update to Mojolicious >= 8.06.
diff --git a/dev/demo/vcdemo.js b/dev/demo/vcdemo.js
index 4e0eaed..b9a7b1a 100644
--- a/dev/demo/vcdemo.js
+++ b/dev/demo/vcdemo.js
@@ -129,6 +129,10 @@
       ['author', 'text']
     ]).fromJson(json);
 
+    document.addEventListener('vcChange', function (e) {
+      KorAP.vc.checkStatActive(e.detail);
+      }, false);
+    
     document.getElementById('vc-view').appendChild(KorAP.vc.element());
 
     KorAP.vc.open();
diff --git a/dev/js/spec/statSpec.js b/dev/js/spec/statSpec.js
index f0e4b8b..25e55a2 100644
--- a/dev/js/spec/statSpec.js
+++ b/dev/js/spec/statSpec.js
@@ -100,6 +100,43 @@
    return vc;
   }
   
+  /**
+   * Generate corpus doc group with more entries
+   */
+  generateBCorpusDocGr = function(){  
+    let vc = vcClass.create().fromJson({
+      "@type": "koral:docGroup",
+      "operation": "operation:or", 
+      "operands": [{
+        "@type" : 'koral:docGroup',
+        'operation' : 'operation:or',
+        'operands' : [
+          {
+            '@type' : 'koral:doc',
+            'key' : 'title', 
+            'match': 'match:eq',
+            'value' : 'Hello World!'
+          },
+          {
+            '@type' : 'koral:doc',   
+            'match': 'match:eq',
+            'key' : 'foo',
+            'value' : 'bar'
+          }
+          ]
+      },
+      {
+        '@type' : 'koral:doc',   
+        'match': 'match:eq',
+        'key' : 'author',
+        'value' : 'Goethe'
+      }
+      ]
+    });
+    
+   return vc;
+  }
+  
   generateCorpusDoc = function(){
     let vc= vcClass.create().fromJson({
         '@type' : 'koral:doc',
@@ -130,7 +167,7 @@
   checkStatActive = function(view, div){   
     // corpus statistic exists, it is active and reloadStatButton is shown
     if ((view.firstChild.classList.contains("stattable") === true) 
-      && (view.firstChild.classList.contains("greyOut") === false)
+      && (view.firstChild.classList.contains("stdisabled") === false)
       && (div.getElementsByClassName("reloadStatB").length == 0) ) { 
       return true;
     } 
@@ -143,7 +180,7 @@
    */
   checkStatDisabled = function(view, div){
     if ((view.firstChild.classList.contains("stattable") === true) 
-        && (view.firstChild.classList.contains("greyOut") === true)
+        && (view.firstChild.classList.contains("stdisabled") === true)
         && (div.getElementsByClassName("reloadStatB").length === 1) ) {
       return true;
     }   
@@ -319,6 +356,12 @@
      */
 	describe ('KorAP.CorpusStat.Disable', function(){
 	
+	  document.addEventListener('vcChange', function (e) {
+	    if(KorAP.vc){
+        KorAP.vc.checkStatActive(e.detail);
+	    }
+        }, false);
+	  
 	  /**
 	   * If the user defines a new vc, the statistic should be disabled,
 	   * because it is out-of-date.
@@ -376,7 +419,20 @@
         KorAP._delete.apply(KorAP.vc.root());
         view = panel.firstChild.firstChild;
         expect(checkStatDisabled(view, show)).toBe(true);     
-      
+        
+        KorAP.vc  = generateBCorpusDocGr();
+        // create corpus builder and corpus statistic;
+        show = document.createElement('div');
+        show.appendChild(KorAP.vc.element());   
+        panel = show.firstChild.lastChild.firstChild;
+        panel.lastChild.children[0].click();
+        view = panel.firstChild.firstChild;
+
+        expect(checkStatActive(view, show)).toBe(true);
+        KorAP._delete.apply(KorAP.vc.root().getOperand(1));
+        view = panel.firstChild.firstChild;
+        expect(checkStatDisabled(view, show)).toBe(true); 
+              
       });
       
       
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 34a838a..d94b1b5 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -90,6 +90,10 @@
     var input = d.getElementById('collection');
 
     var vc = KorAP.vc;
+    
+    document.addEventListener('vcChange', function (e) {
+      vc.checkStatActive(e.detail);
+      }, false);
 
     // Add vc name object
     if (input) {
diff --git a/dev/js/src/vc.js b/dev/js/src/vc.js
index af09132..4bc5e13 100644
--- a/dev/js/src/vc.js
+++ b/dev/js/src/vc.js
@@ -367,7 +367,9 @@
      */    
     update : function() {
       this._root.update();
-      this.checkGrayingStat();
+      var vcchevent = new CustomEvent('vcChange', {'detail':this});
+      document.dispatchEvent(vcchevent);
+      
       return this;
     },
     /**
@@ -485,12 +487,12 @@
     },
     
     /**
-     * Checks if corpus statistic has to be greyOut,
+     * Checks if corpus statistic has to be disabled,
      * and to be updated after clicking at the "reload-button"
      */
-    checkGrayingStat : function(){
+    checkStatActive : function(){
       if(this.panel !== undefined && this.panel.statView !==undefined){
-        this.panel.statView.checkGrayingStatistic();
+        this.panel.statView.checkStatActive();
       }
     }
   };
diff --git a/dev/js/src/vc/doc.js b/dev/js/src/vc/doc.js
index 2a0e872..132c4a8 100644
--- a/dev/js/src/vc/doc.js
+++ b/dev/js/src/vc/doc.js
@@ -150,7 +150,10 @@
       };
       
       if(KorAP.vc){
-        KorAP.vc.checkGrayingStat();
+      //Replaced through Event
+      //KorAP.vc.checkGrayingStat(this); 
+      var vcchevent = new CustomEvent('vcChange', {'detail':this});
+      document.dispatchEvent(vcchevent);
       }
       
       return e;
diff --git a/dev/js/src/vc/docgroup.js b/dev/js/src/vc/docgroup.js
index 10a6495..858e847 100644
--- a/dev/js/src/vc/docgroup.js
+++ b/dev/js/src/vc/docgroup.js
@@ -210,6 +210,9 @@
 
       group.appendChild(op.element());
 
+      var vcchevent = new CustomEvent('vcChange', {'detail':this});
+      document.dispatchEvent(vcchevent);
+      
       return this;
     },
 
diff --git a/dev/js/src/vc/docgroupref.js b/dev/js/src/vc/docgroupref.js
index fa82a4b..f72e27a 100644
--- a/dev/js/src/vc/docgroupref.js
+++ b/dev/js/src/vc/docgroupref.js
@@ -109,7 +109,10 @@
         // Append new operators
         e.appendChild(op.element());
       };  
-      KorAP.vc.checkGrayingStat();
+     
+      var vcchevent = new CustomEvent('vcChange', {'detail':this});
+      document.dispatchEvent(vcchevent);
+      
       return this.element();
     },
 
diff --git a/dev/js/src/view/corpstatv.js b/dev/js/src/view/corpstatv.js
index 8e7b965..fa9a135 100644
--- a/dev/js/src/view/corpstatv.js
+++ b/dev/js/src/view/corpstatv.js
@@ -105,9 +105,9 @@
 
     
     /**
-     * Checks if graying necessary
+     * Checks if statistic has to be disabled
      */
-    checkGrayingStatistic : function (){
+    checkStatActive : function (){
      var newString = KorAP.vc.toQuery();
      var oldString = this.vc.oldvcQuery;
      /*
@@ -122,40 +122,39 @@
        if(newString.startsWith('(')){
          newString = newString.slice(1, newString.length-1);
        }
+       
        if(newString != oldString) {
-        this.grayingStat();
+        this.disableStat();
       }  
      }
      
    },
    
     /**
-     * Graying corpus statistic if in vc builder a different vc is choosen.
+     * Disabling corpus statistic if in vc builder a different vc is choosen.
      * After clicking at the reload-button the up-to-date corpus statistic is displayed.
      */   
-    grayingStat : function(){
+
+    disableStat : function(){
       var statt = this._show;
-      
+  
       if(statt.getElementsByClassName('reloadStatB').length == 0){
-          var reloadspan = document.createElement('span');
-          reloadspan.classList.add('reloadStatB');
-          reloadb = reloadspan.addE('span');
-          reloadb.classList.add('refresh');
+        var reloadspan = document.createElement('div');
+        reloadspan.classList.add('reloadStatB'); 
+        reloadspan.classList.add('button-group');
+        reloadspan.classList.add('button-panel');    
+        reloadb = reloadspan.addE('span');
+        reloadb.classList.add('refresh');
           
-          var that = this;
+        var that = this;          
+        reloadb.addEventListener("click", function (e){    
+        statt.classList.remove('stdisabled');
+        that.panel.reloadCorpStat(); 
+        });
           
-          reloadb.addEventListener("click", function (e){    
-          statt.classList.remove('greyOut');
-          that.panel.actions.element().querySelector(".statistic").classList.remove('greyOut');
-          that.panel.reloadCorpStat(); 
-             });
-          
- 
+
         statt.appendChild(reloadspan);
-        statt.classList.add('greyOut');        
-        this.panel.actions.element().querySelector(".statistic").classList.add('greyOut');
-        
-        console.log("Corpus statistic DISABLED");
+        statt.classList.add('stdisabled');        
         }
     },
 
diff --git a/dev/scss/header/statistics.scss b/dev/scss/header/statistics.scss
index a4d3f1e..3952e66 100644
--- a/dev/scss/header/statistics.scss
+++ b/dev/scss/header/statistics.scss
@@ -1,31 +1,65 @@
 @charset "utf-8";
 @import "../util";
 
+
+/* 
+Corpus statistic  
+Graying corpus statistic 
+*/
 div.stattable {
-	display: flex;
-	flex-direction: row;
+    display: flex;
+    flex-direction: row;
+}
+div.stattable {
+    > dl {
+        display: flex;
+        flex-flow: row wrap;
+        margin-top:4px;
+        margin-bottom:4px;
+        padding-bottom: 1px;   
+            > div {
+                border-color: $dark-green;
+                > dt {
+                    background-color: $middle-green;
+                    width: 15em;
+                    margin: 0;
+                    &:after {
+                    content: ":";
+                        }
+                    }   
+                > dd {
+                     background-color: $lightest-green;
+                     color: $dark-grey;
+                    }
+                }
+            }
+    &.stdisabled {
+        > dl 
+            > div {
+                > dt {
+                    @include vcinfo-inactive;
+                    }
+             > dd {
+                    @include vcinfo-inactive;
+                }
+            }
+        }
 }
 
-div.stattable > dl {
-  display: flex;
-  flex-flow: row wrap;
-  //margin-top: 4 * $border-size !important;
-  margin-top:4px;
-  margin-bottom:4px;
-  padding-bottom: 1px;   
-  > div {
-    border-color: $dark-green;
-    > dt {
-      background-color: $middle-green;
-      width: 15em;
-      margin: 0;
-      &:after {
-  		  content: ":";
-  	  }
+
+/* Corpus statistic reload button */
+div.reloadStatB {
+    font-family: 'FontAwesome';
+    padding-left: 2px;
+    z-index: 30;
     }
-   	> dd {
-      background-color: $lightest-green;
-      color: $dark-grey;
-	  }
-  }
-}
+span.refresh::after{
+    line-height: normal;
+    content : $fa-redo;
+    font-size: 15pt;
+    }
+
+/* Close-button should always be seen next to or above reload-button */
+.button-view.vcstatistic {
+    z-index: 30;
+    }
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index bb82ca0..90e20b1 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -38,6 +38,7 @@
 $middle-green:   lighten($ids-green-1, 9%);
 $light-green:    lighten($ids-green-1, 13%); // #7ba400;
 $lightest-green: #d8e38c; // lighten($ids-green-1, 26%);
+$grey-green: #bcc387;
 
 /**
  * Blue Colors
@@ -50,10 +51,10 @@
  * Grey Colors
  */
 $middle-grey:  $ids-grey-1; // #999;
+$semilight-grey: #8d8d8d;
 $light-grey:   $ids-grey-2; // #ddd;
 $dark-grey:    darken($middle-grey, 15%);
 $nearly-white: #fefefe;
-
 /**
  * Red Colors (no IDS relation)
  */
@@ -234,7 +235,15 @@
   appearance:none;
 }
 
-
+/** 
+* Mixin for the appearance of inactive elements in the vcinfo panel
+*/
+@mixin vcinfo-inactive{
+    background-color: $grey-green;
+    color: $semilight-grey;
+    border-color:   $semilight-grey; 
+    text-shadow: none;
+}
 /**
  * Font Awesome symbol table
  */
@@ -267,4 +276,5 @@
 $fa-to-query:     "\f102";
 $fa-cut:          "\f0c4";
 $fa-plugin:       "\f1e6";
-$fa-referto:      "\f0c5";
\ No newline at end of file
+$fa-referto:      "\f0c5";
+$fa-redo:         "\f01e";
diff --git a/lib/Kalamar/Plugin/Piwik.pm b/lib/Kalamar/Plugin/Piwik.pm
index 9b0c909..e991250 100644
--- a/lib/Kalamar/Plugin/Piwik.pm
+++ b/lib/Kalamar/Plugin/Piwik.pm
@@ -31,7 +31,7 @@
   $mojo->content_block(
     'faq' => {
       inline => '<section name="piwik-opt-out">' .
-        '<h3><%= loc("Piwik_HowToOptOut", "How can I opt-out?") %></h3>' .
+        '<h3><%= loc("Piwik_HowToOptOut", "How can I opt-out from Matomo?") %></h3>' .
         '<%= piwik_tag "opt-out" %>' .
         '</section>'
       }
diff --git a/package.json b/package.json
index 542e3b3..df09c86 100755
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "Kalamar",
   "description": "Mojolicious-based Frontend for KorAP",
   "license": "BSD-2-Clause",
-  "version": "0.31.1",
+  "version": "0.32.1",
   "pluginVersion": "0.1",
   "repository" : {
     "type": "git",