Merge remote-tracking branch 'refs/remotes/origin/feature/language-support'

Author: chaaya

README.md

@@ -30,7 +30,7 @@ git clone https://github.com/angular-dashboard-framework/angular-dashboard-frame
 cd angular-dashboard-framework
 ```
 
-Install npm and bower dependencies:
+Install dependencies:
 
 ```bash
 npm install
@@ -59,6 +59,7 @@ gulp all
 ```
 The sample and the final build of angular-dashboard-framework are now in the dist directory.
 
+
 ## Contributing
 
 Please do not commit changes to the dist folder. The dist folder is only generated for releases.

src/scripts/adf.js

@@ -24,7 +24,7 @@
 
 'use strict';
 
-angular.module('adf', ['adf.provider', 'ui.bootstrap'])
+angular.module('adf', ['adf.provider', 'adf.locale', 'ui.bootstrap'])
   .value('adfTemplatePath', '../src/templates/')
   .value('rowTemplate', '<adf-dashboard-row row="row" adf-model="adfModel" options="options" edit-mode="editMode" ng-repeat="row in column.rows" />')
   .value('columnTemplate', '<adf-dashboard-column column="column" adf-model="adfModel" options="options" edit-mode="editMode" ng-repeat="column in row.columns" />')

src/scripts/adf.locale.js

@@ -0,0 +1,27 @@
+/*
+ * The MIT License
+ *
+ * Copyright (c) 2015, Sebastian Sdorra
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+'use strict';
+
+angular.module('adf.locale', [])

src/scripts/dashboard.js

@@ -330,6 +330,16 @@ angular.module('adf')
         $scope.editMode = false;
         $scope.editClass = '';
 
+        //passs translate function from dashboard so we can translate labels inside html templates
+        $scope.translate = dashboard.translate;
+
+        function getNewModalScope() {
+          var scope = $scope.$new();
+          //pass translate function to the new scope so we can translate the labels inside the modal dialog
+          scope.translate = dashboard.translate;
+          return scope;
+        }
+
         $scope.toggleEditMode = function(){
           $scope.editMode = ! $scope.editMode;
           if ($scope.editMode){
@@ -362,7 +372,7 @@ angular.module('adf')
 
         // edit dashboard settings
         $scope.editDashboardDialog = function(){
-          var editDashboardScope = $scope.$new();
+          var editDashboardScope = getNewModalScope();
           // create a copy of the title, to avoid changing the title to
           // "dashboard" if the field is empty
           editDashboardScope.copy = {
@@ -403,7 +413,7 @@ angular.module('adf')
 
         // add widget dialog
         $scope.addWidgetDialog = function(){
-          var addScope = $scope.$new();
+          var addScope = getNewModalScope();
           var model = $scope.model;
           var widgets;
           if (angular.isFunction(widgetFilter)){
@@ -418,6 +428,9 @@ angular.module('adf')
           }
           addScope.widgets = widgets;
 
+          //pass translate function to the new scope so we can translate the labels inside the modal dialog
+          addScope.translate = $scope.translate;
+
           // pass createCategories function to scope, if categories option is enabled
           if ($scope.options.categories){
             $scope.createCategories = createCategories;

src/scripts/locale-constant.js

@@ -0,0 +1,85 @@
+/*
+* The MIT License
+*
+* Copyright (c) 2015, Sebastian Sdorra
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the "Software"), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+* copies of the Software, and to permit persons to whom the Software is
+* furnished to do so, subject to the following conditions:
+*
+* The above copyright notice and this permission notice shall be included in
+* all copies or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+* SOFTWARE.
+*/
+
+'use strict';
+
+/**
+* @ngdoc object
+* @name adf.locale#adfLocale
+* @description
+*
+* Holds settings and values for framework supported locales
+*/
+angular.module('adf.locale')
+.constant('adfLocale',
+  {
+    defaultLocale: 'en-GB',
+    frameworkLocales: {
+      'en-GB': {
+        ADF_COMMON_CLOSE: 'Close',
+        ADF_COMMON_DELETE: 'Delete',
+        ADF_COMMON_TITLE: 'Title',
+        ADF_COMMON_CANCEL: 'Cancel',
+        ADF_COMMON_APPLY: 'Apply',
+        ADF_COMMON_EDIT_DASHBOARD: 'Edit dashboard',
+        ADF_EDIT_DASHBOARD_STRUCTURE_LABEL: 'Structure',
+        ADF_DASHBOARD_TITLE_TOOLTIP_ADD: 'Add new widget',
+        ADF_DASHBOARD_TITLE_TOOLTIP_SAVE: 'Save changes',
+        ADF_DASHBOARD_TITLE_TOOLTIP_EDIT_MODE: 'Enable edit mode',
+        ADF_DASHBOARD_TITLE_TOOLTIP_UNDO: 'Undo changes',
+        ADF_WIDGET_ADD_HEADER: 'Add new widget',
+        ADF_WIDGET_DELETE_CONFIRM_MESSAGE: 'Are you sure you want to delete this widget ?',
+        ADF_WIDGET_TOOLTIP_REFRESH: 'Reload widget Content',
+        ADF_WIDGET_TOOLTIP_MOVE: 'Change widget location',
+        ADF_WIDGET_TOOLTIP_COLLAPSE: 'Collapse widget',
+        ADF_WIDGET_TOOLTIP_EXPAND: 'Expand widget',
+        ADF_WIDGET_TOOLTIP_EDIT: 'Edit widget configuration',
+        ADF_WIDGET_TOOLTIP_FULLSCREEN: 'Fullscreen widget',
+        ADF_WIDGET_TOOLTIP_REMOVE: 'Remove widget'
+      },
+      'sv-SE': {
+        ADF_COMMON_CLOSE: 'Stäng',
+        ADF_COMMON_DELETE: 'Ta bort',
+        ADF_COMMON_TITLE: 'Titel',
+        ADF_COMMON_CANCEL: 'Avbryt',
+        ADF_COMMON_APPLY: 'Använd',
+        ADF_COMMON_EDIT_DASHBOARD: 'Redigera dashboard',
+        ADF_EDIT_DASHBOARD_STRUCTURE_LABEL: 'Struktur',
+        ADF_DASHBOARD_TITLE_TOOLTIP_ADD: 'Lägg till ny widget',
+        ADF_DASHBOARD_TITLE_TOOLTIP_SAVE: 'Spara förändringar',
+        ADF_DASHBOARD_TITLE_TOOLTIP_EDIT_MODE: 'Slå på redigeringsläge',
+        ADF_DASHBOARD_TITLE_TOOLTIP_UNDO: 'Ångra förändringar',
+        ADF_WIDGET_ADD_HEADER: 'Lägg till ny widget',
+        ADF_WIDGET_DELETE_CONFIRM_MESSAGE: 'Är du säker på att du vill ta bort denna widget ?',
+        ADF_WIDGET_TOOLTIP_REFRESH: 'Ladda om widget',
+        ADF_WIDGET_TOOLTIP_MOVE: 'Ändra widgets position',
+        ADF_WIDGET_TOOLTIP_COLLAPSE: 'Stäng widget',
+        ADF_WIDGET_TOOLTIP_EXPAND: 'Öppna widget',
+        ADF_WIDGET_TOOLTIP_EDIT: 'Ändra widget konfigurering',
+        ADF_WIDGET_TOOLTIP_FULLSCREEN: 'Visa widget i fullskärm',
+        ADF_WIDGET_TOOLTIP_REMOVE: 'Ta bort widget'
+      }
+    }
+  }
+);

src/scripts/provider.js

@@ -1,4 +1,4 @@
-/*
+/*
  * The MIT License
  *
  * Copyright (c) 2015, Sebastian Sdorra
@@ -31,8 +31,8 @@
  *
  * The dashboardProvider can be used to register structures and widgets.
  */
-angular.module('adf.provider', [])
-  .provider('dashboard', function(){
+angular.module('adf.provider', ['adf.locale'])
+  .provider('dashboard', function(adfLocale){
 
     var widgets = {};
     var widgetsPath = '';
@@ -51,6 +51,22 @@ angular.module('adf.provider', [])
       return true;
     };
 
+    var activeLocale = adfLocale.defaultLocale;
+    var locales = adfLocale.frameworkLocales;
+
+    function getLocales() {
+      return locales;
+    }
+
+    function getActiveLocale() {
+      return activeLocale;
+    }
+
+    function translate(label) {
+      var translation = locales[activeLocale][label];
+      return translation ? translation : label;
+    }
+
    /**
     * @ngdoc method
     * @name adf.dashboardProvider#widget
@@ -227,6 +243,53 @@ angular.module('adf.provider', [])
       return this;
     };
 
+    /**
+     * @ngdoc method
+     * @name adf.dashboardProvider#setLocale
+     * @methodOf adf.dashboardProvider
+     * @description
+     *
+     * Changes the locale setting of adf
+     *
+     * @param {string} ISO Language Code
+     *
+     * @returns {Object} self
+     */
+     this.setLocale = function(locale){
+       if(locales[locale]) {
+         activeLocale = locale;
+       } else {
+         throw new Error('Cannot set locale: ' + locale + '. Locale is not defined.');
+       }
+       return this;
+     };
+
+     /**
+      * @ngdoc method
+      * @name adf.dashboardProvider#addLocale
+      * @methodOf adf.dashboardProvider
+      * @description
+      *
+      * Adds a new locale to adf
+      *
+      * @param {string} ISO Language Code for the new locale
+      * @param {object} translations for the locale.
+      *
+      * @returns {Object} self
+      */
+      this.addLocale = function(locale, translations){
+        if(!angular.isString(locale)) {
+          throw new Error('locale must be an string');
+        }
+
+        if(!angular.isObject(translations)) {
+          throw new Error('translations must be an object');
+        }
+
+        locales[locale] = translations;
+        return this;
+      };
+
    /**
     * @ngdoc service
     * @name adf.dashboard
@@ -239,6 +302,10 @@ angular.module('adf.provider', [])
     * @property {Array.<Object>} structures Array of registered structures.
     * @property {string} messageTemplate Template for messages.
     * @property {string} loadingTemplate Template for widget loading.
+    * @property {method} sets locale of adf.
+    * @property {Array.<Object>} hold all of the locale translations.
+    * @property {string} the active locale setting.
+    * @property {method} translation function passed to templates.
     *
     * @returns {Object} self
     */
@@ -252,6 +319,10 @@ angular.module('adf.provider', [])
         messageTemplate: messageTemplate,
         loadingTemplate: loadingTemplate,
         customWidgetTemplatePath: customWidgetTemplatePath,
+        setLocale: this.setLocale,
+        locales: getLocales,
+        activeLocale: getActiveLocale,
+        translate: translate,
 
         /**
          * @ngdoc method

src/scripts/widget.js

@@ -29,6 +29,10 @@ angular.module('adf')
 
     function preLink($scope) {
       var definition = $scope.definition;
+
+      //passs translate function from dashboard so we can translate labels inside html templates
+      $scope.translate = dashboard.translate;
+
       if (definition) {
         var w = dashboard.widgets[definition.type];
         if (w) {
@@ -114,6 +118,8 @@ angular.module('adf')
         $scope.remove = function() {
           if ($scope.options.enableConfirmDelete) {
             var deleteScope = $scope.$new();
+            deleteScope.translate = dashboard.translate;
+
             var deleteTemplateUrl = adfTemplatePath + 'widget-delete.html';
             if (definition.deleteTemplateUrl) {
               deleteTemplateUrl = definition.deleteTemplateUrl;
@@ -146,6 +152,7 @@ angular.module('adf')
         // bind edit function
         $scope.edit = function() {
           var editScope = $scope.$new();
+          editScope.translate = dashboard.translate;
           editScope.definition = angular.copy(definition);
 
           var adfEditTemplatePath = adfTemplatePath + 'widget-edit.html';

src/templates/dashboard-edit.html

@@ -1,15 +1,15 @@
 <div class="modal-header">
   <button type="button" class="close" ng-click="closeDialog()" aria-hidden="true">&times;</button>
-  <h4 class="modal-title">Edit Dashboard</h4>
+  <h4 class="modal-title" ng-bind="translate('ADF_COMMON_EDIT_DASHBOARD')">Edit Dashboard</h4>
 </div>
 <div class="modal-body">
   <form role="form">
     <div class="form-group">
-      <label for="dashboardTitle">Title</label>
+      <label for="dashboardTitle" ng-bind="translate('ADF_COMMON_TITLE')">Title</label>
       <input type="text" class="form-control" id="dashboardTitle" ng-model="copy.title" required="">
     </div>
     <div class="form-group">
-      <label>Structure</label>
+      <label ng-bind="translate('ADF_EDIT_DASHBOARD_STRUCTURE_LABEL')">Structure</label>
       <div class="row" ng-init="splitted = split(structures, 3)">
         <div class="col-lg-4" ng-repeat="structureColumn in splitted">
           <div class="radio" ng-repeat="(key, structure) in structureColumn">
@@ -34,5 +34,5 @@ <h4 class="modal-title">Edit Dashboard</h4>
   </form>
 </div>
 <div class="modal-footer">
-  <button type="button" class="btn btn-primary" ng-click="closeDialog()">Close</button>
+  <button type="button" class="btn btn-primary" ng-click="closeDialog()" ng-bind="translate('ADF_COMMON_CLOSE')">Close</button>
 </div>

src/templates/dashboard-title.html

@@ -1,16 +1,16 @@
 <h1>
   {{model.title}}
   <span style="font-size: 16px" class="pull-right">
-    <a href="" ng-if="editMode" title="add new widget" ng-click="addWidgetDialog()">
+    <a href="" ng-if="editMode" title="{{ translate('ADF_DASHBOARD_TITLE_TOOLTIP_ADD') }}" ng-click="addWidgetDialog()">
       <i class="glyphicon glyphicon-plus-sign"></i>
     </a>
-    <a href="" ng-if="editMode" title="edit dashboard" ng-click="editDashboardDialog()">
+    <a href="" ng-if="editMode" title="{{ translate('ADF_COMMON_EDIT_DASHBOARD') }}" ng-click="editDashboardDialog()">
       <i class="glyphicon glyphicon-cog"></i>
     </a>
-    <a href="" ng-if="options.editable" title="{{editMode ? 'save changes' : 'enable edit mode'}}" ng-click="toggleEditMode()">
+    <a href="" ng-if="options.editable" title="{{editMode ? translate('ADF_DASHBOARD_TITLE_TOOLTIP_SAVE') : translate('ADF_DASHBOARD_TITLE_TOOLTIP_EDIT_MODE') }}" ng-click="toggleEditMode()">
       <i class="glyphicon" x-ng-class="{'glyphicon-edit' : !editMode, 'glyphicon-save' : editMode}"></i>
     </a>
-    <a href="" ng-if="editMode" title="undo changes" ng-click="cancelEditMode()">
+    <a href="" ng-if="editMode" title="{{ translate('ADF_DASHBOARD_TITLE_TOOLTIP_UNDO') }}" ng-click="cancelEditMode()">
       <i class="glyphicon glyphicon-repeat adf-flip"></i>
     </a>
   </span>

src/templates/widget-add.html

@@ -1,6 +1,6 @@
 <div class="modal-header">
   <button type="button" class="close" ng-click="closeDialog()" aria-hidden="true">&times;</button>
-  <h4 class="modal-title">Add new widget</h4>
+  <h4 class="modal-title" ng-bind="translate('ADF_WIDGET_ADD_HEADER')">Add new widget</h4>
 </div>
 <div class="modal-body">
   <!-- dashboard categories enabled -->
@@ -35,5 +35,5 @@ <h4 class="modal-title">Add new widget</h4>
   </div>
 </div>
 <div class="modal-footer">
-  <button type="button" class="btn btn-primary" ng-click="closeDialog()">Close</button>
+  <button type="button" class="btn btn-primary" ng-click="closeDialog()" ng-bind="translate('ADF_COMMON_CLOSE')">Close</button>
 </div>