Convert the project colors to RGB and use them in the CSS

NCEAS · Apr 19, 2019 · 872a4f6 · 872a4f6
1 parent c0e9c55
commit 872a4f6
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 5 deletions.
diff --git a/src/css/metacatui-common.css b/src/css/metacatui-common.css
@@ -2510,7 +2510,7 @@ img[src*="googleapis.com/"].georegion-map{
 }
 .project-display-text{
   box-sizing: border-box;
-background-color: rgba(0,0,0,.5);
+background-color: var(--project-primary-color-transparent);
 padding: 20px;
 }
 .logo-container{

diff --git a/src/js/models/ProjectModel.js b/src/js/models/ProjectModel.js
@@ -51,9 +51,12 @@ define(["jquery",
                     //The MapModel
                     mapModel: gmaps ? new MapModel() : null,
                     //Project view colors, as specified in the project document options
-                    primaryColor: "#333",
-                    secondaryColor: "#333",
-                    accentColor: "#333"
+                    primaryColor: "",
+                    secondaryColor: "",
+                    accentColor: "",
+                    primaryColorRGB: null,
+                    secondaryColorRGB: null,
+                    accentColorRGB: null,
                 });
             },
 
@@ -199,6 +202,17 @@ define(["jquery",
 
                 });
 
+                //Convert all the hex colors to rgb
+                if(modelJSON.primaryColor){
+                  modelJSON.primaryColorRGB = this.hexToRGB(modelJSON.primaryColor);
+                }
+                if(modelJSON.secondaryColor){
+                  modelJSON.secondaryColorRGB = this.hexToRGB(modelJSON.secondaryColor);
+                }
+                if(modelJSON.accentColor){
+                  modelJSON.accentColorRGB = this.hexToRGB(modelJSON.accentColor);
+                }
+
                 if (gmaps) {
                     //Create a MapModel with all the map options
                     modelJSON.mapModel = new MapModel();
@@ -286,6 +300,15 @@ define(["jquery",
                 });
 
                 return filters;
+            },
+
+            hexToRGB: function(hex){
+              var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+              return result ? {
+                  r: parseInt(result[1], 16),
+                  g: parseInt(result[2], 16),
+                  b: parseInt(result[3], 16)
+              } : null;
             }
 
         });

diff --git a/src/js/templates/project/project.html b/src/js/templates/project/project.html
@@ -20,6 +20,10 @@
     --project-primary-color: <%=primaryColor%>;
     --project-secondary-color: <%=secondaryColor%>;
     --project-accent-color: <%=accentColor%>;
+    --project-primary-color-transparent: <%=primaryColorTransparent%>;
+    --project-secondary-color-transparent: <%=secondaryColorTransparent%>;
+    --project-accent-color-transparent: <%=accentColorTransparent%>;
+
   }
   </style>
 </div>
diff --git a/src/js/views/project/ProjectView.js b/src/js/views/project/ProjectView.js
@@ -77,8 +77,22 @@ define(["jquery",
 
             renderProject: function() {
 
+                //Make the JSON to send to the template
+                var templateVariables = this.model.toJSON();
+
+                //Make the color rgba string
+                templateVariables.primaryColorTransparent = "rgba(" + this.model.get("primaryColorRGB").r +
+                  "," + this.model.get("primaryColorRGB").g + "," + this.model.get("primaryColorRGB").b +
+                  ", .5)";
+                templateVariables.secondaryColorTransparent = "rgba(" + this.model.get("secondaryColorRGB").r +
+                  "," + this.model.get("secondaryColorRGB").g + "," + this.model.get("secondaryColorRGB").b +
+                  ", .5)";
+                templateVariables.accentColorTransparent = "rgba(" + this.model.get("accentColorRGB").r +
+                  "," + this.model.get("accentColorRGB").g + "," + this.model.get("accentColorRGB").b +
+                  ", .5)";
+
                 // Insert the overall project template
-                this.$el.html(this.template(this.model.toJSON()));
+                this.$el.html(this.template(templateVariables));
 
                 //Render the header view
                 this.headerView = new ProjectHeaderView({