swcs/Archetype
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement Localization

Browse Source
This commit is contained in:
Kevin Giszewski
2014-02-05 14:08:46 -05:00
parent 15e65f15af
commit 6c7ec07068
9 changed files with 158 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Gruntfile.js
+5 -1
View File
@@ -62,7 +62,8 @@ module.exports = function(grunt) {
'app/controllers/controller.js',
'app/controllers/config.controller.js',
'app/directives/archetypeproperty.js',
'app/resources/propertyeditor.js'
'app/resources/propertyeditor.js',
'app/filters/locale.js'
],
dest: '<%= dest %>/js/archetype.js'
}
@@ -106,6 +107,9 @@ module.exports = function(grunt) {
{expand: true, cwd: 'app/', src: ['package.manifest'], dest: '<%= dest %>', flatten: true},
{expand: true, cwd: 'app/views/', src: ['archetype.html', 'archetype.config.html'], dest: '<%= dest %>/views', flatten: true},
{expand: true, cwd: 'app/config/', src: ['propertyEditors.views.js'], dest: '<%= dest %>/js', flatten: true},
{expand: true, cwd: 'app/config/', src: ['settings.js'], dest: '<%= dest %>/js', flatten: true},
{expand: true, cwd: 'app/config/', src: ['en-us.js'], dest: '<%= dest %>/js', flatten: true},
{expand: true, cwd: 'app/config/', src: ['fr-fr.js'], dest: '<%= dest %>/js', flatten: true},
{expand: true, cwd: 'app/Umbraco/Umbraco.Archetype/bin/Debug/', src: ['Archetype.dll'], dest: '<%= dest %>/bin', flatten: true}
]
},
app/config/en-us.js
+34
View File
@@ -0,0 +1,34 @@
{
"label": "Label",
"alias": "Alias",
"hideFieldsetControls": "Hide Fieldset Controls?",
"hideFieldsetControlsDescription": "Hides the fieldset add/remove/sort controls.",
"toggleAdvanced": "Toggle Advanced Options",
"toggleAdvancedDescription": "Show advanced options.",
"hidePropertyLabels": "Hide Property Labels?",
"hidePropertyLabelsDescription": "Hides the property labels.",
"maxFieldsets": "Max Fieldsets",
"maxFieldsetsDescription": "How many Fieldsets are allowed? Entering '1' will disable the controls. Default is unlimited.",
"enableMultipleFieldsets": "Enable Multiple Fieldsets?",
"enableMultipleFieldsetsDescription": "Allows multiple types of fieldsets within this archetype.",
"hideFieldsetToolbar": "Hide Fieldset Toolbar?",
"hideFieldsetToolbarDescription": "Hides the fieldset toolbar that appears when more than one fieldset model appears.",
"customWrapperClass": "Custom Wrapper Class",
"customWrapperClassDescription": "(Optional) Enter a custom CSS class that will be applied to the wrapper div.",
"cssFile": "CSS File",
"cssFileDescription": "(Optional) Enter a path for a custom CSS file to be included on the page.",
"jsFile": "JS File",
"jsFileDescription": "(Optional) Enter a path for a custom JS file to be included on the page.",
"toggleDeveloperMode": "Toggle Developer Mode",
"toggleDeveloperModeDescription": "Turn on for developer options.",
"configModel": "Config Model",
"configModelDescription": "Be careful editing the text below, it controls the schema for this archetype.",
"helpText": "Help Text",
"defaultValue": "Default Value",
"dataType": "DataType",
"required": "Required",
"properties": "Properties",
"labelTemplate": "Label Template",
"select": "Select",
"icon": "Icon"
}
app/config/fr-fr.js
+34
View File
@@ -0,0 +1,34 @@
{
"label": "fr Label",
"alias": "fr Alias",
"hideFieldsetControls": "fr Hide Fieldset Controls?",
"hideFieldsetControlsDescription": "fr Hides the fieldset add/remove/sort controls.",
"toggleAdvanced": "fr Toggle Advanced Options",
"toggleAdvancedDescription": "fr Show advanced options.",
"hidePropertyLabels": "fr Hide Property Labels?",
"hidePropertyLabelsDescription": "fr Hides the property labels.",
"maxFieldsets": "fr Max Fieldsets",
"maxFieldsetsDescription": "fr How many Fieldsets are allowed? Entering '1' will disable the controls. Default is unlimited.",
"enableMultipleFieldsets": "fr Enable Multiple Fieldsets?",
"enableMultipleFieldsetsDescription": "fr Allows multiple types of fieldsets within this archetype.",
"hideFieldsetToolbar": "fr Hide Fieldset Toolbar?",
"hideFieldsetToolbarDescription": "fr Hides the fieldset toolbar that appears when more than one fieldset model appears.",
"customWrapperClass": "fr Custom Wrapper Class",
"customWrapperClassDescription": "fr (Optional) Enter a custom CSS class that will be applied to the wrapper div.",
"cssFile": "fr CSS File",
"cssFileDescription": "fr Optional) Enter a path for a custom CSS file to be included on the page.",
"jsFile": "fr JS File",
"jsFileDescription": "fr (Optional) Enter a path for a custom JS file to be included on the page.",
"toggleDeveloperMode": "fr Toggle Developer Mode",
"toggleDeveloperModeDescription": "fr Turn on for developer options.",
"configModel": "fr Config Model",
"configModelDescription": "fr Be careful editing the text below, it controls the schema for this archetype.",
"helpText": "fr Help Text",
"defaultValue": "fr Default Value",
"dataType": "fr DataType",
"required": "fr Required",
"properties": "fr Properties",
"labelTemplate": "fr Label Template",
"select": "fr Select",
"icon": "fr Icon"
}
app/config/settings.js
+3
View File
@@ -0,0 +1,3 @@
{
"langIso": "en-us"
}
app/controllers/config.controller.js
+29 -3
View File
@@ -1,6 +1,6 @@
angular.module("umbraco").controller("Imulus.ArchetypeConfigController", function ($scope, $http, assetsService, dialogService, propertyEditorResource) {
angular.module("umbraco").controller("Imulus.ArchetypeConfigController", function ($scope, $http, assetsService, dialogService, archetypePropertyEditorResource) {
//$scope.model.value = "";
//$scope.model.value = "";
//console.log($scope.model.value);
//define empty items
@@ -15,10 +15,36 @@ angular.module("umbraco").controller("Imulus.ArchetypeConfigController", functio
initConfigRenderModel();
//get the available datatypes
propertyEditorResource.getAllDataTypes().then(function(data) {
archetypePropertyEditorResource.getAllDataTypes().then(function(data) {
$scope.availableDataTypes = data;
});
//load the localization info
archetypePropertyEditorResource.getSettings()
.then(function(settings) {
$scope.settings = settings;
return settings.langIso;
})
.then(function(langIso){
archetypePropertyEditorResource.getLocale(langIso)
.then(function(locale) {
return locale;
}).then(function(locale){
archetypePropertyEditorResource.getDefaultLocale(locale)
.then(function(defaultLocale) {
$scope.locales = {}
$scope.locales.locale = locale;
$scope.locales.defaultLocale = defaultLocale;
});
});
});
$scope.getLocales = function(){
if($scope.locales){
return $scope.locales;
}
}
//iconPicker
$scope.selectIcon = function(fieldset){
var dialog = dialogService.iconPicker({
app/directives/archetypeproperty.js
+3 -3
View File
@@ -1,4 +1,4 @@
angular.module("umbraco").directive('archetypeProperty', function ($compile, $http, propertyEditorResource, umbPropEditorHelper) {
angular.module("umbraco").directive('archetypeProperty', function ($compile, $http, archetypePropertyEditorResource, umbPropEditorHelper) {
function getFieldsetByAlias(fieldsets, alias)
{
@@ -60,7 +60,7 @@ angular.module("umbraco").directive('archetypeProperty', function ($compile, $ht
defaultValue = jsonOrString(defaultValue, scope.archetypeConfig.developerMode, "defaultValue");
//grab info for the selected datatype, prepare for view
propertyEditorResource.getDataType(dataTypeId).then(function (data) {
archetypePropertyEditorResource.getDataType(dataTypeId).then(function (data) {
//transform preValues array into object expected by propertyeditor views
var configObj = {};
_.each(data.preValues, function(p) {
@@ -69,7 +69,7 @@ angular.module("umbraco").directive('archetypeProperty', function ($compile, $ht
config = configObj;
//determine the view to use [...] and load it
propertyEditorResource.getPropertyEditorMapping(data.selectedEditor).then(function(propertyEditor) {
archetypePropertyEditorResource.getPropertyEditorMapping(data.selectedEditor).then(function(propertyEditor) {
var pathToView = umbPropEditorHelper.getViewPath(propertyEditor.view);
//load in the DefaultPreValues for the PropertyEditor, if any
app/filters/locale.js
+9
View File
@@ -0,0 +1,9 @@
angular.module('umbraco.filters').filter("archetypeLocale", function(){
return function(key, locales){
if(!locales)
return key;
return locales.locale[key] || locales.defaultLocale[key] || key;
}
})
app/resources/propertyeditor.js
+17 -2
View File
@@ -1,4 +1,4 @@
angular.module('umbraco.resources').factory('propertyEditorResource', function($q, $http, umbRequestHelper){
angular.module('umbraco.resources').factory('archetypePropertyEditorResource', function($q, $http, umbRequestHelper){
return {
getAllDataTypes: function() {
// Hack - grab DataTypes from Tree API, as `dataTypeService.getAll()` isn't implemented yet
@@ -28,6 +28,21 @@ angular.module('umbraco.resources').factory('propertyEditorResource', function($
return "";
});
},
getSettings: function() {
return umbRequestHelper.resourcePromise(
$http.get("/App_plugins/Archetype/js/settings.js"), 'Failed to retrieve config'
);
},
getLocale: function(langIso) {
return umbRequestHelper.resourcePromise(
$http.get("/App_plugins/Archetype/js/" + langIso + ".js"), 'Failed to retrieve locale'
);
},
getDefaultLocale: function() {
return umbRequestHelper.resourcePromise(
$http.get("/App_plugins/Archetype/js/en-us.js"), 'Failed to retrieve default locale'
);
}
};
});
});
app/views/archetype.config.html
+24 -24
View File
@@ -10,24 +10,24 @@
<div class="archetypeFieldsetTitle" ng-click="focusFieldset(fieldset)">{{fieldset.label}}</div>
<div class="archetypeFieldsetCollapser" ng-hide="fieldset.collapse && fieldset.label">
<div class="archetypeFieldsetOption">
<label for="archetypeFieldLabel_{{$index}}">Label</label>
<label for="archetypeFieldLabel_{{$index}}">{{'label' | archetypeLocale:getLocales()}}</label>
<input type="text" id="archetypeFieldLabel_{{$index}}" ng-model="fieldset.label" />
</div>
<div class="archetypeFieldsetOption">
<label for="archetypeFieldAlias_{{$index}}">Alias</label>
<label for="archetypeFieldAlias_{{$index}}">{{'alias' | archetypeLocale:getLocales()}}</label>
<input type="text" id="archetypeFieldAlias_{{$index}}" ng-model="fieldset.alias" required/>
</div>
<div class="archetypeFieldsetOption">
<label for="archetypeFieldLabelTemplate_{{$index}}">Label Template</label>
<label for="archetypeFieldLabelTemplate_{{$index}}">{{'labelTemplate' | archetypeLocale:getLocales()}}</label>
<input type="text" id="archetypeFieldLabelTemplate_{{$index}}" ng-model="fieldset.labelTemplate" />
</div>
<div class="archetypeFieldsetOption" ng-show="archetypeConfigRenderModel.enableMultipleFieldsets">
<label for="archetypeFieldIcon_{{$index}}">Icon</label>
<i class="fieldsetIcon icon ng-class:fieldset.icon"></i><a ng-click="selectIcon(fieldset)">Select...</a>
<label for="archetypeFieldIcon_{{$index}}">{{'icon' | archetypeLocale:getLocales()}}</label>
<i class="fieldsetIcon icon ng-class:fieldset.icon"></i><a ng-click="selectIcon(fieldset)">{{'select' | archetypeLocale:getLocales()}}…</a>
</div>
<div class="archetypeFieldsetOption">
<label>Properties</label>
</div>
<label>{{'properties' | archetypeLocale:getLocales()}}</label>
</div>
<div class="archetypePropertiesWrapper">
<ul ui-sortable="sortableOptions" ng-model="fieldset.properties">
<li ng-repeat="property in fieldset.properties" ng-hide="property.remove">
@@ -41,27 +41,27 @@
</div>
<div class="archetypePropertyCollapser" ng-hide="property.collapse && property.label">
<div>
<label for="archetypePropertyLabel_{{$parent.$index}}_{{$index}}">Label</label>
<label for="archetypePropertyLabel_{{$parent.$index}}_{{$index}}">{{'label' | archetypeLocale:getLocales()}}</label>
<input type="text" id="archetypePropertyLabel_{{$parent.$index}}_{{$index}}" ng-model="property.label" />
</div>
<div>
<label for="archetypePropertyAlias_{{$parent.$index}}_{{$index}}">Alias</label>
<label for="archetypePropertyAlias_{{$parent.$index}}_{{$index}}">{{'alias' | archetypeLocale:getLocales()}}</label>
<input type="text" id="archetypePropertyAlias_{{$parent.$index}}_{{$index}}" ng-model="property.alias" required/>
</div>
<div>
<label for="archetypePropertyHelpText_{{$parent.$index}}_{{$index}}">Help Text</label>
<label for="archetypePropertyHelpText_{{$parent.$index}}_{{$index}}">{{'helpText' | archetypeLocale:getLocales()}}</label>
<input type="text" id="archetypePropertyHelpText_{{$parent.$index}}_{{$index}}" ng-model="property.helpText" />
</div>
<div>
<label for="archetypePropertyDataType_{{$parent.$index}}_{{$index}}">DataType</label>
<label for="archetypePropertyDataType_{{$parent.$index}}_{{$index}}">{{'dataType' | archetypeLocale:getLocales()}}</label>
<select id="archetypePropertyDataType_{{$parent.$index}}_{{$index}}" ng-model="property.dataTypeId" ng-options="datatype.id as datatype.name for datatype in availableDataTypes"></select>
</div>
<div>
<label for="archetypePropertyDefaultValue_{{$parent.$index}}_{{$index}}">Default Value</label>
<label for="archetypePropertyDefaultValue_{{$parent.$index}}_{{$index}}">{{'defaultValue' | archetypeLocale:getLocales()}}</label>
<input type="text" id="archetypePropertyDefaultValue_{{$parent.$index}}_{{$index}}" ng-model="property.value" />
</div>
<div>
<label for="archetypePropertyRequired_{{$parent.$index}}_{{$index}}">Required</label>
<label for="archetypePropertyRequired_{{$parent.$index}}_{{$index}}">{{'required' | archetypeLocale:getLocales()}}</label>
<input type="checkbox" id="archetypePropertyRequired_{{$parent.$index}}_{{$index}}" ng-model="property.required" />
</div>
</div>
@@ -75,50 +75,50 @@
<div class="archetypeOptions">
<div>
<label for="archetypeOptionsToggle">Toggle Advanced Options<small>Show advanced options.</small></label>
<label for="archetypeOptionsToggle">{{'toggleAdvanced' | archetypeLocale:getLocales()}}<small>{{'toggleAdvancedDescription' | archetypeLocale:getLocales()}}</small></label>
<input type="checkbox" id="archetypeOptionsToggle" ng-model="archetypeConfigRenderModel.showAdvancedOptions"/>
</div>
</div>
<div class="archetypeAdvancedOptions" ng-show="archetypeConfigRenderModel.showAdvancedOptions">
<div>
<label for="archetypeAdvancedOptionsHideControls">Hide fieldset editor controls?<small>Hides the fieldset add/remove/sort controls.</small></label>
<label for="archetypeAdvancedOptionsHideControls">{{'hideFieldsetControls' | archetypeLocale:getLocales()}}<small>{{'hideFieldsetControlsDescription' | archetypeLocale:getLocales()}}</small></label>
<input type="checkbox" id="archetypeAdvancedOptionsHideControls" ng-model="archetypeConfigRenderModel.hideFieldsetControls"/>
</div>
<div>
<label for="archetypeAdvancedOptionsHideLabels">Hide property labels?<small>Hides the property labels.</small></label>
<label for="archetypeAdvancedOptionsHideLabels">{{'hidePropertyLabels' | archetypeLocale:getLocales()}}<small>{{'hidePropertyLabelsDescription' | archetypeLocale:getLocales()}}</small></label>
<input type="checkbox" id="archetypeAdvancedOptionsHideLabels" ng-model="archetypeConfigRenderModel.hidePropertyLabels"/>
</div>
<div>
<label for="archetypeAdvancedOptionsMaxFieldsets">Max fieldsets<small>How many Fieldsets are allowed? Entering '1' will disable the controls. Default is unlimited.</small></label>
<label for="archetypeAdvancedOptionsMaxFieldsets">{{'maxFieldsets' | archetypeLocale:getLocales()}}<small>{{'maxFieldsetsDescription' | archetypeLocale:getLocales()}}</small></label>
<input type="number" id="archetypeAdvancedOptionsMaxFieldsets" class="archetypeMaxFieldsets" ng-model="archetypeConfigRenderModel.maxFieldsets"/>
</div>
<div>
<label for="archetypeAdvancedOptionsMultipleFieldsets">Enable multiple fieldsets?<small>Allows multiple types of fieldsets within this archetype.</small></label>
<label for="archetypeAdvancedOptionsMultipleFieldsets">{{'enableMultipleFieldsets' | archetypeLocale:getLocales()}}<small>{{'enableMultipleFieldsetsDescription' | archetypeLocale:getLocales()}}</small></label>
<input type="checkbox" id="archetypeAdvancedOptionsMultipleFieldsets" ng-model="archetypeConfigRenderModel.enableMultipleFieldsets"/>
</div>
<div>
<label for="archetypeAdvancedOptionsFieldsetToolbar">Hide fieldset toolbar?<small>Hides the fieldset toolbar that appears when more than one fieldset model appears.</small></label>
<label for="archetypeAdvancedOptionsFieldsetToolbar">{{'hideFieldsetToolbar' | archetypeLocale:getLocales()}}<small>{{'hideFieldsetToolbarDescription' | archetypeLocale:getLocales()}}</small></label>
<input type="checkbox" id="archetypeAdvancedOptionsFieldsetToolbar" ng-model="archetypeConfigRenderModel.hideFieldsetToolbar"/>
</div>
<div>
<label for="archetypeAdvancedOptionsCustomClass">Custom Wrapper Class<small>(Optional) Enter a custom CSS class that will be applied to the wrapper div.</small></label>
<label for="archetypeAdvancedOptionsCustomClass">{{'customWrapperClass' | archetypeLocale:getLocales()}}<small>{{'customWrapperClass' | archetypeLocale:getLocales()}}</small></label>
<input type="text" id="archetypeAdvancedOptionsCustomClass" ng-model="archetypeConfigRenderModel.customCssClass"/>
</div>
<div>
<label for="archetypeAdvancedOptionsCustomCss">CSS File<small>(Optional) Enter a path for a custom CSS file to be included on the page.</small></label>
<label for="archetypeAdvancedOptionsCustomCss">{{'cssFile' | archetypeLocale:getLocales()}}<small>{{'cssFileDescription' | archetypeLocale:getLocales()}}</small></label>
<input type="text" id="archetypeAdvancedOptionsCustomCss" ng-model="archetypeConfigRenderModel.customCssPath"/>
</div>
<div>
<label for="archetypeAdvancedOptionsCustomJs">JS File<small>(Optional) Enter a path for a custom JS file to be included on the page.</small></label>
<label for="archetypeAdvancedOptionsCustomJs">{{'jsFile' | archetypeLocale:getLocales()}}<small>{{'jsFileDescription' | archetypeLocale:getLocales()}}</small></label>
<input type="text" id="archetypeAdvancedOptionsCustomJs" ng-model="archetypeConfigRenderModel.customJsPath"/>
</div>
<div>
<label for="archetypeAdvancedOptionsDeveloperMode">Toggle Developer Mode<small>Turn on for developer options.</small></label>
<label for="archetypeAdvancedOptionsDeveloperMode">{{'toggleDeveloperMode' | archetypeLocale:getLocales()}}<small>{{'toggleDeveloperModeDescription' | archetypeLocale:getLocales()}}</small></label>
<input type="checkbox" id="archetypeAdvancedOptionsDeveloperMode" ng-model="archetypeConfigRenderModel.developerMode"/>
</div>
<div>
<label for="archetypeAdvancedOptionsConfigModel">Config Model<small>Be careful editing the text below, it controls the schema for this archetype.</small></label>
<label for="archetypeAdvancedOptionsConfigModel">{{'configModel' | archetypeLocale:getLocales()}}<small>{{'configModelDescription' | archetypeLocale:getLocales()}}</small></label>
<textarea class="archetypeDeveloperModel" id="archetypeAdvancedOptionsConfigModel" ng-model="archetypeConfigRenderModel"></textarea>
</div>
</div>