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

Merge pull request #20 from imulus/feature/datatypes

Browse Source 
Use DataTypes instead of Views
This commit is contained in:
Tom Fulton
2014-01-31 13:09:37 -08:00
parent daff37074e 80bda94265
commit 424740cdec
10 changed files with 237 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Gruntfile.js
+1 -1
View File
@@ -104,8 +104,8 @@ module.exports = function(grunt) {
build: {
files: [
{expand: true, cwd: 'app/', src: ['package.manifest'], dest: '<%= dest %>', flatten: true},
{expand: true, cwd: 'app/config/', src: ['config.views.js'], dest: '<%= dest %>/js', 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/Umbraco/Umbraco.Archetype/bin/Debug/', src: ['Archetype.dll'], dest: '<%= dest %>/bin', flatten: true}
]
},
app/config/config.views.js
-38
View File
@@ -1,38 +0,0 @@
[
{
"name": "Textstring",
"path": "/umbraco/views/propertyeditors/textbox/textbox.html"
},
{
"name": "Content Picker",
"path": "/umbraco/views/propertyeditors/contentpicker/contentpicker.html"
},
{
"name": "Boolean",
"path": "/umbraco/views/propertyeditors/boolean/boolean.html"
},
{
"name": "Checkbox List",
"path": "/umbraco/views/propertyeditors/checkboxlist/checkboxlist.html"
},
{
"name": "Radio Buttons",
"path": "/umbraco/views/propertyeditors/radiobuttons/radiobuttons.html"
},
{
"name": "Date Picker",
"path": "/umbraco/views/propertyeditors/datepicker/datepicker.html"
},
{
"name": "Dropdown",
"path": "/umbraco/views/propertyeditors/dropdown/dropdown.html"
},
{
"name": "Textarea",
"path": "/umbraco/views/propertyeditors/textarea/textarea.html"
},
{
"name": "RTE",
"path": "/umbraco/views/propertyeditors/rte/rte.html"
}
]
app/config/propertyEditors.views.js
+148
View File
@@ -0,0 +1,148 @@
[
{
"propertyEditorAlias": "Umbraco.CheckBoxList",
"view": "checkboxlist"
},
{
"propertyEditorAlias": "Umbraco.ColorPickerAlias",
"view": "colorpicker"
},
{
"propertyEditorAlias": "Umbraco.ContentPickerAlias",
"view": "contentpicker"
},
{
"propertyEditorAlias": "Umbraco.Date",
"view": "datepicker",
"defaultPreValues": [{ "format": "yyyy-MM-dd", "pickTime": false }]
},
{
"propertyEditorAlias": "Umbraco.DateTime",
"view": "datepicker",
"format": "yyyy-MM-dd hh:mm:ss"
},
{
"propertyEditorAlias": "Umbraco.DropDown",
"view": "dropdown"
},
{
"propertyEditorAlias": "Umbraco.DropDownMultiple",
"view": "dropdown"
},
{
"propertyEditorAlias": "Umbraco.DropDownMultiplePublishKeys",
"view": "dropdown"
},
{
"propertyEditorAlias": "Umbraco.DropdownlistPublishingKeys",
"view": "dropdown"
},
{
"propertyEditorAlias": "Umbraco.EmailAddress",
"view": "email"
},
{
"propertyEditorAlias": "Umbraco.UploadField",
"view": "fileupload"
},
{
"propertyEditorAlias": "Umbraco.FolderBrowser",
"view": "folderbrowser"
},
{
"propertyEditorAlias": "Umbraco.Integer",
"view": "integer"
},
{
"propertyEditorAlias": "Umbraco.NoEdit",
"view": "readonlyvalue"
},
{
"propertyEditorAlias": "Umbraco.ListView",
"view": "listview"
},
{
"propertyEditorAlias": "Umbraco.MacroContainer",
"view": "macrocontainer"
},
{
"propertyEditorAlias": "Umbraco.MarkdownEditor",
"view": "markdowneditor"
},
{
"propertyEditorAlias": "Umbraco.MediaPicker",
"view": "mediapicker",
"defaultPreValues": [{ "multiPicker": "0" }]
},
{
"propertyEditorAlias": "Umbraco.MemberGroupPicker",
"view": "membergrouppicker"
},
{
"propertyEditorAlias": "Umbraco.MemberPicker",
"view": "memberpicker"
},
{
"propertyEditorAlias": "Umbraco.MultiNodeTreePicker",
"view": "contentpicker",
"defaultPreValues": [{ "multiPicker": "1" }]
},
{
"propertyEditorAlias": "Umbraco.MultipleMediaPicker",
"view": "mediapicker"
},
{
"propertyEditorAlias": "Umbraco.MultipleTextstring",
"view": "multipletextbox"
},
{
"propertyEditorAlias": "Umbraco.RadioButtonList",
"view": "radiobuttons"
},
{
"propertyEditorAlias": "Umbraco.RelatedLinks",
"view": "relatedlinks"
},
{
"propertyEditorAlias": "Umbraco.TinyMCEv3",
"view": "rte"
},
{
"propertyEditorAlias": "Umbraco.Slider",
"view": "slider"
},
{
"propertyEditorAlias": "Umbraco.Tags",
"view": "tags",
"defaultPreValues": [{ "group": "default" }]
},
{
"propertyEditorAlias": "Umbraco.TextboxMultiple",
"view": "textarea"
},
{
"propertyEditorAlias": "Umbraco.Textbox",
"view": "textbox"
},
{
"propertyEditorAlias": "Umbraco.TrueFalse",
"view": "boolean"
},
{
"propertyEditorAlias": "Umbraco.UserPicker",
"view": "entitypicker",
"defaultPreValues": [{ "entityType": "User" }]
},
{
"propertyEditorAlias": "Umbraco.NoEdit",
"view": "readonlyvalue"
},
{
"propertyEditorAlias": "Umbraco.Textbox",
"view": "textbox"
},
{
"propertyEditorAlias": "Imulus.Archetype",
"view": "/App_Plugins/Archetype/views/archetype.html"
}
]
app/controllers/config.controller.js
+11 -6
View File
@@ -4,19 +4,19 @@ angular.module("umbraco").controller("Imulus.ArchetypeConfigController", functio
//console.log($scope.model.value);
//define empty items
var newPropertyModel = '{"alias": "", "remove": false, "collapse": false, "label": "", "helpText": "", "view": "", "value": "", "config": ""}';
var newPropertyModel = '{"alias": "", "remove": false, "collapse": false, "label": "", "helpText": "", "dataTypeId": "-88", "value": ""}';
var newFieldsetModel = '{"alias": "", "remove": false, "collapse": false, "labelTemplate": "", "tooltip": "", "icon": "", "label": "", "headerText": "", "footerText": "", "properties": [' + newPropertyModel + ']}';
var defaultFieldsetConfigModel = JSON.parse('{"showAdvancedOptions": false, "hideFieldsetToolbar": false, "enableMultipleFieldsets": false, "hideFieldsetControls": false, "hideFieldsetLabels": false, "hidePropertyLabel": false, "maxFieldsets": null, "fieldsets": [' + newFieldsetModel + ']}');
var defaultFieldsetConfigModel = JSON.parse('{"showAdvancedOptions": false, "hideFieldsetToolbar": false, "enableMultipleFieldsets": false, "hideFieldsetControls": false, "hidePropertyLabel": false, "maxFieldsets": null, "fieldsets": [' + newFieldsetModel + ']}');
//ini the model
$scope.model.value = $scope.model.value || defaultFieldsetConfigModel;
//ini the render model
initConfigRenderModel();
//get the available views
propertyEditorResource.getViews().then(function(data){
$scope.availableViews = data;
//get the available datatypes
propertyEditorResource.getAllDataTypes().then(function(data) {
$scope.availableDataTypes = data;
});
//config for the sorting
@@ -92,6 +92,11 @@ angular.module("umbraco").controller("Imulus.ArchetypeConfigController", functio
property.collapse = !iniState;
}
}
//ini the properties
_.each($scope.archetypeConfigRenderModel.fieldsets, function(fieldset){
$scope.focusProperty(fieldset.properties);
});
//setup JSON.stringify helpers
$scope.archetypeConfigRenderModel.toString = stringify;
app/controllers/controller.js
+1 -1
View File
@@ -214,7 +214,7 @@
//helper to add an empty fieldset to the render model
function getEmptyRenderFieldset (fieldsetModel)
{
return JSON.parse('{"alias": "' + fieldsetModel.alias + '", "remove": false, "properties": []}');
return JSON.parse('{"alias": "' + fieldsetModel.alias + '", "remove": false, "isValid": true, "properties": []}');
}
//helper for validation
app/directives/archetypeproperty.js
+34 -11
View File
@@ -1,4 +1,4 @@
angular.module("umbraco").directive('archetypeProperty', function ($compile, $http) {
angular.module("umbraco").directive('archetypeProperty', function ($compile, $http, propertyEditorResource, umbPropEditorHelper) {
function getFieldsetByAlias(fieldsets, alias)
{
@@ -43,21 +43,46 @@
}
var linker = function (scope, element, attrs) {
var configFieldsetModel = getFieldsetByAlias(scope.archetypeConfig.fieldsets, scope.fieldset.alias);
var view = configFieldsetModel.properties[scope.propertyConfigIndex].view;
var view = "";
var label = configFieldsetModel.properties[scope.propertyConfigIndex].label;
var config = configFieldsetModel.properties[scope.propertyConfigIndex].config;
var dataTypeId = configFieldsetModel.properties[scope.propertyConfigIndex].dataTypeId;
var config = null;
var alias = configFieldsetModel.properties[scope.propertyConfigIndex].alias;
var defaultValue = configFieldsetModel.properties[scope.propertyConfigIndex].value;
//try to convert the config to a JS object
config = jsonOrString(config, scope.archetypeConfig.developerMode, "config");
//try to convert the defaultValue to a JS object
defaultValue = jsonOrString(defaultValue, scope.archetypeConfig.developerMode, "defaultValue");
//grab info for the selected datatype, prepare for view
propertyEditorResource.getDataType(dataTypeId).then(function (data) {
//transform preValues array into object expected by propertyeditor views
var configObj = {};
_.each(data.preValues, function(p) {
configObj[p.key] = p.value;
});
config = configObj;
//determine the view to use [...] and load it
propertyEditorResource.getPropertyEditorMapping(data.selectedEditor).then(function(propertyEditor) {
var pathToView = umbPropEditorHelper.getViewPath(propertyEditor.view);
//load in the DefaultPreValues for the PropertyEditor, if any
var defaultConfigObj = {};
if (propertyEditor.hasOwnProperty('defaultPreValues')) {
_.each(propertyEditor.defaultPreValues, function(p) {
_.extend(defaultConfigObj, p)
});
}
var mergedConfig = _.extend(defaultConfigObj, config);
loadView(pathToView, mergedConfig, defaultValue, alias, scope, element);
});
});
}
function loadView(view, config, defaultValue, alias, scope, element) {
if (view)
{
$http.get(view).success(function (data) {
@@ -67,8 +92,6 @@
console.log(scope);
}
var rawTemplate = data;
//define the initial model and config
scope.model = {};
scope.model.config = {};
@@ -94,7 +117,7 @@
scope.archetypeRenderModel.fieldsets[scope.fieldsetIndex].properties[renderModelPropertyIndex].value = newValue;
});
element.html(rawTemplate).show();
element.html(data).show();
$compile(element.contents())(scope);
}
});
app/less/archetype.less
+12 -9
View File
@@ -1,4 +1,8 @@
.archetypeEditor fieldset{
.archetypeEditor {
width: 98%;
}
.archetypeEditor fieldset{
border: 1px solid #dddddd;
padding: 0;
margin-bottom: 5px;
@@ -38,8 +42,10 @@
}
label{
width: 75px;
float: left;
width: 80%;
margin-bottom: 0;
padding: 0;
}
}
@@ -53,13 +59,6 @@
border-radius: 0 0 0 5px;
}
.archetypeEditor fieldset .archetypeFieldsetLabel label{
float: left;
width: auto;
margin-bottom: 0;
padding: 0;
}
.archetypeEditor .multiPropertyTextbox{
margin-bottom: 3px;
}
@@ -243,4 +242,8 @@
.ui-sortable-placeholder {
visibility: visible !important;
background-color: #d0e7f1 !important;
}
.archetypeConfig .archetypeFieldsetCollapser{
margin-top: 5px;
}
app/resources/propertyeditor.js
+27 -3
View File
@@ -1,9 +1,33 @@
angular.module('umbraco').factory('propertyEditorResource', function($q, $http, umbRequestHelper){
return {
getViews: function() {
getAllDataTypes: function() {
// Hack - grab DataTypes from Tree API, as `dataTypeService.getAll()` isn't implemented yet
return umbRequestHelper.resourcePromise(
$http.get("/App_Plugins/Archetype/js/config.views.js"), 'Failed to retreive config for views.'
);
$http.get("/umbraco/backoffice/UmbracoTrees/DataTypeTree/GetNodes?id=-1&application=developer&tree=&isDialog=false"), 'Failed to retrieve datatypes from tree service'
).then(function (data) {
return data.map(function(d) {
return { "id": d.id, "name": d.name }
});
});
},
getDataType: function(id) {
return umbRequestHelper.resourcePromise(
$http.get("/umbraco/backoffice/UmbracoApi/DataType/GetById?id=" + id), 'Failed to retrieve datatype'
);
},
getPropertyEditorMapping: function(alias) {
return umbRequestHelper.resourcePromise(
$http.get("/App_plugins/Archetype/js/propertyEditors.views.js"), 'Failed to retrieve datatype mappings'
).then(function (data) {
var result = _.find(data, function(d) {
return d.propertyEditorAlias === alias;
});
if (result != null)
return result;
return "";
});
}
};
});
app/views/archetype.config.html
+1 -7
View File
@@ -53,14 +53,11 @@
<label>Help Text</label><input type="text" ng-model="property.helpText" />
</div>
<div>
<label>View</label><select ng-model="property.view" ng-options="view.path as view.name for view in availableViews"></select>
<label>DataType</label><select ng-model="property.dataTypeId" ng-options="value.id as value.name for (key, value) in availableDataTypes"></select>
</div>
<div>
<label>Default Value</label><input type="text" ng-model="property.value" />
</div>
<div>
<label>Config</label><textarea ng-model="property.config" /></textarea>
</div>
<div>
<label>Required</label><input type="checkbox" ng-model="property.required" />
</div>
@@ -84,9 +81,6 @@
<div>
<label>Hide fieldset editor controls?<small>Hides the fieldset add/remove/sort controls.</small></label><input type="checkbox" ng-model="archetypeConfigRenderModel.hideFieldsetControls"/>
</div>
<div>
<label>Hide fieldset labels?<small>Hides the fieldset labels.</small></label><input type="checkbox" ng-model="archetypeConfigRenderModel.hideFieldsetLabels"/>
</div>
<div>
<label>Hide property labels?<small>Hides the property labels.</small></label><input type="checkbox" ng-model="archetypeConfigRenderModel.hidePropertyLabels"/>
</div>
app/views/archetype.html
+2 -2
View File
@@ -12,11 +12,11 @@
<ul ui-sortable="sortableOptions" ng-model="archetypeRenderModel.fieldsets">
<li ng-repeat="fieldset in archetypeRenderModel.fieldsets" ng-hide="fieldset.remove">
<fieldset ng-class="{archetypeFieldsetError: !fieldset.isValid}" ng-init="fieldsetConfigModel = getConfigFieldsetByAlias(fieldset.alias)">
<div class="archetypeFieldsetLabel" ng-click="focusFieldset(fieldset)">
<div class="archetypeFieldsetLabel">
<span class="caret" ng-hide="fieldset.collapse"></span>
<span class="caret caret-right" ng-show="fieldset.collapse"></span>
<label ng-hide="model.config.hideFieldsetLabels == '1'">
<label ng-click="focusFieldset(fieldset)">
<img ng-src='{{fieldsetConfigModel.icon}}' title="{{fieldsetConfigModel.tooltip}}" />
<span ng-bind="getFieldsetTitle(fieldsetConfigModel, $index)"></span>
</label>