Remove Old Configs, fix bugs and wire-up collapser

app/controllers/config.controller.js

@@ -4,7 +4,7 @@ angular.module("umbraco").controller("Imulus.ArchetypeConfigController", functio
 
     var newPropertyModel = '{alias: "", remove: false, label: "", helpText: "", view: "", value: "", config: {}}';
     var newFieldsetModel = '{alias: "", remove: false, collapse: false, tooltip: "", icon: "", label: "", headerText: "", footerText: "", properties:[' + newPropertyModel + ']}';
-    var defaultFieldsetConfigModel = eval("({fieldsets: [" + newFieldsetModel + "]})");
+    var defaultFieldsetConfigModel = eval("({showAdvancedOptions: false, hideFieldsetToolbar: false, hideFieldsetControls: false, hideFieldsetLabels: false, hidePropertyLabel: false, maxFieldsets:1, fieldsets: [" + newFieldsetModel + "]})");
     
     $scope.model.value = $scope.model.value || defaultFieldsetConfigModel;
     

app/controllers/controller.js

@@ -1,30 +1,24 @@
 angular.module("umbraco").controller("Imulus.ArchetypeController", function ($scope, $http, assetsService) {
  
     //$scope.model.value = "";
-
     //set default value of the model
     //this works by checking to see if there is a model; then cascades to the default model then to an empty fieldset
 
-    //validate the user configs
-    $scope.model.config.defaultModel = getValidJson("$scope.model.config.defaultModel", $scope.model.config.defaultModel);
-    $scope.model.config.fieldsetModels = $scope.model.config.archetypeConfig;
+    $scope.model.config = $scope.model.config.archetypeConfig;
    
-    console.log($scope.model.config.archetypeConfig);
-
-    $scope.model.value = $scope.model.value || ($scope.model.config.defaultModel || { fieldsets: [getEmptyRenderItem($scope.model.config.fieldsetModels[0])] });
+    $scope.model.value = $scope.model.value || { fieldsets: [getEmptyRenderItem($scope.model.config.fieldsets[0])] };
 
     //ini
     $scope.archetypeRenderModel = {};
     initArchetypeRenderModel();
+    console.log($scope.archetypeRenderModel);
 
     /* add/remove/sort */
 
     //defines the options for the jquery sortable 
     //i used an ng-model="archetypeRenderModel" so the sort updates the right model
-    //configuration overrides the default
-    var configSortableOptions = getValidJson("$scope.model.config.sortableOptions", $scope.model.config.sortableOptions);
 
-    $scope.sortableOptions = configSortableOptions || {
+    $scope.sortableOptions = {
         axis: 'y',
         cursor: "move",
         handle: ".handle",
@@ -40,7 +34,7 @@
     $scope.addRow = function (fieldsetAlias, $index) {
         if ($scope.canAdd())
         {
-            if ($scope.model.config.fieldsetModels)
+            if ($scope.model.config.fieldsets)
             {
                 var newRenderItem = getEmptyRenderItem($scope.getConfigFieldsetByAlias(fieldsetAlias));
 
@@ -68,9 +62,9 @@
     //helpers for determining if a user can do something
     $scope.canAdd = function ()
     {
-        if ($scope.model.config.maxProperties)
+        if ($scope.model.config.maxFieldsets)
         {
-            return countVisible() < $scope.model.config.maxProperties;
+            return countVisible() < $scope.model.config.maxFieldsets;
         }
 
         return true;
@@ -91,16 +85,42 @@
     //helper, ini the render model from the server (model.value)
     function initArchetypeRenderModel() {
         $scope.archetypeRenderModel = $scope.model.value;
+        
+        for(var i in $scope.archetypeRenderModel.fieldsets)
+        {
+            $scope.archetypeRenderModel.fieldsets[i].remove = false;
+            $scope.archetypeRenderModel.fieldsets[i].collapse = true;
+        }
     }
 
     //helper to get the correct fieldset from config
     $scope.getConfigFieldsetByAlias = function(alias) {
-        for (var i in $scope.model.config.fieldsetModels) {
-            if ($scope.model.config.fieldsetModels[i].alias == alias) {
-                return $scope.model.config.fieldsetModels[i];
+        for (var i in $scope.model.config.fieldsets) {
+            if ($scope.model.config.fieldsets[i].alias == alias) {
+                return $scope.model.config.fieldsets[i];
             }
         }
     }
+    
+    //helper for collapsing
+    $scope.focusFieldset = function(fieldset){
+        var iniState;
+        
+        if(fieldset)
+        {
+            iniState = fieldset.collapse;
+        }
+    
+        for(var i in $scope.archetypeRenderModel.fieldsets)
+        {
+            $scope.archetypeRenderModel.fieldsets[i].collapse = true;
+        }
+        
+        if(iniState)
+        {
+            fieldset.collapse = !iniState;
+        }
+    }
 
     //helper returns valid JS or null
     function getValidJson(variable, json)
@@ -157,9 +177,10 @@
 
         for (var i in $scope.archetypeRenderModel.fieldsets) {
             if (!$scope.archetypeRenderModel.fieldsets[i].remove) {
-                //remove the 'remove' property as this is only for sorting/internal use
-                delete $scope.archetypeRenderModel.fieldsets[i].remove;
-                $scope.model.value.fieldsets.push($scope.archetypeRenderModel.fieldsets[i]);
+                //clone
+                var tempFieldset = JSON.parse(JSON.stringify( $scope.archetypeRenderModel.fieldsets[i]));
+                delete tempFieldset.remove;
+                $scope.model.value.fieldsets.push(tempFieldset);
             }
         }
     }

app/directives/archetypeproperty.js

@@ -1,12 +1,12 @@
 angular.module("umbraco").directive('archetypeProperty', function ($compile, $http) {
     
-    function getFieldsetByAlias(fieldsetModels, alias)
+    function getFieldsetByAlias(fieldsets, alias)
     {
-        for (var i in fieldsetModels)
+        for (var i in fieldsets)
         {
-            if (fieldsetModels[i].alias == alias)
+            if (fieldsets[i].alias == alias)
             {
-                return fieldsetModels[i];
+                return fieldsets[i];
             }
         }
     }
@@ -23,7 +23,7 @@
 
     var linker = function (scope, element, attrs) {
          
-        var configFieldsetModel = getFieldsetByAlias(scope.archetypeConfig.fieldsetModels, scope.fieldset.alias);
+        var configFieldsetModel = getFieldsetByAlias(scope.archetypeConfig.fieldsets, scope.fieldset.alias);
 
         var view = configFieldsetModel.properties[scope.propertyConfigIndex].view;
         var label = configFieldsetModel.properties[scope.propertyConfigIndex].label;

app/less/archetype.less

@@ -105,7 +105,8 @@
 }
 
 .archetypeConfig .archetypeDeveloperModel {
-    width: 98%;
+    width: 88%;
+    margin-left: 30px;
     height: 100px;
 }
 
@@ -132,10 +133,32 @@
     margin-bottom: 0;
 }
 
+.archetypeConfig .archetypeFieldsets {
+    margin-left: 0;
+}
+
 .archetypeConfig .archetypeFieldsetTitle {
     overflow: hidden;
 }
 
 .archetypeConfig .arechetypeCollapser{
     margin-top: 10px;
+}
+
+.archetypeConfig .archetypeOptions label{
+    width: 200px;
+}
+
+.archetypeConfig .archetypeAdvancedOptions label{
+    width: 400px;
+}
+
+.archetypeConfig .archetypeDeveloperModel {
+    margin-bottom: 10px;
+}
+
+.archetypeConfig .archetypeMaxFieldsets{
+    border: 1px solid #ddd;
+    width: 25px;
+    text-align: right;
 }

app/package.manifest

@@ -19,105 +19,6 @@
 								type: "Required"         
 							}   
 						]
-					},
-					{					
-						label: "Hide fieldset toolbar?",
-						description: "Hides the fieldset toolbar that appears when more than one fieldset model appears.",
-						key: "hideFieldsetToolbar",
-						view: "boolean",
-						validation: [
-							                       
-						]
-					},
-					{					
-						label: "Hide fieldset editor controls?",
-						description: "Hides the fieldset add/remove/sort controls.",
-						key: "hideFieldsetControls",
-						view: "boolean",
-						validation: [
-							                       
-						]
-					},
-					{					
-						label: "Hide fieldset labels?",
-						description: "Hides the fieldset labels.",
-						key: "hideFieldsetLabels",
-						view: "boolean",
-						validation: [
-							                       
-						]
-					},
-					{					
-						label: "Hide property labels?",
-						description: "Hides the property labels.",
-						key: "hidePropertyLabels",
-						view: "boolean",
-						validation: [
-							                       
-						]
-					},
-					{					
-						label: "Default Model",
-						description: "(Optional) What would you the default model to be?  Otherwise the model will defer to the Empty Fieldset Model for new items.",
-						key: "defaultModel",
-						view: "textarea",
-						validation: [
-							                       
-						]
-					},
-					{					
-						label: "Max Fieldsets",
-						description: "(Optional) How many Fieldsets are allowed?  Entering '1' will disable the controls.  Default is unlimited.",
-						key: "maxProperties",
-						view: "number",
-						validation: [
-							                       
-						]
-					},
-					{					
-						label: "Custom Wrapper Class",
-						description: "(Optional) Enter a custom CSS class that will be applied to the wrapper div.",
-						key: "customCssClass",
-						view: "textstring",
-						validation: [
-							                       
-						]
-					},
-					{					
-						label: "CSS File",
-						description: "(Optional) Enter a path for a custom CSS file to be included on the page.",
-						key: "customCssPath",
-						view: "textstring",
-						validation: [
-							                       
-						]
-					},
-					{					
-						label: "JS File",
-						description: "(Optional) Enter a path for a custom JS file to be included on the page.",
-						key: "customJsPath",
-						view: "textstring",
-						validation: [
-						 
-						]
-					},
-					{					
-						label: "Developer Mode",
-						description: "(Advanced) Turn on for developer options.",
-						key: "developerMode",
-						view: "boolean",
-						validation: [
-							                       
-						]
-					},
-					{					
-						label: "Sortable Options",
-						description: "(Advanced) Override the default sortable controls with a JSON object.",
-						key: "sortableOptions",
-						view: "textarea",
-				     	validation: [
-							                       
-						]
 					}
 				]
 			}

app/views/archetype.config.html

@@ -1,5 +1,5 @@
 <div class="archetypeConfig" ng-controller="Imulus.ArchetypeConfigController">
-    <ul ui-sortable="sortableOptions" ng-model="archetypeConfigRenderModel.fieldsets">
+    <ul class="archetypeFieldsets" ui-sortable="sortableOptions" ng-model="archetypeConfigRenderModel.fieldsets">
         <li ng-repeat="fieldset in archetypeConfigRenderModel.fieldsets" ng-hide="fieldset.remove">
             <div class="archetypeFieldsetWrapper" >
                 <div class="archetypeEditorControls">
@@ -60,5 +60,44 @@
             </div>
         </li>
     </ul>
-    <textarea class="archetypeDeveloperModel" ng-model="archetypeConfigRenderModel"></textarea>
+    
+    <div class="archetypeOptions">
+        <div>
+            <label>Hide Fieldset Toolbar?<small>Hides the fieldset toolbar that appears when more than one fieldset model appears.</small></label><input type="checkbox" ng-model="archetypeConfigRenderModel.hideFieldsetToolbar"/>
+        </div>
+        <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>
+        <div>
+            <label>Max fieldsets<small>How many Fieldsets are allowed? Entering '1' will disable the controls. Default is unlimited.</small></label><input type="text" class="archetypeMaxFieldsets" ng-model="archetypeConfigRenderModel.maxFieldsets"/>
+        </div>    
+        <div>
+            <label>Toggle Advanced Options<small>Show advanced options.</small></label><input type="checkbox" ng-model="archetypeConfigRenderModel.showAdvancedOptions"/>
+        </div>
+    </div>
+    
+    <div class="archetypeAdvancedOptions" ng-show="archetypeConfigRenderModel.showAdvancedOptions">
+        <div>
+            <label>Config Model<small>Be careful editing the text below, it controls the schema for this archetype.</small></label>
+            <textarea class="archetypeDeveloperModel" ng-model="archetypeConfigRenderModel"></textarea>
+        </div>
+        <div>
+            <label>Custom Wrapper Class<small>(Optional) Enter a custom CSS class that will be applied to the wrapper div.</small></label><input type="text" ng-model="archetypeConfigRenderModel.customCssClass"/>
+        </div>
+        <div>
+            <label>CSS File<small>(Optional) Enter a path for a custom CSS file to be included on the page.</small></label><input type="text" ng-model="archetypeConfigRenderModel.customCssPath"/>
+        </div>
+        <div>
+            <label>JS File<small>(Optional) Enter a path for a custom JS file to be included on the page.</small></label><input type="text" ng-model="archetypeConfigRenderModel.customJsPath"/>
+        </div>
+        <div>
+            <label>Toggle Developer Mode<small>Turn on for developer options.</small></label><input type="checkbox" ng-model="archetypeConfigRenderModel.developerMode"/>
+        </div>
+    </div>
 </div>

app/views/archetype.html

@@ -1,8 +1,8 @@
 <div class="archetypeEditor ng-class:model.config.customCssClass" ng-controller="Imulus.ArchetypeController">
     <textarea class="archetypeDeveloperModel" ng-show="model.config.developerMode" ng-model="archetypeRenderModel"></textarea>
-    <div class="archetypeFieldsetToolbar" ng-show="model.config.fieldsetModels.length > 1 && model.config.hideFieldsetToolbar != '1'">
+    <div class="archetypeFieldsetToolbar" ng-show="model.config.fieldsets.length > 1 && model.config.hideFieldsetToolbar != '1'">
         <ul> 
-            <li ng-repeat="fieldsetModel in model.config.fieldsetModels" ng-click="addRow(fieldsetModel.alias)">
+            <li ng-repeat="fieldsetModel in model.config.fieldsets" ng-click="addRow(fieldsetModel.alias)">
                 <img ng-src='{{fieldsetModel.icon}}' title="{{fieldsetModel.tooltip}}" />
                 <span>{{fieldsetModel.label}}</span>
             </li>
@@ -10,32 +10,34 @@
     </div> 
     <ul ui-sortable="sortableOptions" ng-model="archetypeRenderModel.fieldsets">
         <li ng-repeat="fieldset in archetypeRenderModel.fieldsets" ng-hide="fieldset.remove">
-            <fieldset ng-class="fieldset.alias" ng-init="fieldsetConfigModel=getConfigFieldsetByAlias(fieldset.alias)">
-                <label ng-hide="model.config.hideFieldsetLabels == '1'">
+            <fieldset ng-class="fieldset.alias" ng-init="fieldsetConfigModel = getConfigFieldsetByAlias(fieldset.alias)">
+                <label ng-hide="model.config.hideFieldsetLabels == '1'" ng-click="focusFieldset(fieldset)">
                     <img ng-src='{{fieldsetConfigModel.icon}}' title="{{fieldsetConfigModel.tooltip}}"/>
                     <span>{{fieldsetConfigModel.label}}</span>
                 </label>
-                <div class="archetypeEditorControls" ng-hide="model.config.hideFieldsetControls || model.config.maxProperties == '1'">
+                <div class="archetypeEditorControls" ng-hide="model.config.hideFieldsetControls || model.config.maxFieldsets == '1'">
                     <i class="icon icon-add" ng-click="addRow(fieldset.alias, $index)" ng-show="canAdd()"></i>
                     <i class="icon icon-delete" ng-click="removeRow($index)" ng-show="canRemove()"></i>
                     <i class="icon icon-navigation handle" ng-show="canSort()"></i>
                 </div>  
-                <div class="archetypeFieldsetHeaderText" ng-show="fieldsetConfigModel.headerText">
-                    <em>{{fieldsetConfigModel.headerText}}</em>
-                </div>             
-                <div class="archetypeProperty" ng-repeat="property in fieldsetConfigModel.properties">
-                    <label ng-hide="archetypeConfig.hidePropertyLabels == '1'">
-                        <span>{{property.label}}</span>
-                        <div class="archetypeFieldsetHelpText" ng-show="property.helpText">
-                            <em>{{property.helpText}}</em>
-                        </div> 
-                    </label>
+                <div class="arechetypeCollapser" ng-hide="fieldset.collapse">
+                    <div class="archetypeFieldsetHeaderText" ng-show="fieldsetConfigModel.headerText">
+                        <em>{{fieldsetConfigModel.headerText}}</em>
+                    </div>             
+                    <div class="archetypeProperty" ng-repeat="property in fieldsetConfigModel.properties">
+                        <label ng-hide="archetypeConfig.hidePropertyLabels == '1'">
+                            <span>{{property.label}}</span>
+                            <div class="archetypeFieldsetHelpText" ng-show="property.helpText">
+                                <em>{{property.helpText}}</em>
+                            </div> 
+                        </label>
 
-                    <archetype-property class="archetypeEditor ng-class:property.alias" property="property" fieldset-index="$parent.$index" fieldset="fieldset" archetype-config="model.config" property-config-index="$index" archetype-render-model="archetypeRenderModel"></archetype-property>
+                        <archetype-property class="archetypeEditor ng-class:property.alias" property="property" fieldset-index="$parent.$index" fieldset="fieldset" archetype-config="model.config" property-config-index="$index" archetype-render-model="archetypeRenderModel"></archetype-property>
+                    </div>
+                    <div class="archetypeFieldsetFooterText" ng-show="fieldsetConfigModel.footerText">
+                        <em>{{fieldsetConfigModel.footerText}}</em>
+                    </div>     
                 </div>
-                <div class="archetypeFieldsetFooterText" ng-show="fieldsetConfigModel.footerText">
-                    <em>{{fieldsetConfigModel.footerText}}</em>
-                </div>     
             </fieldset>
         </li>
     </ul>