Merge pull request #69 from latin-language-toolkit/colors

Colors

app/index.html

@@ -39,6 +39,7 @@
 
   <script src="./js/arethusa.conf_editor.js"></script>
   <script src="./js/arethusa.conf_editor/conf_editor_ctrl.controller.js"></script>
+  <script src="./js/arethusa.conf_editor/morph_conf_ctrl.controller.js"></script>
   <script src="./js/arethusa.conf_editor/directives/plugin_conf.js"></script>
   <script src="./js/arethusa.conf_editor/directives/resource_conf.js"></script>
   <script src="./js/arethusa.conf_editor/directives/retriever_conf.js"></script>

app/js/arethusa.conf_editor/morph_conf_ctrl.controller.js

@@ -0,0 +1,11 @@
+"use strict";
+
+angular.module('arethusa.confEditor').controller('morphConfCtrl', function($scope) {
+  $scope.colorizer = $scope.conf.styledThrough;
+  $scope.colorizerObj = function() {
+    return $scope.conf.attributes[$scope.colorizer] || {};
+  };
+  $scope.colorizerName = function() {
+    return $scope.colorizerObj().long;
+  };
+});

app/js/arethusa.core/state.service.js

@@ -58,7 +58,7 @@ angular.module('arethusa.core').service('state', function(configurator, $rootSco
   };
 
   this.getToken = function(id) {
-    return this.state.tokens[id] || {};
+    return self.tokens[id] || {};
   };
 
 
@@ -197,6 +197,14 @@ angular.module('arethusa.core').service('state', function(configurator, $rootSco
     this.broadcastReload();
   };
 
+  this.setStyle = function(id, style) {
+    self.getToken(id).style = style;
+  };
+
+  this.unsetStyle = function(id, style) {
+    delete self.getToken(id).style;
+  };
+
   this.broadcastReload = function() {
     $rootScope.$broadcast('stateLoaded');
   };

app/js/arethusa.morph/morph.service.js

@@ -6,6 +6,7 @@ angular.module('arethusa.morph').service('morph', function(state, configurator)
   this.template = this.conf.template;
   this.name = this.conf.name;
   this.postagSchema = this.conf.postagSchema;
+  this.styledThrough = this.conf.styledThrough;
   this.analyses = {};
 
   var morphRetrievers = configurator.getServices(this.conf.retrievers);
@@ -65,6 +66,10 @@ angular.module('arethusa.morph').service('morph', function(state, configurator)
   // template, we have to take it inside the morph plugin.
   // In the concrete use case of treebanking this would mean that
   // we have a postag value sitting there, which we have to expand.
+  //
+  // Once we have all information we need, the plugin also tries to
+  // write back style information to the state object, e.g. to colorize
+  // tokens according to their Part of Speech value.
   this.getAnalysisFromState = function(val, id) {
     var analysis = state.tokens[id].morphology;
     // We could always have no analysis sitting in the data we are
@@ -73,6 +78,7 @@ angular.module('arethusa.morph').service('morph', function(state, configurator)
       this.postagToAttributes(analysis);
       analysis.origin = 'document';
       val.forms.push(analysis);
+      state.setStyle(id, this.styleOf(analysis));
     }
   };
 
@@ -167,7 +173,14 @@ angular.module('arethusa.morph').service('morph', function(state, configurator)
     return res.join('.');
   };
 
+  this.styleOf = function(form) {
+    var styler = this.styledThrough;
+    var styleVal = form.attributes[styler];
+    return this.attributeValueObj(styler, styleVal).style;
+  };
+
   this.setState = function(id, form) {
+    state.setStyle(id, this.styleOf(form));
     state.setState(id, 'morphology', form);
   };
 

app/static/configs/morph/attributes.json

@@ -10,6 +10,7 @@
     "case",
     "degree"
   ],
+  "styledThrough" : "pos",
   "attributes" : {
     "pos" : {
       "long" : "Part of Speech",

app/templates/configs/morph.html

@@ -33,4 +33,20 @@
       <!--and add a new one here-->
     </div>
   </div>
+  <div ng-controller="morphConfCtrl">
+    <label>Colors through {{ colorizerName() }}
+    <table>
+      <tr>
+        <td ng-repeat="(key, val) in colorizerObj().values">
+          <!--
+            that span will receive a colorpicker at a later stage
+            and moved to an own directive
+          -->
+          <span ng-style="val.style">
+            {{ val.short }}
+          </span>
+        </td>
+      </tr>
+    </table>
+  </div>
 </div>

app/templates/morph2.html

@@ -11,7 +11,9 @@
     <accordion-group ng-repeat="form in analysis.forms" >
       <accordion-heading>
          <div class="row">
-           <div class="columns small-4">• {{ form.lemma }} {{ plugin.concatenatedAttributes(form) }}</div>
+           <div class="columns small-4">
+             • <span ng-style="plugin.styleOf(form)">{{ form.lemma }}</span> {{ plugin.concatenatedAttributes(form) }}
+           </div>
            <div class="columns small-6">{{ form.postag }} from {{ form.origin }}</div>
            <div form-selector class="columns small-2"></div>
          </div>

app/templates/token.html

@@ -1 +1 @@
-{{ token.string }}
+<span ng-style="token.style">{{ token.string }}</span>