Merge pull request #409 from NASA-AMMOS/jr-legend-justify

Allow the legend tool to be right justified on the screen

docs/pages/Tools/Legend/Legend.md

@@ -9,11 +9,15 @@ parent: Tools
 
 A layer can be configured with a legend by pointing its Legend field to a .csv file or by including a JSON `legend` array into the layer's Raw Variables. The Legend Tool renders symbologies and gradient scales for any properly configured on layer.
 
-On the Configure page, under Tools, you can specify if the expanded legend should automatically be displayed on start:
+On the Configure page, under Tools, you can specify additional options:
+
+* displayOnStart: Whether the expanded legend should automatically be displayed on start (`true`/`false`)
+* justification: The legend will display on the right side of the screen if set to `right`, otherwise default to the left side
 
 ```javascript
 {
-    "displayOnStart": true
+    "displayOnStart": true,
+    "justification": "right"
 }
 ```
 

src/essence/Tools/Legend/LegendTool.js

@@ -14,9 +14,20 @@ var LegendTool = {
     targetId: null,
     made: false,
     displayOnStart: false,
+    justification: 'left',
     initialize: function () {
         //Get tool variables
         this.displayOnStart = L_.getToolVars('legend')['displayOnStart']
+        this.justification = L_.getToolVars('legend')['justification']
+        if (this.justification == 'right') {
+            var toolController = d3.select('#toolcontroller_sepdiv')
+            var toolContent = d3.select('#toolContentSeparated_Legend')
+            toolController.style('top', '110px')
+            toolController.style('left', null)
+            toolController.style('right', '5px')
+            toolContent.style('left', null)
+            toolContent.style('right', '0px')
+        }        
     },
     make: function (targetId) {
         this.targetId = targetId

src/essence/Tools/Legend/config.json

@@ -1,7 +1,13 @@
 {
     "defaultIcon": "map-legend",
     "description": "Show a chart mapping colors and symbols to meaning.",
-    "descriptionFull": "",
+    "descriptionFull": {
+        "title": "Show a chart legend that maps colors and symbols to meaning.",
+        "example": {
+            "displayOnStart": true,
+            "justification": "right"
+        }
+    },
     "hasVars": true,
     "name": "Legend",
     "toolbarPriority": 2,