Bump version number

See stackoverflow for a reference

Gruntfile.js

@@ -58,6 +58,7 @@ module.exports = function(grunt) {
           'app/directives/archetypesubmitwatcher.js',
           'app/directives/archetypecustomview.js',
           'app/directives/archetypeLocalize.js',
+          'app/directives/archetypeclickoutside.js',
           'app/services/archetypeLocalizationService.js',
           'app/helpers/sampleLabelHelpers.js',
           'app/resources/archetypePropertyEditorResource.js',

app/Umbraco/Archetype.Courier/DataResolvers/ArchetypeDataResolver.cs

@@ -62,7 +62,7 @@ namespace Archetype.Courier.DataResolvers
 					{
 						foreach (var property in config.Fieldsets.SelectMany(x => x.Properties))
 						{
-							item.Dependencies.Add(property.DataTypeGuid.ToString(), ProviderIDCollection.dataTypeItemProviderGuid);
+							item.Dependencies.Add(property.DataTypeGuid.ToString(), ItemProviderIds.dataTypeItemProviderGuid);
 						}
 
 						item.Prevalues[0].Value = JsonConvert.SerializeObject(config, Formatting.None);
@@ -76,7 +76,7 @@ namespace Archetype.Courier.DataResolvers
 			if (propertyData != null && propertyData.Value != null)
 			{
 				var dataType = ExecutionContext.DatabasePersistence.RetrieveItem<DataType>(new ItemIdentifier(propertyData.DataType.ToString(),
-					ProviderIDCollection.dataTypeItemProviderGuid));
+					ItemProviderIds.dataTypeItemProviderGuid));
 
 				//Fetch the Prevalues for the current Property's DataType (if its an 'Archetype config')
 				var prevalue = dataType.Prevalues.FirstOrDefault(x => x.Alias.ToLowerInvariant().Equals("archetypeconfig"));
@@ -94,7 +94,7 @@ namespace Archetype.Courier.DataResolvers
 				if (archetype != null)
 				{
 					// get the `PropertyItemProvider` from the collection.
-					var propertyItemProvider = ItemProviderCollection.Instance.GetProvider(ProviderIDCollection.propertyDataItemProviderGuid, ExecutionContext);
+					var propertyItemProvider = ItemProviderCollection.Instance.GetProvider(ItemProviderIds.propertyDataItemProviderGuid, ExecutionContext);
 
 					foreach (var property in archetype.Fieldsets.SelectMany(x => x.Properties))
 					{
@@ -111,7 +111,7 @@ namespace Archetype.Courier.DataResolvers
 								new ContentProperty
 								{
 									Alias = property.Alias,
-									DataType = ExecutionContext.DatabasePersistence.GetUniqueId(property.DataTypeId, NodeObjectTypes.DataType),
+									DataType = ExecutionContext.DatabasePersistence.GetUniqueId(property.DataTypeId, UmbracoNodeObjectTypeIds.DataType),
 									PropertyEditorAlias = property.PropertyEditorAlias,
 									Value = property.Value
 								}
@@ -157,7 +157,7 @@ namespace Archetype.Courier.DataResolvers
 
 								// (if packaging) add a dependency for the property's data-type
 								if (direction == Direction.Packaging)
-									item.Dependencies.Add(firstDataType.DataType.ToString(), ProviderIDCollection.dataTypeItemProviderGuid);
+									item.Dependencies.Add(firstDataType.DataType.ToString(), ItemProviderIds.dataTypeItemProviderGuid);
 							}
 						}
 					}
@@ -179,7 +179,7 @@ namespace Archetype.Courier.DataResolvers
 				{
 					var dataType = ExecutionContext.DatabasePersistence.RetrieveItem<DataType>(
 						new ItemIdentifier(property.DataTypeGuid.ToString(),
-							ProviderIDCollection.dataTypeItemProviderGuid));
+							ItemProviderIds.dataTypeItemProviderGuid));
 
 					if (dataType == null)
 						continue;
@@ -203,7 +203,7 @@ namespace Archetype.Courier.DataResolvers
 						{
 							propertyInst.DataTypeGuid = property.DataTypeGuid.ToString();
 							propertyInst.DataTypeId = ExecutionContext.DatabasePersistence.GetNodeId(
-								property.DataTypeGuid, NodeObjectTypes.DataType);
+								property.DataTypeGuid, UmbracoNodeObjectTypeIds.DataType);
 							propertyInst.PropertyEditorAlias = property.PropertyEditorAlias;
 						}
 					}

app/Umbraco/Umbraco.Archetype/Api/ArchetypeDataTypeController.cs

@@ -8,6 +8,9 @@ using Umbraco.Core.Models;
 using Umbraco.Web.Models.ContentEditing;
 using Umbraco.Web.Mvc;
 using Umbraco.Web.Editors;
+using Umbraco.Core.PropertyEditors;
+using Archetype.Extensions;
+using Newtonsoft.Json;
 
 namespace Archetype.Api
 {
@@ -19,7 +22,7 @@ namespace Archetype.Api
         {
             return
                 global::Umbraco.Core.PropertyEditors.PropertyEditorResolver.Current.PropertyEditors
-                    .Select(x => new {defaultPreValues = x.DefaultPreValues, alias = x.Alias, view = x.ValueEditor.View});
+                    .Select(x => new {defaultPreValues = x.DefaultPreValuesForArchetype(), alias = x.Alias, view = x.ValueEditor.View});
         }
 
         public object GetAll() 
@@ -35,6 +38,7 @@ namespace Archetype.Api
             {
                 throw new HttpResponseException(HttpStatusCode.NotFound);
             }
+
             var dataTypeDisplay = Mapper.Map<IDataTypeDefinition, DataTypeDisplay>(dataType);
             return new { selectedEditor = dataTypeDisplay.SelectedEditor, preValues = dataTypeDisplay.PreValues };
         }

app/Umbraco/Umbraco.Archetype/Archetype.Umbraco.csproj

@@ -234,6 +234,7 @@
     <Compile Include="Extensions\ArchetypeHelper.cs" />
     <Compile Include="Extensions\HtmlHelperExtensions.cs" />
     <Compile Include="Extensions\ArchetypePropertyModelExtensions.cs" />
+    <Compile Include="Extensions\PropertyEditorExtensions.cs" />
     <Compile Include="Extensions\StringExtensions.cs" />
     <Compile Include="Models\ArchetypeModel.cs" />
     <Compile Include="Models\ArchetypePreValue.cs" />

app/Umbraco/Umbraco.Archetype/Extensions/ArchetypeHelper.cs

@@ -3,6 +3,7 @@ using System.Linq;
 using Archetype.Models;
 using Newtonsoft.Json;
 using Umbraco.Core;
+using Umbraco.Core.Logging;
 using Umbraco.Core.Models;
 using Umbraco.Core.Models.PublishedContent;
 
@@ -42,6 +43,7 @@ namespace Archetype.Extensions
                 }
                 catch (Exception ex)
                 {
+                    LogHelper.Error<ArchetypeHelper>("DeserializeJsonToArchetype", ex);
                 }
 
                 return archetype;
@@ -66,6 +68,7 @@ namespace Archetype.Extensions
                 }
                 catch (Exception ex)
                 {
+                    LogHelper.Error<ArchetypeHelper>("DeserializeJsonToArchetype", ex);
                 }
 
                 return archetype;

app/Umbraco/Umbraco.Archetype/Extensions/PropertyEditorExtensions.cs

@@ -0,0 +1,58 @@
+using System.Collections.Generic;
+using System.Linq;
+using Newtonsoft.Json;
+using Umbraco.Core.PropertyEditors;
+
+namespace Archetype.Extensions
+{
+	public static class PropertyEditorExtensions
+    {
+		/// <summary>
+		/// Formats the default prevalues for a property editor for use within an Archetype clientside context
+		/// </summary>
+		/// <param name="propertyEditor">The property editor</param>
+		/// <returns>The formatted default prevalues</returns>
+		public static IDictionary<string, object> DefaultPreValuesForArchetype(this PropertyEditor propertyEditor)
+        {
+			if (propertyEditor.DefaultPreValues == null || propertyEditor.DefaultPreValues.Any() == false)
+			{
+				return propertyEditor.DefaultPreValues;
+			}
+			var view = propertyEditor.ValueEditor.View.ToLowerInvariant();
+
+			// This is the extension point for default prevalues formatting, in case we need to handle any other
+			// property editors later on. It should be replaced with a switch statement by then, or maybe some fancy 
+			// auto discovery of formatters :)
+			if (view == "imagecropper")
+			{
+				propertyEditor.FormatImageCropperDefaultPreValuesForArchetype();
+			}
+			return propertyEditor.DefaultPreValues;
+        }
+
+		/// <summary>
+		/// Format the default prevalues of the image cropper property editor
+		/// </summary>
+		/// <param name="propertyEditor"></param>
+		/// <remarks>
+		/// In order for the image cropper to work clientside, we need to make sure it's default prevalue "focalpoint" is returned
+		/// as a JSON object and not as the string it's defined as on the image cropper property editor.
+		/// </remarks>
+		private static void FormatImageCropperDefaultPreValuesForArchetype(this PropertyEditor propertyEditor)
+		{
+			const string focalPointKey = "focalPoint";
+
+			if (propertyEditor.DefaultPreValues.ContainsKey(focalPointKey) == false || propertyEditor.DefaultPreValues[focalPointKey] == null)
+			{
+				return;
+			}
+			var focalPoint = propertyEditor.DefaultPreValues[focalPointKey].ToString();
+			if (string.IsNullOrEmpty(focalPoint))
+			{
+				return;
+			}
+			// translate the JSON string to a JSON object
+			propertyEditor.DefaultPreValues[focalPointKey] = JsonConvert.DeserializeObject(focalPoint);
+		}
+    }
+}

app/Umbraco/Umbraco.Archetype/Models/ArchetypeFieldsetModel.cs

@@ -2,6 +2,7 @@ using System.Collections.Generic;
 using System.Linq;
 using Newtonsoft.Json;
 using Umbraco.Core;
+using System;
 
 namespace Archetype.Models
 {
@@ -16,6 +17,9 @@ namespace Archetype.Models
         [JsonProperty("properties")]
         public IEnumerable<ArchetypePropertyModel> Properties;
 
+        [JsonProperty("id")]
+        public Guid Id { get; set; }
+
         public ArchetypeFieldsetModel()
         {
             Properties = new List<ArchetypePropertyModel>();
@@ -84,4 +88,4 @@ namespace Archetype.Models
         #endregion
 
     }
-}
+}

app/Umbraco/Umbraco.Archetype/Models/ArchetypeModel.cs

@@ -1,7 +1,7 @@
 using System;
 using System.Collections;
 using System.Collections.Generic;
-using System.Linq;
+using System.Linq;
 using Newtonsoft.Json;
 using Newtonsoft.Json.Linq;
 
@@ -30,15 +30,22 @@ namespace Archetype.Models
 
         public string SerializeForPersistence()
         {
+            // clear the editor state before serializing (it's temporary state data)
+            foreach(var property in Fieldsets.SelectMany(f => f.Properties.Where(p => p.EditorState != null)).ToList())
+            {
+                property.EditorState = null;
+            }
+
             var json = JObject.Parse(JsonConvert.SerializeObject(this, new JsonSerializerSettings() { ReferenceLoopHandling = ReferenceLoopHandling.Ignore }));
+
             var propertiesToRemove = new String[] { "propertyEditorAlias", "dataTypeId", "dataTypeGuid", "hostContentType" };
 
             json.Descendants().OfType<JProperty>()
               .Where(p => propertiesToRemove.Contains(p.Name))
               .ToList()
-              .ForEach(x => x.Remove());
-
-            return json.ToString(Formatting.None);
+              .ForEach(x => x.Remove());
+
+            return json.ToString(Formatting.None);
         }
     }
 }

app/Umbraco/Umbraco.Archetype/Models/ArchetypePropertyModel.cs

@@ -26,12 +26,15 @@ namespace Archetype.Models
         [JsonProperty("dataTypeGuid")]
         internal string DataTypeGuid { get; set; }
 
+        // container for temporary editor state from the Umbraco backend
+        [JsonProperty("editorState")]
+        internal UmbracoEditorState EditorState { get; set; }
+
         [JsonProperty("hostContentType")]
         internal PublishedContentType HostContentType { get; set; }
 
         public T GetValue<T>()
         {
-
             // Try Umbraco's PropertyValueConverters
             var converters = UmbracoContext.Current != null ? PropertyValueConvertersResolver.Current.Converters : Enumerable.Empty<IPropertyValueConverter>();
             if (!string.IsNullOrWhiteSpace(this.PropertyEditorAlias) && converters.Any())
@@ -88,5 +91,12 @@ namespace Archetype.Models
 
             return Attempt<T>.Fail();
         }
+
+        internal class UmbracoEditorState
+        {
+            // container for the names of any files selected for a property in the Umbraco backend
+            [JsonProperty("fileNames")]
+            public IEnumerable<string> FileNames;
+        }
     }
 }

app/Umbraco/Umbraco.Archetype/Properties/VersionInfo.cs

@@ -1,4 +1,4 @@
 using System.Reflection;
 
-[assembly: AssemblyVersion("1.8")]
-[assembly: AssemblyFileVersion("1.8")]
+[assembly: AssemblyVersion("1.10")]
+[assembly: AssemblyFileVersion("1.10-ui-rc1")]

app/Umbraco/Umbraco.Archetype/PropertyEditors/ArcheTypePropertyEditor.cs

@@ -1,155 +1,191 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using Archetype.Extensions;
-using ClientDependency.Core;
-using Newtonsoft.Json;
-using Umbraco.Core;
-using Umbraco.Core.Logging;
-using Umbraco.Core.Models;
-using Umbraco.Core.Models.Editors;
-using Umbraco.Core.PropertyEditors;
-using Umbraco.Core.Services;
-using Umbraco.Web.PropertyEditors;
-
-namespace Archetype.PropertyEditors
-{
-	[PropertyEditorAsset(ClientDependencyType.Javascript, "/App_Plugins/Archetype/js/archetype.js")]
-	[PropertyEditor(Constants.PropertyEditorAlias, "Archetype", "/App_Plugins/Archetype/views/archetype.html", ValueType = "JSON")]
-	public class ArchetypePropertyEditor : PropertyEditor
-	{
-		#region Pre Value Editor
-
-		protected override PreValueEditor CreatePreValueEditor()
-		{
-			return new ArchetypePreValueEditor();
-		}
-
-		internal class ArchetypePreValueEditor : PreValueEditor
-		{
-			[PreValueField("archetypeConfig", "Config", "/App_Plugins/Archetype/views/archetype.config.html",
-				Description = "(Required) Describe your Archetype.")]
-			public string Config { get; set; }
-
-			[PreValueField("hideLabel", "Hide Label", "boolean",
-				Description = "Hide the Umbraco property title and description, making the Archetype span the entire page width")]
-			public bool HideLabel { get; set; }
-		}
-
-		#endregion
-
-		#region Value Editor
-
-		protected override PropertyValueEditor CreateValueEditor()
-		{
-			return new ArchetypePropertyValueEditor(base.CreateValueEditor());
-		}
-
-		internal class ArchetypePropertyValueEditor : PropertyValueEditorWrapper
-		{
-			protected JsonSerializerSettings _jsonSettings;
-
-			public ArchetypePropertyValueEditor(PropertyValueEditor wrapped)
-				: base(wrapped) { }
-
-			public override string ConvertDbToString(Property property, PropertyType propertyType, IDataTypeService dataTypeService)
-			{
-				if (property.Value == null || property.Value.ToString() == "")
-					return string.Empty;
-
-				var archetype = ArchetypeHelper.Instance.DeserializeJsonToArchetype(property.Value.ToString(), propertyType.DataTypeDefinitionId);
-
-				foreach (var fieldset in archetype.Fieldsets)
-				{
-                    foreach (var propDef in fieldset.Properties.Where(p => p.DataTypeGuid != null))
-					{
-                        try
-                        {
-                            if(propDef == null || propDef.DataTypeGuid == null) continue;
-                            var dtd = ArchetypeHelper.Instance.GetDataTypeByGuid(Guid.Parse(propDef.DataTypeGuid));
-						    var propType = new PropertyType(dtd) { Alias = propDef.Alias };
-						    var prop = new Property(propType, propDef.Value);
-						    var propEditor = PropertyEditorResolver.Current.GetByAlias(dtd.PropertyEditorAlias);
-						    propDef.Value = propEditor.ValueEditor.ConvertDbToString(prop, propType, dataTypeService);
-                        }
-                        catch (Exception ex)
-                        {
-                            LogHelper.Error<ArchetypePropertyValueEditor>(ex.Message, ex);
-                        }
-					}
-				}
-
-                return archetype.SerializeForPersistence();
-			}
-
-			public override object ConvertDbToEditor(Property property, PropertyType propertyType, IDataTypeService dataTypeService)
-			{
-				if (property.Value == null || property.Value.ToString() == "")
-					return string.Empty;;
-
-				var archetype = ArchetypeHelper.Instance.DeserializeJsonToArchetype(property.Value.ToString(), propertyType.DataTypeDefinitionId);
-
-				foreach (var fieldset in archetype.Fieldsets)
-				{
-                    foreach (var propDef in fieldset.Properties.Where(p => p.DataTypeGuid != null))
-					{
-                        try
-                        {
-                            var dtd = ArchetypeHelper.Instance.GetDataTypeByGuid(Guid.Parse(propDef.DataTypeGuid));
-                            var propType = new PropertyType(dtd) { Alias = propDef.Alias };
-                            var prop = new Property(propType, propDef.Value);
-                            var propEditor = PropertyEditorResolver.Current.GetByAlias(dtd.PropertyEditorAlias);
-                            propDef.Value = propEditor.ValueEditor.ConvertDbToEditor(prop, propType, dataTypeService);
-                        }
-                        catch (Exception ex)
-                        {
-                            LogHelper.Error<ArchetypePropertyValueEditor>(ex.Message, ex);
-                        }
-					}
-				}
-
-				return archetype;
-			}
-            public override object ConvertEditorToDb(ContentPropertyData editorValue, object currentValue)
-			{
-				if (editorValue.Value == null || editorValue.Value.ToString() == "")
-					return string.Empty;
-
-				var archetype = ArchetypeHelper.Instance.DeserializeJsonToArchetype(editorValue.Value.ToString(), editorValue.PreValues);
-
-				foreach (var fieldset in archetype.Fieldsets)
-				{    
-                    foreach (var propDef in fieldset.Properties.Where(p => p.DataTypeGuid != null))
-					{
-                        try
-                        {
-                            var dtd = ArchetypeHelper.Instance.GetDataTypeByGuid(Guid.Parse(propDef.DataTypeGuid));
-						    var preValues = ApplicationContext.Current.Services.DataTypeService.GetPreValuesCollectionByDataTypeId(dtd.Id);
-						    var propData = new ContentPropertyData(propDef.Value, preValues, new Dictionary<string, object>());
-                            var propEditor = PropertyEditorResolver.Current.GetByAlias(dtd.PropertyEditorAlias);
-						    propDef.Value = propEditor.ValueEditor.ConvertEditorToDb(propData, propDef.Value);
-                        }
-                        catch (Exception ex)
-                        {
-                            LogHelper.Error<ArchetypePropertyValueEditor>(ex.Message, ex);
-                        }
-					}
-				}
-
-                return archetype.SerializeForPersistence();
-			}
-
-		    internal virtual PropertyEditor GetPropertyEditor(IDataTypeDefinition dtd)
-		    {
-		        if (dtd.Id != 0) 
-                    return PropertyEditorResolver.Current.GetByAlias(dtd.PropertyEditorAlias);
-
-		        return dtd.PropertyEditorAlias.Equals(Constants.PropertyEditorAlias)
-		            ? new ArchetypePropertyEditor()
-                    : (PropertyEditor)new TextboxPropertyEditor();
-		    }
-		}
-
-		#endregion	
-	}
-}
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using Archetype.Extensions;
+using ClientDependency.Core;
+using Newtonsoft.Json;
+using Umbraco.Core;
+using Umbraco.Core.Logging;
+using Umbraco.Core.Models;
+using Umbraco.Core.Models.Editors;
+using Umbraco.Core.PropertyEditors;
+using Umbraco.Core.Services;
+using Umbraco.Web.PropertyEditors;
+using Umbraco.Web.Models.ContentEditing;
+
+namespace Archetype.PropertyEditors
+{
+	[PropertyEditorAsset(ClientDependencyType.Javascript, "../App_Plugins/Archetype/js/archetype.js")]
+	[PropertyEditor(Constants.PropertyEditorAlias, "Archetype", "../App_Plugins/Archetype/views/archetype.html", ValueType = "JSON")]
+	public class ArchetypePropertyEditor : PropertyEditor
+	{
+		#region Pre Value Editor
+
+		protected override PreValueEditor CreatePreValueEditor()
+		{
+			return new ArchetypePreValueEditor();
+		}
+
+		internal class ArchetypePreValueEditor : PreValueEditor
+		{
+			[PreValueField("archetypeConfig", "Config", "../App_Plugins/Archetype/views/archetype.config.html",
+				Description = "(Required) Describe your Archetype.")]
+			public string Config { get; set; }
+
+			[PreValueField("hideLabel", "Hide Label", "boolean",
+				Description = "Hide the Umbraco property title and description, making the Archetype span the entire page width")]
+			public bool HideLabel { get; set; }
+		}
+
+		#endregion
+
+		#region Value Editor
+
+		protected override PropertyValueEditor CreateValueEditor()
+		{
+			return new ArchetypePropertyValueEditor(base.CreateValueEditor());
+		}
+
+		internal class ArchetypePropertyValueEditor : PropertyValueEditorWrapper
+		{
+			protected JsonSerializerSettings _jsonSettings;
+
+			public ArchetypePropertyValueEditor(PropertyValueEditor wrapped)
+				: base(wrapped)
+			{
+			}
+
+			public override string ConvertDbToString(Property property, PropertyType propertyType, IDataTypeService dataTypeService)
+			{
+				if(property.Value == null || property.Value.ToString() == "")
+					return string.Empty;
+
+				var archetype = ArchetypeHelper.Instance.DeserializeJsonToArchetype(property.Value.ToString(), propertyType.DataTypeDefinitionId);
+
+				foreach (var fieldset in archetype.Fieldsets)
+				{
+					foreach (var propDef in fieldset.Properties.Where(p => p.DataTypeGuid != null))
+					{
+						try
+						{
+							if(propDef == null || propDef.DataTypeGuid == null) continue;
+							var dtd = ArchetypeHelper.Instance.GetDataTypeByGuid(Guid.Parse(propDef.DataTypeGuid));
+							var propType = new PropertyType(dtd) {Alias = propDef.Alias};
+							var prop = new Property(propType, propDef.Value);
+							var propEditor = PropertyEditorResolver.Current.GetByAlias(dtd.PropertyEditorAlias);
+							propDef.Value = propEditor.ValueEditor.ConvertDbToString(prop, propType, dataTypeService);
+						}
+						catch (Exception ex)
+						{
+							LogHelper.Error<ArchetypePropertyValueEditor>(ex.Message, ex);
+						}
+					}
+				}
+
+				return archetype.SerializeForPersistence();
+			}
+
+			public override object ConvertDbToEditor(Property property, PropertyType propertyType, IDataTypeService dataTypeService)
+			{
+				if(property.Value == null || property.Value.ToString() == "")
+					return string.Empty;
+
+				var archetype = ArchetypeHelper.Instance.DeserializeJsonToArchetype(property.Value.ToString(), propertyType.DataTypeDefinitionId);
+
+				foreach (var fieldset in archetype.Fieldsets)
+				{
+					foreach (var propDef in fieldset.Properties.Where(p => p.DataTypeGuid != null))
+					{
+						try
+						{
+							var dtd = ArchetypeHelper.Instance.GetDataTypeByGuid(Guid.Parse(propDef.DataTypeGuid));
+							var propType = new PropertyType(dtd) {Alias = propDef.Alias};
+							var prop = new Property(propType, propDef.Value);
+							var propEditor = PropertyEditorResolver.Current.GetByAlias(dtd.PropertyEditorAlias);
+							propDef.Value = propEditor.ValueEditor.ConvertDbToEditor(prop, propType, dataTypeService);
+						}
+						catch (Exception ex)
+						{
+							LogHelper.Error<ArchetypePropertyValueEditor>(ex.Message, ex);
+						}
+					}
+				}
+
+				return archetype;
+			}
+
+			public override object ConvertEditorToDb(ContentPropertyData editorValue, object currentValue)
+			{
+				if(editorValue.Value == null || editorValue.Value.ToString() == "")
+					return string.Empty;
+
+				// attempt to deserialize the current property value as an Archetype
+				var currentArchetype = currentValue != null ? ArchetypeHelper.Instance.DeserializeJsonToArchetype(currentValue.ToString(), editorValue.PreValues) : null;
+				var archetype = ArchetypeHelper.Instance.DeserializeJsonToArchetype(editorValue.Value.ToString(), editorValue.PreValues);
+
+				// get all files uploaded via the file manager (if any)
+				var uploadedFiles = editorValue.AdditionalData.ContainsKey("files") ? editorValue.AdditionalData["files"] as IEnumerable<ContentItemFile> : null;
+				foreach (var fieldset in archetype.Fieldsets)
+				{
+					// assign an id to the fieldset if it has none (e.g. newly created fieldset)
+					fieldset.Id = fieldset.Id == Guid.Empty ? Guid.NewGuid() : fieldset.Id;
+					// find the corresponding fieldset in the current Archetype value (if any)
+					var currentFieldset = currentArchetype != null ? currentArchetype.Fieldsets.FirstOrDefault(f => f.Id == fieldset.Id) : null;
+					foreach (var propDef in fieldset.Properties)
+					{
+						try
+						{
+							// find the corresponding property in the current Archetype value (if any)
+							var currentProperty = currentFieldset != null ? currentFieldset.Properties.FirstOrDefault(p => p.Alias == propDef.Alias) : null;
+							var dtd = ArchetypeHelper.Instance.GetDataTypeByGuid(Guid.Parse(propDef.DataTypeGuid));
+							var preValues = ApplicationContext.Current.Services.DataTypeService.GetPreValuesCollectionByDataTypeId(dtd.Id);
+
+							var additionalData = new Dictionary<string, object>();
+
+							// figure out if we need to pass a files collection in the additional data to the property value editor
+							if(uploadedFiles != null)
+							{
+								if(dtd.PropertyEditorAlias == Constants.PropertyEditorAlias)
+								{
+									// it's a nested Archetype - just pass all uploaded files to the value editor
+									additionalData["files"] = uploadedFiles.ToList();
+								}
+								else if (propDef.EditorState != null && propDef.EditorState.FileNames != null && propDef.EditorState.FileNames.Any())
+								{
+									// pass the uploaded files that belongs to this property (if any) to the value editor
+									var propertyFiles = propDef.EditorState.FileNames.Select(f => uploadedFiles.FirstOrDefault(u => u.FileName == f)).Where(f => f != null).ToList();
+									if(propertyFiles.Any())
+									{
+										additionalData["files"] = propertyFiles;
+									}
+								}
+							}
+							var propData = new ContentPropertyData(propDef.Value, preValues, additionalData);
+							var propEditor = PropertyEditorResolver.Current.GetByAlias(dtd.PropertyEditorAlias);
+							// make sure to send the current property value (if any) to the PE ValueEditor
+							propDef.Value = propEditor.ValueEditor.ConvertEditorToDb(propData, currentProperty != null ? currentProperty.Value : null);
+						}
+						catch (Exception ex)
+						{
+							LogHelper.Error<ArchetypePropertyValueEditor>(ex.Message, ex);
+						}
+					}
+				}
+
+				return archetype.SerializeForPersistence();
+			}
+
+			internal virtual PropertyEditor GetPropertyEditor(IDataTypeDefinition dtd)
+			{
+				if(dtd.Id != 0)
+					return PropertyEditorResolver.Current.GetByAlias(dtd.PropertyEditorAlias);
+
+				return dtd.PropertyEditorAlias.Equals(Constants.PropertyEditorAlias)
+					? new ArchetypePropertyEditor()
+					: (PropertyEditor) new TextboxPropertyEditor();
+			}
+		}
+
+		#endregion
+	}
+}

app/controllers/config.controller.js

@@ -104,7 +104,7 @@ angular.module("umbraco").controller("Imulus.ArchetypeConfigController", functio
 
     //ini the properties
     _.each($scope.archetypeConfigRenderModel.fieldsets, function(fieldset){
-            $scope.focusProperty(fieldset.properties);
+        $scope.focusProperty(fieldset.properties);
     });
 
     //setup JSON.stringify helpers
@@ -290,5 +290,5 @@ angular.module("umbraco").controller("Imulus.ArchetypeConfigController", functio
     }
 
     //archetype css
-    assetsService.loadCss("/App_Plugins/Archetype/css/archetype.css");
+    assetsService.loadCss("../App_Plugins/Archetype/css/archetype.css");
 });

app/controllers/controller.js

@@ -1,4 +1,4 @@
-angular.module("umbraco").controller("Imulus.ArchetypeController", function ($scope, $http, assetsService, angularHelper, notificationsService, $timeout, entityResource, archetypeService, archetypeLabelService, archetypeCacheService, archetypePropertyEditorResource) {
+angular.module("umbraco").controller("Imulus.ArchetypeController", function ($scope, $http, assetsService, angularHelper, notificationsService, $timeout, fileManager, entityResource, archetypeService, archetypeLabelService, archetypeCacheService, archetypePropertyEditorResource) {
 
     //$scope.model.value = "";
     $scope.model.hideLabel = $scope.model.config.hideLabel == 1;
@@ -15,6 +15,11 @@ angular.module("umbraco").controller("Imulus.ArchetypeController", function ($sc
     // store the umbraco property alias to help generate unique IDs.  Hopefully there's a better way to get this in the future :)
     $scope.umbracoHostPropertyAlias = $scope.$parent.$parent.model.alias;
 
+    $scope.overlayMenu = {
+        show: false,
+        style: {}
+    };
+
     init();
 
     //hold references to helper resources 
@@ -74,6 +79,54 @@ angular.module("umbraco").controller("Imulus.ArchetypeController", function ($sc
     };
 
     //handles a fieldset add
+    $scope.openFieldsetPicker = function ($index, event) {
+        if ($scope.canAdd() == false) {
+            return;
+        }
+
+        $scope.overlayMenu.fieldsets = [];
+        _.each($scope.model.config.fieldsets, function (fieldset) {
+            var icon = fieldset.icon;
+            $scope.overlayMenu.fieldsets.push({
+                alias: fieldset.alias,
+                label: fieldset.label,
+                icon: (fieldset.icon || "icon-document-dashed-line") // default icon if none is chosen
+            });
+            $scope.overlayMenu.index = $index;
+        });
+
+        // sanity check
+        if ($scope.overlayMenu.fieldsets.length == 0) {
+            return;
+        }
+        if ($scope.overlayMenu.fieldsets.length == 1) {
+            // only one fieldset type - no need to display the picker
+            $scope.addRow($scope.overlayMenu.fieldsets[0].alias, $index);
+            return;
+        }
+
+        // calculate overlay position
+        // - yeah... it's jQuery (ungh!) but that's how the Grid does it.
+        var offset = $(event.target).offset();
+        var scrollTop = $(event.target).closest(".umb-panel-body").scrollTop();
+        if (offset.top < 400) {
+            $scope.overlayMenu.style.top = 300 + scrollTop;
+        }
+        else {
+            $scope.overlayMenu.style.top = offset.top - 150 + scrollTop;
+        }
+        $scope.overlayMenu.show = true;
+    };
+
+    $scope.closeFieldsetPicker = function () {
+        $scope.overlayMenu.show = false;
+    };
+    
+    $scope.pickFieldset = function (fieldsetAlias, $index) {
+        $scope.closeFieldsetPicker();
+        $scope.addRow(fieldsetAlias, $index);
+    };    
+    
     $scope.addRow = function (fieldsetAlias, $index) {
         if ($scope.canAdd()) {
             if ($scope.model.config.fieldsets) {
@@ -88,9 +141,13 @@ angular.module("umbraco").controller("Imulus.ArchetypeController", function ($sc
                     $scope.model.value.fieldsets.push(newFieldset);
                 }
             }
+
             $scope.setDirty();
 
+            $scope.$broadcast("archetypeAddFieldset", {index: $index, visible: countVisible()});
+
             newFieldset.collapse = $scope.model.config.enableCollapsing ? true : false;
+            
             $scope.focusFieldset(newFieldset);
         }
     }
@@ -252,11 +309,36 @@ angular.module("umbraco").controller("Imulus.ArchetypeController", function ($sc
     //developerMode helpers
     $scope.model.value.toString = stringify;
 
+    // issue 114: register handler for file selection
+    $scope.model.value.setFiles = setFiles;
+
     //encapsulate stringify (should be built into browsers, not sure of IE support)
     function stringify() {
         return JSON.stringify(this);
     }
 
+    // issue 114: handler for file selection
+    function setFiles(files) {
+        // get all currently selected files from file manager
+        var currentFiles = fileManager.getFiles();
+        
+        // get the files already selected for this archetype (by alias)
+        var archetypeFiles = [];
+        _.each(currentFiles, function (item) {
+            if (item.alias === $scope.model.alias) {
+                archetypeFiles.push(item.file);
+            }
+        });
+
+        // add the newly selected files
+        _.each(files, function (file) {
+            archetypeFiles.push(file);
+        });
+
+        // update the selected files for this archetype (by alias)
+        fileManager.setFiles($scope.model.alias, archetypeFiles);
+    }
+
     //watch for changes
     $scope.$watch('model.value', function (v) {
         if ($scope.model.config.developerMode) {
@@ -266,6 +348,11 @@ angular.module("umbraco").controller("Imulus.ArchetypeController", function ($sc
                 $scope.model.value.toString = stringify;
             }
         }
+
+        // issue 114: re-register handler for files selection and reset the currently selected files on the file manager
+        $scope.model.value.setFiles = setFiles;
+        fileManager.setFiles($scope.model.alias, []);
+
         // reset submit watcher counter on save
         $scope.activeSubmitWatcher = 0;
     });
@@ -360,7 +447,7 @@ angular.module("umbraco").controller("Imulus.ArchetypeController", function ($sc
     }
 
     //archetype css
-    assetsService.loadCss("/App_Plugins/Archetype/css/archetype.css");
+    assetsService.loadCss("../App_Plugins/Archetype/css/archetype.css");
 
     //custom css
     if($scope.model.config.customCssPath)

app/directives/archetypeclickoutside.js

@@ -0,0 +1,29 @@
+angular.module("umbraco.directives")
+    .directive('archetypeClickOutside', function ($timeout, $parse) {
+        return {
+            restrict: 'A',
+            link: function (scope, element, attrs, ctrl) {
+                var fn = $parse(attrs.archetypeClickOutside);
+
+                // add click event handler (delayed so we don't trigger the callback immediately if this directive itself was triggered by a mouse click)
+                $timeout(function () {
+                  $(document).on("click", mouseClick);
+                }, 500);
+
+                function mouseClick(event) {  
+                    if($(event.target).closest(element).length > 0) {
+                        return;
+                    }
+                    var callback = function () {
+                        fn(scope, { $event: event });
+                    };
+                    scope.$apply(callback);
+                }
+
+                // unbind event
+                scope.$on('$destroy', function () {
+                    $(document).off("click", mouseClick);
+                });
+            }
+        };
+    });

app/directives/archetypeproperty.js

@@ -1,4 +1,4 @@
-angular.module("umbraco.directives").directive('archetypeProperty', function ($compile, $http, archetypePropertyEditorResource, umbPropEditorHelper, $timeout, $rootScope, $q, editorState, archetypeService, archetypeCacheService) {
+angular.module("umbraco.directives").directive('archetypeProperty', function ($compile, $http, archetypePropertyEditorResource, umbPropEditorHelper, $timeout, $rootScope, $q, fileManager, editorState, archetypeService, archetypeCacheService) {
 
     var linker = function (scope, element, attrs, ngModelCtrl) {
         var configFieldsetModel = archetypeService.getFieldsetByAlias(scope.archetypeConfig.fieldsets, scope.fieldset.alias);
@@ -40,64 +40,12 @@ angular.module("umbraco.directives").directive('archetypeProperty', function ($c
 
                 var mergedConfig = _.extend(defaultConfigObj, config);
 
-                loadView(pathToView, mergedConfig, defaultValue, alias, propertyAlias, scope, element, ngModelCtrl, propertyValueChanged);
+                loadView(pathToView, mergedConfig, defaultValue, alias, propertyAlias, scope, element, ngModelCtrl, configFieldsetModel);
             });
         });
-
-        scope.$on("archetypeFormSubmitting", function (ev, args) {
-            // validate all fieldset properties
-            _.each(scope.fieldset.properties, function (property) {
-                validateProperty(scope.fieldset, property);
-            });
-
-            var validationKey = "validation-f" + scope.fieldsetIndex;
-            ngModelCtrl.$setValidity(validationKey, scope.fieldset.isValid);
-        });
-
-        scope.$on("archetypeRemoveFieldset", function (ev, args) {
-            var validationKey = "validation-f" + args.index;
-            ngModelCtrl.$setValidity(validationKey, true);
-        });
-
-
-        // called when the value of any property in a fieldset changes
-        function propertyValueChanged(fieldset, property) {
-            // it's the Umbraco way to hide the invalid state when altering an invalid property, even if the new value isn't valid either
-            property.isValid = true;
-            setFieldsetValidity(fieldset);
-        }
-
-        // validate a property in a fieldset
-        function validateProperty(fieldset, property) {
-            var propertyConfig = archetypeService.getPropertyByAlias(configFieldsetModel, property.alias);
-            if (propertyConfig) {
-                // use property.value !== property.value to check for NaN values on numeric inputs
-                if (propertyConfig.required && (property.value == null || property.value === "" || property.value !== property.value)) {
-                    property.isValid = false;
-                }
-                // issue 116: RegEx validate property value
-                // Only validate the property value if anything has been entered - RegEx is considered a supplement to "required".
-                if (property.isValid == true && propertyConfig.regEx && property.value) {
-                    var regEx = new RegExp(propertyConfig.regEx);
-                    if (regEx.test(property.value) == false) {
-                        property.isValid = false;
-                    }
-                }
-            }
-
-            setFieldsetValidity(fieldset);
-        }
-
-        function setFieldsetValidity(fieldset) {
-            // mark the entire fieldset as invalid if there are any invalid properties in the fieldset, otherwise mark it as valid
-            fieldset.isValid =
-                _.find(fieldset.properties, function (property) {
-                    return property.isValid == false
-                }) == null;
-        }
     }
 
-    function loadView(view, config, defaultValue, alias, propertyAlias, scope, element, ngModelCtrl, propertyValueChanged) {
+    function loadView(view, config, defaultValue, alias, propertyAlias, scope, element, ngModelCtrl, configFieldsetModel) {
         if (view)
         {
             $http.get(view, { cache: true }).success(function (data) {
@@ -120,9 +68,13 @@ angular.module("umbraco.directives").directive('archetypeProperty', function ($c
                         archetypeService.getFieldset(scope).properties.push(JSON.parse('{"alias": "' + alias + '", "value": "' + defaultValue + '"}'));
                         scope.renderModelPropertyIndex = archetypeService.getPropertyIndexByAlias(archetypeService.getFieldset(scope).properties, alias);
                     }
+
                     scope.renderModel = {};
                     scope.model.value = archetypeService.getFieldsetProperty(scope).value;
 
+                    //init the property editor state
+                    archetypeService.getFieldsetProperty(scope).editorState = {};
+
                     //set the config from the prevalues
                     scope.model.config = config;
 
@@ -141,18 +93,37 @@ angular.module("umbraco.directives").directive('archetypeProperty', function ($c
                         }
                     }
 
+                    //upload datatype hack
+                    if(view.indexOf('fileupload.html') != -1) {
+                        scope.propertyForm = scope.form;
+                        scope.model.validation = {};
+                        scope.model.validation.mandatory = 0;
+                    }
+
                     //some items need an alias
                     scope.model.alias = "archetype-property-" + propertyAlias;
+                    //some items also need an id (file upload for example)
+                    scope.model.id = propertyAlias;
 
                     //watch for changes since there is no two-way binding with the local model.value
                     scope.$watch('model.value', function (newValue, oldValue) {
+                        
                         archetypeService.getFieldsetProperty(scope).value = newValue;
 
                         // notify the linker that the property value changed
-                        propertyValueChanged(archetypeService.getFieldset(scope), archetypeService.getFieldsetProperty(scope));
+                        archetypeService.propertyValueChanged(archetypeService.getFieldset(scope), archetypeService.getFieldsetProperty(scope));
                     });
 
                     scope.$on('archetypeFormSubmitting', function (ev, args) {
+                        // validate all fieldset properties
+                        _.each(scope.fieldset.properties, function (property) {
+                            archetypeService.validateProperty(scope.fieldset, property, configFieldsetModel);
+                        });
+
+                        var validationKey = "validation-f" + scope.fieldsetIndex;
+
+                        ngModelCtrl.$setValidity(validationKey, scope.fieldset.isValid);
+
                         // did the value change (if it did, it most likely did so during the "formSubmitting" event)
                         var property = archetypeService.getFieldsetProperty(scope);
 
@@ -162,10 +133,34 @@ angular.module("umbraco.directives").directive('archetypeProperty', function ($c
                             archetypeService.getFieldsetProperty(scope).value = scope.model.value;
 
                             // notify the linker that the property value changed
-                            propertyValueChanged(archetypeService.getFieldset(scope), archetypeService.getFieldsetProperty(scope));
+                            archetypeService.propertyValueChanged(archetypeService.getFieldset(scope), archetypeService.getFieldsetProperty(scope));
                         }
                     });
 
+                    // issue 114: handle file selection on property editors
+                    scope.$on("filesSelected", function (event, args) {
+                        // populate the fileNames collection on the property editor state
+                        var property = archetypeService.getFieldsetProperty(scope);
+
+                        property.editorState.fileNames = [];
+
+                        _.each(args.files, function (item) {
+                            property.editorState.fileNames.push(item.name);
+                        });
+
+                        // remove the files set for this property
+                        // NOTE: we can't use property.alias because the file manager registers the selected files on the assigned Archetype property alias (e.g. "archetype-property-archetype-property-archetype-property-content-0-2-0-1-0-0")
+                        fileManager.setFiles(scope.model.alias, []);
+
+                        // now tell the containing Archetype to pick up the selected files
+                        scope.archetypeRenderModel.setFiles(args.files);
+                    });
+
+                    scope.$on("archetypeRemoveFieldset", function (ev, args) {
+                        var validationKey = "validation-f" + args.index;
+                        ngModelCtrl.$setValidity(validationKey, true);
+                    });
+
                     element.html(data).show();
                     $compile(element.contents())(scope);
 
@@ -196,4 +191,4 @@ angular.module("umbraco.directives").directive('archetypeProperty', function ($c
             umbracoForm: '='
         }
     }
-});
+});

app/langs/da-dk.js

@@ -1,6 +1,7 @@
 {
 	"label": "Label",
 	"alias": "Alias",
+	"addFieldset": "Tilføj et element",
 	"hideFieldsetControls": "Skjul fieldsets?",
 	"hideFieldsetControlsDescription": "Skjuler kontrollerne tilføj/fjern/sortér.",
 	"toggleAdvanced": "Slå avancerede muligheder til/fra",

app/langs/da.js

@@ -1,6 +1,7 @@
 {
 	"label": "Label",
 	"alias": "Alias",
+	"addFieldset": "Tilføj et element",
 	"hideFieldsetControls": "Skjul fieldsets?",
 	"hideFieldsetControlsDescription": "Skjuler kontrollerne tilføj/fjern/sortér.",
 	"toggleAdvanced": "Slå avancerede muligheder til/fra",

app/langs/de-de.js

@@ -1,6 +1,7 @@
 {
 	"label": "Label",
 	"alias": "Alias",
+	"addFieldset": "Add an item",
 	"hideFieldsetControls": "Hide Fieldset Controls?",
 	"hideFieldsetControlsDescription": "Hides the fieldset add/remove/sort controls.",
 	"toggleAdvanced": "Toggle Advanced Options",

app/langs/de.js

@@ -1,6 +1,7 @@
 {
 	"label": "Label",
 	"alias": "Alias",
+	"addFieldset": "Add an item",
 	"hideFieldsetControls": "Hide Fieldset Controls?",
 	"hideFieldsetControlsDescription": "Hides the fieldset add/remove/sort controls.",
 	"toggleAdvanced": "Toggle Advanced Options",

app/langs/en-gb.js

@@ -1,6 +1,7 @@
 {
 	"label": "Label",
 	"alias": "Alias", 
+	"addFieldset": "Add an item",
 	"hideFieldsetControls": "Hide Fieldset Controls?",
 	"hideFieldsetControlsDescription": "Hides the fieldset add/remove/sort controls.",
 	"toggleAdvanced": "Toggle Advanced Options",

app/langs/en-us.js

@@ -1,6 +1,7 @@
 {
 	"label": "Label",
 	"alias": "Alias",
+	"addFieldset": "Add an item",
 	"hideFieldsetControls": "Hide Fieldset Controls?",
 	"hideFieldsetControlsDescription": "Hides the fieldset add/remove/sort controls.",
 	"toggleAdvanced": "Toggle Advanced Options",

app/langs/en.js

@@ -1,6 +1,7 @@
 {
 	"label": "Label",
 	"alias": "Alias",
+	"addFieldset": "Add an item",
 	"hideFieldsetControls": "Hide Fieldset Controls?",
 	"hideFieldsetControlsDescription": "Hides the fieldset add/remove/sort controls.",
 	"toggleAdvanced": "Toggle Advanced Options",

app/langs/es-es.js

@@ -1,6 +1,7 @@
 {
 	"label": "Label",
 	"alias": "Alias",
+	"addFieldset": "Add an item",
 	"hideFieldsetControls": "Hide Fieldset Controls?",
 	"hideFieldsetControlsDescription": "Hides the fieldset add/remove/sort controls.",
 	"toggleAdvanced": "Toggle Advanced Options",

app/langs/es.js

@@ -1,6 +1,7 @@
 {
 	"label": "Label",
 	"alias": "Alias",
+	"addFieldset": "Add an item",
 	"hideFieldsetControls": "Hide Fieldset Controls?",
 	"hideFieldsetControlsDescription": "Hides the fieldset add/remove/sort controls.",
 	"toggleAdvanced": "Toggle Advanced Options",

app/langs/fr-fr.js

@@ -1,6 +1,7 @@
 {
 	"label": "Label",
 	"alias": "Alias",
+	"addFieldset": "Add an item",
 	"hideFieldsetControls": "Hide Fieldset Controls?",
 	"hideFieldsetControlsDescription": "Hides the fieldset add/remove/sort controls.",
 	"toggleAdvanced": "Toggle Advanced Options",

app/langs/he-il.js

@@ -1,6 +1,7 @@
 {
 	"label": "Label",
 	"alias": "Alias",
+	"addFieldset": "Add an item",
 	"hideFieldsetControls": "Hide Fieldset Controls?",
 	"hideFieldsetControlsDescription": "Hides the fieldset add/remove/sort controls.",
 	"toggleAdvanced": "Toggle Advanced Options",

app/langs/it-it.js

@@ -1,6 +1,7 @@
 {
 	"label": "Label",
 	"alias": "Alias",
+	"addFieldset": "Add an item",
 	"hideFieldsetControls": "Hide Fieldset Controls?",
 	"hideFieldsetControlsDescription": "Hides the fieldset add/remove/sort controls.",
 	"toggleAdvanced": "Toggle Advanced Options",

app/langs/ja-jp.js

@@ -1,6 +1,7 @@
 {
 	"label": "Label",
 	"alias": "Alias",
+	"addFieldset": "Add an item",
 	"hideFieldsetControls": "Hide Fieldset Controls?",
 	"hideFieldsetControlsDescription": "Hides the fieldset add/remove/sort controls.",
 	"toggleAdvanced": "Toggle Advanced Options",

app/langs/ko-kr.js

@@ -1,6 +1,7 @@
 {
 	"label": "Label",
 	"alias": "Alias",
+	"addFieldset": "Add an item",
 	"hideFieldsetControls": "Hide Fieldset Controls?",
 	"hideFieldsetControlsDescription": "Hides the fieldset add/remove/sort controls.",
 	"toggleAdvanced": "Toggle Advanced Options",

app/langs/nb-no.js

@@ -1,6 +1,7 @@
 {
 	"label": "Label",
 	"alias": "Alias",
+	"addFieldset": "Add an item",
 	"hideFieldsetControls": "Hide Fieldset Controls?",
 	"hideFieldsetControlsDescription": "Hides the fieldset add/remove/sort controls.",
 	"toggleAdvanced": "Toggle Advanced Options",

app/langs/nl-nl.js

@@ -1,6 +1,7 @@
 {
 	"label": "Label",
 	"alias": "Alias",
+	"addFieldset": "Add an item",
 	"hideFieldsetControls": "Hide Fieldset Controls?",
 	"hideFieldsetControlsDescription": "Hides the fieldset add/remove/sort controls.",
 	"toggleAdvanced": "Toggle Advanced Options",

app/langs/pl-pl.js

@@ -1,6 +1,7 @@
 {
 	"label": "Label",
 	"alias": "Alias",
+	"addFieldset": "Add an item",
 	"hideFieldsetControls": "Hide Fieldset Controls?",
 	"hideFieldsetControlsDescription": "Hides the fieldset add/remove/sort controls.",
 	"toggleAdvanced": "Toggle Advanced Options",

app/langs/pt-br.js

@@ -1,6 +1,7 @@
 {
 	"label": "Label",
 	"alias": "Alias",
+	"addFieldset": "Add an item",
 	"hideFieldsetControls": "Hide Fieldset Controls?",
 	"hideFieldsetControlsDescription": "Hides the fieldset add/remove/sort controls.",
 	"toggleAdvanced": "Toggle Advanced Options",

app/langs/ru-ru.js

@@ -1,6 +1,7 @@
 {
 	"label": "Label",
 	"alias": "Alias",
+	"addFieldset": "Add an item",
 	"hideFieldsetControls": "Hide Fieldset Controls?",
 	"hideFieldsetControlsDescription": "Hides the fieldset add/remove/sort controls.",
 	"toggleAdvanced": "Toggle Advanced Options",

app/langs/sv-se.js

@@ -1,6 +1,7 @@
 {
 	"label": "Label",
 	"alias": "Alias",
+	"addFieldset": "Add an item",
 	"hideFieldsetControls": "Hide Fieldset Controls?",
 	"hideFieldsetControlsDescription": "Hides the fieldset add/remove/sort controls.",
 	"toggleAdvanced": "Toggle Advanced Options",

app/langs/zh-cn.js

@@ -1,6 +1,7 @@
 {
 	"label": "Label",
 	"alias": "Alias",
+	"addFieldset": "Add an item",
 	"hideFieldsetControls": "Hide Fieldset Controls?",
 	"hideFieldsetControlsDescription": "Hides the fieldset add/remove/sort controls.",
 	"toggleAdvanced": "Toggle Advanced Options",

app/less/archetype.less

@@ -23,19 +23,28 @@
     }
 
     .icon {
-        color: #333;
+        color: #ddd;
+        padding: 2px;
+        font-size: 16px;
+        &:hover {
+            color: #333;
+        }
+        &.icon-delete:hover {
+            color: #b94a48;
+        }
     }
 
     .fieldsetIcon {
         float: left;
-        padding-right: 4px;
+        padding: 0 4px 0 0;
+        color: #333;
+        vertical-align: text-bottom;
     }
 
     fieldset {
-        border: 1px solid #dddddd;
+        border-bottom: 1px dashed #dddddd;
         padding: 0;
         margin-bottom: 5px;
-        background-color: #f1f1f1;
         clear: both;
         display: inline-block;
         width: 100%;
@@ -64,11 +73,28 @@
             min-height: 42px;
 
             .label-sub {
-                padding: 8px 0 4px 0;
+                padding: 8px 0 8px 0;
                 display: inline-block;
+                min-height: 20px; /* this makes the header clickable when there's no icon and no text */
                 &.module-label {
                     width: 100%;
                 }
+                &:hover {
+                    cursor: pointer;
+    
+                    label  {
+                        span {
+                            text-decoration: underline;
+                        }
+                        &:hover {
+                            cursor: pointer;
+                        }
+                    }
+                    
+                    .caret-right {
+                        border-left-color: #333;
+                    }
+                }
             }
 
             .dropdown-menu {
@@ -89,27 +115,14 @@
                 cursor: default;
             }
 
-            &.enableCollapsing:hover {
-                cursor: pointer;
-
-                label  {
-                    span {
-                        text-decoration: underline;
-                    }
-                    &:hover {
-                        cursor: pointer;
-                    }
-                }
-            }
-
             .caret {
-                margin: 8px 1px 0 15px;
+                margin: 8px 1px 0 2px;
                 position: absolute;
 
                 &.caret-right {
                     border-bottom: 4px solid transparent;
                     border-top: 4px solid transparent;
-                    border-left: 4px solid #000000;
+                    border-left: 4px solid #ddd;
                     content: "";
                     margin-top: 6px;
                 }
@@ -117,10 +130,10 @@
 
             label {
                 margin-bottom: 0;
-                margin-left: 38px;
+                margin-left: 18px;
                 white-space: nowrap;
                 padding: 0;
-                width: ~"calc(100% - 132px)";
+                width: ~"calc(100% - 144px)";
                 position: absolute;
                 span {
                     display: block;
@@ -128,7 +141,9 @@
                     text-overflow: ellipsis;
                 }
                 &.dimmed {
-                    color: #d9d9d9;
+                    i, span {
+                        color: #d9d9d9 !important;
+                    }
                 }
             }
 
@@ -138,6 +153,9 @@
                 right: 15px;
                 top: 0;
             }
+            
+            &:hover {
+            }
         }
 
         .archetypePropertyError {
@@ -157,9 +175,8 @@
         .archetypeCollapser {
             clear: both;
             height: 100%;
-            padding-top: 12px;
+            padding: 12px 0 0 20px;
             background-color: #fff;
-            border-top: 1px solid silver;
             border-radius: 0 0 0 5px;
 
             form {
@@ -191,13 +208,25 @@
         border: 1px solid #b94a48;
     }
 
-    .archetypeAddButton:hover {
-        text-decoration: none;
-        cursor: pointer;
-
-        .archetypeAddButtonText {
-            text-decoration: underline;
+    .archetypeAddButton {
+        color: #ddd;
+        .icon {
+            vertical-align: text-top;
         }
+        &:hover {
+            color: #333;
+            text-decoration: none;
+            cursor: pointer;
+
+            .archetypeAddButtonText {
+                text-decoration: underline;
+            }
+
+            .icon {
+                color: #333;
+            }
+        }
+
     }
 
     .multiPropertyTextbox {
@@ -214,6 +243,10 @@
             color: #343434;
         }
     }
+
+    .fieldsetPicker .icon {
+        color: #333;
+    }
 }
 
 .archetypeEditor, .archetypeConfig {

app/resources/archetypePropertyEditorResource.js

@@ -3,24 +3,24 @@ angular.module('umbraco.resources').factory('archetypePropertyEditorResource', f
         getAllDataTypes: function() {
             // Hack - grab DataTypes from Tree API, as `dataTypeService.getAll()` isn't implemented yet
             return umbRequestHelper.resourcePromise(
-                $http.get("/umbraco/backoffice/ArchetypeApi/ArchetypeDataType/GetAll"), 'Failed to retrieve datatypes from tree service'
+                $http.get("backoffice/ArchetypeApi/ArchetypeDataType/GetAll"), 'Failed to retrieve datatypes from tree service'
             );
         },
         getDataType: function (guid, useDeepDatatypeLookup, contentTypeAlias, propertyTypeAlias, archetypeAlias, nodeId) {
             if(useDeepDatatypeLookup) {
             	return umbRequestHelper.resourcePromise(
-            		$http.get("/umbraco/backoffice/ArchetypeApi/ArchetypeDataType/GetByGuid?guid=" + guid + "&contentTypeAlias=" + contentTypeAlias + "&propertyTypeAlias=" + propertyTypeAlias + "&archetypeAlias=" + archetypeAlias + "&nodeId=" + nodeId), 'Failed to retrieve datatype'
+            		$http.get("backoffice/ArchetypeApi/ArchetypeDataType/GetByGuid?guid=" + guid + "&contentTypeAlias=" + contentTypeAlias + "&propertyTypeAlias=" + propertyTypeAlias + "&archetypeAlias=" + archetypeAlias + "&nodeId=" + nodeId), 'Failed to retrieve datatype'
         		);
             }
             else {
                 return umbRequestHelper.resourcePromise(
-                    $http.get("/umbraco/backoffice/ArchetypeApi/ArchetypeDataType/GetByGuid?guid=" + guid , { cache: true }), 'Failed to retrieve datatype'
+                    $http.get("backoffice/ArchetypeApi/ArchetypeDataType/GetByGuid?guid=" + guid , { cache: true }), 'Failed to retrieve datatype'
                 );
             }
         },
         getPropertyEditorMapping: function(alias) {
             return umbRequestHelper.resourcePromise(
-                $http.get("/umbraco/backoffice/ArchetypeApi/ArchetypeDataType/GetAllPropertyEditors", { cache: true }), 'Failed to retrieve datatype mappings'
+                $http.get("backoffice/ArchetypeApi/ArchetypeDataType/GetAllPropertyEditors", { cache: true }), 'Failed to retrieve datatype mappings'
             ).then(function (data) {
                 var result = _.find(data, function(d) {
                     return d.alias === alias;

app/services/archetypeCacheService.js

@@ -3,6 +3,7 @@ angular.module('umbraco.services').factory('archetypeCacheService', function (ar
 
     var isEntityLookupLoading = false;
     var entityCache = [];
+
     var isDatatypeLookupLoading = false;
     var datatypeCache = [];
 

app/services/archetypeLabelService.js

@@ -1,11 +1,6 @@
 angular.module('umbraco.services').factory('archetypeLabelService', function (archetypeCacheService) {
     //private
 
-    var isEntityLookupLoading = false;
-    var entityCache = [];
-    var isDatatypeLookupLoading = false;
-    var datatypeCache = [];
-
     function executeFunctionByName(functionName, context) {
         var args = Array.prototype.slice.call(arguments).splice(2);
 
@@ -24,6 +19,7 @@ angular.module('umbraco.services').factory('archetypeLabelService', function (ar
     }
 
     function getNativeLabel(datatype, value, scope) {
+
     	switch (datatype.selectedEditor) {
     		case "Imulus.UrlPicker":
     			return imulusUrlPicker(value, scope, {});
@@ -33,11 +29,27 @@ angular.module('umbraco.services').factory('archetypeLabelService', function (ar
                 return coreMntp(value, scope, datatype);
             case "Umbraco.MediaPicker":
                 return coreMediaPicker(value, scope, datatype);
+            case "Umbraco.DropDown":
+                return coreDropdown(value, scope, datatype);
     		default:
     			return "";
     	}
     }
 
+    function coreDropdown(value, scope, args) {
+
+        if(!value)
+            return "";
+
+        var prevalue = args.preValues[0].value[value];
+
+        if(prevalue) {
+            return prevalue.value;
+        }
+
+        return "";
+    }
+
     function coreMntp(value, scope, args) {
         var ids = value.split(',');
         var type = "Document";
@@ -128,7 +140,7 @@ angular.module('umbraco.services').factory('archetypeLabelService', function (ar
         }
 
         var suffix = "";
-        var strippedText = $(value).text();
+        var strippedText = $("<div/>").html(value).text();
 
         if(strippedText.length > args.contentLength) {
         	suffix = "…";
@@ -152,14 +164,24 @@ angular.module('umbraco.services').factory('archetypeLabelService', function (ar
             if (template.length < 1)
                 return fieldsetConfig.label;
 
-            var rgx = /{{([^)].*)}}/g;
+            var rgx = /({{(.*?)}})*/g;
             var results;
             var parsedTemplate = template;
 
-            while ((results = rgx.exec(template)) !== null) {
+            var rawMatches = template.match(rgx);
+            
+            var matches = [];
+
+            _.each(rawMatches, function(match){
+                if(match) {
+                    matches.push(match);
+                }
+            });
+
+            _.each(matches, function (match) {
 
                 // split the template in case it consists of multiple property aliases and/or functions
-                var templates = results[0].replace("{{", '').replace("}}", '').split("|");
+                var templates = match.replace("{{", '').replace("}}", '').split("|");
                 var templateLabelValue = "";
 
                 for(var i = 0; i < templates.length; i++) {
@@ -209,7 +231,7 @@ angular.module('umbraco.services').factory('archetypeLabelService', function (ar
 
                         if(propertyConfig) {
                         	var datatype = archetypeCacheService.getDatatypeByGuid(propertyConfig.dataTypeGuid);
-                        	
+
                         	if(datatype) {
 
                             	//try to get built-in label
@@ -229,8 +251,13 @@ angular.module('umbraco.services').factory('archetypeLabelService', function (ar
 
                     }                
                 }
-                parsedTemplate = parsedTemplate.replace(results[0], templateLabelValue);
-            }
+
+                if(!templateLabelValue) {
+                    templateLabelValue = "";
+                }
+                
+                parsedTemplate = parsedTemplate.replace(match, templateLabelValue);
+            });
 
             return parsedTemplate;
         }

app/services/archetypeLocalizationService.js

@@ -24,7 +24,7 @@ angular.module('umbraco.services').factory('archetypeLocalizationService', funct
         initLocalizedResources:function () {
             var deferred = $q.defer();
             userService.getCurrentUser().then(function(user){
-                $http.get("/App_plugins/Archetype/langs/" + user.locale + ".js", { cache: true }) 
+                $http.get("../App_plugins/Archetype/langs/" + user.locale + ".js", { cache: true }) 
                     .then(function(response){
                         service.resourceFileLoaded = true;
                         service.dictionary = response.data;

app/services/archetypeService.js

@@ -1,5 +1,4 @@
 angular.module('umbraco.services').factory('archetypeService', function () {
-
     //public
     return {
         //helper that returns a JS ojbect from 'value' string or the original string
@@ -67,6 +66,39 @@ angular.module('umbraco.services').factory('archetypeService', function () {
         },
         getFieldsetProperty: function (scope) {
             return this.getFieldset(scope).properties[scope.renderModelPropertyIndex];
+        },
+        setFieldsetValidity: function (fieldset) {
+            // mark the entire fieldset as invalid if there are any invalid properties in the fieldset, otherwise mark it as valid
+            fieldset.isValid =
+                _.find(fieldset.properties, function (property) {
+                    return property.isValid == false
+                }) == null;
+        },
+        validateProperty: function (fieldset, property, configFieldsetModel) {
+            var propertyConfig = this.getPropertyByAlias(configFieldsetModel, property.alias);
+
+            if (propertyConfig) {
+                // use property.value !== property.value to check for NaN values on numeric inputs
+                if (propertyConfig.required && (property.value == null || property.value === "" || property.value !== property.value)) {
+                    property.isValid = false;
+                }
+                // issue 116: RegEx validate property value
+                // Only validate the property value if anything has been entered - RegEx is considered a supplement to "required".
+                if (property.isValid == true && propertyConfig.regEx && property.value) {
+                    var regEx = new RegExp(propertyConfig.regEx);
+                    if (regEx.test(property.value) == false) {
+                        property.isValid = false;
+                    }
+                }
+            }
+
+            this.setFieldsetValidity(fieldset);
+        },
+        // called when the value of any property in a fieldset changes
+        propertyValueChanged: function (fieldset, property) {
+            // it's the Umbraco way to hide the invalid state when altering an invalid property, even if the new value isn't valid either
+            property.isValid = true;
+            this.setFieldsetValidity(fieldset);
         }
     }
 });

app/views/archetype.default.html

@@ -13,19 +13,11 @@
                         </label>
                     </div>
                     <div class="archetypeEditorControls label-sub" ng-hide="model.config.hideFieldsetControls">
-                        <i class="icon icon-add dropdown-toggle" ng-show="canAdd()" data-toggle="{{ model.config.fieldsets.length > 1 ? 'dropdown' : ''}}" ng-click="model.config.fieldsets.length == 1 ? addRow(fieldset.alias, $index) : return"></i>
-                        <ul class="dropdown-menu umb-actions">
-                            <li ng-repeat="fieldsetModel in model.config.fieldsets" ng-click="addRow(fieldsetModel.alias, $parent.$index)">
-                                <a>
-                                    <i class="fieldsetIcon icon ng-class:fieldsetModel.icon"></i>
-                                    <span class="menu-label">{{fieldsetModel.label}}</span>
-                                </a>
-                            </li>
-                        </ul>
-                        <i class="icon icon-documents" ng-click="cloneRow($index)" ng-show="canClone()"></i>
-                        <i class="icon icon-remove" ng-click="removeRow($index)" ng-show="canRemove()"></i>
-                        <i class="icon icon-power" ng-class="{dimmed: fieldset.disabled}" ng-click="enableDisable(fieldset)" ng-show="canDisable()"></i>
+                        <i class="icon icon-add" ng-show="canAdd()" ng-click="openFieldsetPicker($index, $event)"></i>
                         <i class="icon icon-navigation handle" ng-show="canSort()"></i>
+                        <i class="icon icon-documents" ng-click="cloneRow($index)" ng-show="canClone()"></i>
+                        <i class="icon icon-power" ng-click="enableDisable(fieldset)" ng-show="canDisable()"></i>
+                        <i class="icon icon-delete" ng-click="removeRow($index)" ng-show="canRemove()"></i>
                     </div>
                 </div>
                 <div class="archetypeCollapser animate-hide" ng-hide="model.config.enableCollapsing && isCollapsed(fieldset)">
@@ -49,17 +41,24 @@
         </li>
     </ul>
     <div ng-show="showAddButton()">
-        <a class="archetypeAddButton" data-toggle="{{ model.config.fieldsets.length > 1 ? 'dropdown' : ''}}" ng-click="model.config.fieldsets.length == 1 ? addRow(model.config.fieldsets[0].alias, 0) : return" prevent-default>
-            <i class="icon icon-add dropdown-toggle"></i>
-            <localize key="general_add" class="archetypeAddButtonText">Add</localize>
+        <a class="archetypeAddButton" ng-click="openFieldsetPicker(0, $event)" prevent-default>
+            <i class="icon icon-add"></i>
+            <archetype-localize key="addFieldset">Add an item</archetype-localize>
         </a>
-        <ul class="dropdown-menu umb-actions">
-            <li ng-repeat="fieldsetModel in model.config.fieldsets" ng-click="addRow(fieldsetModel.alias, 0)">
-                <a>
-                    <i class="fieldsetIcon icon ng-class:fieldsetModel.icon"></i>
-                    <span class="menu-label">{{fieldsetModel.label}}</span>
-                </a>
-            </li>
-        </ul>
+    </div>
+    <div class="usky-grid fieldsetPicker" ng-if="overlayMenu.show">
+        <div class="cell-tools-menu" ng-style="overlayMenu.style" delayed-mouseleave="closeFieldsetPicker()" archetype-click-outside="closeFieldsetPicker()">
+            <h5>
+                <archetype-localize key="addFieldset">Add an item</archetype-localize>
+            </h5>
+            <ul class="elements">
+                <li ng-repeat="fieldset in overlayMenu.fieldsets">
+                    <a ng-click="pickFieldset(fieldset.alias, overlayMenu.index)" href>
+                        <i class="icon {{fieldset.icon}}"></i>
+                        {{fieldset.label}}
+                    </a>
+                </li>
+            </ul>
+        </div>
     </div>
 </div>

config/meta.json

@@ -1,6 +1,6 @@
 {
 	"name": "Archetype",
-	"version": "1.8",
+	"version": "1.10-ui-rc1",
 	"url": "http://github.com/imulus/archetype/",
 	"author": "Imulus - Kevin Giszewski - Tom Fulton - Lee Kelleher - Matt Brailsford - Kenn Jacobsen - Et. Al.",
 	"authorUrl": "http://imulus.com/",