Language settings and css injection

plugin.json

@@ -16,6 +16,20 @@
     },
     "settings": {
       "enabled": false
+    },
+    "language": {
+      "enabled": true,
+      "languageJsonPath": "resources/languages.json"
+    },
+    "cssInjection": { 
+      "enabled": true,
+      "layouts": [ 
+        {
+            "name": "Layout 1",
+            "imageUrl": "resources/layouts_img/layout1.png",
+            "cssPath": "widget/layouts/layout1.css"
+        }
+     ]
     }
   },
   "widget": {

resources/languages.json

@@ -0,0 +1,22 @@
+{
+    "sections": {
+        "general": {
+            "title": "General",
+            "labels": {
+                "contactInfo": {
+                    "title": "Contact Info",
+                    "defaultValue": "Contact Info",
+                    "placeholder": "Contact Info",
+                    "toolTip":"Contact Info button label"
+                },
+                "done": {
+                    "title": "Done",
+                    "defaultValue": "Done",
+                    "maxLength":15,
+                    "placeholder": "Done",
+                    "toolTip":"Close contact information dialog label"
+                }
+            }
+        }
+    }
+}

widget/controllers/widget.home.controller.js

@@ -7,6 +7,7 @@
         var WidgetHome = this;
         var currentListLayout = null;
         WidgetHome.data = {};
+        WidgetHome.closeButtonText = 'Done';
 
         //create new instance of buildfire carousel viewer
         WidgetHome.view = null;
@@ -150,6 +151,12 @@
                 console.log("Error while getting the device context data", error)
             };
             buildfire.getContext(getDevice);
+
+            buildfire.language.get({stringKey: "general.done"}, (err, result) => {
+              if (err) return console.error("Error while retrieving string value", err);
+              WidgetHome.closeButtonText = result;
+            });
+
             cb();
 
           }
@@ -232,7 +239,7 @@
           });
 
           if (actionItems && actionItems.length) {
-            var options = {};
+            var options = {closeButtonText : WidgetHome.closeButtonText};
             var callback = function (error, result) {
               if (error) {
                 console.error('Error:', error);

widget/css/widget.app.css

@@ -1,15 +1,33 @@
 /* Plugin CSS */
-.contact-plugin.layout2 .contact-maps{
-	position:relative;
+.contact-plugin.layout1 .contact-info-button {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.contact-plugin.layout2 .contact-info-button {
+    display: block;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
-.contact-plugin.layout2 .plugin-slider .plugin-slide{
-	background:none;
+
+.contact-plugin.layout2 .contact-maps {
+    position: relative;
+}
+
+.contact-plugin.layout2 .plugin-slider .plugin-slide {
+    background: none;
 }
-.contact-plugin.layout2 .plugin-slider, 
-.contact-plugin.layout2 .plugin-slider .contact-slide{
-	max-height:100px;
-	background:none;
+
+.contact-plugin.layout2 .plugin-slider,
+.contact-plugin.layout2 .plugin-slider .contact-slide {
+    max-height: 100px;
+    background: none;
 }
+
 /* End Plugin CSS */
 
 /* Styles for home page carousel - to align and style the slider items*/
@@ -20,13 +38,13 @@
 
 /* To hide map report error link */
 
-.gmnoprint a{
-    display:none;
+.gmnoprint a {
+    display: none;
 }
 
 /* To overlay texts on background */
-.text-overlay{
-    position:relative
+.text-overlay {
+    position: relative
 }
 
 /*background image css class*/
@@ -50,18 +68,17 @@
     text-align: center;
 }
 
-.mapSize{
-height: 192px;
-}
-
-.holder .info-bar{
-    position:absolute;
-    bottom:0;
-    left:0;
-    width:100%;
-    padding:10px 0;
-    opacity:0.85;
-    z-index:9;
-    -webkit-transform:translate3d(0,0,0);
+.map-size {
+    height: 192px;
 }
 
+.holder .info-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 10px 0;
+    opacity: 0.85;
+    z-index: 9;
+    -webkit-transform: translate3d(0, 0, 0);
+}

widget/index.html

@@ -2,6 +2,7 @@
 <html ng-app="contactUsPluginWidget">
 <head>
   <!--<base href="./"/>-->
+  <meta name="buildfire" content="enablePluginJsonLoad">
 
   <!-- CSS -->
   <link rel="stylesheet" href="../../../styles/siteIcons.css">

widget/layouts/layout1.css

@@ -0,0 +1 @@
+/* Here you can add your own custom CSS */

widget/templates/Layout_1.html

@@ -7,8 +7,9 @@
     </div>
     <div class="padded text-center text-overlay"
          ng-if="WidgetHome.data.content.links[0] || WidgetHome.data.content.addressTitle||WidgetHome.data.content.address.location">
-      <a class="btn btn-primary" ng-show="WidgetHome.data.content.links[0]"
-         ng-click="WidgetHome.openLinks(WidgetHome.data.content.links, $event)">Contact
+      <a class="contact-info-button btn btn-primary" ng-show="WidgetHome.data.content.links[0]"
+         ng-click="WidgetHome.openLinks(WidgetHome.data.content.links, $event)"
+         bfString="general.contactInfo">Contact
         info</a>
       <hr class="small" ng-show="WidgetHome.data.content.links[0]">
       <p class="margin-bottom-zero text-primary"
@@ -24,7 +25,7 @@
     </div>
     <div class="contact-maps text-center"
          ng-if="WidgetHome.data.content.address && WidgetHome.data.content.showMap">
-      <div google-map class="mapSize"
+      <div google-map class="map-size"
            coordinates="WidgetHome.data.content.address.location_coordinates"></div>
     </div>
     <div class="padded text-overlay">

widget/templates/Layout_2.html

@@ -2,7 +2,7 @@
   <div class="contact-plugin layout2">
     <div class="contact-maps text-center"
          ng-if="WidgetHome.data.content.addressTitle || WidgetHome.data.content.address.location">
-      <div google-map class="mapSize"
+      <div google-map class="map-size"
            ng-if="WidgetHome.data.content.address && WidgetHome.data.content.showMap"
            coordinates="WidgetHome.data.content.address.location_coordinates"></div>
       <div class="contact-address info-bar titleBarBackgroundTheme">
@@ -35,8 +35,9 @@
       </div>
 
       <div class="margin-top-ten text-overlay text-center">
-        <a class="text-primary" ng-show="WidgetHome.data.content.links[0]"
-           ng-click="WidgetHome.openLinks(WidgetHome.data.content.links, $event)">Contact
+        <a class="contact-info-button text-primary" ng-show="WidgetHome.data.content.links[0]"
+           ng-click="WidgetHome.openLinks(WidgetHome.data.content.links, $event)"
+           bfString="general.contactInfo">Contact
           info</a>
         <hr class="small "
             ng-show="WidgetHome.data.content.links[0]">