Merge pull request #111 from latin-language-toolkit/navbar_update

Navbar update + fix for resizer
alpheios-project · May 29, 2014 · 9f75867 · 9f75867
2 parents 61f692f + 2e6bdb8
commit 9f75867
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 42 deletions.
diff --git a/app/js/arethusa.core/directives/resizable.js b/app/js/arethusa.core/directives/resizable.js
@@ -9,26 +9,39 @@ angular.module('arethusa.core').directive('resizable', [
         var maxSize = $window.innerWidth;
         var maxPos = maxSize - 400;
         var main = angular.element(document.getElementById('main-body'));
+
         element.on('mousedown', function (event) {
           event.preventDefault();
           $document.on('mousemove', mousemove);
           $document.on('mouseup', mouseup);
         });
+
+        // This is very unstable and chaotic.
+        // We substract 0.5 in the last step to deal with a viewport with
+        // a width that is not a round number.
+        // There is a possibility that the divs that are resized shrinked by
+        // this though.
+        //
+        // A better solution might be to really recompute the size of
+        // the resized diffs - right now we are moving them around step
+        // by step.
         function mousemove(event) {
-          var x = event.pageX;
+          var x = Math.floor(event.pageX);
           var el = element.parent();
-          var leftPos = el.position().left;
-          var border = leftPos + el.width();
+          var leftPos = Math.round(el.position().left);
+          var width = Math.round(el.width());
+          var border = leftPos + width;
           var diff = x - leftPos;
-          var newSize = el.width() - diff;
+          var newSize = width - diff;
           el.width(newSize);
-          main.width(main.width() + diff);
+          main.width(main.width() + diff - 0.5);
         }
+
         function mouseup() {
           $document.unbind('mousemove', mousemove);
           $document.unbind('mouseup', mouseup);
         }
       }
     };
   }
-]);
+]);
diff --git a/app/js/arethusa.core/main_ctrl.js b/app/js/arethusa.core/main_ctrl.js
@@ -12,7 +12,9 @@ angular.module('arethusa.core').controller('MainCtrl', [
     $scope.toggleDebugMode = function () {
       $scope.debug = !$scope.debug;
     };
+
     var conf = configurator.configurationFor('main');
+
     var partitionPlugins = function (plugins) {
       $scope.mainPlugins = [];
       $scope.subPlugins = [];
@@ -21,17 +23,20 @@ angular.module('arethusa.core').controller('MainCtrl', [
         $scope.registerPlugin(plugin);
       });
     };
+
     $scope.retrievePlugins = function (plugins) {
       var obj = {};
       angular.forEach(plugins, function (name, i) {
         obj[name] = $scope.retrievePlugin(name);
       });
       return obj;
     };
+
     $scope.registerPlugin = function (plugin) {
       $scope.pushPlugin(plugin);
       $scope.registerListener(plugin);
     };
+
     $scope.retrievePlugin = function (name) {
       var pluginConf = configurator.configurationFor(name);
       if (pluginConf.external) {
@@ -43,9 +48,11 @@ angular.module('arethusa.core').controller('MainCtrl', [
         return $injector.get(name);
       }
     };
+
     function hasView(plugin) {
       return !(!plugin.template || plugin.noView);
     }
+
     $scope.pushPlugin = function (plugin) {
       if (hasView(plugin)) {
         if (plugin.main) {
@@ -58,6 +65,7 @@ angular.module('arethusa.core').controller('MainCtrl', [
         $scope.pluginsWithMenu.push(plugin);
       }
     };
+
     // Working on the assumptions that plugins will generally be grouped
     // in something like a tabset - impossible to show them all at the same
     // time, we expose some variables and functions to get info about their
@@ -80,15 +88,19 @@ angular.module('arethusa.core').controller('MainCtrl', [
     // should be out of the DOM anyway. If a plugin still needs this, it can
     // do so by setting its alwaysActiveproperty to true.
     $scope.activePlugin = '';
+
     $scope.declareActive = function (name) {
       $scope.activePlugin = name;
     };
+
     $scope.declareFirstPluginActive = function () {
       $scope.declareActive($scope.subPlugins[0].name);
     };
+
     $scope.isActive = function (plugin) {
       return plugin.name === $scope.activePlugin && !plugin.alwaysActive;
     };
+
     // This is a really really bad solution right now. Using the controller
     // to insert stuff into the state object is not good. Can only stay as
     // a temporary prototype solution.
@@ -97,8 +109,10 @@ angular.module('arethusa.core').controller('MainCtrl', [
         state.registerListener(plugin);
       }
     };
+
     $scope.state = state;
     $scope.template = conf.template;
+
     // The application has to fulfil a specific load order.
     // The MainCtrl starts his work only when the configurator has received
     // its main configuration file (handled by the MAIN_ROUTE constant).
@@ -126,6 +140,7 @@ angular.module('arethusa.core').controller('MainCtrl', [
       $scope.arethusaLoaded = false;
       $scope.state.init();
     });
+
     $scope.$on('stateLoaded', function () {
       $scope.state.postInit();
       if ($scope.arethusaLoaded) {
@@ -136,6 +151,7 @@ angular.module('arethusa.core').controller('MainCtrl', [
         $scope.init();
       }
     });
+
     $scope.initPlugins = function () {
       for (var plugin in $scope.plugins) {
         try {
@@ -144,27 +160,13 @@ angular.module('arethusa.core').controller('MainCtrl', [
         }
       }
     };
+
     $scope.init = function () {
       $scope.plugins = $scope.retrievePlugins(conf.plugins);
       partitionPlugins($scope.plugins);
       $scope.initPlugins();
       $scope.declareFirstPluginActive();
       $scope.arethusaLoaded = true;
     };
-    // Temporary testing method
-    $scope.simulateHeadChange = function () {
-      var token = state.tokens['0001'];
-      if (token.head.id < '0010') {
-        var h;
-        if (token.head.id === '') {
-          h = 2;
-        } else {
-          h = parseInt(token.head.id) + 1;
-        }
-        token.head.id = arethusaUtil.formatNumber(h, 4);
-      } else {
-        token.head.id = '0002';
-      }
-    };
   }
 ]);
diff --git a/app/templates/exercise_demo.html b/app/templates/exercise_demo.html
@@ -1,4 +1,5 @@
 <arethusa-navbar></arethusa-navbar>
+<p/>
 <div class="row panel full-height">
   <div id="main-body" class="columns small-7">
     <div ng-repeat="pl in mainPlugins">

diff --git a/app/templates/main_with_sidepanel.html b/app/templates/main_with_sidepanel.html
@@ -1,19 +1,8 @@
 <arethusa-navbar></arethusa-navbar>
 
-<div class="row panel">
-  <div class="columns small-12">
-    <div>
-      <ul class="button-group right">
-        <li><button deselector class="small">Deselect all</button></li>
-        <li><button sidepanel-folder class="small">Fold Panel</button></li>
-        <li><button ng-click="simulateHeadChange()" class="small">SimulateHeadChange</button></li>
-        <li><button ng-click="toggleDebugMode()" class="small">Debug</button></li>
-      </ul>
-    </div>
-    <div debug="state.tokens"></div>
-  </div>
-</div>
-
+<p>
+  <div debug="state.tokens"></div>
+</p>
 
 <div class="row panel full-height">
   <div id="main-body" class="columns small-7">

diff --git a/app/templates/navbar1.html b/app/templates/navbar1.html
@@ -22,23 +22,22 @@ <h1><a href="#"><img ng-src="{{$scope.baseurl + 'css/arethusa.png'}}"/></a></h1>
       </ul>
       <ul ng-show="showNavigation()" class="left" ng-controller="NavigatorCtrl">
         <li>
-          <div><a ng-click="prev()">&laquo</a></div>
+          <div><a ng-click="prev()">&laquo;</a></div>
         </li>
         <li>
           <div><a>{{ navStat.currentId }}</a></div>
         </li>
         <li>
-          <div><a ng-click="next()">&raquo</a></div>
+          <div><a ng-click="next()">&raquo;</a></div>
         </li>
       </ul>
       <ul ng-show="showNotifier()" class="right" ng-controller="NotifierCtrl">
         <!--tbd-->
       </ul>
-      <ul class="right">
-        <li class="divider"></li>
-        <li class="has-form">
-          <a href="#" class="button" ng-click="switchTemplate()">Switch Template</a>
-        </li>
+      <ul class="has-form button-group right">
+        <li><a deselector class="button">Deselect all</a></li>
+        <li><a ng-click="toggleDebugMode()" class="button">Debug</a></li>
+        <li><a sidepanel-folder class="button">Fold Panel</a></li>
       </ul>
     </section>
   </nav>